/* ==========================================================================
   ORO — ADDITIVE SECTIONS  (v2 — depth pass)
   Loaded AFTER oro.css. Nothing here overrides an existing rule.
   All selectors namespaced `orox-`. oro.css is never edited.

   WHY clamp(px, vw, px) AND NOT rem
   ---------------------------------------------------------------
   This build sets html{font-size} to a viewport-relative value, so 1rem == 1vw
   (3.9px @390, 7.68px @768, 14.4px @1440). rem is FLUID here, not 16px, and a
   rem authored against 16px collapses on mobile. Type and spacing therefore use
   explicit px/vw clamps. Colours still come from oro.css tokens.
   ========================================================================== */

.orox {
  /* ── GOLD ─────────────────────────────────────────────────────
     Ramp taken from ORO_LANDING_PROMPT.md §3.2. The variable names are
     kept (--orox-turq etc.) so nothing downstream has to change, but every
     value is now from the gold ramp. Rules and hairlines stay warm-neutral,
     never gold — per Law 1, gold marks meaning, it is not decoration.      */
  --orox-ink: var(--_colors---neutral--800, #080808);
  --orox-line: rgb(245 242 236 / .10);          /* warm hairline, not white */
  --orox-line-strong: rgb(245 242 236 / .22);
  --orox-dim: #A39D92;                          /* text-3, warm            */
  --orox-blue: #8C6743;                         /* gold-700 bronze         */
  --orox-sky: #DDBA84;                          /* gold-300 champagne      */
  --orox-light: #EAD795;                        /* gold-200 highlight      */
  --orox-turq: #C9A46A;                         /* gold-500 PRIMARY ACCENT */
  --orox-spec: #FFF2A9;                         /* gold-100 specular       */
  --orox-paper: #F5F2EC;                        /* warm paper white        */
  --orox-radius: clamp(16px, 1.7vw, 28px);
  --orox-ease: cubic-bezier(.19, 1, .22, 1);

  --orox-fs-eyebrow: clamp(11px, .9vw, 15px);
  --orox-fs-title:   clamp(30px, 3.3vw, 60px);
  --orox-fs-lede:    clamp(15px, 1.25vw, 22px);
  --orox-fs-h:       clamp(18px, 1.5vw, 26px);
  --orox-fs-p:       clamp(13.5px, .98vw, 17px);
  --orox-fs-pct:     clamp(16px, 1.25vw, 22px);

  /* the glass recipe, reused so every surface reads as one material */
  --orox-glass:
    linear-gradient(180deg, rgb(245 242 236 / .055), rgb(245 242 236 / .016) 42%, rgb(245 242 236 / .008));
  --orox-glass-hi: inset 0 1px 0 rgb(245 242 236 / .14);

  background-color: var(--orox-ink);
  color: var(--orox-paper, #F5F2EC);
  font-family: 'Plus Jakarta Sans', sans-serif;
  position: relative;
  z-index: 2;
  padding: clamp(64px, 8vw, 140px) clamp(20px, 4vw, 64px);
  overflow: hidden;
  isolation: isolate;
}

/* ── ambient bloom — the depth the flat version was missing ─── */
.orox::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 120%;
  aspect-ratio: 2 / 1;
  left: 50%;
  top: -46%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(201, 164, 106, .11) 0%,
    rgba(255, 242, 169, .035) 34%,
    transparent 68%
  );
}

.orox--bloom-left::before  { left: 8%;  transform: none; }
.orox--bloom-right::before { left: auto; right: 6%; transform: none; }

.orox__container { max-width: 1600px; margin: 0 auto; position: relative; }

/* ── shared head ───────────────────────────────────────────── */
.orox__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--orox-fs-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orox-dim);
  margin-bottom: clamp(14px, 1.2vw, 22px);
}

.orox__eyebrow::before {
  content: "";
  width: clamp(18px, 1.7vw, 28px);
  height: 1px;
  background: linear-gradient(90deg, var(--orox-turq), transparent);
  flex: none;
}

.orox__title {
  font-size: var(--orox-fs-title);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.02em;
  background-image: linear-gradient(180deg, #F5F2EC, #A39D92);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 clamp(12px, 1vw, 20px);
  max-width: 20ch;
}

.orox__lede {
  font-size: var(--orox-fs-lede);
  line-height: 1.6;
  font-weight: 300;
  color: var(--orox-dim);
  max-width: 46ch;
  margin: 0;
}

.orox__head { margin-bottom: clamp(36px, 4.5vw, 78px); }

/* ── 1 · HOW IT WORKS ──────────────────────────────────────── */
.orox-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.4vw, 24px);
}

.orox-step {
  border-radius: var(--orox-radius);
  padding: clamp(24px, 2.4vw, 40px) clamp(22px, 2.1vw, 36px) clamp(26px, 2.6vw, 44px);
  background: var(--orox-glass);
  border: 1px solid var(--orox-line);
  box-shadow: var(--orox-glass-hi), 0 24px 60px -30px rgba(0, 0, 0, .9);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--orox-ease), border-color .5s var(--orox-ease),
              box-shadow .5s var(--orox-ease);
}

/* per-card corner glow */
.orox-step::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% 40% 55% -30%;
  background: radial-gradient(ellipse at 30% 40%, rgba(201, 164, 106, .14), transparent 70%);
  opacity: .8;
  transition: opacity .5s var(--orox-ease);
}

/* top hairline sheen */
.orox-step::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orox-sky), transparent);
  opacity: .55;
}

.orox-step:hover {
  transform: translateY(-4px);
  border-color: var(--orox-line-strong);
  box-shadow: var(--orox-glass-hi), 0 34px 70px -28px rgba(0, 0, 0, .95);
}

.orox-step:hover::before { opacity: 1; }

/* the ghost numeral — gives the card mass without an image */
.orox-step__ghost {
  position: absolute;
  z-index: -1;
  right: clamp(-6px, -.4vw, -2px);
  bottom: clamp(-18px, -1.6vw, -8px);
  font-size: clamp(96px, 9.5vw, 170px);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--orox-paper, #F5F2EC);
  opacity: .045;
  pointer-events: none;
  user-select: none;
}

.orox-step__n {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--orox-fs-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--orox-turq);
  margin-bottom: clamp(30px, 3.4vw, 60px);
}

.orox-step__n::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orox-turq);
  box-shadow: 0 0 0 4px rgba(201, 164, 106, .15);
  flex: none;
}

.orox-step__h {
  font-size: var(--orox-fs-h);
  line-height: 1.3;
  font-weight: 500;
  margin: 0 0 10px;
}

.orox-step__p {
  font-size: var(--orox-fs-p);
  line-height: 1.65;
  font-weight: 300;
  color: var(--orox-dim);
  margin: 0;
  max-width: 42ch;
}

/* ── 2 · TOKENOMICS ────────────────────────────────────────── */
.orox-token__grid {
  display: grid;
  grid-template-columns: 1fr clamp(300px, 34vw, 460px);
  gap: clamp(32px, 4vw, 80px);
  align-items: center;
}

.orox-token__supply {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2vw, 34px);
  margin-bottom: clamp(26px, 2.8vw, 46px);
}

.orox-stat {
  padding: clamp(16px, 1.5vw, 26px) clamp(16px, 1.5vw, 24px);
  border-radius: calc(var(--orox-radius) * .62);
  background: var(--orox-glass);
  border: 1px solid var(--orox-line);
  box-shadow: var(--orox-glass-hi);
}

.orox-stat__k {
  display: block;
  font-size: var(--orox-fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orox-dim);
  margin-bottom: 10px;
}

.orox-stat__v {
  font-size: var(--orox-fs-h);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
  display: block;
}

/* the donut — the section's visual anchor */
.orox-donut { position: relative; display: block; width: 100%; height: auto; }

.orox-donut__seg {
  fill: none;
  stroke-width: 26;
  stroke-linecap: butt;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  transition: stroke-width .45s var(--orox-ease), opacity .45s var(--orox-ease);
}

.orox-donut__wrap { position: relative; }

.orox-donut__wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 164, 106, .14), transparent 68%);
  filter: blur(26px);
}

.orox-donut__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.orox-donut__k {
  font-size: var(--orox-fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orox-dim);
  display: block;
  margin-bottom: 6px;
}

.orox-donut__v {
  font-size: clamp(26px, 2.6vw, 46px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  display: block;
}

.orox-donut__u {
  font-size: var(--orox-fs-p);
  color: var(--orox-dim);
  display: block;
  margin-top: 6px;
}

.orox-alloc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.orox-alloc__i {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(11px, 1.05vw, 17px) clamp(10px, .9vw, 14px);
  border-bottom: 1px solid var(--orox-line);
  border-radius: 8px;
  transition: background .35s var(--orox-ease);
}

.orox-alloc__i:hover { background: rgb(245 242 236 / .04); }
.orox-alloc__i:last-child { border-bottom: 0; }

.orox-alloc__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.orox-alloc__label {
  font-size: var(--orox-fs-p);
  font-weight: 300;
  color: #d8dde3;
  line-height: 1.45;
  flex: 1;
}

.orox-alloc__pct {
  font-size: var(--orox-fs-pct);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--orox-paper, #F5F2EC);
}

/* ── 3 · ROADMAP ───────────────────────────────────────────── */
.orox-road__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 0 clamp(32px, 4.5vw, 90px);
  align-items: start;
}

.orox-road__aside { position: sticky; top: clamp(80px, 12vh, 150px); }

/* progress meter */
.orox-prog { margin-top: clamp(24px, 2.6vw, 44px); max-width: 20rem; }

.orox-prog__k {
  font-size: var(--orox-fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orox-dim);
  display: block;
  margin-bottom: 12px;
}

.orox-prog__track {
  height: 5px;
  border-radius: 99px;
  background: rgb(245 242 236 / .09);
  overflow: hidden;
}

.orox-prog__fill {
  height: 100%;
  width: 50%;   /* two of four underway */
  border-radius: 99px;
  background: linear-gradient(90deg, var(--orox-turq), var(--orox-blue));
  box-shadow: none;
  transform-origin: left center;
}

.orox-js .orox-prog__fill { transform: scaleX(0); }

.orox-road { position: relative; }

.orox-road__rail {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--orox-turq), var(--orox-blue) 62%, rgba(255,255,255,.07));
  transform-origin: top center;
}

.orox-js .orox-road__rail { transform: scaleY(0); }

.orox-phase {
  position: relative;
  margin-left: clamp(24px, 2.4vw, 42px);
  margin-bottom: clamp(14px, 1.4vw, 22px);
  padding: clamp(20px, 2vw, 34px) clamp(20px, 2vw, 34px) clamp(22px, 2.2vw, 36px);
  border-radius: var(--orox-radius);
  background: var(--orox-glass);
  border: 1px solid var(--orox-line);
  box-shadow: var(--orox-glass-hi);
  transition: transform .5s var(--orox-ease), border-color .5s var(--orox-ease);
}

.orox-phase:hover { transform: translateX(4px); border-color: var(--orox-line-strong); }
.orox-phase:last-child { margin-bottom: 0; }

.orox-phase__dot {
  position: absolute;
  left: calc(clamp(24px, 2.4vw, 42px) * -1 - 5px);
  top: clamp(26px, 2.4vw, 40px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orox-ink);
  border: 2px solid var(--orox-line-strong);
}

.orox-phase--done .orox-phase__dot {
  background: var(--orox-turq);
  border-color: var(--orox-turq);
  box-shadow: 0 0 0 5px rgba(201, 164, 106, .14);
}

.orox-phase--live { border-color: rgba(201, 164, 106, .38); }

.orox-phase--live::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 0% 50%, rgba(201, 164, 106, .12), transparent 60%);
}

.orox-phase--todo { opacity: .72; }

.orox-phase__q {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--orox-fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orox-turq);
  margin-bottom: 10px;
}

.orox-phase--todo .orox-phase__q { color: var(--_colors---neutral--400, #737373); }

.orox-phase__tag {
  font-size: clamp(9.5px, .72vw, 12px);
  letter-spacing: .1em;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid currentColor;
  opacity: .85;
}

.orox-phase__h {
  font-size: var(--orox-fs-h);
  line-height: 1.3;
  font-weight: 500;
  margin: 0 0 9px;
}

.orox-phase__p {
  font-size: var(--orox-fs-p);
  line-height: 1.65;
  font-weight: 300;
  color: var(--orox-dim);
  margin: 0;
  max-width: 54ch;
}

/* ── 4 · PRE-FOOTER ────────────────────────────────────────── */
.orox-foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, .58fr));
  gap: clamp(32px, 3.5vw, 70px);
  padding-bottom: clamp(34px, 3.6vw, 62px);
  border-bottom: 1px solid var(--orox-line);
}

/* Type-set wordmark, deliberately NOT assets/images/oro-logo.png — that file
   is still the inherited template mark. Using it here would propagate it to a
   second place on the page. Swap this for the real logo once it is replaced. */
.orox-foot__mark {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: clamp(14px, 1.3vw, 22px);
}

.orox-wordmark {
  font-size: clamp(28px, 2.6vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  background-image: linear-gradient(180deg, #F5F2EC, var(--orox-light, #EAD795));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.orox-wordmark__sub {
  font-size: var(--orox-fs-eyebrow);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--orox-dim);
  font-weight: 500;
}

.orox-foot__blurb {
  font-size: var(--orox-fs-p);
  line-height: 1.7;
  font-weight: 300;
  color: var(--orox-dim);
  margin: 0 0 clamp(18px, 1.8vw, 30px);
  max-width: 34ch;
}

.orox-foot__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--orox-fs-eyebrow);
  letter-spacing: .06em;
  color: #cfd6dd;
  padding: 9px 16px;
  border-radius: 99px;
  border: 1px solid var(--orox-line);
  background: rgb(245 242 236 / .04);
}

.orox-foot__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orox-turq);
  box-shadow: none;
}

.orox-foot__ct {
  font-size: var(--orox-fs-eyebrow);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orox-paper, #F5F2EC);
  font-weight: 600;
  margin: 0 0 clamp(14px, 1.3vw, 22px);
}

.orox-foot__list { list-style: none; margin: 0; padding: 0; }
.orox-foot__list li { margin-bottom: clamp(9px, .9vw, 14px); }

.orox-foot__list a {
  font-size: var(--orox-fs-p);
  font-weight: 300;
  color: var(--orox-dim);
  text-decoration: none;
  transition: color .3s var(--orox-ease);
}

.orox-foot__list a:hover { color: var(--orox-paper, #F5F2EC); }

/* ── entrance staging ───────────────────────────────────────
   Gated on html.orox-js. With JS off nothing is hidden.        */
.orox-js .orox-reveal { opacity: 0; transform: translateY(18px); }
.orox.is-ready .orox-reveal {
  transition: opacity .8s var(--orox-ease), transform .8s var(--orox-ease);
}
.orox-reveal.is-in { opacity: 1; transform: none; }

/* ── responsive — layout only; type is fluid ───────────────── */
@media (max-width: 1100px) {
  .orox-token__grid { grid-template-columns: 1fr; gap: clamp(30px, 4vw, 50px); }
  .orox-donut__wrap { max-width: 380px; margin: 0 auto; }
  .orox-foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991px) {
  /* wide single-column cards: go horizontal so they are not empty slabs */
  .orox-steps { grid-template-columns: 1fr; }
  .orox-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(18px, 2.4vw, 30px);
    align-items: start;
    padding: clamp(22px, 2.6vw, 30px);
  }
  .orox-step__n { grid-column: 1; margin-bottom: 0; align-self: center; writing-mode: horizontal-tb; }
  .orox-step__body { grid-column: 2; }
  .orox-step__ghost { font-size: clamp(74px, 12vw, 110px); bottom: -14px; right: 4px; }

  .orox-road__grid { grid-template-columns: 1fr; }
  .orox-road__aside { position: static; margin-bottom: clamp(30px, 4vw, 48px); }
  .orox-prog { max-width: 100%; }
}

@media (max-width: 640px) {
  .orox-token__supply { grid-template-columns: 1fr; }
  .orox-foot__grid { grid-template-columns: 1fr; gap: 30px; }
  .orox__title { max-width: 100%; }
  .orox-step { grid-template-columns: 1fr; row-gap: 14px; }
  .orox-step__n { grid-column: 1; }
  .orox-step__body { grid-column: 1; }
}

/* ── reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .orox-js .orox-reveal { opacity: 1; transform: none; }
  .orox.is-ready .orox-reveal { transition: none; }
  .orox-js .orox-road__rail { transform: scaleY(1); }
  .orox-js .orox-prog__fill { transform: scaleX(1); }
  .orox-step, .orox-phase, .orox-alloc__i, .orox-donut__seg { transition: none; }
  .orox-step:hover, .orox-phase:hover { transform: none; }
}

/* ── forced colours ────────────────────────────────────────── */
@media (forced-colors: active) {
  .orox__title { background-image: none; color: CanvasText; }
  .orox-step, .orox-alloc__i, .orox-phase, .orox-stat { border-color: CanvasText; }
  .orox::before, .orox-step::before, .orox-donut__wrap::after { display: none; }
}

/* ==========================================================================
   v3 — SIGNATURE SECTION + FAQ
   ========================================================================== */

/* ── 5 · LEDGER — the scroll-scrubbed signature moment ─────── */
/* `.orox` sets overflow:hidden, which silently disables position:sticky on
   any descendant. `overflow: clip` clips identically WITHOUT creating a
   scroll container, so the pin works. Falls back to visible on old engines —
   the bloom may bleed slightly, which is preferable to a broken pin.        */
.orox-ledger-sc {
  padding-block: 0;
  overflow: visible;
}

@supports (overflow: clip) {
  .orox-ledger-sc { overflow: clip; }
}

.orox-ledger__rail { position: relative; height: 260vh; }

.orox-ledger__pin {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 6vw, 90px);
}

.orox-ledger__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: center;
  width: 100%;
}

/* module rows */
.orox-mod {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 1.3vw, 20px);
  padding: clamp(13px, 1.35vw, 22px) clamp(14px, 1.4vw, 22px);
  border-radius: calc(var(--orox-radius) * .55);
  border: 1px solid transparent;
  transition: background .5s var(--orox-ease), border-color .5s var(--orox-ease),
              opacity .5s var(--orox-ease);
  opacity: .42;
}

.orox-mod + .orox-mod { margin-top: clamp(6px, .6vw, 10px); }

.orox-mod.is-done {
  opacity: 1;
  background: var(--orox-glass);
  border-color: var(--orox-line);
}

.orox-mod__tick {
  width: clamp(22px, 1.9vw, 30px);
  height: clamp(22px, 1.9vw, 30px);
  border-radius: 50%;
  border: 1.5px solid var(--orox-line-strong);
  display: grid;
  place-items: center;
  flex: none;
  transition: background .45s var(--orox-ease), border-color .45s var(--orox-ease),
              box-shadow .45s var(--orox-ease);
}

.orox-mod__tick svg {
  width: 58%;
  height: 58%;
  stroke: var(--orox-ink);
  stroke-width: 3.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .3s var(--orox-ease);
}

.orox-mod.is-done .orox-mod__tick {
  background: var(--orox-turq);
  border-color: var(--orox-turq);
  box-shadow: 0 0 0 5px rgba(201, 164, 106, .14);
}

.orox-mod.is-done .orox-mod__tick svg { opacity: 1; }

.orox-mod__name {
  font-size: var(--orox-fs-p);
  font-weight: 400;
  color: #dfe4ea;
  line-height: 1.4;
}

.orox-mod__meta {
  display: block;
  font-size: clamp(10.5px, .8vw, 13px);
  color: var(--orox-dim);
  margin-top: 3px;
  letter-spacing: .04em;
}

