/* ============================================================================
   craft/inner.css · the interior kit
   Loaded after craft/scrollcraft.css and craft/d-current.css on every interior
   page. It restyles, on test D's tokens and look, the component classes the
   interior pages carried over from the old site.css blockout, keeping the same
   class names so a page converts with little markup churn.

   D's own classes (nav, footer, .btn, .section, .paper, .eyebrow, .slab,
   .grn, .telem, .kanji, .screen, .quote, .lane, .case, .rv) are reused as
   they are, with three kinds of exception, each marked where it happens:
   the ground fixes D never needed on the homepage (a kicker on ink, a lime
   button on cream or on the lime band, a case or a close on cream), the "D
   patches" blocks below (AA contrast, the bar), and the stage rules that
   keep D's phone breakpoint in step with the kit's once-at-load flow
   decision and its fit check (a pinned stage released). Where
   a D class only exists under a homepage scope (.hero .sub, .final .scar,
   .hero .cta-row), this file adds the generic interior rule.

   The look, in one line: D's section grounds, big Kallisto slabs against
   small mono labels, 1px line work (hairline grids drawn with outlines so an
   empty cell never shows a filled block), telemetry labels and kanji as
   furniture, lime focus. Paper (cream) variants pitch lime down to moss, as
   D does, because lime on cream measures about 1.2:1.

   Device hooks ([data-fx]) are written with :where() so they carry zero
   specificity and never outrank a D class on the same element; the one
   exception is the lit colour of a words line, a state that must win.

   Two blocks override D itself: "D patches", the places where D's own
   colours measure under WCAG AA (the nav over cream, the footer, small moss
   type on cream, the door small print, the doors readout), and "D patch: the
   bar", which fits the nav at every width. d-current.css is not edited here;
   the homepage should take the same lines.
   ========================================================================== */

/* ---- kit tokens ------------------------------------------------------------
   --moss-deep (#2d8a4e) measures 4.23:1 on cream: fine for large type and
   line work, under AA for body-size text. Small moss TEXT on cream (links,
   mono keys, cites) uses this one step darker moss instead: 5.06:1 on
   --paper, 4.76:1 on the tinted alt band. Rules, bullets and ticks keep
   --moss-deep. */
