/* PassBell — public site stylesheet (rebuilt 2026-10-17, rules in docs/BRAND.md "Identity system").
   Hand-authored design system. Static, no JavaScript, no external requests.
   Fonts are self-hosted (OFL) under assets/fonts/ so the brand look is identical on every machine.
   Tokens come from assets/tokens.css (generated by brand/build_tokens.py). */

@import url("tokens.css");

/* ---------- Fonts ---------- */
@font-face{font-family:"Fira Sans Extra Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/fira-ec-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fira Sans Extra Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/fira-ec-800-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Fira Sans Extra Condensed";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/fira-ec-900-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fira Sans Extra Condensed";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/fira-ec-900-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-400-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plex-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plex-600-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/mono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/mono-500-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}

/* ---------- Tokens ---------- */
/* tokens.css is imported at the very top of this file (an @import must precede all rules). */
/* Layout concept: a shift at the pass, read top to bottom. The hero IS the station screen; one signature band
   draws the two measured call times to scale; real screens carry the feature chapters; everything else is plain,
   ruled lists. Brand roles: Ink for the hero and the local band, Service Blue for links and the "ring" bar,
   Ready green for "answered", Brass only for the bell, the primary button and step numbers. */
:root{
  --bg:var(--pb-white); --fg:var(--pb-ink); --muted:var(--pb-steel); --line:var(--pb-steelLight);
  --card:var(--pb-mist); --accent:var(--pb-blue); --accent-ink:#fff; --ok:var(--pb-ready);
  --display:"Fira Sans Extra Condensed","Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,Menlo,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --w:1180px; --r-ctl:12px; --r-media:16px;
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){
  :root{--bg:var(--pb-ink);--fg:#F5F7FA;--muted:#AEB6C6;--line:#26304A;--card:var(--pb-night);--accent:var(--pb-blueSky);--accent-ink:var(--pb-ink);--ok:var(--pb-readyBright)}
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:18px;line-height:1.6;
  font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1;margin:0;text-wrap:balance;overflow-wrap:break-word}
h1,h2{text-transform:uppercase}
h1{font-size:clamp(44px,5.6vw,84px);font-weight:900;line-height:.92;letter-spacing:-.015em}
h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.01em}
h3{font-size:24px}
p{margin:0;max-width:64ch}
ul,ol,dl,dd{margin:0;padding:0}
::selection{background:var(--pb-brass);color:var(--pb-ink)}
/* Focus ring: brass is visible on the dark bands (9:1 on Ink) but dips to ~2:1 on white, so a 2px Ink keyline
   hugs the control and carries the light sections (18:1 on white). One of the two always clears 3:1 (contrast
   checked in test_contrast.py). */
:focus-visible{outline:3px solid var(--pb-brass);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 2px var(--pb-ink)}
.w{width:100%;max-width:var(--w);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.w.narrow{max-width:860px}
.lead{font-size:clamp(18px,1.6vw,20px);color:var(--muted);margin-top:var(--s4);text-wrap:pretty}
.label{font:500 13px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}
.skip:focus{left:14px;top:14px;background:var(--pb-brass);color:var(--pb-ink);padding:10px 16px;z-index:20;border-radius:8px}
.tag{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:var(--pb-brass);color:var(--pb-ink);padding:5px 7px;border-radius:5px;vertical-align:3px;margin-left:4px}
.todo-mark{font-family:var(--mono);font-size:.9em;background:var(--pb-brassTint);color:var(--pb-ink);padding:1px 6px;border-radius:4px}

/* ---------- Header ---------- */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
header.top .w{display:flex;align-items:center;gap:var(--s4);min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);font:900 26px/1 var(--display)}
.brand svg{width:32px;height:32px;flex:none}
.brand b{color:var(--accent)}
nav{margin-left:auto;display:flex;gap:2px;align-items:center}
nav a{color:var(--fg);text-decoration:none;font-size:15px;font-weight:600;padding:10px 12px;border-radius:var(--r-ctl)}
nav a:hover{background:var(--card)}
nav .lang{font:500 13px var(--mono);letter-spacing:.06em;border:1px solid var(--line);margin-left:4px}
@media (max-width:900px){nav a.hide{display:none}}
@media (max-width:480px){nav a.hide-sm{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--s5);
  border-radius:var(--r-ctl);font:600 17px var(--body);text-decoration:none;transition:background .2s var(--ease)}
.btn.brass{background:var(--pb-brass);color:var(--pb-ink)}
.btn.brass:hover{background:#FFB63F}
.btn.ghost{color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:focus-visible{box-shadow:inset 0 0 0 1.5px currentColor,0 0 0 2px var(--pb-ink)}/* keep the ghost outline while focused */
.cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}

/* ---------- Product screens ---------- */
.frame{border-radius:var(--r-media);background:#0B0E16;padding:6px;border:1px solid #2A3550;
  box-shadow:0 1px 2px rgba(14,19,32,.12),0 24px 48px -28px rgba(14,19,32,.55);max-width:100%}
.shot{width:100%;max-width:100%;height:auto;border-radius:calc(var(--r-media) - 6px)}

/* ---------- Hero: flat Ink; the real station screen is the image ---------- */
.hero{background:var(--pb-ink);color:#fff;padding-block:clamp(40px,6vw,88px)}
.hero .w{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);align-items:center}
.hero .w>*,.steps>*,.chapter>*,.index>*,.local .w>*,.about>*{min-width:0}
.eyebrow{font:500 13px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9AA6BC;margin-bottom:var(--s4)}
.hero h1{color:#fff}
.hero h1 span{display:block;color:var(--pb-brass)}
.hero .sub{font-size:clamp(18px,1.6vw,20px);color:#D7DCE6;margin-top:var(--s5);max-width:46ch}
.hero .note{font:500 13px var(--mono);color:#9AA6BC;margin-top:var(--s4)}
.hero .btn.ghost{color:#fff}
.hero-media{margin:0}
.hero-media figcaption{font-size:14px;color:#9AA6BC;margin-top:var(--s3)}
@media (max-width:900px){.hero .w{grid-template-columns:minmax(0,1fr)}}

/* ---------- Sections ---------- */
section{padding-block:clamp(56px,8vw,104px);scroll-margin-top:64px}
section.alt{background:var(--card)}

/* business types: one ruled line under the hero */
.who-band{padding-block:var(--s6);border-bottom:1px solid var(--line)}
.who{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s3);font-weight:600}
.who li{display:flex;align-items:center;gap:var(--s2)}
.who li::before{content:"";width:7px;height:7px;background:var(--pb-brass);border-radius:1px;flex:none}

/* where it works: three honest device drawings; our own flat shapes in brand colours (no third-party logos) */
.where-band{padding-block:var(--s6);border-bottom:1px solid var(--line)}
.where{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--s6);margin-top:var(--s4)}
.where li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s4);align-items:start}
.where h3{font-size:22px;line-height:1.15;margin-bottom:var(--s1)}
.where p{color:var(--muted);font-size:16px}
.dv{width:96px;height:64px;flex:none}
.dv-body{fill:var(--fg)}
.dv-screen{fill:var(--card)}
.dv-acc{fill:var(--accent)}
.badge{display:inline-block;margin-top:var(--s3);line-height:0;border-radius:8px}
.badge img{height:48px;width:auto}
.cta .badge{margin-top:0}
@media (max-width:760px){.where{grid-template-columns:minmax(0,1fr)}}

/* outcome band: the statement, then four outcomes in a ruled 2x2 grid */
.calm{background:var(--card)}
.calm h2{max-width:22ch}
.calm-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s7);margin-top:var(--s7)}
.calm-list div{border-top:2px solid var(--fg);padding:var(--s5) 0 var(--s6)}
.calm-list dt{font:800 26px/1.1 var(--display);margin-bottom:var(--s3)}
.calm-list dd{color:var(--muted);font-size:17px;max-width:52ch}
@media (max-width:760px){.calm-list{grid-template-columns:minmax(0,1fr)}}

/* what it replaces: three columns on desktop (old way, problem, PassBell), stacked on phones */
.replace-band{border-bottom:1px solid var(--line)}
.rep-head,.rep li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.2fr);gap:var(--s5)}
.rep-head{margin-top:var(--s7);padding-bottom:var(--s3);border-bottom:2px solid var(--fg)}
.rep-head span{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rep{list-style:none}
.rep li{padding:var(--s5) 0;border-bottom:1px solid var(--line);align-items:start}
.rep h3{font-size:24px}
.rep .was{color:var(--muted);font-size:17px}
.rep .now{font-size:17px;padding-left:var(--s4);border-left:3px solid var(--ok)}
@media (max-width:820px){
  .rep-head{display:none}
  .rep li{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .rep .now{margin-top:var(--s2)}
  .rep .sr{position:static;width:auto;height:auto;clip:auto;white-space:normal;display:block;
    font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
}

/* signature: measured call times, drawn to one scale */
.sp-head{display:grid;gap:var(--s3)}
.sp{display:grid;gap:var(--s6);margin-top:var(--s7)}
.sp-row dt{font-weight:600;margin-bottom:var(--s3)}
.sp-row dd{display:flex;align-items:center;gap:var(--s5)}
.sp-bar{flex:1;min-width:0;height:16px;width:100%}
.sp-track{fill:var(--card)}
.alt .sp-track{fill:var(--bg)}
.sp-fill{fill:var(--accent)}
.sp-row+.sp-row .sp-fill{fill:var(--ok)}
.sp-num{font:900 clamp(40px,6vw,64px)/1 var(--display);font-variant-numeric:tabular-nums;flex:none;width:5ch;text-align:right;white-space:nowrap}
.sp-sign{font-weight:500;color:var(--muted);margin-right:.08em}
.sp-num small{font:500 16px var(--mono);color:var(--muted)}
/* the axis shares the bar's row layout: same flex, a hidden copy of the number keeps the widths equal */
.sp-axis-row{display:flex;gap:var(--s5);margin-top:var(--s3)}
.sp-axis{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);
  font:500 12px var(--mono);color:var(--muted)}
.sp-axis span{position:relative;border-left:1px solid var(--line);padding:var(--s2) 0 0 var(--s1)}
.sp-axis i{position:absolute;right:0;top:0;font-style:normal;border-right:1px solid var(--line);padding:var(--s2) var(--s1) 0 0}
.sp-ghost{visibility:hidden;height:0;overflow:hidden}
@media (max-width:640px){.sp-row dd{flex-wrap:wrap}.sp-bar{flex-basis:100%}.sp-num{text-align:left}.sp-ghost{display:none}}

/* setup steps: a real sequence, so numbers are earned */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin-top:var(--s7)}
.steps li{border-top:2px solid var(--fg);padding-top:var(--s5)}
.steps .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pb-brass);
  color:var(--pb-ink);font:500 16px var(--mono);margin-bottom:var(--s4)}
