/* ========================================================================== 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} /* ---- announce bar (site-wide, under the header) — moved from index.html 2026-08-31 ---- */ /* ---- announce bar (under the header): slow navy wave, AI-typed rotating copy ---- */ .announce{display:block;text-align:center;padding:.55rem 1rem .6rem;border-bottom:1px solid var(--hair); background:linear-gradient(100deg,rgba(4,16,31,.42) 0%,rgba(10,32,54,.55) 22%,rgba(16,52,90,.68) 50%,rgba(10,32,54,.55) 78%,rgba(4,16,31,.42) 100%); background-size:280% 100%;animation:an-wave 7s ease-in-out infinite alternate;color:var(--text)} .announce:hover{color:var(--strong)} @keyframes an-wave{from{background-position:0% 0}to{background-position:100% 0}} .announce__main{display:inline-flex;align-items:baseline;gap:.45rem;font-size:var(--t-1);line-height:1.45; flex-wrap:wrap;justify-content:center} .announce__dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--cyan-300);align-self:center; flex:none;animation:an-pulse 2.4s ease-in-out infinite} @keyframes an-pulse{0%,100%{opacity:.45}50%{opacity:1}} .announce__lead{font-style:italic;font-size:.92em;color:var(--blue-300)} .announce__rest{font-weight:600;color:var(--strong)} .announce__caret{display:inline-block;width:1px;height:.95em;background:var(--cyan-300); vertical-align:-.12em;animation:an-pulse 1s steps(2) infinite} .announce__sub{display:block;font-size:var(--t-2);color:var(--dim);margin-top:.15rem; opacity:0;transition:opacity .6s} .announce__sub.is-on{opacity:1} /* fixed height (jose 2026-09-07): the main line and the sub line are one-cell grids; the live (typed) text and a hidden ghost of EVERY message share the cell, so the bar is always as tall as its tallest message and never moves while typing or switching. announce.js builds the ghosts. */ .announce__main{display:grid;grid-template-columns:100%;justify-items:center;align-items:start} .announce__main>*,.announce__sub>*{grid-area:1/1} .announce__live,.announce__main>.announce__ghost{display:inline-flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;justify-content:center} .announce__ghost{visibility:hidden;pointer-events:none} .announce__sub{display:grid;grid-template-columns:100%;justify-items:center} @media (prefers-reduced-motion:reduce){.announce{animation:none}.announce__caret{display:none}} /* Model tables on /models/ (jose 2026-09-04): names, type, status, price and the CTA never wrap — only the "Best for" column may. */ table.models-table td:nth-child(1),table.models-table td:nth-child(2),table.models-table td:nth-child(3), table.models-table td.num,table.models-table .btn{white-space:nowrap} table.models-table td:nth-child(4){min-width:14rem} /* Multi-GPU scaling table on /gpu/: emphasised rows are the multi-card configurations. */ table.spec tr.multi td{color:var(--strong);font-weight:600} /* base state of the phone-only docs menu button (see the 900px block at the end) */ .docs__burger{display:none} /* ============================================================================ PHONES (jose 2026-09-07: "make sure the marketing site is also well mobile working… don't break anything on desktop", then: "change every row to a card on mobile… show a little bit less info so the cards can stay small and tight. sign in is enough on mobile"). Everything below is inside max-width media queries, so nothing above 560px changes. A table row on a phone is a small CARD: the row's first cell (or its heading cell) is the card title, every other cell is "LABEL value" on one line (labels come from the table head, written onto the cells by announce.js), the Region/Detail columns and anything past the fifth cell stay off the phone unless they hold a link. The sortable models list becomes cards as well (jose 2026-09-07) — no sorting on a phone. ============================================================================ */ @media (max-width:560px){ .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch} table.spec, table.spec tbody, table.spec tr, table.spec th, table.spec td{display:block;width:auto;box-sizing:border-box} table.spec thead{display:none} table.spec tr{margin:0 0 .55rem;padding:.6em .8em;border:1px solid var(--hair-2);border-radius:.55rem;background:var(--sur)} table.spec tr:last-child{margin-bottom:0} table.spec th, table.spec td{padding:.1em 0;border:0;white-space:normal;text-align:left} table.spec td.r,table.spec .t-r{text-align:left} table.spec tbody th, table.spec tr > :first-child{color:var(--strong);font-weight:600;padding-bottom:.3em;font-size:var(--t0)} table.spec td:first-child a{color:inherit} table.spec td[data-l]:not(:first-child){display:grid;grid-template-columns:minmax(5.5rem,36%) minmax(0,1fr);gap:.6em;align-items:baseline} table.spec td[data-l]:not(:first-child)::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} table.spec td.m-off{display:none!important} /* beats the [data-l] grid rule above */ table.spec td .btn{width:auto;display:inline-block;margin-top:.25em} /* the home fleet / sovereignty tables (.rt) become the same cards */ .rt tr{margin:0 0 .55rem;padding:.6em .8em;border:1px solid var(--hair);border-radius:.55rem;background:var(--sur)} .rt tr:last-child{margin-bottom:0} .rt tbody td{margin-top:.2em;grid-template-columns:minmax(5.5rem,36%) minmax(0,1fr);gap:.6em;align-items:baseline} .rt tbody td.m-off{display:none!important} /* header: Sign in is enough on a phone */ .hact .btn--primary{display:none} pre.code{overflow-x:auto;-webkit-overflow-scrolling:touch} .hero__acts,.tnote{display:flex;flex-wrap:wrap;gap:.6em} .hero__acts .btn,.tnote .btn{flex:1 1 auto;text-align:center} /* chips and inline "go" links may wrap on a phone instead of running off the edge */ .lhero__meta .chip,.chip,a.go{white-space:normal;max-width:100%;box-sizing:border-box} /* the keyboard "skip to content" link stays inside the screen when it appears */ a.skip{left:0;right:0;width:auto;max-width:100%;box-sizing:border-box} } /* The header's primary nav used to be HIDDEN below 900px with nothing in its place — on a phone there was no way to reach Products / Models / GPUs / Pricing / Developers / Trust. It is now a scrollable row under the brand and the sign-in buttons. Same breakpoint as the old hide, later in the file, so it wins there and nothing above 900px changes. */ @media (max-width:900px){ .hbar{grid-template-columns:auto 1fr;grid-template-rows:auto auto;row-gap:.1rem;min-height:0;padding-bottom:.35rem} .brand{grid-column:1;grid-row:1} .hact{grid-column:2;grid-row:1;justify-self:end} .hnav{display:flex;grid-column:1/-1;grid-row:2;justify-self:stretch;overflow-x:auto;gap:1.1em;white-space:nowrap;scrollbar-width:none;padding:.15em 0 .45em} .hnav::-webkit-scrollbar{display:none} .hnav a{flex:none;font-size:var(--t0)} /* the logo: same spot (top-left) and same size as the console on a phone */ .brand{font-size:1.05rem} .brand svg{width:1.4rem;height:1.4rem} } /* Developer docs on a phone (jose 2026-09-07: "the first thing you see on that page on mobile is a long menu… put that in a 3 lined icon button menu"). The button is injected by announce.js; the nav opens under it and is otherwise out of the way. Nothing changes above 900px (the button is display:none there). */ @media (max-width:900px){ .docs__burger{display:flex;align-items:center;gap:.7em;width:100%;margin:0 0 var(--s4);padding:.65em .85em;border:1px solid var(--hair);border-radius:.55rem;background:var(--sur);color:var(--strong);font:inherit;font-weight:600;cursor:pointer;text-align:left} .docs__burger svg{width:1.15em;height:1.15em;flex:none} .docs__burger .cur{margin-left:auto;color:var(--dim);font-weight:400;font-size:var(--t-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%} .docs.has-burger{row-gap:var(--s3)} .docs.has-burger .docs__burger{margin-bottom:0} .docs.has-burger .docs__nav{display:none} .docs.has-burger.nav-open .docs__nav{display:block;margin:calc(-1 * var(--s3) - 1px) 0 var(--s3);padding:.4em .85em .6em;border:1px solid var(--hair);border-top:0;border-radius:0 0 .55rem .55rem} } /* the Trust / product family menu (.twocol__nav) on a phone: same button, and it moves ABOVE the page body (it sat at the very bottom, after everything). */ @media(max-width:820px){ .twocol.has-burger .twocol__nav{order:0;border-top:0;padding-top:0} .twocol.has-burger .twocol__nav .famnav{display:none} .twocol.has-burger.nav-open .twocol__nav .famnav{display:block;margin:calc(-1 * var(--s4) - 1px) 0 var(--s5);padding:.4em .85em .6em;border:1px solid var(--hair);border-top:0;border-radius:0 0 .55rem .55rem} }