.orox-mod__amt {
  font-size: var(--orox-fs-p);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--orox-dim);
  white-space: nowrap;
  transition: color .45s var(--orox-ease);
}

.orox-mod.is-done .orox-mod__amt { color: var(--orox-turq); }

/* the counter side */
.orox-tally { text-align: center; position: relative; }

.orox-tally__ring { position: relative; display: inline-block; width: 100%; max-width: clamp(220px, 24vw, 340px); }

.orox-tally__ring svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }

.orox-tally__track { fill: none; stroke: rgb(245 242 236 / .08); stroke-width: 8; }

.orox-tally__arc {
  fill: none;
  stroke: url(#oroxGrad);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 691.15;
  stroke-dashoffset: 691.15;
}

.orox-tally__inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.orox-tally__k {
  font-size: var(--orox-fs-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orox-dim);
  margin-bottom: 8px;
}

.orox-tally__v {
  font-size: clamp(34px, 3.6vw, 66px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background-image: linear-gradient(180deg, #F5F2EC, var(--orox-light, #EAD795));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.orox-tally__u {
  font-size: var(--orox-fs-p);
  color: var(--orox-dim);
  margin-top: 8px;
}

.orox-tally__note {
  font-size: clamp(11px, .85vw, 14px);
  color: var(--orox-dim);
  margin-top: clamp(16px, 1.6vw, 26px);
  max-width: 30ch;
  margin-inline: auto;
  line-height: 1.6;
}

/* ── 6 · FAQ ───────────────────────────────────────────────── */
/* px, not rem — 1rem is 1vw in this build, so 60rem would be 234px at 390 */
.orox-faq { max-width: 900px; }

.orox-faq__i {
  border-top: 1px solid var(--orox-line);
  overflow: hidden;
}

.orox-faq__i:last-child { border-bottom: 1px solid var(--orox-line); }

.orox-faq__i summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 24px);
  padding: clamp(18px, 1.9vw, 32px) 0;
  font-size: var(--orox-fs-h);
  font-weight: 500;
  line-height: 1.35;
  transition: color .35s var(--orox-ease);
}

.orox-faq__i summary::-webkit-details-marker { display: none; }
.orox-faq__i summary:hover { color: var(--orox-sky); }

.orox-faq__i summary:focus-visible {
  outline: 2px solid var(--orox-turq);
  outline-offset: 3px;
  border-radius: 6px;
}

.orox-faq__q { flex: 1; }

.orox-faq__sign {
  flex: none;
  width: clamp(26px, 2.2vw, 36px);
  height: clamp(26px, 2.2vw, 36px);
  border-radius: 50%;
  border: 1px solid var(--orox-line-strong);
  display: grid;
  place-items: center;
  position: relative;
  margin-top: 2px;
  transition: background .4s var(--orox-ease), border-color .4s var(--orox-ease),
              transform .4s var(--orox-ease);
}

.orox-faq__sign::before,
.orox-faq__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform .4s var(--orox-ease), opacity .4s var(--orox-ease);
}

.orox-faq__sign::before { width: 42%; height: 1.5px; }
.orox-faq__sign::after  { width: 1.5px; height: 42%; }

.orox-faq__i[open] .orox-faq__sign {
  background: var(--orox-turq);
  border-color: var(--orox-turq);
  color: var(--orox-ink);
  transform: rotate(180deg);
}

.orox-faq__i[open] .orox-faq__sign::after { transform: scaleY(0); opacity: 0; }

.orox-faq__a {
  padding: 0 clamp(44px, 4vw, 62px) clamp(20px, 2vw, 34px) 0;
  font-size: var(--orox-fs-p);
  line-height: 1.75;
  font-weight: 300;
  color: var(--orox-dim);
  max-width: 62ch;
}

.orox-faq__a strong { color: #e8edf2; font-weight: 500; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 991px) {
  .orox-ledger__grid { grid-template-columns: 1fr; gap: clamp(26px, 4vw, 40px); }
  .orox-ledger__rail { height: 220vh; }
  .orox-tally { order: -1; }
  .orox-tally__ring { max-width: 210px; }
}

@media (max-width: 640px) {
  .orox-ledger__rail { height: 190vh; }
  .orox-mod { grid-template-columns: auto 1fr; row-gap: 4px; }
  .orox-mod__amt { grid-column: 2; text-align: left; }
  .orox-faq__a { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .orox-ledger__rail { height: auto; }
  .orox-ledger__pin { position: static; min-height: 0; }
  .orox-mod { opacity: 1; background: var(--orox-glass); border-color: var(--orox-line); }
  .orox-mod__tick { background: var(--orox-turq); border-color: var(--orox-turq); }
  .orox-mod__tick svg { opacity: 1; }
  .orox-tally__arc { stroke-dashoffset: 0; }
  .orox-faq__sign, .orox-mod, .orox-mod__tick { transition: none; }
}

/* ==========================================================================
   v4 — THE CORE (full-bleed video)
   The artwork is the concept: the token at the centre of a die, traces
   radiating to the surfaces it connects. The video carries no information
   that is not also in text, so it is aria-hidden and safe to fail.
   ========================================================================== */
.orox-core-sc {
  padding: 0;
  min-height: clamp(520px, 86svh, 900px);
  display: grid;
  isolation: isolate;
}

.orox-core-sc::before { display: none; }   /* the footage is the bloom */

.orox-core__media,
.orox-core__inner { grid-area: 1 / 1; }

.orox-core__media {
  position: relative;
  overflow: hidden;
  z-index: -1;
}

.orox-core__media video,
.orox-core__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* scrims — the footage is bright at centre, so text needs its own ground */
.orox-core__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgb(8 8 8 / .92) 0%, rgb(8 8 8 / .70) 22%, rgb(8 8 8 / .18) 46%, transparent 62%),
    linear-gradient(180deg, rgb(8 8 8 / .88) 0%, rgb(8 8 8 / .22) 30%, rgb(8 8 8 / .30) 64%, rgb(8 8 8 / .96) 100%),
    radial-gradient(130% 85% at 50% 50%, transparent 26%, rgb(8 8 8 / .60) 100%);
}

.orox-core__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(40px, 5vw, 84px) clamp(20px, 4vw, 64px);
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

.orox-core__title {
  font-size: clamp(30px, 3.3vw, 60px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--orox-paper, #F5F2EC);
  margin: 0;
  max-width: 16ch;
  text-shadow: 0 2px 30px rgb(0 0 0 / .6);
}

/* the six surfaces, as the traces' destinations */
.orox-core__nodes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1vw, 18px);
  border-top: 1px solid var(--orox-line);
  padding-top: clamp(16px, 1.6vw, 26px);
}

.orox-core__node {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: var(--orox-fs-eyebrow);
  color: var(--orox-paper, #F5F2EC);
  text-shadow: 0 1px 14px rgb(0 0 0 / .9);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.orox-core__node::before {
  content: "";
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orox-turq), transparent);
  opacity: .75;
}

.orox-core__cap {
  font-size: var(--orox-fs-p);
  color: var(--orox-paper, #F5F2EC);
  text-shadow: 0 1px 18px rgb(0 0 0 / .85), 0 0 40px rgb(0 0 0 / .6);
  max-width: 44ch;
  margin: clamp(12px, 1.2vw, 20px) 0 0;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .orox-core__nodes { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
  .orox-core-sc { min-height: clamp(460px, 78svh, 720px); }
}

@media (max-width: 480px) {
  .orox-core__nodes { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .orox-core__media video { display: none; }
}

.orox-core__media img[data-orox-poster] {
  position: absolute;
  inset: 0;
  transition: opacity .6s var(--orox-ease);
}

/* ##### REVISED SECTIONS ##### */

/* ===== bento ===== */
/* ============================================================
   TOKEN UNLOCKS — what the token unlocks
   ------------------------------------------------------------
   One surfaced panel only (the check schematic). Every other
   block lives on the ground, separated by warm hairlines.
   Gold appears exactly once in the whole section: the single
   credential mark travelling the route. Nothing else is gold.
   No rem anywhere — this build sets html{font-size} to a
   viewport unit, so every size is clamp(px, vw, px).
   ============================================================ */

.orox-unlock{
  --orox-unlock-node: clamp(11px, 1vw, 14px);
  --orox-unlock-mark: clamp(6px, .52vw, 8px);
  --orox-unlock-nudge: clamp(3px, .32vw, 5px);
  --orox-unlock-edge-fs: clamp(13px, .95vw, 15px);
  /* rail meets the centre of the first and the last node exactly */
  --orox-unlock-rail-top: calc(var(--orox-unlock-nudge) + var(--orox-unlock-node) / 2);
  --orox-unlock-rail-bottom: calc(1.25 * var(--orox-unlock-edge-fs) - var(--orox-unlock-rail-top));

  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(18px,2.2vw,44px);
  row-gap:clamp(24px,2.8vw,48px);
}

/* every drawn mark in this section is measured border-box, so the rail,
   the nodes and the credential mark line up on the same axis */
.orox-unlock__node,
.orox-unlock__mark,
.orox-unlock__x,
.orox-unlock__slots i,
.orox-unlock__state::before{box-sizing:border-box;}

/* ---- band separators ------------------------------------------------ */
.orox-unlock__rule{
  grid-column:1/-1;
  display:block;height:1px;
  background:var(--orox-line);
}

/* ---- placement ------------------------------------------------------ */
.orox-unlock__statement{grid-column:1/8;}
.orox-unlock__supply   {grid-column:8/13;}
.orox-unlock__figure   {grid-column:1/6;}
.orox-unlock__grants   {grid-column:6/13;}
.orox-unlock__gov      {grid-column:1/6;}
.orox-unlock__bounds   {grid-column:6/13;}
.orox-unlock__note     {grid-column:1/-1;}

/* ---- shared type ---------------------------------------------------- */
.orox-unlock__kicker{
  display:flex;align-items:center;gap:clamp(8px,.8vw,12px);
  font-size:clamp(12px,.82vw,13px);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--orox-dim);
  margin-bottom:clamp(10px,1vw,16px);
}
.orox-unlock__tick{
  display:block;flex:none;
  width:clamp(16px,1.4vw,24px);height:1px;
  background:var(--orox-line-strong);
}
.orox-unlock__claim{
  margin:0 0 clamp(10px,1vw,18px);
  font-size:clamp(22px,2.2vw,38px);font-weight:400;
  line-height:1.16;letter-spacing:-.018em;
  color:var(--orox-paper);max-width:15ch;
}
.orox-unlock__h3{
  margin:0 0 clamp(8px,.85vw,14px);
  font-size:var(--orox-fs-h);font-weight:500;
  line-height:1.18;letter-spacing:-.012em;color:var(--orox-paper);
}
.orox-unlock__term{
  margin:0 0 clamp(8px,.85vw,14px);
  font-size:clamp(19px,1.55vw,26px);font-weight:500;
  line-height:1.1;letter-spacing:-.01em;color:var(--orox-paper);
}
.orox-unlock__p{
  margin:0;font-size:var(--orox-fs-p);line-height:1.62;
  color:var(--orox-dim);max-width:60ch;
}
.orox-unlock__fine{
  margin:clamp(10px,1vw,16px) 0 0;
  font-size:clamp(12px,.86vw,13.5px);line-height:1.55;
  color:var(--orox-dim);max-width:58ch;
}
.orox-unlock__fine-t{display:block;margin-top:clamp(6px,.6vw,10px);}

/* ---- state chips: the word carries the state, never colour ---------- */
.orox-unlock__state{
  display:inline-flex;align-items:center;gap:clamp(7px,.6vw,10px);
  font-size:clamp(12px,.86vw,13.5px);line-height:1.35;
  letter-spacing:.02em;color:var(--orox-dim);
  white-space:nowrap;
}
.orox-unlock__state::before{
  content:"";flex:none;
  width:clamp(10px,.8vw,12px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--orox-line-strong);
}
.orox-unlock__state[data-state="in-progress"]::before{
  background:linear-gradient(90deg, rgb(245 242 236 / .5) 50%, transparent 50%);
}
.orox-unlock__state[data-state="scoped"]::before{
  background:radial-gradient(circle at 50% 50%, rgb(245 242 236 / .5) 0 30%, transparent 32%);
}
.orox-unlock__state[data-state="design"]::before{border-style:dashed;}
.orox-unlock__state[data-state="not-started"]::before{
  background:linear-gradient(135deg,
    transparent calc(50% - .6px),
    rgb(245 242 236 / .42) calc(50% - .6px),
    rgb(245 242 236 / .42) calc(50% + .6px),
    transparent calc(50% + .6px));
}

/* ---- supply: composed absence --------------------------------------- */
.orox-unlock__slots{
  display:flex;gap:clamp(4px,.4vw,6px);
  margin-top:clamp(12px,1.2vw,20px);
}
.orox-unlock__slots i{
  flex:1 1 0;height:clamp(18px,1.6vw,28px);
  border:1px solid var(--orox-line);border-radius:2px;
}

/* ---- the one surfaced panel: the check ------------------------------ */
.orox-unlock__figure{
  display:flex;flex-direction:column;
  margin:0;
  padding:clamp(20px,2vw,36px);
  border:1px solid var(--orox-line);
  border-radius:var(--orox-radius);
  background:var(--orox-glass);
  box-shadow:var(--orox-glass-hi), 0 24px 60px -34px rgb(0 0 0 / .9);
}
.orox-unlock__route-wrap{
  position:relative;
  flex:1 1 auto;
  min-height:clamp(300px,29vw,420px);
  margin-top:clamp(16px,1.6vw,26px);
}
.orox-unlock__rail{
  position:absolute;
  left:calc((var(--orox-unlock-node) - 1px) / 2);
  top:var(--orox-unlock-rail-top);
  bottom:var(--orox-unlock-rail-bottom);
  width:1px;
  background:repeating-linear-gradient(180deg,
    rgb(245 242 236 / .28) 0 5px, transparent 5px 10px);
  transform-origin:50% 0;
}
.orox-unlock__mark{
  position:absolute;z-index:1;
  left:calc(var(--orox-unlock-node) / 2);
  top:var(--orox-unlock-rail-top);
  margin-left:calc(var(--orox-unlock-mark) / -2);
  margin-top:calc(var(--orox-unlock-mark) / -2);
  width:var(--orox-unlock-mark);aspect-ratio:1;border-radius:50%;
  background:var(--orox-turq);          /* the section's only gold */
  will-change:transform;
}
.orox-unlock__route{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(14px,1.4vw,24px);
  height:100%;margin:0;padding:0;list-style:none;
}
.orox-unlock__stop{
  display:grid;
  grid-template-columns:var(--orox-unlock-node) 1fr;
  column-gap:clamp(14px,1.3vw,22px);
  row-gap:clamp(4px,.4vw,7px);
}
.orox-unlock__node{
  grid-column:1;grid-row:1;
  width:var(--orox-unlock-node);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--orox-line-strong);
  background:var(--orox-ink);
  margin-top:var(--orox-unlock-nudge);
}
.orox-unlock__node--entry{border-radius:2px;transform:rotate(45deg);}
.orox-unlock__node--exit{border-style:dashed;}
.orox-unlock__stop-head{
  grid-column:2;grid-row:1;
  display:flex;align-items:baseline;gap:clamp(9px,.85vw,14px);
}
.orox-unlock__stop-idx{
  font-size:clamp(12px,.8vw,13px);letter-spacing:.12em;
  color:var(--orox-dim);font-variant-numeric:tabular-nums;
}
.orox-unlock__stop-name{
  font-size:clamp(15px,1.15vw,19px);line-height:1.25;color:var(--orox-paper);
}
.orox-unlock__stop--edge .orox-unlock__stop-name{
  font-size:var(--orox-unlock-edge-fs);color:var(--orox-dim);
}
.orox-unlock__stop-desc{
  grid-column:2;grid-row:2;
  font-size:clamp(12px,.9vw,14px);line-height:1.55;
  color:var(--orox-dim);max-width:44ch;
}

/* ---- grants: six surfaces on hairlines ------------------------------ */
.orox-unlock__list{margin:0;padding:0;}
.orox-unlock__item{
  padding:clamp(13px,1.25vw,20px) 0;
  border-top:1px solid var(--orox-line);
}
.orox-unlock__item:first-child{border-top:0;padding-top:0;}
.orox-unlock__dt{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:clamp(8px,.9vw,18px);
  margin:0 0 clamp(5px,.5vw,8px);
}
.orox-unlock__surface{
  font-size:clamp(15px,1.15vw,19px);line-height:1.25;color:var(--orox-paper);
}
.orox-unlock__dd{
  margin:0;font-size:clamp(12px,.9vw,14px);line-height:1.55;
  color:var(--orox-dim);max-width:52ch;
}

/* ---- boundaries ----------------------------------------------------- */
.orox-unlock__nots{list-style:none;margin:0;padding:0;}
.orox-unlock__no{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(10px,1vw,16px);align-items:start;
  padding:clamp(12px,1.15vw,18px) 0;
  border-top:1px solid var(--orox-line);
  font-size:clamp(12px,.9vw,14px);line-height:1.58;color:var(--orox-dim);
}
.orox-unlock__no:first-child{border-top:0;padding-top:0;}
.orox-unlock__no strong{font-weight:500;color:var(--orox-paper);}
.orox-unlock__no-body{display:block;}
.orox-unlock__no .orox-unlock__state{
  display:flex;margin-top:clamp(6px,.6vw,10px);
  white-space:normal;
}
.orox-unlock__x{
  display:block;flex:none;margin-top:clamp(2px,.25vw,4px);
  width:clamp(13px,1.1vw,16px);aspect-ratio:1;border-radius:3px;
  border:1px solid var(--orox-line-strong);
  background:linear-gradient(135deg,
    transparent calc(50% - .6px),
    rgb(245 242 236 / .34) calc(50% - .6px),
    rgb(245 242 236 / .34) calc(50% + .6px),
    transparent calc(50% + .6px));
}

/* ---- closing note --------------------------------------------------- */
.orox-unlock__note{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:clamp(8px,1vw,20px);
  margin:0;padding-top:clamp(16px,1.5vw,24px);
  border-top:1px solid var(--orox-line);
  font-size:clamp(12px,.86vw,13.5px);line-height:1.5;color:var(--orox-dim);
}

/* ---- tablet --------------------------------------------------------- */
@media (max-width:1079px){
  .orox-unlock__statement{grid-column:1/-1;}
  .orox-unlock__supply   {grid-column:1/-1;}
  .orox-unlock__figure   {grid-column:1/-1;}
  .orox-unlock__grants   {grid-column:1/-1;}
  .orox-unlock__gov      {grid-column:1/7;}
  .orox-unlock__bounds   {grid-column:7/13;}
  .orox-unlock__claim    {max-width:20ch;}
  .orox-unlock__route-wrap{min-height:clamp(330px,44vw,460px);}
  .orox-unlock__stop-desc{max-width:60ch;}
}

/* ---- mobile --------------------------------------------------------- */
@media (max-width:719px){
  .orox-unlock{
    grid-template-columns:1fr;
    row-gap:clamp(22px,6vw,34px);
  }
  .orox-unlock__statement,
  .orox-unlock__supply,
  .orox-unlock__figure,
  .orox-unlock__grants,
  .orox-unlock__gov,
  .orox-unlock__bounds,
  .orox-unlock__note{grid-column:1/-1;}
  .orox-unlock__claim{max-width:none;}
  .orox-unlock__route-wrap{min-height:clamp(360px,96vw,440px);}
  .orox-unlock__dt{gap:clamp(6px,2vw,10px);}
  .orox-unlock__note{flex-direction:column;gap:6px;}
}

/* ---- reduced motion: static route, credential at the entry ---------- */
@media (prefers-reduced-motion:reduce){
  .orox-unlock__rail,
  .orox-unlock__mark,
  .orox-unlock__node{transform:none !important;}
  .orox-unlock__node--entry{transform:rotate(45deg) !important;}
  .orox-unlock__mark{will-change:auto;}
}
/* ===== architecture ===== */
/* ═══════════════════════════════════════════════════════════════
   ARCHITECTURE — THE LATTICE
   A schematic, not a hub-and-spoke: one token rail on the left,
   six leads out to six surface nodes, one dashed return bracket
   on the right that lands on Settlement.

   Geometry is CSS grid only. Nothing is measured at runtime, so
   there is no resize repaint, no font-load reflow, and no way for
   copy length to move the drawing.

   No gold in this section: nothing here is an assayed figure and
   there is no primary action, so nothing earns it. All rules and
   hairlines are warm-neutral rgb(245 242 236 / .10).

   No rem. Every length is clamp(px, vw, px) or a fixed hairline.
   ═══════════════════════════════════════════════════════════════ */

.orox-architecture-sc{
  --orox-lat-pad:    clamp(11px, 2.2vw, 18px);   /* rail x, from the row edge     */
  --orox-lat-lead:   clamp(40px, 9vw, 74px);     /* rail -> node run              */
  --orox-lat-cgap:   clamp(10px, 2.4vw, 18px);
  --orox-lat-gap:    clamp(18px, 3.4vw, 30px);   /* origin -> list                */
  --orox-lat-rowpad: clamp(13px, 2.8vw, 18px);   /* row padding-block             */
  --orox-lat-nodey:  clamp(10px, 2.7vw, 12px);   /* node centre from row content  */
  --orox-lat-nodesz: clamp(9px, 2.2vw, 11px);
  --orox-lat-ret:    clamp(58px, 8vw, 96px);     /* return gutter width           */
  --orox-lat-retx:   clamp(14px, 1.9vw, 24px);   /* return line, from gutter edge */

  --orox-lat-hair: rgb(245 242 236 / .10);
  --orox-lat-wire: rgb(245 242 236 / .22);
  --orox-lat-mark: rgb(245 242 236 / .34);
  --orox-lat-fill: rgb(245 242 236 / .86);
  --orox-lat-txt:  rgb(245 242 236 / .93);
  --orox-lat-sub:  rgb(245 242 236 / .78);
  --orox-lat-meta: rgb(245 242 236 / .66);
  --orox-lat-ease: cubic-bezier(.19, 1, .22, 1);
}

.orox-lat{ margin-top: clamp(28px, 5vw, 72px); }
.orox-lat__frame{ position: relative; }

/* ── origin: the token, head of the rail ───────────────────── */
.orox-lat__origin{
  position: relative;
  display: grid;
  grid-template-columns: var(--orox-lat-lead) minmax(0, 1fr);
  column-gap: var(--orox-lat-cgap);
  row-gap: clamp(5px, 1.2vw, 8px);
  align-items: start;
  margin: 0 0 var(--orox-lat-gap);
  padding-left: var(--orox-lat-pad);
}
/* head mark — a diamond, deliberately not one of the node glyphs */
.orox-lat__origin::before{
  content: '';
  position: absolute;
  left: var(--orox-lat-pad);
  top: var(--orox-lat-nodey);
  width: clamp(8px, 2vw, 10px);
  height: clamp(8px, 2vw, 10px);
  background: var(--orox-lat-fill);
  transform: translate(-50%, -50%) rotate(45deg);
}
/* stub joining the head mark to the top of the rail */
.orox-lat__origin::after{
  content: '';
  position: absolute;
  left: var(--orox-lat-pad);
  top: var(--orox-lat-nodey);
  bottom: calc(var(--orox-lat-gap) * -1);
  width: 1px;
  background: var(--orox-lat-hair);
  transform-origin: 50% 0;
}
.orox-lat__origin-k,
.orox-lat__origin-v{ grid-column: 2; }
.orox-lat__origin-k{
  font-size: clamp(14px, 3.8vw, 17px);
  letter-spacing: .22em;
  color: var(--orox-lat-txt);
}
.orox-lat__origin-v{
  font-size: clamp(13px, 3.4vw, 15px);
  line-height: 1.58;
  color: var(--orox-lat-sub);
  max-width: 56ch;
}

/* ── the index: six rows, one per surface ──────────────────── */
.orox-lat__index{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
/* the rail */
.orox-lat__index::before{
  content: '';
  position: absolute;
  left: var(--orox-lat-pad);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--orox-lat-hair);
  transform-origin: 50% 0;
}
.orox-lat__row{
  grid-column: 1;
  border-top: 1px solid var(--orox-lat-hair);
}
.orox-lat__row:nth-of-type(6){ border-bottom: 1px solid var(--orox-lat-hair); }

.orox-lat__ch{
  position: relative;
  display: grid;
  grid-template-columns: var(--orox-lat-lead) auto minmax(0, 1fr) auto;
  column-gap: var(--orox-lat-cgap);
  row-gap: clamp(5px, 1.2vw, 8px);
  align-items: baseline;
  padding: var(--orox-lat-rowpad) clamp(6px, 1.2vw, 12px) var(--orox-lat-rowpad) var(--orox-lat-pad);
}

/* lead: the run from the rail out to the node */
.orox-lat__lead{
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  height: calc(var(--orox-lat-nodey) * 2);
}
.orox-lat__wire{
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(100% - (var(--orox-lat-nodesz) / 2));
  height: 1px;
  margin-top: -0.5px;
  background: var(--orox-lat-wire);
  transform-origin: 0 50%;
}
.orox-lat__node{
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--orox-lat-nodesz);
  height: var(--orox-lat-nodesz);
  border-radius: 50%;
  transform: translate(50%, -50%);
}