.steps h3{margin-bottom:var(--s2)}
.steps p{color:var(--muted);font-size:17px}
@media (max-width:820px){.steps{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}
.demo{margin:var(--s8) 0 0;max-width:760px}
.demo video{width:100%;max-width:100%;aspect-ratio:16/9;border-radius:var(--r-media);background:#0B0C10;border:1px solid var(--line)}
.demo figcaption{font-size:15px;color:var(--muted);margin-top:var(--s3)}
.demo figcaption b{color:var(--fg)}

/* feature chapters with real screens, then a ruled index */
.chapter{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:var(--s8)}
.chapter.flip .ch-text{order:2}
.ch-text h3{font-size:clamp(26px,3vw,34px);margin-bottom:var(--s4)}
.ch-text ul{list-style:none}
.ch-text li{padding:var(--s3) 0;border-top:1px solid var(--line);font-size:17px}
@media (max-width:900px){.chapter{grid-template-columns:minmax(0,1fr)}.chapter.flip .ch-text{order:0}}
/* 9 entries: three columns of three on wide screens, one column below, so no entry sits alone in a row */
.index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s6);margin-top:var(--s8)}
.index div{border-top:1px solid var(--line);padding:var(--s5) 0}
.index dt{font:800 22px/1.15 var(--display);margin-bottom:var(--s2)}
.index dd{color:var(--muted);font-size:17px}
@media (max-width:980px){.index{grid-template-columns:minmax(0,1fr)}}

