/* ============================================================
   Nova Core — Netscape Classic · final styles
   No build step: hand-written CSS + custom properties. Breakpoints 640 / 1024 / 1440.
   Hierarchy comes from rules, whitespace and typeface contrast only:
   no box-shadow (except inset marker rules), no radii, no gradients.
   Every spacing value comes from the --s1…--s10 scale.
   ============================================================ */
/* ——— Self-hosted type. No third-party CDN, no external request at all. ———
   EB Garamond ships as two variable files (roman + italic, weight axis 400-600
   is all this site uses); Space Mono ships as two static weights.
   Latin subset only — matches exactly what the Google-hosted build served.
   Both families are SIL OFL 1.1: free for commercial use, redistribution allowed. */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("assets/fonts/eb-garamond-roman.woff2") format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 600;font-display:swap;
  src:url("assets/fonts/eb-garamond-italic.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/space-mono-400.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/space-mono-700.woff2") format("woff2")}

:root{
  /* Colour */
  --paper:#FBFAF6;--paper-2:#F4F2EB;--paper-3:#EFECE2;
  --ink:#1C1B18;--ink-2:#4B483F;--ink-3:#7C786D;
  --rule:#CFCABD;--rule-2:#E4E0D5;
  --gold:#8E7141;--gold-2:#AB8B54;--gold-3:#C9AC77;
  /* Typefaces */
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Spacing scale */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  /* Layout */
  --gut:clamp(22px,4vw,80px);--max:1720px;--sec:clamp(64px,8vh,120px);
  --col-gap:clamp(28px,4vw,72px);   /* column inset = equal whitespace either side of the divider rule */
  --nav-h:53px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
h1,h2,h3,h4,p,dl,dd,dt,figure,ul,ol,table{margin:0;padding:0}
ul{list-style:none}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
img,canvas,svg{display:block}
img,canvas{max-width:100%}
::selection{background:var(--gold-3);color:var(--ink)}

#matrix{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.62}
.page{position:relative;z-index:1}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.rule-d{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);height:3px}
/* visually hidden but read aloud — carries the included / not-included promise
   to screen readers, since the ✓/✗ glyphs are aria-hidden decoration.
   position:absolute keeps it out of the grid tracks it sits inside. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.mono{font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ——— Announcement · full-width dark notice band ——— */
