/* Immutable QC · ui/landing.css: the landing page (index.html), on top of ui/theme.css (tokens and components).
   Only what the landing page adds: the hero and its sealing ring, the sections' layouts, and the phone sizes. No
   external request, no inline style (the page's CSP has style-src 'self'); ui/landing.mjs drives the hero by setting
   data-phase and a few state classes on #viz, and the page reads the same without it (the hero rests on Caught).

   THE HERO (figure#viz)
   data-phase   written | sealed | edited | caught: which step shows (the HTML ships "caught": the static state)
   .is-writing  step 1: the file's rows appear one by one (rows without .in are hidden)
   .is-sealing  step 2, while the fingerprint is computed: no seal ring, no badge, the log still says "written"
   .is-copying  step 3, before the value changes: the copy looks the same as the original
   .is-auditing step 4, while the audit runs: the sweep turns, rows without .done show "Not checked", no badge yet
   .is-fading   the stage dims between two runs
   The ring has one tick per hex character of the fingerprint (.tk, .tk.on cyan, .tk.bad coral), clockwise from 12.
   Every layer that changes with the phase sits in one grid cell with the others (visibility, not display), so the
   panel keeps one height in every phase: no layout shift. */

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.mark-dot{fill:var(--mark-dot,currentColor)}
main{display:block}
main:focus{outline:none}
.ac{stroke:var(--signal)}
.acf{fill:var(--signal)}

/* ------------------------------------------------------------------------------------------------------ hero */
.hero{padding:clamp(28px,3.8vw,52px) 0 clamp(48px,6vw,84px)}
.hero-grid{--wrap:1240px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,590px);gap:clamp(32px,4.4vw,64px);align-items:center}
.hero-copy{max-width:600px}
.hero h1{font-size:clamp(2.3rem,1.15rem + 3.7vw,3.5rem);line-height:1.04;letter-spacing:-.026em;margin:20px 0 22px}
.hero h1>span{display:block}
.hero .lead{max-width:30em}
.hero-cta{margin-top:32px}
.hero-note{margin-top:14px;font-size:var(--t-small);color:var(--ink-3)}

/* the panel */
.viz{margin:0;padding:14px 18px 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0}
.viz::after{content:"";position:absolute;left:30%;top:36%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(69,230,214,.1),transparent);pointer-events:none;z-index:0;transition:background var(--dur-2) ease}
.viz[data-phase="caught"]::after{background:radial-gradient(closest-side,rgba(255,143,128,.08),transparent)}
.viz>*{position:relative;z-index:1}
.viz-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px}
.viz-mode{display:flex;align-items:center;gap:9px;min-width:0;margin:0;font:500 var(--t-micro)/1.2 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.viz-mode .m{display:none}
.viz:is([data-phase="written"],[data-phase="sealed"]) .m-watch,.viz[data-phase="edited"] .m-copy,.viz[data-phase="caught"] .m-audit{display:inline}
.viz:is([data-phase="edited"],[data-phase="caught"]) .viz-mode .live-dot{background:var(--ink-3);box-shadow:none}
.viz-play{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px 0 11px;border-radius:var(--r-pill);border:1px solid var(--line-ui);background:var(--glass-flat);color:var(--ink-2);font:500 var(--t-micro)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:color var(--dur-1) ease,border-color var(--dur-1) ease}
.viz-play:hover{color:var(--ink);border-color:var(--ink-2)}
.viz-play svg{width:13px;height:13px;flex:none}

.viz-main{display:grid;grid-template-columns:minmax(0,1fr) 11.25rem;gap:16px;align-items:center}
.viz-side{display:grid;gap:14px;align-content:center}

/* the four steps: real buttons (disabled until the script runs) */
.phases{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.phases button{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:0 12px 0 9px;border-radius:12px;border:1px solid transparent;background:none;color:var(--ink-3);font:500 .8125rem/1.2 var(--mono);letter-spacing:.03em;text-align:left;cursor:pointer;transition:color var(--dur-1) ease,background-color var(--dur-1) ease,border-color var(--dur-1) ease}
.phases button:disabled{cursor:default}
.phases button:not(:disabled):hover{color:var(--ink);background:var(--glass-flat)}
.phases .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;font-size:.6875rem;flex:none;transition:background-color var(--dur-1) ease,color var(--dur-1) ease}
.phases li{position:relative}
.phases li:not(:last-child)::after{content:"";position:absolute;left:21.5px;top:35px;width:1px;height:18px;background:var(--line-2);pointer-events:none}
.phases li:has(.done)::after{background:var(--signal-line)}
.phases .done{color:var(--ink-2)}
.phases .done .n{color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal-line)}
.phases [aria-current="step"]{color:var(--ink);background:rgba(150,190,255,.07);border-color:var(--line-2)}
.phases [aria-current="step"] .n{background:var(--signal);color:var(--ink-on-signal);box-shadow:none}
.viz[data-phase="edited"] .phases [aria-current="step"] .n{background:var(--ink-2)}
.viz[data-phase="caught"] .phases [aria-current="step"] .n{background:var(--alert)}

