/* Generated by tools/build-route.mjs from scrollcraft.css + the inline
   <style> in index.html. Do not hand-edit: edit those and rebuild. */
/* ============================================================================
   scrollcraft.css: the taste floor
   ----------------------------------------------------------------------------
   Two layers, and the split matters:

     TOKENS   what you override per brand. Colour roles, the type ramp, the
              spacing scale, elevation, motion. A brand is ~12 values.
     DEVICES  what the engine drives. Do not restyle these to taste; they are
              the mechanism. Style your own markup instead.

   Nothing here draws a "component". There are no card, badge, or pill classes,
   because a stylesheet that ships those is how every page built on it ends up
   with the same shapes. You get a floor and a vocabulary; the composition is
   yours.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* --- colour roles. Override these six and the page is rebranded. -------- */
  --sc-canvas:      #08090b;   /* the page ground. Drift interpolates this.   */
  --sc-surface:     #101217;   /* anything raised off the ground             */
  --sc-ink:         #f4f2ef;   /* primary text                               */
  --sc-ink-soft:    #9a9ba1;   /* secondary text. Tinted, never flat gray.   */
  --sc-accent:      #d8ff3e;   /* ONE accent. It owns a region, not confetti. */
  --sc-accent-ink:  #08090b;   /* text that sits on the accent               */

  --sc-hairline:    color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);

  /* --- type. Two families max. Display carries voice, text carries prose. - */
  --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem
     with 0 tracking reads loose; this is optical correction, not decoration. */
  --sc-t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --sc-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --sc-t-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --sc-t-4xl:  clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);

  --sc-track-tight:  -0.035em;
  --sc-track-snug:   -0.02em;
  --sc-track-normal: -0.005em;
  --sc-track-wide:    0.08em;

  --sc-leading-none: 0.94;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;

  --sc-measure: 62ch;

  /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */
  --sc-1: 0.25rem;  --sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;
  --sc-5: 1.5rem;   --sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;
  --sc-9: 6rem;     --sc-10: 8rem;    --sc-11: 12rem;

  /* Section rhythm is fluid so a phone doesn't inherit desktop air. */
  --sc-section: clamp(4.5rem, 9vw, 11rem);
  --sc-gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --sc-maxw:    82rem;

  /* --- radius. Pick one scale for the page and hold it. ------------------- */
  --sc-r-sm: 6px;  --sc-r-md: 12px;  --sc-r-lg: 20px;  --sc-r-pill: 999px;

  /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted
         to the canvas hue. A zero-offset coloured halo is decoration, not
         depth, so there isn't one here. ---------------------------------- */
  --sc-shadow-color: 220 40% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);

  /* Edge light: a 1px top highlight sells a raised surface better than any
     amount of blur, because real raised things catch light on their lip. */
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);

  /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */
  --sc-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sc-d-fast: 160ms;  --sc-d-base: 240ms;  --sc-d-slow: 420ms;

  --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------- the browser surfaces --
   The parts you did not draw still carry the design. Selection, caret, focus
   ring, scrollbar and tabular numerals all ship with defaults that belong to no
   design system. Theming them is the cheapest signal that a page was built
   rather than assembled, and it is the step that gets skipped most reliably. */
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}
:where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- typography -- */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0;
}
.sc-display--xl { font-size: var(--sc-t-4xl); }
.sc-display--lg { font-size: var(--sc-t-3xl); }
.sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); }
.sc-lede {
  font-size: var(--sc-t-lg);
  line-height: 1.44;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
}
.sc-body { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.sc-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* ---------------------------------------------------------------- layout -- */
.sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sc-section { padding-block: var(--sc-section); }
/* More space above a heading than below it: the gap belongs to the boundary,
   not to the pair. */
.sc-stack > * + * { margin-top: var(--sc-4); }
.sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); }
.sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; }
.sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; }

/* =============================================================== DEVICES ==
   Driven by the engine. Restyle your own markup, not these.                */

.sc-act--pinned { position: relative; }
.sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
}

/* scrub / sequence media */
.sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip video[data-sc-scrub] { opacity: 1; }
/* The poster is a live frame-holder, not a placeholder: it stays up until a
   real video frame has painted, which is what stops the blank-stage flash. */
.sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .sc-stage__poster { opacity: 0; }

/* A scrim only where text sits. A full-frame darkening layer flattens the
   image everywhere to fix contrast in one corner. */
.sc-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    var(--sc-scrim-angle, 180deg),
    color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 68%);
}
/* Point the scrim at the copy. A scrim gradient that darkens the top while the
   copy sits at the bottom fixes contrast nowhere and flattens the image
   everywhere, which is the most common way text-over-video goes wrong. */
.sc-scrim--bottom { --sc-scrim-angle: 0deg; }
.sc-scrim--left   { --sc-scrim-angle: 90deg; }
.sc-scrim--right  { --sc-scrim-angle: 270deg; }

/* Corner scrims, for copy anchored to a corner. An edge gradient has to darken
   a whole band across the frame to cover one corner; a corner gradient puts the
   density where the text is and leaves the rest of the image alone. Pair with
   .sc-copy--lead / .sc-copy--trail. */
.sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--trail {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
/* A band across the bottom, for copy that spans the full width of the frame.
   That is what both corner anchors become below 860px, and it is also the right
   shape whenever the copy block is wider than a corner. */
.sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 58%);
}
.sc-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%,
              color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%);
}

/* copy over a stage.
   max-width is in rem, never ch. A `ch` on this container resolves against the
   CONTAINER's font-size (body size), not the display size of the heading inside
   it, so `max-width: 20ch` here silently produces a ~180px column and wraps a
   hero headline to six lines. Set a ch measure on the text element itself. */
.sc-copy {
  position: absolute; z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  max-width: min(46rem, 76vw);
  will-change: opacity, transform;
}
.sc-copy--lead   { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); }
/* inset-inline FIRST. It is the shorthand for left+right, so declaring it after
   `left: 50%` resets left to auto and the block drifts off the left edge. */
.sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; }
.sc-copy--trail  { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; }

/* cue defaults: the engine writes opacity/transform inline, these are the
   pre-paint state so nothing flashes before the first read() */
[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }

/* kinetic split */
.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
/* Descenders live below the baseline; a line mask clipped to the line box eats
   the tails off g, y, p, j. The padding buys them room back. */
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

/* horizontal rail */
[data-sc-pan] { display: flex; will-change: transform; }

/* reveal + parallax */
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }

/* flow reveal (fires once) */
[data-sc-in], [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

/* pointer devices */
[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }
/* isolation always; position only if nothing more specific already set it.
   Written with :where() (zero specificity) on purpose: a plain `position:
   relative` here has the same weight as `.sc-stage` and, being later in the
   file, silently wins. A stage carrying both attributes then stops being
   sticky and the whole act scrolls away instead of pinning. */
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }
[data-sc-spotlight]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(
    28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
[data-sc-spotlight]:hover::after { opacity: 1; }

/* =========================================================== WORLDFLIGHT ==
   One fixed stage for the whole page. The only thing in document flow is the
   spacer, and it is empty. If you find yourself adding a section here, you want
   act mode instead: the moment a real block scrolls past the fixed stage, the
   page has a seam again and the whole point is gone.                        */

[data-sc-mode="worldflight"] { position: relative; }

.sc-world {
  position: fixed; inset: 0;
  overflow: clip;
  z-index: var(--sc-z-stage);
  background: var(--sc-canvas);
}

/* Every leg is mounted for the life of the page and stacked in the same box.
   The engine owns opacity, visibility and z-index here; do not set them. */
.sc-world__seg {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
}
.sc-world__seg > :is(video, img, canvas) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The poster is the frame-holder AND the first camera move: the engine pushes
   it in slowly until a real decoded frame is available to replace it. */
.sc-world__poster {
  z-index: 0;
  transform-origin: 50% 50%;
  transition: opacity 420ms var(--sc-ease-out);
}
.sc-world__seg > video { z-index: 1; }
.sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; }
/* The act stylesheet lights a clip through its ancestor act. A worldflight leg
   has no act, so match the class the engine also writes on the clip itself. */
