/* ==========================================================
   /offers/media-operations-blueprint-v2 (VLP-1228): the page layer only.

   WHAT THIS FILE OWNS
   Everything that is this page and no other: the hero and its lift, the paper
   document sheet that is this page's one bespoke device, the four boundary
   rows, the session act and its stacked lines, the roadmap pair, the start
   form, the closer, this page's own act seams by id, and the no-JS, static and
   reduced-motion restatements for exactly those moves.

   WHAT IT DEPENDS ON
   /folio.css, loaded first: tokens, reset, base type, the section formula,
   buttons, the nav, frames and the window device, the grids, the form fields,
   the FAQ, the footer, the sticky CTA. This file adds to that layer and never
   restates it.

   LOAD ORDER
   critical fallback <style> -> /folio.css -> /blueprint-v2.css ->
   /scrollcraft.css. The engine sheet is last so the page can override its
   tokens; folio.css restates every engine base rule it changes at a higher
   specificity.
   ========================================================== */

/* The one colour this page adds to the system: paper. The deliverable is a
   written document, so the document is rendered as one, in ink on paper,
   inside the same dark frame every other page gives a screenshot. */
:root{
  --paper:#EDE8DE;
  --paper-2:#E3DDD1;
  --paper-ink:#14181E;
  --paper-mute:#4E5866;
  --paper-line:rgba(20,24,30,.13);
}

/* ---------------- hero ----------------
   Ink only, lifted by one very faint radial so the field is not a flat wall. */
.hero{position:relative;min-height:100svh}
/* The act is only a length. Everything the reader sees lives on the stage, which is what the
   engine sticks; when the hero is not pinned (phones, coarse pointers, reduced motion) the same
   block simply flows, because every rule here is on the stage rather than on the act. */
.hero-stage{display:flex;flex-direction:column;background:var(--ink);
  padding:calc(var(--nav-h) + var(--nav-inset) + 34px) 0 0}
.hero-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(244,241,234,.06),transparent 60%)}
.hero-in{position:relative;z-index:1;width:100%;min-width:0;display:flex;flex-direction:column;
  align-items:center;text-align:center}
/* margin-inline:auto on a flex item cancels the cross-axis stretch, so a .wrap inside a stage
   shrinks to its content. The hero figure holds only the sheet and collapsed to nothing
   until this. */
.hero-stage>.stage.wrap,.session-stage>.wrap,.closer-stage>.wrap{width:100%}
/* Line masks reserve descender room. Instrument Serif hangs its g, y and p a long way below the
   baseline, and the engine's default 0.14em shears them at this line-height. */
.hero h1 .sc-split--line{padding-bottom:.26em;margin-bottom:-.26em}
.hero h1{margin-top:22px}
.hero-lead{margin-top:20px;max-width:52ch;font-size:clamp(16px,1.4vw,18.5px)}
.hero-cta{margin-top:28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.hero-note{margin-top:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);line-height:1.9;max-width:66ch}

/* ---------------- the document sheet ----------------
   This page's one bespoke device, and the reason it is markup rather than a
   picture: the deliverable is a written document, so it is set as one, it
   reflows at every width, and it says on its own face that it is an example.
   It appears three times: the hero's specimen, the readable one at #roadmap,
   and the short one in the close. */
/* The frame is generous enough that the sheet's natural height never exceeds it at any desktop
   width, and the rows share whatever height is spare, so the specimen always reads as a full
   page rather than as a table with a band of empty paper under it. 16/11.5 is the ratio the
   pinned hero is sized against as well; the two have to agree or the arrived sheet overruns the
   held stage. */
.frame-doc{background:var(--paper);aspect-ratio:16/11.5;--head-h:44px}
.frame-doc::before{background:linear-gradient(90deg,transparent,rgba(20,24,30,.16) 22%,rgba(20,24,30,.16) 62%,transparent)}
/* The sheet is the window's content, and it starts at the frame's own top so an authored crop of
   0 is the crop the reader sees first. The head sits over it rather than inside it, because the
   stamp that says this is an example has to stay on the sheet's face while the rows travel under
   it: a panning header would take the label off the page. */
.doc{position:absolute;left:0;right:0;top:0;min-height:100%;padding-top:var(--head-h);
  display:flex;flex-direction:column;
  background:var(--paper);color:var(--paper-ink);
  transform:translate3d(0,var(--w-y,0px),0)}
