/* ========================================================================== AxForge apex — s05 · PLAIN One self-contained file. No imports, no remote assets. The only scripts are the two inline request-access modal handlers at the end of . THE BRIEF, IN ONE LINE The easiest page in the set to understand. Ten seconds to know what is sold. Every fact a buyer needs is still here — it just lives in structure instead of in sentences. ------------------------------------------------------------------------ THE MODULAR SCALE — everything on this page comes from these two series. Nothing is ever "a bit bigger": it goes to the next step. TYPE base 17px, ratio 1.25 (major third) 10.9 · 13.6 · 17 · 21.25 · 26.6 · 33.2 · 41.5 · 51.9 · 64.9 --t-2 --t-1 --t0 --t1 --t2 --t3 --t4 --t5 --t6 Fluid headings clamp BETWEEN two steps of this series, never outside it: h1 = t4 -> t6, h2 = t2 -> t4. SPACE 4px grid, φ-spaced: 4 · 8 · 12 · 20 · 32 · 52 · 84 --s1 --s2 --s3 --s4 --s5 --s6 --s7 Ratio, not arithmetic, is what groups things: inside a row s4 (20) between rows s5 (32) head -> object s6 (52) between sections s7 (84 top + 84 bottom = 168) Each step is ~1.6x the last, so the eye reads the grouping without needing a box or a line to be drawn around it. 168 < 250 by design: the band gap can never register as a hole. GRID one 12-column grid, gutter s5. Every element starts and ends on it. Only proportional spans are used: 12, 8/4 (2:1), 6/6 (1:1), 4/4/4 (1:1:1). Nothing is "roughly aligned". SHAPE one radius: 12px, 8px when nested. Pills only for status chips. ------------------------------------------------------------------------ HOW IT STAYS CALM * FEW OBJECTS, LARGE. One object per section. One table beats three cards. * LIGHT TOUCH. Hairlines, not borders. Two tone steps, no third. No shadows anywhere, no gradients, no ambient field, no glow. * TYPE DOES THE WORK. Real jumps between levels; size and weight instead of decoration. * NO PROSE BLOBS. Two ordinary sentences per block, maximum. Most are one. Anything longer became a table row or a labelled pair. SEMANTIC COLOUR — meaning only, never decoration blue AxForge, actions cyan infrastructure, API, data paths green live / in-region / verified amber committed capacity, commercial states Colour is never the only signal: every dot sits beside a word. ========================================================================== */ :root{ color-scheme:dark; /* palette */ --navy-950:#01050f; --navy-850:#070d1c; --navy-800:#0b1428; --navy-600:#16304f; --navy-500:#234c79; --blue-500:#2e9bff; --blue-400:#54adff; --blue-300:#8fc3ff; --cyan-300:#7df9ff; --cyan-400:#46d6e8; --green-400:#3ddc97; --amber-400:#e6ae42; --ink-100:#f2f6ff; --ink-200:#dbe4f5; --ink-400:#98a4ba; --bg:var(--navy-950); --sur:#060c19; /* tone step 1 — a panel */ --well:#03080f; /* tone step 2 — a machine, a terminal, a figure */ --text:var(--ink-200); --strong:var(--ink-100); --dim:var(--ink-400); --hair:rgba(35,76,121,.42); --hair-2:rgba(35,76,121,.72); --wash:rgba(46,155,255,.06); /* --- TYPE: base 17, ratio 1.25 --- */ --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace; --t-2:.68rem; /* 10.9 */ --t-1:.85rem; /* 13.6 */ --t0:1.0625rem; /* 17 */ --t1:1.328rem; /* 21.25*/ --t2:1.66rem; /* 26.6 */ --t3:2.075rem; /* 33.2 */ --t4:2.594rem; /* 41.5 */ --t5:3.244rem; /* 51.9 */ --t6:4.055rem; /* 64.9 */ --caps:.14em; /* --- SPACE: 4px grid, φ-spaced --- */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1.25rem; --s5:2rem; --s6:3.25rem; --s7:5.25rem; --band:clamp(3.25rem,2.1rem + 3.4vw,5.25rem); /* s6 -> s7 */ --gut:clamp(1.25rem,.5rem + 2.6vw,3.25rem); /* s4 -> s6 */ --maxw:76rem; --r:12px; --r-in:8px; --dur:.15s; --ease:cubic-bezier(.2,.6,.3,1); } *,*::before,*::after{box-sizing:border-box} html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth} body{ margin:0;overflow-x:clip;background:var(--bg);color:var(--text); font-family:var(--sans);font-size:var(--t0);line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3,p,ul,ol,dl,dd,figure,table,pre{margin:0} ul,ol{padding:0;list-style:none} svg{display:block} a{color:var(--blue-300);text-decoration:none} a:hover{color:var(--cyan-300)} :focus{outline:none} :focus-visible{outline:2px solid var(--cyan-300);outline-offset:3px;border-radius:var(--r-in)} ::selection{background:rgba(46,155,255,.3);color:var(--strong)} /* ---------- type roles ---------------------------------------------------- */ /* h1 does NOT balance. Balanced, it wrapped at ~410px inside a 666px column and opened a 263px-wide void between the headline and the panel beside it. It runs the full width of its column and wraps naturally. */ h1{ font-size:clamp(var(--t4),1.6rem + 4.4vw,var(--t6)); line-height:1.02;letter-spacing:-.035em;font-weight:700;color:var(--strong); } /* h2 tops out at t5, not t4. At t4 a one-line heading like "Six levels of control." stopped 300px short of its column and that slack joined the band padding above it — a 276x276 void. One step up on the scale fills it. */ h2{ font-size:clamp(var(--t2),1.2rem + 2.6vw,var(--t5)); line-height:1.08;letter-spacing:-.03em;font-weight:700;color:var(--strong); } h3{font-size:var(--t2);line-height:1.15;letter-spacing:-.025em;font-weight:650;color:var(--strong)} .lead{font-size:var(--t1);line-height:1.5;color:var(--text)} .small{font-size:var(--t-1);line-height:1.6;color:var(--dim)} .lab{ font-family:var(--mono);font-size:var(--t-2);text-transform:uppercase; letter-spacing:var(--caps);color:var(--dim);font-weight:600;line-height:1.5; } .lab--ax{color:var(--blue-400)} .lab--net{color:var(--cyan-400)} b,strong{font-weight:650;color:var(--strong)} .num{font-variant-numeric:tabular-nums;letter-spacing:-.02em} .mono{font-family:var(--mono)} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* ---------- the one status chip: dot + word ------------------------------- */ .chip{ display:inline-flex;align-items:center;gap:.4rem; padding:.2rem .55rem;border-radius:999px;border:1px solid var(--hair-2); font-family:var(--mono);font-size:var(--t-2);letter-spacing:.08em; text-transform:uppercase;font-weight:600;color:var(--dim);white-space:nowrap; } .chip i{width:.4rem;height:.4rem;border-radius:50%;background:currentColor;flex:none} .chip--live{color:var(--green-400);border-color:rgba(61,220,151,.4)} .chip--net{color:var(--cyan-300);border-color:rgba(70,214,232,.4)} .chip--wait{color:var(--amber-400);border-color:rgba(230,174,66,.4)} /* ---------- the one button pair ------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.85rem 1.4rem;border-radius:var(--r-in);border:1px solid transparent; font-size:var(--t0);font-weight:650;letter-spacing:-.01em; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease); } .btn--primary{background:var(--blue-500);color:#fff;border-color:var(--blue-500)} .btn--primary:hover{background:var(--blue-400);border-color:var(--blue-400);color:#fff} .btn--ghost{background:transparent;color:var(--strong);border-color:var(--hair-2)} .btn--ghost:hover{color:var(--blue-300);border-color:var(--blue-500);background:var(--wash)} .btn--sm{padding:.5rem .9rem;font-size:var(--t-1)} .go{font-size:var(--t0);font-weight:650;color:var(--blue-300);white-space:nowrap} .go::after{content:" \2192"} .go:hover{text-decoration:underline;text-underline-offset:.25em} .skip{position:absolute;left:var(--s4);top:var(--s4);z-index:60;transform:translateY(-400%)} .skip:focus-visible{transform:none} /* ---------- layout: one 12-column grid ------------------------------------ */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5)} .band{padding-block:var(--band);border-top:1px solid var(--hair)} .band--first{border-top:0} /* ONE section head, used by every section: title on 7, deck on 5 — the same 7:5 split as the hero, bottoms aligned. The deck sat UNDER the title in the first build. That left the right five columns empty for the height of the head, which joined the 168px band gap above it and measured a 436x436 void. The deck moved into that column and the void went with it. */ .head{align-items:end;row-gap:var(--s4);margin-bottom:var(--s6)} .head__t{grid-column:1/8} .head h2{margin-top:var(--s3)} .head__d{grid-column:8/13} .head__d .lead{max-width:40ch} .head__d .lab{display:block;margin-top:var(--s3)} /* ---------- one table treatment ------------------------------------------- */ .tscroll{overflow-x:auto} table{width:100%;border-collapse:collapse;text-align:left} caption{text-align:left} thead th{ font-family:var(--mono);font-size:var(--t-2);text-transform:uppercase; letter-spacing:var(--caps);color:var(--dim);font-weight:600; padding:0 var(--s4) var(--s3) 0;border-bottom:1px solid var(--hair-2);white-space:nowrap; } tbody th,tbody td{ padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--hair); vertical-align:baseline;font-weight:400;color:var(--text); } tbody tr:last-child th,tbody tr:last-child td{border-bottom:0} tbody tr:hover th,tbody tr:hover td{background:var(--wash)} th:last-child,td:last-child{padding-right:0} .t-r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--strong)} thead th.t-r{color:var(--dim)} .t-name{font-size:var(--t1);font-weight:650;color:var(--strong);letter-spacing:-.02em;line-height:1.2} .t-sub{display:block;font-size:var(--t-1);color:var(--dim);margin-top:.2rem;line-height:1.45} .t-m{color:var(--dim)} .t-price{font-size:var(--t1);font-weight:650;color:var(--strong)} .t-price span{display:block;font-size:var(--t-2);font-family:var(--mono);color:var(--dim); letter-spacing:.06em;text-transform:uppercase;margin-top:.25rem;font-weight:600} .tnote{margin-top:var(--s4);font-size:var(--t-1);color:var(--dim)} .tnote b{color:var(--amber-400);font-weight:650} /* ========================================================================== HEADER ========================================================================== */ .site-header{ position:sticky;top:0;z-index:40;background:rgba(1,5,15,.92); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-bottom:1px solid var(--hair); } .hbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s4);min-height:4.25rem} .brand{display:flex;align-items:center;gap:.55rem;color:var(--strong); font-weight:700;font-size:var(--t1);letter-spacing:-.02em;flex:none} .brand:hover{color:var(--strong)} .brand svg{width:1.4rem;height:1.4rem;color:var(--blue-500);flex:none} .hnav{display:flex;gap:var(--s4);justify-self:center} .hnav a{font-size:var(--t0);color:var(--dim);font-weight:550} .hnav a:hover{color:var(--strong)} .hact{justify-self:end;display:flex;align-items:center;gap:var(--s4);flex:none} /* ========================================================================== HERO — copy on 7, the numbers on 5 ========================================================================== */ .hero{padding-block:clamp(2rem,1rem + 3.4vw,3.25rem) var(--band)} .hero__grid{align-items:center;row-gap:var(--s6)} .hero__copy{grid-column:1/8} .hero h1{margin-top:var(--s4)} .hero__deck{margin-top:var(--s4);max-width:44ch} .hero__acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)} .hero__fine{margin-top:var(--s4);font-size:var(--t-1);color:var(--dim)} .panel{grid-column:8/13;background:var(--sur);border:1px solid var(--hair);border-radius:var(--r); padding:var(--s5)} .panel__h{display:flex;align-items:center;justify-content:space-between;gap:var(--s4); padding-bottom:var(--s4);border-bottom:1px solid var(--hair)} .facts div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);align-items:baseline; gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--hair)} .facts div:last-child{border-bottom:0;padding-bottom:0} .facts dt{font-family:var(--mono);font-size:var(--t-2);text-transform:uppercase; letter-spacing:var(--caps);color:var(--dim);font-weight:600} .facts dd{margin:0;display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap} .facts b{font-size:var(--t2);font-weight:700;color:var(--strong);letter-spacing:-.03em;line-height:1.1} .facts span{font-size:var(--t-1);color:var(--dim)} /* ========================================================================== DOORS — three equal columns, 1:1:1 ========================================================================== */ /* subgrid: the five parts of a door line up across all three, so the row reads as one object rather than three cards of different rhythm */ .doors{row-gap:var(--s5);grid-template-rows:auto 1fr auto auto auto} .door{grid-column:span 4;grid-row:span 5;display:grid;grid-template-rows:subgrid;gap:var(--s4); padding-top:var(--s4);border-top:2px solid var(--blue-500)} /* all three rules are the same blue on purpose: blue means AxForge and action. Three different hues here would be colour used as decoration. */ .door h3{font-size:var(--t3);letter-spacing:-.03em} .door p{color:var(--text)} .door__p{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--hair); display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap} .door__p b{font-size:var(--t1);font-weight:700;color:var(--strong);letter-spacing:-.02em} .door__p span{font-size:var(--t-1);color:var(--dim)} /* ========================================================================== CALLOUT — the corrected claim, said big and once ========================================================================== */ /* The claim runs as TWO halves of one statement, 1:1, so it reaches the right edge. Set as a single 30ch paragraph it left a 492x492 void beside it. */ .callout{grid-column:1/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s5);row-gap:var(--s3); border-left:2px solid var(--cyan-400);padding-left:var(--s5);margin-bottom:var(--s6)} .callout p{font-size:var(--t2);line-height:1.32;letter-spacing:-.025em;color:var(--strong); font-weight:600} .callout p em{font-style:normal;color:var(--cyan-300)} .callout .lab{grid-column:1/3} /* ========================================================================== REMOVED — the easiest thing on the page to read ========================================================================== */ .gone li{display:grid;grid-template-columns:2rem minmax(0,7fr) minmax(0,5fr); align-items:baseline;gap:var(--s5);padding:var(--s4) 0;border-bottom:1px solid var(--hair)} .gone li:last-child{border-bottom:0} .gone svg{width:1.25rem;height:1.25rem;color:var(--blue-400);align-self:center} .gone b{font-size:var(--t2);font-weight:650;color:var(--strong);letter-spacing:-.025em;line-height:1.25} .gone span{color:var(--dim)} /* ========================================================================== PROOF — the machine on 6, what it tells you on 6 ========================================================================== */ .proof{row-gap:var(--s5);align-items:stretch} .term{grid-column:1/7;background:var(--well);border:1px solid var(--hair);border-radius:var(--r); display:flex;flex-direction:column;overflow:hidden} .term__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4); flex-wrap:wrap;padding:var(--s4);border-bottom:1px solid var(--hair)} .term pre{padding:var(--s4);font-family:var(--mono);font-size:var(--t-1);line-height:1.85; overflow-x:auto;white-space:pre;color:var(--text);flex:1} .c-c{color:#6f7d93}.c-cmd{color:var(--blue-400)}.c-s{color:var(--cyan-300)} .c-k{color:var(--blue-300)}.c-ok{color:var(--green-400)} .read{grid-column:7/13;display:flex;flex-direction:column} .read div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s4); align-items:baseline;padding:var(--s4) 0;border-bottom:1px solid var(--hair)} .read div:first-child{padding-top:0} .read div:last-child{border-bottom:0} .read dt{font-family:var(--mono);font-size:var(--t-2);text-transform:uppercase; letter-spacing:var(--caps);color:var(--dim);font-weight:600;grid-column:1/2} .read dd{margin:0;grid-column:1/2;font-size:var(--t1);color:var(--strong);font-weight:650; letter-spacing:-.02em;line-height:1.25} .read dd small{display:block;font-size:var(--t-1);color:var(--dim);font-weight:400; letter-spacing:0;margin-top:.25rem;line-height:1.5} .read .rs{grid-column:2/3;grid-row:1/3;align-self:center;justify-self:end} /* ========================================================================== SOVEREIGNTY — one table, two statements, one diagram ========================================================================== */ .says{row-gap:var(--s5);margin-top:var(--s6)} .say{grid-column:span 6;border-top:1px solid var(--hair-2);padding-top:var(--s4)} .say p{font-size:var(--t1);line-height:1.4;color:var(--strong);font-weight:600;letter-spacing:-.02em} .say p em{font-style:normal;color:var(--green-400)} .say .lab{margin-bottom:var(--s3)} .fig{grid-column:1/13;margin-top:var(--s6);background:var(--well);border:1px solid var(--hair); border-radius:var(--r);overflow:hidden} .fig__cap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4); flex-wrap:wrap;padding:var(--s4);border-bottom:1px solid var(--hair)} .fig__b{padding:var(--s5)} .flow{display:grid;grid-template-columns:minmax(0,4fr) 2.75rem minmax(0,9fr);align-items:stretch} .node{border:1px solid var(--hair-2);border-radius:var(--r-in);padding:var(--s4); display:flex;flex-direction:column;justify-content:center;gap:.35rem;min-width:0;background:var(--sur)} .node b{font-size:var(--t0);font-weight:650;color:var(--strong);line-height:1.3} .node span{font-size:var(--t-1);color:var(--dim);line-height:1.5} .zone{position:relative;border:1px dashed rgba(70,214,232,.45);border-radius:var(--r-in); padding:var(--s5) var(--s4) var(--s4);display:grid; grid-template-columns:minmax(0,1fr) 2.75rem minmax(0,1fr);align-items:stretch} .zone__tag{position:absolute;top:-.7rem;left:var(--s4);display:flex;align-items:center;gap:var(--s3); background:var(--well);padding-inline:.4rem} .arrow{display:flex;align-items:center;justify-content:center;gap:.2rem} .arrow i{display:block;flex:1;height:1px;background:var(--cyan-400)} .arrow svg{width:.55rem;height:.55rem;flex:none;color:var(--cyan-400)} .cut{display:grid;grid-template-columns:minmax(0,4fr) 2.75rem minmax(0,9fr);align-items:center; margin-top:var(--s4);padding-top:var(--s4);border-top:1px dashed var(--hair-2)} .cut__x{display:flex;align-items:center;justify-content:center;gap:.25rem} .cut__x i{display:block;flex:1;height:0;border-top:1px dashed var(--navy-500)} .cut__x b{color:var(--amber-400);font-size:var(--t-1);font-weight:700} .cut__n{border:1px dashed var(--navy-500);border-radius:var(--r-in);padding:var(--s3) var(--s4); color:var(--dim);font-size:var(--t-1)} .cut__s{grid-column:3;font-size:var(--t-1);color:var(--dim)} .cut__s b{color:var(--text)} .key{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);padding:var(--s4); border-top:1px solid var(--hair)} .key div{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:var(--t-2); letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:600} .key s{display:block;width:1.5rem;height:0;text-decoration:none} .key .k1{border-top:1px solid var(--cyan-400)} .key .k2{border-top:1px dashed rgba(70,214,232,.45)} .key .k3{border-top:1px dashed var(--navy-500)} /* ---------- regions row ---------------------------------------------------- */ .regions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)} /* ========================================================================== CLOSE ========================================================================== */ .close{align-items:start;row-gap:var(--s5)} .close__t{grid-column:1/8} /* 46ch, not 38: at 38 the closing deck and its fine print both wrapped early and the slack beside them joined the band's bottom padding — a 272px void. */ .close__t p{margin-top:var(--s4);max-width:46ch} .close__acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)} .close__a{grid-column:8/13;background:var(--sur);border:1px solid var(--hair);border-radius:var(--r); padding:var(--s5)} .close__a dl div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--s4); padding:var(--s3) 0;border-bottom:1px solid var(--hair)} .close__a dl div:last-child{border-bottom:0;padding-bottom:0} .close__a dt{font-family:var(--mono);font-size:var(--t-2);text-transform:uppercase; letter-spacing:var(--caps);color:var(--dim);font-weight:600;padding-top:.2rem} .close__a dd{margin:0;font-size:var(--t-1);color:var(--text);line-height:1.5} .close__a .lab{display:block;margin-bottom:var(--s4);padding-bottom:var(--s4); border-bottom:1px solid var(--hair)} /* ========================================================================== FOOTER ========================================================================== */ .site-footer{border-top:1px solid var(--hair);padding-block:var(--s6) var(--s5)} /* two rows, each reaching both edges: identity + regions across the top, three link columns of four beneath. Set as brand(4) + three columns of two, the last two columns of the grid stayed empty and merged with the page margin into a 264px void. */ .foot{row-gap:var(--s5)} .foot__a{grid-column:1/13;display:flex;flex-wrap:wrap;align-items:baseline; justify-content:space-between;gap:var(--s4) var(--s5); padding-bottom:var(--s5);border-bottom:1px solid var(--hair)} .foot__c{grid-column:span 3} .foot h2{font-family:var(--mono);font-size:var(--t-2);text-transform:uppercase; letter-spacing:var(--caps);color:var(--dim);font-weight:600;margin-bottom:var(--s3)} .foot li{margin-bottom:.45rem} .foot a{font-size:var(--t-1);color:var(--dim)} .foot a:hover{color:var(--blue-300)} .foot__id{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s3) var(--s4)} .foot__a p{font-size:var(--t-1);color:var(--dim)} .foot__reg{display:flex;flex-wrap:wrap;gap:var(--s2)} .foot__brand{display:flex;align-items:center;gap:.5rem;color:var(--strong);font-weight:700;font-size:var(--t0)} .foot__brand svg{width:1.1rem;height:1.1rem;color:var(--blue-500)} .legal{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between; margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--hair); font-size:var(--t-2);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)} /* ========================================================================== RESPONSIVE — the 12-column grid collapses to 6, then to 1 ========================================================================== */ @media (max-width:1080px){ .hero__copy{grid-column:1/7} .panel{grid-column:7/13} .head__t{grid-column:1/9} .gone li{grid-template-columns:2rem minmax(0,1fr);row-gap:var(--s2)} .gone span{grid-column:2} } @media (max-width:900px){ .hnav{display:none} .hero__copy,.panel,.head__t,.head__d,.close__t,.close__a{grid-column:1/13} .head{align-items:start} .head__d .lead{max-width:52ch} .hero__deck{max-width:44ch} .doors{grid-template-rows:none} .door{grid-column:span 6;grid-row:auto;display:flex;flex-direction:column} .door:nth-child(3){grid-column:1/13} .term,.read{grid-column:1/13} .say{grid-column:1/13} .foot__a{grid-column:1/13} .foot__c{grid-column:span 4} .flow,.cut{grid-template-columns:minmax(0,1fr)} .zone{grid-template-columns:minmax(0,1fr)} .arrow{flex-direction:column;min-height:2.25rem;padding-block:.4rem} .arrow i{width:1px;height:auto;flex:1} .arrow svg{transform:rotate(90deg)} .cut__x{padding-block:var(--s3)} .cut__s{grid-column:1} .cut__n{margin-top:var(--s3)} } @media (max-width:700px){ .door{grid-column:1/13} .facts div{grid-template-columns:6.5rem minmax(0,1fr)} .close__a dl div{grid-template-columns:5rem minmax(0,1fr)} /* tables become labelled blocks — same treatment, restacked */ .rt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .rt,.rt tbody,.rt tr,.rt th,.rt td{display:block;width:auto} .rt tr{padding:var(--s4) 0;border-bottom:1px solid var(--hair)} .rt tr:last-child{border-bottom:0} .rt tbody th,.rt tbody td{padding:0;border-bottom:0} .rt tbody td{margin-top:var(--s3);display:grid;grid-template-columns:8rem minmax(0,1fr); gap:var(--s4);align-items:baseline} .rt tbody td::before{content:attr(data-l);font-family:var(--mono);font-size:var(--t-2); text-transform:uppercase;letter-spacing:var(--caps);color:var(--dim);font-weight:600} .rt td.t-r{text-align:left} .rt .t-price span{display:inline;margin-left:.4rem;margin-top:0} .read div{grid-template-columns:minmax(0,1fr)} .read .rs{grid-column:1;grid-row:auto;justify-self:start} .legal{gap:var(--s2)} } @media (max-width:560px){ /* the link columns stay PAIRED here. Stacked full-width they left the right half of the footer empty for its whole height — a 280px void at 390. */ .foot__c{grid-column:span 6} .facts div{grid-template-columns:minmax(0,1fr);gap:var(--s2)} .rt tbody td{grid-template-columns:minmax(0,1fr);gap:var(--s1)} .btn{width:100%} .hact .btn{width:auto} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} html{scroll-behavior:auto} } @media (forced-colors:active){ .panel,.node,.zone,.term,.fig,.close__a,.chip{border-color:CanvasText} } /* Waiting-list modal. Same grammar as the panels: hairline, wash, caps labels. */ dialog.wl{border:1px solid var(--hair);background:var(--sur);color:var(--text); border-radius:10px;padding:0;max-width:26rem;width:calc(100% - 2rem)} dialog.wl::backdrop{background:rgba(1,5,15,.72)} .wl__in{padding:1.5rem} .wl__in h3{margin:0 0 .35rem;color:var(--strong);font-size:1.15rem} .wl__in .lead{margin:0 0 1rem} .wl__in label{display:block;font-size:.72rem;letter-spacing:var(--caps); text-transform:uppercase;color:var(--dim);margin:.85rem 0 .3rem} .wl__in input,.wl__in textarea{width:100%;box-sizing:border-box;background:var(--well); border:1px solid var(--hair);border-radius:6px;color:var(--strong); font:inherit;padding:.55rem .65rem} .wl__in input:focus,.wl__in textarea:focus{outline:2px solid var(--blue-500);outline-offset:1px} .wl__acts{display:flex;gap:.6rem;align-items:center;margin-top:1.1rem} .wl__x{position:absolute;top:.6rem;right:.8rem;background:none;border:0; color:var(--dim);font-size:1.3rem;cursor:pointer;line-height:1} .wl__x:hover{color:var(--strong)} .wl__ok{display:none;padding:.5rem 0} dialog.we{border:1px solid var(--hair);background:var(--sur);color:var(--text); border-radius:10px;padding:0;max-width:28rem;width:calc(100% - 2rem)} dialog.we::backdrop{background:rgba(1,5,15,.72)} dialog.we .wl__in{border-top:3px solid var(--blue-500)} dialog.we select{width:100%;box-sizing:border-box;background:var(--well); border:1px solid var(--hair);border-radius:6px;color:var(--strong); font:inherit;padding:.55rem .65rem} dialog.we select:focus{outline:2px solid var(--blue-500);outline-offset:1px} .t-div td{padding:1rem .5rem .4rem;border-bottom:1px solid var(--hair)} .t-div .lab{letter-spacing:var(--caps)} /* ========================================================================== SUBPAGE EXTENSIONS — components the apex page does not need, built ONLY on the tokens and primitives above. One system: never redefine anything that already exists in this file. ========================================================================== */ .crumb{font-size:var(--t-1);color:var(--dim);padding:var(--s4) 0 0} .crumb a{color:var(--dim)} .crumb a:hover{color:var(--text)} /* landing hero (the apex .hero is the 12-col band hero; this is the page one) */ .lhero{padding:var(--s6) 0 var(--s5);border-bottom:1px solid var(--hair)} .lhero h1{color:var(--strong);font-size:clamp(var(--t3),1.4rem + 2.6vw,var(--t4)); line-height:1.12;letter-spacing:-.01em;max-width:46rem} .lhero .lead{margin-top:var(--s4);max-width:none} .lhero__meta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)} .lhero .hero__acts{margin-top:var(--s5);align-items:center} .lhero .hero__acts .hero__fine{flex-basis:100%;margin-top:var(--s1)} section{padding:var(--s6) 0;border-bottom:1px solid var(--hair)} section>.wrap>h2{color:var(--strong);font-size:clamp(var(--t1),1rem + 1.4vw,var(--t2)); margin-bottom:var(--s4)} section>.wrap>.lab{display:block;margin-bottom:var(--s2)} .note{font-size:var(--t-1);color:var(--dim);max-width:none;margin-top:var(--s5)} .note ul{list-style:disc;margin:var(--s2) 0 0 1.2em} .note li{margin-bottom:var(--s2)} .tblwrap{overflow-x:auto} table.spec{width:100%;border-collapse:collapse;font-size:var(--t-1)} table.spec th,table.spec td{text-align:left;padding:.7em .9em; border-bottom:1px solid var(--hair);vertical-align:top} table.spec th{color:var(--dim);font-weight:600;white-space:nowrap;width:14rem} table.spec thead th{color:var(--strong);border-bottom:1px solid var(--hair-2);width:auto} table.spec td b{color:var(--strong);font-weight:600} table.spec .num{font-family:var(--mono)} table.spec .r{text-align:right} pre.code{background:var(--well);border:1px solid var(--hair);border-radius:var(--r); padding:var(--s4);overflow-x:auto;font-family:var(--mono);font-size:var(--t-1); line-height:1.65} pre.code+pre.code{margin-top:var(--s4)} .codehead{display:flex;gap:var(--s3);align-items:center;margin:var(--s4) 0 var(--s3)} .chip--soon i{background:var(--amber-400)} .duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)} @media(max-width:820px){.duo{grid-template-columns:1fr}} .faq details{border-bottom:1px solid var(--hair);padding:var(--s3) 0} .faq summary{cursor:pointer;color:var(--strong);font-weight:600;font-size:var(--t0); list-style:none;display:flex;justify-content:space-between;gap:var(--s3)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--dim);flex:none} .faq details[open] summary::after{content:"2"} .faq details p{margin-top:var(--s3);font-size:var(--t-1);max-width:44rem} .faq details p+p{margin-top:var(--s2)} .rel{display:flex;flex-wrap:wrap;gap:var(--s3)} .rel a{border:1px solid var(--hair-2);border-radius:var(--r-in);padding:.5em 1em; font-size:var(--t-1);color:var(--text)} .rel a:hover{border-color:var(--blue-400);color:var(--strong);text-decoration:none} .cta{padding:var(--s6) 0} .cta .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)} .cta h2{color:var(--strong);font-size:var(--t2);flex:1 1 20rem} /* docs: sidebar + article */ .docs{display:grid;grid-template-columns:1fr 15rem;gap:var(--s6); /* keep .wrap's side gutters - the old `0` inline padding made docs render wider than every other page and pushed the right nav out of line */ padding:var(--s5) var(--gut) var(--s7)} /* Nav sits on the RIGHT (jose 2026-08-27) - markup order unchanged, grid order flips it. */ .docs__nav{position:sticky;top:5.5rem;align-self:start;order:2; border-left:1px solid var(--hair);padding-left:var(--s4)} .docs__body{order:1} .docs__nav .lab{display:block;margin:var(--s4) 0 var(--s2)} .docs__nav .lab:first-child{margin-top:0} .docs__nav a{display:block;color:var(--dim);font-size:var(--t-1);padding:.28em 0} .docs__nav a:hover{color:var(--text);text-decoration:none} .docs__nav a[aria-current="page"]{color:var(--blue-300);font-weight:600} .docs__body{min-width:0;max-width:46rem} .docs__body h1{color:var(--strong);font-size:var(--t3);margin-bottom:var(--s3)} .docs__body h2{color:var(--strong);font-size:var(--t1);margin:var(--s6) 0 var(--s3); padding-top:var(--s4);border-top:1px solid var(--hair)} .docs__body h3{color:var(--strong);font-size:var(--t0);margin:var(--s4) 0 var(--s2)} .docs__body p{margin-bottom:var(--s3)} .docs__body p+pre,.docs__body table{margin-bottom:var(--s4)} .docs__body code{font-family:var(--mono);font-size:.92em;color:var(--cyan-300); background:var(--well);padding:.1em .35em;border-radius:4px} .docs__body pre.code code{background:none;padding:0;color:inherit} .docs__body ul,.docs__body ol{margin:0 0 var(--s3) 1.2em} .docs__body li{margin-bottom:var(--s1)} /* Two-column section pages (Products / Trust): content left, family nav a FULL sticky right column - same 15rem width as the docs sidebar, so the rail never changes size between the three families. */ .twocol{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:var(--s6);align-items:start} .twocol__body{min-width:0} .twocol .wrap{max-width:none;padding-inline:0} .twocol__nav{position:sticky;top:5.5rem;align-self:start; border-left:1px solid var(--hair);padding-left:var(--s4); max-height:calc(100vh - 6rem);overflow:auto;padding-block:var(--s5) var(--s4)} .famnav .lab{display:block;margin-bottom:var(--s2)} .famnav a{display:block;color:var(--dim);font-size:var(--t-1);padding:.28em 0} .famnav a:hover{color:var(--text);text-decoration:none} .famnav a[aria-current="page"]{color:var(--blue-300);font-weight:600} @media(max-width:820px){ .twocol{grid-template-columns:1fr} .twocol__nav{position:static;max-height:none;border-left:0;padding-left:0; border-top:1px solid var(--hair);padding-top:var(--s4);order:2} } /* Mini footer - pinned while scrolling; site.js hides it once the full footer scrolls into view, so the page always ends on the real footer. */ .minifoot{position:fixed;left:0;right:0;bottom:0;z-index:39; display:flex;align-items:center;justify-content:center;gap:var(--s4);flex-wrap:wrap; padding:.5rem var(--gut);border-top:1px solid var(--hair); background:rgba(1,5,15,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); font-size:var(--t-1);color:var(--dim); transition:transform .25s ease,opacity .25s ease} .minifoot a{color:var(--dim)} .minifoot a:hover{color:var(--blue-300)} .minifoot.is-hidden{transform:translateY(100%);opacity:0;pointer-events:none} } .pager{display:flex;justify-content:space-between;gap:var(--s4); margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--hair)} .pager a{font-size:var(--t-1)} @media(max-width:820px){ .docs{grid-template-columns:1fr} .docs__nav{position:static;order:0;border-left:0;border-bottom:1px solid var(--hair); padding:0 0 var(--s4)} table.spec th{width:auto} } /* ========================================================================== Apex hero volumetric light ("flashlight behind the wall"). STATIC gradients only: one paint, cached by the compositor — no filters, no animation, no JS. The mask fades the light out before the hero's lower edge, and the layer lives inside the hero band, so neither the header nor anything below it is touched. ========================================================================== */ .hero.band--first{position:relative;overflow:hidden} .hero.band--first>.wrap{position:relative;z-index:1} .hero.band--first::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(72rem 34rem at 14% -18%, rgba(46,155,255,.16), transparent 62%), repeating-conic-gradient(from 116deg at 14% -18%, rgba(125,249,255,0) 0deg, rgba(125,249,255,.05) 1.1deg, rgba(46,155,255,.03) 2.1deg, rgba(125,249,255,0) 4.2deg, rgba(125,249,255,0) 6.6deg); -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 96%); mask-image:linear-gradient(180deg,#000 45%,transparent 96%); } /* Cookie-consent bar (2026-08-28): gates the Google Ads tag; nothing loads until choice. */ .ax-cookie{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;flex-wrap:wrap; align-items:center;justify-content:center;gap:.8rem 1.4rem;padding:1.1rem 1.2rem; background:rgba(3,8,15,.96);border-top:1px solid rgba(46,155,255,.30); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#dbe4f5;font-size:.95rem} .ax-cookie-txt{margin:0;max-width:52rem;line-height:1.55} .ax-cookie-txt a{color:#7db8ff} .ax-cookie-btns{display:flex;gap:.7rem;flex:none} .ax-cookie .btn{padding:.75rem 1.9rem;font-size:1.02rem;min-width:7.5rem} /* ========================================================================== Developer area — glossary, "connect your stack" hub, do/don't callouts. Scoped classes only; reuses the docs tokens so nothing else is affected. ========================================================================== */ /* Glossary: categorised, deep-linkable term list (docs/glossary). */ .gloss{margin:var(--s4) 0 0} .gloss dt{color:var(--strong);font-weight:650;font-size:var(--t0); scroll-margin-top:6rem;margin-top:var(--s4)} .gloss dt:first-of-type{margin-top:0} .gloss dt .hash{opacity:0;color:var(--dim);font-weight:400;margin-left:.4em; font-family:var(--mono);font-size:.8em} .gloss dt:hover .hash{opacity:1} .gloss dd{margin:.3rem 0 var(--s3);color:var(--text);line-height:1.55;max-width:64ch} .gloss dd .see{display:block;margin-top:.35rem;font-size:var(--t-1);color:var(--dim)} .gloss dd .see a{color:var(--blue-300)} /* Quick jump-to-section chips at the top of long docs pages. */ .jump{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--s4) 0} .jump a{font-size:var(--t-1);color:var(--dim);border:1px solid var(--hair); border-radius:999px;padding:.25em .8em} .jump a:hover{color:var(--text);border-color:var(--blue-500);text-decoration:none} /* Tool card grid — the "connect your stack" hub. */ .toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr)); gap:var(--s3);margin:var(--s4) 0} .toolcard{display:block;border:1px solid var(--hair);border-radius:8px; padding:var(--s3);background:var(--well)} .toolcard:hover{border-color:var(--blue-500);text-decoration:none} .toolcard b{display:block;color:var(--strong);font-size:var(--t0);margin-bottom:.25rem} .toolcard span{display:block;color:var(--dim);font-size:var(--t-1);line-height:1.45} .toolcard .tag{display:inline-block;margin-top:.55rem;font-family:var(--mono); font-size:var(--t-2);padding:.14em .55em;border-radius:4px} .tag--ok{color:var(--cyan-300);background:rgba(46,155,255,.12)} .tag--bridge{color:#ffcf8f;background:rgba(255,180,80,.12)} /* Do / don't two-up, and note/warn callouts (docs). */ .dodont{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:var(--s4) 0} .dodont>div{border:1px solid var(--hair);border-radius:8px;padding:var(--s3)} .dodont .h{display:block;font-weight:650;color:var(--strong);margin-bottom:var(--s2)} .dodont .do{border-color:rgba(46,155,255,.35)} .dodont .dont{border-color:rgba(255,110,110,.30)} .dodont ul{margin:0 0 0 1.1em} .dodont li{margin-bottom:var(--s2)} @media(max-width:820px){.dodont{grid-template-columns:1fr}} .note{border-left:3px solid var(--blue-500);padding:.65rem var(--s3); margin:var(--s4) 0;color:var(--text);background:var(--well);border-radius:0 6px 6px 0} .note.warn{border-left-color:#ffb450} .note b{color:var(--strong)} .note :last-child{margin-bottom:0}