.ann{position:relative;z-index:40;background:var(--ink);color:#F7F5EE;border-bottom:2px solid var(--gold-2)}
.ann .wrap{display:flex;align-items:center;gap:clamp(16px,2vw,32px);min-height:64px;padding-block:var(--s3)}
.ann .tag{flex:none;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;height:32px;padding:0 var(--s3);border:1px solid rgba(201,172,119,.55);font-family:var(--mono);font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-3)}
.ann .tag i{width:7px;height:7px;background:var(--gold-3);animation:blink 2.6s steps(1) infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.15}}
.ann p{font-size:clamp(17px,1.5vw,22px);line-height:1.35;letter-spacing:.005em}
.ann .x{flex:none;margin-left:auto;display:inline-flex;white-space:nowrap;align-items:center;justify-content:center;gap:var(--s2);min-width:44px;height:44px;padding:0 var(--s4);border:1px solid rgba(247,245,238,.28);background:transparent;color:rgba(247,245,238,.72);font-family:var(--mono);font-size:10.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.ann .x:hover{border-color:var(--gold-3);color:var(--gold-3)}

/* ——— Masthead ——— */
/* logo and wordmark share an optical height: 36px mark, matching cap-height */
.masthead{display:flex;align-items:center;gap:var(--s4);padding-block:var(--s5)}
.masthead img{width:36px;height:36px;flex:none}
.masthead h1{font-weight:500;font-size:clamp(19px,1.6vw,23px);line-height:1.2;letter-spacing:.02em}
.masthead .entity{margin-left:auto;font-family:var(--mono);font-size:10.5px;line-height:1.75;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:right}
.masthead .entity a{color:var(--gold)}

/* ——— Navigation (sticky) ——— */
.sticky{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.navrow{display:flex;align-items:stretch}
.navrow a{display:flex;align-items:center;white-space:nowrap;height:var(--nav-h);padding:0 clamp(16px,1.7vw,28px);font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

.navrow a:not(.mail)+a:not(.mail){border-left:1px solid var(--rule-2)}
.navrow a:first-child{border-right:1px solid var(--rule-2)}
.navrow a:first-child+a{border-left:0}
.navrow a:hover,.navrow a[aria-current]{background:var(--paper-2);color:var(--ink);text-decoration:none}
.navrow a[aria-current]{box-shadow:inset 0 -2px 0 var(--gold-2)}
.navrow .mail{margin-left:auto;padding-right:0;color:var(--gold)}
.burger{display:none}

/* ——— Section skeleton ——— */
section{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.sechead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:var(--col-gap);align-items:end;margin-bottom:var(--s8)}
.colhead .mono,.sechead .mono{display:block;margin-bottom:var(--s4)}
h2{font-weight:400;font-size:clamp(30px,3.4vw,52px);line-height:1.06;letter-spacing:-.008em;text-wrap:balance}
.sechead p{font-size:clamp(16.5px,1.15vw,19px);color:var(--ink-2);max-width:58ch;text-wrap:pretty}

/* ——— Hero ——— */
/* The backdrop covers the WHOLE hero and bleeds past both edges — no band,
   no seam. Content stays inside .wrap; the mask is anchored off-centre.     */
#home{position:relative;isolation:isolate;padding-block:clamp(36px,5vh,64px) clamp(120px,14vh,190px)}
.herobg{position:absolute;z-index:-1;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;pointer-events:none;
  -webkit-mask-image:radial-gradient(104% 122% at 72% 88%,#000 20%,rgba(0,0,0,.66) 52%,rgba(0,0,0,.22) 78%,transparent 100%);
  mask-image:radial-gradient(104% 122% at 72% 88%,#000 20%,rgba(0,0,0,.66) 52%,rgba(0,0,0,.22) 78%,transparent 100%)}
.herobg canvas{position:absolute;inset:0;width:100%;height:100%}
/* a barely-there warm glow, anchored off-centre with the sphere */
.herobg::before{content:"";position:absolute;inset:0;background:radial-gradient(76% 104% at 70% 98%,rgba(171,139,84,.11) 0%,rgba(171,139,84,.05) 44%,transparent 72%)}
/* hands the backdrop back to the paper on the last sliver only */
.herobg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(251,250,246,0) 86%,rgba(251,250,246,.34) 100%)}
.hero{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.82fr);gap:var(--col-gap);align-items:start}
.hero .col-r{border-left:1px solid var(--rule);padding-left:var(--col-gap)}
.hero .col-r .mono{display:block;margin-bottom:var(--s5)}
.netnote{margin-top:var(--s5);font-size:16px;line-height:1.6;color:var(--ink-3);max-width:36ch;text-wrap:pretty}
.h1{font-weight:400;font-size:clamp(42px,5.4vw,88px);line-height:1.03;letter-spacing:-.008em;text-wrap:balance}
.h1 .rest{display:block;font-style:italic;color:var(--gold);font-size:.72em;line-height:1.1;margin-top:.14em}
.lede{margin-top:var(--s6);font-size:clamp(17px,1.2vw,20.5px);line-height:1.62;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.ctas{display:flex;gap:var(--s3);margin-top:var(--s7);flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;height:52px;padding:0 var(--s6);border:1px solid var(--gold);background:var(--gold);color:#FCFAF5;font-size:17px;line-height:1;letter-spacing:.01em;transition:background .16s ease,border-color .16s ease,color .16s ease}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);text-decoration:none}
.btn.alt{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.btn.alt:hover{background:var(--paper-2);color:var(--ink)}
.btn.wide{width:100%;height:58px;font-size:18.5px}
/* real table: mono label and numeral share one baseline */
.statable{width:100%;border-collapse:collapse;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.statable th,.statable td{vertical-align:baseline;padding:var(--s4) 0;border-top:1px solid var(--rule-2)}
.statable tr:first-child th,.statable tr:first-child td{border-top:0}
.statable th{width:52%;text-align:left;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.statable td{text-align:right;font-size:clamp(24px,2vw,32px);line-height:1;font-variant-numeric:tabular-nums}

/* ——— Services ——— */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{display:flex;flex-direction:column;padding:0 var(--col-gap);border-left:1px solid var(--rule)}
.card:first-child{padding-left:0;border-left:0}
.card:last-child{padding-right:0}
.glyph{width:52px;height:52px;margin-bottom:var(--s5)}
.glyph rect,.glyph circle,.glyph line,.glyph path,.fwmark rect,.fwmark circle,.fwmark line{stroke:var(--gold);fill:none;stroke-width:1.4}
.glyph .f,.fwmark .f{fill:var(--gold-3);stroke:none}
h3{font-weight:500;font-size:clamp(21px,1.6vw,27px);line-height:1.25;margin-bottom:var(--s4)}
.card p{color:var(--ink-2);font-size:16.5px}
.feat{margin:var(--s5) 0 var(--s5);border-top:1px solid var(--rule-2)}
.feat li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--rule-2);font-size:16px;line-height:1.5}
.feat li::before{content:"+";font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--gold-2)}
.more{margin-top:auto;white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;gap:var(--s3);align-items:center;height:44px}
.frameworks{margin-top:var(--s8);border-top:1px solid var(--ink);padding-top:var(--s6)}
.frameworks h4{font-weight:400;font-size:clamp(19px,1.5vw,24px);line-height:1.3;margin-bottom:var(--s6)}
.fw{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--rule-2);border-left:1px solid var(--rule-2)}
.fw li{display:flex;flex-direction:column;align-items:center;gap:var(--s4);padding:var(--s6) var(--s3);border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.fwmark{width:34px;height:34px}
.fw span{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.09em;color:var(--ink-2);text-align:center}

/* ——— Pricing ——— */
.pricebar{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s7);padding-bottom:var(--s5);border-bottom:1px solid var(--rule)}
.toggle{display:inline-flex;border:1px solid var(--ink);background:var(--paper)}
.toggle button{white-space:nowrap;height:48px;padding:0 var(--s5);border:0;background:transparent;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);cursor:pointer}
.toggle button+button{border-left:1px solid var(--ink)}
.toggle button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.saving{font-size:16.5px;color:var(--ink-2)}
.saving b{color:var(--gold);font-weight:600}
/* five columns share row tracks via subgrid: name / price / desc / specs / CTA line up exactly */
.plans{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto auto 1fr auto;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.plan{grid-row:1/-1;display:grid;grid-template-rows:subgrid;padding:var(--s6) clamp(14px,1.4vw,24px);border-left:1px solid var(--rule)}
.plan:first-child{border-left:0}
.plan.pop{background:var(--paper-2);box-shadow:inset 0 3px 0 var(--gold-2)}
.plan .name{align-self:start;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.badge{font-family:var(--mono);font-size:9.5px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--gold);padding:5px 7px;white-space:nowrap}
.price{display:flex;align-items:baseline;gap:var(--s1);padding-top:var(--s5)}
.price .n{font-size:clamp(30px,2.7vw,44px);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.price .u{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-3)}
.plan .desc{padding:var(--s4) 0 var(--s5);font-size:15px;line-height:1.5;color:var(--ink-2)}
.specs{align-self:start;border-top:1px solid var(--rule-2)}
.specs li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--rule-2);font-size:15px;line-height:1.45}
.specs .m{font-family:var(--mono);font-size:12.5px;font-weight:700;line-height:1.45}
.specs .yes .m{color:var(--gold)}
.specs .no{color:var(--ink-3)}
.specs .no .m{color:#BDB8AB}
.plan .btn{align-self:end;margin-top:var(--s6);height:48px;padding:0 var(--s4);font-size:16px}

/* ——— Case studies ——— */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.case{padding:0 var(--col-gap);border-left:1px solid var(--rule)}
.case:first-child{padding-left:0;border-left:0}
.case:last-child{padding-right:0}
.caseviz{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--rule);background:var(--paper-2)}
.caseviz canvas{position:absolute;inset:0;width:100%;height:100%}
.case h3{margin:var(--s5) 0 var(--s4)}
.case p{color:var(--ink-2)}
.tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.tags li{display:flex;align-items:center;white-space:nowrap;min-height:32px;padding:var(--s2) var(--s3);border:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

/* ——— Two-column split shared by About and Contact ——— */
.split{display:grid;grid-template-columns:minmax(0,.64fr) minmax(0,1fr);gap:var(--col-gap)}
.split .col-r{border-left:1px solid var(--rule);padding-left:var(--col-gap)}
.colhead h2{margin-bottom:var(--s6)}
.entity-block{font-family:var(--mono);font-size:10.5px;line-height:2;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.entity-block a{color:var(--gold)}
.prose p{font-size:clamp(17px,1.2vw,20px);line-height:1.68;color:var(--ink-2);max-width:64ch;text-wrap:pretty}
.prose p+p{margin-top:var(--s5)}

/* ——— Request quote ——— */
#contact{border-bottom:0}
#contact .split{align-items:start}
.mailrow{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--ink);display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.mailrow span{white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mailrow a{font-size:clamp(19px,1.6vw,26px);line-height:1.3}
.quote{border:1px solid var(--ink);background:var(--paper);padding:clamp(24px,2.4vw,44px);box-shadow:inset 0 3px 0 var(--gold-2)}
.quote h3{font-size:clamp(22px,1.8vw,30px);margin-bottom:var(--s4)}
.quote-lede{font-size:clamp(16.5px,1.15vw,19px);line-height:1.6;color:var(--ink-2);max-width:52ch;text-wrap:pretty}
.quote-list{margin-top:var(--s6);border-top:1px solid var(--rule-2)}
.quote-list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--s3);align-items:baseline;padding:var(--s4) 0;border-bottom:1px solid var(--rule-2);font-size:16.5px;line-height:1.5}
.quote-list .m{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--gold)}
.quote .btn{margin-top:var(--s6)}
.fallback{margin-top:var(--s4);font-family:var(--mono);font-size:10.5px;line-height:1.85;letter-spacing:.06em;color:var(--ink-3)}

/* ——— Footer ——— */
footer{padding-block:var(--s7) var(--s8);border-top:3px double var(--ink)}
footer .inner{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
footer p{font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.1em;color:var(--ink-3)}
footer ul{display:flex;gap:var(--s5);flex-wrap:wrap;margin-left:auto}
footer ul a{white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

/* ============================================================
   ≤1023px — phone / tablet: a second set of layout decisions,
   not a scaled-down copy of the desktop one.
   ============================================================ */
@media(max-width:1023px){
  :root{--nav-h:52px;--col-gap:0px}
  .masthead{padding-block:var(--s4);gap:var(--s3)}
  .masthead .entity{display:none}
  .ann .wrap{flex-wrap:wrap;gap:var(--s3);padding-block:var(--s4)}
  .ann p{flex:1 0 100%;order:3;font-size:17.5px}
  .navrow{flex-wrap:wrap;position:relative}
  .navrow::before{content:"Nova Core";display:flex;align-items:center;height:52px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  /* Without JS the links stay visible as a stacked list: a burger that nothing
     can open would leave the phone with no navigation at all. The .js class is
     set in <head> before first paint, so the collapsed state has no flash. */
  .navrow a{display:flex;flex:1 0 100%;height:52px;padding-left:0;border-left:0;border-right:0;border-top:1px solid var(--rule-2)}
  .navrow a:first-child{border-right:0}
  .navrow a:not(.mail)+a:not(.mail){border-left:0}
  .navrow .mail{padding-right:0}
  .js .navrow a,.js .navrow .mail{display:none}
  .js .navrow[data-open] a,.js .navrow[data-open] .mail{display:flex}
  .burger{display:none;align-items:center;gap:var(--s3);margin-left:auto;height:52px;padding:0;border:0;background:transparent;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);cursor:pointer}
  .burger s{display:block;position:relative;width:20px;height:1px;background:var(--ink);text-decoration:none}
  .burger s::before,.burger s::after{content:"";position:absolute;left:0;width:20px;height:1px;background:var(--ink)}
  .burger s::before{top:-6px}.burger s::after{top:6px}
  .js .burger{display:flex}
  .sechead{grid-template-columns:minmax(0,1fr);gap:var(--s5);margin-bottom:var(--s7)}
  #home{padding-block:var(--s6) clamp(110px,14vh,160px)}
  .herobg{-webkit-mask-image:radial-gradient(122% 110% at 62% 92%,#000 22%,rgba(0,0,0,.6) 56%,transparent 100%);mask-image:radial-gradient(122% 110% at 62% 92%,#000 22%,rgba(0,0,0,.6) 56%,transparent 100%)}
  .hero{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .hero .col-r{border-left:0;border-top:1px solid var(--rule);padding:var(--s7) 0 0}
  .netnote{max-width:none}
  .h1{font-size:clamp(36px,8.4vw,56px)}
  .lede{margin-top:var(--s5)}
  .ctas{margin-top:var(--s6)}
  .ctas .btn{flex:1 0 40%}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card{padding:0;border-left:0;border-top:1px solid var(--rule);padding-top:var(--s7);margin-top:var(--s7)}
  .card:first-child{border-top:0;padding-top:0;margin-top:0}
  .more{margin-top:0}
  .fw{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fw li{padding:var(--s5) var(--s3)}
  /* pricing: horizontal snap scroll; cards keep full width, all 43 features stay visible */
  .plans{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(268px,78vw,340px);overflow-x:auto;scroll-snap-type:x mandatory;border-left:1px solid var(--rule);-webkit-overflow-scrolling:touch}
  .plan{scroll-snap-align:start;border-left:0;border-right:1px solid var(--rule);padding:var(--s6) var(--s5)}
  .swipe{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-3)}
  .swipe i{flex:1;height:1px;background:var(--rule);font-style:normal}
  .cases{grid-template-columns:minmax(0,1fr)}
  .case{padding:0;border-left:0}
  .case+.case{border-top:1px solid var(--rule);padding-top:var(--s7);margin-top:var(--s7)}
  .split{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .split .col-r{border-left:0;border-top:1px solid var(--rule);padding:var(--s7) 0 0}
  .colhead h2{margin-bottom:var(--s5)}
  .mailrow{margin-top:var(--s6)}
  .quote{padding:var(--s5)}
  /* 33 characters at 16px plus 64px of padding needs ~300px, which a 320px
     phone does not have. .btn is nowrap by default, so on a narrow screen it
     stops being a button that fits and becomes a strut that widens the whole
     grid track. Let it wrap here, and let the height follow the text. */
  .quote .btn.wide{height:auto;min-height:58px;padding:var(--s4) var(--s5);
    white-space:normal;line-height:1.3;text-align:center;font-size:16px}
  footer ul{margin-left:0;gap:0 var(--s5)}
  /* footer anchors are navigation, not inline prose links: give them a real
     touch target instead of the 18px the type alone would occupy. */
  footer ul a{min-height:44px;align-items:center;display:inline-flex}
}
@media(min-width:1024px){.swipe{display:none}}
@media(max-width:639px){
  html,body{font-size:16.5px}
  /* the two-up toggle is 381px wide — wider than the content column on a phone.
     Split it full-width so neither label can be clipped at 320-414px. */
  .toggle{width:100%;align-items:stretch}
  .toggle button{flex:1 1 0;min-width:0;height:auto;min-height:48px;
    padding:var(--s2) var(--s3);font-size:10px;letter-spacing:.06em;
    white-space:normal;line-height:1.3}

  .ann .x span{display:none}
  .ctas .btn{flex:1 0 100%}
  .fw{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statable td{font-size:22px}
  footer .inner{gap:var(--s4)}
}
@media(prefers-reduced-motion:reduce){.ann .tag i{animation:none}html{scroll-behavior:auto}.btn{transition:none}}