.doc-head{position:absolute;left:0;right:0;top:0;z-index:2;min-height:var(--head-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 22px;background:var(--paper-2);border-bottom:1px solid var(--paper-line);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.doc-file{color:var(--paper-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The label the brief requires on the specimen's own face, not in a caption under it. */
.doc-stamp{flex:none;color:var(--paper-ink);border:1px solid var(--paper-line);border-radius:99px;
  padding:5px 11px;background:rgba(20,24,30,.045)}
.doc-body{padding:26px 26px 24px;flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.doc-title{font-family:var(--serif);font-size:clamp(21px,2vw,27px);line-height:1.1;letter-spacing:-.01em}
.doc-sec{margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--paper-mute)}
.doc-rows{margin-top:20px;border-top:1px solid var(--paper-line);flex:1 1 auto;
  display:flex;flex-direction:column}
.doc-rows li{flex:1 1 auto;display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:18px;
  align-items:baseline;align-content:center;
  padding:13px 0;border-bottom:1px solid var(--paper-line)}
.doc-rows .dk{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--paper-ink)}
.doc-rows p{font-size:14px;line-height:1.5;color:var(--paper-mute);text-wrap:pretty}
.doc-rows code{font-family:var(--mono);font-size:12.5px;background:rgba(20,24,30,.06);
  border-radius:4px;padding:1px 5px}
/* The evidence label is the deliverable's whole discipline, so it is set as a stamp rather than
   as another line of prose. Three tones of the same ink; no accent colour, because Signal Blue
   is links and focus on this page and Archive Amber is the price. */
.ev{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper-ink);border:1px solid var(--paper-line);
  border-radius:4px;padding:4px 7px;white-space:nowrap;background:rgba(20,24,30,.06)}
.ev-s{color:var(--paper-mute);background:transparent}
.ev-i{color:var(--paper-mute);background:transparent;border-style:dashed}
.doc-foot{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-mute);line-height:1.8}

/* This is the only folio page that slides a light surface under the nav: the shared pill is
   translucent ink, which reads as mid grey over paper and takes the muted link colour with it.
   One page rule, on the pill's ground only, so the nav is the same object it is everywhere and
   simply keeps its contrast when a document passes behind it. */
.nav-pill{background:rgba(11,15,20,.9)}

/* ---------------- this page's seams ----------------
   By id, so the value survives the hero and the close being demoted to flow on a phone or under
   reduced motion. #stages is the caption the sheet earns as it slides off the top; #roadmap has
   to arrive before the emptied session stage has finished leaving. */
#stages{padding-top:calc(var(--sec-pad) * .5)}
#roadmap{padding-top:calc(var(--sec-pad) * .5)}
/* And the last thing before the close has to hand over to it, not to half a screen of ground. */
#start{padding-bottom:calc(var(--sec-pad) * .62)}

/* ---------------- 02 the session's shape ---------------- */
/* One crop of the product, chosen so the claim above it is the thing you can actually see: the
   result rows with their transcript matches, not the whole application at thumbnail size. */
.shot-find{aspect-ratio:4/3;--zoom:278%;--sx:-83%;--sy:-28%;--w-from:0px;--w-to:-52px}
/* The <picture> is a box the crop does not want: the img inside it is absolutely positioned
   against .shot, and display:contents keeps the wrapper from interfering at any breakpoint. */
.shot-find picture{display:contents}
.cap-wide{margin-top:22px}
#stages .card-plain .rules{margin-top:26px}

/* ---------------- 03 what you get ---------------- */
#what .card-plain{padding-bottom:28px}
#what .card h3{margin-top:14px}
#what .card>p{margin-top:10px}
.fit-link{margin-top:22px;text-align:center}

/* ---------------- 04 the session: the peak ---------------- */
.session-stage{display:flex;flex-direction:column;justify-content:center;background:var(--ink);
  padding:calc(var(--nav-h) + var(--nav-inset) + 26px) 0 46px}
.session-stage .act-mark{margin-bottom:20px}
.session-stage .head .display{font-size:clamp(30px,3.6vw,50px)}
.lines{margin-top:52px;max-width:900px;margin-left:auto;margin-right:auto}
.line{font-size:clamp(21px,2.5vw,34px);line-height:1.18;letter-spacing:-.025em;font-weight:500;
  color:var(--text);text-align:center;text-wrap:balance;padding:24px 0;
  border-top:1px solid var(--line)}
.line:first-child{border-top:0;padding-top:0}
.session-stage .lines{margin-top:34px}
.session-stage .inline-cta{margin-top:32px}
/* Stacked in one box, not down a column: five lines crossing over in the same place is the beat,
   where five rows lit one at a time marches the eye down the screen and leaves a hole above
   whichever one is lit. The hairline column is the static layout, and it comes back whenever the
   stage is not actually pinned (no script, ?static=1, a capture tool). */
.session-stage.sc-stage .lines{position:relative;min-height:clamp(128px,21vh,196px)}
/* Centred with the `translate` property, not with flex and not with `transform`. Flex turns each
   run of text either side of an inline element into its own anonymous item and the sentence comes
   apart; transform is what the engine writes on a cue element. */
.session-stage.sc-stage .line{position:absolute;left:0;right:0;top:50%;translate:0 -50%;
  margin:0;padding:0;border-top:0}

/* ---------------- 05 the roadmap and the guarantee ---------------- */
/* The copy is shorter than the sheet by design, so it is centred against it rather than hung
   from the top with a column of nothing under it. */
.roadmap-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;
  align-items:center;margin-top:56px}