:root{--moss-ink:#287c46}

/* ---- hairline colour, per ground -------------------------------------------
   The outline-drawn grids (.lenses, .stat-strip) overlap neighbouring
   outlines in the 1px gap. A translucent line doubles its alpha there and the
   inner lines read twice as bright as the frame, so --hl is the same line
   pre-mixed opaque onto each ground (white 10% on the inks, ink 16% on
   cream). A ground class sets it; the default is the ink ground. The kit's
   ground classes come last, as their backgrounds do, so on an element that
   carries both (section.cases.dark) the kit ground wins. */
:root,.offers,.change,.phero{--hl:#2f2e33}
.problem,.founder,.field{--hl:#343439}
.cases,.silence,.proof{--hl:#2a292d}
.dark{--hl:#2f2e33}
.dark-2{--hl:#343439}
.dark-3{--hl:#2a292d}
.paper{--hl:#d8d9cc}

/* ---- the frame ------------------------------------------------------------ */
/* the bar is fixed (d-current.css), so an in-page anchor must land below it.
   The bottom padding keeps a control that focus scrolls in from the foot of
   the window clear of the edge, so its whole ring shows. A page never adds
   its own scroll-margin for the bar: the two add together. */
html{scroll-padding-top:calc(var(--nav-h,62px) + 16px);scroll-padding-bottom:1.25rem}
/* A section lands flush under the bar (the 16px above is for a heading or a
   control, not a ground: after a cream section it would show a cream strip
   between the ink bar and an ink section). */
main>section[id]{scroll-margin-top:-16px}
/* Nothing in main may widen the page. Furniture hangs past the edge on
   purpose (a kanji at right:-3vw, the scan's canvas apron past the last
   letter), and below 900px D unsticks the stages, so a stage's own clip no
   longer holds its absolute children. body{overflow-x:hidden} does not stop
   a phone's layout viewport from widening to fit them. clip, never hidden:
   clip makes no scroll container, so sticky stages and the legal rail still
   stick. */
main{overflow-x:clip}

/* ---- D patches: WCAG AA ----------------------------------------------------
   The bar is 82% ink, so over a cream section the ground lifts to about
   #414142 and D's ash links measure 2.98:1. At 92% with the links one step
   lighter they measure 5.3:1 over cream, 5.9:1 over the lime band and 6.3:1
   over ink. */
.nav{background:rgba(24,23,28,.92)}
.navlinks a{color:#9C9CA5}
/* footer tagline, links and copyright: ash-dim on ink-3 is 2.75:1; ash is 5.49:1 */
.foot .mono{color:var(--ash)}
.foot .mono a:hover{color:var(--lime)}
/* small moss type on cream: moss-deep is 4.23:1, moss-ink 5.06:1 (and the
   same the other way round: cream on the thirteenth cell) */
.paper .eyebrow,.paper .trap .n,.thirteen .thirteen__lbl{color:var(--moss-ink)}
.thirteen i.is-13{background:var(--moss-ink);border-color:var(--moss-ink)}
/* the door small print: ash-dim on ink is 2.45:1; ash is 5.21:1 (4.89:1 on the featured door) */
.lane .price s{color:var(--ash)}
.proof-foot{color:var(--ash)}
/* the doors readout names a lane, so it is read, not only seen: ash, not ash-dim */
.doors__read{color:var(--ash)}

/* ---- D patch: the bar at every width -----------------------------------------
   D shows every link from 761px up at a 2rem gap, which needs about 1240px:
   below that the labels wrap (the booking link to five lines at 768, out of
   the 62px bar) and the logo is squeezed out of its ratio. Here the logo
   keeps its ratio at every width (it scales inside its box on a phone), every
   label stays on one line above 760px, the links sit closer from 1160 to
   1239px (all eight fit from 1160), and from 761 to 1159px the section links
   step out, as D already does below 761px (every one is in the footer). */
.nav .logo img{object-fit:contain;object-position:left center}
@media(min-width:761px){
  .navlinks a{white-space:nowrap}
  .nav .logo,.nav .logo img{flex-shrink:0}
}
@media(min-width:1160px) and (max-width:1239px){.navlinks{gap:1.2rem}}
@media(min-width:761px) and (max-width:1159px){.navlinks a:not(.navcta):not(.navtalk){display:none}}

/* skip link: first focus stop on every interior page, hidden until focused */
.skip{position:fixed;left:1rem;top:.6rem;z-index:60;transform:translateY(-220%);
  background:var(--lime);color:var(--ink);padding:.75rem 1.05rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  transition:transform .16s var(--e-out)}
.skip:focus,.skip:focus-visible{transform:none;outline:2px solid var(--ink);outline-offset:2px}

/* nav: the transitional Acro link sits brighter than the section links, and
   the current page carries a lime rule under it */
.navlinks .navtalk{color:#F4F4F0}
.navlinks a.active,.navlinks a[aria-current="page"]{color:#F4F4F0;position:relative}
.navlinks a.active::after,.navlinks a[aria-current="page"]::after{content:"";position:absolute;left:0;right:.16em;bottom:-.6rem;height:1px;background:var(--lime)}
.navlinks a.active:hover,.navlinks a[aria-current="page"]:hover{color:var(--lime)}

/* focus on light grounds: lime alone vanishes on cream and on the lime band,
   so the ring keeps its lime and gains an ink keyline */
.paper :focus-visible,.who--lime :focus-visible{outline:2px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 3px var(--lime)}

/* ---- section grounds ------------------------------------------------------ */
.dark{background:var(--ink)}
.dark-2{background:var(--ink-2)}
.dark-3{background:var(--ink-3)}
/* D's kicker is written for cream (ink). Every interior ground but cream and
   the lime band is dark, so the kit flips the default to bone and keeps ink
   on the two light grounds. */
.kicker{color:#F4F4F0}
.paper .kicker,.who--lime .kicker{color:var(--ink)}
/* lime words on the light grounds: lime on cream is about 1.2:1 */
.paper .limeword{color:var(--moss-ink)}
.who--lime .limeword{color:var(--ink)}
/* buttons on cream. D's hover turns the lime button into lime type on a
   clear ground, about 1.2:1 on cream, so on cream the hover goes to ink. The
   ghost: D writes it inline on the homepage. */
.paper .btn:not(.ghost):not(.on-paper):hover{color:var(--ink);border-color:var(--ink)}
.paper .btn.ghost{color:var(--ink);border-color:var(--line-paper)}
.paper .btn.ghost:hover{color:var(--ink);border-color:var(--ink)}
/* buttons on the lime band: the lime button would vanish into it */
.who--lime .btn:not(.ghost){background:var(--ink);color:var(--lime);border-color:var(--ink)}
.who--lime .btn:not(.ghost):hover{background:transparent;color:var(--ink)}
.who--lime .btn.ghost{color:var(--ink);border-color:rgba(24,23,28,.4)}
.who--lime .btn.ghost:hover{color:var(--ink);border-color:var(--ink)}
/* the stripes are line work: moss on cream, as D pitches every lime rule */
.paper .stripes span{background:var(--moss-deep)}

/* ---- generic rows D only defines under a homepage scope -------------------- */
.cta-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:2rem}
/* D's .final .scar exactly: mono, sentence case */
.scar{margin-top:2rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--lime)}
.paper .scar{color:var(--moss-ink)}
.k{display:block;font-family:var(--font-mono);font-size:.64rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.paper .k{color:var(--moss-ink)}
/* the lime band: a lime key would vanish into it (and the telemetry's ash-dim
   reads 2.6:1 there), so both go to ink; soft ink is ink at 74%, 6.9:1 on lime */
.who--lime{--band-soft:rgba(24,23,28,.74);--hl:#aebd43}
.who--lime .k{color:var(--ink)}
.who--lime .telem{color:var(--band-soft)}
/* visually hidden, still read aloud (a counter's final figure, a link's context) */
.ri-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ============ PAGE HERO (.phero) ============ */
/* The interior open: D's hero without the craft column by default. Dark
   ground, the lime rule under it, a kanji receding, big slab against the mono
   eyebrow. Mark it data-sc-act="flow" so the kanji parallax and the stripes
   read their progress. A media column is D's own .hero-grid + .craft. */
.phero{position:relative;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--line-lime);
  padding-block:clamp(3.6rem,9vw,7rem) clamp(3.2rem,7vw,5.6rem)}
.phero .wrap{position:relative;z-index:2}
.phero .kanji{font-size:min(40vw,500px);right:-4vw;top:-6%}
.phero h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.87;letter-spacing:-.02em;
  text-wrap:balance;font-size:clamp(2.7rem,7.6vw,6.4rem);max-width:15ch;margin-left:-.03em}
.phero .sub{max-width:56ch;margin-top:1.6rem;color:var(--ash);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5}
.phero .cta-row{margin-top:2.1rem}
.phero .stripes{margin-top:2.4rem;max-width:420px}
.phero .stripes span{transform:scaleX(calc(.35 + var(--sc-p,0) * 1.3))}
.phero .stripes span:nth-child(2){transform:scaleX(calc(.6 + var(--sc-p,0) * .8))}
.phero .stripes span:nth-child(3){transform:scaleX(calc(.2 + var(--sc-p,0) * 1.6))}
.phero .hero-grid{z-index:2}
/* beside a picture (D's .hero-grid) the h1 has about 640px at 1440, not the
   full measure: sized so a long word ("LEADERSHIP,", 7.1em in Kallisto 900)
   fits its column. One column from 900px down, where the full size is back. */
@media(min-width:901px){.phero .hero-grid h1{font-size:clamp(2.5rem,6vw,5.5rem);max-width:13ch}}
/* a quieter open, for utility pages (legal) */
.phero--compact{padding-block:clamp(2.8rem,6vw,4.6rem) clamp(2.6rem,5vw,4rem)}
.phero--compact h1{font-size:clamp(2.3rem,6vw,4.4rem)}
.phero--compact .kanji{font-size:min(34vw,400px);top:-12%}

/* the hero's proof line: small type under a hairline */
.substat{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid var(--line-dim);color:var(--ash);
  font-size:.92rem;line-height:1.6;max-width:52ch}
.substat b{color:#F4F4F0;font-weight:500}
.paper .substat{border-top-color:var(--line-paper);color:var(--ash-paper)}
.paper .substat b{color:var(--ink)}

/* ============ RUNNING PROSE ============ */
.prose{max-width:66ch}
.prose p{font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.65;color:var(--ash)}
.prose p+p{margin-top:1.05rem}
.prose p.lede{font-size:clamp(1.14rem,1.8vw,1.4rem);line-height:1.45;color:#F4F4F0;max-width:none}
.prose b,.prose strong{color:#F4F4F0;font-weight:500}
.prose h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.1rem,1.8vw,1.35rem);
  line-height:1.05;color:#F4F4F0;margin:2.2rem 0 .8rem;text-wrap:balance}
.prose ul{list-style:none;margin-top:1.1rem;display:flex;flex-direction:column;gap:.7rem}
.prose li{position:relative;padding-left:1.4rem;font-size:clamp(.98rem,1.3vw,1.08rem);line-height:1.55;color:var(--ash)}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--lime)}
.prose a{color:var(--lime);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.paper .prose p,.paper .prose li{color:#33332c}
.paper .prose p.lede,.paper .prose h3{color:var(--ink)}
/* General Sans ships one weight here; on cream, colour alone barely separates
   bold from body, so the browser is allowed to embolden these few words */
.paper .prose b,.paper .prose strong{color:var(--ink);font-weight:700;font-synthesis-weight:auto}
.paper .prose li::before{background:var(--moss-deep)}
.paper .prose a{color:var(--moss-ink)}
/* a mono key used as a heading inside prose (h3.k): .prose h3 would set it in
   the display face, so the key's own type is restated at a higher weight */
.prose .k{margin:1.6rem 0 .6rem;font-family:var(--font-mono);font-weight:400;font-size:.64rem;line-height:1.5;
  letter-spacing:.2em;text-transform:uppercase;color:var(--lime);text-wrap:wrap}
.prose .k:first-child{margin-top:0}
.paper .prose .k{color:var(--moss-ink)}
.who--lime .prose .k{color:var(--ink)}

/* ============ SPLIT: prose + aside column ============ */
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(1.6rem,4.5vw,4rem);align-items:start;margin-top:1.6rem}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
/* the aside: a 1px rule with a lime cap, a telemetry key, one short paragraph */
.aside{position:relative;border-left:1px solid var(--line-lime);padding:.1rem 0 .1rem 1.25rem}
.aside::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:1.5rem;background:var(--lime)}
.aside+.aside{margin-top:1.8rem}
.aside .k{margin-bottom:.55rem}
.aside p{font-size:.95rem;line-height:1.55;color:var(--ash)}
.paper .aside{border-left-color:var(--line-paper)}
.paper .aside::before{background:var(--moss-deep)}
.paper .aside p{color:var(--ash-paper)}
/* on the lime band: ink rule and cap, soft ink text (6.9:1) */
.who--lime .aside{border-left-color:var(--hl)}
.who--lime .aside::before{background:var(--ink)}
.who--lime .aside p{color:var(--band-soft)}
/* side by side in a grid, asides share a top line */
.blk-grid>.aside+.aside{margin-top:0}

/* ============ GRIDS ============ */
.blk-grid{display:grid;gap:clamp(1.2rem,3vw,2.4rem);margin-top:1.6rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){.g2,.g3{grid-template-columns:minmax(0,1fr)}}

/* ============ LENSES: the three up hairline grid ============ */
/* Drawn with outlines rather than D's gap-over-a-grey-ground trick: the
   outlines of neighbouring cells overlap in the 1px gap and read as one line
   (--hl is opaque, so the overlap is no brighter than the frame), the ground
   shows through, and a short last row leaves an empty cell empty instead of
   a filled grey block. */
.lenses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:1.8rem}
.lens{position:relative;outline:1px solid var(--hl);padding:clamp(1.4rem,2.8vw,2.2rem)}
.lens::before{content:"";position:absolute;top:8px;left:8px;width:9px;height:9px;border-top:1px solid var(--lime);border-left:1px solid var(--lime);pointer-events:none}
.lens .k{margin-top:.35rem}
.lens h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.15rem,1.6vw,1.35rem);
  line-height:1.04;margin:.8rem 0 .6rem;color:#F4F4F0;text-wrap:balance}
.lens p{font-size:.95rem;line-height:1.55;color:var(--ash)}
.lens p+p{margin-top:.8rem}
.lens a{color:var(--lime);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.paper .lens::before{border-color:var(--moss-deep)}
.paper .lens h3{color:var(--ink)}
.paper .lens p{color:var(--ash-paper)}
.paper .lens a{color:var(--moss-ink)}
/* inside D's tiles field the field's own frame is the outer line */
.field .lenses{margin-top:0}
@media(max-width:900px){.lenses{grid-template-columns:minmax(0,1fr)}}

/* ============ STAT STRIP ============ */
/* D's proof strip, generalised: big lime numerals, mono labels, hairlines.
   Numbers count with the engine's data-sc-count (see INNER-KIT.md for where
   they tick and where they scrub). */
.stat-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:1.6rem}
.stat{position:relative;outline:1px solid var(--hl);padding:clamp(1.5rem,3vw,2.6rem) clamp(1.2rem,2.2vw,1.9rem)}
.stat::before{content:"";position:absolute;left:0;top:0;width:26px;height:1px;background:var(--lime)}
.stat .n{font-family:var(--font-display);font-weight:900;font-size:clamp(2.8rem,6.4vw,4.8rem);line-height:.9;
  letter-spacing:-.01em;color:var(--lime);font-variant-numeric:tabular-nums}
.stat .n small{font-size:.4em;letter-spacing:.02em;margin-left:.12em}
.stat .l{margin-top:.8rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.55;color:var(--ash);max-width:34ch}
.paper .stat::before{background:var(--moss-deep)}
.paper .stat .n{color:var(--moss-deep)}
.paper .stat .l{color:var(--ash-paper)}
@media(max-width:720px){.stat-strip{grid-template-columns:minmax(0,1fr)}}

/* ============ STEPS ============ */
/* A top rule per step with a lime cap, the mono step code, a slab title.
   Pair with a data-fx="wire" svg above it (class wire wire--steps). */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.6vw,2.2rem);margin-top:1.8rem}
.step{position:relative;padding-top:1.3rem;border-top:1px solid var(--line-lime)}
.step::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:1px;background:var(--lime)}
.step .sn{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.step h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.3rem,2vw,1.6rem);
  line-height:1;margin:.7rem 0 .6rem;color:#F4F4F0;text-wrap:balance}
.step p{font-size:.95rem;line-height:1.55;color:var(--ash)}
.paper .step{border-top-color:var(--line-paper)}
.paper .step::before{background:var(--moss-deep)}
.paper .step .sn{color:var(--moss-ink)}
.paper .step h3{color:var(--ink)}
.paper .step p{color:var(--ash-paper)}
@media(max-width:820px){.steps{grid-template-columns:minmax(0,1fr)}}

/* the wire: D's plan wire, generalised. Strokes in currentColor. */
.wire{display:block;width:100%;height:auto;margin-top:2.2rem;color:var(--lime);overflow:visible}
.wire *{stroke:currentColor;fill:none}
.wire .w-ref{stroke:var(--ash-dim)}
.paper .wire{color:var(--moss-deep)}
.paper .wire .w-ref{stroke:var(--ash-paper)}
.wire+.steps{margin-top:.6rem}
@media(max-width:820px){.wire--steps{display:none}.wire--steps+.steps{margin-top:1.8rem}}

/* ============ FAQ ============ */
.faq{margin-top:1.8rem;border-top:1px solid var(--line-dim);counter-reset:faq}
.faq-item{position:relative;border-bottom:1px solid var(--line-dim);counter-increment:faq;
  padding:clamp(1.2rem,2.4vw,1.7rem) 0 clamp(1.2rem,2.4vw,1.7rem) clamp(3rem,6vw,5rem)}
/* the index is furniture: the second content value hides it from assistive tech */
.faq-item::before{content:"Q" counter(faq,decimal-leading-zero);content:"Q" counter(faq,decimal-leading-zero) / "";
  position:absolute;left:0;top:calc(clamp(1.2rem,2.4vw,1.7rem) + .35em);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;color:var(--lime)}
.faq-item h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.08rem,1.7vw,1.35rem);line-height:1.2;
  letter-spacing:-.01em;color:#F4F4F0;margin-bottom:.6rem;text-wrap:balance}
.faq-item p{font-size:clamp(.96rem,1.25vw,1.05rem);line-height:1.62;color:var(--ash);max-width:70ch}
.faq-item p+p{margin-top:.8rem}
.faq-item a{color:var(--lime);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.paper .faq{border-top-color:var(--line-paper)}
.paper .faq-item{border-bottom-color:var(--line-paper)}
.paper .faq-item::before{color:var(--moss-ink)}
.paper .faq-item h3{color:var(--ink)}
.paper .faq-item p{color:#33332c}
.paper .faq-item a{color:var(--moss-ink)}
@media(max-width:640px){.faq-item{padding-left:0}.faq-item::before{position:static;display:block;margin-bottom:.55rem}}

/* ============ PULL QUOTE ============ */
/* A client's words, set exactly as D sets them (.quote): body face at D's
   quote size, the lime rule, a mono cite in sentence case. The site gives one
   client quote one treatment; the big display quote is D's .quote--big with
   the scan, for one line per page. Placed after .prose so a quote inside
   running prose keeps its own type. */
.pquote{position:relative;border-left:2px solid var(--lime);padding-left:1.2rem;margin-top:1.8rem;max-width:48ch}
.pquote p,.prose .pquote p{font-family:var(--font-body);font-weight:500;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.5;
  color:#F4F4F0;text-wrap:pretty;margin:0;max-width:none}
.pquote cite{display:block;margin-top:.9rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  color:var(--lime);font-style:normal}
.paper .pquote{border-left-color:var(--moss-deep)}
.paper .pquote p,.paper .prose .pquote p{color:var(--ink)}
.paper .pquote cite{color:var(--moss-ink)}

/* ============ CASE STUDIES (with D's .case grid) ============ */
.case-idx{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.case-tag{display:inline-block;margin:.2rem 0 0 .7rem;padding:.3rem .6rem;border:1px solid var(--line-dim);vertical-align:middle;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.case h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,3.8vw,3rem);
  line-height:.94;margin:.9rem 0 .8rem;color:#F4F4F0;text-wrap:balance}
.lead,.case .lead{font-size:clamp(1.02rem,1.45vw,1.18rem);line-height:1.55;color:#F4F4F0;max-width:56ch}
.outcome,.case .outcome{margin-top:1.3rem;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.1;color:var(--lime);max-width:none}
/* a case on cream: D's case rules and the kit's are written for a dark
   ground. :where(p) keeps the plain paragraph rule under .lead, .outcome and
   the quote; the plate (.case-visual) keeps its own dark screen. */
.paper .case{border-color:var(--line-paper)}
.paper .case :where(p){color:var(--ash-paper)}
.paper .case-visual :where(p){color:var(--ash)}
.paper .case h2,.paper .lead{color:var(--ink)}
.paper .case-idx,.paper .case .who,.paper .outcome{color:var(--moss-ink)}
.paper .case-tag{border-color:var(--line-paper);color:var(--ash-paper)}
.paper .case .stats div{color:var(--ash-paper)}
.paper .case .stats b{color:var(--moss-deep)}
/* the case plate: a D screen (lime frame, scanlines) holding a numeral */
.case-visual{position:relative;aspect-ratio:4/3;border:1px solid var(--line-lime);background:#0b0b0f;overflow:hidden;
  display:flex;align-items:flex-end;padding:clamp(1.2rem,2.5vw,1.8rem)}
.case-visual::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 3px)}
.case-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.case-visual:has(>img)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(11,11,15,.92) 0%,rgba(11,11,15,.55) 34%,transparent 62%)}
.case-visual .bignum{position:relative;z-index:2;font-size:clamp(3rem,8vw,5.8rem);line-height:.82}
.case-visual .bignum small{display:block;margin-top:.8rem;font-family:var(--font-mono);font-weight:400;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:#F4F4F0;line-height:1.5}
.case-visual .telem,.case-visual .mono{z-index:2}
.case-visual .tick{z-index:2}
.cv-k{position:absolute;top:-6%;right:-3%;z-index:0;font-family:var(--font-display);font-weight:900;font-size:min(34vw,300px);
  line-height:.7;color:#fff;opacity:.06;pointer-events:none;user-select:none}

/* ============ BOOKING ============ */
.book-widget{position:relative;max-width:680px;margin:2rem auto 0;border:1px solid var(--line-lime);background:#0b0b0f;
  padding:clamp(.6rem,1.6vw,1rem)}
/* the Cadence frame fills its box; the voice widget keeps its own 470px
   (a Cadence rule would stretch it), and neither outgrows the frame */
.book-widget iframe{display:block;max-width:100%;border:0}
.book-widget iframe[id^="cadence-"]{width:100%}
/* focus lands inside the iframe's own document, so the frame shows it
   (inner.js sets .is-focus: :focus-within does not cross into a frame) */
.book-widget:focus-within,.book-widget.is-focus{outline:2px solid var(--lime);outline-offset:3px}
/* registration marks just outside two corners */
.book-widget::before,.book-widget::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--lime);pointer-events:none}
.book-widget::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
.book-widget::after{bottom:-7px;right:-7px;border-left:0;border-top:0}
.book-note{margin-top:1.1rem;text-align:center;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash)}
.paper .book-note{color:var(--ash-paper)}

/* the other route in: a framed band, one line and one button */
.alt-band{position:relative;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  margin-top:2rem;padding:clamp(1.4rem,3vw,2.2rem);border:1px solid var(--line-dim);background:var(--ink-2)}
.alt-band::before{content:"";position:absolute;top:6px;left:6px;width:10px;height:10px;border-top:1px solid var(--lime);border-left:1px solid var(--lime);pointer-events:none}
.alt-band h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.25rem,2.4vw,1.7rem);
  line-height:1;color:#F4F4F0;margin-bottom:.5rem}
.alt-band p{color:var(--ash);font-size:.95rem;max-width:48ch}
.paper .alt-band{border-color:var(--line-paper);background:rgba(24,23,28,.03)}
.paper .alt-band::before{border-color:var(--moss-deep)}
.paper .alt-band h3{color:var(--ink)}
.paper .alt-band p{color:var(--ash-paper)}

/* ============ CLOSING BAND (.cta-band) ============ */
/* The interior close, in the shape of D's .final: centred, the biggest type
   on the page after the h1, the roster line in mono lime. Add D's .rmark and
   .stripes for the full homepage furniture. */
.cta-band{position:relative;overflow:hidden;text-align:center;border-top:1px solid var(--line-lime)}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.87;letter-spacing:-.02em;
  font-size:clamp(2.4rem,7.6vw,6.2rem);max-width:16ch;margin:0 auto 1.6rem;text-wrap:balance}
/* The close's lines: #9C9CA5, one step over ash, because the r-mark turns
   behind them (from about 600 to 1100px wide ash drops to 4.3:1 over it; this
   holds 5.3:1). Note .cta-band p is (0,1,1): a page's single class on a
   paragraph here loses its margin and colour to it, so write it .cta-band .x. */
.cta-band p{max-width:50ch;margin:0 auto 1.4rem;color:#9C9CA5}
.cta-band p b{color:#F4F4F0;font-weight:500}
/* the decision line, set as the homepage's close sets it (the button row
   under it keeps the homepage's gap with its own top margin) */
.cta-band .decide{max-width:52ch;margin:0 auto;font-size:1.05rem;font-weight:700;font-synthesis-weight:auto;color:#F4F4F0;text-wrap:balance}
.cta-band .decide b{font-weight:inherit;color:inherit}
.cta-band .cta-row{justify-content:center;margin-top:1.8rem}
/* .cta-band p would otherwise outrank the generic .scar. The canonical roster
   sentence is long for mono (113 characters at .16em tracking): a rem measure
   (ch would count untracked characters) holds it in two even lines on a wide
   screen and three or four even lines on a phone. */
.cta-band .scar{max-width:min(100%,34rem);margin:2.2rem auto 0;line-height:1.7;color:var(--lime);text-wrap:balance}
/* a words line in the centred close grows from its own centre */
.cta-band [data-fx="words"]{transform-origin:50% 60%}
.cta-band .stripes{max-width:280px;margin:0 auto 2.4rem}
.cta-band .rmark{right:-8%;top:6%;width:min(52vw,560px);opacity:.08}
.cta-band .rmark img{transform:rotate(calc(var(--sc-p,0) * 16deg));will-change:transform}
/* a close on cream */
.cta-band.paper p{color:var(--ash-paper)}
.cta-band.paper p b,.cta-band.paper .decide{color:var(--ink)}
.cta-band.paper .scar{color:var(--moss-ink)}
.cta-band.paper{border-top-color:var(--line-paper)}

/* ============ LEGAL ============ */
/* .legal is the section a legal document sits in: cream, a sticky telemetry
   rail beside the text on wide screens. overflow-x:clip (never hidden) so
   the rail can still stick. */
.legal{position:relative;overflow-x:clip}
.legal>.wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,6vw,6rem);align-items:start}
.legal__rail{position:sticky;top:calc(var(--nav-h,62px) + 2.4rem);display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  padding-top:.3rem;color:var(--ash-paper);user-select:none}
.legal__rail::before{content:"";width:1px;height:clamp(3rem,10vh,6rem);background:var(--line-paper)}
.legal__kj{font-family:var(--font-display);font-weight:900;font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1;
  writing-mode:vertical-rl;color:var(--ink);opacity:.16}
.legal__code{writing-mode:vertical-rl;color:var(--ash-paper)}
.legal__rail::after{content:"";width:7px;height:7px;background:var(--moss-deep)}
@media(max-width:900px){.legal>.wrap{grid-template-columns:minmax(0,1fr)}.legal__rail{display:none}}

.legal-doc{max-width:74ch;counter-reset:lsec}
.legal-doc h2{position:relative;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.08;color:var(--ink);margin:2.8rem 0 .9rem;padding-top:1.6rem;
  counter-increment:lsec;text-wrap:balance}
/* the section rule: a moss cap on a hairline. With .rv it draws across as
   the heading arrives. */
.legal-doc h2::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--moss-deep) 0 38px,var(--line-paper) 38px)}
.legal-doc h2.rv::before{transform:scaleX(0);transition:transform .9s var(--e-out) .12s}
.legal-doc h2.rv.in::before{transform:none}
.legal-doc h2::after{content:"\00A7 " counter(lsec,decimal-leading-zero);content:"\00A7 " counter(lsec,decimal-leading-zero) / "";
  position:absolute;right:0;top:.5rem;font-family:var(--font-mono);font-size:.6rem;font-weight:400;letter-spacing:.2em;color:var(--ash-paper)}
