/* Streamline product page · page classes. The engine's tokens and devices
   live in scrollcraft.css and are not restyled here. Everything below is this
   page's own markup, held to the taste floor: the 4px scale, two families,
   six colour roles, three elevation steps, transform/opacity/clip-path motion. */

/* ── the settle, kept: a fixed mark that takes over once the film has played ── */
.mark{position:fixed;top:var(--sc-1);left:var(--sc-1);z-index:var(--sc-z-chrome);display:grid;gap:3px;
  padding:var(--sc-3) var(--sc-7) var(--sc-6) var(--sc-3);
  text-decoration:none;color:var(--sc-ink);pointer-events:none;
  /* a soft dark scrim with no edge, so content passing beneath reads as beneath */
  background:radial-gradient(130% 150% at 0% 0%,
    color-mix(in oklab,var(--sc-canvas) 94%,transparent) 30%,
    color-mix(in oklab,var(--sc-canvas) 62%,transparent) 56%,transparent 80%);
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--sc-d-slow) var(--sc-ease-out),transform var(--sc-d-slow) var(--sc-ease-out);
  text-shadow:0 1px 2px rgba(5,5,10,.9),0 2px 12px rgba(5,5,10,.6)}
.mark.is-on{opacity:1;transform:none;pointer-events:auto}
.mark__name{font-family:var(--sc-font-display);font-size:var(--sc-t-xl);line-height:var(--sc-leading-none);letter-spacing:var(--sc-track-tight);
  transition:color var(--sc-d-base) var(--sc-ease-out)}
.mark__strap{color:var(--sc-ink)}
.mark__line{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);color:var(--sc-ink-soft)}
@media (hover:hover) and (pointer:fine){.mark:hover .mark__name{color:var(--sc-accent)}}
.mark:focus-visible{outline:2px solid var(--sc-accent);outline-offset:6px;border-radius:var(--sc-r-sm)}
@media (prefers-reduced-motion:reduce){.mark{transition:none;transform:none}}
/* phones: the name alone. Three lines of fixed chrome at the top of a 390px screen
   sit on every headline that scrolls past; one short line does not. */
@media (max-width:860px){
  .mark{top:0;left:0;padding:var(--sc-3) var(--sc-6) var(--sc-4) var(--sc-3)}
  .mark__name{font-size:var(--sc-t-lg)}
  .mark__strap,.mark__line{display:none}
}

/* ── wayfinding: the engine's progress line, plus one quiet waypoint ────── */
.waypoint{position:fixed;left:var(--sc-4);bottom:var(--sc-4);z-index:var(--sc-z-chrome);
  display:flex;gap:var(--sc-3);align-items:baseline;pointer-events:none;
  font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--sc-ink-soft);text-shadow:0 1px 2px rgba(5,5,10,.9),0 2px 10px rgba(5,5,10,.6)}
.waypoint__n{color:var(--sc-accent)}
@media (max-width:860px){.waypoint{display:none}}

/* ── the sections row: a line of names, not a bar ────────────────────────
   The mark's scrim mirrored to the right, so content passes beneath it
   rather than behind a panel. No box, no border, no blur. It arrives with
   the mark once the film has played, and page.js keeps the two in step. */
.sections{position:fixed;top:var(--sc-1);right:var(--sc-1);z-index:var(--sc-z-chrome);
  display:flex;gap:var(--sc-5);align-items:baseline;pointer-events:none;
  padding:var(--sc-3) var(--sc-3) var(--sc-6) var(--sc-7);
  background:radial-gradient(130% 150% at 100% 0%,
    color-mix(in oklab,var(--sc-canvas) 94%,transparent) 30%,
    color-mix(in oklab,var(--sc-canvas) 62%,transparent) 56%,transparent 80%);
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--sc-d-slow) var(--sc-ease-out),transform var(--sc-d-slow) var(--sc-ease-out);
  text-shadow:0 1px 2px rgba(5,5,10,.9),0 2px 12px rgba(5,5,10,.6)}
.sections.is-on{opacity:1;transform:none;pointer-events:auto}
/* Each link reserves the width of its own bold state: a hidden twin of the
   same letters, pinned at 700, in the same grid cell. So a hover thickens a
   word in place and never nudges the five beside it. The twin is split the
   same way on purpose - letters in their own inline-blocks lose the kerning
   a single run keeps, so an unsplit sizer would measure short. */
.sections a{display:inline-grid;text-decoration:none;
  font-family:var(--sc-font-text);font-size:var(--sc-t-xs);letter-spacing:.06em;
  color:var(--sc-ink-soft);transition:color var(--sc-d-base) var(--sc-ease-out)}
.sections a>*{grid-area:1/1}
.sections__l{display:inline-block;white-space:pre;font-variation-settings:'wght' 400;
  transition:font-variation-settings var(--sc-d-base) var(--sc-ease-out);
  transition-delay:calc(var(--i) * 30ms)}
/* The twin never moves and answers no state: every rule below names
   .sections__set, so nothing can out-specify its locked 700 and collapse
   the width it is holding open. */
.sections__sizer{visibility:hidden}
.sections__sizer .sections__l{font-variation-settings:'wght' 700;transition:none}
/* The section under the centre line, in two channels plus aria-current -
   never colour alone. Accent is the page's own ink-to-accent move. */