/* node glyph = a repeat of the word, never a substitute for it */
.orox-lat__row[data-orox-state="In progress"] .orox-lat__node{
  background: var(--orox-lat-fill);
}
.orox-lat__row[data-orox-state="Scoped"] .orox-lat__node{
  box-shadow: inset 0 0 0 1px var(--orox-lat-mark);
}
.orox-lat__row[data-orox-state="Scoped"] .orox-lat__node::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(3px, .8vw, 4px);
  height: clamp(3px, .8vw, 4px);
  border-radius: 50%;
  background: var(--orox-lat-fill);
  transform: translate(-50%, -50%);
}
.orox-lat__row[data-orox-state="Design stage"] .orox-lat__node{
  box-shadow: inset 0 0 0 1px var(--orox-lat-mark);
}

.orox-lat__n{
  grid-column: 2;
  grid-row: 1;
  font-size: clamp(11px, 2.7vw, 12px);
  letter-spacing: .16em;
  color: var(--orox-lat-meta);
  font-variant-numeric: tabular-nums;
}
.orox-lat__name{
  grid-column: 3;
  grid-row: 1;
  font-size: clamp(16px, 4.2vw, 19px);
  letter-spacing: -.01em;
  color: var(--orox-lat-txt);
}
.orox-lat__state{
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  font-size: clamp(11px, 2.8vw, 12.5px);
  letter-spacing: .08em;
  color: var(--orox-lat-meta);
  white-space: nowrap;
}
.orox-lat__note{
  grid-column: 3 / -1;
  grid-row: 2;
  font-size: clamp(13px, 3.3vw, 14.5px);
  line-height: 1.58;
  color: var(--orox-lat-sub);
  max-width: 56ch;
}

/* ── return bracket: the five surfaces settling into Settlement ─
   grid-row 1/6 ends exactly on the top edge of the Settlement row,
   so the elbow lands on its node line with no measurement.        */
.orox-lat__return{
  display: none;
  position: relative;
  grid-column: 2;
  grid-row: 1 / 6;
}
.orox-lat__return-v{
  position: absolute;
  left: var(--orox-lat-retx);
  top: 0;
  bottom: 0;
  width: 1px;
  background-image: repeating-linear-gradient(
    to bottom, var(--orox-lat-wire) 0 4px, transparent 4px 10px);
  transform-origin: 50% 0;
}
.orox-lat__return-elbow{
  position: absolute;
  left: 0;
  width: var(--orox-lat-retx);
  height: 1px;
  bottom: calc(-1 * (var(--orox-lat-rowpad) + var(--orox-lat-nodey) + 1px));
  background-image: repeating-linear-gradient(
    to right, var(--orox-lat-wire) 0 4px, transparent 4px 10px);
  transform-origin: 100% 50%;
}
.orox-lat__return-elbow::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(4px, 1vw, 6px);
  height: clamp(4px, 1vw, 6px);
  border-left: 1px solid var(--orox-lat-mark);
  border-bottom: 1px solid var(--orox-lat-mark);
  transform: translate(0, -50%) rotate(45deg);
}
.orox-lat__return-lbl{
  position: absolute;
  left: calc(var(--orox-lat-retx) + clamp(7px, 1.1vw, 11px));
  top: clamp(4px, 1vw, 10px);
  writing-mode: vertical-rl;
  font-size: clamp(11px, 1.4vw, 12px);
  letter-spacing: .14em;
  color: var(--orox-lat-meta);
  white-space: nowrap;
}

/* ── the words under the drawing ───────────────────────────── */
.orox-lat__notes{
  display: grid;
  gap: clamp(14px, 2.6vw, 34px);
  margin-top: clamp(22px, 3.4vw, 38px);
}
.orox-lat__caption,
.orox-lat__key{
  margin: 0;
  font-size: clamp(13px, 3.2vw, 14.5px);
  line-height: 1.62;
  color: var(--orox-lat-sub);
  max-width: 62ch;
}
.orox-lat__tally{
  margin: clamp(24px, 3.6vw, 44px) 0 0;
  padding-top: clamp(16px, 2.4vw, 26px);
  border-top: 1px solid var(--orox-lat-hair);
  font-size: clamp(13px, 3.3vw, 15px);
  line-height: 1.6;
  color: var(--orox-lat-sub);
}
.orox-lat__c{
  color: var(--orox-lat-txt);
  font-variant-numeric: tabular-nums;
}
.orox-lat__absent{
  margin: clamp(24px, 4vw, 52px) 0 0;
  font-size: clamp(15px, 3.9vw, 18px);
  line-height: 1.6;
  color: var(--orox-lat-txt);
  max-width: 60ch;
}

/* ── ≥760px: notes sit side by side ────────────────────────── */
@media (min-width: 760px){
  .orox-lat__notes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── ≥900px: the row becomes a specification line, and the
      return bracket appears in its own gutter ──────────────── */
@media (min-width: 900px){
  .orox-lat__index{
    grid-template-columns: minmax(0, 1fr) var(--orox-lat-ret);
  }
  .orox-lat__return{ display: block; }
  .orox-lat__ch{
    grid-template-columns:
      var(--orox-lat-lead) auto minmax(0, .78fr) minmax(0, 1.6fr) auto;
    column-gap: clamp(16px, 2.2vw, 34px);
  }
  .orox-lat__note{
    grid-column: 4;
    grid-row: 1;
    max-width: 52ch;
  }
  .orox-lat__state{ grid-column: 5; }
}

/* ═══ MOTION ═══════════════════════════════════════════════════
   The resting state above IS the no-JS state: everything is drawn
   and legible with the stylesheet alone. JS adds .orox-lat--anim
   only when it has an observer to play it back with, and .is-in
   returns every element to exactly the resting values.
   Transform and opacity only.
   ═══════════════════════════════════════════════════════════ */
.orox-lat--anim .orox-lat__origin::before,
.orox-lat--anim .orox-lat__origin::after,
.orox-lat--anim .orox-lat__index::before,
.orox-lat--anim .orox-lat__wire,
.orox-lat--anim .orox-lat__node,
.orox-lat--anim .orox-lat__return-v,
.orox-lat--anim .orox-lat__return-elbow,
.orox-lat--anim .orox-lat__return-lbl{
  transition-property: transform, opacity;
  transition-timing-function: var(--orox-lat-ease);
  will-change: transform;
}

.orox-lat--anim .orox-lat__origin::before{
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(.4);
  transition-duration: 200ms;
}
.orox-lat--anim .orox-lat__origin::after,
.orox-lat--anim .orox-lat__index::before{
  transform: scaleY(0);
  transition-duration: 900ms;
}
.orox-lat--anim .orox-lat__index::before{ transition-delay: 180ms; }
.orox-lat--anim .orox-lat__origin::after{ transition-delay: 60ms; }

.orox-lat--anim .orox-lat__wire{
  transform: scaleX(0);
  transition-duration: 900ms;
}
.orox-lat--anim .orox-lat__node{
  opacity: 0;
  transform: translate(50%, -50%) scale(.4);
  transition-duration: 200ms;
}
.orox-lat--anim .orox-lat__row:nth-of-type(1) .orox-lat__wire{ transition-delay: 300ms; }
.orox-lat--anim .orox-lat__row:nth-of-type(2) .orox-lat__wire{ transition-delay: 420ms; }
.orox-lat--anim .orox-lat__row:nth-of-type(3) .orox-lat__wire{ transition-delay: 540ms; }
.orox-lat--anim .orox-lat__row:nth-of-type(4) .orox-lat__wire{ transition-delay: 660ms; }
.orox-lat--anim .orox-lat__row:nth-of-type(5) .orox-lat__wire{ transition-delay: 780ms; }
.orox-lat--anim .orox-lat__row:nth-of-type(6) .orox-lat__wire{ transition-delay: 900ms; }
.orox-lat--anim .orox-lat__row:nth-of-type(1) .orox-lat__node{ transition-delay: 1000ms; }
.orox-lat--anim .orox-lat__row:nth-of-type(2) .orox-lat__node{ transition-delay: 1120ms; }
.orox-lat--anim .orox-lat__row:nth-of-type(3) .orox-lat__node{ transition-delay: 1240ms; }
.orox-lat--anim .orox-lat__row:nth-of-type(4) .orox-lat__node{ transition-delay: 1360ms; }
.orox-lat--anim .orox-lat__row:nth-of-type(5) .orox-lat__node{ transition-delay: 1480ms; }
.orox-lat--anim .orox-lat__row:nth-of-type(6) .orox-lat__node{ transition-delay: 1600ms; }

.orox-lat--anim .orox-lat__return-v{
  transform: scaleY(0);
  transition-duration: 900ms;
  transition-delay: 900ms;
}
.orox-lat--anim .orox-lat__return-elbow{
  transform: scaleX(0);
  transition-duration: 200ms;
  transition-delay: 1740ms;
}
.orox-lat--anim .orox-lat__return-lbl{
  opacity: 0;
  transition-duration: 800ms;
  transition-delay: 1500ms;
}

/* played */
.orox-lat--anim.is-in .orox-lat__origin::before{
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}
.orox-lat--anim.is-in .orox-lat__origin::after,
.orox-lat--anim.is-in .orox-lat__index::before,
.orox-lat--anim.is-in .orox-lat__return-v{ transform: scaleY(1); }
.orox-lat--anim.is-in .orox-lat__wire,
.orox-lat--anim.is-in .orox-lat__return-elbow{ transform: scaleX(1); }
.orox-lat--anim.is-in .orox-lat__node{
  opacity: 1;
  transform: translate(50%, -50%) scale(1);
}
.orox-lat--anim.is-in .orox-lat__return-lbl{ opacity: 1; }

/* ── reduced motion ─────────────────────────────────────────
   A media query, so a mid-session change to the OS setting is
   honoured immediately whether or not .is-in ever arrives.   */
@media (prefers-reduced-motion: reduce){
  .orox-lat--anim .orox-lat__origin::before{
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(45deg) scale(1) !important;
  }
  .orox-lat--anim .orox-lat__origin::after,
  .orox-lat--anim .orox-lat__index::before,
  .orox-lat--anim .orox-lat__return-v{ transform: scaleY(1) !important; }
  .orox-lat--anim .orox-lat__wire,
  .orox-lat--anim .orox-lat__return-elbow{ transform: scaleX(1) !important; }
  .orox-lat--anim .orox-lat__node{
    opacity: 1 !important;
    transform: translate(50%, -50%) scale(1) !important;
  }
  .orox-lat--anim .orox-lat__return-lbl{ opacity: 1 !important; }
  .orox-lat--anim .orox-lat__origin::before,
  .orox-lat--anim .orox-lat__origin::after,
  .orox-lat--anim .orox-lat__index::before,
  .orox-lat--anim .orox-lat__wire,
  .orox-lat--anim .orox-lat__node,
  .orox-lat--anim .orox-lat__return-v,
  .orox-lat--anim .orox-lat__return-elbow,
  .orox-lat--anim .orox-lat__return-lbl{
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    will-change: auto !important;
  }
}
/* ===== access-tiers ===== */
/* ============================================================
   ACCESS TIERS — "The Aperture"
   Namespaced .orox-at-* / .orox-access-sc. No rem anywhere.
   No shell rule (.orox, .orox__*, .orox-reveal) is redeclared.
   Gold budget for this section: TWO marks only —
     .orox-at-mark  (which level is being read: a state)
     .orox-at-fig   (the surface count: an assayed figure)
   Everything else — rings, rails, spines, hairlines, headings —
   is warm neutral.
   ============================================================ */

.orox-access-sc{
  --at-line:rgb(245 242 236 / .10);
  --at-line-2:rgb(245 242 236 / .16);
  --at-paper:var(--orox-paper,#f5f2ec);
  --at-body:rgb(245 242 236 / .92);
  --at-dim:rgb(245 242 236 / .70);
  --at-mute:rgb(245 242 236 / .58);
  --at-gold:var(--orox-turq,#d8b25a);
  --at-ease:var(--orox-ease,cubic-bezier(.19,1,.22,1));
}

.orox-access-sc .orox-at-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(30px,3.4vw,54px);
  align-items:start;
  margin-top:clamp(30px,3.8vw,60px);
}

/* the four radios drive everything through `~`; no :has() is used,
   so there is no capability fallback that can strand a live-looking
   control with nothing wired to it. */
.orox-access-sc .orox-at-in{
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}

.orox-access-sc .orox-at-live{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- the aperture figure ---------- */
/* Mobile-first: the figure is the threshold statement in real DOM text.
   The ring drawing is a desktop-only register; below 960 the aperture
   is carried by the axis rail itself, not by a shrunken diagram. */

.orox-access-sc .orox-at-figure{
  display:block;
}
.orox-access-sc .orox-at-svg{display:none}

.orox-access-sc .orox-at-thr{
  margin:0;
  display:grid;
  justify-items:start;
  gap:clamp(6px,.7vw,10px);
  padding-bottom:clamp(4px,.6vw,10px);
}
.orox-access-sc .orox-at-thr-k{
  font-size:clamp(11px,.92vw,13px);
  line-height:1.3;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--at-mute);
}
.orox-access-sc .orox-at-thr-r{
  display:block;
  width:clamp(34px,3.4vw,52px);
  height:1px;
  background:var(--at-line-2);
}
.orox-access-sc .orox-at-thr-v{
  font-size:clamp(19px,1.8vw,27px);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--at-paper);
}

/* ---------- the axis (the aperture at every width) ---------- */

.orox-access-sc .orox-at-axis{
  position:relative;
  margin-top:clamp(22px,2.4vw,38px);
  padding-left:clamp(18px,1.8vw,26px);
}
.orox-access-sc .orox-at-lbl{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(10px,1vw,15px);
  row-gap:clamp(2px,.3vw,5px);
  align-items:baseline;
  min-height:clamp(58px,5.4vw,74px);
  padding:clamp(13px,1.3vw,18px) clamp(10px,1vw,14px) clamp(13px,1.3vw,18px) clamp(14px,1.4vw,20px);
  cursor:pointer;
  border-top:1px solid var(--at-line);
  transition:background-color 200ms linear;
}
.orox-access-sc .orox-at-lbl:last-child{border-bottom:1px solid var(--at-line)}
.orox-access-sc .orox-at-lbl:hover{background-color:rgb(245 242 236 / .03)}

/* rail track + the drawn portion: the aperture opening down the axis */
.orox-access-sc .orox-at-lbl::before,
.orox-access-sc .orox-at-lbl::after{
  content:"";
  position:absolute;
  left:calc(clamp(18px,1.8vw,26px) * -1);
  top:0;
  bottom:0;
  width:1px;
}
.orox-access-sc .orox-at-lbl::before{background:var(--at-line)}
.orox-access-sc .orox-at-lbl::after{
  background:rgb(245 242 236 / .5);
  transform:scaleY(0);
  transform-origin:50% 0;
  transition:transform 900ms var(--at-ease);
}
.orox-access-sc .orox-at-lbl[data-t="2"]::after{transition-delay:60ms}
.orox-access-sc .orox-at-lbl[data-t="3"]::after{transition-delay:120ms}
.orox-access-sc .orox-at-lbl[data-t="4"]::after{transition-delay:180ms}

.orox-access-sc .orox-at-mark{
  position:absolute;
  left:calc(clamp(18px,1.8vw,26px) * -1);
  top:50%;
  width:clamp(7px,.66vw,9px);
  height:clamp(7px,.66vw,9px);
  margin-top:clamp(-4.5px,-.33vw,-3.5px);
  margin-left:-1px;
  background:var(--at-gold);   /* GOLD 1 of 2 — which level is being read */
  opacity:0;
  transform:scale(.4);
  transition:opacity 200ms linear,transform 200ms var(--at-ease);
}
.orox-access-sc .orox-at-num{
  font-size:clamp(11px,.86vw,12.5px);
  letter-spacing:.2em;
  color:var(--at-mute);
  font-variant-numeric:tabular-nums;
  transition:color 200ms linear;
}
.orox-access-sc .orox-at-nm{
  font-size:clamp(18px,1.55vw,24px);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--at-dim);
  transition:color 200ms linear;
}
.orox-access-sc .orox-at-sum{
  grid-column:2;
  font-size:clamp(13px,1vw,14.5px);
  line-height:1.45;
  color:var(--at-mute);
}