.legal-doc p{font-size:1rem;line-height:1.68;color:#33332c}
.legal-doc p+p{margin-top:.9rem}
.legal-doc ul{list-style:none;margin-top:.9rem;display:flex;flex-direction:column;gap:.6rem}
.legal-doc li{position:relative;padding-left:1.3rem;font-size:1rem;line-height:1.58;color:#33332c}
.legal-doc li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--moss-deep)}
.legal-doc b,.legal-doc strong{color:var(--ink);font-weight:700;font-synthesis-weight:auto}
.legal-doc a{color:var(--moss-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal-doc a:hover{color:var(--ink)}
/* the contact box: a frame with two moss registration marks */
.contact{position:relative;margin-top:2.8rem;padding:clamp(1.3rem,2.8vw,2rem);border:1px solid var(--line-paper)}
.contact::before,.contact::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--moss-deep);pointer-events:none}
.contact::before{top:-6px;left:-6px;border-right:0;border-bottom:0}
.contact::after{bottom:-6px;right:-6px;border-left:0;border-top:0}
.legal-doc .contact h2{margin-top:0;padding-top:0;counter-increment:none}
.legal-doc .contact h2::before,.legal-doc .contact h2::after{display:none}
.updated,.legal-doc .updated{margin-top:1rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.6;color:var(--ash)}
.paper .updated,.paper .legal-doc .updated{color:var(--ash-paper)}
/* the old footer's bottom row, kept so a page that still carries it renders
   in D's type; the canonical footer (INNER-KIT.md) has no such row */