/* The sheet is taller than its window here on purpose: this is the one place it travels far
   enough to read as a document being scanned rather than as a picture of one, so this is the
   window that authors a real second crop. The two specimens do not: the hero's motion is its
   lift, and the close holds still, so both author 0 to 0 and fill their frame instead. */
.frame-doc-tall{aspect-ratio:4/3.4}
.frame-doc-tall .doc{--w-from:0px;--w-to:-150px}
#top .frame-doc .doc,.frame-doc-short .doc{--w-from:0px;--w-to:0px}
.roadmap-copy{padding-top:6px}
.roadmap-copy .lead{max-width:46ch}
.roadmap-copy .rules{margin-top:30px}
.roadmap-stage .cap{text-align:left}

/* ---------------- 06 who it is for ---------------- */
.bounds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:52px;
  border-top:1px solid var(--line)}
.bounds li{padding-top:24px;min-width:0}
.bounds .rk{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);line-height:1.4;display:block}
.bounds p{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.55;text-wrap:pretty}

/* ---------------- 08 start ----------------
   The one ask on the page. Two halves: the terms as they are written in the order, and the
   three fields that open the intake. */
.start-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;margin-top:56px;
  align-items:start}
.start-terms{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px}
.start-price{display:flex;align-items:baseline;gap:14px}
.start-price .price{font-family:var(--serif);font-size:clamp(40px,4.6vw,58px);line-height:1;
  font-weight:400;letter-spacing:-.01em}
.start-terms .rules{margin-top:24px}
.start-form{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;
  display:flex;flex-direction:column}
.start-form h3{margin-top:12px}
.start-form .field{margin-top:18px}
.start-form .start-submit{margin-top:22px;width:100%;justify-content:center;min-height:48px}
.start-form .fine{margin-top:14px}
/* One live region for both states. The shared .err is the failure tone; a neutral progress line
   uses the same box in the page's own quiet grey, so a reader is never told in red that their
   intake is opening. */
.start-form .err{margin-top:18px}
.start-form .err.is-info{color:var(--muted)}
.consent{margin-top:20px;display:flex;gap:12px;align-items:flex-start;color:var(--muted);
  font-size:13px;line-height:1.55;cursor:pointer}
/* The box is a native control at its own size, so the whole label row is the target. */
@media(pointer:coarse),(max-width:760px){.consent{min-height:44px}.consent input{width:20px;height:20px}}
.consent input{flex:none;margin-top:2px;width:17px;height:17px;accent-color:var(--blue)}
.consent a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
/* The offer is served by the registry, so an unsellable offer has to say so where the ask is,
   and the submit has to stop being an invitation. */
.start-form.is-unavailable .start-submit{opacity:.5;pointer-events:none}

/* ---------------- 09 closer ---------------- */
/* clip, not hidden: an overflow:hidden ancestor turns into the scrollport a sticky stage
   measures itself against, and the pin stops engaging. */
.sec-closer{border-top:1px solid var(--line);padding-bottom:0;overflow:clip}
.closer-in{max-width:820px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.closer-in .display{margin-top:22px}
.closer-in .lead{margin-top:20px;text-align:center;margin-left:auto;margin-right:auto}
.closer-in .inline-cta{margin-top:32px}
.stage-closer{position:relative;max-width:900px;margin:64px auto 0;perspective:1500px}
.frame-doc-short{aspect-ratio:16/7.4}
/* The window's bottom edge is the page's edge: the footer's own hairline sits on it. A gradient
   that is still translucent when it gets there cuts the console through whatever row happens to be
   under it, and a screenshot cut mid-row reads as a rendering fault rather than as a crop. So the
   fade reaches solid ground well before the edge and holds it: whatever the console is showing,
   the cut lands on ink. */
/* The document is cream, so the fade leaves the paper before it reaches the ink: a straight
   ink gradient over a light surface reads as a grey smear rather than as a dissolve. */
.stage-closer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;z-index:3;
  pointer-events:none;background:linear-gradient(180deg,transparent,rgba(20,24,30,.16) 26%,
    rgba(11,15,20,.72) 56%,var(--ink) 82%,var(--ink))}

/* ---------------- motion ---------------- */
/* --- the lift ---
   Two nested transforms on purpose. The lean follows the pointer and needs a transition or it
   tracks the mouse with no weight; the lift is written from --sc-p every frame, and a transition
   on it would make the sheet lag the hand. One element cannot carry both. */
.hero-lean{transform-style:preserve-3d;
  transform:rotateX(calc((var(--sc-my,.5) - .5) * -2.4deg)) rotateY(calc((var(--sc-mx,.5) - .5) * 2.6deg));
  transition:transform 620ms var(--ease-out)}
.closer-lift{
  /* --sc-p defaults to 1 so the plane is already level before the engine writes anything, and
     stays level for a browser that never runs the script. */
  --l:clamp(0,calc(var(--sc-p,1) / .6),1);
  transform-origin:50% 100%;
  transform:rotateX(calc((1 - var(--l)) * 9deg))
            scale(calc(.96 + .04 * var(--l)))
            translate3d(0,calc((1 - var(--l)) * 40px),0)}