video[data-sc-scrub].sc-has-clip { opacity: 1; }

/* The copy layer is fixed too, and inert by default: the engine hands
   pointer-events back to a block only while it is actually legible. */
.sc-world__copy {
  position: fixed; inset: 0;
  z-index: var(--sc-z-copy);
  pointer-events: none;
}
.sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-sc-copy] {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.sc-ready [data-sc-copy] { transition: none; }

/* The track. Empty on purpose. */
.sc-world__spacer { pointer-events: none; }

/* scroll progress */
[data-sc-progress] {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome);
  background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}

/* ----------------------------------------------------------- atmosphere --
   Depth is not only shadow. Grain keeps a flat dark ground from banding, and
   it is the difference between "a dark page" and "a lit room". */
.sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.sc-grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero. Opacity still carries the reveal so the page
     is comprehensible; every position change is dropped. */
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
  /* A wipe is a position change too. Show reveal content settled. */
  [data-sc-reveal] { clip-path: none !important; }
  /* A rail's transform IS its navigation, not decoration. Zeroing it the way
     parallax and kinetic type are zeroed parks the act on its first screenful
     and makes everything past the fold unreachable: a device degrading into
     missing content. Hand the travel back to the reader as an ordinary scroll
     region instead, so the same items are all still gettable without motion.
     A build that would rather re-lay the rail out as a grid can still do that;
     this is the floor, not the ceiling. */
  [data-sc-act="pan"] .sc-stage,
  [data-sc-act="pan"] [data-sc-stage] {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  [data-sc-pan] > * { scroll-snap-align: center; }
  [data-sc-spotlight]::after { display: none; }
  /* A worldflight keeps its whole story here. No clip is ever fetched, so the
     posters are the film, and they cross-dissolve through exactly the same
     seams at exactly the same scroll positions. The push-in and the copy drift
     are the only things that go. */
  .sc-world__poster, [data-sc-copy] { transform: none !important; }
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .sc-copy { inset-inline: var(--sc-gutter); max-width: none; }
  .sc-copy--trail { text-align: left; }
  .sc-stage { height: 100svh; }
  /* .sc-copy--trail re-anchors to the left and spans the full width here, so a
     bottom-RIGHT corner gradient darkens the one corner the copy just left and
     guarantees a contrast failure over any bright clip. Point the density at
     the copy: the same band .sc-scrim--band paints. */
  .sc-scrim--trail {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
      transparent 58%);
  }
}


:root{
  --sc-canvas:#F4F3EF; --sc-surface:#FFFFFF;
  --sc-ink:#15151B;    --sc-ink-soft:#57575F;
  --sc-accent:#4B4DC0; --sc-accent-ink:#FFFFFF;
  --sc-font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --sc-font-text:"Newsreader",Georgia,"Times New Roman",serif;
  --rule:#15151B; --rule-soft:rgba(21,21,27,.16);
  --ink-ink:#0E0E12;
  /* The column the folio sits in. ONE number, used both to place the folio and
     to indent every chapter away from it -- they were separate before, the
     folio outgrew the 9rem that had been reserved for it when its active row
     started bolding, and it printed over body copy in four chapters. Measured:
     the folio's own text ends at 178px and its ground reaches 216px. */
  --folio-gutter:13.5rem;
}
html{background:var(--sc-canvas)}
body{background:var(--sc-canvas);color:var(--sc-ink);font-family:var(--sc-font-text);
     font-size:clamp(1rem,.96rem + .2vw,1.125rem);line-height:1.62;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--sc-accent);color:#fff}

.wrap{width:min(100% - 2*var(--sc-gutter),76rem);margin-inline:auto}
.wrap--wide{width:min(100% - 2*var(--sc-gutter),96rem)}
.chapter{position:relative;padding-block:clamp(3.4rem,7.5vh,7rem);background:var(--sc-canvas)}
.chapter--ink{background:var(--ink-ink);--sc-ink:#F2F1EC;--sc-ink-soft:#A8A8B0;--rule:#F2F1EC;
  --rule-soft:rgba(242,241,236,.2);--sc-accent:#B3B5F5;color:var(--sc-ink)}
.chapter--paper{background:#E9E7DF}
.chapter--peak{padding-block:clamp(4rem,9vh,8rem)}
.chapter--beats{padding-block:clamp(3rem,8vh,6rem) 0;padding-inline:0}
@media (min-width:1241px){.chapter--beats>.wrap{padding-inline-start:var(--folio-gutter)}}

.kicker{font-family:var(--sc-font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sc-accent);margin:0}
h1,h2,h3,.dsp{font-family:var(--sc-font-display);font-weight:700;
  letter-spacing:-.022em;line-height:1.03;text-wrap:balance;margin:0}
h1{font-size:clamp(3rem,1.5rem + 6.4vw,7.6rem);letter-spacing:-.035em}
h2{font-size:clamp(2.2rem,1.3rem + 3.6vw,4.6rem)}
h3{font-size:clamp(1.1rem,1rem + .5vw,1.4rem);letter-spacing:-.01em;line-height:1.15}
p{margin:0;max-width:var(--sc-measure);text-wrap:pretty}
.lede{font-size:clamp(1.25rem,1.05rem + .9vw,1.95rem);line-height:1.4;max-width:24ch}
.small{font-size:.88rem;line-height:1.5;color:var(--sc-ink-soft)}
.rule{height:1px;background:var(--rule);opacity:.9;border:0;margin:0}

a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:from-font}
:focus-visible{outline:2px solid var(--sc-accent);outline-offset:3px;border-radius:2px}

.cta{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sc-font-display);
  font-weight:700;font-size:.95rem;text-decoration:none;
  background:var(--sc-accent);color:var(--sc-accent-ink);padding:.95rem 1.5rem;border-radius:2px;
  transition:transform 140ms var(--sc-ease-out),background 140ms var(--sc-ease-out)}