.foot .legal{flex-basis:100%;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding-top:1.4rem;border-top:1px solid var(--line-dim);color:var(--ash-dim)}

/* ============ FORMS (.ri-form) ============ */
/* A form in D's language: mono labels over 1px boxes, lime focus, and a
   lime "!" tile (the logo's own, skewed as the favicon's) on each error.
   - Lines: #74747D, 3.6:1 on ink-2 and 4.1:1 on the ink-3 fill (WCAG 1.4.11
     asks 3:1 for the edge of a control; D's 10% hairline is 1.4:1). On cream
     #7A7A70, 4.2:1.
   - Labels sit above their boxes; no placeholders. Mark the optional field
     (.ri-opt) and leave the required ones plain: the required attribute
     tells assistive tech, and a field without .ri-opt reads as required.
   - Errors: each .ri-err sits under its control, tied to it with
     aria-describedby, and stays empty (and out of the layout) until the form
     is tried. An invalid control carries aria-invalid="true", drawn as a
     dashed lime box, so it never reads as the solid lime of focus.
   - The result goes in .ri-status, a polite live region (role="status"),
     rendered from load (a region added later may never be announced) and
     empty until there is something to say.
   - .ri-hp holds a honeypot: off screen, out of the tab order, hidden from
     assistive tech.
   - The submit is D's .btn in outline (.ri-submit), filling on hover, so the
     booking button stays the brightest button on the page (brief section 3).
   - Text is 16px in the boxes, so a phone never zooms in on focus.
   On cream (.paper) lime drops to moss and the fill to white. */