/* The hero's sheet does not merely level, it travels: it starts where the first screen shows it,
   a tilted plane whose top edge is most of a screen down, and arrives level and full with its top
   24px under the nav pill. --doc-rise is that distance, measured off the real layout by
   blueprint-v2.js rather than hardcoded at one viewport. Two ramps, not one: the plane
   straightens by p = 0.72 and finishes arriving by p = 0.85, so it reads as a document standing
   up as it comes rather than as one flat rectangle sliding, and the last 15% is a hold. */
.hero-lift{
  --l:clamp(0,calc(var(--sc-p,1) / .72),1);
  --u:clamp(0,calc(var(--sc-p,1) / .85),1);
  transform-origin:50% 100%;
  transform:rotateX(calc((1 - var(--l)) * 9deg))
            scale(calc(.96 + .04 * var(--u)))
            translate3d(0,calc((1 - var(--u)) * 40px - var(--u) * var(--doc-rise,0px)),0)}
/* The copy greets, then gets out of the sheet's way: it drifts up while its cues ramp out, so the
   two moves are one gesture rather than a fade over a rise. The drift lives on the block, which
   no cue owns; a cue writes transform on its own element, and stacking a second transform there
   would silently discard one of them. */
.hero-in{transform:translate3d(0,calc(clamp(0,calc(var(--sc-p,0) / .5),1) * -90px),0)}

/* Inside the pin the sheet is the act's destination, so it is sized to fill the held stage once
   it arrives: as wide as the page's own column, and capped by the viewport's height so a short
   screen never ends the travel with the frame running off the bottom. 130px is the nav pill, its
   inset, the 24px gap under it and a breath at the foot; 1.391 is the frame's 16/11.5. */
.hero-stage.sc-stage>.stage.wrap{
  max-width:min(1240px,calc((100svh - 130px) * 1.391 + 64px));
  padding-top:38px;margin-top:0}

/* If the script never runs, or a capture tool asks for the static page, nothing may stay
   invisible and nothing may sit mid-animation. folio.css covers the cues, reveals and staggers;
   these are this page's own moves. */
html.no-js .hero-lean,html.hv-static .hero-lean,
html.no-js .hero-lift,html.hv-static .hero-lift,
html.no-js .hero-in,html.hv-static .hero-in,
html.no-js .closer-lift,html.hv-static .closer-lift{transform:none;transition:none}
html.no-js .doc,html.hv-static .doc{transform:none}

/* ---------------- reduced motion ----------------
   Fewer and gentler, not zero: the engine keeps the opacity that carries comprehension and drops
   every position change. These are this page's own position changes, and the sheet stays on its
   first authored crop. */
@media(prefers-reduced-motion:reduce){
  .hero-lean,.hero-lift,.hero-in,.closer-lift{transform:none;transition:none}
  .doc{transform:none}
  /* The hero and the close are demoted to flow under reduce, so the pinned-only sheet size never
     applies and the frame is the ordinary column width. Restated rather than inherited, because
     .sc-stage is what carries that rule and a flow act never gets the class. */
  .hero-stage>.stage.wrap{max-width:none}
  .hero h1 .sc-split__i{animation:none}
}

/* ---------------- the landing ----------------
   A greet cue is already at full opacity when the act begins, so the engine has nothing to
   animate on the one screen every visitor sees. One CSS animation, played once, gives the hero
   its arrival; animation-fill-mode is backwards only, so the engine's inline values take over the
   instant it ends and scroll owns the element from then on. */
@keyframes bp-rise{from{opacity:0;transform:translate3d(0,112%,0)}}
@keyframes bp-greet{from{opacity:0;transform:translate3d(0,14px,0)}}
@media(prefers-reduced-motion:no-preference){
  .hero h1 .sc-split__i{animation:bp-rise 980ms var(--ease-out) backwards}
  .hero h1 .sc-split--line:nth-child(2) .sc-split__i{animation-delay:100ms}
  .hero h1 .sc-split--line:nth-child(3) .sc-split__i{animation-delay:200ms}
  .hero-in>[data-sc-cue]{animation:bp-greet 720ms var(--ease-out) backwards}
  .hero-in>h1[data-sc-cue]{animation:none}
  .hero-in>.eyebrow{animation-delay:40ms}
  .hero-in>.hero-lead{animation-delay:420ms}
  .hero-in>.hero-cta{animation-delay:530ms}
  .hero-in>.hero-note{animation-delay:630ms}
}
html.no-js .hero-in>[data-sc-cue],html.hv-static .hero-in>[data-sc-cue],
html.no-js .hero h1 .sc-split__i,html.hv-static .hero h1 .sc-split__i{animation:none}


/* ---------------- the published sample ----------------
   The whole eight-section sample Blueprint, set on the same paper the roadmap specimen uses. It
   is a document rather than a card, so it reads top to bottom on one sheet with a rail of jumps
   at its head, and every class here is namespaced sm- so nothing it brings collides with the
   page's own sheet machinery. Ink, mute, line and stamp all come from the paper tokens above;
   the only accents are the three evidence tones the deliverable itself uses. */