.cta:hover{background:#3B3DA8}
.cta:active{transform:translateY(1px)}
.chapter--ink .cta:not(.cta--text),.colophon .cta:not(.cta--text){color:#0E0E12}
.cta--text{background:none;color:var(--sc-ink);padding:.4rem 0;
  border-bottom:2px solid var(--sc-accent);border-radius:0}
.cta--text:hover{background:none;color:var(--sc-accent)}

.folio{position:fixed;left:1.6rem;top:50%;transform:translateY(-50%);z-index:60;
  font-family:var(--sc-font-display);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  pointer-events:none;display:grid;gap:.55rem;color:#4E4E56}
/* Subordinate, not invisible. These were dimmed to opacity .38, which measured
   1.79:1 on the paper hero and 1.85:1 on the photographic one -- below the floor
   every other piece of text on the page holds. The colours themselves were never
   the problem (#57575F clears 6:1 on canvas, #9C9CA4 clears 6:1 on ink); the
   dimming was. So the rank is carried by colour and weight instead of by
   fading the type out: an inactive row is mid-grey at normal weight, the active
   row goes to near-black or near-white and bolds. The tick keeps the old
   dimming, because a 1px rule is decoration and carries no reading. */
.folio__row{position:relative;display:flex;align-items:center;gap:.5rem;
  transition:color 220ms var(--sc-ease-out)}
.folio__row[data-on]{color:#15151B;font-weight:700}
/* Each row carries its own ground, in the colour directly behind THAT row.
   One veil for the whole folio was tried first and seams it: the column is
   360px tall, so at a chapter boundary a single colour paints one ground over
   part of the next -- measured at 207/255. A row is 20px tall and never
   straddles anything. On flat ground the colour is the one already there, so
   nothing shows; over a photograph it restores a ground to read against. */
.folio__row::before{content:"";position:absolute;inset:-.28rem -2.4rem -.28rem -1.05rem;z-index:-1;
  pointer-events:none;
  /* Feathered on the right, where it meets the page; square top and bottom so
     neighbouring rows TILE. They were feathered all round at first, and at a
     light/dark boundary the lower row's dark halo bled up into the upper row's
     light ground and left a mid-grey band through the type -- rgb(92,92,93)
     under #57575F, 1.07:1. The vertical inset is half the row gap, so the veils
     meet exactly and no seam runs between them.

     The fade begins past the end of the longest row, not at 72% of the box: the
     folio is a grid, so every row is as wide as its widest sibling, and a fade
     starting inside that width ate the last 30px of "Ops" and left it on bare
     photograph at 1.00:1. */
  background:linear-gradient(to right,var(--row-veil,transparent) 0%,
    var(--row-veil,transparent) 82%,transparent 100%)}
/* Only the outermost edges of the column feather, so the band does not end in a
   ruled line when it is sitting on a photograph. */
.folio__row:first-child::before{inset-block-start:-.85rem;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 46%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 46%)}
.folio__row:last-child::before{inset-block-end:-.85rem;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 46%);
          mask-image:linear-gradient(to top,transparent 0,#000 46%)}
/* Polarity is per row too, taken from that row's own ground rather than from
   the chapter, so a row hanging over the previous section still reads. */
.folio__row[data-ink="light"]{color:#9C9CA4}
.folio__row[data-ink="light"][data-on]{color:#F2F1EC}
/* A shade darker than the page's --sc-ink-soft: on pure canvas #57575F holds
   6.15:1, but where a chapter boundary tints the ground it fell to 4.44:1.
   #4E4E56 clears 7:1 and is still far behind the active row, which is
   near-black AND bold. */
.folio__row[data-ink="dark"]{color:#4E4E56}
.folio__row[data-ink="dark"][data-on]{color:#15151B}
.folio__n{font-variant-numeric:tabular-nums;min-width:1.4em}
.folio__tick{width:14px;height:1px;background:currentColor;opacity:.5}
.folio__row[data-on] .folio__tick{opacity:.8}
/* No folio-level ink flag any more. It out-specified the per-row rules above
   -- .folio[data-on-ink] .folio__row[data-on] carries four compound selectors
   against three -- and forced near-white onto a row whose own ground was light,
   measured at 1.01:1 at a chapter boundary. Polarity is per row now, full stop. */
@media (max-width:1240px){.folio{display:none}}
/* Reserve the folio its own margin column, rather than letting fixed chrome
   sit on top of the widest chapter. Centring alone cannot clear it: at
   1440px the wide wrap's left margin is narrower than the folio. */
@media (min-width:1241px){.chapter:not(.chapter--beats),.inter,.colophon{
  padding-inline-start:var(--folio-gutter)}}

.masthead{position:absolute;top:0;left:0;right:0;z-index:50;padding:1.4rem 0}
.masthead__in{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
/* The wordmark is inlined rather than linked so it can take the ground with it:
   "Durran" paints in currentColor and inverts on the dark chapters, while the
   dot and "AI" hold the brand accent on both. Two files would have meant two
   files to keep in step. */
.mark{display:inline-block;text-decoration:none;line-height:0;color:var(--sc-ink)}
.mark__wm{display:block;height:1.5rem;width:auto}
.mark__word{fill:currentColor}
.mark__ai{fill:#5A5CC8}
.chapter--ink .mark__ai,.title--photo .mark__ai,.colophon .mark__ai{fill:#B3B5F5}
@media (max-width:760px){.mark__wm{height:1.25rem}}
.meta{font-family:var(--sc-font-display);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sc-ink-soft);margin:0}

.title{min-height:100svh;display:grid;align-content:center;padding-block:9rem 4rem}
.title__grid{display:grid;gap:clamp(1.5rem,3.4vw,2.6rem)}
.title h1{max-width:15ch}
.title__foot{display:grid;gap:1.6rem;align-items:end}
@media(min-width:900px){.title__foot{grid-template-columns:1fr auto;gap:3rem}}
.standfirst{font-size:clamp(1.05rem,1rem + .4vw,1.28rem);line-height:1.55;max-width:46ch}

.schema{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
@media(min-width:820px){.schema{grid-template-columns:1fr 1fr 1fr}}
.schema__cell{padding:1.5rem 1.4rem;border-bottom:1px solid var(--rule-soft)}
.schema__cell:last-child{border-bottom:0}
@media(min-width:820px){.schema__cell{border-bottom:0;border-right:1px solid var(--rule-soft)}
  .schema__cell:last-child{border-right:0}}
.schema__lbl{font-family:var(--sc-font-display);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sc-accent);display:block;margin-bottom:.8rem}
.schema__cell ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.schema__cell li{font-size:.95rem;line-height:1.45;padding-left:1rem;position:relative}
.schema__cell li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;
  background:var(--sc-accent)}
.schema__cell--out li::before{width:6px;height:6px;top:.5em;border-radius:50%}

/* Four field reports, side by side and swiped, not stacked.

   They were a single column at every width: four cards the reader scrolls
   past, one after another, in a chapter whose argument is that the account is
   being read every day. Laid out as a row they read as a run of days instead
   of a list of features, and the chapter stops being the longest scroll on the
   page.

   A SCROLLER, NOT A PINNED PAN. The engine has data-sc-act="pan" for lateral
   travel and it would work here, but chapter 02 is already a pinned act: a pan
   would stop the reader twice in a row, and add two or three viewport-heights
   to a page that does not need them. This stays in normal flow and the reader
   drives it directly.

   scroll-snap so a card lands square rather than half-cut; overscroll-behavior
   so a swipe past the end does not trigger the browser's back gesture. */
/* THE RAIL IS DRIVEN BY THE PAGE SCROLL, NOT SWIPED.

   This was a scroll container with a snap track and a styled scrollbar. It is
   now the engine's `pan` device: the section pins, and the reader's own
   vertical scroll walks the four cards sideways. So there is no overflow, no
   snap, and no scrollbar to hide -- the rail is transformed, and the control
   is the one every reader already has.

   Nothing here sets a width in percent. The engine travels exactly
   scrollWidth - viewport, so a rail narrower than the viewport travels ZERO
   and the act becomes two viewport-heights of nothing while the reader turns
   the wheel. It is width-dependent, which is how that failure survives review:
   it can pan on a phone and sit dead on a desktop. Fixed rem widths keep the
   overflow measurable, and lab/reports.mjs measures it at both widths rather
   than trusting this comment. */
/* One size, so the row reads as a set. Ragged heights were right when these
   were swiped one at a time; panned past as a group they read as four things
   of the same kind, and four different heights makes them look like four
   different kinds of thing. */
/* align-self:center keeps the row at its CONTENT height. As a stretched grid
   item it filled the stage and dragged every card to 752px of a 900px screen,
   which made four short notes look like four full pages. The cards still match
   each other -- that is align-items below -- they just match at the height of
   the longest note rather than at the height of the viewport. */
.reports{display:flex;align-items:stretch;align-self:center;gap:1.4rem;
  padding-inline:clamp(1.15rem,5vw,3.2rem);will-change:transform}
/* Width and nothing else. This carried display:flex;flex-direction:column,
   which at (0,2,0) outranked .report--plate's own display:grid at (0,1,0) and
   quietly undid the approval card's two-column layout: its plate went
   full-width, 544px square, and dragged the whole row to 752px. The card
   already knows how to lay itself out. */
.reports > .report{flex:0 0 auto;width:min(84vw, 34rem)}

/* The stage holds the lead line still while the rail moves under it, which is
   what makes the movement read as travel rather than as the page jumping.
   The group sits just above centre rather than floating in the middle of an
   empty viewport: a pinned stage is a whole screen, and four cards adrift in
   the centre of it left more empty ground than page. */
.railstage{display:grid;align-content:center;gap:1.4rem;
  height:100svh;padding-block:clamp(2rem,8vh,5rem);
  background:#0B0B0F;overflow:hidden}
/* The lead takes the RAIL's inset, not .wrap's centred column. In a .wrap it
   sat centred over a rail that starts at the left edge, and the two read as
   unrelated things that happened to share a screen. */
.railstage__lead{color:var(--sc-ink-soft);max-width:52ch;margin:0;
  padding-inline:clamp(1.15rem,5vw,3.2rem)}
.report{background:var(--sc-surface);border:1px solid var(--rule-soft);
  padding:1.4rem 1.4rem 1.2rem;box-shadow:0 10px 26px -22px rgba(21,21,27,.55)}
.chapter--ink .report{background:#17171E;border-color:rgba(242,241,236,.16);box-shadow:none}
.report__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.5rem;padding-bottom:.8rem;margin-bottom:.9rem;border-bottom:1px solid var(--rule-soft)}
.report__t{font-family:var(--sc-font-display);font-weight:700;font-size:.92rem}
.report__id{font-family:var(--sc-font-display);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sc-ink-soft);font-variant-numeric:tabular-nums}
.report__body{display:grid;gap:.7rem}
.report__body p{font-size:.95rem;line-height:1.5;max-width:64ch}
.report__q{color:var(--sc-ink-soft);font-style:italic}
/* (.report__opts styled a three-option list for this card. Creative approvals
   in this account have only ever been approve or reject, so the options were
   removed and the rule went with them. .report__act, the slash-command line,
   went earlier: a command line is the machine's vocabulary, not the
   founder's.) */

/* (The dim rule lived here and again 100 lines down, at two different opacity
   values. One rule now, below, next to .frame__line, which is what it affects.) */

.sheetbar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.2rem}
.sheetbar__lbl{font-family:var(--sc-font-display);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sc-ink-soft);margin-right:.4rem}
.chip{font-family:var(--sc-font-display);font-size:.72rem;padding:.42rem .72rem;
  border:1px solid var(--rule-soft);background:transparent;color:var(--sc-ink);cursor:pointer;
  border-radius:2px;transition:background 140ms var(--sc-ease-out),border-color 140ms var(--sc-ease-out)}
.chip:hover{border-color:var(--sc-accent)}
.chip[aria-pressed="true"]{background:var(--sc-accent);color:#fff;border-color:var(--sc-accent)}

.offers{display:grid;border-top:1px solid var(--rule)}
.offer{display:grid;gap:.5rem 2rem;grid-template-columns:1fr;padding:1.7rem 0;
  border-bottom:1px solid var(--rule-soft);align-items:baseline}
@media(min-width:860px){.offer{grid-template-columns:minmax(0,22ch) minmax(0,1fr) auto}}
.offer__price{font-family:var(--sc-font-display);font-weight:800;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.3rem);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.offer__price small{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sc-ink-soft);font-weight:600;margin-bottom:.25rem}

.founder{display:grid;gap:2rem}
@media(min-width:900px){.founder{grid-template-columns:1fr 1.2fr;gap:3.5rem;align-items:start}}
.credentials{display:grid;border-top:1px solid var(--rule-soft);margin:0}
.credentials div{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;
  border-bottom:1px solid var(--rule-soft);font-size:.95rem}
.credentials dt{color:var(--sc-ink-soft);margin:0}
.credentials dd{margin:0;font-family:var(--sc-font-display);font-weight:700;
  font-variant-numeric:tabular-nums}

.colophon{background:var(--ink-ink);--sc-ink:#F2F1EC;--sc-ink-soft:#A8A8B0;
  --rule-soft:rgba(242,241,236,.2);--sc-accent:#B3B5F5;color:var(--sc-ink);
  padding-block:clamp(4rem,9vh,7rem) 2.5rem}
.foot{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;
  align-items:baseline;margin-top:3.2rem;padding-top:1.2rem;border-top:1px solid var(--rule-soft);
  font-family:var(--sc-font-display);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sc-ink-soft)}
/* The routes this page must not orphan. Grouped in one flex item so the row
   still reads name / description / elsewhere, rather than five things spread
   edge to edge. No treatment of its own -- it inherits the row's. */
.foot__links{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}



/* A field report that carries the artifact it is about. */
.report--plate{display:grid;gap:1.2rem}
@media(min-width:720px){.report--plate{grid-template-columns:150px minmax(0,1fr);align-items:start}}
.report__plate{margin:0;background:#0A0A0E;border:1px solid rgba(242,241,236,.16)}
.report__plate img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.report__plate figcaption{font-family:var(--sc-font-display);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sc-ink-soft);padding:.45rem .5rem;line-height:1.3}

/* ---- the peak: a held stage whose scroll re-sorts the sheet ---- */
.peak{display:grid;align-content:center;min-height:100svh;background:var(--sc-canvas)}
.peak__in{display:grid;gap:1rem;align-content:center}
@media(min-width:1100px){.peak .wrap--wide{width:calc(100% - 2rem)}}
.peak__lede{font-size:clamp(1.05rem,.98rem + .5vw,1.45rem);line-height:1.4;max-width:46ch}
/* Sized to sit whole inside one viewport: the regrouping only reads if the
   entire batch is on screen while it moves. */
.sheetnote{margin:0;font-size:clamp(.92rem,.88rem + .3vw,1.1rem);color:var(--sc-ink);
  max-width:none;min-height:2.6em;font-family:var(--sc-font-text)}
.sheetnote b{font-family:var(--sc-font-display);font-weight:700}
.sheetnote i{font-style:italic;color:var(--sc-accent)}
@media (prefers-reduced-motion: no-preference){
  .frame[data-flip]{transition:transform 520ms var(--sc-ease-out),
    opacity 420ms var(--sc-ease-out),filter 420ms var(--sc-ease-out)}
}

/* ---- a note from the founder ---- */
.note{max-width:34rem}
.note__eyebrow{font-family:var(--sc-font-display);font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sc-ink-soft);margin:0}
.note__h{font-size:clamp(1.9rem,1.15rem + 2.7vw,3.2rem);line-height:1.06;
  letter-spacing:-.025em;margin:1.1rem 0 0}
.note__p{margin-top:1.3rem;max-width:44ch}
.note__cta{margin-top:2rem}
.note__rule{margin-top:2.4rem;background:var(--rule-soft)}
.note__sig{margin-top:.9rem;display:flex;align-items:baseline;gap:.9rem;max-width:none}
.note__sig b{font-family:var(--sc-font-display);font-weight:700;font-size:1rem}
.note__sig span{font-family:var(--sc-font-display);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sc-ink-soft)}

.offer__to{display:block;font-size:.5em;font-weight:700;letter-spacing:-.01em;
  color:var(--sc-ink-soft);margin-top:.1rem}
.offer__note{font-size:.8rem;line-height:1.45;color:var(--sc-ink-soft);
  margin-top:.45rem;max-width:42ch}

/* ---- 02: eight frames, large, each carrying its argument ---- */
.sheet{--cols:2;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  gap:.9rem;align-content:start;width:min(100%,66rem);margin-inline:auto}
@media(min-width:760px){.sheet{--cols:4}}
.frame{position:relative;margin:0;background:transparent;display:grid;gap:.45rem;
  align-content:start;will-change:transform;
  transition:opacity 420ms var(--sc-ease-out),filter 420ms var(--sc-ease-out)}
.frame img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  background:#E4E1D8}
.frame__n{position:absolute;top:.3rem;left:.34rem;font-family:var(--sc-font-display);
  font-size:.56rem;letter-spacing:.1em;color:#fff;background:rgba(14,14,18,.72);
  padding:.1rem .3rem;font-variant-numeric:tabular-nums}
.frame__line{font-size:.8rem;line-height:1.35;color:var(--sc-ink-soft);
  font-family:var(--sc-font-text);max-width:32ch}
/* De-emphasis lands on the PICTURE, never on the words.

   This dimmed the whole frame, caption included, to opacity .22. Measured
   against the ground it composited onto, those captions came out at 1.36:1
   where this page's floor is 5.43 (lab/dimcontrast.mjs). The page-wide contrast
   harness never caught it because it measures at scroll 0 and the sheet only
   dims 28% into chapter 02 — the state existed outside everything that was
   watching.

   And there was no way back to it. The grouping is scroll-driven, and the
   pointer loupe that can re-focus a frame sits behind (hover:hover), so a
   reader on a phone had no gesture that would make those words readable again.

   The image now carries the grouping — greyed and faded, with the accent
   outline still marking the focused frames — and the caption stays at full
   strength throughout. The device reads the same; the text stays legible. */
.sheet[data-dim] .frame:not([data-hit]) img{opacity:.22;filter:grayscale(1)}
.sheet[data-dim] .frame[data-hit] img{outline:2px solid var(--sc-accent);outline-offset:-2px}

/* ---- 06: the autonomy ladder ---- */
.ladder{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;
  border-top:1px solid var(--rule-soft)}
.ladder__step{display:grid;gap:.5rem 1.4rem;padding:1.3rem 0;align-items:start;
  border-bottom:1px solid var(--rule-soft);position:relative}
@media(min-width:820px){.ladder__step{grid-template-columns:3.5rem minmax(0,1fr) 11rem}}
.ladder__step--gate{border-bottom:0;border-top:2px solid var(--sc-accent);margin-top:.4rem}
.ladder__n{font-family:var(--sc-font-display);font-size:.72rem;letter-spacing:.18em;
  color:var(--sc-accent);font-variant-numeric:tabular-nums;padding-top:.3rem}
.ladder__step h3{font-size:clamp(1.15rem,1rem + .8vw,1.7rem);letter-spacing:-.015em}
.ladder__step p{margin-top:.35rem;font-size:.95rem;line-height:1.45;max-width:52ch;
  color:var(--sc-ink-soft)}
.ladder__who{font-family:var(--sc-font-display);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sc-ink-soft);padding-top:.45rem}
.ladder__who--human{color:var(--sc-accent)}
.terms-grid{display:grid;gap:1.6rem 2.4rem;margin-top:2.6rem}
@media(min-width:820px){.terms-grid{grid-template-columns:1fr 1fr}}
.terms-grid p{margin-top:.5rem;font-size:.95rem;line-height:1.5;max-width:46ch;
  color:var(--sc-ink-soft)}

/* ---- 08: carried-forward proof ---- */
.proofwrap{display:grid;margin-top:2.6rem}
.howiwork{display:grid;gap:1rem;border-top:1px solid var(--rule-soft);padding-top:1.8rem}
.howiwork p{max-width:60ch;font-size:1rem;line-height:1.55}
.howiwork__end{color:var(--sc-ink);font-family:var(--sc-font-display);font-weight:700;
  font-size:1.05rem;line-height:1.4;margin-top:.4rem}

.offer__what{display:grid;gap:0}
.offer__dur{font-family:var(--sc-font-display);font-size:.78rem;font-weight:600;
  letter-spacing:.01em;color:var(--sc-accent);margin-top:.55rem;max-width:40ch;line-height:1.4}
.offer__dur::before{content:"";display:inline-block;width:14px;height:1px;
  background:var(--sc-accent);vertical-align:middle;margin-right:.5rem}
.cta--lg{font-size:1.05rem;padding:1.15rem 1.9rem}

/* ---- chapter 01: a pinned, edge-to-edge sequence ---- */
.chapter--beats{padding:0}
/* Do NOT set position or height here: [data-sc-stage] is the engine's
   mechanism and it makes the stage sticky. Declaring position:relative on
   it silently un-pinned the whole chapter, so the plates scrolled away and
   the reader got four screens of black. */
.beats{overflow:hidden;background:#0B0B0F}
#pains{position:absolute;inset:0}
.beat{position:absolute;inset:0;display:grid;align-items:end;overflow:hidden;
  background:#0B0B0F;will-change:opacity}
.beat--list{align-items:center;background:#0B0B0F}
.beat__art{position:absolute;inset:0;z-index:0;will-change:transform}
.beat__art img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.5) contrast(1.03) brightness(.92)}
/* A band where the type sits, not a full-frame overlay. Measured on the
   composited render: the paperwork plate is bright white paper and came in at
   2.93:1 against a lighter gradient, below even the 3:1 large-text floor. */
.beat__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,8,11,.94) 0%,rgba(8,8,11,.88) 22%,rgba(8,8,11,.62) 44%,
    rgba(8,8,11,.24) 66%,rgba(8,8,11,0) 84%)}
.beat__body{position:relative;z-index:2;padding-block:clamp(3rem,9vh,7rem);
  display:grid;gap:.9rem;will-change:transform}
@media (min-width:1241px){.beat__body{padding-inline-start:var(--folio-gutter)}}
.beat--list .beat__body{align-content:center}
.beat__n{font-family:var(--sc-font-display);font-size:.72rem;letter-spacing:.24em;
  color:var(--sc-accent);font-variant-numeric:tabular-nums}
.beat__h{font-family:var(--sc-font-display);font-weight:700;color:#F5F4EF;
  font-size:clamp(2rem,1.2rem + 3.8vw,4.6rem);line-height:1.02;letter-spacing:-.03em;
  max-width:19ch;text-wrap:balance}
.beat__lab{font-family:var(--sc-font-display);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(245,244,239,.62)}
.beat--list{align-items:center;background:#0B0B0F}
.beat__list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.1rem;max-width:42ch}
.beat__list li{display:grid;gap:.2rem;padding-bottom:1.1rem;
  border-bottom:1px solid rgba(245,244,239,.16)}
.beat__list li:last-child{border-bottom:0;padding-bottom:0}
.beat__list b{font-family:var(--sc-font-display);font-weight:700;color:#F5F4EF;
  font-size:clamp(1.15rem,1rem + .8vw,1.7rem);letter-spacing:-.015em}
.beat__list span{color:rgba(245,244,239,.68);font-size:clamp(.98rem,.94rem + .3vw,1.15rem);
  line-height:1.45}
/* Closes chapter 01: the seven pains are examples, not the catalogue. Sits
   quieter than the list it follows so it reads as an aside, not an eighth item. */
.beat__after{margin:1.8rem 0 0;padding-top:1.2rem;max-width:44ch;
  border-top:1px solid rgba(245,244,239,.16);
  color:rgba(245,244,239,.72);font-size:clamp(.92rem,.9rem + .25vw,1.05rem);line-height:1.5}
/* The closing screen of chapter 01 is the tallest thing in a PINNED stage:
   four remaining pains plus the line that says three are worked through below.
   A pinned stage cannot scroll, so anything past the fold is simply lost -- on
   a 360x640 phone the closing line fell 16px outside the viewport. Short
   viewports get the air taken out rather than the sentence. */
@media (max-height:760px){
  .beat--list .beat__body{padding-block:clamp(1.4rem,4vh,2.6rem)}
  .beat--list .beat__n{margin-bottom:.2rem}
  .beat__list{margin-top:1rem;gap:.6rem}
  .beat__list li{padding-bottom:.6rem}
  .beat__after{margin-top:1rem;padding-top:.8rem}
}

/* Short and wide -- laptops with the browser chrome up, and every phone held
   sideways -- have height to spare nowhere and width to spare everywhere. The
   four remaining pains read as two columns there rather than falling off the
   bottom of a stage that cannot scroll. Measured before this existed: the
   closing screen overflowed a landscape phone by 133px. */
@media (max-height:820px) and (min-width:620px){
  .beat__list{grid-template-columns:1fr 1fr;column-gap:2.4rem;max-width:none}
  /* Both columns end on the same row, so both lose the trailing rule -- one
     kept border would read as a stray line under a single column. */
  .beat__list li:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}
}
@media (max-height:520px){
  .beat--list .beat__body{padding-block:1rem}
  .beat--list .beat__n{margin-bottom:.1rem}
  .beat__list{margin-top:.6rem;gap:.45rem}
  .beat__list li{padding-bottom:.45rem}
  .beat__list b{font-size:1.05rem}
  .beat__after{margin-top:.7rem;padding-top:.55rem}
}


