/* =====================================================================================================
   Meterknot Scorecard v0.9 (2026-10-04, MTKN-MC · Website Main Builder): the page's own CSS. v0.9: S2 held in place while the
   chain plays (from 960 px); S4's steps drawn as pieces of the result. The seven inner-page rules (ruled 2026-10-03), the plan for the Clarity and Scorecard pair (approved
   2026-10-03). One lime moment per view: the hero's located constraint, the close's last clause, the light's rest on an eyebrow
   diamond (never in the hero or the close). Scoped under the section ids.
   ===================================================================================================== */

/* ---------- the kit: the travelling light and the intro's pre-state ---------- */
#sys-light{position:fixed;top:0;left:0;width:130px;height:130px;margin:-65px 0 0 -65px;z-index:40;pointer-events:none;opacity:0;will-change:transform}
#sys-light .lw,#sys-light .ll{position:absolute;inset:0;border-radius:50%;transition:opacity .8s var(--ease)}
#sys-light .lw{background:radial-gradient(circle,rgba(255,255,255,0.8) 0%,rgba(233,240,246,0.28) 14%,rgba(183,197,208,0.1) 34%,rgba(183,197,208,0.03) 58%,rgba(183,197,208,0) 85%);filter:blur(3px)}
#sys-light .ll{background:radial-gradient(circle,rgba(226,246,190,0.9) 0%,rgba(163,217,78,0.32) 13%,rgba(163,217,78,0.1) 33%,rgba(163,217,78,0.03) 56%,rgba(163,217,78,0) 82%);filter:blur(3px);opacity:0}
#sys-light.rest .lw{opacity:0}
#sys-light.rest .ll{opacity:1}
@media (max-width:900px){ #sys-light{display:none} }
.mk-pre #schero .sh-lede,.mk-pre #schero .sc-ring{opacity:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* on phones and under reduced motion the 02 diamond goes out once the stage's constraint is lime (one lime moment per view) */
.eyed.lit.mute{transform:rotate(45deg);border-color:var(--blue-100);background:transparent;opacity:0.75;box-shadow:none}
.eyed.lit.mute::after{display:none}

/* ---------- rhythm ---------- */
#schero .wrap,#scwhy .wrap,#scwhat .wrap,#scget .wrap,#scfaq .wrap,#scclose .wrap{max-width:none}
#scwhy,#scwhat,#scget,#scfaq{padding:clamp(100px,13vh,180px) 0}
#scwhy .eyebrow,#scwhat .eyebrow,#scget .eyebrow,#scfaq .eyebrow{margin:0}
#scwhy h2.stmt,#scwhat h2.stmt,#scget h2.stmt,#scfaq h2.stmt{margin-top:clamp(18px,2vw,30px);font-size:clamp(40px,min(6vw,11vh),150px);line-height:1;letter-spacing:-0.03em}

/* corner ticks (the Home 05 instrument's frame) */
.sc-stage .fk,.gt-frag .fk{position:absolute;width:12px;height:12px;opacity:0.85;z-index:2;pointer-events:none}
.sc-stage .fk::before,.gt-frag .fk::before{content:"";position:absolute;width:12px;height:1px;background:rgba(183,197,208,0.6);top:0;left:0}
.sc-stage .fk::after,.gt-frag .fk::after{content:"";position:absolute;width:1px;height:12px;background:rgba(183,197,208,0.6);top:0;left:0}
.fk.k1{top:-1px;left:-1px}
.fk.k2{top:-1px;right:-1px;transform:scaleX(-1)}
.fk.k3{bottom:-1px;left:-1px;transform:scaleY(-1)}
.fk.k4{bottom:-1px;right:-1px;transform:scale(-1,-1)}
.sp-tag{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--meta-3);border:1px solid var(--hairline-2);padding:4px 8px}@media (min-width:2561px){.sp-tag{font-size:max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px))}}