.caps{display:grid;padding-top:14px;border-top:1px solid var(--line)}
.cap{grid-area:1/1;visibility:hidden;color:var(--ink);font-size:.9375rem;line-height:1.48}
.viz[data-phase="written"] [data-cap="written"],.viz[data-phase="sealed"] [data-cap="sealed"],.viz[data-phase="edited"] [data-cap="edited"],.viz[data-phase="caught"] [data-cap="caught"]{visibility:visible}

/* the stage: the sealing ring, one tick per hex character of the fingerprint, with the file inside */
.stage{position:relative;width:100%;max-width:360px;aspect-ratio:1;margin:0 auto;container-type:inline-size;transition:opacity var(--dur-2) ease}
.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.r-core{transition:opacity var(--dur-2) ease}
.viz[data-phase="caught"] .r-core{opacity:.25}
.r-outer{fill:none;stroke:rgba(160,200,255,.13);stroke-width:1}
.r-marks line{stroke:rgba(160,200,255,.32);stroke-width:1}
.r-inner{fill:none;stroke:rgba(160,200,255,.17);stroke-width:1;stroke-dasharray:2 5}
.r-seal{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-dasharray:980.2;stroke-dashoffset:980.2;transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1),stroke var(--dur-2) ease}
.viz:not([data-phase="written"]) .r-seal{stroke-dashoffset:0}
.viz[data-phase="caught"]:not(.is-auditing) .r-seal{stroke:var(--alert)}
.r-sweep{fill:none;stroke:var(--signal);stroke-opacity:.17;stroke-width:22;stroke-dasharray:90 1010;opacity:0;transition:opacity .3s ease}
.viz.is-auditing .r-sweep{opacity:1}
.tk{stroke:rgba(160,200,255,.2);stroke-width:2;stroke-linecap:round;transition:stroke .25s ease}
.tk.on{stroke:var(--signal)}
.tk.bad{stroke:var(--alert)}
.ticks{filter:url(#ring-glow)}
.viz[data-phase="caught"] .ticks{filter:none}

.file{position:absolute;left:50%;top:50%;width:52%;transform:translate(-50%,-56%);margin:0;padding:3.4cqi 3.9cqi 2.6cqi;border-radius:10px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(20,34,58,.95),rgba(12,22,40,.95));box-shadow:0 18px 40px -18px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);font:400 clamp(11px,3.55cqi,13px)/1.68 var(--mono);color:var(--ink-2)}
.file p{margin:0}
.file-h{display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:500;padding-bottom:1.6cqi;margin-bottom:1.2cqi!important;border-bottom:1px solid var(--line)}
.file-h svg{width:1.25em;height:1.25em;color:var(--ink-3);flex:none}
.r{display:flex;justify-content:space-between;gap:8px;transition:opacity .3s ease}
.r-h{color:var(--ink-3)}
.viz.is-writing .r:not(.r-h):not(.in){opacity:0}
.val{display:inline-flex;align-items:baseline;justify-content:flex-end}
.val s,.val b{font-weight:400;text-decoration:none;transition:opacity .35s ease,max-width .45s ease,color .35s ease}
.val b{max-width:0;overflow:hidden;opacity:0;white-space:nowrap}
.viz:is([data-phase="edited"],[data-phase="caught"]) .val{gap:.5em}
.viz:is([data-phase="edited"],[data-phase="caught"]) .val s{text-decoration:line-through;text-decoration-color:rgba(255,143,128,.75);color:var(--ink-3)}
.viz:is([data-phase="edited"],[data-phase="caught"]) .val b{max-width:5em;opacity:1;color:var(--alert);background:var(--alert-soft);box-shadow:0 0 0 2px var(--alert-soft);border-radius:3px}
.file-note{margin-top:1.4cqi!important;padding-top:1.2cqi;border-top:1px dashed rgba(255,143,128,.35);color:var(--alert);font-size:max(11px,.85em);line-height:1.35;visibility:hidden}
.viz:is([data-phase="edited"],[data-phase="caught"]) .file-note{visibility:visible}