/* ---------- checked state, wired with `~` (no :has) ---------- */

.orox-access-sc #orox-at-1:checked ~ .orox-at-side .orox-at-lbl[data-t="1"] .orox-at-mark,
.orox-access-sc #orox-at-2:checked ~ .orox-at-side .orox-at-lbl[data-t="2"] .orox-at-mark,
.orox-access-sc #orox-at-3:checked ~ .orox-at-side .orox-at-lbl[data-t="3"] .orox-at-mark,
.orox-access-sc #orox-at-4:checked ~ .orox-at-side .orox-at-lbl[data-t="4"] .orox-at-mark{
  opacity:1;
  transform:scale(1);
}
.orox-access-sc #orox-at-1:checked ~ .orox-at-side .orox-at-lbl[data-t="1"] .orox-at-nm,
.orox-access-sc #orox-at-2:checked ~ .orox-at-side .orox-at-lbl[data-t="2"] .orox-at-nm,
.orox-access-sc #orox-at-3:checked ~ .orox-at-side .orox-at-lbl[data-t="3"] .orox-at-nm,
.orox-access-sc #orox-at-4:checked ~ .orox-at-side .orox-at-lbl[data-t="4"] .orox-at-nm{
  color:var(--at-paper);
}
.orox-access-sc #orox-at-1:checked ~ .orox-at-side .orox-at-lbl[data-t="1"] .orox-at-num,
.orox-access-sc #orox-at-2:checked ~ .orox-at-side .orox-at-lbl[data-t="2"] .orox-at-num,
.orox-access-sc #orox-at-3:checked ~ .orox-at-side .orox-at-lbl[data-t="3"] .orox-at-num,
.orox-access-sc #orox-at-4:checked ~ .orox-at-side .orox-at-lbl[data-t="4"] .orox-at-num{
  color:var(--at-dim);
}

/* rail: every level up to and including the current one is drawn */
.orox-access-sc #orox-at-1:checked ~ .orox-at-side .orox-at-lbl[data-t="1"]::after,
.orox-access-sc #orox-at-2:checked ~ .orox-at-side .orox-at-lbl[data-t="1"]::after,
.orox-access-sc #orox-at-2:checked ~ .orox-at-side .orox-at-lbl[data-t="2"]::after,
.orox-access-sc #orox-at-3:checked ~ .orox-at-side .orox-at-lbl[data-t="1"]::after,
.orox-access-sc #orox-at-3:checked ~ .orox-at-side .orox-at-lbl[data-t="2"]::after,
.orox-access-sc #orox-at-3:checked ~ .orox-at-side .orox-at-lbl[data-t="3"]::after,
.orox-access-sc #orox-at-4:checked ~ .orox-at-side .orox-at-lbl[data-t="1"]::after,
.orox-access-sc #orox-at-4:checked ~ .orox-at-side .orox-at-lbl[data-t="2"]::after,
.orox-access-sc #orox-at-4:checked ~ .orox-at-side .orox-at-lbl[data-t="3"]::after,
.orox-access-sc #orox-at-4:checked ~ .orox-at-side .orox-at-lbl[data-t="4"]::after{
  transform:scaleY(1);
}

.orox-access-sc #orox-at-1:focus-visible ~ .orox-at-side .orox-at-lbl[data-t="1"],
.orox-access-sc #orox-at-2:focus-visible ~ .orox-at-side .orox-at-lbl[data-t="2"],
.orox-access-sc #orox-at-3:focus-visible ~ .orox-at-side .orox-at-lbl[data-t="3"],
.orox-access-sc #orox-at-4:focus-visible ~ .orox-at-side .orox-at-lbl[data-t="4"]{
  outline:2px solid rgb(245 242 236 / .9);
  outline-offset:-2px;
}

/* ---------- panels: stacked in one grid cell, so the box height is
   the tallest tier at every breakpoint and nothing jumps ---------- */

.orox-access-sc .orox-at-panels{
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.orox-access-sc .orox-at-panel{
  grid-area:1 / 1;
  opacity:0;
  visibility:hidden;
  transition:opacity 200ms linear,visibility 0s linear 200ms;
}
.orox-access-sc #orox-at-1:checked ~ .orox-at-panels .orox-at-panel[data-tier="1"],
.orox-access-sc #orox-at-2:checked ~ .orox-at-panels .orox-at-panel[data-tier="2"],
.orox-access-sc #orox-at-3:checked ~ .orox-at-panels .orox-at-panel[data-tier="3"],
.orox-access-sc #orox-at-4:checked ~ .orox-at-panels .orox-at-panel[data-tier="4"]{
  opacity:1;
  visibility:visible;
  transition:opacity 200ms linear 60ms,visibility 0s;
}

.orox-access-sc .orox-at-phead{padding-bottom:clamp(16px,1.8vw,26px)}
.orox-access-sc .orox-at-pttl{
  display:flex;
  align-items:baseline;
  gap:clamp(10px,1vw,15px);
  margin:0 0 clamp(9px,1vw,14px);
  font-size:clamp(22px,2.1vw,32px);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--at-paper);
  font-weight:400;
}
.orox-access-sc .orox-at-pnum{
  font-size:clamp(11px,.86vw,12.5px);
  letter-spacing:.22em;
  color:var(--at-mute);
  font-variant-numeric:tabular-nums;
}
.orox-access-sc .orox-at-pint{
  margin:0 0 clamp(11px,1.2vw,16px);
  max-width:56ch;
  font-size:clamp(14.5px,1.25vw,18px);
  line-height:1.55;
  color:var(--at-body);
}
.orox-access-sc .orox-at-pmeta{
  margin:0;
  font-size:clamp(11.5px,.92vw,13px);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--at-dim);
}
.orox-access-sc .orox-at-fig{
  color:var(--at-gold);   /* GOLD 2 of 2 — the counted figure */
  font-variant-numeric:tabular-nums;
}
.orox-access-sc .orox-at-sep{opacity:.5;padding:0 clamp(2px,.3vw,4px)}

/* ---------- the ledger ---------- */

.orox-access-sc .orox-at-ledger{
  list-style:none;
  margin:0;
  padding:0;
}
.orox-access-sc .orox-at-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(4px,.5vw,8px);
  padding:clamp(15px,1.5vw,21px) 0 clamp(15px,1.5vw,21px) clamp(20px,2vw,30px);
  border-top:1px solid var(--at-line);
  opacity:0;
  transform:translateY(8px);
  transition:opacity 200ms linear,transform 200ms var(--at-ease);
}
.orox-access-sc .orox-at-row:nth-child(1){transition-delay:0ms}
.orox-access-sc .orox-at-row:nth-child(2){transition-delay:60ms}
.orox-access-sc .orox-at-row:nth-child(3){transition-delay:120ms}
.orox-access-sc .orox-at-row:nth-child(4){transition-delay:180ms}
.orox-access-sc .orox-at-row:nth-child(5){transition-delay:240ms}
.orox-access-sc .orox-at-row:nth-child(6){transition-delay:300ms}

.orox-access-sc #orox-at-1:checked ~ .orox-at-panels .orox-at-panel[data-tier="1"] .orox-at-row,
.orox-access-sc #orox-at-2:checked ~ .orox-at-panels .orox-at-panel[data-tier="2"] .orox-at-row,
.orox-access-sc #orox-at-3:checked ~ .orox-at-panels .orox-at-panel[data-tier="3"] .orox-at-row,
.orox-access-sc #orox-at-4:checked ~ .orox-at-panels .orox-at-panel[data-tier="4"] .orox-at-row{
  opacity:1;
  transform:none;
}

/* the second register: a vertical build-state spine down the left margin
   of the ledger. Reads as an instrument column, not as pips. */
.orox-access-sc .orox-at-spine{
  position:absolute;
  left:0;
  top:clamp(17px,1.7vw,24px);
  bottom:clamp(17px,1.7vw,24px);
  width:clamp(3px,.28vw,4px);
  display:flex;
  flex-direction:column-reverse;
  gap:clamp(3px,.3vw,4px);
}
.orox-access-sc .orox-at-spine i{
  flex:1 1 0;
  min-height:clamp(5px,.5vw,7px);
  background:rgb(245 242 236 / .12);
}
.orox-access-sc .orox-at-spine[data-n="1"] i:nth-child(-n+1),
.orox-access-sc .orox-at-spine[data-n="2"] i:nth-child(-n+2),
.orox-access-sc .orox-at-spine[data-n="3"] i:nth-child(-n+3){
  background:rgb(245 242 236 / .62);
}

.orox-access-sc .orox-at-surf{
  font-size:clamp(12.5px,1vw,14px);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--at-dim);
}
.orox-access-sc .orox-at-cap{
  font-size:clamp(14px,1.12vw,16px);
  line-height:1.6;
  color:var(--at-body);
}
.orox-access-sc .orox-at-st{
  font-size:clamp(11.5px,.9vw,13px);
  line-height:1.35;
  letter-spacing:.08em;
  color:var(--at-dim);
}
.orox-access-sc .orox-at-closed .orox-at-surf{color:var(--at-mute)}
.orox-access-sc .orox-at-closed .orox-at-cap{color:var(--at-mute)}

/* ---------- foot: legend + the honest note ---------- */

.orox-access-sc .orox-at-foot{
  border-top:1px solid var(--at-line);
  padding-top:clamp(20px,2.2vw,32px);
  display:grid;
  gap:clamp(16px,1.8vw,28px);
}
.orox-access-sc .orox-at-key{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:clamp(12px,1.6vw,26px);
}
.orox-access-sc .orox-at-keyrow{
  display:flex;
  align-items:center;
  gap:clamp(6px,.6vw,9px);
}
.orox-access-sc .orox-at-keyt{
  display:inline-flex;
  align-items:center;
  gap:clamp(7px,.7vw,10px);
  margin:0;
  font-size:clamp(11.5px,.92vw,13px);
  line-height:1.4;
  color:var(--at-dim);
}
.orox-access-sc .orox-at-keyd{
  margin:0;
  font-size:clamp(11.5px,.92vw,13px);
  line-height:1.4;
  color:var(--at-mute);
}
.orox-access-sc .orox-at-keyd::before{content:"— "}
.orox-access-sc .orox-at-spine--k{
  position:static;
  height:clamp(17px,1.7vw,21px);
  width:clamp(3px,.28vw,4px);
  flex:0 0 auto;
}
.orox-access-sc .orox-at-note{
  margin:0;
  max-width:74ch;
  font-size:clamp(13.5px,1.06vw,15.5px);
  line-height:1.72;
  color:var(--at-body);
}

/* ---------- responsive ---------- */

@media (min-width:640px){
  .orox-access-sc .orox-at-row{
    grid-template-columns:clamp(112px,11vw,158px) minmax(0,1fr) clamp(98px,9.4vw,134px);
    gap:clamp(12px,1.4vw,24px);
    align-items:baseline;
  }
  .orox-access-sc .orox-at-st{text-align:right}
}

@media (min-width:960px){
  .orox-access-sc .orox-at-grid{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    column-gap:clamp(34px,3.6vw,64px);
  }
  .orox-access-sc .orox-at-panels{
    border-left:1px solid var(--at-line);
    padding-left:clamp(26px,2.8vw,46px);
  }
  .orox-access-sc .orox-at-foot{grid-column:1 / -1;margin-top:clamp(6px,.8vw,14px)}

  /* the ring register returns, and the threshold statement sits at the
     centre of it — as real DOM text, never as SVG type */
  .orox-access-sc .orox-at-figure{
    display:grid;
    place-items:center;
    padding-block:clamp(4px,.6vw,10px);
  }
  .orox-access-sc .orox-at-svg{
    display:block;
    grid-area:1 / 1;
    width:100%;
    height:auto;
    max-width:clamp(280px,26vw,360px);
    overflow:visible;
  }
  .orox-access-sc .orox-at-thr{
    grid-area:1 / 1;
    justify-items:center;
    text-align:center;
    max-width:58%;
    padding-bottom:0;
  }
  .orox-access-sc .orox-at-thr-k{letter-spacing:.16em}
}

/* ---------- ring geometry (desktop register) ---------- */

.orox-access-sc .orox-at-trk{
  fill:none;
  stroke:rgb(245 242 236 / .14);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:.01 8;
}
.orox-access-sc .orox-at-draw{
  fill:none;
  stroke:rgb(245 242 236 / .78);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  opacity:.4;
  transition:stroke-dashoffset 900ms var(--at-ease),opacity 200ms linear;
}
.orox-access-sc .orox-at-draw[data-t="2"]{transition-delay:60ms}
.orox-access-sc .orox-at-draw[data-t="3"]{transition-delay:120ms}
.orox-access-sc .orox-at-draw[data-t="4"]{transition-delay:180ms}

.orox-access-sc #orox-at-1:checked ~ .orox-at-side .orox-at-draw[data-t="1"],
.orox-access-sc #orox-at-2:checked ~ .orox-at-side .orox-at-draw[data-t="1"],
.orox-access-sc #orox-at-2:checked ~ .orox-at-side .orox-at-draw[data-t="2"],
.orox-access-sc #orox-at-3:checked ~ .orox-at-side .orox-at-draw[data-t="1"],
.orox-access-sc #orox-at-3:checked ~ .orox-at-side .orox-at-draw[data-t="2"],
.orox-access-sc #orox-at-3:checked ~ .orox-at-side .orox-at-draw[data-t="3"],
.orox-access-sc #orox-at-4:checked ~ .orox-at-side .orox-at-draw[data-t="1"],
.orox-access-sc #orox-at-4:checked ~ .orox-at-side .orox-at-draw[data-t="2"],
.orox-access-sc #orox-at-4:checked ~ .orox-at-side .orox-at-draw[data-t="3"],
.orox-access-sc #orox-at-4:checked ~ .orox-at-side .orox-at-draw[data-t="4"]{
  stroke-dashoffset:0;
}
/* emphasis by opacity only — stroke-width is geometry and would
   re-rasterise the path on every level change */
.orox-access-sc #orox-at-1:checked ~ .orox-at-side .orox-at-draw[data-t="1"],
.orox-access-sc #orox-at-2:checked ~ .orox-at-side .orox-at-draw[data-t="2"],
.orox-access-sc #orox-at-3:checked ~ .orox-at-side .orox-at-draw[data-t="3"],
.orox-access-sc #orox-at-4:checked ~ .orox-at-side .orox-at-draw[data-t="4"]{
  opacity:1;
}

/* ---------- armed: JS holds the draw until the section arrives.
   Scoped inside no-preference so it can never strand the reduced-motion
   reader with an undrawn aperture, and so the no-JS state is already
   the correct static state. ---------- */

@media (prefers-reduced-motion:no-preference){
  .orox-access-sc.orox-at-armed .orox-at-draw{stroke-dashoffset:100 !important}
  .orox-access-sc.orox-at-armed .orox-at-lbl::after{transform:scaleY(0) !important}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion:reduce){
  .orox-access-sc .orox-at-draw,
  .orox-access-sc .orox-at-lbl,
  .orox-access-sc .orox-at-lbl::after,
  .orox-access-sc .orox-at-mark,
  .orox-access-sc .orox-at-num,
  .orox-access-sc .orox-at-nm,
  .orox-access-sc .orox-at-panel,
  .orox-access-sc .orox-at-row{
    transition-duration:1ms !important;
    transition-delay:0ms !important;
  }
  .orox-access-sc .orox-at-mark{transform:scale(1)}
  .orox-access-sc .orox-at-row{transform:none}
}
/* ===== assurance ===== */
/* ═══════════════════════════════════════════════════════════════
   SECURITY & GOVERNANCE — "The Record"
   A disclosure ledger. Two tracks: written / in force.
   The "in force" column is empty, and that emptiness is the design.
   No rem. No second typeface. Hairlines are warm-neutral.
   Gold appears exactly once in the section: the figure 0.
   ═══════════════════════════════════════════════════════════════ */

.orox-assurance-sc { position: relative; }

/* scoped box-sizing — only the elements that carry padding + width */
.orox-posture,
.orox-posture__stance,
.orox-posture__bar,
.orox-posture__control,
.orox-posture__toggle,
.orox-posture__ledger,
.orox-posture__list,
.orox-posture__item,
.orox-posture__grid,
.orox-posture__body,
.orox-posture__null,
.orox-posture__tail { box-sizing: border-box; }

.orox-posture {
  --op-gut: clamp(16px, 2.6vw, 34px);            /* rail → content gutter */
  --op-line: rgb(245 242 236 / .10);             /* every hairline in here */
  --op-line-soft: rgb(245 242 236 / .06);
  --op-muted: rgb(245 242 236 / .72);            /* AAA on #080808 */
  --op-quiet: rgb(245 242 236 / .62);            /* AA on #080808, captions */
  --op-cap: clamp(12px, .92vw, 13px);
  --op-body: clamp(14px, 1.02vw, 15.5px);
  --op-ease: cubic-bezier(.19, 1, .22, 1);
  margin-top: clamp(26px, 3.6vw, 58px);
}