.ri-form{--ri-line:#74747D;--ri-fill:var(--ink-3);--ri-text:#F4F4F0;--ri-soft:#9C9CA5;--ri-mark:var(--lime);
  position:relative;color-scheme:dark}
.ri-form:focus{outline:none}
.ri-form:focus-visible{outline:2px solid var(--lime);outline-offset:8px}
.ri-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.35rem clamp(1rem,2.4vw,1.6rem)}
.ri-field{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.ri-field--full{grid-column:1/-1}
.ri-label{font-family:var(--font-mono);font-size:.68rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  line-height:1.5;color:var(--ri-text)}
.ri-opt{margin-left:.7em;color:var(--ri-soft);letter-spacing:.14em}
.ri-input{display:block;width:100%;min-height:48px;margin:0;padding:.72rem .9rem;border:1px solid var(--ri-line);border-radius:0;
  background:var(--ri-fill);color:var(--ri-text);font:500 1rem/1.45 var(--font-body);caret-color:var(--ri-mark);
  box-shadow:none;transition:border-color .16s var(--e-io)}
textarea.ri-input{min-height:6.4rem;resize:vertical}
.ri-input:hover{border-color:var(--ri-soft)}
.ri-input:focus{border-color:var(--ri-mark)}
.ri-input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.ri-input[aria-invalid="true"],.ri-check input[aria-invalid="true"]{border-style:dashed;border-color:var(--ri-mark)}
/* the browser's autofill colours would paint a pale box on ink */
.ri-input:-webkit-autofill,.ri-input:-webkit-autofill:hover,.ri-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ri-text);box-shadow:0 0 0 100px var(--ri-fill) inset;transition:background-color 600000s 0s}
/* the select: the native control with its arrow redrawn as a thin line
   chevron; the empty first option reads in the softer grey */