.sections a[aria-current]{color:var(--sc-accent)}
.sections a[aria-current] .sections__set .sections__l{font-variation-settings:'wght' 500}
/* The keyboard gets the same answer as the pointer. */
.sections a:focus-visible{color:var(--sc-ink)}
.sections a:focus-visible .sections__set .sections__l{font-variation-settings:'wght' 700}
@media (hover:hover) and (pointer:fine){
  .sections a:hover{color:var(--sc-ink)}
  .sections a:hover .sections__set .sections__l{font-variation-settings:'wght' 700}
}
@media (pointer:coarse){.sections a{min-height:44px;align-items:center}}
/* Fewer and gentler, not zero: the weight still answers the pointer, because
   that is what names the link. What goes is the travel and the stagger. */
@media (prefers-reduced-motion:reduce){
  .sections{transition:none;transform:none}
  .sections__l{transition:none;transition-delay:0s}
}
/* The mark's third line sits on its own row (y 77-94), below the links
   (y 16-37), so the two never meet horizontally: overlaps measured zero at
   1120, 1080, 1024 and 1001 on 2026-09-29. HEAD's 1000px stands. */
@media (max-width:1000px){.sections{display:none}}
/* A jump lands clear of the row rather than flush under it - but only on the
   flow sections. #filings and #shapes pin a 100svh stage to top:0, and a
   margin there pushes that stage past the fold and clips its foot.
   #changed takes no margin either: it follows the pinned #shapes directly, so
   a 4rem margin leaves #shapes' last 4rem in the 1% band that stands the row
   down (page.js), and a jump from the row would hide the row it came from.
   Landing flush is safe there: its own padding-block (>= 4.5rem) sits under
   the row, so the row covers empty space, never the act. */
#mission,#readers,#standard,#search{scroll-margin-top:var(--sc-8)}

/* ── act 1 · the film ───────────────────────────────────────────────────── */
.film{background:var(--sc-canvas)}
/* A scrim as a SIBLING of the copy, never a child, so the verification pass
   composites it. Density lives where the centred captions sit and nowhere else. */
.film__scrim{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 62% 50% at 50% 50%,
    color-mix(in oklab,var(--sc-canvas) 74%,transparent) 0%,
    color-mix(in oklab,var(--sc-canvas) 48%,transparent) 44%,
    transparent 72%)}
/* Phones: the portrait cut is bright pastel edge to edge and the captions span
   the full width, so the density becomes a full-width band across the middle. */
@media (max-width:860px){
  .film__scrim{background:linear-gradient(to bottom,
    transparent 8%,
    color-mix(in oklab,var(--sc-canvas) 84%,transparent) 30%,
    color-mix(in oklab,var(--sc-canvas) 88%,transparent) 68%,
    transparent 92%)}
}
.film__cue{max-width:min(46rem,80vw)}
.film__cue .sc-display{text-shadow:0 1px 2px rgba(5,5,10,.9),0 3px 12px rgba(5,5,10,.7),0 10px 40px rgba(5,5,10,.7)}
.film__mark{font-family:var(--sc-font-display);font-size:var(--sc-t-4xl);line-height:var(--sc-leading-none);
  letter-spacing:var(--sc-track-tight);margin:0;text-shadow:0 2px 12px rgba(5,5,10,.8)}
.film__strap{margin-top:var(--sc-3);color:var(--sc-ink)}
.film__line{margin:var(--sc-2) 0 0;font-family:var(--sc-font-mono);font-size:var(--sc-t-sm);color:var(--sc-ink-soft)}

/* the figures layer: opacity and drift are pure functions of --sc-p */
.figs{position:absolute;inset:0;pointer-events:none;z-index:2}
.fig{position:absolute;font-family:var(--sc-font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(.72rem,1.1vw,.95rem);letter-spacing:.06em;white-space:nowrap;
  background:color-mix(in oklab,var(--sc-canvas) 60%,transparent);
  border:1px solid color-mix(in oklab,var(--sc-ink) 18%,transparent);border-radius:var(--sc-r-sm);
  padding:.28em .6em;backdrop-filter:blur(10px);
  --k:clamp(0,min((var(--sc-p,0) - var(--a)) * 14,(var(--b) - var(--sc-p,0)) * 14),1);
  opacity:calc(var(--k) * .92);
  transform:translateY(calc((var(--sc-p,0) - var(--a)) * -140px))}
.fig--up{color:#4ade80}.fig--down{color:#f87171}.fig--flat{color:var(--sc-accent)}
/* The figures were switched off below 860px, which is why a phone read the film
   with nothing in the margins. They were not too wide — all seven clear a 375px
   frame horizontally. The problem is vertical: their desktop placement spreads
   them across the middle third, and on a phone the centred copy spans nearly the
   full width, so five of them would have sat on the type. Desktop has room
   BESIDE the headline; a phone only has room ABOVE and BELOW it.

   So they are re-placed rather than hidden: the first three into a top band and
   the last four into a bottom band, kept in scrub order so they still arrive in
   the sequence the film narrates, and alternating sides so two that share a
   window never stack. `!important` is needed because each figure carries its
   position as an inline attribute. The clear band from 36% to 64% is what the
   copy occupies at its tallest, measured with a three-line headline at 375px. */
@media (max-width:860px){
  .fig{padding:.24em .5em}
  .fig:nth-of-type(1){left:5%!important;right:auto!important;top:12%!important}
  .fig:nth-of-type(2){right:5%!important;left:auto!important;top:19%!important}
  .fig:nth-of-type(3){left:5%!important;right:auto!important;top:26%!important}
  .fig:nth-of-type(4){right:5%!important;left:auto!important;top:70%!important}
  .fig:nth-of-type(5){left:5%!important;right:auto!important;top:76%!important}
  .fig:nth-of-type(6){right:5%!important;left:auto!important;top:82%!important}
  .fig:nth-of-type(7){left:5%!important;right:auto!important;top:88%!important}
}

/* ── act 2 · the mission, layered ───────────────────────────────────────── */
.mission__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,72px);align-items:center}
.mission__media{position:relative;min-height:26rem}
.plane{position:absolute}
.plane--photo{inset:0}
.plane--photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--sc-r-md);
  box-shadow:var(--sc-e3),var(--sc-edge)}
