*{margin:0;padding:0;box-sizing:border-box} :root{ /* Tonal ladder with REAL separation. The previous scale (#0e0f0d → #141613 → * #191b17) spanned ~11 of 255, which measured as 86-88% of the frame in one * luminance bucket: everything read as a single flat black field. Each step * below is separated enough to be seen, and warms as it rises so raised * surfaces look lit rather than merely lighter. */ --bg:#0b0c0a; /* deepest ground */ --sunk:#080907; /* recessed wells, table gutters */ --bg2:#161814; /* section ground */ --panel:#1f221c; /* raised panel */ --panel2:#282b23; /* panel header / active row */ --line:#33372c; /* hairline */ --line2:#454a3b; /* emphasised divider */ /* --faint carries disclosure and legal copy, so it must clear WCAG AA 4.5 * against EVERY ground it lands on — not just --bg. The earlier note measured * #7d8271 against --bg only (4.95) and shipped it; on --panel it is 4.07 and * on --panel2 3.63, both failing. The register header sits on --panel2, so the * column labels were the worst offenders. Values below are solved against * --panel2 (the lightest ground) with hue and saturation held constant, so * copper stays copper instead of drifting to salmon: * --faint #8e9383 4.55 on --panel2 · 5.10 --panel · 5.66 --bg2 · 6.21 --bg * --copper #d67846 4.55 on --panel2 · 5.10 --panel · 5.66 --bg2 · 6.21 --bg * --gray #8f9384 4.55 on --panel2 · 5.10 --panel · 5.66 --bg2 · 6.21 --bg */ --ink:#f1efe7; --dim:#9ba08f; --faint:#8e9383; --amber:#d9963a; --green:#6fa45c; --copper:#d67846; --gray:#8f9384; /* Three roles, strictly separated. The page previously set monospace on * , so every sentence rendered as terminal output — technical * uniformity reads as rigidity no matter how good the layout is. * Mono now does only what mono is for: identifiers, labels, and figures. */ --mono:'IBM Plex Mono',ui-monospace,monospace; /* IDs · labels · numbers */ --sans:'IBM Plex Sans',system-ui,sans-serif; /* prose · reading text */ --serif:'Fraunces',Georgia,serif; /* display · human voice */ } html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.68;-webkit-font-smoothing:antialiased;font-weight:300} /* Mono is opt-in now, applied to the things that are genuinely machine-readable. */ .num,.lbl,.code,.rid,.badge,.tiertag,.st,code,.navcad,.btn, .reghead,.rev,.insp,.evrow .t,.diifoot,.simnote{font-family:var(--mono)} body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1; background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px)} .wrap{max-width:1180px;margin:0 auto;padding:0 26px} a{color:inherit;text-decoration:none} .num,.tnum{font-variant-numeric:tabular-nums} .lbl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)} h1,h2,h3{font-weight:400;letter-spacing:-.01em} hr.rule{border:0;border-top:1px solid var(--line)} /* ---------- nav ---------- */ nav{position:sticky;top:0;z-index:40;background:rgba(11,12,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .navin{display:flex;align-items:center;gap:22px;height:52px} .brand{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.16em} .navlinks{display:flex;gap:17px;margin-left:auto;font-size:11px;letter-spacing:.09em;color:var(--dim)} .navlinks a:hover{color:var(--amber)} .navcad{font-size:10.5px;color:var(--faint);letter-spacing:.08em;border-left:1px solid var(--line);padding-left:16px} .navcad b{color:var(--amber);font-weight:400} /* The nav is the router now, so links must never be truncated — hiding one * would strand a whole view. Below the desktop breakpoint it becomes a * horizontally scrollable rail instead, and the cadence readout steps aside. */ @media(max-width:1180px){ .navlinks{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; flex:1 1 auto;min-width:0;mask-image:linear-gradient(90deg,#000 92%,transparent)} .navlinks::-webkit-scrollbar{display:none} .navlinks a{white-space:nowrap;flex:none} .navcad{display:none} } @media(max-width:620px){.navlinks{gap:14px}} /* logo mark */ .mark{width:20px;height:20px;flex:none} .mark .bind{animation:breathe 4.2s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:.42}50%{opacity:1}} /* ---------- hero ---------- */ /* The hero is a stage for the load-path canvas: the mechanic runs behind the * argument rather than being described next to it. */ header{position:relative;border-bottom:1px solid var(--line);overflow:hidden;background: radial-gradient(900px 380px at 78% -8%,rgba(200,134,42,.055),transparent 65%),var(--bg); min-height:74vh;display:flex;align-items:center} #loadpath{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} header > .wrap{position:relative;z-index:2;width:100%} /* align-items:stretch, not center: a short right-hand card centred in a taller * row leaves dead air above AND below it. Stretching makes the panel a column * that reaches, and its own content distributes the space. */ /* Vertical padding only — using the `padding` shorthand here would overwrite * the 26px horizontal gutter inherited from .wrap and pull the hero 26px left * of every section heading on the site. */ .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:52px; padding-top:70px;padding-bottom:58px;align-items:stretch} @media(max-width:860px){header{min-height:auto}} .kicker{display:flex;align-items:center;gap:10px;margin-bottom:26px} .tick{display:inline-block;width:5px;height:5px;background:var(--green);border-radius:50%;animation:tickpulse 2.6s infinite} @keyframes tickpulse{0%,100%{opacity:.35}50%{opacity:1}} /* Weight 300 at display size reads as composed rather than shouted; 1.06 * leading lets three lines breathe instead of stacking into a block. */ h1.head{font-family:var(--serif);font-size:clamp(33px,4.8vw,58px);line-height:1.06; letter-spacing:-.026em;font-weight:300;max-width:15ch} h1.head em{font-style:italic;color:var(--amber);font-weight:400} .sub{margin-top:24px;font-size:15px;color:var(--dim);max-width:50ch;line-height:1.78;font-weight:300} .sub b{color:var(--ink);font-weight:400} .pull{margin-top:26px;padding-left:15px;border-left:2px solid var(--amber);font-family:var(--serif);font-style:italic;font-size:15.5px;color:#c9c6bc;max-width:44ch} .cta{display:flex;gap:11px;margin-top:32px;flex-wrap:wrap} .btn{border:1px solid var(--line);padding:10px 17px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);background:var(--panel);cursor:pointer;font-family:var(--mono);transition:border-color .15s,color .15s} .btn:hover{border-color:var(--amber);color:var(--amber)} .btn.pri{background:var(--amber);border-color:var(--amber);color:#0b0c0a} .btn.pri:hover{background:#e8a548;border-color:#e8a548;color:#0b0c0a} /* telemetry card */ /* Glass, not a solid plate: the canvas stays legible underneath, which is what * makes the hero read as one composition rather than a box beside a graphic. */ .tele{border:1px solid rgba(217,150,58,.26);background:rgba(31,34,28,.74); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 28px 70px rgba(0,0,0,.55); display:flex;flex-direction:column} .tele .tb{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px} /* Names the strand currently governing delivered capacity. The hero states the * weakest-binds rule in words; this shows it holding, in the same panel. */ .bindrow{display:flex;align-items:baseline;gap:10px;margin-top:16px;padding-top:14px; border-top:1px solid var(--line)} .bindrow .bn{flex:1;font-size:12.5px;color:var(--copper);min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bindrow .bv{font-size:15px;color:var(--amber)} /* A bare score is unreadable: 57 out of what? Print the scale next to it. */ .bindrow .bvs{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--faint);margin-left:3px} .tele .th{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:1px solid var(--line);background:rgba(40,43,35,.55)} .tele .tb{padding:17px 15px} .bigread{display:flex;align-items:baseline;gap:8px} .bigread .v{font-size:40px;letter-spacing:-.03em;line-height:1} .bigread .u{font-size:11px;color:var(--dim);letter-spacing:.1em} .hd{margin-top:5px;font-size:10.5px;color:var(--faint);letter-spacing:.07em} svg.spark{display:block;width:100%;height:54px;margin-top:13px} .telefoot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)} .telefoot div{padding:10px 15px;font-size:10.5px;color:var(--dim)} .telefoot div+div{border-left:1px solid var(--line)} .telefoot b{display:block;color:var(--ink);font-size:15px;font-weight:400;margin-top:3px} .simnote{margin-top:11px;font-size:10px;color:var(--faint);letter-spacing:.06em;line-height:1.5} @media(max-width:860px){.hero{grid-template-columns:1fr;gap:34px;padding-top:44px;padding-bottom:38px}} /* ---------- strip ---------- */ .strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:var(--bg2)} .strip>div{padding:17px 20px;border-right:1px solid var(--line)} .strip>div:last-child{border-right:0} .strip .v{font-size:21px;margin-top:5px;letter-spacing:-.02em} .strip .n{font-size:10px;color:var(--faint);margin-top:3px} @media(max-width:760px){.strip{grid-template-columns:1fr 1fr}.strip>div:nth-child(2n){border-right:0}.strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}} /* ---------- sections ---------- */ section{padding:60px 0 64px;border-bottom:1px solid var(--line)} /* Routed views are pages: give every one the same top rule so headings land on * a consistent baseline instead of 55px / 117px / 130px depending on section. */ html.routed > body > section{padding-top:52px} /* Section header = fixed editorial grid, not a baseline flex row. * Column 1 is a 58px index gutter, column 2 the title, column 3 the standing * intro. Because the gutter is a real column, the TITLE starts on the same * vertical rule as the container (x=130) instead of being pushed right by the * width of its own number. */ .shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem); gap:0 40px;align-items:start;margin-bottom:34px; padding-bottom:20px;border-bottom:1px solid var(--line);position:relative} /* Hung in the margin, not occupying a column: the H2 then starts on the same * vertical rule as the container and the hero headline (x=130), instead of * being pushed to x=242 by a gutter of its own. */ .shead .idx{position:absolute;left:-34px;top:.62em;font-size:10px; color:var(--amber);letter-spacing:.2em;font-family:var(--mono)} @media(max-width:1280px){ /* Index stops hanging in the margin here. Give it a row of its own — * letting it re-enter the flow as a grid item makes it eat the title cell * and swaps the heading and intro columns. */ .shead{grid-template-columns:minmax(0,1fr) minmax(0,25rem)} .shead .idx{position:static;grid-column:1/-1;display:block;margin-bottom:9px} .shead h2{grid-column:1;grid-row:2} .shead p{grid-column:2;grid-row:2} } .shead h2{font-family:var(--serif);font-size:clamp(22px,2.9vw,32px); letter-spacing:-.02em;line-height:1.14;font-weight:300;max-width:18ch} .shead p{font-size:13.5px;color:var(--dim);line-height:1.78;font-weight:300; padding-top:.35em} @media(max-width:980px){ .shead{grid-template-columns:minmax(0,1fr)} .shead h2{grid-column:1;grid-row:2} .shead p{grid-column:1;grid-row:3;margin-top:14px;max-width:62ch} } /* class table */ table.cls{width:100%;border-collapse:collapse;font-size:12.5px} table.cls th{text-align:left;font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:0 14px 10px;border-bottom:1px solid var(--line)} table.cls td{padding:15px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--dim)} table.cls tr:hover td{background:rgba(255,255,255,.015)} table.cls td:first-child{width:64px} table.cls .code{color:var(--amber);letter-spacing:.1em} table.cls .nm{color:var(--ink)} table.cls .fail{color:var(--copper);font-size:11.5px} .tscroll{overflow-x:auto} .tscroll table{min-width:660px} /* signal panel (bento asymmetric) */ .dii{display:grid;grid-template-columns:270px 1fr;border:1px solid var(--line);background:var(--panel);box-shadow:0 16px 40px rgba(0,0,0,.38)} .dii .left{border-right:1px solid var(--line);padding:22px 20px;display:flex;flex-direction:column} .scoreBox{font-size:64px;line-height:1;letter-spacing:-.045em} .bandtag{display:inline-block;margin-top:11px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor} .dii .right{padding:20px} .sig{display:grid;grid-template-columns:1fr 128px 62px;align-items:center;gap:14px;padding:9px 8px;border-radius:2px} .sig+.sig{border-top:1px solid rgba(255,255,255,.045)} .sname{font-size:12px;color:var(--dim)} .bar{height:5px;background:rgba(255,255,255,.06);position:relative;overflow:hidden} .fill{position:absolute;left:0;top:0;bottom:0;transition:width .55s ease} .fill.g{background:var(--green)}.fill.a{background:var(--amber)}.fill.c{background:var(--copper)} .sig .num{text-align:right;font-size:13px} @keyframes rowflash{0%{background:rgba(200,134,42,.15)}100%{background:transparent}} .sig.remarked{animation:rowflash 1.7s ease} .diifoot{padding:12px 20px;border-top:1px solid var(--line);font-size:10.5px;color:var(--faint);display:flex;gap:16px;flex-wrap:wrap} @media(max-width:800px){.dii{grid-template-columns:1fr}.dii .left{border-right:0;border-bottom:1px solid var(--line)} .sig{grid-template-columns:1fr 78px 56px;gap:9px}} /* evidence ladder */ .ladder{display:grid;gap:0;border:1px solid var(--line)} .rung{display:grid;grid-template-columns:52px minmax(0,1fr) 268px;gap:20px 28px;padding:20px;background:var(--panel)} .rung+.rung{border-top:1px solid var(--line)} .rung .tno{font-family:var(--serif);font-size:26px;color:var(--faint)} .rung h3{font-size:14px;margin-bottom:6px} .rung p{font-size:13px;color:var(--dim);max-width:60ch;line-height:1.76;font-weight:300} .docs{font-size:11px;color:var(--faint);line-height:2} .docs span{display:block;padding-left:11px;position:relative} .docs span::before{content:'';position:absolute;left:0;top:9px;width:4px;height:1px;background:var(--faint)} .tiertag{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border:1px solid currentColor;display:inline-block;margin-bottom:9px} @media(max-width:820px){.rung{grid-template-columns:38px 1fr;gap:14px}.rung .docs{grid-column:2}} /* register */ .reg{border:1px solid var(--line)} .reghead,.regrow{display:grid;grid-template-columns:74px 1fr 92px 118px 74px 96px;gap:12px;padding:12px 16px;align-items:center} .reghead{border-bottom:1px solid var(--line2);background:var(--panel2)} .reghead span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} /* A header must inherit its column's alignment or it stops naming that column. * Cols 5 and 6 (DII, evidence age) hold right-aligned numerics. */ .reghead span:nth-child(5),.reghead span:nth-child(6){text-align:right} .regrow{border-bottom:1px solid var(--line);background:var(--panel);cursor:pointer;transition:background .16s,box-shadow .16s} .regrow:last-child{border-bottom:0} .regrow:hover,.regrow:focus-visible{background:#1f221c;outline:none} .regrow:focus-visible{box-shadow:inset 2px 0 0 var(--amber)} .rid{font-size:11px;color:var(--amber);letter-spacing:.06em} .rnm{font-size:12.5px} .rnm small{display:block;color:var(--faint);font-size:10.5px;letter-spacing:.04em;margin-top:2px} .badge{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border:1px solid currentColor;white-space:nowrap;flex:none;display:inline-block} .b-performing{color:var(--green)}.b-watch{color:var(--amber)}.b-impaired{color:var(--copper)}.b-disputed{color:var(--gray)} .rbn{font-size:11.5px;color:var(--copper);align-self:center} .rsc{text-align:right;font-size:15px} .rev{font-size:10.5px;color:var(--faint);text-align:right} .insp{font-size:10px;color:var(--faint);letter-spacing:.1em;text-align:right} .regrow:hover .insp{color:var(--amber)} @media(max-width:900px){.reghead{display:none} .regrow{grid-template-columns:1fr auto;gap:9px 12px;padding:16px} .regrow .rid{grid-column:1;grid-row:1} .regrow .insp{grid-column:2;grid-row:1;align-self:center} .regrow .rnm{grid-column:1/-1;grid-row:2} .regrow .rbg{grid-column:1;grid-row:3;align-self:center} .regrow .rsc{grid-column:2;grid-row:3;text-align:right;align-self:center} .regrow .rbn{grid-column:1/-1;grid-row:4;align-self:start} .regrow .rev{grid-column:1/-1;grid-row:5;text-align:left}} /* dossier */ #dossier{border:1px solid var(--line2);background:var(--panel);margin-top:22px;box-shadow:0 18px 44px rgba(0,0,0,.45)} .dsh{display:flex;justify-content:space-between;gap:14px;padding:16px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:flex-start} .dsh h3{font-size:16px} .dsh .m{font-size:11px;color:var(--faint);margin-top:4px} .dsgrid{display:grid;grid-template-columns:1fr 1fr;gap:0} .dsgrid>div{padding:18px 16px} .dsgrid>div+div{border-left:1px solid var(--line)} .kv{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;padding:5px 0;border-bottom:1px dotted rgba(255,255,255,.06)} .kv span:first-child{color:var(--faint)} .evrow{display:grid;grid-template-columns:78px 1fr 58px;gap:10px;font-size:11px;padding:7px 0;border-bottom:1px dotted rgba(255,255,255,.06);align-items:baseline} .evrow .t{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase} .t-paperwork{color:var(--green)}.t-operator{color:var(--amber)}.t-external{color:var(--gray)} .evrow .k{color:var(--dim)} .evrow .k i{font-style:normal;color:var(--copper)} .evrow .a{text-align:right;color:var(--faint)} .reason{padding:13px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--dim);background:rgba(200,134,42,.045)} .reason b{color:var(--amber);font-weight:400} @media(max-width:800px){.dsgrid{grid-template-columns:1fr}.dsgrid>div+div{border-left:0;border-top:1px solid var(--line)}} /* pipeline */ .pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line)} .step{padding:22px 18px;background:var(--panel);position:relative} .step+.step{border-left:1px solid var(--line)} .step .n{font-size:10px;color:var(--amber);letter-spacing:.18em} .step h4{font-size:13px;margin:9px 0 7px;letter-spacing:.02em} .step p{font-size:12.5px;color:var(--dim);line-height:1.7;font-weight:300} @media(max-width:900px){.pipe{grid-template-columns:1fr 1fr}.step+.step{border-left:0} .step{border-top:1px solid var(--line)}.step:nth-child(2n){border-left:1px solid var(--line)}} @media(max-width:520px){.pipe{grid-template-columns:1fr}.step:nth-child(2n){border-left:0}} /* comparison */ table.cmp{width:100%;border-collapse:collapse;font-size:12px} table.cmp th{font-weight:400;text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)} table.cmp th.us{color:var(--amber)} table.cmp td{padding:14px;border-bottom:1px solid var(--line);color:var(--dim);vertical-align:top} table.cmp td:first-child{color:var(--ink);width:196px} table.cmp td.us{color:var(--ink);background:rgba(200,134,42,.04);border-left:1px solid rgba(200,134,42,.22);border-right:1px solid rgba(200,134,42,.22)} /* token grid */ .tok{display:grid;grid-template-columns:1.25fr 1fr;gap:26px} .tokbox{border:1px solid var(--line);background:var(--panel)} .tokbox .h{padding:13px 16px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)} .tokbox .b{padding:16px} .allo{display:flex;height:8px;margin-bottom:16px;overflow:hidden} .allo i{display:block;height:100%} @media(max-width:820px){.tok{grid-template-columns:1fr}} /* roadmap */ /* Spine hangs in the gutter; the timeline content itself stays on the same * vertical rule as every other block (was margin-left:8px, which put this one * section 8px off-grid). */ .tl{border-left:1px solid var(--line);margin-left:0;padding-left:0} .tlitem{position:relative;padding:0 0 26px 26px} .tlitem::before{content:'';position:absolute;left:-4.5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--bg);border:1px solid var(--faint)} .tlitem.done::before{background:var(--green);border-color:var(--green)} .tlitem.now::before{background:var(--amber);border-color:var(--amber)} .tlitem .q{font-size:10px;letter-spacing:.15em;color:var(--faint)} .tlitem h4{font-size:13.5px;margin:4px 0 5px} .tlitem p{font-size:12.5px;color:var(--dim);max-width:64ch;line-height:1.74;font-weight:300} .st{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-left:9px} .st.d{color:var(--green)}.st.n{color:var(--amber)}.st.p{color:var(--faint)} /* faq */ .faq{border:1px solid var(--line)} details{border-bottom:1px solid var(--line);background:var(--panel)} details:last-child{border-bottom:0} summary{padding:16px;cursor:pointer;font-size:13px;list-style:none;display:flex;gap:13px;align-items:flex-start} summary::-webkit-details-marker{display:none} summary::before{content:'+';color:var(--amber);flex:none;width:11px} details[open] summary::before{content:'−'} details[open] summary{color:var(--amber)} details .a{padding:0 16px 19px 40px;font-size:13.5px;color:var(--dim);max-width:72ch;line-height:1.82;font-weight:300} details .a code{color:var(--ink);background:rgba(255,255,255,.05);padding:1px 5px;font-size:11px} /* footer */ footer{padding:44px 0 30px;font-size:11px;color:var(--faint)} .fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:26px;margin-bottom:32px} .fgrid h5{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:11px} .fgrid a{display:block;padding:3px 0;color:var(--faint)} .fgrid a:hover{color:var(--amber)} .fbot{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;line-height:1.8} @media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}} /* Touch-target floor. Coarse pointers get 34px+ of tappable height on every * link without changing the desktop layout's optical rhythm. Applied by input * type, not by viewport width, so a small-window mouse user keeps tight spacing * and a large tablet still gets thumbs-sized targets. */ @media (pointer:coarse){ .navlinks a{display:inline-flex;align-items:center;min-height:34px} .fgrid a{padding:8px 0;min-height:34px;display:flex;align-items:center} .docfoot a,.fbot a{min-height:34px;display:inline-flex;align-items:center} .brand{min-height:36px;display:inline-flex;align-items:center} summary{min-height:44px} .reason a,.simnote a,p a{padding:7px 0;display:inline-block;min-height:32px} } /* ── view router ───────────────────────────────────────────────────────────── * The nav is a router, not a scroll list: one view is mounted at a time. * * Routing is opt-in via the .routed class, which router.js adds to on * boot. Without JavaScript nothing is hidden and the page stays a single * readable document — the content is never gated behind a script. */ /* Scoped to DIRECT children of body: only page-level regions are routable. * A stray data-view attribute inside the nav or a component can then never be * hidden by the router — which is exactly the bug this replaced. */ html.routed > body > [data-view]{display:none} html.routed > body > [data-view].is-active{display:block;animation:viewIn .34s cubic-bezier(.22,.61,.36,1) both} @keyframes viewIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} /* Active nav item gets a copper rule under it rather than a filled pill — * consistent with the register's hairline language. */ .navlinks a{position:relative} .navlinks a.is-current{color:var(--ink)} .navlinks a.is-current::after{ content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--amber)} /* Prev/next pager at the foot of every view: routing removes the ability to * simply keep scrolling, so sequential reading has to be given back explicitly. */ .pager{display:flex;justify-content:space-between;gap:14px;align-items:stretch; border-top:1px solid var(--line);margin-top:44px;padding-top:20px;flex-wrap:wrap} .pager a{flex:1 1 220px;border:1px solid var(--line);background:var(--bg2); padding:13px 15px;display:flex;flex-direction:column;gap:4px;min-width:0} .pager a:hover{border-color:var(--amber);background:var(--panel)} .pager a.nx{text-align:right;align-items:flex-end} .pager .d{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)} .pager .t{font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .pager a:hover .t{color:var(--amber)} .pager .spacer{flex:1 1 220px} /* Compact view index in the footer so every route stays reachable from anywhere. */ .viewnav{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px} .viewnav a{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--line);padding:5px 9px;color:var(--faint)} .viewnav a:hover{border-color:var(--amber);color:var(--amber)} .viewnav a.is-current{border-color:var(--amber);color:var(--amber)} @media (pointer:coarse){ .viewnav a{min-height:32px;display:inline-flex;align-items:center} } @media (prefers-reduced-motion: reduce){ .routed [data-view].is-active{animation:none} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .sig.remarked{animation:none} .mark .bind,.tick{animation:none;opacity:1} .fill{transition:none} } /* ═══════════════════════════════════════════════════════════════════════ * REGISTER-FIRST REWRITE * The register used to be the fifth view of ten. A visitor had to read four * essays before seeing the product do anything, so the page argued its thesis * to people who had already left. The register is now the landing view and the * mechanism prose sits behind it as justification. Rules below support that * inversion. Colour tokens are untouched: --faint/--copper/--gray remain the * values solved to 4.55 against --panel2, the lightest ground they land on. * ═══════════════════════════════════════════════════════════════════════ */ /* Keyboard users should reach the register without traversing the hero. */ .skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--panel2);color:var(--ink); padding:10px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;border:1px solid var(--amber)} .skip:focus{left:12px;top:10px} /* ---------- hero: proposition left, live proof right ---------- */ .heroL{min-width:0} .head{font-family:var(--serif);font-weight:300;font-size:clamp(38px,6.4vw,72px); line-height:1.02;letter-spacing:-.028em;color:var(--ink)} .head em{font-style:italic;color:var(--amber)} .heroFacts{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap} .heroFacts>div{display:flex;flex-direction:column;gap:2px} .heroFacts b{font-family:var(--mono);font-size:27px;font-weight:400;letter-spacing:-.02em;color:var(--ink)} .heroFacts span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .tick{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none; box-shadow:0 0 0 3px rgba(217,150,58,.16)} /* Proof card. The engine's sharpest behaviour is disagreeing with itself for a * printed reason — strong signals, expired paperwork, badge refuses to round * up. That belongs at the fold, not in section three. */ .proof{border:1px solid var(--line2);background:var(--panel); box-shadow:0 20px 52px rgba(0,0,0,.44);align-self:start} .proofH{padding:11px 17px;border-bottom:1px solid var(--line);background:var(--panel2)} .proofB{padding:18px 17px} .proofId{display:flex;flex-direction:column;gap:3px;margin-bottom:17px} .proofId b{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.03em;color:var(--ink)} .proofId span{font-size:12px;color:var(--dim)} .proofSplit{display:grid;grid-template-columns:1fr auto 1fr;gap:13px;align-items:center; padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .pxNum{font-size:38px;line-height:1;letter-spacing:-.03em;margin-top:7px} .pxSub{font-size:10.5px;margin-top:5px;font-family:var(--mono);color:var(--faint)} .pxArrow{color:var(--line2);font-size:17px} .pxBadgeWrap{margin-top:9px} .proofWhy{font-size:12.5px;line-height:1.72;color:var(--dim);margin-top:15px;font-weight:300} .proofFoot{display:flex;justify-content:space-between;align-items:center;gap:12px; margin-top:16px;padding-top:13px;border-top:1px solid var(--line); font-family:var(--mono);font-size:10px;color:var(--faint);flex-wrap:wrap} .proofFoot a{color:var(--amber);border-bottom:1px solid rgba(217,150,58,.4);padding-bottom:1px} .proofFoot a:hover{border-bottom-color:var(--amber)} /* ---------- in-view blocks (register / DII now live inside the hero view) ---------- */ .regBlock,.diiBlock{margin-top:54px;padding-top:40px;border-top:1px solid var(--line)} .regHd,.diiHd{max-width:66ch;margin-bottom:22px} .regHd h2,.diiHd h2{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.7vw,29px); letter-spacing:-.02em;color:var(--ink)} .regHd p,.diiHd p{font-size:13.5px;color:var(--dim);line-height:1.76;margin-top:9px;font-weight:300} .regHd em,.diiHd em{font-style:italic;color:#c9c6bc} .regHd b,.diiHd b{color:var(--ink);font-weight:400} /* One honest disclosure, not four. Repeating "seeded preview" in the hero, the * table, the roadmap and the FAQ taught casual readers "unfinished" before it * taught them "rigorous". It is stated once, here, where the figures are. */ .seedNote{margin-top:15px;padding:12px 15px;background:var(--sunk); border-left:2px solid var(--line2);font-size:11.5px;line-height:1.7; color:var(--faint);max-width:88ch} .diiTail{margin-top:15px;font-size:11.5px;color:var(--faint);max-width:80ch;line-height:1.7} .bindHint{color:var(--amber);font-family:var(--mono);font-size:10px} .bandNote{font-size:10.5px;color:var(--faint);line-height:1.62;margin-top:10px} .bandNote b{color:var(--dim);font-weight:400} /* Row the proof card pointed at, so the visitor sees where they landed. */ @keyframes pingRow{0%{background:rgba(217,150,58,.17)}100%{background:var(--panel)}} .regrow.pinged{animation:pingRow 1.5s ease-out} /* ---------- fleet telemetry, demoted from hero to a strip ---------- */ .stripBig{position:relative} .strip .bigread{display:flex;align-items:baseline;gap:6px;margin-top:6px} .strip .bigread .v{font-family:var(--mono);font-size:29px;letter-spacing:-.03em;color:var(--ink)} .strip .bigread .u{font-family:var(--mono);font-size:11px;color:var(--faint)} .strip .hd{font-size:10px;color:var(--faint);margin-top:3px} .strip .spark{width:100%;height:30px;margin-top:8px;display:block} .tsInline{font-family:var(--mono);color:var(--faint)} /* ---------- method view: sub-sections inside one view ---------- */ .subhead{display:flex;align-items:baseline;gap:12px;margin:52px 0 10px; font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.015em;color:var(--ink)} .subhead .sn{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--amber); border:1px solid var(--line2);padding:3px 7px;flex:none} .subp{font-size:13px;color:var(--dim);line-height:1.76;max-width:74ch;margin-bottom:20px;font-weight:300} .subp em{font-style:italic;color:#c9c6bc} .selftest{margin-top:20px;padding:14px 16px;background:var(--sunk); border-left:2px solid var(--amber);font-size:12.5px;line-height:1.74;color:var(--dim);max-width:92ch} /* Wide tables must scroll rather than crush their own columns on narrow screens. */ .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .tscroll table{min-width:640px} .tokNote{margin-top:14px;padding-top:12px;border-top:1px solid var(--line); font-size:11.5px;line-height:1.7;color:var(--faint)} .tokNote b{color:var(--dim);font-weight:400} /* ---------- footer view index ---------- */ .fviews{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)} .vh{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint); font-weight:400;margin-bottom:11px} /* ---------- responsive ---------- */ @media(max-width:1020px){ .hero{grid-template-columns:1fr;gap:38px} .proof{max-width:none} .strip{grid-template-columns:repeat(2,1fr)} .strip>div:nth-child(2n){border-right:0} .strip>div{border-bottom:1px solid var(--line)} } @media(max-width:700px){ .head{font-size:clamp(32px,10vw,44px)} .heroFacts{gap:22px} .heroFacts b{font-size:22px} .proofSplit{grid-template-columns:1fr;gap:9px;text-align:left} .pxArrow{transform:rotate(90deg);width:fit-content} .pxNum{font-size:31px} .strip{grid-template-columns:1fr} .strip>div{border-right:0} .regBlock,.diiBlock{margin-top:38px;padding-top:30px} .subhead{margin-top:38px;font-size:17px} } /* Motion is decoration here; the register must read identically without it. */ @media(prefers-reduced-motion:reduce){ .regrow.pinged{animation:none} html{scroll-behavior:auto} }