/* ==========================================================
   /drive-inspector-v2 (VLP-1227) : the Drive Inspector page layer only.

   WHAT THIS FILE OWNS
   Everything that is this page and no other: the hero and the console's lift
   and lean, the product mocks ported out of /drive-inspector and restated in
   folio tokens (the scan readout, the duplicate group, the Finder window, the
   report document, the codesign terminal), the pinned scan stage and its four
   stacked pass captions, the download gate, the closer, 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 footer, the
   sticky CTA, the fields and the honeypot rule. This file adds to that layer
   and never restates it.

   WHAT THE SHARED LAYER DOES NOT HAVE
   The product mocks. folio.css has frames for screenshots, and Drive Inspector
   has no screenshots (VLP-815), so the proof on this page is real markup and
   every selector for it lives here: .app, .grp, .dupe, .finder, .doc, .term
   and the gate. If a second page ever needs them, they move to the shared
   layer whole rather than being copied.

   LOAD ORDER
   critical fallback <style> -> /folio.css -> /drive-inspector-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.
   ========================================================== */

/* ---------------- hero ---------------- */
.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 the same block simply flows. */
.hero-stage{display:flex;flex-direction:column;background:var(--ink);
  padding:calc(var(--nav-h) + var(--nav-inset) + 30px) 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. */
.hero-stage>.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:20px;max-width:17ch}
.hero-lead{margin-top:18px;max-width:56ch;font-size:clamp(15.5px,1.25vw,17px)}
/* The boundary, said once, in the system's caption voice rather than as a claim in a box. */
.tagline{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
.hero-cta{margin-top:26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}

/* ---------------- this page's seams ----------------
   Stated by id so the value survives the hero and the close being demoted to flow. #what is the
   caption the console earns as it slides off the top; #closer has to arrive before the emptied
   scan stage has finished leaving. */
#what{padding-top:calc(var(--sec-pad) * .5)}
#download{padding-bottom:calc(var(--sec-pad) * .62)}

/* ---------------- the product mocks ----------------
   Ported from /drive-inspector and restated in folio tokens. The control's own sheet is never
   touched and never loaded here. */

/* the app frame: folio's .frame carries the border, radius and shadow, so the window itself is
   plain inside it. */
.frame-app{background:linear-gradient(180deg,#161C24,#0E131A)}
.app{position:relative;overflow:hidden}
.app-bar{position:relative;display:flex;align-items:center;padding:12px 15px;
  border-bottom:1px solid var(--line);background:rgba(244,241,234,.02)}
.app-dots{display:flex;gap:7px}
.app-dots i{width:10px;height:10px;border-radius:50%;display:block;background:rgba(244,241,234,.14)}
.app-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.app-body{padding:20px 22px 22px}
.app-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.app-vol{font-size:18px;font-weight:600;letter-spacing:-.025em}
.app-vol span{color:var(--dim);font-weight:400;font-size:13.5px;margin-left:8px}
.app-state{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:8px;flex:none}
.app-state i{width:5px;height:5px;border-radius:50%;background:var(--blue);display:block;flex:none}
.app-state.done{color:var(--amber)}
.app-state.done i{background:var(--amber)}
.app-prog{height:2px;background:rgba(244,241,234,.07);border-radius:2px;margin-top:14px;overflow:hidden}
.app-prog i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--blue),#6FA5FF);border-radius:2px}
.app-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  margin-top:18px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.app-nums>div{background:rgba(19,25,32,.92);padding:13px 15px;min-width:0}
.app-nums span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.app-nums b{display:block;margin-top:7px;font-size:20px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.app-nums em{display:block;margin-top:3px;font-style:normal;font-size:11px;color:var(--dim)}
/* The one amber inside the mock, and only on the number the report exists to produce. */
.app-nums>div.hot{background:rgba(215,168,79,.08);box-shadow:inset 0 0 0 1px rgba(215,168,79,.3)}
.app-nums>div.hot b{color:var(--amber)}
.app-split{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:18px}
.app-sub{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:11px}
/* Not .bars: folio.css owns that name for the nav's hamburger icon, and reusing it turned every
   codec row into three white 1.5px lines inside a 15px box. A page layer never reuses a shared
   class name for something else. */
.cbars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:56px 1fr 32px;gap:10px;align-items:center;
  font-family:var(--mono);font-size:10px;color:var(--muted)}
.bar .tr{height:5px;border-radius:3px;background:rgba(244,241,234,.07);overflow:hidden}
.bar .fl{display:block;height:100%;border-radius:3px;background:var(--blue);
  transform-origin:0 50%;transform:scaleX(1)}
.bar .v{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
.funnel{display:flex;flex-direction:column;gap:7px}
.fstep{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 10px;
  border:1px solid var(--line);border-radius:7px;font-family:var(--mono);font-size:10px;
  color:var(--dim);opacity:.3}
.fstep.on{opacity:1;border-color:var(--line-2);color:var(--muted)}
.fstep b{color:var(--text);font-weight:400;font-variant-numeric:tabular-nums}
.fstep.final.on{border-color:rgba(215,168,79,.4)}
.fstep.final.on b{color:var(--amber)}
.app-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--dim)}
.app-foot .net{display:flex;align-items:center;gap:7px}
.app-foot .net i{width:5px;height:5px;border-radius:50%;background:#4a5763;display:block;flex:none}

/* ---------------- the scan: the peak ---------------- */
.sec-scan{overflow:clip}
.scan-stage{display:flex;flex-direction:column;justify-content:center;background:var(--ink);
  padding:calc(var(--nav-h) + var(--nav-inset) + 26px) 0 40px;min-height:100svh}
.scan-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:52px;
  align-items:center;width:100%}
.scan-copy{min-width:0}
/* Four captions stacked in one box, not down a column. Four rows lit one at a time marches the
   reader's eye down the screen and leaves a hole above whichever one is lit. The column is the
   static layout, and it comes back whenever the stage is not actually pinned. */
.scan-panels{position:relative;margin-top:24px;min-height:clamp(220px,30vh,300px)}
.scan-stage.sc-stage .scan-panel{position:absolute;inset:0}
.scan-panel .pnum{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:10px}
.scan-panel .display{font-size:clamp(26px,3vw,40px);margin-top:16px;max-width:14ch}
.scan-panel p{margin-top:14px;color:var(--muted);font-size:15px;line-height:1.6;max-width:42ch;
  text-wrap:pretty}
.scan-frame{background:linear-gradient(180deg,#161C24,#0E131A)}

/* ---------------- the cleanup ---------------- */
.clean-stack{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px;
  margin-top:52px;align-items:start}
.grp{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#161C24,#0E131A);box-shadow:var(--shadow)}
.grp-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.grp-top b{color:var(--amber);font-weight:400;letter-spacing:.06em;text-align:right}
.dupe{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;width:100%;
  padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;
  transition:background .22s var(--ease-out)}
.dupe:last-of-type{border-bottom:0}
.dupe:hover{background:rgba(244,241,234,.03)}
.dupe.on{background:rgba(76,141,255,.07);box-shadow:inset 2px 0 0 var(--blue)}
.dupe .path{min-width:0}
.dupe .path span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dupe.on .path span{color:var(--text)}
.dupe .path em{display:block;font-style:normal;margin-top:5px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dupe .go{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line-2);border-radius:6px;padding:6px 10px;
  white-space:nowrap;transition:color .22s,border-color .22s}
.dupe:hover .go,.dupe.on .go{color:var(--blue);border-color:rgba(76,141,255,.45)}

/* a Finder window, because that is where the work actually happens */
.finder{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:#1B2028;
  box-shadow:var(--shadow)}
.finder-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.35);background:#242A33}
.finder-bar .dots{display:flex;gap:6px;flex:none}
.finder-bar .dots i{width:9px;height:9px;border-radius:50%;display:block;background:rgba(244,241,234,.16)}
.finder-bar .where{font-size:11.5px;font-weight:500;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.finder-list{padding:6px 0;min-height:158px}
.frow{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:8px 14px;
  font-size:12px;color:var(--muted)}
.frow .nm{display:flex;align-items:center;gap:9px;min-width:0}
.frow .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .ic{width:13px;height:16px;border-radius:2px;flex:none;
  background:linear-gradient(160deg,#39424E,#2A313B);border:1px solid rgba(244,241,234,.1)}
.frow .sz{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:none}
.frow.sel{background:var(--blue);color:#fff;border-radius:5px;margin:0 6px;padding:8px}
.frow.sel .sz{color:rgba(255,255,255,.85)}
.frow.sel .ic{background:linear-gradient(160deg,#EDF2FA,#C9D6E8);border-color:rgba(255,255,255,.5)}
.finder-foot{border-top:1px solid rgba(0,0,0,.3);padding:10px 14px;background:#20262E;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#5D6774}

/* ---------------- the report ----------------
   The document is taller than its frame, so it pans inside it: the signature move of the system,
   used here on markup rather than on a screenshot. */
.doc-frame{aspect-ratio:auto;height:clamp(260px,32vh,330px);background:linear-gradient(180deg,#161C24,#0E131A)}
.doc{position:absolute;left:0;right:0;top:0;--w-from:0px;--w-to:-138px;
  transform:translate3d(0,var(--w-y,0px),0)}
.doc-top{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.doc-top b{font-size:13.5px;font-weight:500}
.doc-top span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap}
.doc-rows{padding:6px 22px 18px}
.doc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.doc-row:last-child{border-bottom:0}
.doc-row .p{font-family:var(--mono);font-size:11px;color:var(--dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
.doc-row b{font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--text);flex:none;
  font-variant-numeric:tabular-nums}
.doc-row.dup b{color:var(--amber)}
.doc-out{display:flex;gap:8px;padding:16px 22px;border-top:1px solid var(--line);
  background:rgba(244,241,234,.014)}
.doc-out span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim);
  border:1px solid var(--line-2);border-radius:5px;padding:6px 10px}
.doc-out span:first-child{color:var(--text);border-color:rgba(244,241,234,.22)}

/* ---------------- trust ---------------- */
.card-term{padding-bottom:26px}
.card-term p{margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.55}
.term{margin-top:24px;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  background:#080B0F}
.term-bar{padding:11px 15px;border-bottom:1px solid var(--line);font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.term-body{padding:18px;font-family:var(--mono);font-size:11.5px;line-height:1.85;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.term-body .l{white-space:pre;color:var(--muted)}
.term-body .pr{color:var(--blue)}
.term-body .k{color:var(--text)}
.term-body .ok{color:var(--amber)}
.term-body .cm{color:#7D8896}

/* ---------------- the gate ----------------
   Two fields on the page's own spine, not in a dialog: this page's ask is a download, and a
   modal between a reader and a free tool is one click of friction with nothing to buy it. */
.gate{max-width:560px;margin:44px auto 0;padding:28px;border:1px solid var(--line-2);
  border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}
.gform{display:flex;flex-direction:column;gap:16px}
.gform .btn-primary{justify-content:center;min-height:46px}
.gate-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gate-done{text-align:center}
.gate-done .chk{width:46px;height:46px;border-radius:50%;border:1px solid rgba(76,141,255,.4);
  color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:21px;margin:0 auto 18px}
.gate-done h3{font-size:21px}
.gate-done .sub{margin:10px auto 20px;max-width:38ch;color:var(--muted);font-size:14.5px;line-height:1.55}
.gate-done .btn-primary{justify-content:center;min-height:46px;width:100%}
.gate-done .hashline{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--dim);word-break:break-all}
.gate-fine{display:block;margin:22px auto 0;text-align:center}
/* The handoff prints the link itself, because nothing in this repository promises an email. */
.handoff-url{margin-top:14px;font-family:var(--mono);font-size:11px;line-height:1.5;
  color:var(--dim);word-break:break-all;user-select:all;-webkit-user-select:all}
.handoff-hint{margin-top:8px;font-size:12.5px;color:var(--dim)}

/* ---------------- 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-stage{display:flex;flex-direction:column;background:var(--ink);
  padding:calc(var(--nav-h) + var(--nav-inset) + 24px) 0 0}
/* margin-top:auto on .stage-closer only moves it if its parent is the flex container. The wrap is
   the flex item, so it has to grow and be a column itself, or the console floats a third of a
   screen above the footer and the fade below it covers nothing but ink. */
.closer-stage>.wrap{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.closer-in{max-width:820px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.closer-in .display{margin-top:20px;font-size:clamp(30px,3.4vw,50px)}
.closer-in .lead{margin-top:18px;text-align:center;margin-left:auto;margin-right:auto}
.closer-in .inline-cta{margin-top:30px}
.stage-closer{position:relative;max-width:820px;margin:auto auto 0;padding-top:30px;perspective:1500px}
/* 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. */
.closer-stage.sc-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;
  z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent 74%,var(--ink) 82%,var(--ink))}

/* ---------------- motion ----------------
   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 console lag the hand. One element cannot have 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 console does not merely level, it travels: it starts where the first screen shows
   it, a tilted plane most of a screen down, and arrives level with its top 24px under the nav
   pill. --di-rise is that distance, measured from the real layout by the page script 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 console standing up as it comes, and the last 15% of
   the travel 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(--di-rise,0px)),0)}
/* The copy greets, then gets out of the console'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. */
.hero-in{transform:translate3d(0,calc(clamp(0,calc(var(--sc-p,0) / .5),1) * -90px),0)}
/* Inside the pin the console is the act's destination, so it is sized to fill the held stage
   once it arrives: capped by the viewport's height so a short screen never ends the travel with
   the window running off the bottom. 130px is the nav pill, its inset, the gap under it and a
   breath at the foot. */
.hero-stage.sc-stage>.stage.wrap{max-width:min(1020px,calc((100svh - 130px) * 1.9 + 64px));
  padding-top:34px;margin-top:0}

/* --- 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 di-rise{from{opacity:0;transform:translate3d(0,112%,0)}}
@keyframes di-greet{from{opacity:0;transform:translate3d(0,14px,0)}}
@media(prefers-reduced-motion:no-preference){
  .hero h1 .sc-split__i{animation:di-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:di-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>.tagline{animation-delay:520ms}
  .hero-in>.hero-cta{animation-delay:600ms}
  /* The scan's read head, on while the scan is running and off the moment it reports complete.
     One pseudo-element, no layout, and it stops entirely under reduce. */
  .app.scanning::after{content:"";position:absolute;left:0;right:0;top:var(--sweep,0%);height:1px;
    z-index:3;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(76,141,255,.5),transparent)}
}

/* ---------------- the static contract ----------------
   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 .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 readout the script drives ships finished in the markup, so no script at all leaves the
   window on the state a completed scan ends in rather than on an empty one.
   The demoted scan: the captions are a plain list beside that finished window. */
html.di-scan-static .scan-panels{min-height:0;display:flex;flex-direction:column;gap:26px}
html.di-scan-static .scan-panel{position:static}

/* ---------------- 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. */
@media(prefers-reduced-motion:reduce){
  .hero-lean,.hero-lift,.hero-in,.closer-lift{transform:none;transition:none}
  .dupe{transition:none}
  /* The hero and the close are demoted to flow under reduce, so the pinned-only console size
     never applies and the window is the ordinary column width. */
  .hero-stage>.stage.wrap{max-width:none}
  .hero h1 .sc-split__i{animation:none}
  .scan-panels{min-height:0}
}

/* ---------------- responsive ---------------- */
@media(max-width:1120px){
  .scan-grid{gap:36px}
  .clean-stack{gap:18px}
}
@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. */
  .hero-lean,.hero-lift,.hero-in,.closer-lift{transform:none}
  .scan-grid{grid-template-columns:1fr;gap:34px}
  .scan-panels{min-height:0}
  .clean-stack{grid-template-columns:1fr}
  .app-split{grid-template-columns:1fr;gap:16px}
}
@media(max-width:760px){
  .hero-stage{padding-top:calc(var(--nav-h) + var(--nav-inset) + 28px)}
  .hero h1{margin-top:16px}
  .hero-lead{margin-top:14px}
  .tagline{margin-top:14px;font-size:10px;letter-spacing:.14em}
  .hero-cta{margin-top:22px;gap:14px;flex-direction:column;width:100%}
  .hero-cta .btn{width:100%;justify-content:center;min-height:48px}
  .scan-stage{padding:calc(var(--nav-h) + var(--nav-inset) + 16px) 0 30px;min-height:0}
  .app-body{padding:14px}
  .app-vol{font-size:16px}
  .app-nums{grid-template-columns:1fr 1fr}
  .app-nums>div{padding:11px 12px}
  .app-nums b{font-size:17px;margin-top:5px}
  .app-nums em{font-size:10px}
  .app-foot{font-size:9px;margin-top:13px;padding-top:11px;flex-wrap:wrap}
  .clean-stack{margin-top:38px}
  .grp-top{flex-direction:column;align-items:flex-start;gap:6px}
  .grp-top b{text-align:left}
  .dupe .path span{font-size:10.5px}
  .doc-frame{aspect-ratio:auto;height:clamp(230px,34vh,290px)}
  .doc{--w-to:-72px}
  .doc-top{padding:14px 16px;flex-direction:column;align-items:flex-start;gap:6px}
  .doc-rows{padding:4px 16px 14px}
  .doc-row{padding:11px 0}
  .doc-out{padding:12px 16px}
  .gate{padding:22px;border-radius:16px;margin-top:34px}
  .term-body{font-size:10.5px;padding:14px}
  .stage-closer{padding-top:24px}
}
@media(max-width:400px){
  /* Two columns for as long as "441.36 GB" fits under its label. One column turns the readout
     into four full-width rows and the window into a column of numbers. */
  .app-nums{grid-template-columns:1fr}
  .bar{grid-template-columns:44px 1fr 28px;gap:8px}
}


/* Contrast: every label inside the live demo is read, so nothing sits under 4.5:1. --muted on the
   finder's own #20262E foot measures 4.17:1, so the foot takes a lighter ink of its own; the
   selected row is a saturated blue that white can only reach 3.20:1 against, so its ink is the
   page's own dark ink rather than a lighter blue behind it. */
.finder-foot,.finder-foot *{color:#8B95A2}
.dupe .badge,.frow .badge,.chip-blue{color:var(--ink)}
.frow.sel,.frow.sel .nm span{color:var(--ink)}
.frow.sel .sz{color:#1B2028}


/* --- 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 170px 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 .scan-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){
  .tagline{font-size:11px;letter-spacing:.12em}
  .scan-panel .pnum{font-size:11px}
  .scan-panel p{font-size:15.5px}
  .card-term p,.gate-done .sub{font-size:15.5px}
  .card-term .k,.doc-out span,.gate-done .hashline{font-size:11px}
}