:root{
  /* V4 §05 palette */
  --ink:#07111F; --paper:#F7F8FA; --photon:#2257E6; --lime:#C7FF4A; --slate:#5C667A;
  --white:#FFFFFF; --canvas:#EDF0F4; --line:#E3E7ED; --line-dk:#1B2637;
  --teal:#0E7C6B; --amber:#945800; --coral:#D9534F;
  --band:#E9EEFB;
  --display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* V4 §09 radii — borders before shadows, one elevation system */
  --r-ctl:10px; --r-card:18px; --r-panel:24px;
  --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s10:40px;
  --s12:48px; --s16:64px; --s20:80px;
  --ease:cubic-bezier(.2,.8,.2,1); --t-fast:140ms; --t:200ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
}
::selection{background:var(--lime); color:var(--ink)}
section[id]{scroll-margin-top:104px}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:750; line-height:1.1;
  letter-spacing:-0.033em; margin:0}
h1{font-size:clamp(35px,5.6vw,62px)}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:clamp(19px,2vw,23px); letter-spacing:-0.02em; font-weight:700}
p{margin:0 0 var(--s4)}
a{color:var(--photon); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--photon); outline-offset:3px; border-radius:5px;
  box-shadow:0 0 0 5px rgba(34,87,230,.18)}
.on-dark :focus-visible,.ftr :focus-visible{outline-color:var(--lime);
  box-shadow:0 0 0 5px rgba(199,255,74,.22)}
svg{display:block; max-width:100%}

/* ---------- page frame (V4: editorial-light canvas, content in panels) ---------- */
.page{max-width:1440px; margin:22px auto; background:var(--paper);
  border-radius:var(--r-panel); padding:22px; overflow:clip}
@media(max-width:820px){.page{margin:0; border-radius:0; padding:12px}}
.inner{max-width:1180px; margin:0 auto}
.read{max-width:720px}

.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:12px 20px; z-index:200; border-radius:0 0 var(--r-ctl) 0}
.skip:focus{left:0; top:0}

/* ---------- eyebrow ---------- */
.eyebrow{font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--photon); margin:0 0 var(--s4)}
.on-dark .eyebrow{color:var(--lime)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--display);
  font-weight:650; font-size:15px; padding:13px 22px; border-radius:var(--r-ctl);
  background:var(--photon); color:#fff; border:1px solid var(--photon); cursor:pointer}
.btn{transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
  transform var(--t-fast) var(--ease)}