.sec-sample .sample-sheet{margin-top:44px;border:1px solid var(--line-2);border-radius:16px;
  overflow:hidden;background:var(--paper);color:var(--paper-ink);box-shadow:var(--shadow)}
.sample-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 22px;background:var(--paper-2);border-bottom:1px solid var(--paper-line);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.sample-rail{display:flex;flex-wrap:wrap;gap:6px;padding:16px 22px;
  border-bottom:1px solid var(--paper-line);background:rgba(20,24,30,.03)}
.sample-rail a{display:inline-flex;align-items:baseline;gap:8px;padding:8px 12px;border-radius:8px;
  border:1px solid var(--paper-line);color:var(--paper-ink);font-size:13px;line-height:1.2;
  transition:background .18s,border-color .18s}
.sample-rail a span{font-family:var(--mono);font-size:9.5px;color:var(--paper-mute)}
.sample-rail a:hover{background:rgba(20,24,30,.06);border-color:rgba(20,24,30,.28)}
.sample-rail a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sample-body{padding:8px 30px 34px}

.sm-page{padding:30px 0 8px;scroll-margin-top:calc(var(--nav-h) + var(--nav-inset) + 24px)}
.sm-page+.sm-page{border-top:1px solid var(--paper-line)}
.sm-page-head{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--paper-line)}
.sm-page-head .num{color:var(--paper-mute)}
.sm-page-head h3{margin-top:12px;font-family:var(--serif);font-size:clamp(21px,2.2vw,28px);
  line-height:1.08;letter-spacing:-.01em}
.sm-page-q{margin-top:13px;max-width:74ch;color:var(--paper-mute);font-size:14.5px;line-height:1.6}
.sm-page-q b{color:var(--paper-ink);font-weight:500}
.sm-page>p{max-width:78ch;margin-top:15px;color:var(--paper-mute);font-size:14.5px;line-height:1.7}
.sm-page>p b{color:var(--paper-ink);font-weight:500}
.sm-page em{font-style:italic}
.sm-page h4{font-size:16.5px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--paper-ink)}
.sm-page-foot{max-width:82ch;margin-top:26px;padding-top:18px;border-top:1px solid var(--paper-line);
  color:var(--paper-mute);font:11.5px/1.75 var(--mono)}
.sm-page-foot b{color:var(--paper-ink)}
.sm-sub{margin-top:30px;padding-top:20px;border-top:1px solid var(--paper-line);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mute)}
.sm-callout{margin-top:24px;padding:20px 22px;border:1px solid rgba(20,24,30,.2);border-radius:12px;
  background:rgba(20,24,30,.045)}
.sm-callout .num{color:var(--paper-ink)}
.sm-callout p{margin-top:10px;max-width:78ch;color:var(--paper-mute);font-size:14px;line-height:1.7}
.sm-legend{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.sm-legend li{padding:11px 13px;border:1px solid var(--paper-line);border-radius:8px;
  color:var(--paper-mute);font:10px/1.5 var(--mono)}
.sm-legend b{display:block;margin-bottom:5px;color:var(--paper-ink);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase}

.sm-table-scroll{margin-top:22px;overflow-x:auto;border:1px solid var(--paper-line);border-radius:11px}
.sm-table{width:100%;min-width:760px;border-collapse:collapse;font-size:13px}
.sm-table th{padding:12px 15px;text-align:left;border-bottom:1px solid rgba(20,24,30,.2);
  background:rgba(20,24,30,.05);color:var(--paper-mute);font:9.5px var(--mono);font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.sm-table td{padding:14px 15px;border-bottom:1px solid var(--paper-line);color:var(--paper-mute);
  line-height:1.6;vertical-align:top}
.sm-table tr:last-child td{border-bottom:0}
.sm-table td b{color:var(--paper-ink);font-weight:500;white-space:nowrap}
.sm-table code{font:11.5px var(--mono);color:var(--paper-ink);background:rgba(20,24,30,.06);
  border-radius:4px;padding:1px 5px}
.sm-record td:first-child{width:220px;white-space:normal}
.sm-record td:first-child b{white-space:normal;color:var(--paper-mute);font:9.5px var(--mono);
  font-weight:400;letter-spacing:.12em;text-transform:uppercase}
.sm-sub+.sm-table-scroll{margin-top:14px}

.sm-findings{list-style:none;margin-top:24px;display:grid;gap:12px}
.sm-findings li{display:grid;grid-template-columns:82px minmax(0,1fr);gap:20px;padding:22px;
  border:1px solid var(--paper-line);border-radius:12px;background:rgba(20,24,30,.03)}
.sm-findings li:first-child{border-color:rgba(20,24,30,.32);background:rgba(20,24,30,.06)}
.sm-find-rank span{display:block;font:22px var(--mono);letter-spacing:-.02em;color:var(--paper-ink)}
.sm-find-rank .ev{margin-top:10px}
.sm-find-body p{margin-top:10px;max-width:74ch;color:var(--paper-mute);font-size:14px;line-height:1.65}
.sm-find-body dl{display:grid;margin-top:16px;border-top:1px solid var(--paper-line)}
.sm-find-body dl>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;padding:10px 0;
  border-bottom:1px solid var(--paper-line)}
.sm-find-body dt{color:var(--paper-mute);font:9.5px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;padding-top:3px}
.sm-find-body dd{color:var(--paper-mute);font-size:13.5px;line-height:1.6}

.sm-layers{display:grid;gap:12px;margin-top:22px}
.sm-layer{padding:22px 24px;border:1px solid var(--paper-line);border-radius:12px;
  background:rgba(20,24,30,.03)}
.sm-layer-h{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-bottom:15px;
  border-bottom:1px solid var(--paper-line)}
.sm-layer-h h4{flex:1;min-width:0}
.sm-layer-h .num{flex:none;color:var(--paper-mute)}
.sm-layer p{max-width:78ch;margin-top:13px;color:var(--paper-mute);font-size:14px;line-height:1.7}
.sm-layer-note{margin-top:15px;padding-top:13px;border-top:1px solid var(--paper-line);
  color:var(--paper-mute);font:11.5px/1.7 var(--mono)}
.sm-layer-note b{color:var(--paper-ink)}
.sm-tight{list-style:none;display:grid;gap:10px;margin-top:14px}
.sm-tight li{position:relative;padding-left:16px;max-width:78ch;color:var(--paper-mute);
  font-size:14px;line-height:1.65}
.sm-tight li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:rgba(20,24,30,.3)}
.sm-tight b{color:var(--paper-ink);font-weight:500}
.sm-unknowns{margin-top:14px}
.sm-diagram{margin-top:22px;padding:22px 24px;overflow-x:auto;border:1px solid var(--paper-line);
  border-radius:12px;background:rgba(20,24,30,.04);color:var(--paper-mute);font:12px/2 var(--mono);
  white-space:pre}