/* ---------- S1 · hero: the H1, the dek, Start; the six-pillar ring ---------- */
#schero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(120px,15vh,180px) 0 clamp(50px,7vh,90px)}
#schero > .wrap{width:100%}
#schero .sh-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,0.7fr);column-gap:clamp(40px,5vw,120px);align-items:center}
#schero h1.sh-h1{margin-top:clamp(18px,2.2vw,32px);font-size:clamp(52px,min(9.6vw,15.5vh),240px);line-height:0.97;letter-spacing:-0.035em;font-weight:700;color:#fff;max-width:none;text-wrap:balance}
#schero .sh-dek{margin-top:clamp(22px,3vh,36px);font-size:clamp(20px,1.7vw,30px);line-height:1.4;color:#fff;font-weight:300;max-width:none}@media (min-width:2561px){#schero .sh-dek{font-size:max(clamp(20px,1.7vw,30px), min(calc(30.00px + (100vw - 2560px) * 0.00234), 33.00px))}}
#schero .sh-start{margin-top:clamp(28px,4vh,48px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
#schero .privacy{max-width:52ch;font-size:13.5px;line-height:1.6;color:var(--meta-2)}@media (min-width:2561px){#schero .privacy{font-size:max(13.5px, min(calc(13.50px + (100vw - 2560px) * 0.00264), 16.88px))}}
#schero .privacy a,#scfaq .fq-a a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(183,197,208,0.5)}
.sc-ring{position:relative;width:100%;max-width:520px;justify-self:center}
.sc-ring .hr-svg{display:block;width:100%;height:auto;overflow:visible}
.sc-ring .hr-guide{fill:none;stroke:rgba(183,197,208,0.14);stroke-width:1}
.sc-ring .hr-seg{fill:none;stroke:rgba(183,197,208,0.28);stroke-width:16;stroke-linecap:butt;transition:stroke .5s var(--ease)}
.sc-ring .hr-seg.on{stroke:rgba(255,255,255,0.75)}
.sc-ring .hr-seg.lock{stroke:var(--lime);filter:drop-shadow(0 0 10px rgba(163,217,78,0.45))}
.sc-ring .hr-ix{font-family:var(--mono);font-size:16px;font-weight:500;letter-spacing:0.12em;fill:var(--meta-3);transition:fill .5s var(--ease)}@media (min-width:2561px){.sc-ring .hr-ix{font-size:max(16px, min(calc(16.00px + (100vw - 2560px) * 0.00313), 20.00px))}}
.sc-ring .hr-ix.on{fill:#fff}
.sc-ring .hr-ix.lock{fill:var(--lime)}
.sc-ring .hr-sweep line{stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 0 6px rgba(255,255,255,0.8))}
.sc-ring .hr-sweep{opacity:var(--so,0);transition:opacity .5s var(--ease)}
.sc-ring .hr-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58%;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.sc-ring .hr-lab{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--lime);transition:opacity .5s var(--ease)}@media (min-width:2561px){.sc-ring .hr-lab{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
.sc-ring .hr-nm{font-size:clamp(18px,1.5vw,26px);font-weight:600;line-height:1.25;color:#fff;transition:opacity .4s var(--ease)}@media (min-width:2561px){.sc-ring .hr-nm{font-size:max(clamp(18px,1.5vw,26px), min(calc(26.00px + (100vw - 2560px) * 0.00203), 28.60px))}}
.sc-ring.scanning .hr-lab{opacity:0}
.sc-ring.pre .hr-lab,.sc-ring.pre .hr-nm{opacity:0}

/* ---------- S2 · why this comes first: the chain left, the paragraph right ---------- */
#scwhy .wy-track{position:relative;margin-top:clamp(40px,6vh,80px)}
#scwhy .wy-track.pin .wy-stick{position:sticky}
#scwhy .wy-grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);column-gap:clamp(40px,5vw,120px);align-items:center}
#scwhy .wy-chain{position:relative;max-width:520px;width:100%;justify-self:center}
#scwhy .ch-svg{display:block;width:100%;height:auto;overflow:visible}
#scwhy .ch-line{stroke:rgba(183,197,208,0.45);stroke-width:2;fill:none}
#scwhy .ch-repeat{stroke:#fff;stroke-width:2;fill:none;stroke-dasharray:0.012 0.012;opacity:0.85}
#scwhy .ch-leak{stroke:rgba(183,197,208,0.65);stroke-width:1.6;fill:none;stroke-dasharray:1 1;stroke-dashoffset:var(--lo,0)}
#scwhy .ch-node rect{fill:var(--blue-900);stroke:var(--blue-300);stroke-width:1.3;transition:fill .4s var(--ease),stroke .4s var(--ease)}
#scwhy .ch-node.on rect{fill:#fff;stroke:#fff}
#scwhy .ch-ntxt{font-family:var(--mono);font-size:calc(15px * var(--fsk,1));font-weight:500;letter-spacing:0.16em;text-transform:uppercase;fill:var(--meta-2);transition:fill .4s var(--ease)}
#scwhy .ch-ntxt.on{fill:#fff}
#scwhy .ch-ltxt,#scwhy .ch-rtxt{font-family:var(--mono);font-size:calc(13.5px * var(--fsk,1));font-weight:500;letter-spacing:0.12em;fill:var(--blue-100);opacity:var(--o,1)}
#scwhy .ch-rtxt{fill:#fff}
#scwhy .ch-scanline{stroke:#fff;stroke-width:1.5;opacity:var(--so,0.0);filter:drop-shadow(0 0 4px rgba(255,255,255,0.7))}
#scwhy .ch-dots circle{fill:#fff}
#scwhy .wy-lead{margin:0;max-width:56ch;font-size:clamp(18px,1.4vw,24px);line-height:1.6;color:var(--blue-100)}@media (min-width:2561px){#scwhy .wy-lead{font-size:max(clamp(18px,1.4vw,24px), min(calc(24.00px + (100vw - 2560px) * 0.00188), 26.40px))}}
#scwhy .wk{color:inherit;transition:color .45s var(--ease),text-shadow .45s var(--ease)}
#scwhy .wk.on{color:#fff;text-shadow:0 0 14px rgba(255,255,255,0.45)}

/* ---------- S3 · what it is: the paragraph, then the stage (the full example result) ---------- */
#scwhat .wi-lead{margin-top:clamp(28px,4vh,48px);max-width:62ch;font-size:clamp(18px,1.4vw,24px);line-height:1.6;color:var(--blue-100)}@media (min-width:2561px){#scwhat .wi-lead{font-size:max(clamp(18px,1.4vw,24px), min(calc(24.00px + (100vw - 2560px) * 0.00188), 26.40px))}}
.sc-stage{position:relative;margin-top:clamp(44px,7vh,90px);border:1px solid var(--hairline-2);background:rgba(6,27,45,0.55);padding:clamp(24px,3vw,48px);scroll-margin-top:110px}
.sc-stage:focus{outline:none}
.sc-stage .st-head{display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--meta-2)}@media (min-width:2561px){.sc-stage .st-head{font-size:max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px))}}
.sc-stage .st-mount{margin-top:clamp(24px,4vh,44px)}
.sc-stage .st-say{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sc-stage .st-grid{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);column-gap:clamp(32px,4vw,80px);align-items:start}
/* the six rows */
.sc-stage .sp-body{position:relative}
.sc-stage .sp-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.sc-stage .sp-row{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,auto) 14px;column-gap:14px;align-items:center;min-height:clamp(48px,6.2vh,60px);border-bottom:1px solid var(--hairline);transition:background .5s var(--ease)}
.sc-stage .sp-ix{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.12em;color:var(--meta-3)}@media (min-width:2561px){.sc-stage .sp-ix{font-size:max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px))}}
.sc-stage .sp-nm{font-size:clamp(15px,1.15vw,19px);font-weight:500;color:var(--blue-100);transition:color .5s var(--ease)}@media (min-width:2561px){.sc-stage .sp-nm{font-size:max(clamp(15px,1.15vw,19px), min(calc(19.00px + (100vw - 2560px) * 0.00371), 23.75px))}}
.sc-stage .sp-flag{grid-column:3;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;white-space:nowrap;color:#fff;transition:opacity .5s var(--ease),transform .6s var(--ease)}@media (min-width:2561px){.sc-stage .sp-flag{font-size:max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px))}}
.sc-stage .sp-c .sp-flag{color:var(--lime)}
.sc-stage .sp-tick{grid-column:4;position:relative;width:10px;height:10px;transform:rotate(45deg);border:1px solid var(--blue-300);transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.sc-stage .sp-row.seen .sp-tick{background:var(--blue-300)}
.sc-stage .sp-c .sp-tick{background:var(--lime);border-color:var(--lime);box-shadow:0 0 12px rgba(163,217,78,0.55)}
.sc-stage .sp-s .sp-tick{background:#fff;border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,0.5)}
.sc-stage .sp-c .sp-nm,.sc-stage .sp-s .sp-nm{color:#fff}
.sc-stage .sp-c{background:linear-gradient(90deg,rgba(163,217,78,0.08),rgba(163,217,78,0) 70%)}
/* the scan: a band of light across the row it is reading, not a line through the names */
.sc-stage .sp-beam{position:absolute;left:0;right:0;top:0;height:var(--bh,56px);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.07) 30%,rgba(255,255,255,0.1) 70%,rgba(255,255,255,0));opacity:0;pointer-events:none;will-change:transform}
.sc-stage .sp-beam::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.85) 16%,rgba(255,255,255,0.85) 84%,rgba(255,255,255,0))}
.sc-stage .sp-beam::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0));-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.sc-stage .st-rows.pre .sp-flag{opacity:0;transform:translateX(12px)}
.sc-stage .st-rows.pre .sp-row .sp-tick{background:transparent;border-color:var(--blue-300);box-shadow:none}
.sc-stage .st-rows.pre .sp-row{background:transparent}
.sc-stage .st-rows.pre .sp-c .sp-nm,.sc-stage .st-rows.pre .sp-s .sp-nm{color:var(--blue-100)}
.sc-stage .st-rows.pre .sp-row.seen .sp-tick{background:var(--blue-300);border-color:var(--blue-300)}
/* the band: its name, the axis with the needle, the four bands (buttons) */
.sc-stage .st-bname{font-size:clamp(28px,2.6vw,48px);font-weight:700;letter-spacing:-0.02em;line-height:1.05;color:#fff;min-height:1.05em;transition:opacity .4s var(--ease)}@media (min-width:2561px){.sc-stage .st-bname{font-size:max(clamp(28px,2.6vw,48px), min(calc(48.00px + (100vw - 2560px) * 0.00375), 52.80px))}}
.ba-axis{position:relative;height:40px;margin-top:clamp(16px,2.4vh,26px)}
.ba-axis .ba-track{position:absolute;left:0;right:0;top:19px;height:1px;background:var(--rule)}
.ba-axis .ba-seg{position:absolute;top:16px;height:7px;left:calc(var(--k) * 25% + 3px);width:calc(25% - 6px);background:rgba(183,197,208,0.16);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.ba-axis .ba-seg.hit{background:rgba(255,255,255,0.55)}
.ba-axis .ba-seg.on{background:#fff;box-shadow:0 0 12px rgba(255,255,255,0.45)}
.ba-axis .ba-needle-w{position:absolute;left:0;top:0;width:100%;height:100%;transform:translateX(calc(var(--np,40) * 1% - 100%));pointer-events:none;transition:transform .45s var(--ease)}
.ba-axis.scrub .ba-needle-w{transition:none}
.ba-axis .ba-needle{position:absolute;left:100%;top:4px;width:2px;height:32px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,0.7)}
.ba-bands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,22px);margin-top:clamp(18px,2.6vh,28px)}
.ba-band{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;text-align:left;padding:clamp(12px,1.6vh,18px) clamp(14px,1.2vw,20px);background:transparent;border:1px solid var(--hairline);color:inherit;font:inherit;cursor:pointer;transition:border-color .4s var(--ease),background .4s var(--ease)}
.ba-band .ba-name{font-size:clamp(17px,1.35vw,24px);font-weight:600;letter-spacing:-0.01em;color:var(--blue-100);transition:color .4s var(--ease)}@media (min-width:2561px){.ba-band .ba-name{font-size:max(clamp(17px,1.35vw,24px), min(calc(24.00px + (100vw - 2560px) * 0.00188), 26.40px))}}
.ba-band .ba-desc{font-size:clamp(15px,1.02vw,17px);line-height:1.55;color:var(--meta-2);transition:color .4s var(--ease)}@media (min-width:2561px){.ba-band .ba-desc{font-size:max(clamp(15px,1.02vw,17px), min(calc(17.00px + (100vw - 2560px) * 0.00332), 21.25px))}}
.ba-band.lit{border-color:rgba(255,255,255,0.75);background:rgba(255,255,255,0.03)}
.ba-band.lit .ba-name{color:#fff}
.ba-band.lit .ba-desc{color:var(--blue-100)}
.ba-band:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.sc-stage .st-desc{margin-top:clamp(14px,2vh,22px);min-height:4.65em;font-size:clamp(15px,1.05vw,18px);line-height:1.55;color:var(--blue-100);max-width:52ch;transition:opacity .4s var(--ease)}@media (min-width:2561px){.sc-stage .st-desc{font-size:max(clamp(15px,1.05vw,18px), min(calc(18.00px + (100vw - 2560px) * 0.00352), 22.50px))}}
/* short laptops: the stage fits the window on the Start landing */
@media (min-width:960px) and (max-height:700px){
  .sc-stage{padding:18px 24px}
  .sc-stage .st-mount{margin-top:14px}
  .sc-stage .sp-row{min-height:40px}
  .ba-axis{margin-top:10px}
  .ba-bands{margin-top:12px}
  .sc-stage .st-desc{margin-top:10px}
}

/* ---------- S4 + S5 · what you get: the rail ---------- */
#scget .gt-track{position:relative}
#scget .gt-track.pin .gt-stick{position:sticky}
#scget .gt-rail{position:relative;margin-top:clamp(48px,7vh,96px)}
#scget .gt-line{position:absolute;left:0;right:0;top:6px;height:1px;background:var(--rule)}
#scget .gt-line::after{content:"";position:absolute;inset:0;background:#fff;box-shadow:0 0 10px rgba(255,255,255,0.45);transform-origin:left center;transform:scaleX(var(--gp,1))}
#scget .gt-head{position:absolute;top:1px;left:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,0.8);transform:translateX(calc(var(--gp,1) * var(--gw,0px)));opacity:var(--gho,0)}
#scget .gt-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(20px,2.4vw,48px)}
#scget .gt-step{position:relative;padding-top:clamp(34px,5vh,52px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
#scget .gt-node{position:absolute;top:0;left:0;width:13px;height:13px;transform:rotate(45deg);border:1px solid var(--blue-300);background:var(--blue-900);transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
#scget .gt-step.on .gt-node{background:#fff;border-color:#fff;box-shadow:0 0 12px rgba(255,255,255,0.55)}
#scget .gt-step > p{margin-top:clamp(18px,2.4vh,28px);font-size:clamp(17px,1.3vw,22px);line-height:1.55;color:var(--blue-100);max-width:30ch}@media (min-width:2561px){#scget .gt-step > p{font-size:max(clamp(17px,1.3vw,22px), min(calc(22.00px + (100vw - 2560px) * 0.00172), 24.20px))}}
#scget .gt-step > p b{color:#fff;font-weight:600}
#scget .gt-step a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.4);text-underline-offset:4px}
#scget .gt-step a:hover{text-decoration-color:#fff}
#scget .gt-steps.pre .gt-step:not(.on){opacity:0.35;transform:translateY(10px)}
/* the pieces of the result (v0.9): each in a corner-marked frame like the stage's; they play once as their step is reached */
#scget .gt-frag{position:relative;height:clamp(156px,19vh,196px);border:1px solid var(--hairline);background:rgba(6,27,45,0.45);padding:18px clamp(16px,1.4vw,22px)}
/* the band: the needle settles on the example band */
.fr-band{display:flex;flex-direction:column;justify-content:center}
.fr-band .fb-name{font-size:clamp(20px,1.6vw,28px);font-weight:700;letter-spacing:-0.02em;line-height:1.1;color:#fff;opacity:0.35}@media (min-width:2561px){.fr-band .fb-name{font-size:max(clamp(20px,1.6vw,28px), min(calc(28.00px + (100vw - 2560px) * 0.00219), 30.80px))}}
.fr-band .fb-axis{position:relative;height:30px;margin-top:16px}
.fr-band .fb-track{position:absolute;left:0;right:0;top:14px;height:1px;background:var(--rule)}
.fr-band .fb-seg{position:absolute;top:11px;height:7px;left:calc(var(--k) * 25% + 2px);width:calc(25% - 4px);background:rgba(183,197,208,0.16);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.fr-band .fb-seg.hit.on{background:rgba(255,255,255,0.55)}
.fr-band .fb-seg.ex.on{background:#fff;box-shadow:0 0 12px rgba(255,255,255,0.45)}
.fr-band .fb-needle-w{position:absolute;left:0;top:0;width:100%;height:100%;transform:translateX(-100%)}
.fr-band .fb-needle{position:absolute;left:100%;top:0;width:2px;height:30px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,0.7)}
/* the two flagged rows */
.fr-rows{display:flex;flex-direction:column;justify-content:center}
.fr-rows .fr-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.fr-rows .fr-row{display:grid;grid-template-columns:26px minmax(0,1fr) 12px;column-gap:10px;row-gap:4px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hairline)}
.fr-rows .fr-ix{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.12em;color:var(--meta-3)}@media (min-width:2561px){.fr-rows .fr-ix{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
.fr-rows .fr-nm{font-size:clamp(14.5px,1.05vw,17px);font-weight:500;line-height:1.3;color:#fff}@media (min-width:2561px){.fr-rows .fr-nm{font-size:max(clamp(14.5px,1.05vw,17px), min(calc(17.00px + (100vw - 2560px) * 0.00332), 21.25px))}}
.fr-rows .fr-flag{grid-column:2;grid-row:2;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue-100);opacity:0}@media (min-width:2561px){.fr-rows .fr-flag{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
.fr-rows .fr-tick{grid-column:3;grid-row:1;width:10px;height:10px;transform:rotate(45deg);border:1px solid var(--blue-300);transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.fr-rows .fr-row.c .fr-flag{color:#fff}
.fr-rows .fr-row.c.on .fr-tick{background:#fff;border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,0.55)}
.fr-rows .fr-row.s.on .fr-tick{background:var(--blue-300);border-color:var(--blue-300)}
/* the report rising out of its envelope */
.fr-report{overflow:hidden}
.fr-report .rp-slot{position:absolute;left:50%;bottom:52px;top:14px;width:min(176px,72%);transform:translateX(-50%);overflow:hidden}
.fr-report .rp-sheet{position:absolute;left:0;right:0;bottom:0;height:calc(100% - 4px);border:1px solid rgba(183,197,208,0.55);border-bottom:0;background:rgba(9,33,54,0.96);padding:12px 14px;transform:translateY(100%)}
.fr-report .rp-h{display:block;font-size:12.5px;font-weight:600;line-height:1.25;color:#fff;letter-spacing:0}@media (min-width:2561px){.fr-report .rp-h{font-size:max(12.5px, min(calc(12.50px + (100vw - 2560px) * 0.00244), 15.62px))}}
.fr-report .rp-l{display:block;height:1px;width:86%;margin-top:9px;background:rgba(183,197,208,0.45);transform-origin:left center;transform:scaleX(0)}
.fr-report .rp-l:nth-of-type(2n){width:70%}
.fr-report .rp-l.c{height:3px;width:58%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,0.45)}
.fr-report .rp-env{position:absolute;left:50%;bottom:16px;width:min(204px,82%);height:36px;transform:translateX(-50%);overflow:visible}
.fr-report .rp-env path{fill:none;stroke:rgba(183,197,208,0.6);stroke-width:1;vector-effect:non-scaling-stroke}
/* the next step: the Clarity Session's ring, swept once */
.fr-ring{display:flex;align-items:center;justify-content:center}
.fr-ring .fg-svg{display:block;height:100%;width:auto;max-width:100%;overflow:visible}
.fr-ring .fg-base{fill:none;stroke:rgba(183,197,208,0.22);stroke-width:3}
.fr-ring .fg-arc{fill:none;stroke:#fff;stroke-width:4.5;stroke-dasharray:1 1;stroke-dashoffset:1}
.fr-ring .fg-node rect{fill:var(--blue-900);stroke:var(--blue-300);stroke-width:3;transition:fill .3s var(--ease),stroke .3s var(--ease)}
.fr-ring .fg-node.on rect{fill:#fff;stroke:#fff}
.fr-ring .fg-hand{transform-origin:240px 240px;transform:rotate(0deg)}
.fr-ring .fg-hand line{stroke:rgba(255,255,255,0.55);stroke-width:3}
.fr-ring .fg-hand circle{fill:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,0.8))}

/* ---------- S6 · FAQ: the heading held left, the answers right ---------- */
#scfaq .fq-grid{display:grid;grid-template-columns:minmax(0,0.42fr) minmax(0,0.58fr);column-gap:clamp(40px,5vw,120px);align-items:start}
#scfaq .fq-head{position:sticky;top:clamp(110px,16vh,170px)}
#scfaq .fq-list{border-top:1px solid var(--hairline-2);margin-top:clamp(8px,1vh,14px)}
#scfaq .fq-item{border-bottom:1px solid var(--hairline-2);position:relative}
#scfaq .fq-item::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:rgba(255,255,255,0.75);transform:scaleX(var(--fp,1));transform-origin:left center;opacity:calc(1 - var(--fp,1) * 0.6)}
#scfaq .fq-q > span{opacity:calc(0.2 + 0.8 * var(--fp,1));transform:translateX(calc((1 - var(--fp,1)) * 28px))}
#scfaq .fq-q .fq-i{opacity:var(--fp,1)}
#scfaq .fq-item::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:#fff;transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--ease)}
#scfaq .fq-item.open::after{transform:scaleX(1)}
#scfaq h3{margin:0;font-size:inherit;font-weight:inherit}
#scfaq .fq-q{display:flex;width:100%;justify-content:space-between;align-items:center;gap:20px;padding:clamp(22px,3vh,32px) 0;background:none;border:0;color:#fff;text-align:left;font:inherit;font-size:clamp(19px,1.6vw,28px);font-weight:600;letter-spacing:-0.01em;cursor:pointer}@media (min-width:2561px){#scfaq .fq-q{font-size:max(clamp(19px,1.6vw,28px), min(calc(28.00px + (100vw - 2560px) * 0.00219), 30.80px))}}
#scfaq .fq-q:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
#scfaq .fq-i{position:relative;flex:none;width:18px;height:18px}
#scfaq .fq-i::before,#scfaq .fq-i::after{content:"";position:absolute;left:0;top:8.5px;width:18px;height:1px;background:#fff;transition:transform .45s var(--ease)}
#scfaq .fq-i::after{transform:rotate(90deg)}
#scfaq .fq-item.open .fq-i::after{transform:rotate(0deg)}
#scfaq .fq-a{overflow:hidden}
#scfaq .fq-a p{padding:0 0 clamp(22px,3vh,32px);max-width:56ch;font-size:clamp(16.5px,1.2vw,20px);line-height:1.6;color:var(--blue-100)}@media (min-width:2561px){#scfaq .fq-a p{font-size:max(clamp(16.5px,1.2vw,20px), min(calc(20.00px + (100vw - 2560px) * 0.00156), 22.00px))}}

/* ---------- S8 · the close: the held statement ---------- */
#scclose .moment{--hold:70vh}
#scclose h2.stmt.mstmt{margin-top:clamp(20px,2.2vw,40px);font-size:clamp(44px,min(9.4vw,15vh),260px);line-height:0.98;letter-spacing:-0.035em}
#scclose .cl-start{margin-top:clamp(32px,5vh,60px)}
#scclose{padding-bottom:clamp(60px,9vh,120px)}

/* ---------- large screens: the mono micro-layer grows; the held chain may grow with the window ---------- */
@media (min-width:1600px){ #scwhy .wy-chain{max-width:600px} }
@media (min-width:1441px){
  .sp-tag,.sc-stage .sp-ix,.sc-stage .sp-flag,.sc-stage .st-head,.sc-ring .hr-lab{font-size:max(13px, min(calc(8.2px + 0.27vw), 15px))}@media (min-width:2561px){.sp-tag,.sc-stage .sp-ix,.sc-stage .sp-flag,.sc-stage .st-head,.sc-ring .hr-lab{font-size:max(max(13px, min(calc(8.2px + 0.27vw), 15px)), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px))}}
}
/* ---------- narrow desktops and tablets: the splits hold to 960 px ---------- */
@media (max-width:1199px){
  #schero .sh-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr)}
  #schero h1.sh-h1{font-size:clamp(52px,min(8.6vw,15.5vh),240px)}
  .sc-stage .st-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #scget .gt-step > p{font-size:clamp(16px,1.6vw,19px)}
}
@media (max-width:1279px){
  #scget .gt-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  #scget .gt-line,#scget .gt-head{display:none}
  #scget .gt-frag{height:clamp(176px,22vh,210px)}
}
@media (max-width:959px){
  #schero .sh-grid{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .sc-ring{max-width:420px;justify-self:start}
  #scwhy .wy-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  #scwhy .wy-chain{max-width:440px;justify-self:start}
  .sc-stage .st-grid{grid-template-columns:minmax(0,1fr);row-gap:36px}
}
/* ---------- phones ---------- */
@media (max-width:900px){
  #scwhy,#scwhat,#scget,#scfaq{padding:clamp(56px,10vw,80px) 0}
  #schero{min-height:0;padding:clamp(110px,26vw,140px) 0 48px}
  #schero h1.sh-h1{font-size:clamp(44px,13vw,72px)}
  #scwhy h2.stmt,#scwhat h2.stmt,#scget h2.stmt,#scfaq h2.stmt{font-size:clamp(34px,10vw,56px)}
  .sc-stage .sp-row{grid-template-columns:28px minmax(0,1fr) 14px;row-gap:4px;padding:10px 0}
  .sc-stage .sp-flag{grid-column:2;grid-row:2}
  .sc-stage .sp-flag:empty{display:none}
  .sc-stage .sp-tick{grid-column:3;grid-row:1}
  .ba-axis{display:none}
  .ba-band{border-width:0 0 0 2px;border-color:rgba(183,197,208,0.25);padding:10px 0 10px 16px}
  .ba-bands{grid-template-columns:minmax(0,1fr);gap:4px}
  .sc-stage .st-head{flex-wrap:wrap;row-gap:10px}
  .sc-stage .st-head > span:first-child{white-space:nowrap}
  .ba-band.lit{border-color:#fff;background:transparent}
  .sc-ring{max-width:340px}
  #scget .gt-steps{grid-template-columns:minmax(0,1fr)}
  #scfaq .fq-grid{grid-template-columns:minmax(0,1fr)}
  #scfaq .fq-head{position:static;margin-bottom:24px}
  #scclose h2.stmt.mstmt{font-size:clamp(40px,12.5vw,96px)}
  #scwhy .wy-chain{max-width:none}
  #scwhat .wrap{display:flex;flex-direction:column}
  #scwhat .sc-stage{order:3}
  #scwhat .wi-lead{order:4}
  #scget .gt-frag{height:168px}
  #scwhy .ch-ntxt{font-size:16px}
  #scwhy .ch-ltxt,#scwhy .ch-rtxt{font-size:15.5px;letter-spacing:0.06em}
}