/* ============ v0.16 (Phase 2, 2026-09-29): S3 pillar instrument ============
   The signature object v3 (proto_System_pillar-instrument_v3.html) integrated, with the AD relay
   RELAY_2026-09-29_Website-Main-Builder_Signature-Objects_v3-Answers.md applied:
   ghost outline only (1.5 px at 0.6); the workstream chips removed; each row rule ends in a short end tick;
   the one workstream with its own page (Strategy Clarity Session) is a link ending in an arrow.
   All classes carry the pi- prefix and sit under #pillars, clear of the Home shared rules. */
#pillars .pi{position:relative;height:340vh;margin-top:clamp(24px,4vh,48px)}
#pillars .pi-stage{
  --dial:clamp(150px,min(26vh,22vw),300px);
  --pt:clamp(28px,6vh,84px);
  --rg:clamp(18px,3vh,34px);
  position:sticky;top:0;height:100vh;padding-top:var(--pt);padding-bottom:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto;
  column-gap:clamp(36px,4vw,64px);row-gap:var(--rg);align-content:start}
#pillars .pi-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Row A, left: the dial, set against the gutter so the ghost reads as its readout */
#pillars .pi-dcell{grid-column:1;grid-row:1;display:flex;justify-content:flex-end;min-width:0}
#pillars .pi-ring{width:var(--dial);height:var(--dial);display:block;overflow:visible}
#pillars .pi-ring .tk{stroke:var(--blue-500);stroke-width:1}
#pillars .pi-ring .tk.maj{stroke:var(--blue-300)}
#pillars .pi-ring .orb{fill:none;stroke:var(--blue-700);stroke-width:1}
#pillars .pi-ring .arc{fill:none;stroke:var(--blue-100);stroke-width:1;transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1)}
#pillars .pi-ring .nd{fill:var(--blue-900);stroke:var(--blue-300);stroke-width:1;transition:fill .5s,stroke .5s}
#pillars .pi-ring .nd.on{fill:var(--blue-100);stroke:var(--blue-100)}
#pillars .pi-ring .ndl{font:500 10px var(--mono);fill:var(--blue-300);letter-spacing:.1em}@media (min-width:2561px){#pillars .pi-ring .ndl{font-size:max(10px, min(calc(10.00px + (100vw - 2560px) * 0.00195), 12.50px))}}
#pillars .pi-ring .spoke{stroke:var(--blue-300);stroke-width:1;transition:transform .9s cubic-bezier(.2,.7,.2,1);transform-origin:170px 170px}
#pillars .pi-ring .hub{fill:var(--blue-900);stroke:var(--blue-300);stroke-width:1}

/* Row A, right: the ghost numeral, a readout. Cap height 0.6 of the dial (Artegra 500 cap height is 0.70 em). Outline 1.5 px at 0.6. */
#pillars .pi-gcell{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:flex-start;min-width:0}
#pillars .pi-ghost{display:block;font-family:var(--sans);font-weight:500;font-size:calc(var(--dial) * 0.6 / 0.70);line-height:.7;
  letter-spacing:-.02em;margin-left:-.05em;white-space:nowrap;pointer-events:none;user-select:none;
  color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px var(--blue-100);
  opacity:.6;transition:opacity .25s var(--ease)}
@supports (text-box:trim-both cap alphabetic){ #pillars .pi-ghost{line-height:1;text-box:trim-both cap alphabetic} }

/* Row B, left: the pillar list. Its top rule and the panel's ruler line are one line. */
#pillars .pi-lwrap{grid-column:1;grid-row:2;position:relative;align-self:start;min-width:0}
#pillars .pi-idx{list-style:none;margin:0;padding:0;border-top:1px solid var(--blue-500)}
#pillars .pi-row{border-bottom:1px solid var(--blue-700);position:relative}
#pillars .pi-rbtn{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:44px 1fr 14px;align-items:center;gap:10px;width:100%;padding:13px 4px 13px 0;position:relative}
#pillars .pi-rbtn:focus-visible{outline:1px solid var(--blue-300);outline-offset:2px}
#pillars .pi-rix{font:500 11px var(--mono);font-size:12px;letter-spacing:.14em;color:var(--meta-3);transition:color .4s}@media (min-width:2561px){#pillars .pi-rix{font-size: max(12px, max(11px, min(calc(11.00px + (100vw - 2560px) * 0.00215), 13.75px)))}}
#pillars .pi-rnm{font-size:17px;color:var(--blue-300);transition:color .4s,transform .5s}@media (min-width:2561px){#pillars .pi-rnm{font-size:max(17px, min(calc(17.00px + (100vw - 2560px) * 0.00332), 21.25px))}}
#pillars .pi-rdi{width:7px;height:7px;border:1px solid var(--blue-500);transform:rotate(45deg);transition:background .4s,border-color .4s,transform .4s}
#pillars .pi-row.on .pi-rix{color:var(--blue-100)}
#pillars .pi-row.on .pi-rnm{color:#fff;transform:translateX(6px)}
#pillars .pi-row.on .pi-rdi{background:var(--blue-100);border-color:var(--blue-100)}
/* travelling light: sits on the active row's bottom rule; moves only while faded out */
#pillars .pi-light{position:absolute;left:0;top:0;height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--blue-100) 40%,transparent);opacity:0;transition:opacity .25s var(--ease);pointer-events:none}
#pillars .pi-stage.lit .pi-light{opacity:.9}
#pillars .pi-stage.lit.swap .pi-light{opacity:0}
#pillars .pi-drawer{display:none}

/* Row B, right: the panel. Its top border is the ruler line. */
#pillars .pi-right{grid-column:2;grid-row:2;position:relative;align-self:start;min-width:0;border-top:1px solid var(--blue-500)}
#pillars .pi-dhead{position:absolute;left:0;right:0;bottom:calc(100% + 1px);display:flex;align-items:flex-end;gap:14px;pointer-events:none;margin:0}
#pillars .pi-dhead .pi-rl{font:500 11px/1 var(--mono);font-size:12px;letter-spacing:.14em;color:var(--blue-300);padding-bottom:4px}@media (min-width:2561px){#pillars .pi-dhead .pi-rl{font-size: max(12px, max(11px, min(calc(11.00px + (100vw - 2560px) * 0.00215), 13.75px)))}}
#pillars .pi-dhead .pi-ruler{flex:1;height:8px;background:repeating-linear-gradient(90deg,var(--blue-500) 0 1px,transparent 1px 12px)}
#pillars .pi-dnm{font-size:clamp(26px,2.3vw,36px);font-weight:500;color:#fff;letter-spacing:-.015em;margin:18px 0 0;line-height:1.1}@media (min-width:2561px){#pillars .pi-dnm{font-size:max(clamp(26px,2.3vw,36px), min(calc(36.00px + (100vw - 2560px) * 0.00281), 39.60px))}}
#pillars .pi-lead{font-size:18px;line-height:1.5;color:var(--blue-100);margin:10px 0 0;max-width:600px}@media (min-width:2561px){#pillars .pi-lead{font-size:max(18px, min(calc(18.00px + (100vw - 2560px) * 0.00352), 22.50px))}}
#pillars .pi-sub{font-size:15.5px;line-height:1.55;font-weight:300;color:var(--blue-300);margin:8px 0 0;max-width:600px}@media (min-width:2561px){#pillars .pi-sub{font-size:max(15.5px, min(calc(15.50px + (100vw - 2560px) * 0.00303), 19.38px))}}
/* Output: mono label in Blue100, the sentence in Artegra 500 at 16 px, lime; left rule Blue100 */
#pillars .pi-out{margin:18px 0 0;padding-left:14px;border-left:1px solid var(--blue-100);max-width:600px}
#pillars .pi-olab{display:block;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-100)}@media (min-width:2561px){#pillars .pi-olab{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
#pillars .pi-osen{display:block;margin-top:8px;font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.45;color:var(--lime)}@media (min-width:2561px){#pillars .pi-osen{font-size:max(16px, min(calc(16.00px + (100vw - 2560px) * 0.00313), 20.00px))}}
#pillars .pi-wh{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--meta-2);margin:22px 0 0}@media (min-width:2561px){#pillars .pi-wh{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
/* workstreams: no chips; each row rule ends in a short vertical tick (the 01 ... 06 ruler's tick), structure only */
#pillars .pi-ws{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--blue-700);position:relative}
#pillars .pi-ws::before{content:"";position:absolute;right:0;top:-6px;width:1px;height:6px;background:var(--blue-500)}
#pillars .pi-ws li{position:relative;border-bottom:1px solid var(--blue-700);font-size:16px;color:#E6ECF1}@media (min-width:2561px){#pillars .pi-ws li{font-size:max(16px, min(calc(16.00px + (100vw - 2560px) * 0.00313), 20.00px))}}
#pillars .pi-ws li:not(.pi-wl)::after{content:"";position:absolute;right:0;bottom:0;width:1px;height:6px;background:var(--blue-500)}
#pillars .pi-ws .pi-wr,#pillars .pi-ws .pi-wl a{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:11px 0}
#pillars .pi-ws .pi-n{font:500 10px var(--mono);font-size:12px;color:var(--meta-3);letter-spacing:.1em}@media (min-width:2561px){#pillars .pi-ws .pi-n{font-size: max(12px, max(10px, min(calc(10.00px + (100vw - 2560px) * 0.00195), 12.50px)))}}
/* the one workstream with its own page: a link ending in an arrow (as the Contact route rows) */
#pillars .pi-ws .pi-wl a{color:#E6ECF1;text-decoration:none;transition:color .3s}
#pillars .pi-ws .pi-arr{font:500 14px/1 var(--mono);color:var(--blue-100);transition:transform .3s var(--ease),color .3s;padding-right:2px}@media (min-width:2561px){#pillars .pi-ws .pi-arr{font-size:max(14px, min(calc(14.00px + (100vw - 2560px) * 0.00273), 17.50px))}}
#pillars .pi-ws .pi-wl a:focus-visible{outline:1px solid var(--blue-300);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
 #pillars .pi-ws .pi-wl a:hover{color:#fff}
 #pillars .pi-ws .pi-wl a:hover .pi-arr{transform:translateX(4px);color:#fff}
}
/* the swap rule: out 0.25 s, then in 0.25 s (ghost, panel and light on one beat) */
#pillars .pi-right .pi-dnm,#pillars .pi-right .pi-body{transition:opacity .25s var(--ease),transform .25s var(--ease)}
#pillars .pi-stage.swap .pi-ghost{opacity:0}
#pillars .pi-stage.swap .pi-right .pi-dnm,#pillars .pi-stage.swap .pi-right .pi-body{opacity:0;transform:translateY(6px)}