.plane--tl{top:-22px;left:-34px}
.plane--mid{top:44%;right:-40px}
.plane--br{bottom:-26px;right:-24px}
@media (max-width:900px){
  .mission__grid{grid-template-columns:1fr}
  .mission__media{min-height:16rem}
  .plane--mid{display:none}.plane--tl{left:8px;top:-18px}.plane--br{right:8px}
}

/* the floating instruments: the float rides an inner element so parallax
   and the float never write transform on the same node */
.widget{background:color-mix(in oklab,var(--sc-canvas) 74%,transparent);
  border:1px solid color-mix(in oklab,var(--sc-accent) 30%,transparent);border-radius:var(--sc-r-md);
  padding:.8em 1.1em;backdrop-filter:blur(12px);box-shadow:var(--sc-e2),var(--sc-edge);
  font-family:var(--sc-font-mono);font-size:var(--sc-t-sm);letter-spacing:.08em;color:var(--sc-ink);white-space:nowrap}
.widget span{display:block;font-size:var(--sc-t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--sc-ink-soft);margin-top:.35em}
.widget svg{display:block}
/* the diagram instrument: the product's own grammar in miniature. Three
   square-ended tributaries join into one trunk as wide as their sum, one
   costed step narrows it, and a half-dome lake rests on the dashed break-even
   line with its ghost below. Sized down a step on narrow frames so the
   bottom-right plane never leaves the photo. */
.widget--diagram{padding:.7em .9em .55em}
.widget--diagram svg{width:clamp(176px,20vw,220px);height:auto}
.widget--float{animation:wfloat 7s var(--sc-ease-in-out) -2.4s infinite alternate}
@keyframes wfloat{from{transform:translateY(-5px)}to{transform:translateY(7px)}}
body.paused .widget--float{animation-play-state:paused!important}
.riverflow{animation:flow 5s linear -2s infinite}
@keyframes flow{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}

/* ── act 3 · two readers ────────────────────────────────────────────────── */
.readers__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:var(--sc-8)}
.reader{background:var(--sc-surface);border-radius:var(--sc-r-md);box-shadow:var(--sc-e1),var(--sc-edge);
  overflow:clip;transition:transform var(--sc-d-slow) var(--sc-ease-out),box-shadow var(--sc-d-slow) var(--sc-ease-out)}
@media (hover:hover) and (pointer:fine){.reader:hover{transform:translateY(-6px);box-shadow:var(--sc-e3),var(--sc-edge)}}
.reader--raised{transform:translateY(var(--sc-7))}
@media (hover:hover) and (pointer:fine){.reader--raised:hover{transform:translateY(calc(var(--sc-7) - 6px))}}
.reader__photo{width:100%;height:auto}
.reader__copy{padding:clamp(22px,3vw,34px)}
.reader__mark{width:120px;height:36px;margin-bottom:var(--sc-4)}
.reader__copy .sc-body{margin-top:var(--sc-3)}
@media (max-width:820px){.readers__grid{grid-template-columns:1fr}.reader--raised{transform:none}}

/* ── act 4 · the filing rail ────────────────────────────────────────────── */
.rail-stage{background:var(--sc-canvas)}
/* the library atrium, sunk far back: a shelf the cards travel along */
.rail-stage__ground{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(to right,var(--sc-canvas) 0%,transparent 35%,transparent 65%,var(--sc-canvas) 100%),
    linear-gradient(to bottom,var(--sc-canvas) 0%,transparent 40%,transparent 60%,var(--sc-canvas) 100%),
    url('inst-archive.jpg') center/cover}
.rail{position:relative;z-index:1;height:100%;align-items:center;gap:var(--sc-6);padding-inline:6vw}
.rail > *{flex:none}
.rail__lead{width:clamp(20rem,30vw,28rem);padding-right:var(--sc-4)}
.rail__lead .sc-lede{margin-top:var(--sc-4)}
.rail__close{width:clamp(18rem,26vw,24rem);padding-left:var(--sc-4)}
.rail__close .sc-body{margin-top:var(--sc-3)}
.card{position:relative;width:clamp(19rem,24vw,22rem);background:var(--sc-surface);border-radius:var(--sc-r-md);
  box-shadow:var(--sc-e1),var(--sc-edge);padding:var(--sc-5);display:grid;gap:var(--sc-3);text-align:left;
  transition:box-shadow var(--sc-d-base) var(--sc-ease-out)}