/* ── standing statement + state legend ───────────────────────── */
.orox-posture__stance {
  display: grid;
  gap: clamp(16px, 2.4vw, 34px);
  border-top: 1px solid var(--op-line);
  padding-top: clamp(16px, 2vw, 28px);
}
@media (min-width: 900px) {
  .orox-posture__stance {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: clamp(30px, 5vw, 92px);
  }
}
.orox-posture__claim {
  margin: 0;
  max-width: 60ch;
  color: var(--orox-paper);
  font-size: clamp(15px, 1.14vw, 17px);
  line-height: 1.62;
  letter-spacing: -.005em;
}
.orox-posture__legend {
  margin: 0;
  max-width: 48ch;
  color: var(--op-muted);
  font-size: clamp(13px, .98vw, 14px);
  line-height: 1.68;
}
.orox-posture__legend b { color: var(--orox-paper); font-weight: 600; }

/* ── the bar: one hairline control, and the two tallies ──────── */
.orox-posture__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(32px, 4.6vw, 76px);
}

/* no-JS: the control does not exist until it can work */
.orox-posture__control { display: none; }
.orox-posture.is-live .orox-posture__control {
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.1vw, 13px);
}

.orox-posture__toggle {
  display: inline-flex;
  align-items: center;
  gap: clamp(9px, 1vw, 13px);
  min-height: 44px;
  padding: clamp(11px, 1.2vw, 15px) clamp(17px, 1.9vw, 25px);
  border: 1px solid var(--op-line);
  border-radius: clamp(8px, .9vw, 12px);
  background: transparent;
  color: var(--orox-paper);
  font: inherit;
  font-size: clamp(13px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 200ms var(--op-ease), background-color 200ms var(--op-ease);
}
.orox-posture__toggle:hover {
  border-color: rgb(245 242 236 / .22);
  background: rgb(245 242 236 / .05);
}
.orox-posture__toggle:focus-visible {
  outline: 2px solid var(--orox-paper);
  outline-offset: 3px;
}
.orox-posture__toggle-dot {
  width: clamp(7px, .7vw, 9px);
  height: clamp(7px, .7vw, 9px);
  flex: none;
  background: currentColor;
  transition: transform 200ms var(--op-ease);
}
.orox-posture__toggle[aria-pressed="true"] .orox-posture__toggle-dot { transform: rotate(45deg); }

.orox-posture__status {
  margin: 0;
  max-width: 52ch;
  color: var(--op-muted);
  font-size: clamp(12px, .92vw, 13px);
  line-height: 1.55;
}

.orox-posture__tallies { display: flex; gap: clamp(22px, 3vw, 46px); margin: 0; }
.orox-posture__tally dt {
  margin: 0 0 clamp(5px, .6vw, 8px);
  color: var(--op-quiet);
  font-size: var(--op-cap);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.orox-posture__tally dd {
  margin: 0;
  color: var(--op-muted);
  font-size: clamp(14px, 1.1vw, 16px);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.orox-posture__figure {
  color: var(--orox-paper);
  font-size: clamp(20px, 1.9vw, 27px);
}
/* the single gold mark in this section — an assayed figure, and it is a zero */
.orox-posture__figure--nil { color: var(--orox-turq); }

/* ── the ledger ──────────────────────────────────────────────── */
.orox-posture__ledger {
  position: relative;
  margin-top: clamp(20px, 2.4vw, 32px);
  padding-left: var(--op-gut);
}
.orox-posture__spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--op-line-soft);
}
.orox-posture__spinefill {
  position: absolute;
  inset: 0;
  background: var(--op-line);
  transform: scaleY(0);          /* resting state — no first-paint flash */
  transform-origin: 50% 0;
  will-change: transform;
}
/* if scripting is off, the rail is simply drawn */
@media (scripting: none) {
  .orox-posture__spinefill { transform: scaleY(1); }
}

.orox-posture__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.orox-posture__colhead { display: none; }
@media (min-width: 860px) {
  .orox-posture__grid {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      clamp(112px, 11vw, 156px)
      clamp(100px, 8.6vw, 124px)
      clamp(100px, 8.6vw, 124px);
    column-gap: clamp(14px, 1.7vw, 26px);
    align-items: start;
  }
  .orox-posture__colhead {
    display: grid;
    padding-bottom: clamp(10px, 1.1vw, 14px);
    border-bottom: 1px solid var(--op-line);
  }
  .orox-posture__colhead span {
    color: var(--op-quiet);
    font-size: var(--op-cap);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
}

.orox-posture__item {
  position: relative;
  padding: clamp(22px, 2.7vw, 38px) 0;
  border-top: 1px solid var(--op-line-soft);
}
@media (min-width: 860px) {
  .orox-posture__list > .orox-posture__item:first-child { border-top: 0; }
}
/* an empty slot on the rail for every item. none are filled. */
.orox-posture__item::before {
  content: "";
  position: absolute;
  left: calc(var(--op-gut) * -1);
  top: clamp(27px, 3vw, 43px);
  width: clamp(7px, .72vw, 9px);
  height: clamp(7px, .72vw, 9px);
  transform: translateX(-50%);
  border: 1px solid var(--op-line);
  background: var(--orox-ink);
}

.orox-posture__no {
  display: block;
  margin-bottom: clamp(7px, .8vw, 11px);
  color: var(--op-quiet);
  font-size: var(--op-cap);
  font-variant-numeric: tabular-nums;
  letter-spacing: .18em;
}
.orox-posture__title {
  margin: 0;
  color: var(--orox-paper);
  font-size: clamp(18px, 1.52vw, 22px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.012em;
}
.orox-posture__sum {
  margin: clamp(6px, .7vw, 9px) 0 0;
  max-width: 44ch;
  color: var(--op-muted);
  font-size: var(--op-body);
  line-height: 1.55;
}

/* state + marks — identical colour treatment, the word does the work */
.orox-posture__state,
.orox-posture__mark {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 1.6vw, 12px);
  margin-top: clamp(12px, 1.6vw, 16px);
  padding-top: clamp(9px, 1.2vw, 12px);
  border-top: 1px solid var(--op-line-soft);
}
.orox-posture__mlabel {
  flex: none;
  width: clamp(86px, 26vw, 116px);
  color: var(--op-quiet);
  font-size: var(--op-cap);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.orox-posture__word {
  color: var(--orox-paper);
  font-size: var(--op-cap);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.orox-posture__glyph {
  position: relative;
  flex: none;
  align-self: center;
  width: clamp(12px, 1.1vw, 15px);
  height: clamp(12px, 1.1vw, 15px);
}
.orox-posture__mark[data-v="yes"] .orox-posture__glyph::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 78%;
  height: 42%;
  border-left: 1.5px solid var(--orox-paper);
  border-bottom: 1.5px solid var(--orox-paper);
  transform: translate(-52%, -62%) rotate(-45deg);
}
.orox-posture__mark[data-v="no"] .orox-posture__glyph::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1px;
  background: var(--op-quiet);
}
.orox-posture__mword {
  font-size: var(--op-cap);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.orox-posture__mark[data-v="yes"] .orox-posture__mword { color: var(--orox-paper); }
.orox-posture__mark[data-v="no"] .orox-posture__mword { color: var(--op-quiet); }

@media (min-width: 860px) {
  .orox-posture__state,
  .orox-posture__mark {
    margin-top: 0;
    padding-top: clamp(24px, 2.5vw, 34px);
    border-top: 0;
    align-items: center;
  }
  .orox-posture__mlabel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* the two halves of every claim */
.orox-posture__body {
  display: grid;
  gap: clamp(12px, 1.5vw, 20px);
  margin-top: clamp(16px, 1.9vw, 24px);
}
@media (min-width: 860px) {
  .orox-posture__item > .orox-posture__body { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 1180px) {
  .orox-posture__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(26px, 3.2vw, 54px);
  }
}
.orox-posture__now,
.orox-posture__nq {
  margin: 0;
  max-width: 56ch;
  font-size: var(--op-body);
  line-height: 1.68;
}
.orox-posture__now { color: var(--orox-paper); }
.orox-posture__nq { color: var(--op-muted); }
.orox-posture__k {
  display: block;
  margin-bottom: clamp(5px, .6vw, 8px);
  color: var(--op-quiet);
  font-size: var(--op-cap);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.orox-posture__now .orox-posture__k { color: var(--orox-paper); }

/* narrowed view: only what is true today */
.orox-posture.is-today .orox-posture__nq { display: none; }
@media (min-width: 1180px) {
  .orox-posture.is-today .orox-posture__body { grid-template-columns: minmax(0, 1fr); }
}

/* ── the null statement — the payload, set at a different scale ─ */
.orox-posture__null {
  display: grid;
  gap: clamp(16px, 2.2vw, 30px);
  margin-top: clamp(30px, 3.8vw, 58px);
  padding-left: var(--op-gut);
  padding-top: clamp(26px, 3.2vw, 46px);
  border-top: 1px solid var(--op-line);
}
@media (min-width: 900px) {
  .orox-posture__null {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(30px, 5vw, 92px);
    align-items: start;
  }
}
.orox-posture__null-lead {
  margin: 0;
  max-width: 18ch;
  color: var(--orox-paper);
  font-size: clamp(22px, 2.5vw, 38px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.orox-posture__null-body { display: grid; gap: clamp(10px, 1.2vw, 16px); }
.orox-posture__null-body p {
  margin: 0;
  max-width: 52ch;
  color: var(--op-muted);
  font-size: var(--op-body);
  line-height: 1.68;
}

/* ── the line continues, undrawn ─────────────────────────────── */
.orox-posture__tail {
  position: relative;
  padding-top: clamp(28px, 3.6vw, 52px);
  padding-left: var(--op-gut);
}
.orox-posture__tail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: clamp(30px, 3.8vw, 54px);
  background: repeating-linear-gradient(
    to bottom,
    var(--op-line) 0 3px,
    transparent 3px 9px
  );
}
.orox-posture__note {
  margin: 0;
  max-width: 68ch;
  color: var(--op-muted);
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.68;
}

/* ── reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .orox-posture,
  .orox-posture *,
  .orox-posture *::before,
  .orox-posture *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .orox-posture__spinefill { transform: scaleY(1) !important; }
}
/* ===== close ===== */
/* ==========================================================================
   THE CLOSING BAND — end of record.
   The page's last beat: a hairline that stops where the writing stops, the
   register of what does not exist yet, and no call to action, because there
   is nothing here to act on.

   Every selector below is namespaced `orox-close-`. Nothing here touches
   .orox, .orox__head, .orox__title, .orox__lede, .orox__eyebrow,
   .orox__container or .orox-reveal — the shared shell is used as authored.

   Gold budget for this section: exactly one element, `.orox-close-rule__mark`,
   the point at which the record ends. Every rule, hairline, border and tick
   below is warm-neutral rgb(245 242 236 / .10 | .22).

   No rem anywhere: this build sets html{font-size} viewport-relative, so
   1rem == 1vw. Type and spacing are clamp(px, vw, px).
   ========================================================================== */

.orox-close-sc {
  /* fixed lead-in. deliberately NOT a percentage of the width: it is a
     typographic device, not a measure of how much is built. */
  --orox-close-lead: clamp(56px, 6vw, 104px);
  --orox-close-dot: clamp(8px, .72vw, 10px);
}

/* --- the rule ------------------------------------------------------------ */
.orox-close-rule {
  margin-top: clamp(30px, 5vw, 82px);
}

.orox-close-rule__track {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 1px;
}

.orox-close-rule__lead {
  flex: 0 0 var(--orox-close-lead);
  height: 1px;
  background: rgb(245 242 236 / .22);
  transform-origin: left center;
}

.orox-close-rule__rest {
  flex: 1 1 auto;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    rgb(245 242 236 / .22) 0 1px,
    rgb(245 242 236 / 0) 1px 11px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 46%, rgb(0 0 0 / 0) 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 46%, rgb(0 0 0 / 0) 100%);
}

/* the one gold mark in the section: the point where the record ends.
   positioned with margins, never transforms, so JS owns transform alone. */
.orox-close-rule__mark {
  position: absolute;
  left: var(--orox-close-lead);
  top: 50%;
  width: var(--orox-close-dot);
  height: var(--orox-close-dot);
  margin-left: calc(var(--orox-close-dot) / -2);
  margin-top: calc(var(--orox-close-dot) / -2);
  background: var(--orox-turq);
  transform-origin: center;
}

.orox-close-rule__tick {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: clamp(15px, 1.7vw, 24px);
  margin-left: -0.5px;
  background: rgb(245 242 236 / .22);
  transform-origin: top center;
}

.orox-close-rule__notes {
  margin-top: clamp(34px, 4vw, 58px);
  display: grid;
  gap: clamp(18px, 2.4vw, 34px);
}

.orox-close-rule__here {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(15px, 1.32vw, 21px);
  line-height: 1.5;
  color: var(--orox-paper);
}

.orox-close-rule__caveat {
  margin: 0;
  max-width: 38ch;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.65;
  color: var(--orox-dim);
}

/* --- the register -------------------------------------------------------- */
.orox-close-reg {
  margin-top: clamp(56px, 7vw, 122px);
}

.orox-close-reg__head {
  display: grid;
  gap: clamp(8px, .9vw, 14px);
  padding-bottom: clamp(20px, 2.4vw, 34px);
}

.orox-close-reg__title {
  margin: 0;
  font-size: clamp(12px, .92vw, 14px);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orox-paper);
}

.orox-close-reg__sub {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.65;
  color: var(--orox-dim);
}

.orox-close-reg__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.orox-close-row {
  display: grid;
  grid-template-columns:
    clamp(30px, 3vw, 46px)
    minmax(0, 24ch)
    minmax(0, 1fr)
    clamp(102px, 11vw, 152px);
  column-gap: clamp(14px, 1.8vw, 30px);
  row-gap: clamp(6px, .7vw, 10px);
  align-items: baseline;
  border-top: 1px solid rgb(245 242 236 / .10);
  padding-block: clamp(18px, 2vw, 28px);
}

.orox-close-reg__list .orox-close-row:last-child {
  border-bottom: 1px solid rgb(245 242 236 / .10);
}

.orox-close-row__n {
  font-size: clamp(12px, .84vw, 13.5px);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--orox-dim);
}

.orox-close-row__name {
  font-size: clamp(15px, 1.28vw, 21px);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--orox-paper);
}

.orox-close-row__note {
  font-size: clamp(13px, .98vw, 15px);
  line-height: 1.6;
  color: var(--orox-dim);
}

/* state is carried by the word, its case and its position — never by colour */
.orox-close-row__state {
  justify-self: end;
  text-align: right;
  font-size: clamp(12px, .86vw, 13.5px);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--orox-paper);
}

/* --- the ending ---------------------------------------------------------- */
.orox-close-end {
  margin-top: clamp(56px, 7vw, 122px);
  display: grid;
  gap: clamp(22px, 2.6vw, 40px);
  align-items: start;
}

.orox-close-end__line {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(16px, 1.5vw, 26px);
  line-height: 1.42;
  letter-spacing: -.014em;
  color: var(--orox-paper);
}

.orox-close-end__note {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.65;
  color: var(--orox-dim);
}

/* --- wide: the caveat sits out in the unwritten half of the rule ---------- */
@media (min-width: 1020px) {
  .orox-close-rule__notes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 38ch);
    gap: clamp(32px, 4vw, 76px);
    align-items: start;
  }
  .orox-close-rule__caveat {
    justify-self: end;
    padding-top: clamp(4px, .5vw, 10px);
  }

  .orox-close-end {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44ch);
    gap: clamp(32px, 4vw, 76px);
  }
  .orox-close-end__note {
    justify-self: end;
    padding-top: clamp(4px, .5vw, 10px);
  }
}

@media (max-width: 1019px) and (min-width: 761px) {
  .orox-close-row {
    grid-template-columns:
      clamp(30px, 3vw, 46px)
      minmax(0, 1fr)
      clamp(102px, 12vw, 140px);
  }
  .orox-close-row__n { grid-column: 1; grid-row: 1; }
  .orox-close-row__name { grid-column: 2; grid-row: 1; }
  .orox-close-row__state { grid-column: 3; grid-row: 1; }
  .orox-close-row__note { grid-column: 2 / 4; grid-row: 2; max-width: 62ch; }
}

/* --- narrow -------------------------------------------------------------- */
@media (max-width: 760px) {
  .orox-close-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(12px, 4vw, 22px);
    row-gap: clamp(7px, 2vw, 11px);
  }
  .orox-close-row__n { grid-column: 1 / -1; grid-row: 1; }
  .orox-close-row__name { grid-column: 1; grid-row: 2; }
  .orox-close-row__state { grid-column: 2; grid-row: 2; }
  .orox-close-row__note { grid-column: 1 / -1; grid-row: 3; }
}

/* --- reduced motion ------------------------------------------------------
   With JS off, or GSAP absent, the resting state above is already the final
   state — nothing here has to undo anything. This block covers the case where
   the preference is on at first paint; the script re-checks it live and clears
   its own inline transforms if the preference changes mid-session.          */
@media (prefers-reduced-motion: reduce) {
  .orox-close-rule__lead,
  .orox-close-rule__rest,
  .orox-close-rule__mark,
  .orox-close-rule__tick,
  .orox-close-rule__notes > p,
  .orox-close-reg__head,
  .orox-close-row {
    opacity: 1;
    transform: none;
  }
}
/* ==========================================================================
   ##### ENHANCEMENT LAYER #####
   Applied on top of the five revised sections. Purely additive: it targets
   their existing classes and adds surface, depth and scroll motion. It does
   not restructure them and does not touch their honesty semantics.

   Law 1 is respected: gold lands ONLY on state words and state glyphs — both
   of which carry meaning — never on a border, rule, divider or heading.
   ========================================================================== */

/* three sections shipped without an ambient bloom, which is why they read flat
   next to how / core / token. Give them one. */
.orox-architecture-sc::before { left: 8%;  transform: none; }
.orox-access-sc::before       { left: auto; right: 6%; transform: none; }
.orox-assurance-sc::before    { left: 12%; transform: none; }

/* ── shared row treatment ──────────────────────────────────
   Every one of these sections is a stack of rows. They were flat text with a
   hairline. They now sit on a real surface that lifts on approach.          */
.orox-lat__row,
.orox-at-row,
.orox-close-row,
.orox-unlock__stop,
.orox-posture__mark {
  position: relative;
  border-radius: calc(var(--orox-radius) * .5);
  transition:
    background .55s var(--orox-ease),
    box-shadow .55s var(--orox-ease),
    transform  .55s var(--orox-ease);
}

/* the scrubbed "in the reading band" state, set from JS */
.orox-lat__row.is-lit,
.orox-at-row.is-lit,
.orox-close-row.is-lit,
.orox-unlock__stop.is-lit,
.orox-posture__mark.is-lit {
  background: var(--orox-glass);
  box-shadow: var(--orox-glass-hi);
}

@media (hover: hover) {
  .orox-lat__row:hover,
  .orox-at-row:hover,
  .orox-close-row:hover,
  .orox-unlock__stop:hover,
  .orox-posture__mark:hover {
    background: var(--orox-glass);
    box-shadow: var(--orox-glass-hi);
    transform: translateX(3px);
  }
}

/* ── state words carry the only gold ────────────────────────
   A state is meaning, so Law 1 permits it. Nothing else here gets gold.    */
.orox-lat__state,
.orox-at-st,
.orox-close-row__state,
.orox-unlock__state,
.orox-posture__mword {
  color: var(--orox-sky) !important;
  transition: color .45s var(--orox-ease), opacity .45s var(--orox-ease);
}

.orox-lat__state[data-state="not-started"],
.orox-close-row__state[data-state="not-started"],
.orox-unlock__state[data-state="not-started"] {
  color: var(--orox-dim) !important;
}

/* ── index numerals: quiet, tabular, and out of the way ───── */
.orox-close-row__n,
.orox-unlock__stop-idx {
  font-variant-numeric: tabular-nums;
  opacity: .55;
}