/* reveal on view */
#pillars .pi-pre .pi-row,#pillars .pi-pre .pi-ring,#pillars .pi-pre .pi-right,#pillars .pi-pre .pi-gcell{opacity:0;transform:translateY(14px)}
#pillars .pi-row,#pillars .pi-ring,#pillars .pi-right,#pillars .pi-gcell{transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
#pillars .pi-row:nth-child(2){transition-delay:.05s}#pillars .pi-row:nth-child(3){transition-delay:.1s}#pillars .pi-row:nth-child(4){transition-delay:.15s}#pillars .pi-row:nth-child(5){transition-delay:.2s}#pillars .pi-row:nth-child(6){transition-delay:.25s}

/* short desktop viewports (most laptops: 1366x768, and 1920x1080 at 125 or 150% scaling, leave 600 to 760 px of height):
   tighten the dial row and the panel so the longest pillar (06) still fits the pinned screen. The page module adds a last
   safety net: if the tallest pillar still overflows, the sticky stage rises by the overflow so the panel stays whole. */
@media (min-width:901px) and (max-height:880px){
 #pillars .pi-stage{--dial:clamp(120px,min(19vh,20vw),220px);--pt:clamp(20px,5vh,56px);--rg:clamp(16px,2.6vh,28px)}
 #pillars .pi-dnm{margin-top:12px;font-size:clamp(24px,2.1vw,31px)}
 #pillars .pi-lead{font-size:16.5px;margin-top:6px}
 #pillars .pi-sub{font-size:14.5px;margin-top:6px}
 #pillars .pi-out{margin-top:12px}
 #pillars .pi-wh{margin-top:14px}
 #pillars .pi-ws .pi-wr,#pillars .pi-ws .pi-wl a{padding:8px 0}
 #pillars .pi-ws li{font-size:15px}
 #pillars .pi-rbtn{padding:11px 4px 11px 0}
}
@media (min-width:901px) and (max-height:700px){
 #pillars .pi-stage{--dial:clamp(96px,17vh,140px);--pt:clamp(16px,3.5vh,32px);--rg:14px}
 #pillars .pi-dnm{margin-top:10px;font-size:clamp(22px,1.9vw,28px)}
 #pillars .pi-lead{font-size:15.5px;line-height:1.45}
 #pillars .pi-sub{font-size:14px;line-height:1.5}
 #pillars .pi-osen{font-size:15px}
 #pillars .pi-wh{margin-top:12px}
 #pillars .pi-ws .pi-wr,#pillars .pi-ws .pi-wl a{padding:7px 0}
 #pillars .pi-ws li{font-size:14.5px}
 #pillars .pi-rbtn{padding:9px 4px 9px 0}
 #pillars .pi-rnm{font-size:16px}
}

/* phone and tablet: no dial and no ghost; the accordion */
@media (max-width:900px){
 #pillars .pi{height:auto}
 #pillars .pi-stage{position:relative;height:auto;display:block;padding-top:0;padding-bottom:40px}
 #pillars .pi-dcell,#pillars .pi-gcell,#pillars .pi-right,#pillars .pi-light{display:none}
 #pillars .pi-rbtn{padding:16px 0}
 #pillars .pi-rnm{font-size:16px}
 #pillars .pi-row.on .pi-rnm{transform:none}
 #pillars .pi-row.open .pi-rdi{transform:rotate(225deg);background:var(--blue-100);border-color:var(--blue-100)}
 #pillars .pi-drawer{display:block;overflow:hidden;height:0;transition:height .5s cubic-bezier(.2,.7,.2,1)}
 #pillars .pi-drawer .pi-in{padding:0 0 22px 54px}
 #pillars .pi-drawer .pi-lead{font-size:15px;margin-top:0}
 #pillars .pi-drawer .pi-sub{font-size:14.5px}
 #pillars .pi-drawer .pi-out{margin-top:16px}
 #pillars .pi-drawer .pi-osen{color:var(--blue-100)}
 #pillars .pi-row.open .pi-drawer .pi-osen{color:var(--lime)}
 #pillars .pi-drawer .pi-wh{margin-top:18px}
 #pillars .pi-drawer .pi-ws li{font-size:14px}
 #pillars .pi-drawer .pi-ws .pi-wr,#pillars .pi-drawer .pi-ws .pi-wl a{grid-template-columns:22px 1fr auto}
}
@media (prefers-reduced-motion:reduce){
 #pillars .pi *,#pillars .pi *::before,#pillars .pi *::after{transition:none!important;animation:none!important}
 #pillars .pi-pre .pi-row,#pillars .pi-pre .pi-ring,#pillars .pi-pre .pi-right,#pillars .pi-pre .pi-gcell{opacity:1;transform:none}
}


/* =====================================================================================================
   Meterknot System v0.17 (2026-10-02, MTKN-MC · Website Main Builder): the page's own CSS, in one block.
   Content flow: Strategist relay "System-Content-Flow v1.0" (ruled by Sotiris 2026-10-02): engine hero, 01 pillars,
   02 how it is installed, 03 where to start, 04 how we report, 05 FAQ. Design: the Home v0.87 grammar applied, not copied
   (critique 2026-10-02, the six inner-page rules, a working proposal). Display headings use the Home token
   (clamp(40px,6vw,190px), line-height 1.08, -0.03em). Everything is scoped under the section ids, clear of the Home rules.
   ===================================================================================================== */