.sm-dec,.sm-mat,.sm-sc{display:inline-block;padding:4px 9px;border-radius:5px;
  border:1px solid var(--paper-line);font:9px var(--mono);font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;color:var(--paper-ink)}
.sm-dec-keep,.sm-mat-prod{background:rgba(20,24,30,.08)}
.sm-dec-change,.sm-sc-1{background:rgba(20,24,30,.14);border-color:rgba(20,24,30,.3)}
.sm-dec-pilot,.sm-mat-beta,.sm-sc-3{border-style:dashed}
.sm-dec-defer,.sm-mat-off,.sm-sc-no,.sm-mat-exp,.sm-sc-2{color:var(--paper-mute)}
.sm-dectable td:first-child{width:104px}
.sm-road-table{min-width:820px}
/* Without these the Action column collapses to one word a line: the horizon cell is fixed, so the
   rest of the row has to be told where it may spend its width. */
.sm-road-table th:nth-child(2){width:196px}
.sm-road-table th:nth-child(3){width:98px}
.sm-road-table th:nth-child(4){width:172px}
.sm-road-table td:first-child{width:104px;border-right:1px solid var(--paper-line);vertical-align:top}
.sm-road-table td:first-child b{display:block;font-size:14px}
.sm-road-table td:first-child small{display:block;margin-top:5px;color:var(--paper-mute);font:9.5px var(--mono)}
.sm-road-table tr.sm-is-now td{background:rgba(20,24,30,.05)}
.sm-modules{min-width:840px}
.sm-modules th:nth-child(1){width:104px}
.sm-modules th:nth-child(3){width:132px}
.sm-modules th:nth-child(4){width:118px}
.sm-modules td em{color:var(--paper-ink);font-style:normal}
.sm-modules-note{max-width:80ch;margin-top:16px;padding:15px 17px;border:1px solid var(--paper-line);
  border-radius:10px;background:rgba(20,24,30,.04);color:var(--paper-mute);font:11.5px/1.75 var(--mono)}
.sm-modules-note b{color:var(--paper-ink)}

.sm-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.sm-phase{padding:20px 18px;border:1px solid var(--paper-line);border-radius:12px;
  background:rgba(20,24,30,.03)}
.sm-phase.sm-is-on{border-color:rgba(20,24,30,.3);background:rgba(20,24,30,.07)}
.sm-phase.sm-is-dim{opacity:.72}
.sm-phase-h{display:flex;flex-direction:column;gap:8px;padding-bottom:13px;
  border-bottom:1px solid var(--paper-line)}
.sm-phase-h .num{color:var(--paper-mute)}
.sm-phase-h b{font-size:15px;font-weight:500}
.sm-phase p{margin-top:13px;color:var(--paper-mute);font-size:13px;line-height:1.65}
.sm-phase-f{padding-top:12px;border-top:1px solid var(--paper-line);color:var(--paper-mute);
  font:10.5px/1.65 var(--mono)}