.badge{position:absolute;left:50%;bottom:13.5%;transform:translateX(-50%);display:grid;justify-items:center;margin:0;white-space:nowrap}
.badge .tag{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.badge .tag-sealed{background:linear-gradient(var(--signal-soft),var(--signal-soft)),#08111f;box-shadow:var(--glow-seal)}
.badge .tag-changed{background:linear-gradient(var(--alert-soft),var(--alert-soft)),#08111f}
.viz:is([data-phase="sealed"],[data-phase="edited"]) .b-sealed{opacity:1;transform:none}
.viz[data-phase="edited"] .b-sealed{opacity:.55;box-shadow:none}
.viz[data-phase="caught"]:not(.is-auditing) .b-caught{opacity:1;transform:none}
@container (max-width:300px){
  .badge .tag-l{gap:6px;padding:4px 9px 4px 7px;font-size:.6875rem}
  .badge .tag-l svg{width:12px;height:12px}
  .file .r:nth-child(6){display:none}
}

/* readout: the fingerprints, then the agent's log (steps 1, 2) or the copy's files (steps 3, 4) */
.viz-data{display:grid;gap:14px;padding-top:14px;border-top:1px solid var(--line);transition:opacity var(--dur-2) ease}
.viz.is-fading :is(.stage,.viz-data){opacity:.2}
.fps{display:grid;gap:8px}
.fp{display:grid;grid-template-columns:4.25rem minmax(0,1fr);gap:10px;align-items:baseline;margin:0}
.fp .label{font-size:.6875rem}
.fp .hash{display:grid;grid-template-columns:repeat(4,max-content);column-gap:.65em;font-size:.78125rem;line-height:1.55}
.fp .hash>span{margin-right:0}
.fp .hash i{font-style:normal}
.fp .hash i.m{color:var(--signal)}
.fp .hash i.f{color:#7F92B0}
.fp .hash i.d{color:var(--ink-3)}

.feed{display:grid}
.log,.files{grid-area:1/1;visibility:hidden;min-width:0}
.log ol,.files ol{margin:0;padding:0;list-style:none}
.viz:is([data-phase="written"],[data-phase="sealed"]) .log,.viz:is([data-phase="edited"],[data-phase="caught"]) .files{visibility:visible}
.feed-h{display:grid;margin:0 0 6px;padding:0 6px;font:500 .6875rem/1.35 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3)}
.feed-h>span{grid-area:1/1}
.files .fh-audit{visibility:hidden}
.viz[data-phase="caught"]:not(.is-auditing) .files .fh-copy{visibility:hidden}
.viz[data-phase="caught"]:not(.is-auditing) .files .fh-audit{visibility:visible}
.ev,.fr{display:grid;grid-template-columns:5.6rem minmax(0,1fr) 3.5rem 5.6rem;gap:10px;align-items:center;min-height:27px;padding:0 6px;border-radius:7px;font:400 .75rem/1.3 var(--mono);color:var(--ink-2)}
.fr{grid-template-columns:minmax(0,1fr) 3.5rem 5.6rem 7.6rem}
.ev>span,.fr>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-s,.fr-s{text-align:right;font-variant-numeric:tabular-nums}
.ev-h,.fr-h{color:var(--ink-3)}
.ev-w{color:var(--signal)}
.ev-dim .ev-w,.ev-dim .ev-p,.ev-dim .ev-h{color:var(--ink-3)}
.ev-new{background:rgba(150,190,255,.05)}
.ev-new .w2,.viz[data-phase="sealed"] .ev-new .w1{display:none}
.viz[data-phase="sealed"] .ev-new .w2{display:inline}
.viz[data-phase="written"] .ev-new .ev-w{color:var(--ink)}
.viz[data-phase="written"] .ev-wait{visibility:hidden}
.viz[data-phase="sealed"] .ev-new .ev-h{color:var(--signal)}
.fr-t{display:grid;justify-items:end;overflow:visible!important}
.fr-t .tag{grid-area:1/1}
.fr .t1,.viz[data-phase="caught"] .fr .t0{visibility:hidden}
.viz[data-phase="caught"] .fr .t1{visibility:visible}
.viz.is-auditing .fr:not(.done) .t1{visibility:hidden}
.viz.is-auditing .fr:not(.done) .t0{visibility:visible}
.fr-p{color:var(--ink)}
.viz[data-phase="edited"] .fr-h,.viz.is-auditing .fr:not(.done) .fr-h{visibility:hidden}
.viz[data-phase="caught"] .fr-bad{background:rgba(255,143,128,.06);box-shadow:inset 2px 0 0 var(--alert)}
.viz.is-auditing .fr-bad:not(.done){background:none;box-shadow:none}
.viz[data-phase="caught"] .fr-bad .fr-h{color:var(--alert)}
/* inside a step: still hashing (step 2), the copy before its value changes (step 3) */
.viz.is-sealing .r-seal{stroke-dashoffset:980.2}
.viz.is-sealing .b-sealed{opacity:0;transform:translateY(6px)}
.viz.is-sealing .ev-new .w2{display:none}
.viz.is-sealing .ev-new .w1{display:inline}
.viz.is-sealing .ev-new .ev-h{color:var(--ink-3)}
.viz.is-sealing .ev-wait{visibility:hidden}
.viz.is-copying .val{gap:0}
.viz.is-copying .val s{text-decoration:none;color:inherit}
.viz.is-copying .val b{max-width:0;opacity:0}
.viz.is-copying .file-note{visibility:hidden}

/* ---------------------------------------------------------------------------------------------- how it works */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.step{display:flex;flex-direction:column;padding:28px 26px 24px;border-radius:var(--r-m)}
.step-out{display:flex;align-items:center;gap:8px;min-height:40px;margin-top:auto!important;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--well);font:400 .75rem/1.4 var(--mono);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step>p:not(.step-out){margin-bottom:20px}
.step-out code{font-size:inherit;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:pre}
.step-out .pr,.step-out .ok{color:var(--signal)}
.step-out .faint{color:var(--ink-3)}
.step-out .tag{flex:none}
.step-out>span:last-child{overflow:hidden;text-overflow:ellipsis}
.step-no{position:absolute;top:22px;right:24px;font:500 .8125rem/1 var(--mono);color:var(--ink-3);letter-spacing:.08em}
.lens{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;margin-bottom:22px;color:var(--ink-2);background:radial-gradient(closest-side,rgba(69,230,214,.1),rgba(69,230,214,0)),rgba(4,8,16,.5);box-shadow:inset 0 0 0 1px rgba(69,230,214,.28),0 0 0 6px rgba(69,230,214,.035)}
.lens svg{width:40px;height:40px}
.step h3{margin-bottom:10px}
.step p{color:var(--ink-2)}
.step:not(:last-child)::after{content:"";position:absolute;top:58px;right:-21px;width:22px;height:1px;background:linear-gradient(90deg,var(--line-2),rgba(69,230,214,.6))}

.scope{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px;border-radius:var(--r-m)}
.scope-col{padding:26px 28px 24px}
.scope-col+.scope-col{border-left:1px solid var(--line)}
.scope h3{display:flex;align-items:center;gap:9px;margin-bottom:12px;font:500 var(--t-micro)/1.25 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase}
.scope h3 svg{width:16px;height:16px;flex:none}
.scope-yes h3{color:var(--signal)}
.scope-no h3{color:var(--ink-2)}
.scope-col p{color:var(--ink-2)}
.scope-yes p{color:var(--ink)}
.scope-line{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;margin:0;padding:16px 28px 18px;border-top:1px solid var(--line);color:var(--ink-2);font-size:var(--t-small)}
.scope-line svg{width:17px;height:17px;margin-top:2px;flex:none;color:var(--ink-3)}

/* ------------------------------------------------------------------------------------------- why it matters */
.why{background:linear-gradient(180deg,rgba(10,18,34,.55),transparent 65%)}
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2)}
.why-card{padding:26px 28px 6px 0}
.why-card+.why-card{padding-left:28px;border-left:1px solid var(--line)}
.why-card h3{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.why-card h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex:none}
.why-card p{color:var(--ink-2)}
.why-card p+p{margin-top:10px}
.why-private h3::before{background:var(--signal)}
.quote{position:relative;max-width:920px;margin:clamp(52px,6.5vw,88px) 0 0;padding-left:30px}
.quote::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--signal),rgba(69,230,214,.12))}
.quote blockquote{margin:0}
.quote p{font:var(--w-display) clamp(1.35rem,1rem + 1.35vw,2.05rem)/1.28 var(--display);letter-spacing:-.014em;color:var(--ink);text-wrap:pretty}
.quote figcaption{margin-top:18px;font:400 var(--t-small)/1.4 var(--mono);letter-spacing:.04em;color:var(--ink-3)}