/* ---------- shared on this page: the display heading token and the section rhythm (Home's values) ---------- */
#pillars h2.stmt,#install h2.stmt,#where-to-start h2.stmt,#reporting h2.stmt,#faq h2.stmt{font-size:clamp(40px,6vw,190px);line-height:1.08;letter-spacing:-0.03em;font-weight:700;max-width:none;text-wrap:balance;margin-top:26px}
#install,#where-to-start{padding:clamp(100px,13vh,180px) 0}
#reporting{padding:0 0 clamp(100px,13vh,180px)}
#reporting h2.stmt.mstmt{font-size:clamp(40px,min(8.6vw,14.5vh),270px);margin-top:clamp(20px,2.2vw,40px)}
#faq{padding:clamp(100px,13vh,180px) 0 clamp(110px,14vh,190px)}
#pillars{padding:clamp(100px,13vh,180px) 0 0}
#pillars .wrap,#install .wrap,#where-to-start .wrap,#reporting .wrap,#faq .wrap{max-width:none}
.sx-head{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,0.78fr);column-gap:clamp(32px,4vw,96px);align-items:start;margin:0}
.sx-head > h2{grid-column:1 / -1}
#pillars .sx-head .ebody,#install .sx-head .ebody,#where-to-start .sx-head .ebody,#reporting .sx-head .ebody{grid-column:2;margin:clamp(20px,3vh,36px) 0 0;padding:0;color:var(--blue-100);font-size:clamp(16.5px,1.2vw,19px);line-height:1.6;max-width:44ch}@media (min-width:2561px){#pillars .sx-head .ebody,#install .sx-head .ebody,#where-to-start .sx-head .ebody,#reporting .sx-head .ebody{font-size:max(clamp(16.5px,1.2vw,19px), min(calc(19.00px + (100vw - 2560px) * 0.00371), 23.75px))}}
#where-to-start h2.stmt{font-size:clamp(40px,7vw,220px)}
@media (max-width:900px){
  #pillars h2.stmt,#install h2.stmt,#where-to-start h2.stmt,#reporting h2.stmt,#faq h2.stmt{font-size:clamp(34px,9.4vw,66px);margin-top:20px}
  #install,#where-to-start{padding:clamp(52px,8vw,72px) 0}
  #reporting{padding:0 0 clamp(52px,8vw,72px)}
  #reporting .moment-in{padding-top:clamp(52px,8vw,72px)}
  #reporting h2.stmt.mstmt{font-size:clamp(32px,9.2vw,72px)}
  #reporting .mbr{display:none}
  #faq{padding:clamp(52px,8vw,72px) 0 clamp(72px,12vw,96px)}
  #pillars{padding:clamp(52px,8vw,72px) 0 0}
  .sx-head{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .sx-head > h2,#pillars .sx-head .ebody,#where-to-start .sx-head .ebody{grid-column:1;padding-bottom:0}
}

/* =====================================================================================================
   THE ENGINE HERO (#model). Left: the H1, the sub, the CTAs, then the five stages, which narrate on scroll.
   Right: the S2 v2.2 Hero master (byte-verbatim, cropped to the disc), sticky from the first frame, so the disc never moves
   while the text passes it. The sticky top equals the disc's natural top (both set by the page module from the disc height).
   ===================================================================================================== */
#model{--stk:120px;--mfs:clamp(56px,min(9.6vw,15.5vh),260px);padding:0}
#model .sx-grid{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);column-gap:clamp(36px,4vw,96px);padding:0 var(--pad);align-items:start}
#model .sx-col{min-width:0;position:relative;z-index:2}
#model .sx-lede{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(110px,13vh,150px) 0 clamp(60px,9vh,110px)}
#model h1{margin:0}
#model .sx-h1{display:block;font-weight:700;color:#fff;letter-spacing:-0.03em;padding-bottom:calc(var(--mfs) * 0.16);margin-bottom:calc(var(--mfs) * -0.16)} /* the descender room of the big line, on the wrapper the intro clips */
#model .sx-k{display:block;font-size:clamp(26px,min(3.2vw,5.4vh),84px);font-weight:600;line-height:1.1;letter-spacing:-0.015em;color:var(--blue-100);margin-bottom:0.18em}
#model .sx-m{display:block;font-size:var(--mfs);line-height:0.98}
#model .sx-sub{margin-top:clamp(24px,3.2vh,40px);max-width:32ch;font-size:clamp(18px,1.5vw,24px);line-height:1.5;font-weight:300;color:#fff;text-wrap:balance}@media (min-width:2561px){#model .sx-sub{font-size:max(clamp(18px,1.5vw,24px), min(calc(24.00px + (100vw - 2560px) * 0.00188), 26.40px))}}
#model .ctas{margin-top:clamp(26px,3.6vh,44px);display:flex;flex-direction:column;align-items:flex-start;gap:0}
#model .talk{font-size:15px;color:var(--meta-2);padding-left:21px;line-height:1.5;margin-top:18px}@media (min-width:2561px){#model .talk{font-size:max(15px, min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px))}}
#model .talk a{color:#fff;font-weight:500;border-bottom:1px solid var(--rule)}
#model .talk a:hover{border-color:var(--lime);color:var(--lime)}

/* the disc column: its padding is the sticky top, so the disc's natural place and its pinned place are the same */
#model .sx-disc{min-width:0;padding-top:var(--stk);height:100%}
#model .sx-stick{position:sticky;top:var(--stk)}
#model .sx-frame{position:relative;width:min(100%,calc((100svh - 232px) * 1.13));margin-left:auto}
#model .sx-frame .disc-crop{aspect-ratio:1.13/1;width:100%}
#model .sx-frame .fk{position:absolute;width:16px;height:16px;opacity:0.7;z-index:3}
#model .sx-frame .fk::before{content:"";position:absolute;width:16px;height:1px;background:rgba(183,197,208,0.55);top:0;left:0}
#model .sx-frame .fk::after{content:"";position:absolute;width:1px;height:16px;background:rgba(183,197,208,0.55);top:0;left:0}
#model .sx-frame .k1{top:0;left:0}#model .sx-frame .k2{top:0;right:0;transform:rotate(90deg)}
#model .sx-frame .k3{bottom:0;right:0;transform:rotate(180deg)}#model .sx-frame .k4{bottom:0;left:0;transform:rotate(270deg)}
#model .sx-cap{margin:18px 0 0 auto;width:min(100%,calc((100svh - 232px) * 1.13));font-size:14.5px;line-height:1.6;color:var(--meta-2);font-weight:300;display:grid;grid-template-columns:auto 1fr;column-gap:16px}@media (min-width:2561px){#model .sx-cap{font-size:max(14.5px, min(calc(14.50px + (100vw - 2560px) * 0.00283), 18.12px))}}
#model .sx-cap .mono{font-size:11px;letter-spacing:0.18em;color:var(--meta-3);padding-top:3px;white-space:nowrap}@media (min-width:2561px){#model .sx-cap .mono{font-size:max(11px, min(calc(11.00px + (100vw - 2560px) * 0.00215), 13.75px))}}
#model .sx-cap .sx-key{grid-column:2;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--meta-3);text-transform:uppercase}@media (min-width:2561px){#model .sx-cap .sx-key{font-size:max(11px, min(calc(11.00px + (100vw - 2560px) * 0.00215), 13.75px))}}
#model .scrollcue{left:0;bottom:34px}
@media (max-height:760px){ #model .scrollcue{display:none} }

/* the five stages: each a reading stop beside the pinned disc; the one at the reading line is lit */
#model .sx-stages{list-style:none;margin:0;padding:0 0 clamp(80px,14vh,180px)}
#model .sx-stage{min-height:44vh;display:flex;flex-direction:column;justify-content:center;opacity:0.38;transition:opacity .6s var(--ease)}
#model .sx-stage.on{opacity:1}
#model .sx-span{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.18em;color:var(--meta-2);text-transform:uppercase}@media (min-width:2561px){#model .sx-span{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
#model .sx-span .sx-ix{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;position:relative;color:#fff;font-size:12px;letter-spacing:0.02em}@media (min-width:2561px){#model .sx-span .sx-ix{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
#model .sx-span .sx-ix::before{content:"";position:absolute;inset:4px;border:1px solid var(--blue-100);transform:rotate(45deg);background:var(--blue-900)}
#model .sx-span .sx-ix b{position:relative;font-weight:700}
#model .sx-span .sx-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--rule),rgba(183,197,208,0.03))}
#model .sx-sname{margin-top:18px;font-size:clamp(36px,3.7vw,92px);font-weight:700;line-height:1.04;letter-spacing:-0.025em;color:#fff}
#model .sx-desc{margin-top:16px;max-width:40ch;font-size:clamp(17px,1.3vw,22px);line-height:1.55;font-weight:300;color:var(--blue-100)}@media (min-width:2561px){#model .sx-desc{font-size:max(clamp(17px,1.3vw,22px), min(calc(22.00px + (100vw - 2560px) * 0.00172), 24.20px))}}
/* OUTPUT in the S2 notation: a lime mono label, the output in white (S2 masters; the logged S2 lime exception) */
#model .sx-out{margin-top:22px;max-width:44ch;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;padding-top:14px;border-top:1px solid var(--hairline)}
#model .sx-olab{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:0.2em;color:var(--lime);text-transform:uppercase;transition:color .5s var(--ease)}@media (min-width:2561px){#model .sx-olab{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
#model .sx-stage:not(.on) .sx-olab{color:var(--blue-100)} /* one lime OUTPUT label per view: the lit stage's */
#model .sx-otx{font-size:clamp(16px,1.15vw,19px);font-weight:500;line-height:1.45;color:#fff}@media (min-width:2561px){#model .sx-otx{font-size:max(clamp(16px,1.15vw,19px), min(calc(19.00px + (100vw - 2560px) * 0.00371), 23.75px))}}
@media (min-width:1441px){
  #model .talk{font-size:min(calc(10.18px + 0.3348vw), 19.5px)}@media (min-width:2561px){#model .talk{font-size:max(min(calc(10.18px + 0.3348vw), 19.5px), min(calc(18.75px + (100vw - 2560px) * 0.00366), 23.44px))}}
  #model .sx-cap{font-size:min(calc(9.9px + 0.32vw), 18px)}@media (min-width:2561px){#model .sx-cap{font-size:max(min(calc(9.9px + 0.32vw), 18px), min(calc(18.00px + (100vw - 2560px) * 0.00352), 22.50px))}}
  #model .sx-span,#model .sx-olab{font-size:min(calc(8.2px + 0.27vw), 15px)}@media (min-width:2561px){#model .sx-span,#model .sx-olab{font-size:max(min(calc(8.2px + 0.27vw), 15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px))}}
}
@media (min-width:901px) and (max-height:760px){
  #model .sx-frame,#model .sx-cap{width:min(100%,calc((100svh - 252px) * 1.13))}
}
@media (min-width:901px) and (max-height:660px){
  #model .sx-frame,#model .sx-cap{width:min(100%,calc((100svh - 300px) * 1.13))}
  #model .sx-stage{min-height:50vh}
}
@media (max-width:900px){
  #model .sx-grid{grid-template-columns:minmax(0,1fr);padding:0 var(--pad)}
  #model .sx-lede{min-height:0;padding:clamp(110px,26vw,140px) 0 34px}
  #model .sx-k{font-size:clamp(22px,6vw,34px)}
  #model{--mfs:clamp(48px,13.4vw,104px)}
  #model .sx-disc{grid-row:2;padding-top:0}
  #model .sx-stick{position:relative;top:0}
  #model .sx-frame{width:calc(100% + var(--pad));margin-left:calc(-0.5 * var(--pad))}
  #model .sx-frame .fk{display:none}
  #model .sx-cap{width:100%}
  #model .sx-cap .sx-key{grid-column:1}
  #model .scrollcue{display:none}
  #model .sx-cap{grid-template-columns:1fr;row-gap:8px}
  #model .sx-col{display:contents}
  #model .sx-stages{grid-row:3;padding:34px 0 10px}
  #model .sx-stage{min-height:0;opacity:1;padding:30px 0 6px}
  #model .sx-sname{font-size:clamp(30px,8.6vw,44px);margin-top:14px}
  #model .sx-desc{font-size:16.5px}
  #model .sx-olab{color:var(--blue-100)} /* phones: every stage is on screen at once, so the S2 lime OUTPUT label would repeat; Blue100 here */
}

/* =====================================================================================================
   01 · THE SIX PILLARS: the head as a split (statement left, intro right), then the pillar instrument (v0.16, approved),
   the dial one step larger where the height allows. The CTA after the pillars (SP 2.4) as a quiet full-width row.
   ===================================================================================================== */
#pillars .sx-head{margin-top:0}
#pillars .pi{margin-top:clamp(28px,5vh,64px)}
#pillars .pcta{padding-top:clamp(60px,9vh,110px)}
#pillars .pcta .in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,3vw,60px);border-top:1px solid var(--hairline-2);border-bottom:1px solid var(--hairline);padding:clamp(28px,4vh,44px) 0}
#pillars .pcta .q{font-size:clamp(22px,2.2vw,44px);font-weight:600;line-height:1.25;letter-spacing:-0.015em;color:#fff;max-width:30ch;text-wrap:balance}@media (min-width:2561px){#pillars .pcta .q{font-size:max(clamp(22px,2.2vw,44px), min(calc(44.00px + (100vw - 2560px) * 0.00344), 48.40px))}}
@media (max-width:900px){
  #pillars .pcta{padding-top:36px}
  #pillars .pcta .in{grid-template-columns:minmax(0,1fr);row-gap:22px}
  #pillars .pcta .btn{white-space:normal;max-width:100%}
}

/* =====================================================================================================
   02 · HOW IT IS INSTALLED: a time-axis instrument. Five phases as bars on one axis (weeks; months every fourth week),
   so the overlaps read at a glance. Words verbatim (SP v1.5 2.3); the axis carries ticks only, no new labels.
   Domain: 20 weeks; open-ended phases ("and beyond") fade out over the last four.
   ===================================================================================================== */
#install .tl{margin-top:clamp(40px,6vh,72px);--meta-w:clamp(220px,19vw,330px);--tx-w:clamp(300px,27vw,520px);--gap:clamp(22px,2.4vw,48px)}
#install .tl-axis,#install .tl-row{display:grid;grid-template-columns:var(--meta-w) minmax(0,1fr) var(--tx-w);column-gap:var(--gap);align-items:center}
#install .tl-axis{height:26px;align-items:end}
#install .tl-ticks{grid-column:2;position:relative;height:100%;
  background:
    repeating-linear-gradient(90deg,rgba(183,197,208,0.55) 0 1px,transparent 1px calc(100% / 5)) bottom left / 100% 12px no-repeat,
    repeating-linear-gradient(90deg,rgba(183,197,208,0.28) 0 1px,transparent 1px calc(100% / 20)) bottom left / 100% 6px no-repeat;
  border-bottom:1px solid var(--rule)}
#install .tl-ticks::after{content:"";position:absolute;right:0;bottom:-1px;width:1px;height:12px;background:rgba(183,197,208,0.55)}
#install .tl-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--hairline)}
#install .tl-row{padding:clamp(18px,2.6vh,28px) 0;border-top:1px solid var(--hairline);position:relative;transition:background .4s var(--ease)}
#install .tl-row:first-child{border-top:0}
#install .tl-meta{display:grid;grid-template-columns:38px 1fr;align-items:baseline}
#install .tl-ix{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.14em;color:var(--meta-3)}@media (min-width:2561px){#install .tl-ix{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
#install .tl-nm{font-size:clamp(20px,1.7vw,32px);font-weight:600;letter-spacing:-0.01em;color:#fff;line-height:1.15}@media (min-width:2561px){#install .tl-nm{font-size:max(clamp(20px,1.7vw,32px), min(calc(32.00px + (100vw - 2560px) * 0.00250), 35.20px))}}
#install .tl-wk{position:absolute;left:calc(var(--a) / 20 * 100%);bottom:calc(50% + 12px);margin-left:-6px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--meta-2);white-space:nowrap;line-height:1;transition:color .4s var(--ease)}@media (min-width:2561px){#install .tl-wk{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
/* the track: month lines every fourth week (the axis's major ticks), the bar from week a to week b */
#install .tl-track{position:relative;height:100%;min-height:64px;
  background:repeating-linear-gradient(90deg,rgba(183,197,208,0.09) 0 1px,transparent 1px calc(100% / 5)) 0 0 / 100% 100% no-repeat}