/* local first (dark band) */
.local{background:var(--pb-ink);color:#fff}
.local .w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s7);align-items:start}
.local h2{color:#fff}
.local .lead{color:#D7DCE6}
.local .more{margin-top:var(--s5)}
.local a{color:var(--pb-blueSky)}
.checks{list-style:none}
.checks li{position:relative;padding:var(--s4) 0 var(--s4) 36px;border-top:1px solid #26304A;color:#D7DCE6}
.checks li::before{content:"";position:absolute;left:4px;top:24px;width:14px;height:8px;
  border-left:3px solid var(--pb-readyBright);border-bottom:3px solid var(--pb-readyBright);transform:rotate(-45deg)}
@media (prefers-color-scheme:dark){.local,footer{border-top:1px solid var(--line)}}
@media (max-width:820px){.local .w{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}

/* pricing */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:17px}
th,td{text-align:left;padding:var(--s4) var(--s3);border-bottom:1px solid var(--line)}
thead th{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
tbody th{font:800 22px var(--display);white-space:nowrap}
td{font-variant-numeric:tabular-nums;white-space:nowrap}
td:nth-child(n+4){font-weight:600}
tr.most{background:var(--pb-brassTint);color:var(--pb-ink)}
.pnotes{list-style:none;margin-top:var(--s5)}
.pnotes li{padding:var(--s3) 0;border-bottom:1px solid var(--line);color:var(--muted)}
.fine{margin-top:var(--s4);color:var(--muted);font-size:15px}
.need-h{margin-top:var(--s7)}
.need{list-style:none;margin-top:var(--s3)}
.need li{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
@media (max-width:520px){th,td{padding:var(--s3) var(--s2);font-size:15px}tbody th{font-size:19px}}

/* FAQ */
.faq{margin-top:var(--s5)}
details{border-bottom:1px solid var(--line);padding:var(--s4) 0}
summary{cursor:pointer;font:600 19px var(--body);list-style:none;display:flex;justify-content:space-between;gap:var(--s4);
  align-items:baseline;min-height:32px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:500 24px var(--mono);color:var(--muted)}
details[open] summary::after{content:"\2212"}/* U+2212 minus sign, the pair of the "+", not an en dash */
details p{margin-top:var(--s3);color:var(--muted)}

/* founding-venue form: plain HTML, posts to /api/interest. The error line is shown by :target (#join-error). */
.join-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);background:var(--card);
  border-radius:20px;padding:clamp(20px,4vw,48px);align-items:start}
@media (max-width:820px){.join-box{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}
.join-intro .lead+.lead{margin-top:var(--s3)}
.join-form{display:grid;gap:var(--s4);min-width:0}
.join-form label{display:grid;gap:var(--s1);font:600 16px/1.3 var(--body)}
.join-form .req{font-weight:400;color:var(--muted)}
.join-form input:not([type=checkbox]),.join-form select{font:400 18px/1.3 var(--body);min-height:52px;padding:0 var(--s4);
  color:var(--fg);background:var(--bg);border:1.5px solid var(--muted);border-radius:var(--r-ctl);width:100%;min-width:0}
.join-form label.check{display:flex;gap:var(--s3);align-items:flex-start;font-weight:400;font-size:17px}
.join-form label.check input{flex:none;width:24px;height:24px;margin:2px 0 0;accent-color:var(--accent)}
.join-form .btn{border:0;cursor:pointer;font:600 18px var(--body)}
.join-form .fine{margin-top:0}
.doc .more{margin-top:var(--s5)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.join-error{display:none;padding:var(--s3) var(--s4);border-left:4px solid var(--pb-alert);font-weight:600}
.join-error:target{display:block}

/* referral page /r/<code>: flat Ink like the hero, the code is the focal point (selectable in one tap) */
.ref{background:var(--pb-ink);color:#fff;padding-block:clamp(40px,6vw,88px)}
.ref .w{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);justify-items:start}
.ref h1{color:#fff;max-width:20ch}
.ref p{color:#D7DCE6;font-size:clamp(18px,1.6vw,20px);max-width:52ch}
.ref .ref-note{font-size:15px;color:#9AA6BC}
.ref-code-box{background:var(--pb-night);border:1.5px solid var(--pb-brass);border-radius:var(--r-media);padding:var(--s4) var(--s5);max-width:100%;min-width:0}
.ref .ref-label{font:500 13px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9AA6BC;margin:0}
.ref-code{display:block;font:500 clamp(28px,9vw,56px)/1.15 var(--mono);letter-spacing:.04em;color:var(--pb-brass);
  user-select:all;overflow-wrap:anywhere;margin-top:var(--s2)}
.ref .cta{margin-top:0}

/* about / company */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);align-items:start}
.facts div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.facts dt{font:500 12px/2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:820px){.about{grid-template-columns:minmax(0,1fr);gap:var(--s5)}.facts div{grid-template-columns:110px minmax(0,1fr)}}

/* final call to action */
.final{background:var(--pb-blue);color:#fff;text-align:center}
.final h2{color:#fff}
.final p{margin:var(--s4) auto 0;color:#F2F6FF;max-width:56ch}
.final .btn{margin-top:var(--s6)}
@media (prefers-color-scheme:dark){.final{background:var(--pb-blueDeep)}}

/* footer: white lockup on Ink */
footer{background:var(--pb-ink);color:#AEB6C6;padding-block:var(--s7);font-size:15px}
footer .w{display:flex;gap:var(--s6);flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.lockup{width:150px;height:auto}
.f-brand p{margin-top:var(--s3)}
.f-links{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5)}
footer a{color:#F5F7FA}

/* ---------- Doc pages (privacy, terms, setup, 404) ---------- */
.doc{max-width:780px;padding-block:var(--s8) var(--s9)}
.doc h1{font-size:clamp(40px,7vw,72px);margin-bottom:var(--s5)}
.doc h2{font-size:28px;margin:var(--s6) 0 var(--s2)}
.doc p{margin-bottom:var(--s3)}
.doc .draft{border-left:4px solid var(--pb-brass);background:var(--pb-brassTint);color:var(--pb-ink);
  padding:15px 20px;border-radius:0 12px 12px 0;margin-bottom:var(--s5);font-size:16px}
@media (prefers-color-scheme:dark){.doc .draft{background:#22262F;color:#E7DCC6}}
.setup{list-style:none;counter-reset:s}
.setup li{counter-increment:s;position:relative;padding-left:56px;margin-top:var(--s6)}
.setup li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--pb-brass);color:var(--pb-ink);font:500 16px var(--mono)}
.setup h2{margin:0 0 var(--s2);font-size:26px}

/* legal pages: summary list and retention table */
.doc ul.sum{padding-left:22px;margin-bottom:var(--s3)}
.doc ul.sum li{margin:var(--s2) 0}
.doc table.legal td{font-weight:400;white-space:normal}