/* ── section heads drift slightly against the scroll ──────── */
.orox-architecture-sc .orox__head,
.orox-access-sc .orox__head,
.orox-assurance-sc .orox__head,
.orox-bento-sc .orox__head,
.orox-close-sc .orox__head { will-change: transform; }

/* ── rules draw rather than appear ─────────────────────────── */
.orox-js .orox-enh-rule {
  transform: scaleX(0);
  transform-origin: left center;
}
.orox-enh-rule {
  transition: transform .9s var(--orox-ease);
}
.orox-enh-rule.is-drawn { transform: scaleX(1); }

/* ── reduced motion: surfaces stay, movement goes ──────────── */
@media (prefers-reduced-motion: reduce) {
  .orox-lat__row, .orox-at-row, .orox-close-row,
  .orox-unlock__stop, .orox-posture__mark,
  .orox-lat__state, .orox-at-st, .orox-close-row__state,
  .orox-unlock__state, .orox-posture__mword,
  .orox-enh-rule { transition: none !important; }

  .orox-lat__row:hover, .orox-at-row:hover, .orox-close-row:hover,
  .orox-unlock__stop:hover, .orox-posture__mark:hover { transform: none; }

  .orox-js .orox-enh-rule { transform: scaleX(1); }

  /* every row lit, so nothing is hidden behind a scroll position */
  .orox-lat__row, .orox-at-row, .orox-close-row,
  .orox-unlock__stop, .orox-posture__mark {
    background: var(--orox-glass);
    box-shadow: var(--orox-glass-hi);
  }
}

@media (forced-colors: active) {
  .orox-lat__row, .orox-at-row, .orox-close-row,
  .orox-unlock__stop, .orox-posture__mark { background: none; box-shadow: none; }
}

/* ==========================================================================
   ##### FX LAYERS ##### — PixelBlast / Lightfall background canvases
   The canvas sits behind everything in the section's own stacking context
   (.orox sets isolation:isolate, so -1 cannot escape upward) and never takes
   pointer events, so text stays selectable and clicks reach the content.
   ========================================================================== */
.orox-fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s var(--orox-ease);
}

.orox-fx.is-on { opacity: 1; }

.orox-fx canvas { display: block; width: 100%; height: 100%; }

/* per-section intensity — these are atmosphere, not the subject */
.orox-bento-sc     .orox-fx { opacity: 0; }
.orox-bento-sc     .orox-fx.is-on { opacity: .42; }
.orox-assurance-sc .orox-fx.is-on { opacity: .34; }
.orox-close-sc     .orox-fx.is-on { opacity: .30; }

/* the effects never run under reduced motion; hide the empty host too */
@media (prefers-reduced-motion: reduce) { .orox-fx { display: none; } }
@media (forced-colors: active)          { .orox-fx { display: none; } }

/* ==========================================================================
   ##### DRIFTWALL + TEXTLOOP ##### (ported from React Bits)
   ========================================================================== */
.drift-wall{
  position:relative; width:100%; height:100%; overflow:hidden;
  perspective:var(--dw-perspective,1200px); perspective-origin:50% 50%;
  --dw-tile-w:200px; --dw-tile-h:132px; --dw-gap:18px; --dw-radius:14px;
  --dw-lift:64px; --dw-dim:.55; --dw-gray:0; --dw-overlay:#060010; --dw-edge:40%;
  -webkit-mask-image:
    radial-gradient(ellipse 78% 82% at 50% 46%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    radial-gradient(ellipse 78% 82% at 50% 46%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  mask-composite:intersect;
}
.drift-wall__plane{
  position:absolute; top:50%; left:50%; display:flex; flex-direction:row;
  transform-style:preserve-3d; transform-origin:50% 50%; will-change:transform;
}
.drift-wall__col{ position:relative; width:calc(var(--dw-tile-w) + var(--dw-gap)); transform-style:preserve-3d; }
.drift-wall__track{ display:flex; flex-direction:column; will-change:transform; transform-style:preserve-3d; }
.drift-wall__tile{
  position:relative; display:block; width:100%;
  height:calc(var(--dw-tile-h) + var(--dw-gap));
  flex:0 0 auto; outline:none; transform-style:preserve-3d;
}
.drift-wall__inner{
  position:absolute; inset:calc(var(--dw-gap)/2); display:block;
  border-radius:var(--dw-radius); overflow:hidden; background:#0d0b07;
  opacity:var(--dw-dim); transform:translateZ(0); pointer-events:none;
  transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1);
}
.drift-wall__tile img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:grayscale(var(--dw-gray)) saturate(.92);
  transition:filter .42s cubic-bezier(.22,1,.36,1); user-select:none; -webkit-user-drag:none;
}
.drift-wall__overlay{
  position:absolute; inset:0; background:var(--dw-overlay); opacity:.42;
  pointer-events:none; transition:opacity .42s cubic-bezier(.22,1,.36,1);
}
.drift-wall__tile.is-active .drift-wall__inner,
.drift-wall__tile:focus-visible .drift-wall__inner{
  opacity:1; transform:translateZ(var(--dw-lift)); box-shadow:0 24px 60px -18px rgba(0,0,0,.7);
}
.drift-wall__tile.is-active img,
.drift-wall__tile:focus-visible img{ filter:grayscale(0) saturate(1.05); }
.drift-wall__tile.is-active .drift-wall__overlay,
.drift-wall__tile:focus-visible .drift-wall__overlay{ opacity:0; }
.drift-wall__tile:focus-visible .drift-wall__inner{
  box-shadow:0 24px 60px -18px rgba(0,0,0,.7), 0 0 0 2px var(--orox-sky,#DDBA84);
}
@media (prefers-reduced-motion:reduce){
  .drift-wall__plane,.drift-wall__track{ will-change:auto; }
}

/* host band for the wall */
.orox-wall-sc{ padding-block:0; }
.orox-wall{ position:relative; height:clamp(360px,46vw,600px); width:100%; }

/* TextLoop divider */
.text-loop{ position:relative; width:100%; overflow:hidden; }
.text-loop-svg{ display:block; width:100%; height:auto; }
.text-loop-text{ user-select:none; }
.text-loop-measure{ visibility:hidden; pointer-events:none; }

.orox-divider-sc{
  padding-block:clamp(8px,1vw,20px);
  border-top:1px solid var(--orox-line);
  border-bottom:1px solid var(--orox-line);
}
.orox-divider-sc::before{ display:none; }
.orox-divider{ opacity:.5; }

/* ##### VISUAL PASS ##### */

/* ---- road ---- */
/* ==========================================================================
   ROAD — v4 · THE MATERIAL LADDER
   Additive. Appended after everything else. No HTML changes.

   ONE IDEA: the material runs out down the rail.
   Four cards, one geometry, three grades of substance:
     1 underway     — milled glass, drawn top hairline, gold node, gold state
     2 scoped       — engineering hatch, no highlight, hollow node
     3 design stage — outline only, dotted left edge, open node
   The same three grades repeat as glyphs inside the status pills, so the
   state is countable at 2m and re-readable at 30cm.

   THREE FIXES CARRIED IN THE SAME PASS
   a) Law 1. The rail (a connector line), the --live card border and the
      --live radial bloom were all gold. All three are neutralised. Gold now
      touches exactly five things in this section: two rail nodes, two state
      words, and the assayed figure in the meter.
   b) `.orox-phase--todo{opacity:.72}` was dimming #737373 body text to
      roughly 3:1. Opacity is restored to 1 and recession is carried by
      material instead. Text returns to AAA.
   c) `.orox-phase__tag` bottomed out at 9.5px (below the 11px floor) and
      `.orox-prog{max-width:20rem}` is a rem in a 1rem==1vw build — a 78px
      meter at 390px. Both corrected.
   ========================================================================== */

/* ── the card: asymmetric, indexed, quiet ─────────────────────
   Padding is deliberately lopsided — a wide right gutter reserved for the
   index numeral. A card that is not padded uniformly reads as considered. */
.orox-road-sc .orox-road { counter-reset: orox-ph; position: relative; }

.orox-road-sc .orox-phase {
  counter-increment: orox-ph;
  opacity: 1;
  padding:
    clamp(20px, 2vw, 34px)
    clamp(52px, 5.4vw, 92px)
    clamp(22px, 2.2vw, 36px)
    clamp(20px, 2vw, 34px);
  margin-bottom: clamp(16px, 1.6vw, 26px);
  background-color: transparent;
  border-color: rgb(245 242 236 / .13);
  /* the uniform inset highlight is retired — replaced by a gradient hairline
     on ::before that is brighter at the rail and dies before the far corner */
  box-shadow: none;
  transition:
    transform .55s var(--orox-ease),
    border-color .55s var(--orox-ease),
    background-color .55s var(--orox-ease);
}
.orox-road-sc .orox-phase:last-child { margin-bottom: 0; }

/* ── the non-uniform top hairline ────────────────────────────
   Inset from both corners so it never fights the radius, weighted toward
   the rail, gone by 78%. It draws left→right when the card enters the
   shared reading band. Decorative only; carries no text.               */
.orox-road-sc .orox-phase::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(14px, 1.4vw, 26px);
  right: clamp(14px, 1.4vw, 26px);
  height: 1px;
  pointer-events: none;
  transform-origin: left center;
  background-image: linear-gradient(
    90deg,
    rgb(245 242 236 / .30),
    rgb(245 242 236 / .09) 44%,
    rgb(245 242 236 / 0) 78%
  );
  transition: transform .8s var(--orox-ease), opacity .5s var(--orox-ease);
}
.orox-js .orox-road-sc .orox-phase::before { transform: scaleX(.62); }
.orox-road-sc .orox-phase.is-lit::before { transform: scaleX(1); }

/* ── the index numeral ────────────────────────────────────────
   Replaces the gold radial bloom that used to live on --live::after.
   Optically locked to the eyebrow band: same top, same band height,
   vertically centred inside it, tabular so 01–04 never shift.
   Two `content` declarations: the second (with alt text) wins where
   supported, the first survives everywhere else.                       */
.orox-road-sc .orox-phase::after {
  content: counter(orox-ph, decimal-leading-zero);
  content: counter(orox-ph, decimal-leading-zero) / "";
  position: absolute;
  inset: auto;
  z-index: 1;
  top: clamp(20px, 2vw, 34px);
  right: clamp(18px, 1.9vw, 32px);
  height: clamp(22px, 1.9vw, 28px);
  display: flex;
  align-items: center;
  background: none;
  border-radius: 0;
  font-size: clamp(11px, .9vw, 14px);
  font-weight: 500;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: rgb(245 242 236 / .55);   /* ≈5.5:1 on #080808 — AA */
  pointer-events: none;
}

/* ── GRADE 1 · UNDERWAY — the only cards with real substance ── */
.orox-road-sc .orox-phase--live {
  border-color: rgb(245 242 236 / .18);       /* was gold. Law 1. */
  background-image: linear-gradient(
    180deg,
    rgb(245 242 236 / .075),
    rgb(245 242 236 / .022) 45%,
    rgb(245 242 236 / .010)
  );
}

/* ── GRADE 2 · SCOPED — drawn, not built ─────────────────────
   A 1px/9px hatch at 135°. Engineering-drawing language: the area is
   specified but not filled. Legible as texture, invisible as noise.   */
.orox-road-sc .orox-phase--todo {
  opacity: 1;                                  /* was .72 — see (b) */
  border-color: rgb(245 242 236 / .10);
  background-image:
    repeating-linear-gradient(135deg,
      rgb(245 242 236 / .038) 0 1px, rgb(245 242 236 / 0) 1px 9px),
    linear-gradient(180deg,
      rgb(245 242 236 / .022), rgb(245 242 236 / .006) 60%, rgb(245 242 236 / 0));
}
.orox-road-sc .orox-phase--todo::before {
  background-image: linear-gradient(
    90deg, rgb(245 242 236 / .16), rgb(245 242 236 / .04) 46%, rgb(245 242 236 / 0) 76%);
}

/* ── GRADE 3 · DESIGN STAGE — outline only ───────────────────
   Half-strength hatch, no top highlight, and a dotted 1px left edge
   clipped to the padding box so it stops naturally short of both
   rounded corners. The last card is the least material thing here.    */
.orox-road-sc .orox-phase--todo + .orox-phase--todo {
  border-color: rgb(245 242 236 / .07);
  background-image:
    repeating-linear-gradient(180deg,
      rgb(245 242 236 / .26) 0 2px, rgb(245 242 236 / 0) 2px 7px),
    repeating-linear-gradient(135deg,
      rgb(245 242 236 / .020) 0 1px, rgb(245 242 236 / 0) 1px 12px);
  background-size: 1px 100%, auto;
  background-repeat: no-repeat, repeat;
  background-position: left top, 0 0;
  background-clip: padding-box, border-box;
}
.orox-road-sc .orox-phase--todo + .orox-phase--todo::before {
  background-image: none;
}

/* ── THE RAIL — warm-neutral, and not uniform ─────────────────
   Was a full-height gold gradient (a connector line — forbidden).
   Now: starts exactly at the first node's centre, runs solid through the
   work that is real, dissolves into a dotted line, and fades out before
   the section ends. The cross-fade is gradual by design so it never has
   to register against a card edge. Nothing is claimed past the dots.
   Both pseudos inherit the parent's scaleY, so the existing 900ms draw
   in oro-sections.js still owns the reveal.                           */
.orox-road-sc .orox-road__rail {
  left: 1px;                                   /* centres on the 12px node */
  width: 2px;
  top: calc(clamp(20px, 2vw, 34px) + clamp(22px, 1.9vw, 28px) / 2);
  bottom: 0;
  background: none;
  border-radius: 0;
}
.orox-road-sc .orox-road__rail::before,
.orox-road-sc .orox-road__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
}
.orox-road-sc .orox-road__rail::before {
  background-image: linear-gradient(180deg,
    rgb(245 242 236 / .34), rgb(245 242 236 / .18));
  -webkit-mask-image: linear-gradient(180deg, #000 0 42%, transparent 68%);
          mask-image: linear-gradient(180deg, #000 0 42%, transparent 68%);
}
.orox-road-sc .orox-road__rail::after {
  background-image: repeating-linear-gradient(180deg,
    rgb(245 242 236 / .30) 0 2px, rgb(245 242 236 / 0) 2px 7px);
  -webkit-mask-image: linear-gradient(180deg, transparent 34%, #000 62%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 34%, #000 62%, #000 84%, transparent 100%);
}

/* ── THE NODES — grade 1 of 3, on the rail ───────────────────
   Optically re-seated: centred on the eyebrow band rather than a guessed
   26–40px. The gold 5px halo is gone (gold glow — forbidden); the node
   now punches out of the rail with an ink ring and a warm 1px edge.    */
.orox-road-sc .orox-phase__dot {
  top: calc(clamp(20px, 2vw, 34px) + clamp(22px, 1.9vw, 28px) / 2 - 6px);
  background: var(--orox-ink);
  border: 2px solid rgb(245 242 236 / .28);
}
.orox-road-sc .orox-phase--done .orox-phase__dot {
  background: var(--orox-turq);                /* state glyph — Law 1 permits */
  border-color: var(--orox-ink);
  box-shadow: 0 0 0 1px rgb(245 242 236 / .22);
}
.orox-road-sc .orox-phase--todo + .orox-phase--todo .orox-phase__dot {
  width: 8px;
  height: 8px;
  border-width: 1px;
  border-color: rgb(245 242 236 / .22);
  left: calc(clamp(24px, 2.4vw, 42px) * -1 - 3px);
  top: calc(clamp(20px, 2vw, 34px) + clamp(22px, 1.9vw, 28px) / 2 - 4px);
}

/* the examined node — the one is-lit affordance, transform only */
.orox-road-sc .orox-phase__dot::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgb(245 242 236 / .20);
  transform: scale(1);
  transition: transform .7s var(--orox-ease), opacity .7s var(--orox-ease);
}
.orox-js .orox-road-sc .orox-phase__dot::before { transform: scale(.5); opacity: .3; }
.orox-road-sc .orox-phase.is-lit .orox-phase__dot::before { transform: scale(1); opacity: 1; }

/* ── THE EYEBROW — phase name recedes, state advances ────────
   The whole __q used to be gold, so a phase name read as loud as a state.
   The name is now warm-neutral; gold survives only on the state word.  */
.orox-road-sc .orox-phase__q {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(9px, .9vw, 14px);
  row-gap: 8px;
  min-height: clamp(22px, 1.9vw, 28px);
  font-size: var(--orox-fs-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--orox-dim);                      /* 7.5:1 — AAA */
  margin-bottom: clamp(10px, 1vw, 15px);
}
.orox-road-sc .orox-phase--todo .orox-phase__q { color: var(--orox-dim); }

/* ── THE STATE PILL — three glyphs, three states ─────────────
   Filled disc = underway · hollow ring = scoped · dash = design stage.
   The same ladder as the cards, at 5px, so the state survives being
   skimmed. Border stays warm-neutral; only the word itself is gold.
   Size floor raised from 9.5px to 11px.                               */
.orox-road-sc .orox-phase__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(11px, .85vw, 13px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .12em;
  padding: 6px 11px 5px;
  border-radius: 99px;
  border: 1px solid rgb(245 242 236 / .16);
  background-color: rgb(245 242 236 / .045);
  color: var(--orox-dim);
  opacity: 1;
  white-space: nowrap;
}
.orox-road-sc .orox-phase__tag::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
}
.orox-road-sc .orox-phase--live .orox-phase__tag {
  color: var(--orox-sky);                      /* state word — Law 1 permits */
}
/* scoped: hollow ring */
.orox-road-sc .orox-phase--todo .orox-phase__tag::before {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}
/* design stage: a dash — the flattest glyph of the three */
.orox-road-sc .orox-phase--todo + .orox-phase--todo .orox-phase__tag::before {
  width: 7px;
  height: 1px;
  border-radius: 0;
  background-color: currentColor;
  box-shadow: none;
}

/* ── COPY — hierarchy you can read across a room ─────────────── */
.orox-road-sc .orox-phase__h {
  font-size: clamp(19px, 1.62vw, 29px);
  line-height: 1.26;
  letter-spacing: -.015em;
  color: var(--orox-paper, #F5F2EC);
  margin: 0 0 clamp(9px, .9vw, 14px);
  text-wrap: balance;
}
.orox-road-sc .orox-phase__p {
  color: var(--orox-dim);
  max-width: 52ch;
  text-wrap: pretty;
}

/* ── THE METER — an instrument, not a bar ────────────────────
   Graduations at 25/50/75/100 painted OVER the fill, so the assayed
   figure lands on a notch. A 1px specular needle marks the exact stop,
   and it lands on the 50% graduation — the meter agrees with itself.
   max-width was 20rem, i.e. 78px at 390px in this build.              */
.orox-road-sc .orox-prog {
  max-width: clamp(220px, 23vw, 340px);
  margin-top: clamp(26px, 2.8vw, 46px);
}
.orox-road-sc .orox-prog::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: clamp(16px, 1.5vw, 26px);
  background-image: linear-gradient(90deg,
    rgb(245 242 236 / .26), rgb(245 242 236 / .05) 58%, rgb(245 242 236 / 0));
}
.orox-road-sc .orox-prog__k {
  color: var(--orox-dim);
  letter-spacing: .14em;
  margin-bottom: clamp(11px, 1vw, 16px);
}
.orox-road-sc .orox-prog__track {
  position: relative;
  height: 7px;
  background-color: rgb(245 242 236 / .07);
  box-shadow: inset 0 0 0 1px rgb(245 242 236 / .07);
}
.orox-road-sc .orox-prog__track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    rgb(245 242 236 / 0) 0 calc(25% - 1px),
    rgb(245 242 236 / .30) calc(25% - 1px) 25%);
}
.orox-road-sc .orox-prog__fill {
  position: relative;
  /* reversed: bronze→gold, so the ramp brightens toward the measured edge */
  background-image: linear-gradient(90deg,
    var(--orox-blue), var(--orox-turq) 72%, var(--orox-sky));
}
.orox-road-sc .orox-prog__fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background-color: var(--orox-spec);
}