#install .tl-bar{position:absolute;top:50%;height:4px;margin-top:-2px;left:calc(var(--a) / 20 * 100%);width:calc((var(--b) - var(--a)) / 20 * 100%);background:var(--blue-100);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
#install .tl-bar::before{content:"";position:absolute;left:-6px;top:-4px;width:11px;height:11px;border:1px solid var(--blue-100);background:var(--blue-900);transform:rotate(45deg);transition:border-color .4s var(--ease),background .4s var(--ease)}
#install .tl-bar::after{content:"";position:absolute;right:0;top:-6px;width:1px;height:16px;background:var(--blue-100)}
#install .tl-row.open .tl-bar{width:calc((20 - var(--a)) / 20 * 100%);background:linear-gradient(90deg,var(--blue-100) 0,var(--blue-100) calc((16 - var(--a)) / (20 - var(--a)) * 100%),rgba(183,197,208,0) 100%)}
#install .tl-row.open .tl-bar::after{display:none}
#install .tl-tx{font-size:clamp(15px,1.05vw,18px);line-height:1.6;font-weight:300;color:var(--blue-100)}@media (min-width:2561px){#install .tl-tx{font-size:max(clamp(15px,1.05vw,18px), min(calc(18.00px + (100vw - 2560px) * 0.00352), 22.50px))}}
#install .tl-tx .tl-o{color:#fff;font-weight:500}
@media (hover:hover) and (pointer:fine){
  #install .tl-row:hover{background:linear-gradient(90deg,rgba(8,35,58,0.0),rgba(8,35,58,0.45) 30%,rgba(8,35,58,0.45) 70%,rgba(8,35,58,0))}
  #install .tl-row:hover .tl-bar{background:#fff;box-shadow:0 0 14px rgba(183,197,208,0.45)}
  #install .tl-row.open:hover .tl-bar{background:linear-gradient(90deg,#fff 0,#fff calc((16 - var(--a)) / (20 - var(--a)) * 100%),rgba(255,255,255,0) 100%)}
  #install .tl-row:hover .tl-bar::before{border-color:#fff;background:#fff}
  #install .tl-row:hover .tl-wk{color:#fff}
}
#install .tl-more{display:flex;justify-content:flex-end;margin-top:clamp(26px,4vh,44px)}
#install .tl-more .tlink{font-size:clamp(17px,1.2vw,21px)}@media (min-width:2561px){#install .tl-more .tlink{font-size:max(clamp(17px,1.2vw,21px), min(calc(21.00px + (100vw - 2560px) * 0.00164), 23.10px))}}
@media (min-width:901px) and (max-width:1199px){
  #install .tl-axis,#install .tl-row{grid-template-columns:var(--meta-w) minmax(0,1fr)}
  #install .tl-axis > :last-child{display:none}
  #install .tl-tx{grid-column:2;margin-top:10px}
}
@media (max-width:900px){
  #install .tl-axis{display:none}
  #install .tl-row{grid-template-columns:minmax(0,1fr);row-gap:14px;padding:22px 0}
  #install .tl-track{min-height:46px;background:
    repeating-linear-gradient(90deg,rgba(183,197,208,0.14) 0 1px,transparent 1px calc(100% / 5)) 0 0 / 100% 100% no-repeat;border-bottom:1px solid var(--hairline)}
  #install .tl-more{justify-content:flex-start}
}

/* =====================================================================================================
   03 · WHERE TO START: the entry ladder. Four rungs in order of commitment, drawn as a staircase that rises to the right:
   each step's tread is a hairline, its riser the step's left edge, the bottoms share one line.
   ===================================================================================================== */
#where-to-start .lad{list-style:none;margin:clamp(44px,7vh,88px) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,0.95fr) minmax(0,1.15fr) minmax(0,1.15fr);align-items:stretch;border-bottom:1px solid var(--rule);--rise:clamp(44px,7vh,96px)}
#where-to-start .lad-step{position:relative;margin-top:calc(var(--rise) * (3 - var(--i)));border-top:1px solid var(--rule);border-left:1px solid var(--hairline);padding:clamp(22px,2.6vw,40px) clamp(20px,2vw,36px) clamp(30px,4vh,48px);
  background:linear-gradient(180deg,rgba(8,35,58,0.62) 0,rgba(6,27,45,0.28) 55%,rgba(6,27,45,0) 100%);display:flex;flex-direction:column;align-items:flex-start;min-width:0}