/* ------------------------------------------------------------------------------------------------- who */
.who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.who-item{padding:26px 28px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--glass-flat)}
.who-now{background:linear-gradient(160deg,rgba(69,230,214,.07),rgba(69,230,214,0) 60%),var(--glass-flat);border-color:rgba(69,230,214,.28)}
.who-item h3{margin:10px 0 8px;font-size:1.375rem}
.who-item p:not(.label){color:var(--ink-2)}
.who-item .tag{margin-right:6px;vertical-align:1px}

/* ------------------------------------------------------------------------------------------------ status */
.status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.status-panel{padding:26px 28px 28px;border-radius:var(--r-m)}
.status-panel h3{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.status-panel h3 svg{width:20px;height:20px;flex:none;color:var(--ink-3)}
.status-panel h3 .ic-ok{color:var(--signal)}

/* ------------------------------------------------------------------------------------------------ install */
.install{background:radial-gradient(60% 70% at 50% 0%,rgba(30,90,170,.13),transparent 70%)}
.install .section-h>p:last-child{color:var(--ink-2)}
.install-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px}
.install-card{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.install-card .card-n{margin:0;font-size:var(--t-micro)}
.install-card>p{color:var(--ink-2)}
.install-card .cmd{align-self:stretch}
.sha{align-self:stretch}
.sha-body{margin:0;padding:14px 18px 4px}
.sha-body .sha-hex{display:block;max-width:calc(32ch + 1px);font:400 .9375rem/1.65 var(--mono);color:var(--ink);word-break:break-all}
.sha-check{padding:10px 18px 16px}
.sha-check>p{margin:0 0 8px;font-size:var(--t-small);color:var(--ink-3)}
.check-cmds{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.check-cmds li{display:grid;grid-template-columns:6.75rem minmax(0,1fr);gap:10px;align-items:baseline;font-size:var(--t-small);color:var(--ink-3)}
.check-cmds code{color:var(--ink);font-size:.8125rem;overflow-wrap:anywhere}
.install-more{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;margin-top:20px;align-items:start}
.touch{padding:24px 26px;border-radius:var(--r-m)}
.touch h3{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.touch h3 svg{width:19px;height:19px;flex:none;color:var(--ink-3)}
.touch .kv>div{grid-template-columns:5.5rem minmax(0,1fr);gap:12px;align-items:baseline}
.touch .kv dd{color:var(--ink-2)}
.touch code{color:var(--ink);font-size:.8125rem;overflow-wrap:anywhere}
.pipeline pre{font-size:.8125rem;line-height:1.75}

/* ------------------------------------------------------------------------------------------------ closer */
.closer{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--line);background:radial-gradient(50% 120% at 50% 100%,rgba(69,230,214,.06),transparent 70%)}
.closer-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 32px;text-align:center}
.closer h2{font-size:clamp(1.35rem,1rem + 1.1vw,1.85rem);letter-spacing:-.01em}

/* ------------------------------------------------------------------------------------------------ footer */
.foot-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}
.foot-nav .label{margin:0}
.foot-meta p{margin:0}