/* ── HOVER ────────────────────────────────────────────────── */
@media (hover: hover) {
  .orox-road-sc .orox-phase:hover {
    transform: translateX(5px);
    border-color: var(--orox-line-strong);
  }
  .orox-road-sc .orox-phase:hover::before { transform: scaleX(1); }
  .orox-road-sc .orox-phase:hover .orox-phase__dot::before {
    transform: scale(1);
    opacity: 1;
  }
}

/* ── FOCUS — defensive; nothing here is interactive today ──── */
.orox-road-sc a:focus-visible,
.orox-road-sc button:focus-visible,
.orox-road-sc [tabindex]:focus-visible {
  outline: 2px solid var(--orox-sky);
  outline-offset: 3px;
  border-radius: 8px;
  min-height: 44px;
}

/* ── RESPONSIVE — layout only ────────────────────────────────── */
@media (max-width: 640px) {
  .orox-road-sc .orox-phase {
    padding-right: clamp(46px, 12vw, 62px);
  }
  .orox-road-sc .orox-phase::after {
    right: 16px;
    font-size: 11px;
  }
  .orox-road-sc .orox-prog { max-width: 100%; }
}

/* ── REDUCED MOTION — surfaces stay, movement goes ───────────
   Every grade, hairline and node lands at its resting state with no
   dependency on a scroll position ever being reached.                 */
@media (prefers-reduced-motion: reduce) {
  .orox-road-sc .orox-phase,
  .orox-road-sc .orox-phase::before,
  .orox-road-sc .orox-phase__dot::before { transition: none !important; }
  .orox-road-sc .orox-phase:hover { transform: none; }
  .orox-js .orox-road-sc .orox-phase::before { transform: scaleX(1); }
  .orox-js .orox-road-sc .orox-phase__dot::before { transform: scale(1); opacity: 1; }
}

/* ── FORCED COLOURS ──────────────────────────────────────────
   Only pseudos that carry no text are dropped. The index numeral and
   every state word survive; the filled/hollow node distinction is
   preserved so the ladder still reads.                                */
@media (forced-colors: active) {
  .orox-road-sc .orox-phase::before,
  .orox-road-sc .orox-road__rail::before,
  .orox-road-sc .orox-road__rail::after,
  .orox-road-sc .orox-prog__track::after,
  .orox-road-sc .orox-prog__fill::after { display: none; }

  .orox-road-sc .orox-road__rail { background-color: CanvasText; }
  .orox-road-sc .orox-phase {
    background-image: none;
    border-color: CanvasText;
  }
  .orox-road-sc .orox-phase::after { color: CanvasText; }
  .orox-road-sc .orox-phase__q,
  .orox-road-sc .orox-phase__h,
  .orox-road-sc .orox-phase__p { color: CanvasText; }
  .orox-road-sc .orox-phase__tag {
    color: CanvasText;
    border-color: CanvasText;
    background-color: Canvas;
  }
  .orox-road-sc .orox-phase__dot {
    background: Canvas;
    border-color: CanvasText;
  }
  .orox-road-sc .orox-phase--done .orox-phase__dot { background: CanvasText; }
  .orox-road-sc .orox-phase__dot::before { border-color: CanvasText; }
  .orox-road-sc .orox-prog__track { background-color: Canvas; }
  .orox-road-sc .orox-prog__fill { background: Highlight; }
}

/* ---- assurance ---- */
/* ══════════════════════════════════════════════════════════════════════════
   ASSURANCE — ENHANCEMENT PASS  ·  "THE UNFILLED COLUMN"
   Purely additive. Every selector is scoped under .orox-assurance-sc and is
   therefore more specific than both the authored block and the shared
   enhancement layer. No HTML changes. Nothing is hidden.

   The idea: an assay register. The "In force" track is given a real ruled
   ground that runs the full height of the ledger and contains nothing — the
   emptiness becomes a measured field, not an absence. Every rule in the
   ledger loses strength as it travels toward that field, so the paper itself
   declines where the record does.

   Gold budget for this section: ONE glyph, the figure 0 in the "In force"
   tally. This patch REMOVES the champagne the shared layer put on every
   "Yes" / "Not yet" — the section's own copy says nothing here is coded by
   colour, and honouring that is the whole point of the page.
   ══════════════════════════════════════════════════════════════════════════ */

.orox-assurance-sc .orox-posture {
  /* mirrors of the authored grid tracks, so the field lands on the column */
  --op-col:   clamp(100px, 8.6vw, 124px);
  --op-gap:   clamp(14px, 1.7vw, 26px);
  --op-half:  clamp(7px, .85vw, 13px);
  /* the ruling of a field that has not been filled in */
  --op-rule:  rgb(245 242 236 / .05);
  --op-bleed: clamp(12px, 1.4vw, 22px);
}

/* ── 1. LAW 1 REPAIR ────────────────────────────────────────────────────
   The shared layer gilds .orox-posture__mword. In this ledger that word is
   "Yes" or "Not yet" — an assay result, not a state — and gilding "Not yet"
   makes an absence look like an achievement. Return both to the authored
   two-tone: paper for a positive, quiet for a negative.                    */
.orox-assurance-sc .orox-posture__mark[data-v="yes"] .orox-posture__mword {
  color: var(--orox-paper) !important;
}
.orox-assurance-sc .orox-posture__mark[data-v="no"] .orox-posture__mword {
  color: var(--op-quiet) !important;
}

/* ── 2. THE UNFILLED FIELD ──────────────────────────────────────────────
   Desktop only, because only there does the grid exist to align to.       */
.orox-assurance-sc .orox-posture__list { position: relative; isolation: isolate; }

@media (min-width: 860px) {
  .orox-assurance-sc .orox-posture__list::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    right: 0;
    width: calc(var(--op-col) + var(--op-half));
    pointer-events: none;
    background-image:
      /* the field's left edge — a true hairline, not a border */
      linear-gradient(to bottom, rgb(245 242 236 / .13), rgb(245 242 236 / .03)),
      /* ruled ground: 8px rhythm, the lines of a register nobody has written on */
      repeating-linear-gradient(to bottom, transparent 0 7px, var(--op-rule) 7px 8px);
    background-size: 1px 100%, 100% 100%;
    background-position: left top, left top;
    background-repeat: no-repeat, repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 90%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 90%, transparent);
  }
}

/* ── 3. HAIRLINES THAT ARE NOT UNIFORM ──────────────────────────────────
   Every rule in the ledger starts at full strength under "Item" and is
   nearly gone by the time it reaches "In force". Painted as a background
   strip so the authored border is left in place, merely made transparent. */
@media (min-width: 860px) {
  .orox-assurance-sc .orox-posture__colhead,
  .orox-assurance-sc .orox-posture__item {
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }
  .orox-assurance-sc .orox-posture__colhead {
    border-bottom-color: transparent;
    background-image: linear-gradient(
      to right,
      rgb(245 242 236 / .22) 0,
      rgb(245 242 236 / .22) 42%,
      rgb(245 242 236 / .09) 74%,
      rgb(245 242 236 / .03) 100%
    );
    background-position: left bottom;
  }
  .orox-assurance-sc .orox-posture__item {
    border-top-color: transparent;
    background-image: linear-gradient(
      to right,
      rgb(245 242 236 / .13) 0,
      rgb(245 242 236 / .13) 42%,
      rgb(245 242 236 / .055) 74%,
      rgb(245 242 236 / .018) 100%
    );
    background-position: left top;
  }
  /* the authored rule removes the first row's border; remove its strip too */
  .orox-assurance-sc .orox-posture__list > .orox-posture__item:first-child {
    background-image: none;
  }
}

/* ── 4. THE ROW IS THE UNIT, NOT THE CELL ───────────────────────────────
   The shared layer lit each mark cell separately, which broke a row into
   three floating chips and nudged them sideways one at a time. The surface
   moves to the whole row and the sideways nudge is dropped — this section
   should not fidget.                                                       */
.orox-assurance-sc .orox-posture__mark.is-lit,
.orox-assurance-sc .orox-posture__mark:hover {
  background: none;
  box-shadow: none;
  transform: none;
}

.orox-assurance-sc .orox-posture__item::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: clamp(3px, .4vw, 6px) calc(var(--op-bleed) * -1);
  border-radius: calc(var(--orox-radius) * .5);
  background: var(--orox-glass);
  box-shadow: var(--orox-glass-hi);
  opacity: 0;                       /* decorative only — carries no text */
  pointer-events: none;
  transition: opacity .55s var(--orox-ease);
}
.orox-assurance-sc .orox-posture__item.is-op-lit::after { opacity: 1; }
.orox-assurance-sc .orox-posture__item:has(.orox-posture__mark.is-lit)::after { opacity: 1; }

@media (hover: hover) {
  .orox-assurance-sc .orox-posture__item:hover::after { opacity: 1; }
}

/* the empty slot on the spine firms up for the row you are reading.
   It stays empty. That is the point. */
.orox-assurance-sc .orox-posture__item::before {
  transition: border-color .55s var(--orox-ease), background-color .55s var(--orox-ease);
}
.orox-assurance-sc .orox-posture__item.is-op-lit::before,
.orox-assurance-sc .orox-posture__item:has(.orox-posture__mark.is-lit)::before,
.orox-assurance-sc .orox-posture__item:hover::before {
  border-color: var(--orox-line-strong);
}

/* ── 5. THE MARKS BECOME FIELDS ─────────────────────────────────────────
   Each assay glyph gets a faint enclosing box: the "Yes" boxes hold a tick,
   the "Not yet" boxes hold a rule drawn through an empty field. Warm-neutral
   hairline, never gold.                                                    */
.orox-assurance-sc .orox-posture__glyph::after {
  content: "";
  position: absolute;
  inset: -34%;
  border: 1px solid var(--op-line-soft);
  border-radius: 2px;
  transition: border-color .55s var(--orox-ease);
}
.orox-assurance-sc .orox-posture__item.is-op-lit .orox-posture__glyph::after,
.orox-assurance-sc .orox-posture__item:has(.orox-posture__mark.is-lit) .orox-posture__glyph::after,
.orox-assurance-sc .orox-posture__item:hover .orox-posture__glyph::after {
  border-color: var(--op-line);
}

/* ── 6. THE TALLIES CARRY THE 2-METRE READ ──────────────────────────────
   "3 of 4" and "0 of 4" are the glanceable summary of the whole section, so
   they are set at display scale, in a ruled field, on tabular figures.
   The 0 is the only gold in this section and now it is unmissable.         */
.orox-assurance-sc .orox-posture__tallies {
  align-items: flex-end;
  gap: clamp(24px, 3.4vw, 54px);
}
.orox-assurance-sc .orox-posture__tally {
  min-width: clamp(104px, 10vw, 148px);
  padding-top: clamp(9px, 1.1vw, 14px);
  border-top: 1px solid var(--op-line);
}
.orox-assurance-sc .orox-posture__tally dd {
  display: flex;
  align-items: baseline;
  gap: .34em;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: .06em;
}
.orox-assurance-sc .orox-posture__figure {
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
}
/* slashed zero where the face has one — an engineering register, not a logo */
.orox-assurance-sc .orox-posture__figure--nil {
  font-variant-numeric: slashed-zero tabular-nums lining-nums;
}

/* ── 7. TYPE AND EDGE DETAIL ────────────────────────────────────────────── */
.orox-assurance-sc .orox-posture__no {
  font-variant-numeric: tabular-nums lining-nums;
  opacity: .62;                      /* floor, never zero */
  transition: opacity .55s var(--orox-ease);
}
.orox-assurance-sc .orox-posture__item.is-op-lit .orox-posture__no,
.orox-assurance-sc .orox-posture__item:has(.orox-posture__mark.is-lit) .orox-posture__no,
.orox-assurance-sc .orox-posture__item:hover .orox-posture__no { opacity: .9; }

.orox-assurance-sc .orox-posture__claim,
.orox-assurance-sc .orox-posture__legend,
.orox-assurance-sc .orox-posture__sum,
.orox-assurance-sc .orox-posture__now,
.orox-assurance-sc .orox-posture__nq,
.orox-assurance-sc .orox-posture__null-body p,
.orox-assurance-sc .orox-posture__note { text-wrap: pretty; }

/* the standing claim is the section's thesis — give it a touch more presence */
.orox-assurance-sc .orox-posture__claim {
  font-size: clamp(15.5px, 1.2vw, 18px);
  letter-spacing: -.008em;
}

/* the null statement set as a register spread, ruled down the middle */
.orox-assurance-sc .orox-posture__null-lead {
  font-size: clamp(24px, 2.9vw, 44px);
  letter-spacing: -.026em;
}
@media (min-width: 900px) {
  .orox-assurance-sc .orox-posture__null-body {
    padding-left: clamp(20px, 2.6vw, 40px);
    border-left: 1px solid var(--op-line-soft);
  }
}

/* the dashed tail should die, not stop */
.orox-assurance-sc .orox-posture__tail::before {
  -webkit-mask-image: linear-gradient(to bottom, #000, rgb(0 0 0 / .25) 62%, transparent);
          mask-image: linear-gradient(to bottom, #000, rgb(0 0 0 / .25) 62%, transparent);
}

/* the spine feathers at both ends instead of butting into nothing */
.orox-assurance-sc .orox-posture__spine {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 88%, transparent);
}

/* ── 8. THE CONTROL ─────────────────────────────────────────────────────── */
.orox-assurance-sc .orox-posture__toggle {
  border-radius: clamp(9px, 1vw, 13px);
  transition:
    border-color 200ms var(--orox-ease),
    background-color 200ms var(--orox-ease),
    color 200ms var(--orox-ease);
}
.orox-assurance-sc .orox-posture__toggle:focus-visible {
  outline: 2px solid var(--orox-paper);
  outline-offset: 3px;
  border-color: var(--orox-line-strong);
}
.orox-assurance-sc .orox-posture__toggle[aria-pressed="true"] {
  border-color: var(--orox-line-strong);
  background: rgb(245 242 236 / .045);
}
.orox-assurance-sc .orox-posture__toggle-dot {
  border-radius: 1px;
  transition: transform 200ms var(--orox-ease);
}

/* ── 9. REDUCED MOTION ──────────────────────────────────────────────────
   Nothing depends on scroll: every row surface is simply on.              */
@media (prefers-reduced-motion: reduce) {
  .orox-assurance-sc .orox-posture__item::after,
  .orox-assurance-sc .orox-posture__item::before,
  .orox-assurance-sc .orox-posture__glyph::after,
  .orox-assurance-sc .orox-posture__no,
  .orox-assurance-sc .orox-posture__toggle,
  .orox-assurance-sc .orox-posture__toggle-dot { transition: none !important; }

  .orox-assurance-sc .orox-posture__item::after { opacity: 1; }
  .orox-assurance-sc .orox-posture__no { opacity: .78; }
  .orox-assurance-sc .orox-posture__mark.is-lit,
  .orox-assurance-sc .orox-posture__mark:hover { transform: none !important; }
}

/* ── 10. FORCED COLORS ──────────────────────────────────────────────────
   Decorative surfaces and grounds drop out; every field edge becomes a
   system stroke so the register still reads as a register.                */
@media (forced-colors: active) {
  .orox-assurance-sc .orox-posture__list::before,
  .orox-assurance-sc .orox-posture__item::after { display: none; }

  .orox-assurance-sc .orox-posture__colhead,
  .orox-assurance-sc .orox-posture__item {
    background-image: none;
    border-top-color: CanvasText;
    border-bottom-color: CanvasText;
  }
  .orox-assurance-sc .orox-posture__glyph::after,
  .orox-assurance-sc .orox-posture__item::before { border-color: CanvasText; }
  .orox-assurance-sc .orox-posture__figure,
  .orox-assurance-sc .orox-posture__figure--nil,
  .orox-assurance-sc .orox-posture__mword { color: CanvasText !important; forced-color-adjust: none; }
  .orox-assurance-sc .orox-posture__tail::before,
  .orox-assurance-sc .orox-posture__spine {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ---- faq ---- */
/* ==========================================================================
   6 · FAQ — ENHANCEMENT PASS — "THE MARGIN LEDGER"
   Additive only. Appended after everything else. No HTML change, no rewrite
   of the existing .orox-faq rules — every selector below is scoped under
   .orox-faq-sc and therefore outranks what is already there.

   THE IDEA
   The accordion is not a stack of dividers, it is a page from a bound
   record. A tabular index numeral sits in a left margin whose edge is shared
   with the eyebrow rule and the h2 above it; the question and its answer
   hang-indent off that margin onto one shared vertical. Each rule is dense
   where the numeral sits and dissolves toward the outer edge — a ruled page,
   not a repeated hairline. Opening an entry drops a spine down the margin
   from the numeral to the last line of the answer, and the entries you are
   not reading recede. The page behaves like a reading instrument.

   GOLD BUDGET: one mark. The open seal. Nothing else.
   The pre-existing summary:hover -> --orox-sky is overridden back to paper,
   because a question is a heading and Law 1 keeps gold off headings.
   ========================================================================== */

.orox-faq-sc .orox-faq {
  /* the margin column. --oxf-gap mirrors the summary's existing flex gap so
     the numeral, the question and the answer sit on one vertical. */
  --oxf-gap:  clamp(14px, 1.4vw, 24px);
  --oxf-hang: clamp(30px, 3.4vw, 44px);
  --oxf-num:  calc(var(--oxf-hang) - var(--oxf-gap));
  position: relative;
  counter-reset: oxf;
}

/* Desktop lets the margin keep growing (the cap is the only difference, so
   the value is continuous across the breakpoint). The block is deliberately
   NOT pulled left into the section padding: measured at 992–1920 that leaves
   under 10px outside the numerals, which reads as falling off the page
   rather than as a margin. */
@media (min-width: 992px) {
  .orox-faq-sc .orox-faq { --oxf-hang: clamp(33px, 3.4vw, 56px); }
}

/* ── the entry ─────────────────────────────────────────────── */
.orox-faq-sc .orox-faq__i {
  counter-increment: oxf;
  position: relative;
  isolation: isolate;              /* keeps the wash pseudo local           */
}

/* the ruled page — a hairline that is NOT uniform. Layered OVER the existing
   1px border, never replacing it, so the rule survives regardless. */
.orox-faq-sc .orox-faq__i::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgb(245 242 236 / .30) 0,
    rgb(245 242 236 / .15) 16%,
    rgb(245 242 236 / .06) 58%,
    rgb(245 242 236 / 0)  100%);
  opacity: .82;
  transition: opacity .45s var(--orox-ease);
}

/* the ledger closes the way it opens */
.orox-faq-sc .orox-faq::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgb(245 242 236 / .30) 0,
    rgb(245 242 236 / .15) 16%,
    rgb(245 242 236 / .06) 58%,
    rgb(245 242 236 / 0)  100%);
  opacity: .82;
}

/* the open wash — a short left-anchored bleed, not a card. On its own layer
   so it can cross-fade with the answer instead of snapping. */
.orox-faq-sc .orox-faq__i::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    rgb(245 242 236 / .05) 0,
    rgb(245 242 236 / .014) 38%,
    rgb(245 242 236 / 0) 74%);
  transition: opacity .55s var(--orox-ease);
}