/* ---- 01 the week you dread ---- */
.pain-echo{font-family:var(--sc-font-display);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sc-accent);
  max-width:56ch;margin:0 0 1.6rem;line-height:1.5;
  padding-left:1rem;border-left:2px solid var(--sc-accent)}
.pains{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--rule-soft)}
.pain{display:grid;gap:.35rem 1.6rem;padding:1.5rem 0;
  border-bottom:1px solid var(--rule-soft);align-items:baseline}
@media(min-width:820px){
  .pain{grid-template-columns:3.5rem minmax(0,20ch) minmax(0,1fr)}
  .pain--art{grid-template-columns:3.5rem 9rem minmax(0,18ch) minmax(0,1fr)}
}
.pain__n{font-family:var(--sc-font-display);font-size:.7rem;letter-spacing:.14em;
  color:var(--sc-accent);font-variant-numeric:tabular-nums}
.pain__h{font-size:clamp(1.05rem,1rem + .4vw,1.3rem);letter-spacing:-.012em}
.pain__t{font-size:clamp(.98rem,.94rem + .25vw,1.12rem);line-height:1.5;
  color:var(--sc-ink-soft);max-width:52ch}
.pain__body{display:contents}
@media(max-width:819px){.pain__body{display:grid;gap:.3rem}}
.pain__fig{margin:0;overflow:hidden;background:#17171E}
.pain__fig img{display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;filter:saturate(.55) contrast(1.02)}

/* ---- 05 your numbers ---- */
.calc{margin-top:2.4rem;display:grid;gap:2.4rem}
@media(min-width:960px){.calc{grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:3.5rem;align-items:start}}
.calc__fields{display:grid;border-top:1px solid var(--rule-soft)}
.calc__row{display:grid;grid-template-columns:minmax(0,1fr) 4.5rem 5rem;gap:.6rem;
  align-items:center;padding:.7rem 0;border-bottom:1px solid var(--rule-soft)}
.calc__lbl{font-size:.92rem;line-height:1.35}
.calc__num{width:100%;background:transparent;border:1px solid var(--rule-soft);
  border-radius:2px;padding:.4rem .5rem;font-family:var(--sc-font-display);
  font-size:.95rem;font-variant-numeric:tabular-nums;color:var(--sc-ink);text-align:right}
/* No spinner. The browser's stepper arrows only appear on hover and focus, so
   the field changed width and grew furniture under the pointer while the number
   beside it was being read -- and they are the wrong affordance here anyway:
   these are hours someone knows, typed, not values to be nudged one at a time.
   The element stays input[type=number], so the numeric keypad on a phone, the
   min/max/step and the arrow keys all still work. Only the drawn arrows go. */
.calc__num{appearance:textfield;-moz-appearance:textfield}
.calc__num::-webkit-outer-spin-button,
.calc__num::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.calc__num:focus{outline:2px solid var(--sc-accent);outline-offset:1px;border-color:transparent}
.calc__unit{font-family:var(--sc-font-display);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sc-ink-soft)}
.calc__row--rate{margin-top:.6rem;border-top:1px solid var(--rule)}
.calc__out{display:grid;gap:1.4rem;align-content:start}
.calc__headline{display:grid;gap:.15rem;margin:0}
.calc__big{font-family:var(--sc-font-display);font-weight:800;
  font-size:clamp(2.4rem,1.6rem + 3.4vw,4.4rem);line-height:.98;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--sc-accent)}