#where-to-start .lad-step:first-child{border-left:0}
#where-to-start .lad-step::before{content:"";position:absolute;left:-1px;top:-1px;width:28%;height:1px;background:var(--blue-100);opacity:0.75}
#where-to-start .lad-ix{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.18em;color:var(--meta-2)}@media (min-width:2561px){#where-to-start .lad-ix{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
#where-to-start .lad-ix::before{content:"";width:9px;height:9px;border:1px solid var(--blue-100);transform:rotate(45deg);flex:none}
#where-to-start .lad-step:first-child .lad-ix::before{background:var(--blue-100)}
#where-to-start .lad-nm{margin-top:clamp(16px,2vh,26px);font-size:clamp(22px,1.85vw,38px);font-weight:600;line-height:1.15;letter-spacing:-0.015em;color:#fff;text-wrap:balance}@media (min-width:2561px){#where-to-start .lad-nm{font-size:max(clamp(22px,1.85vw,38px), min(calc(38.00px + (100vw - 2560px) * 0.00297), 41.80px))}}
#where-to-start .lad-tx{margin-top:12px;font-size:clamp(15px,1.05vw,18px);line-height:1.6;font-weight:300;color:var(--blue-100);max-width:42ch}@media (min-width:2561px){#where-to-start .lad-tx{font-size:max(clamp(15px,1.05vw,18px), min(calc(18.00px + (100vw - 2560px) * 0.00352), 22.50px))}}
#where-to-start .lad-step .btn{white-space:nowrap;max-width:100%;text-align:left;font-size:15.5px;padding:12px 20px 12px 12px;gap:10px}@media (min-width:2561px){#where-to-start .lad-step .btn{font-size:max(15.5px, min(calc(15.50px + (100vw - 2560px) * 0.00303), 19.38px))}}
#where-to-start .lad-go{margin-top:auto;padding-top:26px}
#where-to-start .lad-step .tlink{margin-top:auto;padding-top:26px;text-wrap:balance}
#where-to-start .lad-cont{margin-top:clamp(28px,4vh,44px);margin-left:calc(1.3 / 4.55 * 100%);max-width:62ch;font-size:clamp(15.5px,1.1vw,19px);line-height:1.65;color:var(--meta-2)}@media (min-width:2561px){#where-to-start .lad-cont{font-size:max(clamp(15.5px,1.1vw,19px), min(calc(19.00px + (100vw - 2560px) * 0.00371), 23.75px))}}
#where-to-start .lad-cont b{color:#fff;font-weight:500}
@media (min-width:1441px){ #where-to-start .lad-step .btn{font-size:min(calc(11.54px + 0.3795vw), 22.1px)}@media (min-width:2561px){#where-to-start .lad-step .btn{font-size:max(min(calc(11.54px + 0.3795vw), 22.1px), min(calc(21.26px + (100vw - 2560px) * 0.00166), 23.38px))}} }
@media (min-width:901px) and (max-width:1199px){
  #where-to-start .lad{grid-template-columns:repeat(2,minmax(0,1fr));--rise:48px}
  #where-to-start .lad-step:nth-child(odd){margin-top:var(--rise)}
  #where-to-start .lad-step:nth-child(even){margin-top:0}
  #where-to-start .lad-step:nth-child(3){border-left:0}
  #where-to-start .lad-cont{margin-left:0}
}
@media (max-width:900px){
  #where-to-start .lad{grid-template-columns:minmax(0,1fr);border-bottom:0;margin-top:34px}
  #where-to-start .lad-step{margin-top:0;border-left:0;padding:26px 0 30px 0;background:none;border-top:1px solid var(--rule)}
  #where-to-start .lad-step .btn{white-space:normal}
  #where-to-start .lad-go{padding-top:22px}
  #where-to-start .lad-cont{margin-left:0;border-top:1px solid var(--rule);padding-top:24px;margin-top:0}
}

/* =====================================================================================================
   04 · HOW WE REPORT: the deepest version on the site (Home links here). The statement, then a split: the lead, and the
   report artefact with all five rows as instruments, one worked example labelled EXAMPLE. Lime: the operating decision only.
   ===================================================================================================== */
#reporting .rx{display:grid;grid-template-columns:minmax(0,0.72fr) minmax(0,1.28fr);column-gap:clamp(40px,5vw,120px);align-items:start;margin-top:clamp(24px,4vh,48px)}
#reporting .rx-lead{font-size:clamp(17px,1.3vw,22px);line-height:1.65;color:var(--blue-100);max-width:36ch;position:sticky;top:120px;padding-top:0}@media (min-width:2561px){#reporting .rx-lead{font-size:max(clamp(17px,1.3vw,22px), min(calc(22.00px + (100vw - 2560px) * 0.00172), 24.20px))}}
#reporting .rx-art{position:relative;border:1px solid var(--hairline);background:linear-gradient(180deg,rgba(8,35,58,0.5),rgba(6,27,45,0.2));padding:clamp(22px,2.4vw,40px) clamp(24px,2.8vw,48px) clamp(14px,1.6vw,24px)}
#reporting .rx-art .fk{position:absolute;width:14px;height:14px;opacity:0.8}
#reporting .rx-art .fk::before{content:"";position:absolute;width:14px;height:1px;background:rgba(183,197,208,0.6);top:0;left:0}
#reporting .rx-art .fk::after{content:"";position:absolute;width:1px;height:14px;background:rgba(183,197,208,0.6);top:0;left:0}
#reporting .rx-art .k1{top:-1px;left:-1px}#reporting .rx-art .k2{top:-1px;right:-1px;transform:rotate(90deg)}
#reporting .rx-art .k3{bottom:-1px;right:-1px;transform:rotate(180deg)}#reporting .rx-art .k4{bottom:-1px;left:-1px;transform:rotate(270deg)}
#reporting .rx-head{display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--meta-2);padding-bottom:clamp(14px,2vh,22px)}@media (min-width:2561px){#reporting .rx-head{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
#reporting .rx-tag{border:1px solid var(--hairline-2);padding:6px 10px 5px;color:var(--blue-100);letter-spacing:0.2em}
#reporting .rx-row{display:grid;grid-template-columns:minmax(0,0.42fr) minmax(0,0.58fr);align-items:center;column-gap:clamp(18px,2vw,36px);padding:clamp(18px,2.6vh,28px) 0;border-top:1px solid var(--hairline)}
#reporting .rx-lab{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--meta-2);line-height:1.4}@media (min-width:2561px){#reporting .rx-lab{font-size:max(12.5px, min(calc(12.50px + (100vw - 2560px) * 0.00244), 15.62px))}}
#reporting .rx-out .rx-lab{color:#fff}
#reporting .rx-ins{position:relative;display:flex;align-items:center;min-height:32px;min-width:0}
/* what changed: a baseline and a direction mark */
#reporting .rx-delta .d0{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule)}
#reporting .rx-delta .d1{position:absolute;left:30%;width:42%;top:50%;height:2px;margin-top:-1px;background:var(--blue-100)}
#reporting .rx-delta .dc{position:absolute;left:calc(72% - 4px);top:50%;width:9px;height:9px;margin-top:-5px;border-top:2px solid var(--blue-100);border-right:2px solid var(--blue-100);transform:rotate(45deg)}
#reporting .rx-delta .db{position:absolute;left:30%;top:50%;width:1px;height:12px;margin-top:-6px;background:var(--blue-300)}
/* confidence: a three-stop scale with a needle on the example's stop */
#reporting .rx-conf{justify-content:space-between;padding-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--meta-3)}@media (min-width:2561px){#reporting .rx-conf{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
#reporting .rx-conf b{font-weight:500}
#reporting .rx-conf b.on{color:#fff}
#reporting .rx-conf .cl{position:absolute;left:0;right:0;top:8px;height:1px;background:var(--rule)}
#reporting .rx-conf .cn{position:absolute;top:1px;left:50%;width:2px;height:15px;margin-left:-1px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,0.4)}
#reporting .rx-conf .ct{position:absolute;top:4px;width:1px;height:9px;background:var(--blue-300)}
/* what we trust, and not yet: sources as marks, filled (trusted) and open (not yet), a divider between */
#reporting .rx-trust{gap:clamp(14px,1.6vw,26px)}
#reporting .rx-trust .tr{display:flex;gap:10px;align-items:center}
#reporting .rx-trust .tr i{width:10px;height:10px;transform:rotate(45deg);display:block}
#reporting .rx-trust .tr-y i{background:var(--blue-100)}
#reporting .rx-trust .tr-n i{border:1px solid var(--blue-300)}
#reporting .rx-trust .tr-d{width:1px;height:22px;background:var(--rule)}
/* limiting constraint and operating decision: labelled stops, the example's stop lit; the decision is the view's one lime */
#reporting .rx-chips{flex-wrap:wrap;gap:8px}
#reporting .rx-chips b{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--meta-3);border:1px solid var(--hairline);padding:7px 10px 6px;line-height:1;white-space:nowrap}@media (min-width:2561px){#reporting .rx-chips b{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
#reporting .rx-chips b.on{color:#fff;border-color:var(--blue-100)}
#reporting .rx-dec b.on{color:var(--lime);border-color:var(--lime);box-shadow:0 0 16px rgba(163,217,78,0.22),inset 0 0 8px rgba(163,217,78,0.08)}
@media (min-width:1441px){
  #reporting .rx-lab{font-size:min(calc(8.5px + 0.28vw), 15.5px)}@media (min-width:2561px){#reporting .rx-lab{font-size:max(min(calc(8.5px + 0.28vw), 15.5px), min(calc(15.50px + (100vw - 2560px) * 0.00303), 19.38px))}}
  #reporting .rx-chips b,#reporting .rx-conf{font-size:min(calc(7.8px + 0.26vw), 14.5px)}@media (min-width:2561px){#reporting .rx-chips b,#reporting .rx-conf{font-size:max(min(calc(7.8px + 0.26vw), 14.5px), min(calc(14.46px + (100vw - 2560px) * 0.00282), 18.07px))}}
  #reporting .rx-head{font-size:min(calc(8.2px + 0.27vw), 15px)}@media (min-width:2561px){#reporting .rx-head{font-size:max(min(calc(8.2px + 0.27vw), 15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px))}}
}
@media (max-width:1199px){
  #reporting .rx{grid-template-columns:minmax(0,1fr);row-gap:34px}
  #reporting .rx-lead{position:static;max-width:60ch}
}
@media (max-width:640px){
  #reporting .rx-art{padding:18px 16px 8px}
  #reporting .rx-row{grid-template-columns:minmax(0,1fr);row-gap:12px}
  #reporting .rx-head{flex-wrap:wrap}
}

/* =====================================================================================================
   05 · FAQ: a split. The heading left and sticky, the questions right.
   ===================================================================================================== */
#faq .fq-grid{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);column-gap:clamp(40px,5vw,120px);align-items:start}
#faq .fq-head{position:sticky;top:120px}
#faq .faq{border-top:1px solid var(--hairline-2);margin-top:clamp(8px,1vh,14px)}
#faq .fitem{border-bottom:1px solid var(--hairline);transition:background .3s var(--ease)}
#faq .fq{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:clamp(56px,4.6vw,84px) minmax(0,1fr) 30px;align-items:center;gap:clamp(14px,1.4vw,24px);padding:clamp(20px,2.8vh,30px) 6px;cursor:pointer;font-family:var(--sans);font-size:clamp(17px,1.35vw,24px);font-weight:500;line-height:1.35;color:#fff;text-align:left}@media (min-width:2561px){#faq .fq{font-size:max(clamp(17px,1.35vw,24px), min(calc(24.00px + (100vw - 2560px) * 0.00188), 26.40px))}}
#faq .fq:focus-visible{outline:1px solid var(--blue-300);outline-offset:2px}
#faq .fix{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;color:var(--meta-3);transition:color .3s var(--ease)}@media (min-width:2561px){#faq .fix{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
#faq .find{width:30px;height:30px;position:relative;flex:none;font-size:0;color:transparent}
#faq .find::before,#faq .find::after{content:"";position:absolute;left:50%;top:50%;background:var(--blue-100);transition:transform .35s var(--ease),background .3s var(--ease)}
#faq .find::before{width:12px;height:1px;margin-left:-6px}
#faq .find::after{width:1px;height:12px;margin-top:-6px}
#faq .fa{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
#faq .fa > p{overflow:hidden;min-height:0;padding:0 6px 0 calc(clamp(56px,4.6vw,84px) + clamp(14px,1.4vw,24px) + 6px);font-size:clamp(16px,1.15vw,20px);line-height:1.7;font-weight:300;color:var(--blue-100);max-width:64ch}@media (min-width:2561px){#faq .fa > p{font-size:max(clamp(16px,1.15vw,20px), min(calc(20.00px + (100vw - 2560px) * 0.00156), 22.00px))}}
#faq .fitem.open .fa{grid-template-rows:1fr}
#faq .fitem.open .fa > p{padding-bottom:clamp(22px,3vh,32px)}
#faq .fitem.open .fix{color:#fff}
#faq .fitem.open .find::after{transform:scaleY(0)}
@media (hover:hover) and (pointer:fine){
  #faq .fitem:hover{background:rgba(8,35,58,0.35)}
  #faq .fitem:hover .find::before,#faq .fitem:hover .find::after{background:#fff}
}
@media (max-width:900px){
  #faq .fq-grid{grid-template-columns:minmax(0,1fr);row-gap:30px}
  #faq .fq-head{position:static}
  #faq .fq{grid-template-columns:44px minmax(0,1fr) 24px;font-size:17px}
  #faq .fa > p{padding-left:50px;font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  #model .sx-stage{opacity:1;transition:none}
  #faq .fa{transition:none}
}


/* =====================================================================================================
   Meterknot System v0.18 (2026-10-03, MTKN-MC · Website Main Builder): the motion pass. Rulings of Sotiris 2026-10-03:
   the seven inner-page rules (7: nothing static), the engine hero in motion, the phone hero order and its map, the
   Scorecard band "the scan", the 02 playhead, the 03 staircase and landing, the 04 report views, the travelling light's
   System route. This block follows the v0.17 page CSS and overrides it where named.
   ===================================================================================================== */

/* ---------- the engine hero: the motion's overlay canvas, the first-frame hold, phones ---------- */
#s2crop .eh-fx{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1}
.eh-pre #s2crop svg{visibility:hidden}
.eh-pre #model [data-intro]{opacity:0}
#model .sx-cap .sx-key{font-size:12px}@media (min-width:2561px){#model .sx-cap .sx-key{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
@media (min-width:901px) and (max-height:660px){
  /* short laptops (1366x657, 1280x609): the disc takes the height the caption gave up; the colour key steps aside */
  #model .sx-frame,#model .sx-cap{width:min(100%,calc((100svh - 214px) * 1.13))}
  #model .sx-cap{margin-top:12px;font-size:13.5px;line-height:1.5}
  #model .sx-cap .sx-key{display:none}
}
#model .sx-open{display:none}
@media (max-width:900px){
  /* phones (ruled 2026-10-03): the H1, the sub, the disc with its map, then the CTAs, then the five stages */
  #model .sx-lede{display:contents}
  #model .sx-lede > h1{grid-row:1;padding-top:clamp(110px,26vw,140px)}
  #model .sx-sub{grid-row:2}
  #model .sx-disc,#model .sx-stick{display:contents}
  #model .sx-frame{grid-row:3;margin-top:34px}
  #model .sx-open{grid-row:4;justify-self:start}
  #model .ctas{grid-row:5;margin-top:26px}
  #model .sx-cap{grid-row:6;margin-top:34px}
  #model .sx-stages{grid-row:7}
  #model .sx-frame{cursor:zoom-in}
  #model .sx-open{display:inline-flex;align-items:center;gap:10px;margin:14px 0 0;min-height:44px;padding:0 18px;background:transparent;border:1px solid var(--hairline-2);border-radius:999px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.16em;color:#fff;cursor:pointer;text-transform:uppercase}
  #model .sx-open:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
}

/* ---------- the travelling light: the Home's light, its own element so the Home's route never runs here ---------- */
#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} }

/* ---------- 01 · the Scorecard band, "the scan" ---------- */
#pillars .scanband{position:relative;overflow:hidden;border-top:1px solid var(--hairline-2);border-bottom:1px solid var(--hairline);
  background:linear-gradient(90deg,rgba(8,35,58,0.16) 0%,rgba(8,35,58,0.46) 52%,rgba(8,35,58,0.3) 100%);padding:clamp(70px,12vh,140px) 0}