@media (hover:hover) and (pointer:fine){.card:hover{box-shadow:var(--sc-e3),var(--sc-edge)}}
.card:has(.card__open:focus-visible){outline:2px solid var(--sc-accent);outline-offset:3px}
.card__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sc-3)}
.card__ticker{font-family:var(--sc-font-display);font-size:var(--sc-t-3xl);line-height:var(--sc-leading-none);letter-spacing:var(--sc-track-tight)}
.card__exch{color:var(--sc-ink-soft)}
.card__name{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--sc-ink-soft)}
.card__ind{font-size:var(--sc-t-sm);color:var(--sc-ink-soft)}
/* the filing line: form, year and date on one mono line under a hairline */
.card__meta{margin:var(--sc-2) 0 0;padding-top:var(--sc-3);border-top:1px solid var(--sc-hairline);
  font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--sc-ink-soft);font-variant-numeric:tabular-nums}
/* the selling line: the card's one sentence, in the text face, ink not soft */
.card__pitch{margin:0;font-family:var(--sc-font-text);font-size:var(--sc-t-base);line-height:var(--sc-leading-snug);color:var(--sc-ink);
  text-wrap:pretty;min-height:2.6em}
/* the whole card is the control: the link stretches over it */
.card__open{display:inline-flex;align-items:center;gap:.4em;margin-top:var(--sc-1);
  font:inherit;font-size:var(--sc-t-sm);color:var(--sc-accent);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.card__open::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card__open:focus-visible{outline:none}
/* items settle in sequence as the drawer is pulled: a function of --sc-p,
   first item exempt, floored so an unsettled card reads as arriving */
@media (prefers-reduced-motion:no-preference){
  .card{--k:clamp(0,(var(--sc-p,0) * 6 - var(--i,0) + 1.1) * 1.6,1);
    opacity:calc(.55 + var(--k) * .45);transform:translateY(calc((1 - var(--k)) * 18px))}
  .rail__close{--k:clamp(0,(var(--sc-p,0) - .72) * 5,1);opacity:calc(.55 + var(--k) * .45)}
}
@media (max-width:860px){
  .rail{gap:var(--sc-4);padding-inline:5vw}
  .rail__lead{width:min(78vw,22rem)}.rail__close{width:min(70vw,20rem)}
  .card{width:min(78vw,20rem);padding:var(--sc-4)}
  .card__ticker{font-size:var(--sc-t-2xl)}
}

/* ── act 5 · the river held on stage, to scale ──────────────────────────── */
.shapes{background:var(--sc-canvas)}
.shapes__river{position:absolute;inset:0;width:100%;height:100%;padding:2vh 3vw}
.river-body{fill:url(#water)}
/* the cuts are canvas-coloured and grow in from the banks, transform only.
   Thresholds sit at .76 of their old positions: four beats now share the act
   and beats 1-3 must finish inside the first ~0.73 of it. */
.cut{fill:var(--sc-canvas);transform-box:fill-box}
.cut--top{transform-origin:top}.cut--bot{transform-origin:bottom}
.cut--cost{transform:scaleY(clamp(0,(var(--sc-p,0) - .23) * 4,1))}
/* tax finishes before the lake does: the river must reach the line at the width
   the lake's figure claims ($133.749B), never at the pre-tax $155.237B */
.cut--tax{transform:scaleY(clamp(0,(var(--sc-p,0) - .42) * 8,1))}
.cut--hold{transform:scaleY(var(--hold,0))}
.notch{stroke:#f87171;stroke-width:3px;opacity:clamp(0,(var(--sc-p,0) - .26) * 5,1)}
/* the lake grows out of the river's end ON the line: the group holds water,
   rim and ghost, and its fill-box spans both halves, so 0% 50% is exactly the
   terminus on the datum - nothing ever floats free of the river, and the
   ghost is never larger than the water it mirrors */
.lake{transform-box:fill-box;transform-origin:0% 50%;transform:scale(clamp(0,(var(--sc-p,0) - .46) * 7,1))}
.lake__fill{fill:url(#basin)}
.lake__rim{fill:none;stroke:#eaf4ff;stroke-width:2px;opacity:.5}
.ghost{fill:rgba(255,255,255,.08)}
.ghost__rim{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5px}
/* the break-even line: on from the moment a lake exists, and it stays on
   through the hand-off, because both filers rest on the same line */
.datum{stroke:rgba(255,255,255,.6);stroke-width:1.5px;stroke-dasharray:8 4;
  opacity:clamp(0,(var(--sc-p,0) - .46) * 4,1)}
.datum__label{font-family:var(--sc-font-mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  fill:rgba(255,255,255,.6);opacity:clamp(0,(var(--sc-p,0) - .5) * 6,1)}
/* beat 4: Microsoft hands the stage to Intel on opacity alone */
.scene--msft{opacity:clamp(0,(.76 - var(--sc-p,0)) * 17,1)}
.scene--intel{opacity:clamp(0,(var(--sc-p,0) - .74) * 14,1)}
/* Intel's dry channel: no water and no figure, a grey connector to the loss */
.dry{stroke:rgba(255,255,255,.35);stroke-width:3px}
/* the loss grows from the same point the profit lake does - the terminus on
   the line - only downward; its ghost rides in the same group */
.loss{transform-box:fill-box;transform-origin:0% 50%;transform:scale(clamp(0,(var(--sc-p,0) - .755) * 8,1))}
.loss__fill{fill:#f87171;opacity:.8}
.loss__rim{fill:none;stroke:#f87171;stroke-width:2px;opacity:.9}
.river--flow{fill:none;stroke:#eaf4ff;stroke-width:3px;stroke-dasharray:14 46;opacity:.8}
/* figures on the drawing, each arriving with its cue */
.rlabel{font-family:var(--sc-font-mono);letter-spacing:.06em;fill:var(--sc-ink);
  --k:clamp(0,(var(--sc-p,0) - var(--a,0)) * 8,1);opacity:calc(var(--k) * .95)}
.rlabel__fig{font-size:22px;font-variant-numeric:tabular-nums}
.rlabel__desc{font-size:14px;letter-spacing:.14em;text-transform:uppercase;fill:var(--sc-ink-soft)}
.rlabel--soft{fill:var(--sc-ink-soft)}
.rlabel--up{fill:#4ade80}.rlabel--down{fill:#f87171}.rlabel--flat{fill:var(--sc-accent)}
.shapes__scale{position:absolute;right:var(--sc-5);top:var(--sc-5);z-index:var(--sc-z-copy);margin:0;text-align:right;
  font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--sc-ink-soft);
  opacity:calc(clamp(0,(var(--sc-p,0) - .03) * 10,1) * clamp(0,(.76 - var(--sc-p,0)) * 17,1))}
.shapes__scale--intel{opacity:clamp(0,(var(--sc-p,0) - .75) * 14,1)}
@media (max-width:860px){
  .rlabel,.shapes__scale,.datum__label{display:none}
  .shapes__river{top:auto;height:54%;padding:2vh 2vw}
}
.shapes__cue{inset-inline:auto;left:50%;top:9%;translate:-50% 0;text-align:center;max-width:min(40rem,80vw);
  text-shadow:0 1px 2px rgba(5,5,10,.9),0 3px 12px rgba(5,5,10,.7)}
.shapes__cue .sc-lede{margin-top:var(--sc-3);margin-inline:auto}
/* visible for beats 1-3 only: past .72 the stage belongs to the loss beat,
   and page.js makes the button inert on the same threshold */
.shapes__hold{position:absolute;left:50%;bottom:clamp(1.25rem,5vh,3rem);translate:-50% 0;z-index:var(--sc-z-copy);
  opacity:calc(clamp(0,(var(--sc-p,0) - .23) * 5,1) * clamp(0,(.72 - var(--sc-p,0)) * 20,1));
  background:color-mix(in oklab,var(--sc-canvas) 70%,transparent);border:1px solid var(--sc-hairline-strong);
  border-radius:var(--sc-r-md);padding:var(--sc-3) var(--sc-5);cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:border-color var(--sc-d-base) var(--sc-ease-out),transform var(--sc-d-fast) var(--sc-ease-out)}
.shapes__hold:active{transform:translate(-50%,0) scale(.97)}
.shapes__hold.is-done{border-color:color-mix(in oklab,#4ade80 40%,transparent)}
.shapes__hold .sc-label{color:var(--sc-ink)}

/* ── act · what changed: two years of one filer at one scale ──────────────
   A flow act after the pin, single column. Both SVGs share one viewBox width
   and one rendered width, so 1 viewBox unit stays $1B in both; nothing here
   ever rescales a picture (the 0049 spirit). The entrance is the flow
   device's, stripped to opacity alone: record 0006 condition H19 makes this
   act opacity and stagger only, and the engine's 14px rise is a position change. */
.changed [data-sc-in],.changed [data-sc-stagger]>*{transform:none}
.changed__scale{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--sc-ink-soft)}
/* each clause carries its own trailing separator, so a wrapped line can end
   with one but never begin with one (measured bare "·" at 390, 2026-09-29) */
.changed__scale span{white-space:nowrap}
.changed__figs{margin-top:var(--sc-7);display:grid;gap:var(--sc-6)}
.changed__fig{margin:0}
.changed__label{margin:0 0 var(--sc-2);font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--sc-ink-soft);font-variant-numeric:tabular-nums}
.changed__svg{display:block;width:100%;height:auto}
/* the drawing's own text: the same mono voice as the pinned act's rlabels.
   On the water the ink is the dark that sits on the accent family; at the
   lake the figure takes the accent, as the pinned act's net figure does. */
.changed__svg text{font-family:var(--sc-font-mono);letter-spacing:.06em}
.chg-fig{font-size:22px;font-variant-numeric:tabular-nums}
.chg-desc{font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.chg-on-water{fill:var(--sc-accent-ink)}
.chg-on-water .chg-desc{fill:color-mix(in oklab,var(--sc-accent-ink) 80%,transparent)}
.chg-at-lake{fill:var(--sc-accent)}
.chg-at-lake .chg-desc{fill:var(--sc-ink-soft)}
.chg-rim{fill:none;stroke:#eaf4ff;stroke-width:2px;opacity:.5}
.chg-datum{stroke:rgba(255,255,255,.6);stroke-width:1.5px;stroke-dasharray:8 4}
.changed__after{margin-top:var(--sc-7);display:grid;gap:var(--sc-5);justify-items:start}
/* the filed figures, two rows and no percentages: the pictures carry the
   change, the table carries the record */
.changed__table{border-collapse:collapse}
.changed__table th,.changed__table td{padding:var(--sc-3) 0;border-top:1px solid var(--sc-hairline);
  font-weight:400;text-align:left}
.changed__table thead th{border-top:0;padding-top:0;font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--sc-ink-soft)}
.changed__table tbody th{padding-right:var(--sc-6);font-family:var(--sc-font-text);font-size:var(--sc-t-sm);
  color:var(--sc-ink-soft)}
.changed__table td,.changed__table thead th:not(:first-child){text-align:right;padding-left:var(--sc-7)}
.changed__table td{font-family:var(--sc-font-mono);font-size:var(--sc-t-sm);color:var(--sc-ink)}
.changed__any{color:var(--sc-ink-soft)}
.changed__go{margin:0}
/* phones: the HTML labels and the table carry the story; the drawing's own
   figures step aside like the pinned act's rlabels do */
@media (max-width:860px){
  .changed__svg text{display:none}
  .changed__figs{margin-top:var(--sc-6);gap:var(--sc-5)}
  .changed__after{margin-top:var(--sc-6)}
  /* narrower value columns so "Net income" holds one line at 390 */
  .changed__table td,.changed__table thead th:not(:first-child){padding-left:var(--sc-5)}
}

/* ── the ticker ─────────────────────────────────────────────────────────── */
.ticker{overflow:hidden;border-block:1px solid var(--sc-hairline);padding:var(--sc-3) 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:inline-flex;gap:3.5em;white-space:nowrap;font-family:var(--sc-font-mono);
  font-size:var(--sc-t-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--sc-ink-soft);
  animation:tick 70s linear -20s infinite}
.ticker__track span::after{content:"·";margin-left:3.5em;color:var(--sc-accent);opacity:.5}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
body.paused .ticker__track{animation-play-state:paused!important}

/* ── act 5 · the standard ───────────────────────────────────────────────── */
.standard{padding-top:0}
.standard__figure{position:relative;margin:0 0 var(--sc-8);height:clamp(22rem,56vh,40rem)}
.standard__figure > img{width:100%;height:100%;object-fit:cover}
.standard__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--sc-canvas) 0%,color-mix(in oklab,var(--sc-canvas) 40%,transparent) 30%,transparent 60%)}
.widget--ledger{position:absolute;right:clamp(1rem,6vw,5rem);bottom:-2rem;padding:10px;max-width:240px;white-space:normal}
.widget--ledger img{border-radius:var(--sc-r-sm);width:100%;height:auto}
.widget--ledger span{margin-top:.55em}
@media (max-width:860px){.widget--ledger{display:none}}
.standard__grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.standard__grid{grid-template-columns:1fr}}
.counts{margin:0;display:grid;gap:var(--sc-4)}
.count{padding:var(--sc-4) 0;border-top:1px solid var(--sc-hairline)}
.count dt{margin:0}
.count dd{margin:var(--sc-1) 0 0;color:var(--sc-ink-soft);font-size:var(--sc-t-sm)}
.count .sc-nums{color:var(--sc-ink);font-family:var(--sc-font-display);font-size:var(--sc-t-xl);margin-right:.15em}

/* ── act 6 · the close ──────────────────────────────────────────────────── */
.close{position:relative;overflow:clip;padding-block:var(--sc-section) 0}
.close__backdrop{position:absolute;inset:0;z-index:0;
  background:linear-gradient(color-mix(in oklab,var(--sc-canvas) 82%,transparent),
    color-mix(in oklab,var(--sc-canvas) 50%,transparent) 45%,var(--sc-canvas) 92%),
    url('inst-water.jpg') center/cover}
.close__inner{position:relative;z-index:1;text-align:center}
.close__copy{margin-inline:auto;max-width:44rem}
.close__copy .sc-lede{margin-inline:auto}
.close__copy .sc-display,.close__copy .sc-lede{text-shadow:0 1px 2px rgba(5,5,10,.9),0 3px 12px rgba(5,5,10,.7)}
.close__total{color:var(--sc-ink)}
.close__total .sc-nums{color:var(--sc-accent)}
.close__total[hidden]{display:none}
/* The glass shimmer call to action, ported from a React component to plain CSS.
   A rotating conic gradient runs under a 1px cut so it reads as a live rim; a
   glass plate sits inside it; the content row carries the avatar, the label
   and the wand. Angel picked this treatment on purpose, so its glow is earned;
   it is tinted to the page's one accent rather than the pasted purple. */
.glass-cta{--spread:90deg;--shimmer:rgba(255,255,255,.6);--speed:4s;--cut:1px;
  position:relative;isolation:isolate;display:inline-flex;overflow:hidden;cursor:pointer;
  border:0;padding:0;background:none;border-radius:var(--sc-r-pill);color:var(--sc-ink);
  box-shadow:0 8px 40px color-mix(in oklab,var(--sc-accent) 28%,transparent);
  transition:transform var(--sc-d-base) var(--sc-ease-out),box-shadow var(--sc-d-base) var(--sc-ease-out)}
@media (hover:hover) and (pointer:fine){
  .glass-cta:hover{transform:scale(1.05);box-shadow:0 0 40px 8px color-mix(in oklab,var(--sc-accent) 36%,transparent)}
}
.glass-cta:active{transform:scale(.97)}
.glass-cta__shimmer{position:absolute;inset:0;z-index:0}
.glass-cta__shimmer>span{position:absolute;inset:-200%;width:400%;height:400%;
  background:conic-gradient(from calc(270deg - (var(--spread) * .5)),transparent 0,var(--shimmer) var(--spread),transparent var(--spread));
  animation:glass-rotate var(--speed) linear infinite}
.glass-cta__plate{position:absolute;inset:var(--cut);z-index:1;border-radius:var(--sc-r-pill);
  background:rgba(255,255,255,.05);backdrop-filter:blur(8px)}
.glass-cta__row{position:relative;z-index:2;display:flex;align-items:center;gap:var(--sc-3);overflow:hidden;
  border-radius:var(--sc-r-pill);padding:var(--sc-3) var(--sc-4);
  font-family:var(--sc-font-text);font-size:var(--sc-t-base);font-weight:500;letter-spacing:0;text-transform:none}
.glass-cta__beam{position:absolute;top:50%;left:50%;width:200%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),rgba(255,255,255,.2),rgba(255,255,255,.2),rgba(255,255,255,.2),transparent);
  animation:glass-beam 4s linear infinite}
.glass-cta__inner{position:absolute;inset:1px;border-radius:var(--sc-r-pill);
  background:color-mix(in oklab,var(--sc-canvas) 80%,transparent);backdrop-filter:blur(8px)}
.glass-cta__avatar{position:relative;z-index:1;width:2rem;height:2rem;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px rgba(255,255,255,.1)}
.glass-cta__label{position:relative;z-index:1;white-space:nowrap}
.glass-cta__icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:1.75rem;height:1.75rem;margin-left:var(--sc-1);border-radius:50%;background:rgba(255,255,255,.1)}
@keyframes glass-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes glass-beam{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
body.paused .glass-cta__shimmer>span,body.paused .glass-cta__beam{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .glass-cta__shimmer>span,.glass-cta__beam{animation:none}
  .glass-cta:hover{transform:none}
}
/* the close's one way in: a plain link to the app's search page, in the
   filing cards' "Open in Streamline" voice. The glass button stays the dock's
   alone, so the page has one signature control, not two. */
.close__go{margin-top:var(--sc-6)}
.close__open{display:inline-flex;align-items:center;gap:.4em;min-height:44px;
  font-family:var(--sc-font-text);font-size:var(--sc-t-base);color:var(--sc-accent);text-decoration:none;
  text-shadow:0 1px 2px rgba(5,5,10,.9),0 3px 12px rgba(5,5,10,.7);
  transition:color var(--sc-d-base) var(--sc-ease-out)}
.close__open svg{flex:none;transition:transform var(--sc-d-base) var(--sc-ease-out)}
@media (hover:hover) and (pointer:fine){
  .close__open:hover{color:var(--sc-ink)}
  .close__open:hover svg{transform:translateX(3px)}
}
.close__open:focus-visible{outline:2px solid var(--sc-accent);outline-offset:6px;border-radius:var(--sc-r-sm)}
@media (prefers-reduced-motion:reduce){.close__open svg{transition:none}}
/* the chips are links into the app: what a button centres and leaves
   undecorated natively, an anchor has to be told */
.chip{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--sc-ink);padding:.8em 1.3em;border-radius:var(--sc-r-md);
  border:1px solid color-mix(in oklab,var(--sc-accent) 28%,transparent);background:var(--sc-surface);cursor:pointer;
  transition:border-color var(--sc-d-base) var(--sc-ease-out),transform var(--sc-d-fast) var(--sc-ease-out)}
.chip:hover{border-color:var(--sc-accent)}
.chip:active{transform:translateY(1px)}
@media (pointer:coarse){.chip,.cta{min-height:44px}}
/* ── the dock: search, in the film's resting frame ─────────────────────────
   A layer over the film stage, not fixed chrome: it rises once the scrub has
   landed - the same --sc-p the drifting figures read - and slides off under
   the mission with the rest of the resting frame. Collapsed it is one pill,
   placed in the lake beneath the settle lines; opened, the panel is anchored
   to the frame's foot and grows upward, and the settle lines step aside so it
   has the frame. Every result and preset is a link to the app's company route,
   so a pick is a page navigation and the browser owns Back. */
.dock{position:absolute;inset:0;z-index:calc(var(--sc-z-copy) + 1);pointer-events:none;
  opacity:0;transform:translateY(14px);
  transition:opacity var(--sc-d-slow) var(--sc-ease-out),transform var(--sc-d-slow) var(--sc-ease-out)}
.dock.is-on{opacity:1;transform:none}
.dock__pill,.dock__panel{pointer-events:none}
.dock.is-on .dock__pill,.dock.is-on .dock__panel{pointer-events:auto}
.dock__pill{position:absolute;left:50%;top:72%;transform:translateX(-50%);white-space:nowrap}
.dock__panel{position:absolute;left:50%;bottom:max(6vh,env(safe-area-inset-bottom));transform:translateX(-50%);
  width:min(40rem,calc(100% - var(--sc-4)*2));max-height:calc(100% - 10vh);overflow:hidden}
/* the settle lines yield the frame while the panel is open; the engine writes
   their opacity inline every frame, which is what the !important is for */
.film.dock-open .film__settle{opacity:0!important;pointer-events:none}
.dock__goo{position:absolute;width:0;height:0;overflow:hidden}
/* .dock__pill is only a placement wrapper. The trigger inside it is the glass
   Search Now button, styled by .glass-cta below exactly as it was in the close,
   with its own hover and its own light; nothing here restyles it. */
.dock.is-open .dock__pill{display:none}
.dock:not(.is-open) .dock__panel{display:none}
.dock__panel{display:grid;gap:var(--sc-3);padding:var(--sc-3);
  border-radius:var(--sc-r-lg);background:color-mix(in oklab,var(--sc-canvas) 84%,transparent);
  border:1px solid color-mix(in oklab,var(--sc-accent) 24%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sc-e3),0 8px 40px color-mix(in oklab,var(--sc-accent) 18%,transparent)}
.dock__row{display:flex;align-items:center;gap:var(--sc-2)}
.dock__field{position:relative;flex:1;display:flex;align-items:center;min-height:44px;
  border-radius:var(--sc-r-pill);background:var(--sc-surface);border:1px solid var(--sc-hairline);
  transition:border-color var(--sc-d-base) var(--sc-ease-out),box-shadow var(--sc-d-base) var(--sc-ease-out)}
.dock__field:focus-within{border-color:var(--sc-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--sc-accent) 22%,transparent)}
.dock__icon{flex:none;display:grid;place-items:center;width:40px;height:40px;color:var(--sc-ink-soft)}
.dock__icon svg{width:15px;height:15px;transform-origin:50% 50%}
.dock.is-loading .dock__icon svg{animation:dock-spin 1s linear infinite}
@keyframes dock-spin{to{transform:rotate(360deg)}}
.dock__input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--sc-ink);
  font-family:var(--sc-font-mono);font-size:var(--sc-t-sm);letter-spacing:.04em;padding:.7em .6em .7em 0}
.dock__input::placeholder{color:var(--sc-ink-soft)}
.dock__close{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--sc-hairline);
  background:none;color:var(--sc-ink-soft);cursor:pointer;display:grid;place-items:center}
.dock__close:hover,.dock__close:focus-visible{color:var(--sc-ink);border-color:var(--sc-accent);outline:0}
.dock__presets{display:flex;flex-wrap:wrap;gap:var(--sc-2)}
.dock__presets .chip{padding:.55em 1em}
.dock__status{margin:0;padding:.2em .4em;color:var(--sc-ink-soft);
  font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:.12em;text-transform:uppercase}
.dock__status[hidden]{display:none}
.dock__results{display:grid;gap:6px;margin:0;padding:0;list-style:none;max-height:min(46vh,22rem);overflow:auto}
.dock__results[hidden]{display:none}
.dock.has-goo .dock__results{filter:url(#dock-goo)}
.dock__result{display:flex;align-items:baseline;gap:var(--sc-3);width:100%;text-align:left;
  padding:.7em .9em;border-radius:var(--sc-r-md);border:1px solid transparent;background:var(--sc-surface);
  color:var(--sc-ink);cursor:pointer;text-decoration:none;font-family:var(--sc-font-text);font-size:var(--sc-t-sm);
  animation:dock-in .55s var(--sc-ease-out) both;animation-delay:calc(var(--i,0)*60ms)}
.dock__result:hover,.dock__result:focus-visible{border-color:var(--sc-accent);outline:0}
.dock__result .sym{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:.12em;color:var(--sc-accent);min-width:5ch}
.dock__result .cik{margin-left:auto;font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);color:var(--sc-ink-soft)}
@keyframes dock-in{from{opacity:0;transform:translateY(-6px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){
  .dock{transition:none;transform:none}
  .dock__result{animation:none}
  .dock.is-loading .dock__icon svg{animation:none}
}
@media (max-width:860px){
  .dock__pill{top:70%}
  .dock__panel{bottom:max(4vh,env(safe-area-inset-bottom))}
  /* Low enough that field, list and presets still fit above a software
     keyboard on an 812px screen; the list scrolls for the rest. */
  .dock__results{max-height:min(30vh,14rem)}
  .dock__result .cik{display:none}
}

/* The footer, ported from a React component to plain CSS: its raised top edge,
   the soft glow rising from the centre of that edge, and the blurred hairline
   seam laid across it. Contents are this project's own: every link goes
   somewhere that exists. */
.foot{position:relative;margin-top:var(--sc-9);padding:var(--sc-8) var(--sc-5) var(--sc-7);
  border-top:1px solid var(--sc-hairline);border-radius:var(--sc-r-lg) var(--sc-r-lg) 0 0;
  color:var(--sc-ink-soft);font-size:var(--sc-t-sm);text-align:left;
  background:radial-gradient(35% 128px at 50% 0%,color-mix(in oklab,var(--sc-ink) 8%,transparent),transparent)}
.foot__glow{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.foot__seam{position:absolute;top:0;left:50%;translate:-50% -50%;width:33%;height:1px;
  border-radius:var(--sc-r-pill);background:color-mix(in oklab,var(--sc-ink) 20%,transparent);
  filter:blur(2px);pointer-events:none}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
.foot__brand{display:grid;gap:var(--sc-3);align-content:start}
.foot__mark{color:var(--sc-accent)}
.foot__strap{color:var(--sc-ink-soft)}
.foot__fine{margin:0;max-width:34ch;line-height:1.5}
.foot__col h3{margin:0 0 var(--sc-4);color:var(--sc-ink)}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sc-2)}
.foot__col a,.foot__col button{display:inline-flex;align-items:center;gap:.4em;
  color:var(--sc-ink-soft);font:inherit;text-decoration:none;background:none;border:0;padding:0;
  cursor:pointer;text-align:left;
  transition:color var(--sc-d-base) var(--sc-ease-out)}
.foot__col a:hover,.foot__col button:hover{color:var(--sc-ink)}
.foot__out{opacity:.5;flex:none}
.foot__facts{color:var(--sc-ink-soft)}
.foot__facts li{line-height:1.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr;gap:var(--sc-6)}
  .foot__brand{grid-column:1 / -1}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr}}

/* ── reduced motion: fewer and gentler ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .widget--float,.riverflow,.ticker__track{animation:none}
  .reader--raised{transform:none}
}