.orox-faq-sc .orox-faq__i[open]::after  { opacity: 1; }
.orox-faq-sc .orox-faq__i[open]::before { opacity: 1; }

/* ── the index numeral in the margin ───────────────────────── */
.orox-faq-sc .orox-faq__i summary::before {
  content: counter(oxf, decimal-leading-zero);
  flex: none;
  min-width: var(--oxf-num);
  font-size: clamp(11px, .78vw, 13px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--orox-dim);
  /* optical: sits on the question's FIRST BASELINE, not its box top */
  padding-top: clamp(8px, .8vw, 14.5px);
  transition: color .2s var(--orox-ease), transform .2s var(--orox-ease);
}

/* ── the question ──────────────────────────────────────────── */
.orox-faq-sc .orox-faq__i summary {
  color: var(--orox-paper);
  align-items: flex-start;
}

/* Law 1 repair: gold does not touch a heading. */
.orox-faq-sc .orox-faq__i summary:hover { color: var(--orox-paper); }

.orox-faq-sc .orox-faq__q {
  color: var(--orox-paper);
  letter-spacing: -.012em;
  text-wrap: pretty;
  transition: color .3s var(--orox-ease);
}

@media (hover: hover) {
  /* the entry steps out into the margin — 2px, once, on the numeral only */
  .orox-faq-sc .orox-faq__i summary:hover::before {
    color: var(--orox-paper);
    transform: translateX(-2px);
  }
  .orox-faq-sc .orox-faq__i:hover::before { opacity: 1; }
  .orox-faq-sc .orox-faq__i summary:hover .orox-faq__sign {
    border-color: rgb(245 242 236 / .40);
  }
}

/* ── the seal — the section's only gold ────────────────────── */
.orox-faq-sc .orox-faq__i .orox-faq__sign {
  border-color: rgb(245 242 236 / .20);
  transition: background-color .45s var(--orox-ease),
              background-image .45s var(--orox-ease),
              border-color .45s var(--orox-ease),
              color .45s var(--orox-ease),
              transform .55s var(--orox-ease);
}

/* The gradient is authored UPSIDE DOWN on purpose: the existing open state
   rotates the disc 180deg, so it lands light-at-top. That is what gives the
   rotation something to say — a flat swatch spinning reads as nothing, a
   graduated one reads as a seal turning over. */
.orox-faq-sc .orox-faq__i[open] .orox-faq__sign {
  background-image: linear-gradient(0deg,
    var(--orox-light) 0, var(--orox-turq) 60%, var(--orox-blue) 100%);
  background-color: var(--orox-turq);
  border-color: var(--orox-turq);
  color: var(--orox-ink);
}

/* ── the answer ────────────────────────────────────────────── */
.orox-faq-sc .orox-faq__a {
  position: relative;
  padding-left: var(--oxf-hang);
}

/* cool #e8edf2 on a warm-paper page was the one off-note in this block */
.orox-faq-sc .orox-faq__a strong { color: var(--orox-paper); }

/* No fill-mode anywhere: if animations never run, the content is simply
   already at its final state. Nothing can be left hidden. */
.orox-faq-sc .orox-faq__i[open] .orox-faq__a {
  animation: oxf-answer .5s var(--orox-ease);
}

/* the spine — drawn down the margin from the numeral to the last line */
.orox-faq-sc .orox-faq__i[open] .orox-faq__a::before {
  content: "";
  position: absolute;
  left: calc(var(--oxf-num) * .5);
  top: 0;
  bottom: clamp(20px, 2vw, 34px);
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgb(245 242 236 / .28) 0, rgb(245 242 236 / .04) 100%);
  transform-origin: top center;
  animation: oxf-spine .9s var(--orox-ease);
}

@keyframes oxf-answer {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes oxf-spine {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── the page quiets what you are not reading ──────────────────
   CSS-only, fully reversible, no JS. Recedes to --orox-dim (7.4:1 on #080808,
   still AAA) — nothing is ever hidden, and pointing at a row wakes it. */
@supports selector(:has(*)) {
  .orox-faq-sc .orox-faq:has(.orox-faq__i[open]) .orox-faq__i:not([open]) .orox-faq__q {
    color: var(--orox-dim);
  }
  .orox-faq-sc .orox-faq:has(.orox-faq__i[open]) .orox-faq__i:not([open]) summary:hover .orox-faq__q,
  .orox-faq-sc .orox-faq:has(.orox-faq__i[open]) .orox-faq__i:not([open]) summary:focus-visible .orox-faq__q {
    color: var(--orox-paper);
  }
}

/* ── focus ─────────────────────────────────────────────────────
   The entry carries overflow:hidden, so the existing +3px ring is drawn
   outside the entry box and gets clipped on every edge. Same ring, pulled
   inside: it wraps the whole row and cannot be clipped by anything. */
.orox-faq-sc .orox-faq__i summary:focus-visible {
  outline-offset: -2px;
  border-radius: clamp(8px, .8vw, 14px);
}

/* ── narrow ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .orox-faq-sc .orox-faq__a { padding-right: 0; padding-left: var(--oxf-hang); }
}

/* ── reduced motion: every surface stays, the movement goes ── */
@media (prefers-reduced-motion: reduce) {
  .orox-faq-sc .orox-faq__i::before,
  .orox-faq-sc .orox-faq__i::after,
  .orox-faq-sc .orox-faq__i summary,
  .orox-faq-sc .orox-faq__i summary::before,
  .orox-faq-sc .orox-faq__q,
  .orox-faq-sc .orox-faq__i .orox-faq__sign { transition: none !important; }

  .orox-faq-sc .orox-faq__i[open] .orox-faq__a,
  .orox-faq-sc .orox-faq__i[open] .orox-faq__a::before { animation: none !important; }

  .orox-faq-sc .orox-faq__i summary:hover::before { transform: none; }

  /* no rotation, so the seal is authored right way up instead */
  .orox-faq-sc .orox-faq__i[open] .orox-faq__sign {
    transform: none;
    background-image: linear-gradient(180deg,
      var(--orox-light) 0, var(--orox-turq) 60%, var(--orox-blue) 100%);
  }
}

/* ── forced colors ─────────────────────────────────────────── */
@media (forced-colors: active) {
  .orox-faq-sc .orox-faq__i::before,
  .orox-faq-sc .orox-faq__i::after,
  .orox-faq-sc .orox-faq::after,
  .orox-faq-sc .orox-faq__i[open] .orox-faq__a::before { display: none; }

  .orox-faq-sc .orox-faq__i { border-top: 1px solid CanvasText; }
  .orox-faq-sc .orox-faq__i summary::before,
  .orox-faq-sc .orox-faq__q { color: CanvasText !important; }

  .orox-faq-sc .orox-faq__i[open] .orox-faq__sign {
    background-image: none;
    background-color: Highlight;
    border-color: CanvasText;
    color: Canvas;
  }
}

/* ---- close ---- */
/* ==========================================================================
   CLOSE — ENHANCEMENT PASS  (additive; appended after everything else)
   ONE IDEA: "the record runs out of ink."
   Every hairline in this band decays left→right, and each successive hairline
   is fainter than the one above it. Six rules descend: the register's opening
   line, four row lines, and a dissolving dashed close in the same dash
   language as the mark's rule at the top of the section. The page then ends on
   an open square — the proof-mark for "not proven".

   Consequences of that idea, deliberately:
   - the rows in this band are NOT cards. Every other row-stack on this page
     lifts into a glass rectangle and slides 3px on hover. Nothing here is
     clickable, so that motion carries no meaning. The lit state becomes a
     directional wash that dies at 84% — the same left→right decay.
   - the ambient bloom is halved. The light is going out.
   - gold spends itself on three state words. "Not started" gets none: gold is
     a measurement, and nothing has been measured there.

   Law 1 audit: gold touches exactly the rule mark (the assayed point) and the
   three state words that name a real state. Every rule, hairline, crop mark,
   border, tick and the end mark is warm-neutral rgb(245 242 236 / a).
   No rem. No animated width/height/box-shadow. Nothing is ever hidden: every
   opacity below has a non-zero resting value that does not depend on scroll.
   ========================================================================== */

.orox-close-sc {
  /* the decaying hairline, reused six times so the band reads as one system */
  --oxc-hair: linear-gradient(90deg,
    rgb(245 242 236 / .30) 0%,
    rgb(245 242 236 / .155) 38%,
    rgb(245 242 236 / .062) 72%,
    rgb(245 242 236 / .022) 100%);
  /* the dissolving dash, two coprime periods so the beat never repeats */
  --oxc-dash:
    repeating-linear-gradient(90deg, rgb(245 242 236 / .26) 0 1px, rgb(245 242 236 / 0) 1px 9px),
    repeating-linear-gradient(90deg, rgb(245 242 236 / .13) 0 1px, rgb(245 242 236 / 0) 1px 31px);
  --oxc-fade: linear-gradient(90deg, #000 0%, rgb(0 0 0 / .72) 34%, rgb(0 0 0 / .28) 64%, rgb(0 0 0 / 0) 100%);

  /* the change of pressure: the page exhales before it stops */
  padding-bottom: clamp(96px, 11vw, 200px);
}

/* the light is going out — this band's bloom is half of every other band's */
.orox-close-sc::before {
  top: -52%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(201, 164, 106, .055) 0%,
    rgba(255, 242, 169, .014) 32%,
    transparent 62%);
}

/* faint ledger ruling, present where the record is written, gone by the
   bottom-right. Subliminal by design — it gives the ink a tooth, nothing more */
.orox-close-sc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(180deg,
    rgb(245 242 236 / .016) 0 1px,
    rgb(245 242 236 / 0) 1px 38px);
  -webkit-mask-image: radial-gradient(125% 88% at 0% 0%, #000 0%, rgb(0 0 0 / .45) 46%, rgb(0 0 0 / 0) 78%);
          mask-image: radial-gradient(125% 88% at 0% 0%, #000 0%, rgb(0 0 0 / .45) 46%, rgb(0 0 0 / 0) 78%);
}

/* --- the rule ------------------------------------------------------------ */
.orox-close-sc .orox-close-rule {
  margin-top: clamp(38px, 5.6vw, 92px);
}

/* the written half accumulates toward the mark instead of sitting flat */
.orox-close-sc .orox-close-rule__lead {
  background: linear-gradient(90deg,
    rgb(245 242 236 / .08) 0%,
    rgb(245 242 236 / .20) 55%,
    rgb(245 242 236 / .34) 100%);
}

/* the unwritten half: a dash rhythm that is not uniform and never repeats */
.orox-close-sc .orox-close-rule__rest {
  background: var(--oxc-dash);
  -webkit-mask-image: var(--oxc-fade);
          mask-image: var(--oxc-fade);
}

/* the one gold element on the page's last screen: a machined pin, not a swatch.
   NO transform is set here — the section script owns this element's transform. */
.orox-close-sc .orox-close-rule__mark {
  background-image: linear-gradient(135deg,
    var(--orox-spec) 0%,
    var(--orox-light) 22%,
    var(--orox-turq) 58%,
    var(--orox-blue) 100%);
}

/* warm-neutral crop marks around the measured point — a survey monument */
.orox-close-sc .orox-close-rule__mark::after {
  --cm: rgb(245 242 236 / .30);
  --cl: 5px;
  content: "";
  position: absolute;
  inset: calc(clamp(5px, .55vw, 8px) * -1);
  pointer-events: none;
  background-image:
    linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm)),
    linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm)),
    linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm)),
    linear-gradient(var(--cm), var(--cm)), linear-gradient(var(--cm), var(--cm));
  background-repeat: no-repeat;
  background-size:
    var(--cl) 1px, 1px var(--cl),
    var(--cl) 1px, 1px var(--cl),
    var(--cl) 1px, 1px var(--cl),
    var(--cl) 1px, 1px var(--cl);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

/* the tick dissolves downward instead of stopping dead */
.orox-close-sc .orox-close-rule__tick {
  background: linear-gradient(180deg,
    rgb(245 242 236 / .34) 0%,
    rgb(245 242 236 / .10) 55%,
    rgb(245 242 236 / 0) 100%);
}

/* the thesis sentence of the section — give it the weight it earns */
.orox-close-sc .orox-close-rule__here {
  font-size: clamp(16px, 1.45vw, 24px);
  line-height: 1.42;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.orox-close-sc .orox-close-rule__caveat { text-wrap: pretty; }

/* --- the register -------------------------------------------------------- */
.orox-close-sc .orox-close-reg { position: relative; }

/* hairline #1 — the strongest. Everything below decays from here. */
.orox-close-sc .orox-close-reg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--oxc-hair);
  pointer-events: none;
}

.orox-close-sc .orox-close-reg__head {
  padding-top: clamp(20px, 2.4vw, 34px);
}

.orox-close-sc .orox-close-reg__sub { text-wrap: pretty; }

/* register lines, not cards: no radius, no lift, no slide */
.orox-close-sc .orox-close-reg__list .orox-close-row {
  position: relative;
  border-radius: 0;
  border-top-color: transparent;
  background: none;
  box-shadow: none;
  --row-hair: .7;
  transition: background .55s var(--orox-ease);
}

.orox-close-sc .orox-close-reg__list .orox-close-row:last-child {
  border-bottom-color: transparent;
}

/* hairlines #2–#5, each fainter than the one above it */
.orox-close-sc .orox-close-reg__list .orox-close-row:nth-child(1) { --row-hair: .82; }
.orox-close-sc .orox-close-reg__list .orox-close-row:nth-child(2) { --row-hair: .66; }
.orox-close-sc .orox-close-reg__list .orox-close-row:nth-child(3) { --row-hair: .50; }
.orox-close-sc .orox-close-reg__list .orox-close-row:nth-child(4) { --row-hair: .36; }

.orox-close-sc .orox-close-reg__list .orox-close-row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--oxc-hair);
  opacity: var(--row-hair);
  transition: opacity .55s var(--orox-ease);
  pointer-events: none;
}

/* hairline #6 — the register closes in the same dash language as the mark's
   rule at the top of the section. The record stops mid-stroke. */
.orox-close-sc .orox-close-reg__list .orox-close-row:last-child::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  opacity: .78;
  background: var(--oxc-dash);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / .6) 40%, rgb(0 0 0 / 0) 92%);
          mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / .6) 40%, rgb(0 0 0 / 0) 92%);
  pointer-events: none;
}

/* the reading band: a directional wash that dies where the record dies.
   Replaces the shared glass rectangle + 3px slide. */
.orox-close-sc .orox-close-reg__list .orox-close-row.is-lit {
  background: linear-gradient(90deg,
    rgb(245 242 236 / .052) 0%,
    rgb(245 242 236 / .020) 38%,
    rgb(245 242 236 / 0) 84%);
  box-shadow: none;
  transform: none;
}

.orox-close-sc .orox-close-reg__list .orox-close-row.is-lit::before {
  opacity: min(1, calc(var(--row-hair) + .2));
}

@media (hover: hover) {
  .orox-close-sc .orox-close-reg__list .orox-close-row:hover {
    background: linear-gradient(90deg,
      rgb(245 242 236 / .052) 0%,
      rgb(245 242 236 / .020) 38%,
      rgb(245 242 236 / 0) 84%);
    box-shadow: none;
    transform: none;
  }
  .orox-close-sc .orox-close-reg__list .orox-close-row:hover::before {
    opacity: min(1, calc(var(--row-hair) + .2));
  }
}

/* index numerals: the shared layer dimmed these to ~2.9:1, which fails AA even
   for decorative text. Warm paper at .62 is 7.2:1 and reads crisper. */
.orox-close-sc .orox-close-reg__list .orox-close-row__n {
  opacity: 1;
  color: rgb(245 242 236 / .62);
  letter-spacing: .08em;
}

/* the state word is the whole claim — size it to be read at two metres */
.orox-close-sc .orox-close-row__state {
  font-size: clamp(12.5px, .95vw, 15px);
  font-weight: 500;
  letter-spacing: .1em;
}

/* Law 1, applied honestly: item 04 has no state to measure, so it gets no gold.
   Warm-neutral #A39D92 on #080808 is 7.4:1 — AAA at this size. */
.orox-close-sc .orox-close-reg__list .orox-close-row:last-child .orox-close-row__state {
  color: var(--orox-dim) !important;
}

.orox-close-sc .orox-close-row__note { text-wrap: pretty; }

/* --- the ending ---------------------------------------------------------- */
.orox-close-sc .orox-close-end {
  margin-top: clamp(64px, 8vw, 148px);
}

.orox-close-sc .orox-close-end__line { text-wrap: balance; }
.orox-close-sc .orox-close-end__note { text-wrap: pretty; }

/* the last mark on the page: an OPEN tombstone. In proof notation a filled ∎
   closes an argument; an open □ means the thing was not proven. Nothing here
   has shipped, so the box stays open. Warm-neutral — the gold is spent. */
.orox-close-sc .orox-close-end::after {
  content: "";
  grid-column: 1;
  justify-self: start;
  align-self: start;
  width: clamp(9px, .86vw, 12px);
  height: clamp(9px, .86vw, 12px);
  border: 1px solid rgb(245 242 236 / .30);
  margin-top: clamp(2px, .4vw, 6px);
}

/* --- wide: the sentence about the mark begins at the mark ----------------- */
@media (min-width: 1020px) {
  /* optical alignment: the left edge of "The written record stops at this
     mark." sits on the left edge of the mark itself. */
  .orox-close-sc .orox-close-rule__here {
    padding-left: calc(var(--orox-close-lead) - var(--orox-close-dot) / 2);
    max-width: 40ch;
  }
  /* the tick lengthens so it points down into that sentence */
  .orox-close-sc .orox-close-rule__tick {
    height: clamp(26px, 3.2vw, 46px);
  }
}

/* --- interactive safety net (this band ships with no controls) ------------ */
.orox-close-sc :is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--orox-paper);
  outline-offset: 3px;
  border-radius: 2px;
  min-height: 44px;
}

/* --- reduced motion ------------------------------------------------------
   Movement goes, surface stays. Every row is washed and every hairline keeps
   its ladder value, so nothing depends on a scroll position ever firing.    */
@media (prefers-reduced-motion: reduce) {
  .orox-close-sc .orox-close-reg__list .orox-close-row,
  .orox-close-sc .orox-close-reg__list .orox-close-row::before,
  .orox-close-sc .orox-close-row__state {
    transition: none !important;
  }
  .orox-close-sc .orox-close-reg__list .orox-close-row {
    background: linear-gradient(90deg,
      rgb(245 242 236 / .052) 0%,
      rgb(245 242 236 / .020) 38%,
      rgb(245 242 236 / 0) 84%);
    box-shadow: none;
    transform: none;
  }
  .orox-close-sc .orox-close-reg__list .orox-close-row::before {
    opacity: min(1, calc(var(--row-hair) + .2));
  }
}

/* --- forced colours: pseudo hairlines cannot survive, so give the borders
       back and drop every decorative layer ---------------------------------- */
@media (forced-colors: active) {
  .orox-close-sc::after,
  .orox-close-sc .orox-close-reg::before,
  .orox-close-sc .orox-close-rule__mark::after,
  .orox-close-sc .orox-close-reg__list .orox-close-row::before,
  .orox-close-sc .orox-close-reg__list .orox-close-row:last-child::after {
    display: none;
  }
  .orox-close-sc .orox-close-reg__list .orox-close-row {
    background: none;
    border-top: 1px solid CanvasText;
  }
  .orox-close-sc .orox-close-reg__list .orox-close-row:last-child {
    border-bottom: 1px solid CanvasText;
  }
  .orox-close-sc .orox-close-end::after {
    border-color: CanvasText;
  }
  .orox-close-sc .orox-close-row__n { color: CanvasText; }
}