#pillars .scanband .sb-fx{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
#pillars .scanband .pcta{position:relative;z-index:1;padding-top:0}
#pillars .scanband .pcta .in{border:0;padding:0}
#pillars .scanband .pcta .q{max-width:24ch}
@media (max-width:900px){
  #pillars .scanband{padding:56px 0}
}

/* ---------- 02 · the playhead ---------- */
#install .tl-body{position:relative}
#install .tl-bar{width:calc((var(--b) - var(--a)) / 20 * 100% * var(--f,1))}
#install .tl-row.open .tl-bar{width:calc((16 - var(--a)) / 20 * 100% * var(--f,1));background:var(--blue-100)}
#install .tl-tail{position:absolute;top:50%;height:2px;margin-top:-1px;left:calc(16 / 20 * 100%);width:calc(4 / 20 * 100%);
  background:repeating-linear-gradient(90deg,var(--blue-100) 0 7px,transparent 7px 13px);background-size:13px 2px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 60%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 60%,transparent 100%);
  clip-path:inset(-3px calc((1 - var(--tail,1)) * 100%) -3px 0);animation:mk-march 1.4s linear infinite}
@keyframes mk-march{to{background-position:13px 0}}
#install .tl-motion .tl-bar::before{opacity:0;transition:opacity .3s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
#install .tl-motion .tl-row.reached .tl-bar::before{opacity:1}
#install .tl-motion .tl-wk{opacity:0;transition:opacity .45s var(--ease),color .4s var(--ease)}
#install .tl-motion .tl-row.reached .tl-wk{opacity:1}
#install .tl-motion .tl-nm,#install .tl-motion .tl-tx,#install .tl-motion .tl-ix{opacity:0.62;transition:opacity .5s var(--ease),color .4s var(--ease)}
#install .tl-motion .tl-row.reached .tl-nm,#install .tl-motion .tl-row.reached .tl-tx,#install .tl-motion .tl-row.reached .tl-ix{opacity:1}
#install .tl-motion .tl-row.reached:not(.lit):not(.open) .tl-tx{opacity:0.72}
#install .tl-row.lit .tl-bar{background:#fff;box-shadow:0 0 14px rgba(183,197,208,0.45)}
#install .tl-row.lit .tl-bar::before{border-color:#fff;background:#fff}
#install .tl-row.lit .tl-wk,#install .tl-row.lit .tl-ix{color:#fff}
#install .tl-row.lit .tl-tail{background-image:repeating-linear-gradient(90deg,#fff 0 7px,transparent 7px 13px)}
#install .tl-ph{position:absolute;top:0;bottom:0;left:calc(var(--meta-w) + var(--gap));right:calc(var(--tx-w) + var(--gap));pointer-events:none;opacity:0;transition:opacity .4s var(--ease);z-index:2}
#install .tl-phl{position:absolute;top:26px;bottom:0;left:calc(var(--p,0) * 100%);width:1px;margin-left:-0.5px;background:linear-gradient(180deg,rgba(255,255,255,0.9) 0,rgba(183,197,208,0.35) 60%,rgba(183,197,208,0) 100%)}
#install .tl-phd{position:absolute;top:26px;left:calc(var(--p,0) * 100%);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border:1px solid #fff;background:var(--blue-900);transform:rotate(45deg);box-shadow:0 0 12px rgba(255,255,255,0.45)}
@media (min-width:901px) and (max-width:1199px){ #install .tl-ph{right:0} }
@media (max-width:900px){ #install .tl-ph{display:none} }

/* ---------- 03 · the staircase and its landing ---------- */
@media (min-width:1200px){
  #where-to-start .lad{grid-template-columns:minmax(0,1.5fr) minmax(0,0.86fr) minmax(0,0.96fr) minmax(0,0.96fr) minmax(0,0.86fr);--rise:clamp(36px,5.4vh,78px);border-bottom:0;position:relative}
  #where-to-start .lad::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);transform-origin:left center;transform:scaleX(var(--r,1))}
  #where-to-start .lad-step{margin-top:calc(var(--rise) * (4 - var(--i)))}
}
#where-to-start .lad-ix::before{content:none}
#where-to-start .lad-d{width:9px;height:9px;border:1px solid var(--blue-100);transform:rotate(45deg);flex:none;transition:background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease)}
#where-to-start .lad-d.lit{background:#fff;border-color:#fff;box-shadow:0 0 12px rgba(255,255,255,0.55);transform:rotate(45deg) scale(1.25)}
#where-to-start .lad-land{position:relative;list-style:none;min-width:0;margin-top:0;padding:clamp(22px,2.6vw,40px) 0 clamp(30px,4vh,48px) clamp(20px,2vw,36px)}
#where-to-start .lad-land::before{content:"";position:absolute;left:0;top:-1px;right:calc(-1 * var(--pad));height:1px;background:repeating-linear-gradient(90deg,var(--blue-100) 0 6px,transparent 6px 12px);background-size:12px 1px;opacity:0.75;animation:mk-march 2.4s linear infinite}
#where-to-start .lad-land::after{content:"";position:absolute;left:0;top:0;width:1px;height:var(--rise,48px);background:repeating-linear-gradient(180deg,var(--blue-300) 0 4px,transparent 4px 8px);opacity:0.6}
#where-to-start .lad-step .lad-tx{max-width:none}
@media (min-width:1200px) and (max-width:1365px){ #where-to-start .lad-step .btn{font-size:14.5px;padding:11px 16px 11px 10px;gap:8px} #where-to-start .lad-step .btn .chip{width:26px;height:26px} }
#where-to-start .lad-land .lad-cont{margin:0;max-width:34ch;font-size:clamp(15px,1.05vw,18px);line-height:1.6;color:var(--meta-2)}@media (min-width:2561px){#where-to-start .lad-land .lad-cont{font-size:max(clamp(15px,1.05vw,18px), min(calc(18.00px + (100vw - 2560px) * 0.00352), 22.50px))}}
#where-to-start .lad-land .lad-cont b{display:block;margin-bottom:10px;font-size:clamp(20px,1.5vw,30px);font-weight:600;line-height:1.2;letter-spacing:-0.01em;color:#fff}@media (min-width:2561px){#where-to-start .lad-land .lad-cont b{font-size:max(clamp(20px,1.5vw,30px), min(calc(30.00px + (100vw - 2560px) * 0.00234), 33.00px))}}
#where-to-start .lad-motion .lad-step,#where-to-start .lad-motion .lad-land{opacity:calc(var(--r,1) * 1.6);transform:translateY(calc((1 - var(--r,1)) * 56px))}
#where-to-start .lad-motion .lad-step > *,#where-to-start .lad-motion .lad-land > *{opacity:calc((var(--r,1) - 0.45) * 1.9)}
#where-to-start .lad-motion .lad-step::before{width:0;transition:width .8s var(--ease)}
#where-to-start .lad-motion .lad-step.up::before{width:28%}
@media (min-width:901px) and (max-width:1199px){
  #where-to-start .lad{grid-template-columns:repeat(2,minmax(0,1fr))}
  #where-to-start .lad-land{grid-column:1 / -1;margin-top:0;padding-left:0}
  #where-to-start .lad-land::after{display:none}
}
@media (max-width:900px){
  #where-to-start .lad::after{display:none}
  #where-to-start .lad-land{padding:26px 0 0 0}
  #where-to-start .lad-land::before{right:calc(-1 * var(--pad))}
  #where-to-start .lad-land::after{display:none}
}

/* ---------- 04 · the report panel ---------- */
#reporting .rx-lead .rs{transition:color .45s var(--ease)}
#reporting .rx-lead .rs.hl{color:#fff}
#reporting .rx-art{border-color:rgba(183,197,208,calc(0.14 * var(--bd,1)))}
#reporting .rx-row{position:relative;border-top-color:transparent}
#reporting .rx-row::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--hairline);transform-origin:left center;transform:scaleX(var(--rl,1))}
#reporting .rx-row .rx-lab{transition:color .4s var(--ease)}
#reporting .rx-row.hl .rx-lab{color:#fff}
#reporting .rx-delta .d0{transform-origin:left center}
#reporting .rx-delta .dc{left:72%;margin-left:-9px;transition:transform .35s var(--ease)}
#reporting .rx-delta.back .dc{transform:rotate(-135deg);margin-left:-1px}
#reporting .rx-delta.unsure .d1{background:repeating-linear-gradient(90deg,var(--blue-100) 0 5px,transparent 5px 9px)}
#reporting .rx-delta.unsure .dc{opacity:0.45}
#reporting .rx-conf .cl{transform-origin:left center}
#reporting .rx-conf .ct{transform-origin:center}
#reporting .rx-conf .cn{transform:translateX(-50%);margin-left:0}
#reporting .rx-conf b{transition:color .35s var(--ease)}
#reporting .rx-trust{gap:0}
#reporting .rx-trust .tr{display:flex;gap:12px;align-items:center}
#reporting .rx-trust .tr i{width:10px;height:10px;transform:rotate(45deg);display:block;border:1px solid var(--blue-300);background:transparent;transition:background .3s var(--ease),border-color .3s var(--ease)}
#reporting .rx-trust .tr i.y{background:var(--blue-100);border-color:var(--blue-100)}
#reporting .rx-trust .tr-d{position:absolute;left:0;top:50%;width:1px;height:22px;margin-top:-11px;background:var(--blue-300)}
#reporting .rx-chips{position:relative}
#reporting .rx-sel{position:absolute;left:0;top:0;width:0;height:0;border:1px solid var(--blue-100);pointer-events:none;box-sizing:border-box;--glow:0}
#reporting .rx-dec .rx-sel{border-color:var(--lime);box-shadow:0 0 calc(16px + 22px * var(--glow)) rgba(163,217,78,calc(0.22 + 0.3 * var(--glow))),inset 0 0 8px rgba(163,217,78,0.08)}
#reporting .rx-dec b.on,#reporting .rx-dec .rx-sel{transition:color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
#reporting .rx-wait .rx-dec b.on{color:#fff;border-color:var(--blue-100);box-shadow:none}
#reporting .rx-wait .rx-dec .rx-sel{border-color:var(--blue-100);box-shadow:none}
#reporting .rx-chips.none b{opacity:0.45;transition:opacity .4s var(--ease),color .35s var(--ease)}
#reporting .rx-ctl.held .rx-prog i{opacity:0.4}
#reporting .rx-ctl.held .rx-prog{background:repeating-linear-gradient(90deg,var(--hairline-2) 0 4px,transparent 4px 8px)}
#reporting .rx-con .rx-sel.open{border-style:dashed;border-color:rgba(183,197,208,0.55)}
#reporting .rx-pre .rx-chips b.on,#reporting .rx-on .rx-chips b.on{border-color:transparent;box-shadow:none}
#reporting .rx-chips b{transition:color .35s var(--ease)}
#reporting .rx-ctl{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);margin-top:clamp(6px,1vh,12px);padding:14px 0 6px;border-top:1px solid var(--hairline)}
#reporting .rx-tks{display:flex;gap:2px}
#reporting .rx-tk{all:unset;box-sizing:border-box;cursor:pointer;width:30px;height:32px;display:inline-flex;align-items:center;justify-content:center}
#reporting .rx-tk::before{content:"";width:16px;height:2px;background:var(--blue-300);opacity:0.75;transition:width .35s var(--ease),background .35s var(--ease),opacity .35s var(--ease)}
#reporting .rx-tk.on::before{width:26px;background:#fff;opacity:1}
#reporting .rx-tk:hover::before{background:#fff;opacity:1}
#reporting .rx-tk:focus-visible,#reporting .rx-pp:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
#reporting .rx-prog{flex:1;height:1px;background:var(--hairline);position:relative;overflow:hidden;display:block}
#reporting .rx-prog i{position:absolute;inset:0;background:var(--blue-100);transform-origin:left center;transform:scaleX(0);display:block}
#reporting .rx-pp{all:unset;box-sizing:border-box;cursor:pointer;width:34px;height:34px;border:1px solid var(--hairline-2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:none}
#reporting .rx-pp i{display:block;width:2px;height:10px;background:#fff}
#reporting .rx-pp.paused i:first-child{width:0;height:0;margin-left:3px;border-left:9px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;background:none}
#reporting .rx-pp.paused i:last-child{display:none}
#reporting .rx-pp:hover{border-color:var(--blue-100)}
@media (max-width:900px){
  #reporting .rx-tk{width:36px;height:44px}
  #reporting .rx-pp{width:44px;height:44px}
}

/* ---------- reduced motion: the finished still ---------- */
@media (prefers-reduced-motion:reduce){
  #install .tl-tail,#where-to-start .lad-land::before{animation:none}
  #reporting .rx-ctl .rx-prog,#reporting .rx-pp{display:none}
}

/* ---------- the phone map: opaque over the page ---------- */
.emap{background:#000e1a}

/* ---------- 05 · the FAQ: the open question's index, large, in the sticky head (the pillars' numeral) ---------- */
#faq .fq-ghost{display:block;margin-top:clamp(28px,5vh,64px);font-family:var(--sans);font-weight:500;font-size:clamp(90px,11vw,230px);line-height:0.8;letter-spacing:-0.02em;margin-left:-0.05em;white-space:nowrap;pointer-events:none;user-select:none;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px var(--blue-100);opacity:0;transform:translateY(16px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
#faq .fq-ghost.on{opacity:0.55;transform:none}
@media (max-width:900px){ #faq .fq-ghost{display:none} }
@media (prefers-reduced-motion:reduce){ #faq .fq-ghost{transition:none;transform:none} }


/* =====================================================================================================
   Meterknot System v0.19 (2026-10-04, MTKN-MC · Website Main Builder): the second pass to the Home's level (ruled by
   Sotiris 2026-10-04). Finish within the rulings of 2026-10-02 and 2026-10-03; this block follows the v0.18 rules and
   overrides them where named.
   ===================================================================================================== */

/* ---------- hero: no shift at load in any mode; the caption waits for the disc; quieter dimming ---------- */
#model .disc-crop{aspect-ratio:1.1346/1}
.eh-fit #s2crop svg{visibility:hidden}
#model .sx-cap{transition:opacity .7s var(--ease)}
.eh-pre #model .sx-cap{opacity:0}
#model .sx-stage{opacity:0.62}
#model .sx-stage.on{opacity:1}
#model .sx-olab{transition:color .2s var(--ease)}
#model .sx-stage:not(.on) .sx-span{color:var(--blue-100)}
@media (max-width:900px){
  /* phones: the CTA inside the first screen. OPEN THE MAP sits in the disc frame's empty upper-left corner (no label there);
     less air above the H1 */
  #model .sx-lede > h1{padding-top:clamp(92px,24vw,112px)}
  #model .sx-frame{margin-top:18px}
  #model .sx-frame{grid-column:1}
  #model .sx-open{grid-row:3;grid-column:1;align-self:start;justify-self:start;position:relative;z-index:3;margin:6px 0 0 0;min-height:36px;padding:0 12px;font-size:12px;letter-spacing:0.1em;background:rgba(0,14,26,0.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  #model .ctas{margin-top:22px}
}

/* ---------- 01 · one focus style; the dial sized by the page module ---------- */
/* inside the instruments the focus ring is white (it sits beside the view's lime: the Output line, the decision); elsewhere lime */
#pillars .pi-rbtn:focus-visible,#pillars .pi-ws .pi-wl a:focus-visible,#pillars .pi-dnm:focus-visible{outline:2px solid #fff;outline-offset:2px}
#reporting .rx-tk:focus-visible,#reporting .rx-pp:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:900px){
  /* the scan on phones: the ring above the question, whole, with its indices */
  #pillars .scanband{padding:40px 0 52px}
  #pillars .scanband .pcta .in{padding-top:228px}
}

/* ---------- 03 · the staircase from 960 px; the phone list below it ---------- */
@media (min-width:960px) and (max-width:1199px){
  #where-to-start .lad{grid-template-columns:minmax(0,1.3fr) minmax(0,1.04fr) minmax(0,0.98fr) minmax(0,0.98fr) minmax(0,0.86fr);--rise:clamp(30px,4.6vh,56px);border-bottom:0;position:relative}
  #where-to-start .lad::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);transform-origin:left center;transform:scaleX(var(--r,1))}
  #where-to-start .lad-step{margin-top:calc(var(--rise) * (4 - var(--i)))}
  #where-to-start .lad-step:nth-child(odd),#where-to-start .lad-step:nth-child(even){margin-top:calc(var(--rise) * (4 - var(--i)))}
  #where-to-start .lad-step:nth-child(3){border-left:1px solid var(--hairline)}
  #where-to-start .lad-step{padding:22px 16px 30px}
  #where-to-start .lad-step:first-child{padding-left:0}
  #where-to-start .lad-nm{font-size:clamp(19px,1.8vw,22px)}
  #where-to-start .lad-tx{font-size:15px;line-height:1.55}
  #where-to-start .lad-step .btn{white-space:normal;font-size:14px;padding:10px 14px 10px 9px;gap:8px;line-height:1.3}
  #where-to-start .lad-step .btn .chip{width:24px;height:24px}
  #where-to-start .lad-step .tlink{font-size:14px;gap:6px}
  #where-to-start .lad-land{grid-column:auto;margin-top:0;padding:22px 0 30px 16px}
  #where-to-start .lad-land::after{display:block}
  #where-to-start .lad-land .lad-cont{font-size:14.5px}
  #where-to-start .lad-land .lad-cont b{font-size:19px}
}
@media (min-width:901px) and (max-width:959px){
  #where-to-start .lad{grid-template-columns:minmax(0,1fr);border-bottom:0;margin-top:34px}
  #where-to-start .lad-step,#where-to-start .lad-step:nth-child(odd),#where-to-start .lad-step:nth-child(even){margin-top:0;border-left:0;padding:26px 0 30px 0;background:none;border-top:1px solid var(--rule)}
  #where-to-start .lad-step .btn{white-space:normal}
  #where-to-start .lad-land{grid-column:auto;padding:26px 0 0 0}
  #where-to-start .lad-land::after{display:none}
}

/* ---------- 04 · the report's view ticks, numbered ---------- */
#reporting .rx-tk{width:auto;min-width:34px;padding:0 4px;flex-direction:column;gap:6px}
#reporting .rx-tk::before{order:2}
#reporting .rx-tn{order:1;font-family:var(--mono);font-size:12px;font-weight:500;line-height:1;letter-spacing:0.12em;color:var(--blue-300);transition:color .35s var(--ease)}@media (min-width:2561px){#reporting .rx-tn{font-size:max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px))}}
#reporting .rx-tk.on .rx-tn,#reporting .rx-tk:hover .rx-tn{color:#fff}
@media (max-width:900px){ #reporting .rx-tk{min-width:44px;height:48px} }

/* ---------- 05 · the FAQ arrives: each question's rule draws and the question slides in (the Scorecard's arrival) ---------- */
#faq .fitem{position:relative}
#faq .fitem::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);pointer-events:none}
#faq .fq > span{opacity:calc(0.2 + 0.8 * var(--fp,1));transform:translateX(calc((1 - var(--fp,1)) * 28px))}
#faq .fq > .find{opacity:var(--fp,1);transform:none}
#faq .fq:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
#faq .fa a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(183,197,208,0.5)}
@media (min-width:901px) and (max-height:660px){
  /* short laptops: the disc takes the last of the height (step names 10 px at 1366x657, 8.8 px in v0.18); the caption's mono
     label steps aside (as the colour key does) so the caption keeps to two lines */
  #model .sx-frame,#model .sx-cap{width:min(100%,calc((100svh - 150px) * 1.13))}
  #model .sx-cap{font-size:13px;line-height:1.45;margin-top:10px;grid-template-columns:1fr}
  #model .sx-cap .mono{display:none}
  /* the colour key stays (WC section 3: the disc "with its colour key"): two lines in the frame's empty lower-right corner */
  #model .sx-cap{position:relative}
  #model .sx-cap .sx-key{display:block;position:absolute;right:12px;bottom:calc(100% + 14px);width:176px;margin:0;text-align:right;font-size:12px;line-height:1.4;letter-spacing:0.1em}
}
/* v0.20 (2026-10-04): the scroll owns the pillar; hover only signals: the row's name to Blue 100, diamonds outlined white (white text stays the selection's) */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
 #pillars .pi-row.hv .pi-rix{color:var(--blue-100);transition:color .18s}
 #pillars .pi-row.hv:not(.on) .pi-rnm{color:var(--blue-100);transition:color .18s,transform .5s}
 #pillars .pi-row.hv:not(.on) .pi-rdi{border-color:#fff;transition:background .4s,border-color .18s,transform .4s}
 #pillars .pi-ring g.hv .nd{stroke:#fff;stroke-width:1.5;transition:fill .5s,stroke .18s}
}
/* v0.21 (2026-10-05): the scroll answers. The cue under the pillar list: a mono readout over a hairline that fills with the
   scroll towards the next pillar; the dial's arc follows the scroll directly (no easing of its own; the page's smooth scroll eases it) */
#pillars .pi-cue{display:block;margin-top:clamp(26px,5vh,56px);opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
#pillars .pi-cue.on{opacity:1}
/* v0.23 (Sotiris 2026-10-10, screen 4): the cue at label size and brightness ("Scroll · 02 Demand Engine"), a down arrow that nudges
   once after a 2.5 s pause in the held scene, the line brighter and longer; still decorative, no lime */
#pillars .pi-cl{display:flex;gap:12px;align-items:center;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;line-height:1.4}@media (min-width:2561px){#pillars .pi-cl{font-size:max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px))}}
#pillars .pi-ca{display:inline-flex;width:14px;height:14px;color:var(--blue-100)}
#pillars .pi-ca svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4}
#pillars .pi-cue.nudge .pi-ca{animation:piNudge 1.1s var(--ease) 1}
@keyframes piNudge{0%{transform:none}30%{transform:translateY(5px)}55%{transform:none}75%{transform:translateY(3px)}100%{transform:none}}
#pillars .pi-ck{color:var(--blue-100)}
#pillars .pi-cs{color:var(--meta-3)}
#pillars .pi-cn{color:#E2EAF1;letter-spacing:.14em}
#pillars .pi-cbar{display:block;position:relative;width:clamp(200px,18vw,300px);height:1px;margin-top:12px;background:rgba(183,197,208,0.22);overflow:hidden}
#pillars .pi-cbar i{position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:left center}
@media (prefers-reduced-motion:reduce){#pillars .pi-cue.nudge .pi-ca{animation:none}}
#pillars .pi-cue.rm .pi-cbar{display:none}
#pillars .pi-ring .arc{transition:none}
@media (max-width:900px){ #pillars .pi-cue{display:none} }

/* (2026-10-09, A6): running text on phones at 16 px or more */
@media (max-width:900px){#model .talk,#model .sx-cap,#pillars .pi-drawer .pi-lead,#pillars .pi-drawer .pi-sub,#install .tl-tx,#where-to-start .lad-tx,#where-to-start .lad-land .lad-cont{font-size:16px}}

/* B8 (2026-10-10, ruled "option A 10%"): from 2560 px wide, text under 16 px 10% larger; each line repeats a rule above with its own context */
@media (min-width:2560px){#pillars .pi-ring .ndl{font-size:calc(10px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#pillars .pi-ring .ndl{font-size:calc(max(10px, min(calc(10.00px + (100vw - 2560px) * 0.00195), 12.50px)) * 1.1)}}}
@media (min-width:2560px){#pillars .pi-rix{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#pillars .pi-rix{font-size:calc(max(12px, max(11px, min(calc(11.00px + (100vw - 2560px) * 0.00215), 13.75px))) * 1.1)}}}
@media (min-width:2560px){#pillars .pi-dhead .pi-rl{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#pillars .pi-dhead .pi-rl{font-size:calc(max(12px, max(11px, min(calc(11.00px + (100vw - 2560px) * 0.00215), 13.75px))) * 1.1)}}}
@media (min-width:2560px){#pillars .pi-sub{font-size:calc(15.5px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#pillars .pi-sub{font-size:calc(max(15.5px, min(calc(15.50px + (100vw - 2560px) * 0.00303), 19.38px)) * 1.1)}}}
@media (min-width:2560px){#pillars .pi-olab{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#pillars .pi-olab{font-size:calc(max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px)) * 1.1)}}}
@media (min-width:2560px){#pillars .pi-wh{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#pillars .pi-wh{font-size:calc(max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px)) * 1.1)}}}
@media (min-width:2560px){#pillars .pi-ws .pi-n{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#pillars .pi-ws .pi-n{font-size:calc(max(12px, max(10px, min(calc(10.00px + (100vw - 2560px) * 0.00195), 12.50px))) * 1.1)}}}
@media (min-width:2560px){#model .sx-cap .mono{font-size:calc(11px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#model .sx-cap .mono{font-size:calc(max(11px, min(calc(11.00px + (100vw - 2560px) * 0.00215), 13.75px)) * 1.1)}}}
@media (min-width:2560px){#model .sx-span .sx-ix{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#model .sx-span .sx-ix{font-size:calc(max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px)) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){#model .sx-olab{font-size:calc(min(calc(8.2px + 0.27vw), 15px) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){#model .sx-span{font-size:calc(min(calc(8.2px + 0.27vw), 15px) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){@media (min-width:2561px){#model .sx-olab{font-size:calc(max(min(calc(8.2px + 0.27vw), 15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px)) * 1.1)}}}}
@media (min-width:2560px){@media (min-width:1441px){@media (min-width:2561px){#model .sx-span{font-size:calc(max(min(calc(8.2px + 0.27vw), 15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px)) * 1.1)}}}}
@media (min-width:2560px){#install .tl-ix{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#install .tl-ix{font-size:calc(max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px)) * 1.1)}}}
@media (min-width:2560px){#install .tl-wk{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#install .tl-wk{font-size:calc(max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px)) * 1.1)}}}
@media (min-width:2560px){#where-to-start .lad-ix{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#where-to-start .lad-ix{font-size:calc(max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px)) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){#reporting .rx-lab{font-size:calc(min(calc(8.5px + 0.28vw), 15.5px) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){@media (min-width:2561px){#reporting .rx-lab{font-size:calc(max(min(calc(8.5px + 0.28vw), 15.5px), min(calc(15.50px + (100vw - 2560px) * 0.00303), 19.38px)) * 1.1)}}}}
@media (min-width:2560px){@media (min-width:1441px){#reporting .rx-chips b{font-size:calc(min(calc(7.8px + 0.26vw), 14.5px) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){#reporting .rx-conf{font-size:calc(min(calc(7.8px + 0.26vw), 14.5px) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){@media (min-width:2561px){#reporting .rx-chips b{font-size:calc(max(min(calc(7.8px + 0.26vw), 14.5px), min(calc(14.46px + (100vw - 2560px) * 0.00282), 18.07px)) * 1.1)}}}}
@media (min-width:2560px){@media (min-width:1441px){@media (min-width:2561px){#reporting .rx-conf{font-size:calc(max(min(calc(7.8px + 0.26vw), 14.5px), min(calc(14.46px + (100vw - 2560px) * 0.00282), 18.07px)) * 1.1)}}}}
@media (min-width:2560px){@media (min-width:1441px){#reporting .rx-head{font-size:calc(min(calc(8.2px + 0.27vw), 15px) * 1.1)}}}
@media (min-width:2560px){@media (min-width:1441px){@media (min-width:2561px){#reporting .rx-head{font-size:calc(max(min(calc(8.2px + 0.27vw), 15px), min(calc(15.00px + (100vw - 2560px) * 0.00293), 18.75px)) * 1.1)}}}}
@media (min-width:2560px){#faq .fix{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#faq .fix{font-size:calc(max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px)) * 1.1)}}}
@media (min-width:2560px){#faq .find{font-size:calc(0 * 1.1)}}
@media (min-width:2560px){#model .sx-cap .sx-key{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#model .sx-cap .sx-key{font-size:calc(max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px)) * 1.1)}}}
@media (min-width:2560px){#reporting .rx-tn{font-size:calc(12px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#reporting .rx-tn{font-size:calc(max(12px, min(calc(12.00px + (100vw - 2560px) * 0.00234), 15.00px)) * 1.1)}}}
@media (min-width:2560px){#pillars .pi-cl{font-size:calc(13px * 1.1)}}
@media (min-width:2560px){@media (min-width:2561px){#pillars .pi-cl{font-size:calc(max(13px, min(calc(13.00px + (100vw - 2560px) * 0.00254), 16.25px)) * 1.1)}}}