.calc__cap{font-size:.9rem;color:var(--sc-ink-soft);max-width:34ch}
.calc__tbl{width:100%;border-collapse:collapse;margin-top:.4rem}
.calc__tbl caption{text-align:left;font-family:var(--sc-font-display);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sc-ink-soft);padding-bottom:.6rem}
.calc__tbl th,.calc__tbl td{text-align:left;padding:.65rem .6rem .65rem 0;
  border-bottom:1px solid var(--rule-soft);font-size:.94rem;vertical-align:baseline}
.calc__tbl thead th{font-family:var(--sc-font-display);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sc-ink-soft);border-bottom-color:var(--rule)}
.calc__tbl tbody th{font-weight:400}
.calc__tbl td{font-variant-numeric:tabular-nums}
.calc__pay{font-family:var(--sc-font-display);font-weight:700}
.calc__note{margin-top:.4rem;font-size:.84rem;line-height:1.5;color:var(--sc-ink-soft);max-width:52ch}

/* Full-stop intertitles between chapters: the page turn. */
.inter{min-height:78svh;display:grid;align-content:center;background:var(--sc-canvas);
  padding-block:clamp(3rem,8vh,6rem)}
@media(max-width:760px){.inter{min-height:70svh;padding-block:2rem}}
.inter--ink{background:var(--ink-ink);--sc-ink:#F2F1EC;--sc-ink-soft:#A8A8B0;
  --rule-soft:rgba(242,241,236,.2);--sc-accent:#B3B5F5;color:var(--sc-ink)}
/* The numeral marks the chapter; the title is what the reader came for. It was
   set at display scale and won every opening on size alone -- roughly twice the
   title at desktop, in the accent, before a word had been read. Same weight,
   same accent: it is the size that made it compete, so the size is what moves.
   Tracking opens back to -.02em because -.05em was drawn for a 180px numeral
   and closes the digits up at this one. */
.inter__n{font-family:var(--sc-font-display);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(1.3rem,.85rem + 1.7vw,3rem);line-height:1;letter-spacing:-.02em;
  color:var(--sc-accent);margin:0}
.inter__t{font-family:var(--sc-font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2.4rem,1.4rem + 4.4vw,5.6rem);line-height:.98;margin:.5rem 0 0;max-width:15ch}
.inter__d{margin-top:1.6rem;max-width:38ch;color:var(--sc-ink-soft);
  font-size:clamp(1rem,.95rem + .3vw,1.2rem);line-height:1.5}
.inter hr{margin-top:1.6rem;max-width:9rem}

/* Phones carry the same eight chapters in a third of the width, so the air
   comes down rather than the content. */
@media(max-width:760px){
  .chapter{padding-block:2.4rem}
  .chapter--peak{padding-block:2.4rem}
  .title{min-height:92svh;padding-block:6rem 2.5rem}
  .reports{gap:.7rem}
  .report{padding:1.05rem 1.05rem .95rem}
  .pain{padding:1.05rem 0}
  .calc{gap:1.6rem}
  .colophon{padding-block:3rem 2rem}
}

@media (prefers-reduced-motion: reduce){
  .frame{transition:opacity 1ms linear}
}

/* ============ VARIANT C: chapter 01 as ONE DAY, drawn in code ============
   Dark ground, one accent, the page's own two faces. No second colour is
   introduced to separate the six kinds of work -- they are told apart by which
   lane they arrive on and by their label, which is the whole point: they are
   different jobs that end up in the same place. */
/* overflow:hidden belongs on the STAGE, never on an ancestor of it: an ancestor
   with a clipped overflow gives the sticky stage a new scrollport and it stops
   sticking. Put here first, it un-pinned the whole chapter and the day scrolled
   past as one black screen. Variant A puts it on .beats, which IS the stage.
   The inline padding is left alone as well -- the folio's margin rule already
   insets this chapter, and adding it again pushed the drawing 9rem further in. */
/* No block padding. .chapter's own padding sits above and below the stage, so
   the pin enters and leaves 67px off-register -- harmless behind a full-bleed
   photograph like variant A's, but here it clipped the counter off the top edge
   at both ends of the chapter. Flush means the frame is exactly the viewport
   for the whole of the pin. */
.chapter--day{padding-block:0;background:#0B0B0F}
/* Do NOT set position or height here: [data-sc-stage] is the engine's own
   mechanism and it makes the stage sticky. Restyling it silently un-pins the
   chapter -- it cost four screens of black on this build once already. */
.day{overflow:hidden;background:#0B0B0F}
/* Reduced motion still means something here. The scroll-linked scrub stays --
   it moves only while the reader's finger moves, and web/daily.js explains why
   removing it did more harm than the motion did. What goes is everything that
   would carry on under its own power once the finger stops: no easing, no
   settling, no transition. The drawing is exactly where the scroll left it. */
[data-sc-reduced], [data-sc-reduced] *{
  transition:none !important; animation:none !important; scroll-behavior:auto !important}
.day__frame{position:absolute;inset:0;display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(.6rem,1.6vh,1.4rem);
  padding:clamp(1.4rem,3.4vh,2.6rem) clamp(1.2rem,4vw,3.2rem)
          clamp(1.4rem,3vh,2.4rem);
  color:#F2F1EC}

/* ---- the head: clock, counter, what just landed ---- */
.day__head-row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap}
.day__clock{font-family:var(--sc-font-display);font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  font-size:clamp(1.6rem,1.1rem + 2vw,2.9rem);line-height:1;color:#F7F6F2;margin:0}
.day__clock small{display:block;font-size:.3em;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#9C9CA4;margin-bottom:.5em}
.day__tally{text-align:right;margin:0}
/* The counter is the one number on this page that is neither the reader's own
   arithmetic nor a published case-study figure -- it is a day drawn to make an
   argument. It says so above itself, so 38 is read as a device. */
.day__tally small{display:block;font-family:var(--sc-font-display);font-size:.6rem;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#9C9CA4;
  margin-bottom:.45em}
@media (max-width:820px){.day__tally small{font-size:.52rem;letter-spacing:.12em}}
@media (max-height:560px){.day__tally small{font-size:.5rem;margin-bottom:.25em}}
.day__tally b{display:block;font-family:var(--sc-font-display);font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  font-size:clamp(2.2rem,1.4rem + 3.4vw,4.4rem);line-height:.92;color:#B3B5F5}
.day__tally span{display:block;font-family:var(--sc-font-display);font-size:.64rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#9C9CA4;
  margin-top:.45em;max-width:16ch;margin-left:auto}

/* ---- the drawing ---- */
/* The drawing is absolutely placed in a box of definite size rather than sized
   by percentages. height:100% on the svg did not resolve against the grid area
   and fell back to the viewBox's own aspect ratio, which on a phone is a 0.37
   column: it computed a 1068px-tall element inside a 500px slot and hung 236px
   out of a stage that cannot scroll. inset:0 plus preserveAspectRatio makes the
   box exactly the slot and lets the drawing fit itself inside it. */
.day__plot{min-height:0;position:relative}
.day__svg{position:absolute;inset:0;width:100%;height:100%;display:block}

.day__ruler line{stroke:rgba(242,241,236,.28);stroke-width:1}
.day__rulerline{stroke:rgba(242,241,236,.18)}
.day__ruler text{font-family:var(--sc-font-display);font-size:11px;font-weight:600;
  letter-spacing:.14em;fill:#8B8B93}
.day__hour{text-anchor:start}

.day__lane{stroke:rgba(242,241,236,.14);stroke-width:1;stroke-dasharray:2 6}
.day__lanelab{font-family:var(--sc-font-display);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;fill:#8B8B93}

/* The one row. Brighter than the lanes, and thicker, because everything is
   about to end up on it. */
.day__youline{stroke:rgba(242,241,236,.5);stroke-width:1.5}
.day__youlab{font-family:var(--sc-font-display);font-size:14px;font-weight:800;
  letter-spacing:.2em;fill:#F7F6F2}

/* An event that has not arrived yet is absent, not faint: the clock has not
   reached it. Once it lands it stays landed. */
.day__drop{stroke:#B3B5F5;stroke-width:1;opacity:0}
.day__drop[data-on="1"]{opacity:.3}
.day__dot{fill:#B3B5F5;opacity:0}
.day__dot[data-on="1"]{opacity:.85}
.day__mark{stroke:#B3B5F5;stroke-width:2.5;stroke-linecap:round;opacity:0}
.day__mark[data-on="1"]{opacity:1}
.day__ticklab{font-family:var(--sc-font-display);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;fill:#9C9CA4;opacity:0}
.day__ticklab[data-on="1"]{opacity:1}

.day__head line{stroke:#F7F6F2;stroke-width:1;opacity:.55}

/* ---- the pain, one line at a time ---- */
.day__pain{display:grid;gap:.5rem;max-width:44ch}
.day__painlab{font-family:var(--sc-font-display);font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#B3B5F5;margin:0}
.day__painline{font-family:var(--sc-font-display);font-weight:700;
  font-size:clamp(1.15rem,.85rem + 1.5vw,2.2rem);line-height:1.12;
  letter-spacing:-.02em;color:#F7F6F2;margin:0;text-wrap:balance}

/* ---- phones: the clock runs down a single column, not sideways ---- */
@media (max-width:820px){
  .day__frame{padding:clamp(1rem,2.4vh,1.6rem) 1.1rem clamp(1rem,2.4vh,1.6rem);
    gap:.7rem}
  .day__head-row{align-items:center}
  .day__tally b{font-size:clamp(1.9rem,1.4rem + 3vw,2.6rem)}
  .day__tally span{font-size:.55rem;letter-spacing:.12em;max-width:11ch}
  .day__clock{font-size:clamp(1.3rem,1rem + 2vw,1.8rem)}
  .day__pain{max-width:none}
  .day__painline{font-size:clamp(1.05rem,.9rem + 1.4vw,1.5rem)}
}
/* Held sideways there is no height for a tall drawing or a large clock, so both
   give way before the copy does. */
@media (max-height:560px) and (min-width:620px){
  .day__frame{padding:.9rem 1.4rem .9rem;gap:.5rem}
  /* Do not let the head wrap here. The counter's new label widened the tally
     past the room beside the clock, it dropped to a second line, and the 87px
     head row took the drawing down to 37px of a 375px frame. Sideways there is
     only one line of head to spare, so the two items shrink instead. */
  /* The row was never wrapping -- the tally was simply 87px tall on its own:
     label, number, and a caption folding to three lines, 23% of a 375px frame
     spent on a counter. Sideways it collapses to one line of caption instead. */
  .day__head-row{flex-wrap:nowrap;gap:1rem}
  .day__tally small{font-size:.48rem;letter-spacing:.1em;margin-bottom:.15em}
  .day__tally b{font-size:1.5rem;line-height:1}
  .day__tally span{font-size:.48rem;letter-spacing:.08em;max-width:none;
    white-space:nowrap;margin-top:.3em}
  .day__clock{font-size:1.25rem}
  .day__tally b{font-size:1.9rem}
  .day__tally span{font-size:.52rem;letter-spacing:.1em}
  .day__painline{font-size:clamp(.98rem,.85rem + .9vw,1.3rem)}
  .day__pain{max-width:62ch}
}

/* Reduced motion gets the end of the day as a still: every event shown, the
   counter at its peak, the closing line on screen. There is nothing to scrub,
   so the playhead has nothing to say and is removed rather than parked. */
@media (prefers-reduced-motion: reduce){
  .day__head{display:none}
}

/* The compact scene names the six kinds once, underneath, instead of labelling
   six lanes it no longer draws. */
.day__legend{font-family:var(--sc-font-display);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;fill:#8B8B93}

/* ---- the photograph, beside the drawing ---- */
/* Three of the seven pains were photographed for this page. The other four take
   the frame nearest them in kind, chosen in daily.js -- these are environment
   shots, not evidence of a particular client, so borrowing one is honest as
   long as nothing claims otherwise. */
.day__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--shot-w,30%));
  gap:clamp(1rem,2.4vw,2.2rem);min-height:0}
.day__shot{margin:0;position:relative;overflow:hidden;background:#111117;
  border:1px solid rgba(242,241,236,.12)}
.day__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block}
@media (max-width:1100px){.day__body{--shot-w:34%}}

/* The pain block is the reason the drawing used to jump. Its copy runs from one
   line to four, the frame is a three-row grid, and every change in the copy's
   height resized the 1fr row the drawing lives in -- so the graph rescaled every
   time the words changed. Reserving four lines makes the row constant and the
   drawing still. */
.day__painline{min-height:calc(4 * 1.12em)}
.day__pain{max-width:54ch}

@media (max-width:820px){
  /* Portrait: the photograph takes a band across the top and the column keeps
     the rest. Stacked, not shrunk into a side column too narrow to read. */
  /* The photograph gets a 4:3 band, not a strip. It was 24% -- 355x137, a
     2.59:1 letterbox that reduced a scene to a lamp and the corner of a laptop.
     46% is 4:3 at this width, and the phone now gets its own 4:3 crop rather
     than the desktop portrait squeezed into a band.

     The drawing keeps a floor of 179px, which is what it needs to stay
     readable, and it is a MINIMUM on the track rather than a percentage split:
     46% + 179px fits any frame down to about 331px tall, and below that the
     photograph gives up its share before the drawing does. The drawing carries
     the argument; the photograph illustrates it. */
  .day__body{grid-template-columns:1fr;grid-template-rows:minmax(0,46%) minmax(179px,1fr);
    gap:.6rem}
  .day__shot{order:-1}
  .day__painline{min-height:calc(4 * 1.12em)}
  .day__pain{max-width:none}
}
@media (max-height:560px){
  /* Sideways there is no room for both. The drawing carries the argument, so
     the photograph is the thing that goes. */
  .day__shot{display:none}
  /* Reset the ROWS too, not just the columns. Below 820px wide the phone rule
     lays this out as [24% photo band, 1fr drawing]; a viewport that is both
     narrow and short matches that AND this, and hiding the photograph left the
     drawing sitting in the empty 24% band -- 43px of a 375px frame. A hidden
     grid item does not remove the track that was declared for it. */
  .day__body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
  .day__painline{min-height:calc(3 * 1.12em)}
}

/* ---- 05: what is already running ----
   The same treatment as the autonomy ladder -- ruled rows on the page's own
   type, not cards. A real table, because this IS tabular: three outcomes, each
   with a before and an after. The markup says so to a screen reader without a
   caption having to explain it, and the arrow is drawn in CSS with empty alt
   text so it is not read out as "right arrow" between every pair. */
.outcomes{margin-top:clamp(2.8rem,6vh,4.4rem)}
.outcomes__h{font-family:var(--sc-font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.6rem,1.1rem + 1.8vw,2.6rem);line-height:1.05;margin:0}
.outcomes__note{margin-top:.6rem;font-size:.95rem;line-height:1.5;max-width:58ch;
  color:var(--sc-ink-soft)}
.outcomes__tbl{width:100%;border-collapse:collapse;margin-top:1.8rem;
  border-top:1px solid var(--rule)}
.outcomes__tbl th,.outcomes__tbl td{text-align:left;vertical-align:baseline;
  padding:1.25rem 1rem 1.25rem 0;border-bottom:1px solid var(--rule-soft)}
.outcomes__tbl thead th{font-family:var(--sc-font-display);font-size:.64rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sc-ink-soft);padding-block:.7rem;border-bottom-color:var(--rule)}
.outcomes__tbl tbody th{font-family:var(--sc-font-display);font-size:.72rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sc-ink-soft);width:1%;white-space:nowrap;padding-right:2.4rem}
.outcome__from{color:var(--sc-ink-soft)}
.outcome__to{font-family:var(--sc-font-display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.05rem,.95rem + .6vw,1.45rem);line-height:1.15}
/* A literal arrow, not a CSS escape. "92" was written through a Python
   string first, where  is a valid OCTAL escape -- what reached the file was
   U+0011 followed by "92", and it rendered as tofu. The fallback stack is here
   because the display face is not guaranteed to carry U+2192. */
.outcome__to::before{content:"→" / "";display:inline-block;margin-right:.6rem;
  font-family:var(--sc-font-display),"Segoe UI Symbol","Arial Unicode MS",sans-serif;
  color:var(--sc-accent)}
/* Narrow: the row becomes a stack rather than a squeezed three-column grid, so
   the after never has to share a line it cannot hold. */
@media(max-width:760px){
  .outcomes__tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .outcomes__tbl,.outcomes__tbl tbody,.outcomes__tbl tr,
  .outcomes__tbl th,.outcomes__tbl td{display:block;width:auto}
  .outcomes__tbl tr{padding-block:1.15rem;border-bottom:1px solid var(--rule-soft)}
  .outcomes__tbl th,.outcomes__tbl td{border:0;padding:0}
  .outcomes__tbl tbody th{white-space:normal;margin-bottom:.4rem}
  .outcome__to{margin-top:.15rem}
}

/* ---- 08 closes on a citation, not a badge wall ----
   Two brands, small and greyscale, naming whose work the page has been showing.
   Mouchiie has a real wordmark; nootri has none anywhere in this project -- only
   ad plates -- so it is set in the page's own display face rather than invented
   as a mark. A logotype is exempt from the contrast floor and can carry the
   greyscale treatment as opacity; the typeset name is real text and cannot, so
   it takes a grey that clears the floor on its own instead. */
.logoband{margin-top:clamp(2.6rem,5vh,3.6rem);padding-top:1.5rem;
  border-top:1px solid var(--rule-soft)}
/* Set as written, not uppercased. This is a citation naming two brands, and one
   of them styles itself lowercase -- an uppercase transform printed "NOOTRI"
   directly above the "nootri" mark, and made a quiet credit shout. */
.logoband__cap{font-family:var(--sc-font-display);font-size:.78rem;font-weight:600;
  letter-spacing:.01em;color:var(--sc-ink-soft);
  margin:0;max-width:56ch;line-height:1.5}
.logoband__row{list-style:none;margin:1.15rem 0 0;padding:0;display:flex;
  align-items:center;gap:clamp(1.8rem,4vw,3rem);flex-wrap:wrap}
.logoband__item{display:flex;align-items:center;height:1.35rem}
.logoband__logo{height:100%;width:auto;display:block;filter:grayscale(1);opacity:.62}
.logoband__item--type{font-family:var(--sc-font-display);font-weight:700;
  font-size:1.02rem;letter-spacing:-.005em;color:var(--sc-ink-soft)}

/* ---- who this is for, before Terms ----
   Two columns, plain: a label and a list each, no headings beyond them. It sits
   between the guardrails and the prices, so it carries no CTA and no figures --
   the Terms chapter is the next thing on screen and does both. */
.fitwrap{padding-block:clamp(2.6rem,6vh,4.4rem)}
.fit{display:grid;gap:2rem 3.4rem;align-items:start}
@media(min-width:820px){.fit{grid-template-columns:1fr 1fr}}
.fit__lbl{font-family:var(--sc-font-display);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sc-ink-soft);
  margin:0 0 .9rem;padding-bottom:.7rem;border-bottom:1px solid var(--rule)}
.fit__col--not .fit__lbl{color:var(--sc-ink-soft)}
.fit ul{margin:0;padding:0;list-style:none;display:grid;gap:.65rem}
.fit li{font-size:1rem;line-height:1.45;padding-left:1.1rem;position:relative;
  max-width:44ch}
.fit li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;
  background:var(--sc-accent)}
/* The exclusions read as struck through the same rule, not as a second colour:
   one accent, and a different mark rather than a different hue. */
.fit__col--not li::before{width:7px;height:7px;top:.48em;border:1px solid var(--rule);
  background:none;border-radius:50%}