.ri-select{position:relative;display:block}
.ri-select select{-webkit-appearance:none;appearance:none;padding-right:2.8rem;cursor:pointer}
.ri-select select:invalid{color:var(--ri-soft)}
.ri-select option{color:var(--ri-text);background:var(--ri-fill)}
.ri-select::after{content:"";position:absolute;right:1.1rem;top:50%;width:8px;height:8px;margin-top:-6px;pointer-events:none;
  border-right:1px solid var(--ri-mark);border-bottom:1px solid var(--ri-mark);transform:rotate(45deg)}
/* the checkbox: a 24px box, lime with an ink tick once checked; the label
   beside it is part of the target */
.ri-check{display:flex;align-items:flex-start;gap:.9rem}
.ri-check input{-webkit-appearance:none;appearance:none;flex:none;width:24px;height:24px;margin:0;border:1px solid var(--ri-line);
  border-radius:0;background:var(--ri-fill) 50% 50%/14px 14px no-repeat;cursor:pointer;
  transition:background-color .16s var(--e-io),border-color .16s var(--e-io)}
.ri-check input:hover{border-color:var(--ri-soft)}
.ri-check input:checked{border-style:solid;border-color:var(--ri-mark);background-color:var(--ri-mark);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.4l3.3 3.2L12 3.6' fill='none' stroke='%2318171C' stroke-width='2'/%3E%3C/svg%3E")}
.ri-check input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.ri-check label{padding-top:.05rem;font-size:.95rem;line-height:1.5;color:var(--ri-soft);cursor:pointer;text-wrap:pretty}
.ri-check a,.ri-status a{color:var(--ri-mark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ri-check a:hover,.ri-status a:hover{color:var(--ri-text)}
/* an error: the lime "!" tile, then the words in bone */
.ri-err{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;line-height:1.45;color:var(--ri-text);overflow-wrap:anywhere}
.ri-err:empty{display:none}
.ri-err::before{content:"!";content:"!" / "";flex:none;display:grid;place-items:center;width:1.05rem;height:1.15rem;margin-top:.1rem;
  background:var(--ri-mark);color:var(--ink);font:900 .74rem/1 var(--font-display);transform:skewX(-6deg)}
.ri-check+.ri-err{padding-left:calc(24px + .9rem)}
/* the honeypot */
.ri-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.ri-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:1.9rem}
.btn.ri-submit{background:transparent;color:var(--ri-mark);border-color:var(--ri-mark)}
.btn.ri-submit:hover{background:var(--ri-mark);color:var(--ink)}
.btn.ri-submit[aria-disabled="true"]{cursor:progress}
/* the result: a key, a line or two, and the way to write in if the email
   app stayed shut; empty (no height) until it has something to say. The
   lines can carry the visitor's own email address, which on a phone is often
   wider than the panel: it breaks after the @ (the script leaves a break
   there), anywhere else only as a last resort, and never runs through the
   frame. */
.ri-status{margin-top:0}
.ri-status:not(:empty){margin-top:1.6rem;padding:1rem 0 .2rem 1.2rem;border-left:1px solid var(--line-lime);position:relative}
.ri-status:not(:empty)::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:1.5rem;background:var(--ri-mark)}
.ri-status .k{margin-bottom:.55rem}
.ri-status p{max-width:62ch;font-size:.98rem;line-height:1.55;color:var(--ri-text);overflow-wrap:anywhere}
.ri-status p+p{margin-top:.6rem}
/* on cream */
.paper .ri-form{--ri-line:#7A7A70;--ri-fill:#fff;--ri-text:var(--ink);--ri-soft:var(--ash-paper);--ri-mark:var(--moss-ink);color-scheme:light}
.paper .ri-input:hover,.paper .ri-check input:hover{border-color:var(--ink)}
.paper .ri-check label{color:#33332c}
.paper .ri-err::before{color:var(--paper)}
.paper .ri-check input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.4l3.3 3.2L12 3.6' fill='none' stroke='%23FCFEED' stroke-width='2'/%3E%3C/svg%3E")}
.paper .ri-status:not(:empty){border-left-color:var(--line-paper)}
.paper .ri-form .btn.ri-submit:hover{background:var(--ri-mark);color:var(--paper);border-color:var(--ri-mark)}
@media(max-width:640px){
  .ri-form__grid{grid-template-columns:minmax(0,1fr)}
  .ri-form__foot .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .ri-input,.ri-check input{transition:none}
}
/* Windows high contrast: the system draws the box, the tick and the arrow */
@media(forced-colors:active){
  .ri-check input,.ri-select select{-webkit-appearance:auto;appearance:auto}
  .ri-select::after{display:none}
  .ri-input[aria-invalid="true"]{border-style:dashed}
}

/* ============ DEVICE HOOKS ([data-fx], zero specificity but one) ============ */
/* scan: the host carries the type, its inner line inherits all of it
   (D's .q__scan and .q__words). The module paints with the host's font. */
:where([data-fx="scan"]){position:relative}
:where([data-fx="scan"])>*{font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;margin:0}
:where([data-fx="scan"])>span{display:block}
/* words: each word an inline block the device can scale; the line lights
   (colour comes on) when there is no stage to light instead. The lit colour
   is a state and must beat whatever colour class the line carries (.lede,
   .kicker, .prose p.lede on cream), hence the doubled class: (0,3,0) on the
   inks, (0,4,0) on cream. Moss-ink on cream, so a small lit line is AA too. */
:where([data-fx="words"]){transform-origin:0 60%;will-change:transform}
:where([data-fx="words"]) .w{display:inline-block;transform-origin:50% 62%;will-change:transform,opacity}
:where([data-fx="words"]){transition:color .34s var(--e-io)}
[data-fx="words"].is-lit.is-lit{color:var(--lime)}
.paper [data-fx="words"].is-lit.is-lit{color:var(--moss-ink)}
.who--lime [data-fx="words"].is-lit.is-lit{color:var(--ink)}
/* doors: the rail item holding keyboard focus faces the reader at full
   strength (inner.js parks the rail with it centred) */
.rail>:focus-within{opacity:1!important;transform:none!important}
/* boot on any framed image */
:where([data-fx="boot"]){position:relative;overflow:hidden}

/* ============ STAGES: PINNED, FLOWED, RELEASED ============ */
/* inner.js decides at load whether each pinned act stays pinned (wide) or
   becomes a flow section (900px and below, or reduced motion; the act gets
   .ri-flowed, the page html.ri-flow). After that it keeps checking that a
   pinned stage's content fits the stage (at load, when fonts land, on resize,
   zoom or a reader's own text spacing) and releases an act whose content
   has outgrown it (.ri-unpinned), re-pinning it once it fits again. The CSS
   follows those decisions, not the live width:
   - Loaded wide, then narrowed (a tablet turned to portrait): the acts are
     still pinned and span several viewports, but D unsticks .stage below
     900px, which would leave screens of empty ink after each stage. A stage
     the engine pinned (.sc-stage) stays sticky at every width. A pan act's
     stage too, whatever its class (D only names .doors-stage).
   - Flowed, then widened (or flowed by reduced motion on a wide screen): the
     stage is back to D's desktop height, one viewport, and would clip
     anything taller. It keeps at least that height (the desktop composition),
     grows with its content, and gets section padding so nothing sits flush
     on the section's edges. Zero specificity for the flow test, so a page's
     own padding for its flowed stage still wins.
   - Released: the act's pinned height and the sticky stage let go, the stage
     grows with its content, and every cue in it shows at full strength (the
     engine now reads the act as a flow section, where a pinned cue window
     means nothing).
   - A pinned stage centres its content only while it fits: content taller
     than the stage starts under the bar instead of overflowing up behind it
     (for the moment before the release catches it). */
.sc-stage.stage{justify-content:safe center}
@media(max-width:900px){
  .sc-stage.stage,[data-sc-act="pan"] .sc-stage{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));min-height:0;
    display:flex;flex-direction:column;justify-content:safe center;padding-block:0}
}
@media(min-width:901px){
  :where(html.ri-flow,.ri-flowed) .stage:not(.sc-stage){position:relative;top:auto;height:auto;min-height:calc(100svh - var(--nav-h));
    padding-block:clamp(3rem,6vw,5rem)}
}
[data-sc-act].ri-unpinned{height:auto!important}
.ri-unpinned .sc-stage.stage{position:relative;top:auto;height:auto;min-height:calc(100svh - var(--nav-h));
  padding-block:clamp(3rem,6vw,5rem)}
.ri-unpinned [data-sc-cue],.ri-unpinned .sc-split__i{opacity:1!important;transform:none!important}
.ri-unpinned [data-sc-cue]{pointer-events:auto!important}

/* ============ PHONES ============ */
@media(max-width:640px){
  .phero h1{font-size:clamp(2.3rem,11vw,3.6rem);overflow-wrap:break-word}
  .phero--compact h1{font-size:clamp(2.1rem,10vw,3rem)}
  .phero .kanji{font-size:92vw;right:-24%;top:4%;opacity:.05}
  /* a hairline or a bottom mark crosses the text at this width, in any section */
  main .reg[style*="bottom"],main .hair{display:none}
  .phero .cta-row,.cta-band .cta-row{flex-direction:column;align-items:stretch}
  .phero .cta-row .btn,.cta-band .cta-row .btn{justify-content:center}
  .cta-band h2{font-size:clamp(2.2rem,11vw,3.6rem)}
  .case-tag{margin-left:0;margin-top:.6rem;display:table}
  .alt-band .btn{width:100%;justify-content:center}
}

/* ============ REDUCED MOTION: every device at its finished state ============ */
@media(prefers-reduced-motion:reduce){
  /* A pan act's rail stops moving, so scrollcraft.css hands it back as a
     native horizontal scroller. D's .stage{overflow:clip} has the same
     weight and loads later, which would clip everything past the first
     screen with no way to reach it; the kit restores the scroller. */
  [data-sc-act="pan"] .sc-stage.stage{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
  .skip{transition:none}
  /* the engine's entry reveal still waits for its observer line and fades
     (220ms) under reduced motion; the kit shows it, as it shows .rv */
  [data-sc-in],[data-sc-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}
  .phero .stripes span,.cta-band .rmark img{transform:none!important}
  .legal-doc h2.rv::before{transform:none!important;transition:none}
  [data-fx="words"],[data-fx="words"] .w{transform:none!important;opacity:1!important}
  [data-fx="tiles"] canvas,[data-fx="tiles"]::after,[data-fx="tiles"] .field__lbl{display:none}
}