/* ------------------------------------------------------------------------------------------------ responsive */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-copy{max-width:680px}
  .viz{width:100%;max-width:680px;justify-self:start}
}
@media (max-width:1020px){
  .steps,.why-grid,.status-grid,.install-grid,.install-more{grid-template-columns:minmax(0,1fr)}
  .step:not(:last-child)::after{display:none}
  .why-card,.why-card+.why-card{padding:22px 0;border-left:0}
  .why-card+.why-card{border-top:1px solid var(--line)}
}
@media (max-width:720px){
  .scope,.who{grid-template-columns:minmax(0,1fr)}
  .scope-col+.scope-col{border-left:0;border-top:1px solid var(--line)}
  .scope-col{padding:22px 20px 20px}
  .scope-line{padding:14px 20px 16px}
  .step{padding:22px 20px 24px}
  .lens{width:52px;height:52px;margin-bottom:16px}
  .lens svg{width:34px;height:34px}
  .who-item,.status-panel,.touch{padding:22px 20px}
  .hero-cta .btn{flex:1 1 220px}
  /* tap targets: 44 px on phones */
  .site-nav a:not(.btn),.site-nav .btn,.copy,.viz-play,.phases button,.brand{min-height:44px}
  .brand{min-width:44px}
  .foot-nav a,.foot-meta a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0}
  .foot-nav ul{gap:0 22px}
  .closer-in{flex-direction:column}
}
@media (max-width:600px){
  .viz{padding:12px 12px 14px;border-radius:var(--r-m)}
  .viz-main{grid-template-columns:minmax(0,1fr);gap:14px}
  .stage{max-width:280px}
  .phases{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .phases button{padding:0 10px 0 8px;gap:9px;border-color:var(--line)}
  .phases li::after{display:none}
  .caps{padding-top:12px}
  .fp{grid-template-columns:minmax(0,1fr);gap:2px}
  .fp .hash{font-size:.75rem;column-gap:.55em}
  .ev{grid-template-columns:4.6rem minmax(0,1fr) 5.4rem;gap:8px;padding:0 4px}
  .fr{grid-template-columns:minmax(0,1fr) 5.4rem 7.6rem;gap:8px;padding:0 4px}
  .ev-s,.fr-s{display:none}
  .pfx{display:none}
  .check-cmds li{grid-template-columns:minmax(0,1fr);gap:2px}
  .sha-body{padding:12px 14px 2px}
  .sha-body .sha-hex{font-size:.875rem}
  .sha-check{padding:10px 14px 14px}
}
@media (max-width:380px){
  .viz-mode{gap:7px;letter-spacing:.04em}
  .viz-play{width:44px;padding:0;justify-content:center}
  .viz-play-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sha-body .sha-hex{max-width:calc(16ch + 1px)}
  .ev{grid-template-columns:4.6rem minmax(0,1fr)}
  .fr{grid-template-columns:minmax(0,1fr) 7.6rem}
  .ev-h,.fr-h{display:none}
  .phases button{font-size:.75rem;gap:7px}
}

/* ------------------------------------------------------------------------------------------- user settings */
@media (forced-colors:active){
  .phases [aria-current="step"]{border-color:Highlight;outline:1px solid Highlight}
  .phases [aria-current="step"] .n{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .viz-play,.phases button{border-color:ButtonText}
  .scope,.touch,.status-panel,.who-item,.step{border-color:CanvasText}
}
@media print{
  .viz-bar,.phases,.r-sweep,.closer .btn{display:none!important}
  .viz::after{display:none}
  .hero-grid,.viz-main{grid-template-columns:minmax(0,1fr)}
  .file{background:#fff}
  .lens{background:none;box-shadow:inset 0 0 0 1px #999}
  .badge .tag-sealed,.badge .tag-changed,.step-out{background:#fff}
}