.sm-phase-mods{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.sm-phase-mods i{padding:5px 10px;border:1px solid var(--paper-line);border-radius:6px;
  color:var(--paper-ink);font:10px var(--mono);font-style:normal;letter-spacing:.04em}

.sm-options{list-style:none;display:grid;gap:12px;margin-top:22px}
.sm-options li{padding:22px 24px;border:1px solid var(--paper-line);border-radius:12px;
  background:rgba(20,24,30,.03)}
.sm-options li.sm-is-rec{border-color:rgba(20,24,30,.32);background:rgba(20,24,30,.07)}
.sm-opt-h{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.sm-opt-h h4{flex:1;min-width:0}
.sm-opt-h .num{flex:none;color:var(--paper-mute)}
.sm-rec{flex:none;padding:4px 10px;border-radius:5px;background:var(--paper-ink);color:var(--paper);
  font:9px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase}
.sm-options p{max-width:78ch;margin-top:12px;color:var(--paper-mute);font-size:14px;line-height:1.7}
.sm-opt-v{padding-top:12px;border-top:1px solid var(--paper-line)}
.sm-opt-v b{color:var(--paper-ink);font-weight:500}
.sm-nonclaims{margin-top:26px;padding:20px 22px;border:1px solid var(--paper-line);border-radius:12px;
  background:rgba(20,24,30,.04)}
.sm-nonclaims .num{color:var(--paper-mute)}
.sm-nonclaims ul{list-style:none;margin-top:12px;display:grid;gap:10px}
.sm-nonclaims li{position:relative;padding-left:16px;max-width:80ch;color:var(--paper-mute);
  font:11.5px/1.7 var(--mono)}
.sm-nonclaims li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;
  background:rgba(20,24,30,.4)}

/* The architecture diagram is wide by nature: it scrolls inside its own container rather than
   shrinking its own type below readable size. Ink on paper, no accent. */
.sm-svg-scroll{margin-top:20px;overflow-x:auto;border:1px solid var(--paper-line);border-radius:12px;
  background:rgba(20,24,30,.03)}
.sm-arch-svg{display:block;min-width:840px;width:100%;height:auto;padding:18px 14px}
.sm-nx-band{fill:rgba(20,24,30,.04);stroke:rgba(20,24,30,.18)}
.sm-nx-band-on{fill:rgba(20,24,30,.09);stroke:rgba(20,24,30,.4)}
.sm-nx-band-l{fill:var(--paper-ink);font:500 12px var(--mono);letter-spacing:.1em}
.sm-nx-band-s{fill:var(--paper-mute);font:9.5px var(--mono);letter-spacing:.04em}
.sm-nx-chip{fill:var(--paper);stroke:rgba(20,24,30,.2)}
.sm-nx-chip-t{fill:var(--paper-mute);font:11px var(--sans);text-anchor:middle}
.sm-nx-shared{fill:rgba(20,24,30,.07);stroke:rgba(20,24,30,.28)}
.sm-nx-shared-t{fill:var(--paper-ink);font:10px var(--mono);letter-spacing:.03em}
.sm-nx-note{fill:var(--paper-mute);font:9.5px var(--mono);letter-spacing:.06em}
.sm-nx-edge{fill:var(--paper-mute);font:9.5px var(--mono)}
.sm-nx-flow{stroke:rgba(20,24,30,.35);stroke-width:1.5}
.sm-nx-arrowhead{fill:rgba(20,24,30,.55)}
.sm-nx-mod rect{fill:rgba(20,24,30,.03);stroke:rgba(20,24,30,.18)}
.sm-nx-mod-n{fill:var(--paper-ink);font:500 14px var(--sans);text-anchor:middle}
.sm-nx-mod-r{fill:var(--paper-mute);font:10px var(--sans);text-anchor:middle}
.sm-nx-mod-p{fill:var(--paper-mute);font:8px var(--mono);letter-spacing:.1em;text-anchor:middle}
.sm-nx-mod.sm-is-on rect{fill:rgba(20,24,30,.12);stroke:rgba(20,24,30,.45)}
.sm-nx-mod.sm-is-on .sm-nx-mod-p{fill:var(--paper-ink)}
.sm-nx-mod.sm-is-next rect{stroke:rgba(20,24,30,.3)}
.sm-nx-mod.sm-is-off{opacity:.5}
.sm-nx-legend text{fill:var(--paper-mute);font:10px var(--mono);dominant-baseline:middle}
.sm-nx-key{stroke:rgba(20,24,30,.3)}
.sm-nx-key-on{fill:rgba(20,24,30,.45)}
.sm-nx-key-next{fill:rgba(20,24,30,.16)}
.sm-nx-key-off{fill:rgba(20,24,30,.05)}

/* ---------------- responsive ---------------- */
@media(max-width:1120px){
  .roadmap-grid{gap:32px}
  .start-grid{gap:24px}
}
@media(max-width:900px){
  /* The hero and the close are flow here, so their progress is not a pin's progress and the lift
     would arrive half resolved. The sheet still pans. */
  .hero-lean,.hero-lift,.hero-in,.closer-lift{transform:none}
  .sm-legend,.sm-phases{grid-template-columns:1fr}
  .sm-findings li{grid-template-columns:1fr;gap:14px}
  .sm-find-rank{display:flex;align-items:center;gap:12px}
  .sm-find-rank .ev{margin-top:0}
  .roadmap-grid,.start-grid{grid-template-columns:1fr;gap:32px}
  .bounds{grid-template-columns:1fr;gap:0;border-top:0}
  .bounds li{padding:22px 0;border-top:1px solid var(--line)}
  /* One column means a narrow sheet, and a narrow sheet is taller than any frame worth giving
     it. So the frame stops being a window and grows to the document: the head sits above the
     rows in flow, nothing is cut, and no window is left declared and unused. */
  .frame-doc,.frame-doc-tall,.frame-doc-short{aspect-ratio:auto}
  .doc{position:relative;padding-top:0;min-height:0;display:block}
  .doc-head{position:relative}
  .doc-body{display:block}
  .doc-rows{display:block}
}
@media(max-width:760px){
  .hero-stage{padding-top:calc(var(--nav-h) + var(--nav-inset) + 34px)}
  /* The sample sheet keeps its own edge on a phone; only the tables scroll, which they already
     do inside .sm-table-scroll, so nothing here pushes the page sideways. */
  .sample-body{padding:6px 16px 26px}
  .sample-head{padding:11px 16px;font-size:9px}
  .sample-rail{padding:14px 16px;gap:5px}
  .sample-rail a{font-size:12.5px;padding:9px 11px;min-height:44px;align-items:center}
  .sm-page{padding-top:24px}
  .sm-findings li,.sm-layer,.sm-options li,.sm-callout,.sm-nonclaims{padding:18px 16px}
  .sm-find-body dl>div{grid-template-columns:1fr;gap:4px}
  .hero h1{margin-top:18px}
  .hero-lead{margin-top:16px}
  .hero-cta{margin-top:24px;gap:16px;flex-direction:column;width:100%}
  .hero-cta .btn{width:100%;justify-content:center;min-height:48px}
  .hero-note{margin-top:18px;font-size:9.5px;letter-spacing:.1em}
  /* On a phone a seven row table at 335px is a smudge: each row stacks its label, its finding
     and its evidence stamp instead. The frame already grew to the document at 900px. */
  .doc-head{padding:11px 16px;font-size:9px}
  .doc-body{padding:20px 16px 18px}
  .doc-rows li{grid-template-columns:minmax(0,1fr);gap:7px;padding:12px 0}
  .doc-rows .ev{justify-self:start}
  /* The hero's sheet is a specimen, not the subject: three rows say what it is, and the whole
     document is a screen away at #roadmap. */
  #top .doc-rows li:nth-child(n+4),#top .doc-foot{display:none}
  .lines{margin-top:34px}
  .line{padding:16px 0;max-width:none;font-size:clamp(20px,5.2vw,26px)}
  .session-stage{padding:calc(var(--nav-h) + var(--nav-inset) + 16px) 0 30px}
  .session-stage .lines{margin-top:26px}
  .session-stage .line{padding:13px 0}
  .roadmap-grid,.start-grid,.bounds{margin-top:38px}
  .start-terms,.start-form{padding:22px;border-radius:16px}
  .stage-closer{margin-top:36px}
  .shot-find{--zoom:250%;--sx:-72%;--sy:-24%;--w-to:-40px}
}



/* --- the seam when nothing is pinned ---
   A pinned section takes padding:0 and its stage carries a top pad whose only job is to clear the
   fixed nav pill while the stage is stuck under it. With nothing stuck that is not a seam, it is
   a leftover, and it put 184px of ground between the section above and the act's first line.
   In the static state the stage takes the page's own section rhythm instead. */
html.hv-static .session-stage{padding:var(--sec-pad) 0}

/* --- the hero when nothing is pinned ---
   100svh is the pinned stage's own height: the act holds a whole screen and the copy sits in the
   middle of it. Take the pin away, which ?static=1, reduced motion, a coarse pointer and any
   width under 900px all do, and that same screen becomes a fixed measure the copy no longer
   fills, so the fold opened on a band of ground and closed on another one before the next
   section. Unpinned, the hero is as tall as the hero. .sc-act--pinned and .sc-stage are the two
   classes the engine adds to a pinned act and its stage, so this is exactly "not pinned". */
.hero:not(.sc-act--pinned){min-height:0}
.hero-stage:not(.sc-stage){min-height:0}

/* ---------------- type floors on a phone ----------------
   Body copy to 15.5px, mono captions to 11px, the fine print that carries the terms to 12px.
   folio.css sets the shared floors; these are the sizes this page authors itself. */
@media(max-width:760px){
  .hero-note{font-size:11px;letter-spacing:.08em}
  .bounds p{font-size:15.5px}
  .consent,.consent span{font-size:15.5px}
}