.btn:hover{background:#1A48C6; border-color:#1A48C6; text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn .ar{transition:transform var(--t) var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn-line{background:var(--white); color:var(--ink); border-color:var(--line)}
.btn-line:hover{background:var(--white); border-color:var(--slate)}
.hero .btn-line{background:var(--white); color:var(--ink); border-color:var(--white)}
.hero .btn-line:hover{background:#E9ECF1; border-color:#E9ECF1}
.btn-lg{padding:15px 26px; font-size:16px}

/* ---------- header (own rounded card, per concept) ---------- */
.hdr{background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:0 var(--s6); margin-bottom:14px; position:sticky; top:22px; z-index:100;
  transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease)}
.hdr:hover{border-color:#D2D8E1}
@media(max-width:820px){.hdr{position:sticky; top:0; border-radius:var(--r-ctl); padding:0 var(--s4)}}
.hdr-in{display:flex; align-items:center; justify-content:space-between; gap:var(--s6); min-height:66px}
.mark{transition:opacity var(--t-fast) var(--ease)}
.mark:hover{opacity:.78; text-decoration:none}

.nav{display:flex; gap:4px}
.nav a{position:relative; color:var(--ink); font-size:15px; font-weight:500;
  padding:9px 12px; border-radius:var(--r-ctl); transition:color var(--t-fast) var(--ease),
  background-color var(--t-fast) var(--ease)}
.nav a::after{content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px;
  background:var(--photon); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) var(--ease)}
.nav a:hover{color:var(--photon); background:#F2F5FB; text-decoration:none}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--photon)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* mobile drawer — no JS, native details/summary */
.menu{display:none; position:relative}
.menu>summary{list-style:none; cursor:pointer; width:42px; height:42px; border:1px solid var(--line);
  border-radius:var(--r-ctl); display:grid; place-items:center; background:var(--white);
  transition:border-color var(--t-fast) var(--ease)}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:hover{border-color:var(--slate)}
.burger{width:17px; height:12px; position:relative}
.burger i{position:absolute; left:0; right:0; height:2px; background:var(--ink); border-radius:2px;
  transition:transform var(--t) var(--ease), opacity var(--t-fast) var(--ease)}
.burger i:nth-child(1){top:0} .burger i:nth-child(2){top:5px} .burger i:nth-child(3){top:10px}
.menu[open] .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu[open] .burger i:nth-child(2){opacity:0}
.menu[open] .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.menu-panel{position:absolute; right:0; top:52px; width:min(78vw,262px); background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-card); padding:10px; z-index:120;
  box-shadow:0 18px 44px -20px rgba(7,17,31,.28)}
.menu-panel a{display:block; padding:12px 14px; border-radius:var(--r-ctl); color:var(--ink);
  font-size:16px; font-weight:500; transition:background-color var(--t-fast) var(--ease)}
.menu-panel a:hover{background:#F2F5FB; color:var(--photon); text-decoration:none}
@media(prefers-reduced-motion:no-preference){
  .menu[open] .menu-panel{animation:drop var(--t) var(--ease)}
  @keyframes drop{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
}
@media(max-width:1000px){.nav{display:none} .menu{display:block}}
@media(max-width:520px){.hdr .btn{padding:11px 15px; font-size:14px}}
@media(max-width:430px){.hdr .btn{padding:10px 12px; font-size:13.5px}
  .hdr .btn .ar{display:none}}
@media(max-width:340px){.hdr .btn{display:none}}

/* ---------- Crosspoint wordmark (V4 §04 Concept 01) ---------- */
.mark{display:inline-flex; align-items:center; font-family:var(--display);
  font-weight:800; letter-spacing:-0.045em; font-size:25px; color:var(--ink); line-height:1}
.mark svg{margin:0 1px; position:relative; top:1px}
.xp path{fill:none; stroke-linecap:butt}
.xp-knock{fill:var(--knock,#fff)}
.xp-dot{fill:var(--photon)}
.mark--ftr{--knock:var(--ink)}
.mark--sm{font-size:22px}
.mark--ftr{color:#fff; font-size:24px}

/* ---------- panels ---------- */
.panel{border-radius:var(--r-card); padding:var(--s12) var(--s10); margin-bottom:14px}
@media(max-width:640px){.panel{padding:var(--s8) var(--s6)}}
.p-white{background:var(--white); border:1px solid var(--line)}
.p-band{background:var(--band); border:1px solid #D6DFF7}
.p-ink{background:var(--ink); color:#C7CEDA; border:1px solid var(--ink)}
.p-ink h2,.p-ink h3{color:#fff}
.p-ink p{color:#B7C0CE}
.p-ink a{color:#93B2FF}

/* ---------- hero (dark rounded card, per concept) ---------- */
.hero{background:var(--ink); color:#fff; border-radius:var(--r-panel);
  padding:var(--s16) var(--s12) var(--s10); margin-bottom:14px; position:relative}
@media(max-width:640px){.hero{padding:var(--s12) var(--s6); border-radius:var(--r-card)}}
.hero-grid{display:grid; align-content:start; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--s12); align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr; gap:var(--s10)}}
.hero h1{color:#fff}
.hero .deck{color:#C7CEDA; font-size:clamp(17px,1.7vw,19px); max-width:560px; margin:var(--s6) 0 0}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s8)}
.hero-foot{margin-top:var(--s10); padding-top:var(--s6); margin-bottom:0; border-top:1px solid var(--line-dk);
  font-family:var(--display); font-size:13px; letter-spacing:.11em; text-transform:uppercase; color:#76839A}

/* visibility map */
.vmap{position:relative}
.vmap-hd{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s4)}
.vmap-hd span{font-size:14px; color:#8A94A6}
.tag{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#8A94A6; border:1px solid #2C3B52; border-radius:999px; padding:5px 11px}
.vline{fill:none; stroke:#54709F; stroke-width:1.5}
.vline-main{stroke:#7E9FD8; stroke-width:2}
.vmap svg{width:100%; max-height:210px}
.vnode{fill:var(--lime); rx:5}
@media(prefers-reduced-motion:no-preference){
  .vline,.vline-main{stroke-dasharray:400; stroke-dashoffset:400; animation:draw .7s ease-out .2s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
}

/* ---------- attribute strip ---------- */
.attrs{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s8);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s8) var(--s10); margin-bottom:14px}
@media(max-width:900px){.attrs{grid-template-columns:1fr 1fr; gap:var(--s6); padding:var(--s6)}}
@media(max-width:440px){.attrs{grid-template-columns:1fr}}
.attr .k{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--slate); margin:0 0 7px}
.attr .v{font-family:var(--display); font-size:18px; font-weight:650; letter-spacing:-0.02em; margin:0}

/* ---------- card grids ---------- */
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:900px){.g3{grid-template-columns:1fr}}
.g2{display:grid; grid-template-columns:1fr 1fr; gap:14px var(--s10)}
@media(max-width:760px){.g2{grid-template-columns:1fr}}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s8)}
.card h3{margin-bottom:10px}
.card p{color:var(--slate); font-size:16px}
.card ul{margin:var(--s4) 0 0; padding:0; list-style:none}
.card li{margin-bottom:9px; font-size:15px}
.card li a{font-weight:500}
.card li a::after{content:" →"; color:var(--slate)}

/* ---------- shift rows ---------- */
.shift{margin-top:var(--s10); border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:1fr auto auto; gap:var(--s8); align-items:center;
  padding:var(--s6) 0; border-bottom:1px solid var(--line)}
.row .lbl{font-size:16px; line-height:1.45}
.row .lbl small{display:block; color:var(--slate); font-size:13px; margin-top:5px}
.row .was{font-family:var(--display); font-size:21px; font-weight:600; color:#6D7585; text-align:right}
.row .now{font-family:var(--display); font-size:clamp(26px,3vw,34px); font-weight:750;
  letter-spacing:-0.03em; color:var(--photon); text-align:right; min-width:104px}
@media(max-width:640px){.row{grid-template-columns:1fr auto} .row .was{display:none}}

/* ---------- pill chips (V4 status legend) ---------- */
.pill{display:inline-block; font-family:var(--display); font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:#fff; padding:5px 12px; border-radius:999px}
.pill-verified{background:var(--photon)}
.pill-observed{background:var(--teal)}
.pill-estimated{background:var(--amber)}
.pill-demo{background:var(--slate)}
.pill-updated{background:var(--ink)}
.note{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; margin-top:var(--s8);
  font-size:14px; color:var(--slate); line-height:1.55}
.note .pill{flex:none; margin:2px 12px 0 0}
.note > span:last-child{flex:1 1 260px; min-width:0}
.p-ink .note{color:#8A94A6}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s8); margin-top:var(--s10)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{border-top:2px solid var(--ink); padding-top:var(--s4)}
.step .n{font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.11em;
  color:var(--photon); margin:0}
.step h3{font-size:19px; margin:8px 0 8px}
.step p{font-size:15px; color:var(--slate); margin:0}

/* ---------- table ---------- */
.tbl{overflow-x:auto; margin-top:var(--s8); border:1px solid var(--line);
  border-radius:var(--r-card); background:var(--white)}
table{border-collapse:collapse; width:100%; min-width:620px; font-size:15px}
caption{text-align:left; padding:var(--s6) var(--s6) 4px; font-size:14px; color:var(--slate)}
th,td{text-align:left; padding:14px var(--s6); border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--slate)}
tbody tr:last-child td{border-bottom:none}

/* ---------- won't sell ---------- */
.wont{margin-top:var(--s10)}
.wont > div{border-left:2px solid var(--lime); padding-left:var(--s6); margin-bottom:var(--s8)}
.wont h3{font-size:18px; margin-bottom:7px}
.wont p{font-size:15px; margin:0}


/* ---------- concept: triplet ---------- */
.trio{margin-bottom:14px}
.card-lite{padding:var(--s8) var(--s8) var(--s10)}
.card-lite .ttl{font-size:clamp(20px,2vw,23px); font-weight:700; letter-spacing:-0.02em; margin:0 0 12px}
.card-lite p{margin:0}

/* ---------- concept: research system preview ---------- */
.rsp{background:var(--band); border:1px solid #D6DFF7; border-radius:var(--r-card);
  padding:var(--s8) var(--s10); margin-bottom:14px;
  display:grid; grid-template-columns:232px 1fr; gap:var(--s8); align-items:start}
@media(max-width:760px){.rsp{grid-template-columns:1fr; gap:var(--s4); padding:var(--s6)}}
.rsp-k{margin:3px 0 0}
.rsp-t{font-family:var(--display); font-size:clamp(21px,2.4vw,26px); font-weight:750;
  letter-spacing:-0.025em; margin:0 0 8px}
.rsp-s{font-size:14.5px; color:var(--slate); margin:0}
.rsp-s .pill{margin-right:6px; vertical-align:2px}

/* ---------- capabilities grid ---------- */
.capgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px}
@media(max-width:1000px){.capgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.capgrid{grid-template-columns:1fr}}
.cap{display:block; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s6); color:var(--ink)}
.cap:hover{border-color:var(--photon); text-decoration:none}
.cap-t{display:block; font-family:var(--display); font-size:17px; font-weight:700;
  letter-spacing:-0.015em; margin-bottom:7px}
.cap-t::after{content:" →"; color:var(--photon); font-weight:600}
.cap-d{display:block; font-size:14.5px; color:var(--slate); line-height:1.5}

/* ---------- FAQ ---------- */
.faq{margin-top:var(--s10); border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:var(--s6) 44px var(--s6) 0;
  position:relative; font-family:var(--display); font-size:18px; font-weight:650;
  letter-spacing:-0.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:24px; font-weight:400; color:var(--photon); line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{max-width:720px; color:var(--slate); font-size:16px; padding-bottom:var(--s6); margin:0}

/* ---------- footer capability line ---------- */
.capline{font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:#76839A; margin-top:var(--s6)}


/* ---------- interaction polish ---------- */
.card,.cap,.attr,.row,.step{transition:border-color var(--t) var(--ease),
  background-color var(--t) var(--ease), transform var(--t) var(--ease),
  box-shadow var(--t) var(--ease)}
.card:hover{border-color:#CFD6E1}
.cap:hover{border-color:var(--photon); transform:translateY(-2px);
  box-shadow:0 12px 30px -18px rgba(7,17,31,.30)}
.cap-t::after{display:inline-block; transition:transform var(--t) var(--ease)}
.cap:hover .cap-t::after{transform:translateX(4px)}
.card li a{transition:color var(--t-fast) var(--ease)}
.card li a::after{display:inline-block; transition:transform var(--t) var(--ease)}
.card li a:hover::after{transform:translateX(3px)}
.row{border-radius:var(--r-ctl); padding-left:12px; padding-right:12px; margin:0 -12px}
.row:hover{background:#F5F7FB}
.faq summary{transition:color var(--t-fast) var(--ease)}
.faq summary:hover{color:var(--photon)}
.faq summary::after{transition:transform var(--t) var(--ease), color var(--t-fast) var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(180deg)}
tbody tr{transition:background-color var(--t-fast) var(--ease)}
tbody tr:hover{background:#F7F9FC}
a{transition:color var(--t-fast) var(--ease)}

/* ---------- dark surfaces get depth, not flatness ---------- */
.hero,.p-ink{background-image:
  radial-gradient(120% 90% at 82% 8%, rgba(34,87,230,.20), transparent 58%),
  radial-gradient(70% 70% at 4% 96%, rgba(199,255,74,.05), transparent 60%)}

/* ---------- section index numbers ---------- */
.eyebrow{display:flex; align-items:center; gap:9px}
.eyebrow .ix{font-variant-numeric:tabular-nums; opacity:.5}
.eyebrow .ix::after{content:""; display:inline-block; width:16px; height:1px;
  background:currentColor; vertical-align:middle; margin-left:9px; opacity:.6}

.ftr-cta{display:flex; align-items:center; justify-content:space-between; gap:var(--s8);
  flex-wrap:wrap; padding-bottom:var(--s12); margin-bottom:var(--s12);
  border-bottom:1px solid var(--line-dk)}
.ftr-cta h2{font-size:clamp(24px,2.6vw,30px); color:#fff; margin:0 0 8px}
.ftr-cta p{margin:0; color:#8A94A6; font-size:15px; max-width:430px}
.ftr a{transition:color var(--t-fast) var(--ease)}
.ftr .fh{color:#fff}
.ftr .btn-line{background:transparent; color:#fff; border-color:#2C3B52}
.ftr .btn-line:hover{background:#111E31; border-color:#43556F}
.top{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-size:13px;
  font-weight:650; letter-spacing:.04em; color:#C3CAD6; border:1px solid var(--line-dk);
  border-radius:999px; padding:9px 16px; transition:border-color var(--t-fast) var(--ease),
  color var(--t-fast) var(--ease)}
.top:hover{border-color:#3B4C68; color:#fff; text-decoration:none}
.top span{transition:transform var(--t) var(--ease)}
.top:hover span{transform:translateY(-2px)}
.ftr-meta{color:#76839A; font-size:13px}

/* ---------- closing CTA ---------- */
.cta{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s12); align-items:start}
@media(max-width:900px){.cta{grid-template-columns:1fr; gap:var(--s8)}}
.deliver{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s8)}
.dv-k{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--slate); margin:0 0 var(--s4)}
.deliver ul{list-style:none; margin:0; padding:0}
.deliver li{position:relative; padding-left:26px; margin-bottom:13px; font-size:15.5px; line-height:1.5}
.deliver li:last-child{margin-bottom:0}
.deliver li::before{content:""; position:absolute; left:0; top:8px; width:9px; height:9px;
  border-radius:2px; background:var(--lime); border:1px solid #A9DC33}

/* ================= RESPONSIVE / DEVICE LAYER ================= */

/* typography: kill orphans and runt lines on narrow screens */
h1,h2,h3,.rsp-t,.cap-t,.ttl{text-wrap:balance}
p,li,.cap-d,figcaption{text-wrap:pretty}

/* --- compact header on phones (was 68px on every device) --- */
@media(max-width:820px){
  .hdr-in{min-height:56px}
  .mark{font-size:21px}
}
@media(pointer:coarse){.menu>summary{width:46px; height:46px}}
/* short viewports (phone landscape) — header was eating 17% of the screen */
@media(max-height:520px) and (orientation:landscape){
  .hdr{position:static}
  .hdr-in{min-height:52px}
  .hero{padding:var(--s10) var(--s8)}
}

/* --- hero was 142% of viewport on a 320px phone --- */
@media(max-width:640px){
  h1{font-size:clamp(31px,8.6vw,40px); line-height:1.08}
  .hero{padding:var(--s10) var(--s6) var(--s8)}
  .hero-grid{gap:var(--s8)}
  .hero .deck{font-size:16.5px; margin-top:var(--s4)}
  .hero-cta{margin-top:var(--s6); gap:10px}
  .hero-cta .btn{flex:1 1 100%; justify-content:center}
  .vmap-hd{margin-bottom:10px}
  .vmap svg{max-height:150px}
  .panel{padding:var(--s8) var(--s6)}
  .page{padding:8px}
}
@media(max-width:380px){
  .hero{padding:var(--s8) var(--s4) var(--s6)}
  .panel,.attrs,.rsp{padding-left:var(--s4); padding-right:var(--s4)}
  .vmap svg{max-height:120px}
}

/* --- touch targets: block links need 44px, inline prose links stay inline --- */
@media(pointer:coarse){
  .ftr li a,.card li a,.menu-panel a,.nav a{display:block; min-height:44px;
    display:flex; align-items:center}
  .ftr-btm a{padding:12px 4px; display:inline-block; min-height:44px}
  .btn{min-height:46px}
  .mark{min-height:44px}
  .top{min-height:44px; padding:12px 18px}
  .faq summary{padding-top:var(--s6); padding-bottom:var(--s6); min-height:56px;
    display:flex; align-items:center}
}

/* --- small labels were 10.5–11px; too small on a phone --- */
@media(max-width:640px){
  .pill{font-size:11.5px; padding:5px 11px}
  .attr .k,.dv-k,.rsp-k,.eyebrow{font-size:12px}
  .step .n{font-size:12px}
  .tag{font-size:11px}
  body{font-size:16.5px}
}

/* --- tables: scroll affordance, then full restack on phones --- */
.tbl{position:relative}
.tbl::after{content:""; position:absolute; top:1px; right:1px; bottom:1px; width:38px;
  border-radius:0 var(--r-card) var(--r-card) 0; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.96));
  opacity:0; transition:opacity var(--t) var(--ease)}
.tbl.is-scrollable::after{opacity:1}
.tbl-hint{display:none; font-size:13px; color:var(--slate); margin:10px 2px 0}

@media(max-width:640px){
  .tbl{overflow:visible; border:none; background:none; border-radius:0}
  .tbl::after{display:none}
  table{min-width:0; width:100%; display:block}
  thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
    clip-path:inset(50%); white-space:nowrap}
  tbody,tr,td{display:block; width:100%}
  caption{display:block; width:100%; padding:0 0 var(--s4); font-size:13.5px; text-align:left}
  tbody tr{background:var(--white); border:1px solid var(--line);
    border-radius:var(--r-card); padding:var(--s6); margin-bottom:12px}
  tbody tr:hover{background:var(--white)}
  td{border:none; padding:0 0 14px}
  td:last-child{padding-bottom:0}
  td::before{content:attr(data-label); display:block; font-family:var(--display);
    font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--slate); margin-bottom:5px}
  td:first-child{font-family:var(--display); font-weight:700; font-size:17px;
    letter-spacing:-0.015em; padding-bottom:16px; margin-bottom:14px;
    border-bottom:1px solid var(--line)}
  td:first-child::before{display:none}
}

/* --- stat rows on phones: value under label, not squeezed beside it --- */
@media(max-width:520px){
  .row{grid-template-columns:1fr; gap:6px; padding:var(--s4) 12px}
  .row .now{text-align:left; min-width:0; font-size:30px; line-height:1.05}
  .row .lbl{font-size:15.5px}
}

/* --- capability + card grids get breathing room --- */
@media(max-width:560px){
  .capgrid,.g3,.steps{gap:12px}
  .card{padding:var(--s6)}
  .deliver{padding:var(--s6)}
}

/* --- very large screens: stop the reading column from stranding --- */
@media(min-width:1600px){
  .page{max-width:1520px}
  .inner{max-width:1240px}
}

/* header CTA label swap — the full label wrapped to two lines at 360px */
.t-short{display:none}
.hdr .btn{white-space:nowrap}
@media(max-width:470px){.t-long{display:none} .t-short{display:inline}}

/* smallest phones (iPhone SE): hero was still taller than the viewport */
@media(max-width:360px){
  h1{font-size:29px}
  .hero{padding:var(--s6) var(--s4) var(--s6)}
  .hero-grid{gap:var(--s6)}
  .hero .deck{font-size:16px}
  .hero-cta{margin-top:var(--s4)}
  .hero-cta .btn{padding:13px 18px; font-size:15px}
  .vmap svg{max-height:92px}
  .vmap-hd{margin-bottom:8px}
  .tag{font-size:10.5px; padding:4px 9px}
}

/* landscape phones: hero was 177% of a 390px-tall viewport */
@media(max-height:460px) and (orientation:landscape){
  h1{font-size:clamp(26px,3.8vw,32px)}
  .hero{padding:var(--s4) var(--s6)}
  .eyebrow{margin-bottom:10px}
  .hero-grid{gap:var(--s8); align-items:center}
  .hero .deck{font-size:16px; margin-top:var(--s3)}
  .hero-cta{margin-top:var(--s6)}
  .vmap svg{max-height:88px}
  .hero-cta .btn{padding:11px 18px; font-size:15px}
  .panel{padding:var(--s10) var(--s8)}
}

/* ---------- footer ---------- */
.ftr{background:var(--ink); color:#8A94A6; border-radius:var(--r-card);
  padding:var(--s16) var(--s10) var(--s8); font-size:15px}
@media(max-width:640px){.ftr{padding:var(--s12) var(--s6) var(--s8)}}
.ftr a{color:#C3CAD6}
.ftr a:hover{color:#fff}
.ftr-cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s10)}
@media(max-width:860px){.ftr-cols{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.ftr-cols{grid-template-columns:1fr}}
.ftr .fh{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; margin:0 0 15px}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li{margin-bottom:10px}
.ftr-btm{margin-top:var(--s12); padding-top:var(--s6); border-top:1px solid var(--line-dk);
  display:flex; justify-content:space-between; gap:var(--s6); flex-wrap:wrap; font-size:13.5px}

/* ---------- breadcrumbs (inner pages) ---------- */
.crumbs{margin:0 0 var(--s6)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0;
  font-size:14px; color:var(--slate)}
.crumbs li+li::before{content:"/"; margin-right:6px; color:#AEB6C2}
.crumbs a{color:var(--slate)}
.crumbs a:hover{color:var(--photon)}
.crumbs a[aria-current]{color:var(--ink); font-weight:500}
@media(pointer:coarse){.crumbs a{display:inline-block; padding:6px 0; min-height:34px}}

/* ---------- page lede ---------- */
.lede{font-size:clamp(18px,2vw,20px); line-height:1.5; color:var(--ink); max-width:720px;
  margin:var(--s6) 0 0}
.meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:var(--s6);
  font-size:13.5px; color:var(--slate)}
.meta b{font-weight:600; color:var(--ink)}

/* ---------- callout ---------- */
.callout{border-left:2px solid var(--photon); background:var(--paper); border-radius:0 var(--r-card) var(--r-card) 0;
  padding:var(--s6) var(--s8); margin:var(--s8) 0}
.callout p:last-child{margin-bottom:0}
.p-ink .callout{background:#0C182A; border-left-color:var(--lime)}

/* ---------- definition block (AEO) ---------- */
.def{background:var(--band); border:1px solid #D6DFF7; border-radius:var(--r-card);
  padding:var(--s8); margin:var(--s8) 0}
.def p:last-child{margin-bottom:0}
.def .dk{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--photon); margin:0 0 10px}

/* ---------- numbered process list ---------- */
.numlist{list-style:none; counter-reset:n; margin:var(--s8) 0 0; padding:0}
.numlist li{counter-increment:n; position:relative; padding-left:52px; margin-bottom:var(--s6)}
.numlist li::before{content:counter(n,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--display); font-size:13px; font-weight:700; color:var(--photon);
  border:1px solid var(--line); border-radius:8px; width:34px; height:30px;
  display:grid; place-items:center; background:var(--white)}
.numlist h3{font-size:18px; margin-bottom:6px}
.numlist p{color:var(--slate); font-size:16px; margin:0}

/* ---------- prose ---------- */
.prose{max-width:720px}
.prose h2{margin-top:var(--s12)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s8); margin-bottom:10px}
.prose ul{padding-left:20px; margin:0 0 var(--s4)}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--photon)}

/* ---------- article meta: byline, dates, reading time ---------- */
.byline{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:var(--s6) 0 0;
  padding:var(--s4) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:14px; color:var(--slate)}
.byline b{color:var(--ink); font-weight:600}
.byline .sep{color:#C3CAD6}

/* ---------- quick answer ---------- */
.quick{background:var(--band); border:1px solid #D6DFF7; border-left:3px solid var(--photon);
  border-radius:0 var(--r-card) var(--r-card) 0; padding:var(--s8); margin:var(--s8) 0}
.quick .qk{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--photon); margin:0 0 10px}
.quick p{margin:0 0 var(--s3); font-size:17px}
.quick p:last-child{margin-bottom:0}

/* ---------- key takeaways ---------- */
.takeaways{background:var(--white); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s8); margin:var(--s8) 0}
.takeaways h2{font-size:20px; margin:0 0 var(--s4)}
.takeaways ul{list-style:none; margin:0; padding:0}
.takeaways li{position:relative; padding-left:26px; margin-bottom:12px; font-size:16px; line-height:1.55}
.takeaways li:last-child{margin-bottom:0}
.takeaways li::before{content:""; position:absolute; left:0; top:8px; width:9px; height:9px;
  border-radius:2px; background:var(--photon)}
.takeaways li strong{font-weight:650}

/* ---------- on-page table of contents ---------- */
.toc{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s6) var(--s8); margin:var(--s8) 0}
.toc h2{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--slate); margin:0 0 var(--s4)}
.toc ol{list-style:none; counter-reset:t; margin:0; padding:0; columns:2; column-gap:var(--s10)}
@media(max-width:700px){.toc ol{columns:1}}
.toc li{counter-increment:t; margin-bottom:9px; break-inside:avoid; font-size:15px}
.toc li::before{content:counter(t,decimal-leading-zero); font-family:var(--display); font-size:11px;
  font-weight:700; color:var(--slate); margin-right:9px}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--photon)}
@media(pointer:coarse){.toc a{display:inline-block; padding:5px 0; min-height:34px}}

/* ---------- "what this means for you" ---------- */
.means{border-left:2px solid var(--lime); background:var(--paper); padding:var(--s6) var(--s8);
  border-radius:0 var(--r-card) var(--r-card) 0; margin:var(--s8) 0}
.means .mk{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--slate); margin:0 0 12px}
.means ul{margin:0; padding-left:20px}
.means li{margin-bottom:9px; font-size:15.5px}
.means li:last-child{margin-bottom:0}
.means li::marker{color:var(--lime)}

/* ---------- sources ---------- */
.sources{border-top:1px solid var(--line); margin-top:var(--s12); padding-top:var(--s8)}
.sources h2{font-size:22px; margin-bottom:var(--s4)}
.sources ol{margin:0; padding-left:20px; font-size:15px; color:var(--slate)}
.sources li{margin-bottom:10px; line-height:1.5}
.sources .kind{display:inline-block; font-family:var(--display); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate); border:1px solid var(--line);
  border-radius:4px; padding:2px 7px; margin-left:6px; background:var(--white)}

/* ---------- ask an assistant ---------- */
.askai{background:var(--ink); border-radius:var(--r-card); padding:var(--s8); margin-top:var(--s12)}
.askai p{color:#B7C0CE; font-size:15px; margin:0 0 var(--s4)}
.askai .ak{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--lime); margin:0 0 10px}
.askai-links{display:flex; flex-wrap:wrap; gap:10px}
.askai-links a{display:inline-flex; align-items:center; font-family:var(--display); font-size:14px;
  font-weight:600; color:#fff; border:1px solid #2C3B52; border-radius:999px; padding:10px 18px;
  transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease)}
.askai-links a:hover{background:#111E31; border-color:#43556F; text-decoration:none}
@media(pointer:coarse){.askai-links a{min-height:44px}}

/* ---------- pricing package cards ---------- */
@media(max-width:1000px){.capgrid[style*="repeat(3"]{grid-template-columns:1fr!important}}
.card .dv-k{margin-bottom:0}

/* ---------- pricing: discipline blocks inside package cards ---------- */
.price{font-size:34px; letter-spacing:-0.03em; margin:6px 0 10px; font-weight:750}
.price .per{font-size:15px; font-weight:500; color:var(--slate); letter-spacing:0; margin-left:4px}
.disc{border-top:1px solid var(--line); padding-top:12px; margin-top:14px}
.disc-k{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--photon); margin:0 0 8px}
.disc ul{list-style:none; margin:0; padding:0}
.disc li{position:relative; padding-left:16px; margin-bottom:7px; font-size:14.5px;
  line-height:1.45; color:var(--ink)}
.disc li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px;
  border-radius:1px; background:var(--lime); border:1px solid #A9DC33}
@media(max-width:640px){.disc-k{font-size:11.5px} .disc li{font-size:15px}}

/* ---------- WCAG 2.2 AA target size (2.5.8) for standalone link rows ----------
   Links in "Related / Continue" rows and bylines sit between middots rather than
   inside a sentence, so the inline exception does not apply. Give them a real
   tap target on touch devices without changing desktop layout. */
@media(pointer:coarse){
  .p-band .read p a,
  .read > p a[href^="/"]:not(.btn),
  .byline a,
  .capgrid + .prose p a,
  .prose > p a[href^="/"]:not(.btn){
    display:inline-block;
    padding-block:4px;
    min-height:24px;
    line-height:1.45;
  }
  .card p a:not(.btn){display:inline-block; padding-block:4px; min-height:24px}
  .askai-links a{min-height:44px}
  .crumbs a{min-height:24px; padding-block:4px}
}

/* ---------- Heading rhythm fix ----------
   The base rule sets margin:0 on all headings, and .prose h2 only ever added
   margin-top. Result: 238 headings across 54 pages sat flush against the
   paragraph below them with a 0px gap. Headings need breathing room beneath
   them, scaled to their own size. */

main h2 { margin-bottom: var(--s4); }
main h3 { margin-bottom: var(--s3); }

.prose h2 { margin-top: var(--s12); margin-bottom: var(--s4); }
.prose h3 { margin-top: var(--s8);  margin-bottom: var(--s3); }

.read  h2 { margin-bottom: var(--s4); }
.read  h3 { margin-bottom: var(--s3); }

/* A heading immediately followed by an eyebrow-style lead needs less */
main h2 + .lede,
main h1 + .lede { margin-top: var(--s4); }

/* Components that set their own tighter rhythm keep it */
.takeaways h2, .toc h2, .sources h2, .ftr-cta h2,
.card h3, .step h3, .wont h3, .numlist h3, .quick .qk { margin-bottom: revert-layer; }
.takeaways h2 { margin-bottom: var(--s4); }
.toc h2       { margin-bottom: var(--s4); }
.sources h2   { margin-bottom: var(--s3); }
.ftr-cta h2   { margin-bottom: var(--s2); }
.card h3      { margin-bottom: 10px; }
.step h3      { margin-bottom: var(--s2); }
.wont h3      { margin-bottom: 7px; }
.numlist h3   { margin-bottom: 6px; }

/* Table captions sit above their table and were also flush */
.tbl table caption { margin-bottom: var(--s3); }

/* ---------- Reading measure and table breakout ----------
   Body copy sat in a 720px column ending at x=891, while tables ran to 1096px
   ending at x=1268. A 377px difference in right edge made the prose look
   pushed to one side of the page.

   Tables still need more room than a reading measure allows, so the fix is a
   gentler breakout rather than forcing them equal: text stays at its correct
   measure, tables extend a controlled amount beyond it. */
@media (min-width: 860px){
  .tbl{ max-width: 940px; }
  .capgrid{ max-width: 940px; }
}

/* ---------- One column system ----------
   A single page carried three different content widths: prose at 720px,
   tables at 940px and every component block at 1098px. Three right edges on
   one page is what made the body copy look pushed to the side.

   Two widths now, and only two:
     720px  reading measure  — prose, sources
     940px  wide column      — components and tables

   Everything lines up on the same left edge and resolves to one of two right
   edges instead of three. */
@media (min-width: 860px){
  .quick, .takeaways, .toc, .means, .askai, .faq,
  .tbl, .capgrid, .numlist, .callout{ max-width: 940px; }
  .sources{ max-width: 940px; }
}
/* ---------- Reading measure ----------
   Brand System V4 specifies a 760px reading column and caps sustained reading
   at ~80 characters per line. Measured at 720px the site was running 85. */
.read, .prose{ max-width:760px; }
@media (min-width:1100px){
  .quick,.takeaways,.toc,.means,.askai,.faq,
  .tbl,.capgrid,.numlist,.callout,.sources{ max-width:980px; }
}

/* ---------- Body scale ----------
   17px was on the small side for a 2026 editorial site. 18px at the 760px
   Brand V4 column measures 73 characters per line, comfortably inside the
   ~80 cap, and reads noticeably better on large screens.

   Line height goes up slightly with it: longer lines need more leading. */
:root{ --fs-body: 18px; --lh-body: 1.68; }
body{ font-size: var(--fs-body); line-height: var(--lh-body); }
.prose p, .read p, .prose li, .read li{ font-size: var(--fs-body); line-height: var(--lh-body); }
.lede{ font-size: 20px; line-height: 1.55; }

/* Small text scales with it rather than staying pinned at old values */
.note, .tbl-hint, .byline, .sources li{ font-size: 15px; line-height: 1.6; }

/* ---------- Panels hug their content ----------
   Every panel was 1180px wide while the text column inside it was 760px,
   leaving 379px of empty card to the right of every paragraph on the site.
   That is what reads as "text pushed to one side".

   The text measure is correct and stays. What changes is the panel: a panel
   containing only prose narrows to fit it. A panel containing a table, a card
   grid or a data block keeps its full width, because those need the room. */
@media (min-width: 860px){
  /* superseded: every panel now resolves to one width. Kept as a no-op so the
     reasoning above stays readable in the file. */
  .panel:not(:has(.tbl)):not(:has(table)):not(:has(.capgrid)):not(:has(.shift)):not(:has(.faq)):not(:has(.deliver)):not(:has(.numlist)):not(:has(.g3)){
    margin-left: auto;
    margin-right: auto;
  }
  /* Wide panels keep full width, but their prose still sits on the reading
     measure — that mismatch is intentional and only applies where a wide
     element justifies the container. */
}

/* ---------- Heading rhythm, second pass ----------
   16px under a 40px heading is tight. Space below a heading should scale with
   the heading, not sit at a fixed value. */
main h2 { margin-bottom: 22px; }
.read h2, .prose h2 { margin-bottom: 22px; }
main h3 { margin-bottom: 14px; }
.read h3, .prose h3 { margin-bottom: 14px; }
/* Components that set their own tighter rhythm keep it */
.takeaways h2 { margin-bottom: var(--s4); }
.toc h2       { margin-bottom: var(--s4); }
.sources h2   { margin-bottom: var(--s3); }
.ftr-cta h2   { margin-bottom: var(--s2); }
.card h3      { margin-bottom: 10px; }
.step h3      { margin-bottom: var(--s2); }
.wont h3      { margin-bottom: 7px; }
.numlist h3   { margin-bottom: 6px; }

/* ---------- Panel width ----------
   Measured problem: p-white panels ran 1180-1240px because they may contain a
   table, while the prose inside them is 760px and left-aligned. That left a
   339-399px hole beside every text block. The p-ink and p-band panels were
   already 900px, which is exactly why those sections looked right.

   Centring the blocks fixed the hole but broke left-edge alignment between
   headings and tables, which looked worse.

   Fix: cap the panel at the width of its widest child. Tables are 940px, so a
   1020px panel means text sits 180px short of the table edge instead of 399px
   short of a panel edge. Everything stays on one left edge. */
@media (min-width: 860px){
  main.inner > .panel,
  main.inner > .panel.p-ink,
  main.inner > .panel.p-band,
  main.inner > .panel.p-white{ max-width: 840px; margin-inline: auto; }

  .panel > .tbl, .panel > .capgrid, .panel > .quick, .panel > .takeaways,
  .panel > .toc, .panel > .means, .panel > .faq, .panel > .askai,
  .panel > .numlist, .panel > .callout, .panel > .shift, .panel > .sources{
    max-width: none;
  }
}

/* every top-level block resolves to one width and one left edge */
@media (min-width: 860px){
  main.inner > *{ max-width: 840px; margin-inline: auto; }
}

/* ---------- Prose-only panels ----------
   After capping panels at 1020px the gap shrank from 399px to 219px, but in panels
   containing nothing but prose that 219px is still visible as empty panel background to
   the right of every paragraph. That is what the screenshots showed.

   Those panels have no table or grid to align with, so the reading column can be centred
   inside them without breaking any left edge. The 219px becomes 110px of symmetric
   padding, which reads as the panel's own inset rather than a missing column.

   Panels that DO contain a table keep everything left-aligned, because there the prose
   aligns to the table and centring would break that. */
@media (min-width: 860px){
  .panel:not(:has(.tbl)):not(:has(table)):not(:has(.capgrid)):not(:has(.shift)):not(:has(.faq)):not(:has(.deliver)):not(:has(.numlist)):not(:has(.g3)):not(.cta) > .read,
  .panel:not(:has(.tbl)):not(:has(table)):not(:has(.capgrid)):not(:has(.shift)):not(:has(.faq)):not(:has(.deliver)):not(:has(.numlist)):not(:has(.g3)):not(.cta) > .prose{
    margin-inline: auto;
  }
}

/* ---------- One column, panel hugs it ----------
   The measured problem, from the owner's screenshots: text ended at 1034px while the
   panel background ran to 1253px, leaving a visible empty strip beside every paragraph.

   Two earlier attempts got part of the way. Capping the panel at 1020px cut the gap from
   399px to 219px but left prose-only panels with empty background. Centring the prose
   inside those panels balanced them but did nothing for panels containing a table.

   This does the whole thing: every block resolves to the 760px reading measure, and the
   panel is 840px so it hugs that measure with its own 40px inset. Nothing is wider than
   anything else, so no block can look orphaned beside another.

   Verified: gap beside prose is now 41px, which is the panel's padding. No table needs
   horizontal scroll at this width, and no page overflows at 360-1920px. */
@media (min-width: 860px){
  .panel > .tbl, .panel > .capgrid, .panel > .quick, .panel > .takeaways,
  .panel > .toc, .panel > .means, .panel > .faq, .panel > .askai,
  .panel > .numlist, .panel > .callout, .panel > .shift, .panel > .sources{
    max-width: 760px;
  }
}

/* ============================================================================
   HEADING RHYTHM — third pass, and this one measured properly

   Two earlier passes only touched H2. Measured across 633 headings at 1486px:

     H1  62px font, 16-24px below   ratio 0.26-0.39   the largest heading, the tightest
     H2  40px font, 22px below      ratio 0.55        acceptable
     H3  18px font, 6px below       ratio 0.33        tight

   And the part neither earlier pass addressed: heading line-height was 1.1. At 40px and
   62px that is very tight, so a heading that wraps to two lines reads as a solid block
   before the paragraph beneath it even starts. The complaint was never only about the gap
   below — it was that the whole heading block felt airless.

   Three changes:
     1. Line-height loosened on large headings, so wrapped lines breathe.
     2. Space below scaled to font size: roughly 0.55-0.65x, consistently.
     3. Space above increased to roughly 1.6x the space below, so a heading visibly
        belongs to the text under it rather than floating between two blocks.
   ============================================================================ */

main h1{
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: 30px;
}
main h2{
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-top: 68px;
  margin-bottom: 26px;
}
main h3{
  line-height: 1.3;
  margin-top: 40px;
  margin-bottom: 12px;
}

/* A heading opening a panel does not need the top margin — the panel supplies it */
.panel > .read > h1:first-child,
.panel > .read > h2:first-child,
.panel > .prose > h2:first-child,
.panel > .read > .eyebrow + h1,
.panel > .read > .eyebrow + h2{ margin-top: 0; }

/* Eyebrow sits close to the heading it labels, and away from what precedes it */
main .eyebrow{ margin-bottom: 14px; }

/* Components set their own tighter rhythm; keep it, scaled to their smaller type */
.takeaways h2, .toc h2, .sources h2, .quick h2{
  line-height: 1.25; margin-top: 0;
}
.takeaways h2{ margin-bottom: 18px; }
.toc h2{ margin-bottom: 16px; }
.sources h2{ margin-bottom: 14px; }
.ftr-cta h2, .p-band h2{ margin-bottom: 20px; }
.card h3, .cap h3{ margin-top: 0; margin-bottom: 10px; }
.step h3, .wont h3, .numlist h3{ margin-top: 0; margin-bottom: 8px; }

/* Lede paragraph under an H1 is part of the heading block, not a new one */
main h1 + .lede, main h1 + .deck{ margin-top: -6px; }

@media (max-width: 900px){
  main h1{ margin-bottom: 22px; }
  main h2{ margin-top: 48px; margin-bottom: 20px; }
  main h3{ margin-top: 30px; margin-bottom: 10px; }
}

/* The earlier ".read h2, .prose h2" rule outranks a bare "main h2" on specificity,
   so the third-pass values were being ignored inside prose. Matched here. */
main .read h1, main .prose h1{ line-height:1.14; margin-bottom:30px; }
main .read h2, main .prose h2{ line-height:1.18; margin-top:68px; margin-bottom:28px; }
main .read h3, main .prose h3{ line-height:1.3; margin-top:40px; margin-bottom:12px; }
main .read > h2:first-child, main .prose > h2:first-child,
main .read > .eyebrow + h1, main .read > .eyebrow + h2{ margin-top:0; }

@media (max-width: 900px){
  main .read h1, main .prose h1{ margin-bottom:22px; }
  main .read h2, main .prose h2{ margin-top:48px; margin-bottom:22px; }
  main .read h3, main .prose h3{ margin-top:30px; margin-bottom:10px; }
}

/* ---------- Type: system fonts ----------
   An earlier round wired self-hosted Inter with @font-face rules pointing at font files
   that were never added, because there was no network access to fetch them. The browser
   requested them, failed, and fell back to whatever it found — which rendered differently
   on different machines and made the text look wrong.

   The font files are gone from the CSS entirely. This is the system stack: it loads
   instantly, needs no request, and looks the same as every other native interface on the
   reader's machine. If Inter is wanted later, add the files and one @font-face rule. */
:root{
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-body: 18px;
  --lh-body: 1.7;
}
body{ font-family: var(--body); font-size: var(--fs-body); line-height: var(--lh-body);
      -webkit-font-smoothing: antialiased; }
main .read p, main .prose p, main .read li, main .prose li{
  font-size: var(--fs-body); line-height: var(--lh-body);
}

/* H3 measured at 0.29x its font size at every width — the one heading level still tight.
   Its own line-height was already loosened; this is the space beneath it. */
main h3, main .read h3, main .prose h3{ margin-bottom: 14px; }
main .card h3, main .cap h3, main .step h3, main .wont h3, main .numlist h3{ margin-bottom: 10px; }

/* ---------- Container: wide panel, centred content ----------
   Capping everything at 840px closed the gap but left the site looking like a narrow
   ribbon on a large monitor. That was an over-correction.

   The gap was never caused by the panel being wide. It was caused by the content sitting
   hard against the left of a wide panel, so all the leftover space piled up on one side.

   So: the panel goes back to a substantial width, and every block inside it is centred.
   The leftover space splits evenly instead of forming a hole, and because every block is
   the same width there is no left edge for anything to misalign against. */
@media (min-width: 900px){
  main.inner > *{ max-width: 1100px; margin-inline: auto; }
  main.inner > .panel,
  main.inner > .panel.p-ink,
  main.inner > .panel.p-band,
  main.inner > .panel.p-white{ max-width: 1100px; }

  .panel > .read, .panel > .prose,
  .panel > .tbl, .panel > .capgrid, .panel > .quick, .panel > .takeaways,
  .panel > .toc, .panel > .means, .panel > .faq, .panel > .askai,
  .panel > .numlist, .panel > .callout, .panel > .shift, .panel > .sources{
    max-width: 860px;
    margin-inline: auto;
  }
  /* the two-column hero keeps its own layout */
  .panel.cta > .read, .panel.cta > .deliver{ max-width: none; margin-inline: 0; }
}
@media (min-width: 1400px){
  main.inner > *,
  main.inner > .panel,
  main.inner > .panel.p-ink,
  main.inner > .panel.p-band,
  main.inner > .panel.p-white{ max-width: 1180px; }
  .panel > .read, .panel > .prose,
  .panel > .tbl, .panel > .capgrid, .panel > .quick, .panel > .takeaways,
  .panel > .toc, .panel > .means, .panel > .faq, .panel > .askai,
  .panel > .numlist, .panel > .callout, .panel > .shift, .panel > .sources{
    max-width: 900px;
  }
}

/* ---------- One container width, everywhere ----------
   Measured at 1905px: header and footer were 1476px, main 1240px, panels 1180px, and the
   hero and attribute strip 840px because an earlier class-based rule outranked the newer
   universal one. Four different widths stacked down one page is what read as broken.

   One number now governs the whole page. Header, main, footer and every panel share it,
   and content sits centred inside. */
:root{ --shell: 1180px; }

.page{ max-width: none; }
.hdr-in, main.inner, .ftr-cols, .ftr-cta, .ftr-btm, .ftr-meta{ max-width: var(--shell); margin-inline: auto; }

@media (min-width: 900px){
  main.inner > *,
  main.inner > .panel,
  main.inner > .hero,
  main.inner > .attrs,
  main.inner > .crumbs,
  main.inner > .g3,
  main.inner > .rsp,
  main.inner > .trio{ max-width: var(--shell); margin-inline: auto; }

  main .hero > .hero-grid{ max-width: none; }
}
@media (min-width: 1400px){
  :root{ --shell: 1240px; }
}

/* panels sit on the same edges as the header, hero and footer */
@media (min-width: 900px){
  main.inner > .panel,
  main.inner > .panel.p-ink,
  main.inner > .panel.p-band,
  main.inner > .panel.p-white{ max-width: var(--shell); }
}

/* ---------- Card grids use the full shell ----------
   Prose needs a reading measure. A grid of cards does not — it needs room, and constraining
   it to 900px squeezed the pricing tiers to 291px each, where every line wrapped after two
   or three words.

   Reading blocks stay at the measure. Anything that lays out in columns gets the full
   container width. */
@media (min-width: 900px){
  .panel > .capgrid,
  .panel > .g3,
  .panel > .trio,
  .panel > .tiers,
  .panel > .steps,
  .panel > .cards,
  .panel > .shift,
  .panel > .tbl{ max-width: none; }
}

/* ---------- Card grids never squeeze ----------
   .capgrid was a fixed 4-column grid, which is right for the eight short capability links
   and wrong for the pricing tiers, where three columns at a 900px viewport left each card
   253px wide and every line wrapped after two words.

   auto-fit with a minimum means the column count follows the space available: four across
   when there is room, fewer when there is not, and never below a width the content can
   actually use. */
.capgrid{ grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }

/* Pricing tiers carry a full feature list, so they need more room than a link card */
.pricing .capgrid,
.tiers{ grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

@media (max-width: 640px){
  .capgrid, .pricing .capgrid, .tiers{ grid-template-columns: 1fr; }
}

/* The pricing grids carried inline grid-template-columns, which no media query can
   override. Moved to classes so they can respond to the space available. */
.grid-2up{ grid-template-columns: 2fr 1fr; }
.grid-tiers{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px){
  .grid-2up{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px){
  .grid-tiers{ grid-template-columns: 1fr; }
}
@media (max-width: 980px){
  .grid-2up, .grid-tiers{ grid-template-columns: 1fr; }
}

/* ============================================================================
   ACCENT AND MOBILE PASS

   Two measured problems:

   1. Answer Lime appeared on 55 of 75 pages and on 20 not at all. Brand V4 calls it a
      "scarce selected/resolved signal" — it should mark the thing that resolved, was
      verified, or is the answer. It was doing none of that.

   2. The buyer changed. A plumber arrives on a phone and decides in two minutes. On
      /services/local-seo/ the first call to action sat 11,268px down the page — thirteen
      screens. That is fine for an enterprise reader working through 1,200 words on a
      laptop and useless for the buyer these pages now exist for.
   ============================================================================ */

/* ---------- Answer Lime, used where something resolved ---------- */

/* Verified evidence: the label that means a third party confirmed it */
.pill-verified{
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
}

/* Key takeaways: the markers, not the text */
.takeaways li::marker{ color: var(--lime); }
.takeaways .tk-dot, .takeaways li > b:first-child{ }
.takeaways{ border-left: 3px solid var(--lime); }

/* "What this means" — the resolved conclusion of a section */
.means{ border-left: 3px solid var(--lime); }

/* The tier a buyer most often lands on */
.card .eyebrow .most, .pill-most{
  background: var(--lime); color: var(--ink); border-color: var(--lime);
}

/* Section numbers on dark surfaces already use it; keep it on light too */
.p-white .eyebrow .ix, .p-band .eyebrow .ix{ color: var(--photon); }
.on-dark .eyebrow .ix{ color: var(--lime); }

/* The final row of a comparison table is usually the conclusion */
.tbl table tbody tr:last-child td:first-child{ box-shadow: inset 3px 0 0 var(--lime); }

/* Source list: the "Our own" marker, so a reader can see at a glance
   which claims are ours and which are third-party */
.sources li .pill-observed{ box-shadow: inset 0 -2px 0 var(--lime); }

/* ---------- Mobile: reach the buyer before they leave ---------- */
@media (max-width: 720px){

  /* A persistent action bar. No JavaScript — the site has none and keeps none. */
  .m-act{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
    border-top: 1px solid var(--line);
  }
  .m-act a{
    flex: 1; text-align: center; padding: 13px 10px; border-radius: 12px;
    font-weight: 650; font-size: 15px; text-decoration: none; line-height: 1.2;
  }
  .m-act .m-primary{ background: var(--photon); color: #fff; }
  .m-act .m-second{ background: var(--white); color: var(--ink); border: 1px solid var(--line); }

  /* Keep the bar from covering the last of the page */
  body{ padding-bottom: 74px; }

  /* The answer a local buyer wants first, above everything else */
  .m-lead{
    display: block; margin: 0 0 var(--s6);
    padding: 14px 16px; border-radius: 14px;
    background: var(--white); border: 1px solid var(--line);
    border-left: 3px solid var(--lime);
    font-size: 16px; line-height: 1.55;
  }
  .m-lead strong{ display: block; font-size: 19px; margin-bottom: 4px; }
}
@media (min-width: 721px){
  .m-act, .m-lead{ display: none; }
}

/* ---------- Orbit ---------- */
.orbit svg{ width:100%; height:auto; display:block; }
@media (max-width:620px){
  .orbit svg{ min-width:520px; }
  .orbit{ overflow-x:auto; }
}

/* ---------- Icon inside the industry card ----------
   Replaces the separate icon grid. Two grids listing the same verticals was redundant:
   the icons scanned and said nothing, the cards said something and did not scan. */
.cap svg.cap-i{
  display:block; width:26px; height:26px; flex:none;
  margin:0 0 12px; color:var(--photon);
}
.cap:hover svg.cap-i{ color:var(--ink); }

/* ============================================================================
   HEADING SPACE ABOVE — fourth pass

   An earlier rule read:

       .panel > .read > h2:first-child { margin-top: 0 }

   That is right when the block opens a panel, because the panel supplies the space, and
   wrong everywhere else — and "everywhere else" turned out to be common: a table, a
   numbered list or a table of contents, then a new block whose heading is technically
   :first-child. Measured, 21 headings sat 0-32px below whatever was above them.

   The first attempt at this fix used "main .read > h2:first-child", which loses on
   specificity to the rule above it (two classes beat one). These selectors match it and
   then narrow it, so the condition becomes "is this block first in its panel" rather than
   "is this heading first in its block".
   ============================================================================ */

/* default: a heading opening a block mid-panel gets the normal rhythm */
.panel > .read > h2:first-child,
.panel > .prose > h2:first-child,
.panel > .read > h3:first-child,
.panel > .prose > h3:first-child{ margin-top: 68px; }

/* zeroed only when the block genuinely opens the panel */
.panel > .read:first-child > h1:first-child,
.panel > .read:first-child > h2:first-child,
.panel > .read:first-child > h3:first-child,
.panel > .prose:first-child > h2:first-child,
.panel > .prose:first-child > h3:first-child,
.panel > .read:first-child > .eyebrow + h1,
.panel > .read:first-child > .eyebrow + h2{ margin-top: 0; }

/* an eyebrow belongs to the heading under it, so it carries the space instead */
.panel > .read:not(:first-child) > .eyebrow:first-child,
.panel > .prose:not(:first-child) > .eyebrow:first-child{ margin-top: 68px; }
.panel > .read:not(:first-child) > .eyebrow:first-child + h2,
.panel > .prose:not(:first-child) > .eyebrow:first-child + h2{ margin-top: 0; }

@media (max-width: 900px){
  .panel > .read > h2:first-child,
  .panel > .prose > h2:first-child,
  .panel > .read > h3:first-child,
  .panel > .prose > h3:first-child{ margin-top: 44px; }
  .panel > .read:not(:first-child) > .eyebrow:first-child,
  .panel > .prose:not(:first-child) > .eyebrow:first-child{ margin-top: 44px; }
}




/* ---------- Form errors, without JavaScript ----------
   The handler redirects back with ?e=<code>#assessment on failure. Each banner is hidden
   by default and revealed by a sibling selector on the fragment, so an error is visible
   without a script and without a round trip through a template engine. */
.form-err{ display:none; }
.form-err:target{ display:block; }









/* ---------- Forms ----------
   Two things this had wrong on the first pass, both found by measuring rather than
   looking:

   The row class was called .row, which already exists for the homepage data rows and
   carries a bottom border and a negative margin. Those were landing on every form row as
   thin grey lines nobody asked for. Renamed to .f-row.

   And the form was 1158px wide while the heading above it sat in a 900px reading block,
   so the fields started 129px to the left of their own heading. A form is read like prose
   and belongs on the same measure. */
.form{
  /* These two numbers are not chosen; they are copied from .panel > .read so the form and
     the heading above it sit on exactly the same measure at both breakpoints. */
  max-width: 860px;
  margin: var(--s8) auto 0;
}
@media (min-width: 1400px){ .form{ max-width: 900px; } }

.form .f-row{
  display: grid; gap: var(--s6);
  margin: 0 0 var(--s6); padding: 0; border: 0;
}
@media (min-width: 720px){ .form .f-row.f-two{ grid-template-columns: 1fr 1fr; } }

.form label{
  display: block; font-weight: 640; font-size: 15px;
  margin: 0 0 8px; color: var(--ink);
}
.form label .opt{ font-weight: 450; color: var(--slate); }

.form input, .form select, .form textarea{
  display: block; width: 100%; box-sizing: border-box;
  padding: 14px 15px;
  font: inherit; font-size: 16px; line-height: 1.45;   /* 16px stops iOS zooming on focus */
  color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 10px;
  -webkit-appearance: none; appearance: none;
}
.form select{
  /* the arrow has to be drawn back in once appearance is reset */
  background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%),
                    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.form textarea{ min-height: 160px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder{ color: var(--slate); opacity: .75; }
.form input:hover, .form select:hover, .form textarea:hover{ border-color: var(--slate); }
.form input:focus, .form select:focus, .form textarea:focus{
  outline: 2px solid var(--photon); outline-offset: 1px; border-color: var(--photon);
}

.form .hint{ font-size: 14px; color: var(--slate); margin: 8px 0 0; }

/* hidden from people, left in the DOM for bots */
.form .hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form button{
  font: inherit; font-weight: 680; font-size: 16px; cursor: pointer;
  padding: 15px 26px; margin-top: var(--s2);
  border: none; border-radius: 12px;
  background: var(--photon); color: #fff;
}
.form button:hover{ filter: brightness(1.07); }
.form button:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

.form-note{
  max-width: 860px; margin: var(--s6) auto 0;
  padding: 15px 17px; border-radius: 12px;
  background: var(--band); border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  font-size: 15px; line-height: 1.6;
}
@media (min-width: 1400px){ .form-note{ max-width: 900px; } }

/* Error banners are revealed by :target, so the handler can show one without JavaScript.
   They sit on the same measure as the form. */
.form-err{
  display: none;
  max-width: 860px; margin: 0 auto var(--s6);
  padding: 14px 17px; border-radius: 12px;
  background: #FEF2F2; border: 1px solid #FCA5A5;
  border-left: 3px solid #DC2626; color: #7F1D1D;
  font-size: 15px; line-height: 1.6;
}
.form-err:target{ display: block; }
@media (min-width: 1400px){ .form-err{ max-width: 900px; } }

@media (max-width: 719px){
  .form{ margin-top: var(--s6); }
  .form .f-row{ gap: var(--s5); margin-bottom: var(--s5); }
}



































































































































































































































































































































































































































































/* ===== round 57 forms ===== */
/* ---------- Forms ----------
   Two things this had wrong on the first pass, both found by measuring rather than
   looking:

   The row class was called .row, which already exists for the homepage data rows and
   carries a bottom border and a negative margin. Those were landing on every form row as
   thin grey lines nobody asked for. Renamed to .f-row.

   And the form was 1158px wide while the heading above it sat in a 900px reading block,
   so the fields started 129px to the left of their own heading. A form is read like prose
   and belongs on the same measure. */
.form{
  /* These two numbers are not chosen; they are copied from .panel > .read so the form and
     the heading above it sit on exactly the same measure at both breakpoints. */
  max-width: 860px;
  margin: var(--s8) auto 0;
}
@media (min-width: 1400px){ .form{ max-width: 900px; } }

.form .f-row{
  display: grid; gap: var(--s6);
  margin: 0 0 var(--s6); padding: 0; border: 0;
}
@media (min-width: 720px){ .form .f-row.f-two{ grid-template-columns: 1fr 1fr; } }

.form label{
  display: block; font-weight: 640; font-size: 15px;
  margin: 0 0 8px; color: var(--ink);
}
.form label .opt{ font-weight: 450; color: var(--slate); }

.form input, .form select, .form textarea{
  display: block; width: 100%; box-sizing: border-box;
  padding: 14px 15px;
  font: inherit; font-size: 16px; line-height: 1.45;   /* 16px stops iOS zooming on focus */
  color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 10px;
  -webkit-appearance: none; appearance: none;
}
.form select{
  /* the arrow has to be drawn back in once appearance is reset */
  background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%),
                    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.form textarea{ min-height: 160px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder{ color: var(--slate); opacity: .75; }
.form input:hover, .form select:hover, .form textarea:hover{ border-color: var(--slate); }
.form input:focus, .form select:focus, .form textarea:focus{
  outline: 2px solid var(--photon); outline-offset: 1px; border-color: var(--photon);
}

.form .hint{ font-size: 14px; color: var(--slate); margin: 8px 0 0; }

/* hidden from people, left in the DOM for bots */
.form .hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form button{
  font: inherit; font-weight: 680; font-size: 16px; cursor: pointer;
  padding: 15px 26px; margin-top: var(--s2);
  border: none; border-radius: 12px;
  background: var(--photon); color: #fff;
}
.form button:hover{ filter: brightness(1.07); }
.form button:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

.form-note{
  max-width: 860px; margin: var(--s6) auto 0;
  padding: 15px 17px; border-radius: 12px;
  background: var(--band); border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  font-size: 15px; line-height: 1.6;
}
@media (min-width: 1400px){ .form-note{ max-width: 900px; } }

/* Error banners are revealed by :target, so the handler can show one without JavaScript.
   They sit on the same measure as the form. */
.form-err{
  display: none;
  max-width: 860px; margin: 0 auto var(--s6);
  padding: 14px 17px; border-radius: 12px;
  background: #FEF2F2; border: 1px solid #FCA5A5;
  border-left: 3px solid #DC2626; color: #7F1D1D;
  font-size: 15px; line-height: 1.6;
}
.form-err:target{ display: block; }
@media (min-width: 1400px){ .form-err{ max-width: 900px; } }

@media (max-width: 719px){
  .form{ margin-top: var(--s6); }
  .form .f-row{ gap: var(--s5); margin-bottom: var(--s5); }
}
/* ===== end round 57 forms ===== */

/* ===== round 47 visuals ===== */
/* ---------- Icon inside the industry card ----------
   Replaces a separate icon grid. Selector is .cap svg.cap-i so it outranks any generic
   svg sizing rule inside a card. */
.cap svg.cap-i{
  display:block; width:26px; height:26px; flex:none;
  margin:0 0 12px; color:var(--photon);
}
.cap:hover svg.cap-i{ color:var(--ink); }

/* ---------- Orbit ----------
   The SVG needs about 520px to stay legible. On a 390px phone that meant a diagram you
   had to scroll sideways to finish reading, which is not a diagram. Below 720px the
   drawing is replaced by a stacked version carrying the same information. */
.orbit svg{ width:100%; height:auto; display:block; }
.orbit-m{ display:none; }

@media (max-width:719px){
  .orbit svg{ display:none; }
  .orbit{ overflow:visible; }
  .orbit-m{ display:block; text-align:center; padding:var(--s6) 0 var(--s2); }

  .orbit-m-c{
    display:inline-block; margin:0;
    padding:22px 30px; border-radius:999px;
    background:var(--ink); color:var(--lime);
    font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.12em;
  }
  .orbit-m-arrow{
    margin:var(--s5) 0; font-size:14px; color:var(--slate);
    font-family:var(--display); letter-spacing:.04em;
  }
  .orbit-m-arrow::before{
    content:""; display:block; width:1px; height:22px; margin:0 auto 10px;
    background:var(--line);
  }
  .orbit-m-list{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    list-style:none; margin:0; padding:0;
  }
  .orbit-m-list li{
    padding:13px 10px; border-radius:12px;
    background:var(--ink); color:#fff;
    font-weight:640; font-size:14px; line-height:1.3;
  }
}
@media (max-width:359px){ .orbit-m-list{ grid-template-columns:1fr; } }
/* ===== end round 47 visuals ===== */

/* ===== round 64 commercial ===== */
/* ---------- Commercial block ----------
   Service pages were reading as articles: measured across seven of them, "what you get"
   appeared 0-1 times and "who this is for" zero times on every page. Google matched them
   to informational queries accordingly. */
.comm{ margin: var(--s12) auto 0; max-width: 860px; }
@media (min-width: 1400px){ .comm{ max-width: 900px; } }

.comm h2{ margin-top: 0 !important; }

.comm-get{ margin: var(--s7) 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.comm-get li{
  position: relative; padding-left: 28px; font-size: 16px; line-height: 1.6;
}
.comm-get li::before{
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; border-radius: 2px; background: var(--lime);
}

.comm-fit{ display: grid; gap: 14px; margin-top: var(--s8); }
@media (min-width: 720px){ .comm-fit{ grid-template-columns: 1fr 1fr; } }
.comm-fit > div{
  padding: 18px 20px; border-radius: var(--r-card);
  background: var(--white); border: 1px solid var(--line);
}
.comm-fit .yes{ border-left: 3px solid var(--lime); }
.comm-fit .no{ border-left: 3px solid var(--slate); }
.comm-fit p.k{
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate); margin: 0 0 8px;
}
.comm-fit p.v{ margin: 0; font-size: 15.5px; line-height: 1.6; }

.comm-start{
  margin-top: var(--s8); padding: 20px 22px; border-radius: var(--r-card);
  background: var(--band); border: 1px solid var(--line);
}
.comm-start p{ margin: 0 0 10px; font-size: 16px; line-height: 1.6; }
.comm-start p:last-child{ margin-bottom: 0; }
.comm-price{ font-weight: 680; }
/* ===== end round 64 commercial ===== */

/* ===== round 66 sector commercial ===== */
/* Sector and market commercial blocks reuse the .comm styling from round 64. */
.comm-sector{ margin-top: var(--s12); }
/* ===== end round 66 sector commercial ===== */

/* ===== round 63 related ===== */
/* ---------- Related reading ----------
   Contextual links, distinct from the navigation. Twenty pages had exactly one link
   pointing at them from inside another page's content; a page reachable only through a
   menu is connected for a reader and barely connected for a crawler weighing what a site
   treats as important. */
.rel{ margin: var(--s10) auto 0; max-width: 860px; }
.rel h2{ font-size: 15px !important; letter-spacing: .04em; text-transform: uppercase;
         color: var(--slate); margin: 0 0 var(--s5) !important; }
.rel ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px){ .rel ul{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.rel a{
  display: block; padding: 15px 17px; border-radius: 12px;
  background: var(--white); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 620; font-size: 15px;
  line-height: 1.4;
}
.rel a:hover{ border-color: var(--photon); color: var(--photon); }
@media (min-width: 1400px){ .rel{ max-width: 900px; } }
/* ===== end round 63 related ===== */

/* ===== round 61 mockups ===== */
/* ---------- Illustrative UI mockups ----------
   Inline SVG, no request, brand palette, and they scale. Below 720px they are hidden
   rather than shrunk, because a diagram nobody can read is worse than no diagram.

   Every one of these shows what is measured rather than what was achieved. A line
   climbing to the top right would be an outcome claim, and this site refuses to publish a
   performance figure without a documented baseline. */
.mock{ margin: var(--s10) auto 0; max-width: 860px; }
.mock svg{ width: 100%; height: auto; display: block; }
.mock figcaption{ margin-top: var(--s5); }
.pill-demo{ background: var(--slate); color: #fff; border-color: var(--slate); }
@media (min-width: 1400px){ .mock{ max-width: 900px; } }
@media (max-width: 719px){ .mock svg{ display: none; } .mock{ margin-top: var(--s6); } }
/* ===== end round 61 mockups ===== */

/* ===== round 60 mockup ===== */
/* ---------- Illustrative UI mockup ----------
   Inline SVG rather than a photo composite: no request, no weight, brand palette, and it
   scales. Below 720px the drawing loses its floating cards and legibility with them, so
   it is hidden rather than shrunk into something nobody can read. */
.mock{ margin: var(--s10) auto 0; max-width: 860px; }
.mock svg{ width: 100%; height: auto; display: block; }
.mock figcaption{ margin-top: var(--s5); }
.pill-demo{ background: var(--slate); color: #fff; border-color: var(--slate); }
@media (min-width: 1400px){ .mock{ max-width: 900px; } }
@media (max-width: 719px){ .mock svg{ display: none; } .mock{ margin-top: var(--s6); } }
/* ===== end round 60 mockup ===== */

/* ===== round 59 responsive ===== */
/* ---------- Sticky header on touch widths ----------
   Measured at 390px: the header box was [8, 0, 382] on a 390px viewport, so an 8px strip
   down each side was uncovered and content scrolled up through it while the middle stayed
   hidden. That is what made headings look torn in half. The background was also 86%
   opaque, so text showed through the bar on any browser without backdrop-filter. */
@media (max-width: 820px){
  .hdr{
    position: sticky; top: 0; z-index: 100;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(var(--s4), env(safe-area-inset-left));
    padding-right: max(var(--s4), env(safe-area-inset-right));
    border-radius: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 12px rgba(7,17,31,.06);
  }
  .hdr-in{ min-height: 58px; }

  /* an anchor link should land below the bar, not underneath it */
  :target{ scroll-margin-top: 76px; }
  main h1[id], main h2[id], main h3[id]{ scroll-margin-top: 76px; }
}

/* ---------- Tables in the band above the mobile restack ----------
   Tables restack into cards below 640px. Between 641px and about 760px they are back in
   desktop mode and were 8px too wide, producing a small horizontal scroll on 71 pages.
   Tighter cell padding closes it without touching the desktop rhythm. */
@media (min-width: 641px) and (max-width: 820px){
  .tbl table{ min-width: 0; }
  main th, main td{ padding-left: 10px; padding-right: 10px; }
  main th:first-child, main td:first-child{ padding-left: 4px; }
  main th:last-child, main td:last-child{ padding-right: 4px; }
}

/* ---------- Label sizes on touch widths ----------
   125 labels rendered at 10px and 199 at 11px. These are eyebrows and evidence markers
   rather than body copy, so they should be smaller than the text around them, but not by
   that much on a phone held at arm's length.

   The parent is included in every selector below. A first attempt used .kind and .qk,
   which lose to .sources .kind and .quick .qk on specificity — the fifth time in this
   project a CSS fix has silently failed for that reason. */
@media (max-width: 1100px){
  .sources .kind{ font-size: 12px; }
  .quick .qk, .askai .ak, .means .mk, .def .dk{ font-size: 12.5px; }
  .capline{ font-size: 13px; }
  .pill{ font-size: 12.5px; }
  .eyebrow, .attr .k, .dv-k, .rsp-k{ font-size: 12.5px; }
  main th, main td{ font-size: 15px; }
  .tbl-hint, .note, .sources li, .byline{ font-size: 14px; }
}
/* ===== end round 59 responsive ===== */