/* generated: tools/site/tokens.py + src/v5/site.css */
@font-face{font-family:'Geist';src:url(/assets/fonts/geist.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}@font-face{font-family:'Geist Mono';src:url(/assets/fonts/geist-mono.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap}@font-face{font-family:'Inter';src:url(/assets/fonts/inter.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107%;ascent-override:90%;descent-override:22.4%;line-gap-override:0%}@font-face{font-family:'Geist Fallback';src:local('Arial');size-adjust:104%;ascent-override:93%;descent-override:22%;line-gap-override:0%}:root{--n950:#07111F;--n900:#0C1F3A;--n800:#13294B;--n700:#23406B;--n600:#3A5A88;--on-dark:#AEBDD2;--on-dark-2:#D3DCE8;--on-dark-3:#8193AD;--ink:#0C1F3A;--text:#3E4C63;--muted:#5E6C82;--line:#E3E7ED;--line-2:#EEF1F5;--paper:#F5F7FA;--yellow:#FFC21A;--yellow-h:#F2B200;--yellow-soft:#FFF3CC;--ok:#12805C;--bad:#B42318;--warn:#8A5A00;--focus:#1D5BCB;--focus-dark:#FFC21A;--display:"Geist", "Geist Fallback", Inter, system-ui, sans-serif;--sans:Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;--r-btn:8px;--r-card:12px;--r-tile:16px;--r-pill:999px;--maxw:1240px;--gut:32px;--gut-sm:16px;--section:96px;--section-sm:56px;--section-lg:128px;--section-lg-sm:72px;--header:64px;--sh-art:0 0 0 1px rgba(12,31,58,.07), 0 2px 4px rgba(12,31,58,.04), 0 24px 48px -20px rgba(12,31,58,.28);--sh-art-dark:0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -24px rgba(0,0,0,.6);--sh-menu:0 0 0 1px rgba(12,31,58,.08), 0 24px 48px -16px rgba(12,31,58,.25);--fs-h1:68px;--lh-h1:1.02;--ls-h1:-0.035em;--fw-h1:600;--fs-h2:48px;--lh-h2:1.06;--ls-h2:-0.03em;--fw-h2:600;--fs-h3:22px;--lh-h3:1.25;--ls-h3:-0.015em;--fw-h3:600;--fs-lead:20px;--lh-lead:1.5;--ls-lead:0;--fw-lead:400;--fs-body:17px;--lh-body:1.6;--ls-body:0;--fw-body:400;--fs-small:14px;--lh-small:1.5;--ls-small:0;--fw-small:400;--fs-label:12px;--lh-label:1.3;--ls-label:0.08em;--fw-label:500}@media (max-width:760px){:root{--fs-h1:40px;--fs-h2:32px;--fs-h3:20px;--fs-lead:18px;--fs-body:16px;--gut:var(--gut-sm);--section:var(--section-sm);--section-lg:var(--section-lg-sm)}}
/* Apex Job Pro marketing site, design v5 (docs/design-v5.md). The :root block above this file is generated from
   tools/site/tokens.py. Page agents do not add CSS: every shape and frame lives here and in tools/site/components.py.
   Lock: Ramp hero, Linear frames, Mercury rows, Brex splits, Attio hairline frames, Stripe/Shopify mega menu. */

/* ---------- base ---------- */
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:#fff;color:var(--text);font:400 var(--fs-body)/var(--lh-body) var(--sans);font-feature-settings:"cv11" 1;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--display);font-weight:600;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
b,strong{font-weight:600;color:var(--ink)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-weight:500}
.wrap{max-width:calc(var(--maxw) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.ic{width:20px;height:20px;flex:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.tone-dark :focus-visible,.hdr :focus-visible,.ftr :focus-visible,.sticky :focus-visible{outline-color:var(--focus-dark)}
main:focus{outline:none}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--yellow);color:var(--ink);padding:10px 16px;border-radius:var(--r-btn);font-weight:600}
.skip:focus{top:12px}
.draft{background:var(--yellow);color:var(--ink);font-size:13px;line-height:1.4;text-align:center;padding:8px var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- atoms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-btn);font:600 16px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn .ic{width:18px;height:18px}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px}
.btn-primary{background:var(--yellow);color:var(--ink)}
.btn-primary:hover{background:var(--yellow-h)}
.btn-secondary{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-secondary:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn-dark{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.btn-dark:hover{box-shadow:inset 0 0 0 1px #fff}
.btn-link{min-height:auto;padding:0;color:var(--ink);font-weight:600;gap:6px}
.btn-link .arr{width:16px;height:16px;transition:transform .15s}
.btn-link:hover .arr{transform:translateX(3px)}
.tone-dark .btn-link{color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:20px;font:500 var(--fs-label)/1.3 var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.eyebrow:before{content:"";width:14px;height:2px;background:var(--yellow);flex:none}
.eyebrow.on-dark,.tone-dark .eyebrow{color:var(--on-dark-2)}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;background:var(--line-2);color:var(--ink)}
.pill-ok{background:#E3F2EB;color:#0B6B4A}.pill-bad{background:#FBE9E7;color:var(--bad)}.pill-warn{background:#FBF0DC;color:var(--warn)}.pill-navy{background:var(--n900);color:#fff}
.checked{display:flex;align-items:center;gap:8px;margin-top:20px;font:500 13px/1.4 var(--mono);color:var(--muted)}
.checked .ic{width:16px;height:16px;color:var(--ok)}
.hd{max-width:720px;margin-bottom:56px}
.hd .lead{margin-top:20px}
.hd-c{margin-left:auto;margin-right:auto;text-align:center}
.hd-c .eyebrow{justify-content:center}
.points{display:grid;margin-top:32px;border-top:1px solid var(--line)}
.points li{padding:14px 0;border-bottom:1px solid var(--line)}
.tone-dark .points{border-color:var(--n700)}.tone-dark .points li{border-color:var(--n700);color:var(--on-dark)}.tone-dark .points b{color:#fff}

/* ---------- sections ---------- */
.sec{padding:var(--section) 0;position:relative}
.tone-paper{background:var(--paper)}
.tone-dark{background:var(--n900);color:var(--on-dark)}
.tone-dark h1,.tone-dark h2,.tone-dark h3,.tone-dark b{color:#fff}
.tone-dark .lead{color:var(--on-dark)}
.tone-dark a:not(.btn){color:#fff}

/* hero: Ramp horizon on navy, blueprint dots, art overlapping into the next section */
.sec-hero,.sec-hero-stack,.sec-hero-plain{padding-top:96px;padding-bottom:72px;overflow:visible;z-index:1;
  background:radial-gradient(90% 70% at 72% 105%,rgba(43,82,140,.55) 0%,rgba(12,31,58,0) 62%),linear-gradient(180deg,var(--n950) 0%,var(--n900) 100%)}
.sec-hero:before,.sec-hero-stack:before,.sec-hero-plain:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,transparent 85%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;position:relative}
.hero-copy{max-width:600px;position:relative}
.hero-copy.c{margin:0 auto;text-align:center;max-width:820px}
.hero-copy.c .actions,.hero-copy.c .eyebrow{justify-content:center}
.hero-copy .lead{margin-top:24px;max-width:560px}
.hero-copy.c .lead{margin-left:auto;margin-right:auto}
.hero-note{margin-top:20px;font-size:14px;color:var(--on-dark)}
.hero-note a{color:#fff}
.tag{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;padding:5px 12px 5px 5px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--on-dark-2)!important;font-size:14px;text-decoration:none}
.tag b{background:var(--yellow);color:var(--ink);font-size:12px;padding:3px 8px;border-radius:999px}
.tag .ic{width:14px;height:14px}
.hero-art{position:relative;margin-bottom:-160px}
.hero-wide{position:relative;margin:64px auto -200px;max-width:1080px}
.sec-hero+.sec,.sec-hero-stack+.sec{padding-top:calc(var(--section) + 120px)}
.sec-hero-stack+.sec{padding-top:calc(var(--section) + 180px)}
.hero-aside{position:relative}

/* split */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.split.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.flip .art{order:-1}
.split .hd{margin-bottom:0}
.split .btn-link{margin-top:28px}

/* stage: paper, dots, layered art */
.sec-stage{overflow:hidden}
.sec-stage:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(12,31,58,.09) 1px,transparent 1.2px);background-size:24px 24px;pointer-events:none}
.st{position:relative;max-width:1080px;margin:0 auto;padding-bottom:24px}
.st-back{width:88%;margin:0 auto}

.st-call{position:absolute;right:0;top:48px;width:300px}

/* layered composition (hero and stage art) */

.ly .mc,.co-card .mc{padding:20px 22px}
.ly .mc-val .num,.co-card .mc-val .num{font-size:38px}
.ly .mc-sub,.co-card .mc-sub{font-size:19px}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;counter-reset:s}
.steps.n3{grid-template-columns:repeat(3,1fr)}.steps.n5{grid-template-columns:repeat(5,1fr)}
.steps li{position:relative;padding-top:28px;border-top:1px solid var(--line)}
.steps li:before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.steps li:first-child:before{background:var(--yellow);box-shadow:0 0 0 1px var(--ink)}
.step-n{display:block;font-size:13px;color:var(--muted);margin-bottom:14px}
.steps b{display:block;font:600 20px/1.3 var(--display);letter-spacing:-.01em;margin-bottom:8px}

/* comparison table */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:16px}
.cmp th,.cmp td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:14px;padding-bottom:14px}
.cmp thead th.us{background:var(--n900);color:#fff;border-radius:12px 12px 0 0}
.cmp tbody th{font-weight:500;color:var(--ink);width:28%}
.cmp td.us{background:#F6F8FB;color:var(--ink);font-weight:500;box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line)}
.cmp tbody tr:last-child td.us{border-radius:0 0 12px 12px}

/* pricing */
.price-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start;margin-bottom:72px}
.seat{background:var(--n900);color:var(--on-dark);border-radius:var(--r-tile);padding:36px;display:grid;gap:28px}
.seat-top{display:grid;gap:14px}
.seat-top .btn{justify-self:start;margin-top:8px}
.seat-name{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2)}
.seat-price{display:flex;align-items:baseline;gap:10px;color:#fff}
.seat-price .num{font-size:56px;line-height:1;letter-spacing:-.03em;color:#fff}
.seat-inc{display:grid;gap:10px;border-top:1px solid var(--n700);padding-top:24px}
.seat-inc li{display:flex;gap:10px;color:var(--on-dark-2)}
.seat-inc .ic{width:18px;height:18px;color:var(--yellow);margin-top:3px}
.seat-free{border-top:1px solid var(--n700);padding-top:20px;font-size:15px}
.seat-free p{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:8px}
.price-side h3{font-size:18px;margin-bottom:16px}
.addons{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:36px}
.addon{border:1px solid var(--line);border-radius:var(--r-card);padding:20px;display:grid;gap:6px}
.addon .num{font-size:20px;color:var(--ink)}
.addon span{font-size:15px;color:var(--muted)}
.usage,.feat-tbl{width:100%;border-collapse:collapse;font-size:16px}
.usage th,.usage td,.feat-tbl th,.feat-tbl td{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.usage td,.feat-tbl td{text-align:right;color:var(--ink);padding-left:16px}
.usage th,.feat-tbl th{font-weight:400;color:var(--text)}
.feat-tbl caption{text-align:left;font:600 var(--fs-h3)/1.3 var(--display);color:var(--ink);margin-bottom:12px}
.feat-tbl .grp th{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:32px}

/* proof row */
.proof{display:grid;grid-template-columns:repeat(5,1fr);border-block:1px solid var(--line)}
.proof.n4{grid-template-columns:repeat(4,1fr)}.proof.n3{grid-template-columns:repeat(3,1fr)}
.proof li{border-left:1px solid var(--line)}
.proof li:first-child{border-left:0}
.proof li>a,.proof li>div{display:grid;gap:8px;padding:28px 24px;height:100%;text-decoration:none;position:relative}
.proof li:first-child>a,.proof li:first-child>div{padding-left:0}
.proof li>a:hover{background:var(--paper)}
.proof .lbl{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.proof .val{font-size:17px;font-weight:500;color:var(--ink);padding-right:20px}
.proof .arr{position:absolute;right:20px;top:28px;width:16px;height:16px;color:var(--muted)}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:72px}
.faq .hd{margin-bottom:0;position:sticky;top:calc(var(--header) + 32px)}
.qs details{border-top:1px solid var(--line)}
.qs details:last-child{border-bottom:1px solid var(--line)}
.qs summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font:500 18px/1.4 var(--sans);color:var(--ink)}
.qs summary::-webkit-details-marker{display:none}
.qs summary .ic{width:18px;height:18px;transition:transform .2s;color:var(--muted)}
.qs details[open] summary .ic{transform:rotate(180deg)}
.qs .a{padding:0 48px 24px 0;max-width:720px}
.qs .a p+p{margin-top:12px}

/* metric card and callout */
.mc{border-radius:var(--r-tile);padding:26px 28px;box-shadow:var(--sh-art)}
.mc-yellow{background:var(--yellow);color:var(--ink)}
.mc-dark{background:var(--n800);color:var(--on-dark-2);box-shadow:var(--sh-art-dark)}
.mc-lbl{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.mc-val{display:flex;align-items:baseline;gap:4px 12px;margin-top:10px;flex-wrap:wrap}
.mc-val .num{white-space:nowrap}
.mc-val .num{font-size:52px;line-height:1;letter-spacing:-.035em;font-weight:500}
.mc-dark .mc-val .num{color:#fff}
.mc-sub{font-size:22px}
.mc-dark .mc-sub{color:var(--yellow)}
.mc-rows{margin-top:18px;display:grid}
.mc-rows div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-top:1px solid rgba(12,31,58,.16);font-size:14px}
.mc-dark .mc-rows div{border-color:var(--n700)}
.co{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.co .hd{margin-bottom:0}
.co-stack{position:relative;padding:0 0 120px 48px}
.co-card{position:absolute;left:0;bottom:0;width:min(320px,62%)}
.co-stack:not(:has(.co-art)){padding:0}
.co-stack:not(:has(.co-art)) .co-card{position:static;width:auto;max-width:440px}

/* role tabs */
.rt-list{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.rt-list::-webkit-scrollbar{display:none}
.rt-list button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:14px 16px;font:500 16px/1 var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap}
.rt-list button:hover{color:var(--ink)}
.rt-list button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--yellow);box-shadow:inset 0 -2px 0 var(--yellow)}
.rt-pane{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:center;padding-top:48px}
.rt-pane[hidden]{display:none}
.rt-copy h3{font-size:28px;letter-spacing:-.02em}
.rt-copy p{margin:16px 0 24px}

/* timeline */
.tl-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:72px}
.tl-hd .hd{position:sticky;top:calc(var(--header) + 32px)}
.tl li{display:grid;grid-template-columns:120px 1fr;gap:24px;position:relative;padding-bottom:36px}
.tl li:before{content:"";position:absolute;left:132px;top:12px;bottom:-12px;width:1px;background:var(--line)}
.tl li:last-child:before{display:none}
.tl li>div{padding-left:24px;position:relative}
.tl li>div:before{content:"";position:absolute;left:-16px;top:7px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.tl-t{font-size:15px;color:var(--ink);text-align:right;padding-top:2px}
.tl-who{display:block;font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tl b{display:block;font:600 19px/1.35 var(--display);margin-bottom:4px}

/* feature grid: hairline cells, no cards */
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.fg.c2{grid-template-columns:repeat(2,1fr)}.fg.c4{grid-template-columns:repeat(4,1fr)}
.fg li{background:#fff}
.tone-paper .fg li{background:var(--paper)}
.fg li>a,.fg li{text-decoration:none}
.fg li>a,.fg li:not(:has(a)){display:block;padding:32px 28px 32px 0}
.fg li:not(:has(a)){padding:32px 28px}
.fg li>a{padding:32px 28px;height:100%}
.fg li>a:hover{background:var(--paper)}
.fg-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--line-2);color:var(--ink);margin-bottom:20px}
.fg b{display:block;font:600 18px/1.35 var(--display);margin-bottom:6px}
.fg p{color:var(--text);font-size:16px}
.fg-how{display:block;font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

/* closing band */
.sec-cta{text-align:center;background:radial-gradient(70% 90% at 50% 0%,rgba(43,82,140,.45),rgba(12,31,58,0) 70%),var(--n950)}
.sec-cta h2{max-width:760px;margin:0 auto}
.sec-cta .lead{margin-top:20px}
.sec-cta .actions{justify-content:center}
.cta-call{margin-top:24px;font-size:15px;color:var(--on-dark)}

/* ---------- frames (Attio: white, hairline, almost no chrome) ---------- */

/* ---------- header and mega menu ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(7,17,31,.96);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.hdr-in{height:var(--header);display:flex;align-items:center;gap:24px}
.logo{display:inline-flex;align-items:center;gap:10px;color:#fff!important;text-decoration:none;font:600 18px/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.nav{flex:1;min-width:0}
.nav-l{display:flex;align-items:center;gap:2px}
.nav-b,.nav-a{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:var(--r-btn);background:none;border:0;cursor:pointer;color:var(--on-dark-2);font:500 15px/1 var(--sans);text-decoration:none;white-space:nowrap}
.nav-b .ic{width:14px;height:14px;transition:transform .15s;opacity:.7}
.nav-b:hover,.nav-a:hover,.nav-b[aria-expanded=true]{color:#fff;background:rgba(255,255,255,.07)}
.nav-b[aria-expanded=true] .ic{transform:rotate(180deg)}
.nav-b.here,.nav-a[aria-current=page]{color:#fff;box-shadow:inset 0 -2px 0 var(--yellow);border-radius:0}
.nav-i{position:relative}

.nav-cta{display:none}
.hdr-right{display:flex;align-items:center;gap:16px;margin-left:auto}
.login{color:var(--on-dark-2)!important;text-decoration:none;font-size:15px;font-weight:500}
.login:hover{color:#fff!important}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-btn);border:0;background:rgba(255,255,255,.07);color:#fff;cursor:pointer;place-items:center}
.burger .i-close{display:none}
.burger[aria-expanded=true] .i-open{display:none}.burger[aria-expanded=true] .i-close{display:block}
.mega,.menu{color:var(--text)}
.mega[hidden],.menu[hidden]{display:none}

.ml{display:block;padding:9px 12px;margin:0 -12px;border-radius:var(--r-btn);text-decoration:none}
.ml b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.ml span{display:block;font-size:13.5px;color:var(--muted);line-height:1.4;margin-top:2px}
.ml:hover,.mg-stage a:hover{background:var(--paper)}

.menu{position:absolute;top:calc(100% + 10px);left:-8px;min-width:340px;background:#fff;border-radius:var(--r-card);box-shadow:var(--sh-menu);padding:10px 22px}
.menu-2{min-width:620px}
.menu-2 ul{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.menu li{padding:0}

/* ---------- footer ---------- */
.ftr{background:var(--n950);color:var(--on-dark);font-size:15px}
.ftr a{color:var(--on-dark-2);text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr-top{display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,8.6fr);gap:56px;padding:88px 0 56px}
.ftr-brand{display:grid;gap:16px;align-content:start}
.ftr-brand .btn{justify-self:start;color:var(--ink)}
.ftr-brand .btn:hover{text-decoration:none;color:var(--ink)}

.ftr-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.fc h2{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark);margin-bottom:16px}
.fc ul{display:grid;gap:10px}
.ftr-base{display:flex;flex-wrap:wrap;gap:12px 28px;padding:24px 0 36px;border-top:1px solid var(--n700);font-size:13px}
.ftr-base .legal{display:flex;gap:20px;margin-left:auto}
.ftr-base a{text-decoration:underline;text-underline-offset:2px}
.ftr-bare{padding:28px 0;font-size:14px}

/* ---------- sticky mobile bar ---------- */
.sticky{display:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  
  .ftr-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1060px){
  .hdr .nav{display:none;position:fixed;top:var(--hdr-bottom,var(--header));left:0;right:0;bottom:0;background:var(--n950);overflow-y:auto;overscroll-behavior:contain;padding:8px var(--gut) 40px}
  .hdr.open{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--n950)}
  .hdr.open .nav{display:block}
  .burger{display:grid}
  .login{display:none}
  .nav-l{display:block}
  .nav-i{border-bottom:1px solid var(--n700)}
  .nav-b,.nav-a{width:100%;height:56px;justify-content:space-between;padding:0;font-size:17px;color:#fff;border-radius:0}
  .nav-b:hover,.nav-a:hover,.nav-b[aria-expanded=true]{background:none}
  .nav-b.here,.nav-a[aria-current=page]{box-shadow:none;color:var(--yellow)}
  .mega,.menu{position:static;box-shadow:none;background:none;border:0;min-width:0;padding:0 0 16px}
  
  
  
  
  .ml b,.mg-stage a{color:#fff}.ml span{color:var(--on-dark)}
  .ml:hover,.mg-stage a:hover{background:rgba(255,255,255,.06)}
  .menu-2 ul{grid-template-columns:1fr}
  .nav-cta{display:grid;gap:12px;margin-top:28px}
  .nav-cta .btn{width:100%}
  .nav-login{color:var(--on-dark-2);text-align:center;padding:8px}
  .hero-grid,.split,.split.flip,.co,.faq,.tl-grid,.rt-pane,.price-top{grid-template-columns:minmax(0,1fr);gap:48px}
  .split.flip .art{order:0}
  .faq .hd,.tl-hd .hd{position:static}
  .hero-art{margin-bottom:-96px;max-width:720px}
  .sec-hero+.sec{padding-top:calc(var(--section) + 96px)}
  .steps,.steps.n5{grid-template-columns:repeat(2,1fr)}
  .proof,.proof.n4{grid-template-columns:repeat(2,1fr)}
  .proof li{border-left:0;border-top:1px solid var(--line)}
  .proof li:nth-child(-n+2){border-top:0}
  .proof li>a,.proof li>div{padding-left:0}
  .fg,.fg.c4{grid-template-columns:repeat(2,1fr)}
  .ftr-top{grid-template-columns:1fr}
  .st-call{position:relative;top:auto;right:auto;width:auto;max-width:360px;margin:24px auto 0}
}
@media (max-width:760px){
  .hdr-right .btn{display:none}
  .sec{padding:var(--section) 0}
  .sec-hero,.sec-hero-stack,.sec-hero-plain{padding-top:56px;padding-bottom:48px}
  .hd{margin-bottom:36px}
  .actions{margin-top:28px}
  .actions .btn{flex:1 1 auto}
  .hero-art{margin-bottom:-64px}
  .hero-wide{margin:48px auto -96px}
  .sec-hero+.sec,.sec-hero-stack+.sec{padding-top:calc(var(--section) + 64px)}
  .sec-hero-stack+.sec{padding-top:calc(var(--section) + 96px)}
  
  
  
  .st-back{width:100%}
  
  .co-stack{padding:0}
  .co-card{position:relative;left:auto;width:auto;margin:-40px 12px 0}
  .steps,.steps.n3,.steps.n5{grid-template-columns:1fr;gap:28px}
  .tl li{grid-template-columns:64px 1fr;gap:28px}
  .tl li:before{left:80px}
  .tl li>div{padding-left:20px}
  .fg,.fg.c2,.fg.c4{grid-template-columns:1fr}
  .fg li>a,.fg li:not(:has(a)){padding:24px 0}
  .addons{grid-template-columns:1fr}
  .seat{padding:28px 24px}
  .mc-val .num{font-size:42px}
  .qs .a{padding-right:0}
  .qs summary{font-size:17px}
  .ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-base .legal{margin-left:0}
  
  /* comparison table: label-above-value rows */
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp tr{border-top:1px solid var(--line);padding:16px 0}
  .cmp tbody th{width:auto;padding:0 0 8px;border:0;font-weight:600}
  .cmp td{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:12px;padding:8px 0;border:0;font-size:15px}
  .cmp td:before{content:attr(data-label);font:500 12px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .cmp td.us{background:#F6F8FB;box-shadow:none;border-radius:8px;padding:10px 12px;margin:4px -12px 0}
  .tbl-wrap{overflow:visible}
  /* sticky bar */
  .sticky:not([hidden]){display:grid;grid-template-columns:1fr auto;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(7,17,31,.96);border-top:1px solid rgba(255,255,255,.1)}
  .sticky .btn{min-height:48px}
  body:has(.sticky:not([hidden])) .ftr{padding-bottom:72px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---------- form ---------- */
.form{display:grid;gap:16px;background:#fff;color:var(--text);border-radius:var(--r-tile);padding:28px;box-shadow:var(--sh-art)}
.form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.form input{font:400 17px/1.3 var(--sans);min-height:48px;padding:0 14px;border-radius:var(--r-btn);border:1px solid #B8C1CE;background:#fff;color:var(--ink)}
.form input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.form .btn{width:100%;border:0;cursor:pointer}
.form .msg:empty{display:none}
.form .msg{font-size:14px;color:var(--ink)}
.form-note{font-size:14px;color:var(--muted)}
.tone-dark .form a{color:var(--ink)}
/* ---------- styleguide only (/styleguide/) ---------- */
.sg-toc{position:sticky;top:var(--header);z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.sg-toc ul{display:flex;gap:20px;overflow-x:auto;padding:14px 0;font-size:14px}
.sg-toc a{white-space:nowrap}
.sg-block{padding:72px 0;border-bottom:1px solid var(--line)}
.sg-block>.wrap>h2{margin-bottom:12px}
.sg-block>.wrap>.lead{margin-bottom:40px;max-width:760px}
.sg-spec{padding:32px 0;border-top:1px solid var(--line);display:grid;gap:14px}
.sg-spec h3{font-size:18px}
.sg-note{font-size:14px;color:var(--muted)}
.sg-code{margin:0;background:var(--n950);color:#D3DCE8;border-radius:10px;padding:16px 18px;font:400 12.5px/1.6 var(--mono);overflow-x:auto;white-space:pre}
.sg-out{padding:24px 0}
.sg-out .actions{margin-top:0}
.sg-sws{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:24px 0 40px}
.sg-sws li{display:grid;grid-template-columns:40px 1fr;gap:2px 12px;align-items:center;font-size:14px}
.sg-sws .num{grid-column:2;font-size:12px;color:var(--muted)}
.sg-sw{grid-row:span 2;width:40px;height:40px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(12,31,58,.12)}
.sg-types li{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--line)}
.sg-types .num{font-size:12px;color:var(--muted)}
.sg-type{color:var(--ink)}

.sg-bar{background:var(--paper);border-block:1px solid var(--line);padding:20px 0}
.sg-shape{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;font-size:14px;color:var(--muted);margin-bottom:12px}
.sg-shape .num{color:var(--ink);font-weight:600}
.sg-nav{columns:3;font-size:14px}
.sg-nav li{padding:3px 0}
@media (max-width:760px){.sg-nav{columns:1}}
@media (min-width:1061px){.hdr .mega :focus-visible,.hdr .menu :focus-visible{outline-color:var(--focus)}}
.sg-spec,.sg-crop{grid-template-columns:minmax(0,1fr);min-width:0}
.sg-note{overflow-wrap:anywhere}
/* W1 ---------- strip, paths, tour (tools/site/components.py: strip(), paths(), tour()) ---------- */
/* strip: frames on one rail, left to right */

/* paths: dark band, link lists side by side */
.pa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 72px}
.pa.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pa-l{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2);padding-bottom:14px;border-bottom:1px solid var(--n700)}
.pa li a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--n700);text-decoration:none}
.pa li a>span{display:grid;gap:4px}
.pa li a b{font:600 19px/1.3 var(--display);letter-spacing:-.01em;color:#fff}
.pa li a span span{color:var(--on-dark);font-size:16px}
.pa .arr{width:18px;height:18px;color:var(--on-dark);transition:transform .15s,color .15s}
.pa li a:hover .arr{transform:translateX(3px);color:var(--yellow)}
/* tour: sticky step list + one step per screen */

@media (max-width:1060px){
  
  
  .pa,.pa.n3{grid-template-columns:minmax(0,1fr);gap:40px}
  
  
}
@media (max-width:760px){
  
  
  
  
  
  
  
  #proof .proof{grid-template-columns:minmax(0,1fr)}
  #proof .proof li{border-top:1px solid var(--line)}
  #proof .proof li:first-child{border-top:0}
  #proof .proof li>a,#proof .proof li>div{padding:20px 0}
}
.gate{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--muted)}
.tone-dark .gate{color:var(--on-dark)}
/* /W1 */
/* W3 ---------- rows, checklist, gate, art-narrow (tools/site/components.py: rows(), checklist(); .gate = a gated line's caveat; .art-narrow = a small card crop in a split) ---------- */
.rw{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:72px}
.rw-hd .hd{margin-bottom:0}
.rw-hd{align-self:start;position:sticky;top:calc(var(--header) + 32px)}
.rw-aside{margin-top:28px}
.rw-list{border-top:1px solid var(--line)}
.rw-list li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;gap:8px 32px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.rw-list li.no-t{grid-template-columns:minmax(0,1fr) auto}
.rw-t{font:600 19px/1.35 var(--display);letter-spacing:-.01em}
.rw-x{color:var(--text)}
.rw-tag{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--line-2);padding:6px 9px;border-radius:999px;white-space:nowrap}
.gate{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--muted)}
.tone-dark .gate{color:var(--on-dark)}
.ck-head,.ck li{display:grid;grid-template-columns:56px minmax(0,4fr) minmax(0,5fr) minmax(0,4fr);gap:32px}
.ck-head{padding-bottom:12px;border-bottom:1px solid var(--ink);font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ck li{padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.ck-n{font-size:15px;color:var(--muted);padding-top:2px}
.ck-q b{font:600 19px/1.35 var(--display);letter-spacing:-.01em}
.ck-a p{color:var(--text)}
.ck-a .btn-link{margin-top:10px;font-size:15px}
.ck-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.ck-foot{margin-top:40px}

@media (max-width:1060px){
  .rw{grid-template-columns:minmax(0,1fr);gap:40px}
  .rw-hd{position:static}
  .ck-head{display:none}
  .ck li{grid-template-columns:40px minmax(0,1fr);gap:8px 16px}
  .ck-q,.ck-a,.ck-art{grid-column:2}
  .ck-lbl{position:static;width:auto;height:auto;clip:auto;display:block;margin-bottom:4px;font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .ck-a{margin-top:8px}
  .ck-art:not(:empty){margin-top:12px;max-width:420px}
}
@media (max-width:760px){
  .rw-list li,.rw-list li.no-t{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}
  .rw-list li .rw-x{grid-column:1}
  .rw-list li .rw-tag{grid-row:1;grid-column:2;align-self:start}
  .rw-list li.no-t .rw-tag{grid-row:auto}
  .ck-n{font-size:14px}
}
/* /W3 */
/* W6 */
/* reference lists (API reference, claims register) and code blocks: components.reference(), code_block() */
.ref-toc{display:flex;flex-wrap:wrap;gap:8px;margin:-24px 0 56px}
.ref-toc a{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border:1px solid var(--line);border-radius:var(--r-btn);font-size:14px;color:var(--ink);text-decoration:none}
.ref-toc a:hover{background:var(--paper)}
.ref-g{scroll-margin-top:calc(var(--header) + 24px)}
.ref-g+.ref-g{margin-top:56px}
.ref-gh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.ref-gh h3{font:500 13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ref-gh p{color:var(--muted);font-size:15px}
.ref-t{table-layout:fixed}
.ref-t.n3 thead th:first-child{width:38%}.ref-t.n3 thead th:nth-child(2){width:19%}
.ref-t.n2 thead th:nth-child(2){width:180px}
.ref-t tbody th{width:auto}
.ref-t td code{overflow-wrap:normal;word-break:normal}
.ref-sub{display:block;margin-top:4px;color:var(--muted);font-size:14px;font-weight:400}
.sec code{font:500 .86em/1.4 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.tone-dark code{color:#fff}
.mth{font-family:var(--mono);font-size:11px;height:20px;padding:0 7px;margin-right:8px;letter-spacing:.04em;vertical-align:1px}
.code-fig{margin:0;min-width:0}
.code{margin:0;padding:20px 22px;border-radius:var(--r-card);background:var(--n950);color:var(--on-dark-2);font:400 13px/1.65 var(--mono);overflow-x:auto;white-space:pre;tab-size:2;box-shadow:var(--sh-art)}
.sec .code code{font:inherit;color:inherit;overflow-wrap:normal}
.code-fig figcaption{margin-top:10px;font:500 12px/1.4 var(--mono);color:var(--muted)}
@media (max-width:760px){.ref-toc{margin:-16px 0 40px}.ref-t{table-layout:auto}.ref-t td code{overflow-wrap:anywhere}.code{font-size:12px;padding:16px}}
/* /W6 */
/* W5 */
/* gated caveat under a value (components.gate) */
.gate{display:block;margin-top:4px;font:400 13px/1.4 var(--sans);letter-spacing:0;color:var(--muted)}
.tone-dark .gate,.seat .gate{color:var(--on-dark-3)}
/* seat calculator (components.seat_calculator): Mercury calculator card, inputs left, live dark result right */
.calc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--r-tile);padding:40px}
.calc-in{display:grid;gap:32px}
.calc-f{display:grid;gap:12px}
.calc-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 24px;align-items:start}
.calc-two .calc-lbl{display:grid;gap:10px;justify-content:start}
.calc-lbl{display:flex;align-items:center;justify-content:space-between;gap:16px}
.calc-lbl label,.calc-in legend{font:600 16px/1.3 var(--sans);color:var(--ink)}
.calc-in fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}
.calc-in legend{padding:0;margin-bottom:10px}
.calc-n{width:88px;min-height:48px;padding:0 12px;border:1px solid #B8C1CE;border-radius:var(--r-btn);background:#fff;color:var(--ink);font-size:20px;text-align:center;-moz-appearance:textfield}
.calc-n::-webkit-inner-spin-button,.calc-n::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.calc-n:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.calc-r{width:100%;height:32px;margin:0;accent-color:var(--n900);cursor:pointer}
.calc-h{font-size:14px;line-height:1.5;color:var(--muted)}
.calc-step{display:flex;align-items:center}
.calc-step .calc-n{border-radius:0;border-inline:0;width:64px}
.calc-step button{width:48px;height:48px;border:1px solid #B8C1CE;background:#fff;color:var(--ink);font:500 20px/1 var(--mono);cursor:pointer}
.calc-step button:first-child{border-radius:var(--r-btn) 0 0 var(--r-btn)}
.calc-step button:last-child{border-radius:0 var(--r-btn) var(--r-btn) 0}
.calc-step button:hover{background:var(--line-2)}
.calc-chk{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.calc-chk input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--n900);cursor:pointer}
.calc-chk>span:not(.num){display:grid;gap:2px}
.calc-chk b{font-weight:600;font-size:16px}
.calc-chk small{font-size:14px;line-height:1.45;color:var(--muted)}
.calc-ad{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-card)}
.calc-ad:has(input:checked){border-color:var(--ink)}
.calc-ad:has(input:disabled){opacity:.55;cursor:not-allowed}
.calc-ad>span:not(.num){flex:1}
.calc-ad>.num{margin-left:auto;white-space:nowrap;color:var(--ink);font-size:15px;padding-top:1px}
.calc-seg{display:inline-grid!important;grid-template-columns:auto auto;justify-content:start;gap:0!important}
.calc-seg legend{grid-column:1/-1}
.calc-seg label{position:relative;cursor:pointer}
.calc-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.calc-seg span{display:block;padding:12px 22px;border:1px solid #B8C1CE;font-weight:600;font-size:15px;color:var(--text)}
.calc-seg label:first-of-type span{border-radius:var(--r-btn) 0 0 var(--r-btn)}
.calc-seg label:last-of-type span{border-radius:0 var(--r-btn) var(--r-btn) 0;border-left:0}
.calc-seg input:checked+span{background:var(--n900);border-color:var(--n900);color:#fff}
.calc-seg input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.calc-res{position:sticky;top:calc(var(--header) + 24px)}
.calc-res .mc{display:grid;gap:0}
.calc-res{min-width:0}
.calc-res .mc-val>.num:first-child{font-size:48px}
.calc-res .mc-val .mc-sub{font-size:20px;white-space:normal;color:var(--on-dark-2)}
.calc-sum{margin-top:14px;font-size:15px;color:var(--on-dark-2)}
.calc-min{margin-top:8px;font-size:14px;color:var(--yellow)}
.calc-res .mc-rows div{font-size:14px}
.calc-res .mc-rows div>span:first-child{color:var(--on-dark)}
.calc-res .mc-rows div>span:last-child{color:#fff;text-align:right}
.calc-res .mc-rows div[hidden]{display:none}
.calc-foot{margin-top:18px;font-size:13px;line-height:1.5;color:var(--on-dark-3)}
.calc-res .btn{margin-top:20px;width:100%}
@media (max-width:1060px){.calc{grid-template-columns:minmax(0,1fr);padding:32px}.calc-res{position:static}}
@media (max-width:760px){
  .calc{padding:20px 16px;gap:32px;margin-inline:calc(var(--gut) * -1 + 8px)}
  .calc-two{grid-template-columns:minmax(0,1fr)}
  .calc-res .mc-val>.num:first-child{font-size:40px}
  .calc-ad{flex-wrap:wrap}
  .calc-ad>span:not(.num){flex:1 1 calc(100% - 40px)}
  .calc-ad>.num{margin-left:32px}
}
/* /W5 */
/* W2 */
/* gate: the small plain-word caveat after a gated, dated or demo line */
.gate{display:block;margin-top:4px;font-size:14px;line-height:1.45;font-weight:400;color:var(--muted)}
.tone-dark .gate{color:var(--on-dark)}
.cmp .gate,.fg .gate{font-size:13px}

/* cols: short lists side by side */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 64px}
.cols.n3{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px}
.col h3{font-size:22px}
.col .points{margin-top:20px}

.cols-one{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:72px}
.cols-one .hd{margin-bottom:0}
.cols-one .points{margin-top:0}
.sec-cols .btn-link{margin-top:32px}
/* ledger: one worked sum, to the cent */
.ldg-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.ldg-grid .hd{margin-bottom:0}
.ldg{border:1px solid var(--line);border-radius:var(--r-card);padding:8px 32px 24px;background:#fff}
.ldg-t{width:100%;border-collapse:collapse}
.ldg-t th{text-align:left;font-weight:400;color:var(--text);padding:18px 24px 18px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.ldg-t td{text-align:right;white-space:nowrap;color:var(--ink);padding:18px 0;border-bottom:1px solid var(--line);font-size:18px;vertical-align:baseline}
.ldg-t tfoot th,.ldg-t tfoot td{border-bottom:0;border-top:2px solid var(--ink);padding-top:22px;font-weight:600;color:var(--ink)}
.ldg-t tfoot td{font-size:28px;letter-spacing:-.02em}
.ldg-note{margin-top:12px;font-size:13px;color:var(--muted)}
@media (max-width:1060px){
  .cols.n3,.cols-one,.ldg-grid{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:760px){
  .cols{grid-template-columns:minmax(0,1fr);gap:40px}
  .ldg{padding:4px 18px 16px}
  .ldg-t th{padding-right:12px;font-size:15px}
  .ldg-t td{font-size:16px}
  .ldg-t tfoot td{font-size:22px}
}
/* /W2 */
/* W4 */
/* Switching pages (tools/site/pages/switching.py). Calculator shape (components.calc), the code-native import
   preview and import result shown in frames, small dated notes, and the stacked comparison table for many columns. */
small.ck{display:inline;font:500 12.5px/1.4 var(--mono);color:var(--muted);white-space:normal}
.tone-dark small.ck{color:var(--on-dark-3)}
.cmp small.ck{display:block;margin-top:4px}

.ly .mc-val .mc-sub,.co-card .mc-val .mc-sub{font-size:19px}
.cmp b.wk{font-weight:700;color:var(--ink)}
/* calculator: inputs left, live result card right (Mercury savings calculator, RW2 §5 #12) */
.calc{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:72px;align-items:start}
.calc .hd{margin-bottom:32px}
.cf-list{display:grid;gap:20px;max-width:480px}
.cf{display:grid;gap:8px}
.cf[hidden]{display:none}
.cf>span{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cf input,.cf select{width:100%;min-height:48px;padding:0 14px;border-radius:var(--r-btn);border:1px solid #B8C1CE;background:#fff;color:var(--ink);font:500 17px/1.3 var(--sans)}
.cf input:focus-visible,.cf select:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.calc-out .mc{box-shadow:none}
.calc-out .mc-val .num{font-size:44px}
.calc-out .checked{margin-top:16px;align-items:flex-start;font-size:12.5px}
.calc-out .checked .ic{margin-top:1px}
/* import preview and result: hand-built app screens inside browser frames (label=True) */

@media (max-width:1060px){.calc{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:760px){
  .calc-out .mc-val .num{font-size:34px}
  
  
  
  
  
  
  
  /* many-column tables: label above value */
  .cmp-stack td{grid-template-columns:minmax(0,1fr);gap:2px}
}
/* /W4 */

/* W7: QA fixes */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cmp td>.cell{min-width:0;overflow-wrap:break-word}
/* pricing fees (copy v3): the fee table and the worked months, one reading width */
#fees .tbl-wrap{max-width:880px}
#fees .fee-ex{margin:64px 0 12px;font:600 24px/1.25 var(--display);letter-spacing:-.01em}
@media (max-width:760px){#fees .fee-ex{margin-top:44px;font-size:21px}}
.cmp td>.cell>small,.cmp td>.cell>.gate{display:block}
@media (max-width:1024px){.proof.n3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .proof,.proof.n3,.proof.n4{grid-template-columns:minmax(0,1fr)}
  .proof li,.proof li:nth-child(-n+2){border-top:1px solid var(--line)}
  .proof li:first-child{border-top:0}
  .proof li>a,.proof li>div{padding:20px 0}
}

/* W8 ---------- design polish (docs/qa/polish-list-2026-10-06.md) ---------- */
/* 1. Hero composition: the browser frame bleeds off the right edge at a readable scale; the phone overlaps its
   lower-left corner with depth; the one yellow card hangs off the lower-right, aligned to the grid. Shadow only here. */
@media (min-width:1061px){
  .sec-hero{overflow-x:clip;overflow-y:visible}
  .sec-hero .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* phone-first hero: the phone on the left, large, copy right */
  
  
  
}
/* phone-only hero art: one large phone, not a small one floating in the column */

/* stacked hero: the wide frame runs the full grid, a phone overlaps its lower-right corner */
.hero-wide{max-width:none}

/* 4. Section rhythm: one vertical scale. Text sections 96 px (56 on phones), sections that carry product art
   128 px (72). Two white sections in a row share one gap instead of stacking two paddings. */
.sec-split,.sec-callout,.sec-roles,.sec-stage,.sec-strip,.sec-tour,.sec-ledger,.sec-calc,.sec-calculator,.sec-steps-art,.sec-band{padding-top:var(--section-lg);padding-bottom:var(--section-lg)}
.sec:not(.tone-dark):not(.tone-paper)+.sec:not(.tone-dark):not(.tone-paper){padding-top:0}
.hd{margin-bottom:48px}
@media (max-width:760px){.hd{margin-bottom:32px}}
/* 2. Feature-page skeletons: dark band, steps beside a phone, stage rule row, dated facts */
.bd{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:96px;align-items:center}
.bd .hd{margin-bottom:0}
.bd-copy .points{margin-top:32px}
.bd-fig{border-left:1px solid var(--n700);padding-left:56px}
.bd-lbl{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2)}
.bd-val{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin-top:16px;color:#fff}
.bd-val .num{font-size:96px;line-height:.95;letter-spacing:-.04em;color:#fff;white-space:nowrap}
.bd-sub{font:500 24px/1.2 var(--mono);color:var(--on-dark-2)}
.bd-rows{margin-top:28px;display:grid;max-width:420px}
.bd-rows div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--n700);font-size:15px}
.bd-rows .num{color:#fff}

.st-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:56px;position:relative}
.st-pts li{padding-top:20px;border-top:1px solid var(--ink);color:var(--text)}

.fx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.fx .hd{margin-bottom:0}
.fx-t{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
.fx-t th{text-align:left;font-weight:400;color:var(--text);padding:16px 24px 16px 0;border-bottom:1px solid var(--line)}
.fx-t td{text-align:right;color:var(--ink);padding:16px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.fx-card{border:1px solid var(--n700);border-radius:var(--r-card);padding:24px 26px}
.fx-h{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2)}
.fx-rows{margin-top:14px;display:grid}
.fx-rows div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--n700);font-size:15px;color:var(--on-dark)}
.fx-rows .num{color:#fff;white-space:nowrap}
.fx-card .checked{color:var(--on-dark-3);margin-top:14px}
@media (max-width:1060px){
  .bd,.sa,.fx{grid-template-columns:minmax(0,1fr);gap:48px}
  
  .bd-fig{border-left:0;padding-left:0;border-top:1px solid var(--n700);padding-top:32px}
  
}
@media (max-width:760px){
  .bd-val .num{font-size:64px}
  
  
  
  
  .st-pts{grid-template-columns:minmax(0,1fr);gap:0;margin-top:32px}
  .st-pts li{padding:16px 0;border-top:1px solid var(--line)}
  .st-pts li:first-child{border-top-color:var(--ink)}
  .fx-t th{font-size:15px}
}
.hero-aside>.mc,.hero-aside>.fx-card{max-width:400px;margin-left:auto}
@media (min-width:1061px){
  .st{max-width:1120px}
  .st-back{width:100%}
  
  
}
.sec-facts h2{font-size:34px;letter-spacing:-.025em}
@media (max-width:760px){.sec-facts h2{font-size:26px}}
/* 5. The general managers' twelve: one large frame, then the list in two columns */
.ck-feature{margin-bottom:64px}
.ck2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:72px;border-top:1px solid var(--ink)}
.ck2 li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.ck2 .ck-qb{display:block;font:600 19px/1.35 var(--display);letter-spacing:-.01em;margin-bottom:6px}
.ck2 .btn-link{margin-top:10px;font-size:15px}
@media (min-width:761px){.ck2{grid-auto-flow:column;grid-template-rows:repeat(6,auto)}}
@media (max-width:760px){.ck2{grid-template-columns:minmax(0,1fr)}.ck2 li{grid-template-columns:36px minmax(0,1fr);gap:12px}.ck-feature{margin-bottom:40px}}
/* 6. Grouped comparison (/compare/): jump row and column header stay in view; groups collapse on phones */
.cg-nav{position:sticky;top:var(--header);z-index:5;display:flex;align-items:center;gap:6px;padding:12px 0;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.cg-nav::-webkit-scrollbar{display:none}
.cg-nav>span{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:8px;white-space:nowrap}
.cg-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-btn);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
.cg-nav a:hover{border-color:var(--ink)}
.cg-head{position:sticky;top:calc(var(--header) + 61px);z-index:4;display:grid;grid-template-columns:28% repeat(4,18%);background:#fff;border-bottom:1px solid var(--ink)}
.cg-head span{padding:14px 20px;font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cg-head span:first-child{padding-left:0}
.cg-head span.us{background:var(--n900);color:#fff;border-radius:12px 12px 0 0}
.cg{scroll-margin-top:calc(var(--header) + 120px)}
.cg-h{margin:0}
.cg-b{display:flex;align-items:center;gap:16px;width:100%;min-height:56px;padding:28px 0 12px;background:none;border:0;text-align:left;cursor:default;font:inherit}
.cg-name{font:600 20px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.cg-n{font-size:13px;color:var(--muted)}
.cg-b .ic{display:none;width:18px;height:18px;margin-left:auto;color:var(--muted);transition:transform .2s}
.cg-t{table-layout:fixed}
.cg-t col.c0{width:28%}
.cg-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.cg-t tbody th{width:auto}
@media (max-width:760px){
  .cg-nav{margin-inline:calc(var(--gut) * -1);padding:10px var(--gut);flex-wrap:nowrap}
  .cg-nav a{min-height:44px}
  .cg-head{display:none}
  .cg{border-top:1px solid var(--line)}
  .cg-b{min-height:64px;padding:16px 0;cursor:pointer}
  .cg-b .ic{display:block}
  .cg-b[aria-expanded=true] .ic{transform:rotate(180deg)}
  .cg-name{font-size:18px}
  .js .cg.closed .cg-body{display:none}
  .cg:not(.closed) .cg-b{border-bottom:1px solid var(--ink)}
}
}
.cg-t tbody th{padding-left:0}
/* 8. Type and detail: figures in running text sit in mono a touch smaller than the text around them; one radius
   for cards (12) and one for panels (16); one filled yellow per view (the footer's button is outlined). */
:where(p,li,td,th,small,.rw-x,.gate,.lead,.cta-call,figcaption) .num{font-size:.94em}
li,dd,td{text-wrap:pretty}
.mc{border-radius:var(--r-card)}
.ftr-brand .btn-dark{color:#fff}
.ftr-brand .btn-dark:hover{color:#fff;text-decoration:none}
a:not(.btn):hover{text-decoration-thickness:2px}
.sec .btn-link:hover{text-decoration:none}
/* 9. Motion: frames below the hero rise in once as they scroll into view (product-showing only). site.js adds
   .motion and marks frames already on screen before the first paint, so nothing flashes; reduced motion: none. */

/* 10. Phones: a cropped view (frames.crop) is drawn from CSS variables so a phone can show its own focal region */

/* v6 ======================================================================================================
   docs/design-v6.md. Hint art (tools/site/hints.py), the ask (risk line, modal, sticky bar), the phone band, the
   promise block, the proof slot, the feature template (hero, outcomes, capability tabs, cross-links) and the hub
   tiles (tools/site/components.py v6 block, tools/site/templates.py). Everything inside a drawing is sized in em. */

/* ---------- the ask ---------- */
.ask{margin-top:36px}
.ask .actions{margin-top:0}
.ask-c{text-align:center}.ask-c .actions{justify-content:center}
.risk{margin-top:14px;font-size:14px;line-height:1.45;color:var(--muted)}
.risk.on-dark,.tone-dark .risk{color:var(--on-dark)}
.sec-outcomes .ask,.sec-captabs .ask{margin-top:56px}

/* ---------- hint art: the frame and the placeholder bar ---------- */
.hint{font-size:15px;line-height:1.3;color:var(--text);position:relative;width:100%;text-align:left}
.hint-lg{font-size:16px}
.hint-sm{font-size:10px}
.hint-in{position:relative;background:#fff;border-radius:1.1em;padding:1.25em 1.35em 1.4em;overflow:hidden;
  box-shadow:0 0 0 1px rgba(12,31,58,.08),0 1px 2px rgba(12,31,58,.04),0 1.6em 3.2em -1.4em rgba(12,31,58,.26)}
.tone-dark .hint-in{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 2.6em 5em -1.6em rgba(0,0,0,.6)}
.hint .ic{width:1.15em;height:1.15em}
.hb{display:block;height:.5em;width:var(--w);max-width:100%;border-radius:99px;background:#E6EAF0}
.hb-d{background:#CAD2DD}.hb-w{background:rgba(255,255,255,.75)}.hb-on{background:rgba(255,255,255,.22)}
.hd-row{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:1.1em;min-height:1.6em}
.hd-l{display:inline-flex;align-items:center;gap:.5em;font:600 1em/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.hpill{font:500 .7em/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--line-2);padding:.5em .75em;border-radius:99px;white-space:nowrap}
.hh-m{font:500 .78em/1 var(--mono);color:var(--muted)}

/* board */
.hint-board .br{display:grid;grid-template-columns:6.4em minmax(0,1fr);gap:.6em;align-items:center;height:2.7em;border-top:1px solid var(--line-2)}
.hint-board .br-ruler{height:1.5em;border-top:0}
.br-ruler .br-lane{display:flex;justify-content:space-between;align-items:center;font:500 .72em/1 var(--mono);color:var(--muted)}
.br-who{display:flex;align-items:center;gap:.5em;font-size:.84em;font-weight:600;color:var(--ink);white-space:nowrap}
.av{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;background:var(--n900);color:#fff;font:600 .78em/1 var(--sans);font-style:normal;flex:none}
.br-lane{position:relative;height:100%}
.bk{position:absolute;left:var(--l);width:var(--w);top:.42em;bottom:.42em;display:flex;align-items:center;padding:0 .55em;border-radius:.4em;border-left:.22em solid;overflow:hidden}
.bk em{font:600 .72em/1 var(--sans);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-b{background:#E3E9F2;border-color:#3A5A88;color:var(--ink)}
.bk-n{background:#EEF1F5;border-color:#A9B6CA;color:var(--ink)}
.bk-d{background:#D3DCE9;border-color:var(--n900);color:var(--ink)}
.bk-g{background:#E3F2EB;border-color:var(--ok);color:#0B5A3E}
.now{position:absolute;top:5.3em;bottom:1.1em;left:calc(1.35em + 7em + (100% - 9.7em) * var(--l));width:2px;margin-left:-1px;background:var(--n600);border-radius:2px}
.now:before{content:"";position:absolute;top:-.3em;left:-.25em;width:.6em;height:.6em;border-radius:50%;background:var(--n600)}

/* options */
.ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7em;align-items:end;padding-top:.6em}
.op{position:relative;display:grid;gap:.6em;align-content:start;padding:1em .95em 1.15em;border-radius:.8em;box-shadow:inset 0 0 0 1px var(--line);background:#fff}
.op-on{box-shadow:inset 0 0 0 2px var(--ink),0 1.2em 2.2em -1.2em rgba(12,31,58,.35);padding-top:1.5em;padding-bottom:1.6em}
.op-tag{position:absolute;top:-.85em;left:50%;transform:translateX(-50%);background:var(--hy,var(--yellow));color:var(--hy-ink,var(--ink));font:600 .7em/1 var(--sans);padding:.55em .85em;border-radius:99px;white-space:nowrap}
.op-n{font:500 .7em/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.op-p{font-size:1.4em;line-height:1.1;color:var(--ink);letter-spacing:-.02em}
.op-pt{display:flex;align-items:center;gap:.45em}
.op-pt .ic{width:.95em;height:.95em;color:var(--ok);flex:none}

/* invoice */
.iv-to{display:grid;gap:.5em;margin-bottom:1.2em}
.iv-r{display:flex;align-items:center;justify-content:space-between;gap:1.2em;padding:.75em 0;border-top:1px solid var(--line-2)}
.iv-r .num{font-size:.86em;color:var(--ink)}
.iv-t{display:flex;align-items:baseline;justify-content:space-between;padding-top:.8em;border-top:2px solid var(--ink);font-weight:600;color:var(--ink)}
.iv-t .num{font-size:1.5em;letter-spacing:-.02em}
.stamp{position:absolute;right:1.5em;top:3.4em;transform:rotate(-8deg);font:700 1.15em/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ok);border:.13em solid currentColor;border-radius:.3em;padding:.4em .65em .4em .8em;background:rgba(255,255,255,.9)}

/* phone */
.hint-phone .hint-in{background:none;box-shadow:none;padding:0;overflow:visible;border-radius:0}
.ph{width:15.5em;max-width:100%;margin:0 auto;padding:.45em;border-radius:2.4em;background:var(--n900);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 2.4em 4.4em -1.8em rgba(7,17,31,.6)}
.ph-scr{position:relative;display:flex;flex-direction:column;min-height:23em;border-radius:2em;overflow:hidden;background:#fff}
.ph-notch{position:absolute;top:.55em;left:50%;width:4.4em;height:1.15em;margin-left:-2.2em;border-radius:99px;background:#05101F}
.ph-top{background:var(--n800);padding:2.6em 1.15em 1.15em;color:#fff}
.ph-k{display:block;font:500 .66em/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2)}
.ph-top b{display:block;margin:.5em 0 .7em;color:#fff;font:600 1.08em/1.25 var(--display);letter-spacing:-.01em}
.ph-body{flex:1;display:grid;align-content:start;gap:1em;padding:1.25em 1.15em}
.ph-s{display:flex;align-items:center;gap:.65em}
.ph-s .ic{width:1.25em;height:1.25em;padding:.2em;border-radius:50%;background:var(--ok);color:#fff;flex:none;stroke-width:3}
.ph-o{display:block;width:1.25em;height:1.25em;border-radius:50%;box-shadow:inset 0 0 0 .13em #C3CBD6;flex:none}
.ph-done .hb{background:#D5DBE3}
.ph-next{display:flex;align-items:center;justify-content:space-between;margin:.85em;padding:1em 1.05em;border-radius:.85em;background:var(--hy,var(--yellow));color:var(--hy-ink,var(--ink));font:600 .92em/1 var(--sans)}

/* truck */
.tk-r{display:flex;align-items:center;gap:.75em;padding:.78em 0;border-top:1px solid var(--line-2);font-size:.88em;color:var(--ink)}
.tk-r>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-r .num{min-width:2em;text-align:right}
.tk-low{margin:0 -.75em;padding:.78em .75em;border-radius:.55em;border-top-color:transparent;background:#FBF1DD}
.tk-low+.tk-r{border-top-color:transparent}
.lowp{font:600 .76em/1 var(--sans);color:var(--warn);background:#fff;padding:.4em .65em;border-radius:99px;box-shadow:inset 0 0 0 1px #E9CC8E}
.tk-low .num{color:var(--warn);font-weight:600}

/* money */
.mts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7em}
.mt{display:grid;gap:.45em;padding:.95em 1em 1.05em;border-radius:.8em;box-shadow:inset 0 0 0 1px var(--line)}
.mt-l{font:500 .68em/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.mt-v{font-size:1.38em;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.mt-bar{display:block;height:.36em;border-radius:99px;background:var(--line-2);overflow:hidden}
.mt-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:#A9B6CA}
.mt-on{box-shadow:inset 0 0 0 1.5px var(--ink)}
.mt-on .mt-bar i{background:var(--hy,var(--yellow))}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3em;text-align:center}
.cw{font:500 .68em/1.8 var(--mono);color:var(--muted)}
.cd{display:grid;place-items:center;height:2.3em;border-radius:.55em;font-size:.86em;font-weight:500;color:var(--ink)}
.cd-x{color:#AEB8C6}
.cd-on{background:var(--n900);color:#fff;font-weight:600}
.sls{display:flex;gap:.5em;margin-top:1em}
.sl{flex:1;padding:.65em 0;border-radius:.55em;box-shadow:inset 0 0 0 1px var(--line);text-align:center;font:500 .8em/1 var(--mono);color:var(--ink)}
.sl-on{background:var(--hy,var(--yellow));color:var(--hy-ink,var(--ink));box-shadow:none;font-weight:600}
.cal-b{display:block;margin-top:.9em;padding:.9em;border-radius:.6em;background:var(--n900);color:#fff;text-align:center;font:600 .85em/1 var(--sans)}

/* text thread */
.tt{display:grid;gap:.55em}
.tt p{max-width:82%;padding:.72em .95em;border-radius:1.15em;font-size:.88em;line-height:1.38}
.tt-out{justify-self:end;background:var(--n900);color:#fff;border-bottom-right-radius:.3em}
.tt-in{justify-self:start;background:var(--line-2);color:var(--ink);border-bottom-left-radius:.3em}
.tt-m{justify-self:end;margin:-.2em .3em .4em 0;font:500 .66em/1 var(--mono);color:var(--muted)}

/* import */
.im-r{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:1em;align-items:center;padding:.85em 0;border-top:1px solid var(--line-2)}
.im-n{display:flex;align-items:center;gap:.6em;font-size:.88em;font-weight:600;color:var(--ink);white-space:nowrap}
.im-ok,.im-go{display:grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;flex:none}
.im-ok{background:var(--ok);color:#fff}.im-ok .ic{width:.85em;height:.85em;stroke-width:3}
.im-go{box-shadow:inset 0 0 0 .16em var(--hy,var(--yellow))}
.im .mt-bar i{background:var(--ok)}
.im-r:last-child .mt-bar i{background:var(--hy,var(--yellow))}

/* the drawing's one yellow mark (--hy) goes navy where a yellow ask already sits in view: heroes, the feature hero,
   every hub tile but the first */
.hh,.fh-art,.ht-art{--hy:var(--n800);--hy-ink:#fff}
.hts li:first-child .ht-art{--hy:var(--yellow);--hy-ink:var(--ink)}
.hb-lg{height:.8em}
.tk-q{min-width:2em;display:flex;justify-content:flex-end}
.tt-bar{padding:.95em 1em!important}
.ph-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;margin-top:.3em}
.ph-pics i{display:block;aspect-ratio:1;border-radius:.4em;background:#E6EAF0}
.hpill-ok{background:#E3F2EB;color:#0B6B4A}
.ms{display:grid;gap:.85em}
.ms-r{display:flex;align-items:center;gap:.65em;padding-top:.85em;border-top:1px solid var(--line-2)}
.ms-f{display:flex;align-items:center;gap:.5em;padding-top:.85em;border-top:1px solid var(--line-2);font-size:.86em;font-weight:600;color:var(--ink)}
.ms-f .ic{width:1.05em;height:1.05em;color:var(--muted)}

/* ---------- event cards ---------- */
.ev{display:grid;gap:.7em;max-width:23em;font-size:15px;line-height:1.3}
.ev-c{display:flex;align-items:center;gap:.85em;padding:.8em 1.1em .85em .8em;border-radius:1.05em}
.ev-dark .ev-c{background:rgba(14,32,60,.9);color:var(--on-dark);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 1.4em 2.8em -1.1em rgba(0,0,0,.6)}
.ev-light .ev-c{background:rgba(255,255,255,.92);color:var(--text);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px rgba(12,31,58,.08),0 1.4em 2.8em -1.2em rgba(12,31,58,.32)}
.ev-ic{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:.7em;flex:none;background:rgba(255,255,255,.1);color:#fff}
.ev-light .ev-ic{background:var(--n900)}
.ev-c:first-child .ev-ic{background:var(--yellow);color:var(--ink)}
.ev-ic .ic{width:1.25em;height:1.25em}
.ev-t{flex:1;display:grid;gap:.12em;min-width:0}
.ev-app{display:flex;justify-content:space-between;gap:1.5em;font:500 .66em/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark)}
.ev-app span{text-transform:none;letter-spacing:0}
.ev-light .ev-app{color:var(--muted)}
.ev-t b{font:600 .96em/1.3 var(--sans);color:#fff}
.ev-light .ev-t b{color:var(--ink)}
.ev-l{font-size:.82em;line-height:1.35}

/* hero composition: event cards in one calm stack on the right, over the drawing's right third, staggered */
.hh{position:relative;padding:3.2em 0 3.2em}
.hh-phone,.hh-thread,.hh-calendar,.hh-truck,.hh-import,.hh-membership{padding-left:6%;padding-right:22%}
.hh-invoice .hint,.hh-options .hint,.hh-money .hint{max-width:34em;margin-left:auto;margin-right:6%}
.hh .ev-float{position:absolute;right:-2em;top:12%;display:grid;gap:.6em;justify-items:end;max-width:none;pointer-events:none;font-size:14px}
.ev-float .ev-c{width:19.5em}
.ev-float .ev-c:nth-child(2){margin-right:1.2em}
.ev-float .ev-c:nth-child(3){margin-right:2.4em}
.ev-float.n1{top:auto;bottom:10%}
@media (prefers-reduced-motion:no-preference){
  .ev-float .ev-c{animation:ev-in .8s cubic-bezier(.2,.7,.2,1) both}
  .ev-float .ev-c:nth-child(2){animation-delay:.18s}.ev-float .ev-c:nth-child(3){animation-delay:.36s}
  @keyframes ev-in{from{opacity:0;translate:0 .8em}to{opacity:1;translate:0 0}}
}
.hero-art:has(.hh){margin-bottom:0}
.sec-hero:has(.hh)+.sec{padding-top:var(--section)}

/* ---------- feature hero (white, drawing on a paper panel) ---------- */
.sec-fhero{padding:72px 0 88px;background:#fff}
.fh{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.fh-copy .lead{margin-top:22px;max-width:520px}
.fh-art{position:relative;padding:56px 48px;border-radius:24px;background:var(--paper);overflow:hidden}
.fh-art:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(12,31,58,.09) 1px,transparent 1.2px);background-size:22px 22px;pointer-events:none}
.fh-art .hint{position:relative}
.fh-art .hint-phone{max-width:300px;margin:0 auto}
.crumb{display:flex;align-items:center;gap:6px;margin-bottom:18px;font-size:14px}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--ink);text-decoration:underline}
.crumb .ic{width:14px;height:14px;transform:rotate(-90deg);color:var(--muted)}

/* ---------- outcome cards ---------- */
.sec-outcomes{border-top:1px solid var(--line)}
.ocs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ocs.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.oc{padding:32px 30px 34px;border-radius:var(--r-tile);box-shadow:inset 0 0 0 1px var(--line);background:#fff}
.oc-ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:24px;border-radius:12px;background:var(--n900);color:#fff}
.oc:first-child .oc-ic{background:var(--yellow);color:var(--ink)}
.oc h3{font-size:22px}
.oc p{margin-top:10px}

/* ---------- capability tabs (the one paper band) ---------- */
.ct-list{display:flex;justify-content:center;gap:6px;margin:0 auto 48px;padding:5px;width:max-content;max-width:100%;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow-x:auto;scrollbar-width:none}
.ct-list::-webkit-scrollbar{display:none}
.ct-list button{appearance:none;border:0;background:none;padding:12px 20px;border-radius:999px;font:500 15px/1 var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap}
.ct-list button:hover{color:var(--ink)}
.ct-list button[aria-selected=true]{background:var(--n900);color:#fff}
.ct-pane{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:center}
.ct-pane[hidden]{display:none}
.ct-copy h3{font-size:32px;line-height:1.12;letter-spacing:-.025em}
.ct-copy>p{margin-top:16px;font-size:var(--fs-lead);line-height:var(--lh-lead)}
.ct-pts{display:grid;gap:12px;margin-top:28px}
.ct-pts li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.ct-pts .ic{width:20px;height:20px;margin-top:3px;padding:3px;border-radius:50%;background:var(--ok);color:#fff;stroke-width:3;flex:none}
.ct-art .hint-phone{max-width:300px;margin:0 auto}

/* ---------- cross-links ---------- */
.xl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.xl li{background:#fff}
.xl a{position:relative;display:grid;gap:6px;height:100%;padding:28px 44px 30px 0;text-decoration:none}
.xl li+li a{padding-left:28px}
.xl b{font:600 18px/1.3 var(--display);letter-spacing:-.01em}
.xl span{font-size:15px;color:var(--text)}
.xl .arr{position:absolute;right:20px;top:31px;width:16px;height:16px;color:var(--muted);transition:transform .15s}
.xl a:hover .arr{transform:translateX(3px);color:var(--ink)}
.xl a:hover b{text-decoration:underline;text-underline-offset:3px}

/* ---------- hub tiles ---------- */
.hts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hts.n2,.hts.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.hts a{display:grid;grid-template-rows:auto auto 1fr;gap:6px;height:100%;padding:0 0 28px;border-radius:var(--r-tile);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;overflow:hidden;position:relative;transition:box-shadow .15s}
.hts a:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.ht-art{display:block;height:208px;margin-bottom:22px;padding:28px 28px 0;background:var(--paper);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}
.hts.n2 .ht-art,.hts.n4 .ht-art{height:236px;padding:32px 44px 0}
.ht-art .hint-sm{font-size:10.5px}
.hts.n2 .ht-art .hint-sm,.hts.n4 .ht-art .hint-sm{font-size:12px}
.ht-art .hint-phone{max-width:62%;margin:0 auto}
.hts a>b{padding:0 28px;font:600 20px/1.3 var(--display);letter-spacing:-.015em}
.ht-x{padding:0 56px 0 28px;color:var(--text)}
.ht-go{position:absolute;right:24px;bottom:28px;color:var(--muted)}
.ht-go .ic{width:18px;height:18px;transition:transform .15s}
.hts a:hover .ht-go{color:var(--ink)}.hts a:hover .ht-go .ic{transform:translateX(3px)}

/* ---------- promise block ---------- */
.prm{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-block:1px solid var(--line)}
.prm.n4{grid-template-columns:repeat(4,minmax(0,1fr))}.prm.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.prm li{display:grid;gap:10px;align-content:start;padding:36px 24px 38px;border-left:1px solid var(--line)}
.prm li:first-child{border-left:0;padding-left:0}
.prm b{font:600 24px/1.15 var(--display);letter-spacing:-.02em}
.prm b:before{content:"";display:block;width:18px;height:3px;margin-bottom:18px;background:var(--yellow)}
.prm span{font-size:15px;color:var(--text)}

/* ---------- phone band ---------- */
.sec-call{padding:56px 0;background:#fff}
.call{display:flex;align-items:center;gap:28px;padding:32px 40px;border-radius:var(--r-tile);box-shadow:inset 0 0 0 1px var(--line);background:var(--paper)}
.call-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--n900);color:var(--yellow);flex:none}
.call-ic .ic{width:24px;height:24px}
.call-t{flex:1;min-width:0}
.call h2{font-size:30px;letter-spacing:-.02em}
.call p{margin-top:6px}
.call-n{font-size:30px;color:var(--ink);text-decoration:none;white-space:nowrap;padding:12px 4px;border-bottom:2px solid var(--yellow)}
.call-n:hover{color:var(--n600)}
.sec-promise+.sec-call{padding-top:0}

/* ---------- proof slot ---------- */
.qt{margin:0 auto;max-width:900px;text-align:center}
.qt blockquote{margin:0}
.qt p{font:500 36px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.qt p:before{content:"“"}.qt p:after{content:"”"}
.qt figcaption{display:flex;justify-content:center;gap:12px;margin-top:28px;font-size:15px}
.qt figcaption span{color:var(--muted)}

/* ---------- the walkthrough modal and the form ---------- */
.form label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:-8px}
.form-h{font-size:13px;color:var(--muted);margin-top:-8px}
.form .risk,.tone-dark .form .risk{margin-top:-4px;text-align:center;color:var(--muted)}
.bk-dlg{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:20px;background:#fff;color:var(--text);box-shadow:0 40px 80px -20px rgba(7,17,31,.55);overflow:auto}
.bk-dlg::backdrop{background:rgba(7,17,31,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bk-dlg .form{box-shadow:none;border-radius:0;padding:20px 32px 32px}
.bk-hd{position:relative;padding:32px 32px 0}
.bk-hd .eyebrow{margin-bottom:14px}
.bk-hd h2{font-size:28px;letter-spacing:-.02em;padding-right:36px}
.bk-hd p:not(.eyebrow){margin-top:10px;font-size:16px}
.bk-x{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px;background:var(--line-2);color:var(--ink);cursor:pointer}
.bk-x:hover{background:var(--line)}
.bk-dlg[open]{animation:dlg-in .22s cubic-bezier(.2,.7,.2,1)}
@keyframes dlg-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.bk-dlg.sent .form label,.bk-dlg.sent .form input:not([type=hidden]),.bk-dlg.sent .form-h,.bk-dlg.sent .form .btn,.bk-dlg.sent .form .risk{display:none}
.bk-dlg.sent .msg{font:600 18px/1.4 var(--display);color:var(--ink)}
html:has(.bk-dlg[open]){overflow:hidden}

/* ---------- sticky bar, footer contact ---------- */
.sticky .sticky-call{width:48px;padding:0}
.ftr-contact{display:grid;gap:8px}
.ftr-contact li{display:flex;align-items:center;gap:10px;color:var(--on-dark-2)}
.ftr-contact .ic{width:16px;height:16px;color:var(--yellow)}
.ftr-cols{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:44px}
.menu-g{min-width:380px;padding:12px 22px 14px}
.mg-hub{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 -12px 6px;padding:12px;border-radius:var(--r-btn);background:var(--paper);text-decoration:none}
.mg-hub b{display:block;font-size:15px;color:var(--ink)}
.mg-hub span span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.mg-hub .arr{width:16px;height:16px;color:var(--ink)}
.mg-hub:hover{background:var(--line-2)}

/* ---------- styleguide (v6 specimens) ---------- */
.sg-hint{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start}
.sg-hint>div{display:grid;gap:12px;min-width:0}
.sg-dark{padding:48px;border-radius:var(--r-tile);background:var(--n900)}
.sg-dark-h{padding:56px 72px 64px;border-radius:var(--r-tile);background:linear-gradient(180deg,var(--n950),var(--n900))}
.sg-modal-demo{position:relative;padding:48px;border-radius:var(--r-tile);background:rgba(7,17,31,.66)}
.sg-modal-demo .bk-dlg{position:static;display:block;margin:0 auto;animation:none}

/* ---------- header: the goals menu needs room, so the drawer takes over below 1240 ---------- */
@media (min-width:1061px) and (max-width:1239px){
  .hdr .nav{display:none;position:fixed;top:var(--hdr-bottom,var(--header));left:0;right:0;bottom:0;background:var(--n950);overflow-y:auto;overscroll-behavior:contain;padding:8px var(--gut) 40px}
  .hdr.open{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--n950)}
  .hdr.open .nav{display:block}
  .burger{display:grid}.login{display:none}
  .nav-l{display:block}.nav-i{border-bottom:1px solid var(--n700)}
  .nav-b,.nav-a{width:100%;height:56px;justify-content:space-between;padding:0;font-size:17px;color:#fff;border-radius:0}
  .nav-b:hover,.nav-a:hover,.nav-b[aria-expanded=true]{background:none}
  .nav-b.here,.nav-a[aria-current=page]{box-shadow:none;color:var(--yellow)}
  .menu{position:static;box-shadow:none;background:none;border:0;min-width:0;padding:0 0 16px}
  .ml b{color:#fff}.ml span{color:var(--on-dark)}.ml:hover{background:rgba(255,255,255,.06)}
  .nav-cta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
  .nav-cta .btn{width:100%}.nav-login{grid-column:1/-1;color:var(--on-dark-2);text-align:center;padding:8px}
}
@media (max-width:1239px){
  .mg-hub{background:rgba(255,255,255,.06)}.mg-hub b{color:#fff}.mg-hub span span{color:var(--on-dark)}.mg-hub .arr{color:var(--yellow)}
  .menu-g{min-width:0;padding:0 0 16px}
  .hdr .menu :focus-visible{outline-color:var(--focus-dark)}
}
@media (min-width:1240px){.hdr .menu :focus-visible{outline-color:var(--focus)}}
@media (max-width:1180px){.prm.n5{grid-template-columns:repeat(3,minmax(0,1fr))}.prm.n5 li:nth-child(4){border-left:0;padding-left:0}.prm.n5 li:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:1060px){
  .fh,.ct-pane{grid-template-columns:minmax(0,1fr);gap:48px}
  .ocs,.ocs.n4{grid-template-columns:minmax(0,1fr)}
  .oc{display:grid;grid-template-columns:44px 1fr;gap:4px 20px;padding:24px}.oc-ic{grid-row:span 2;margin:0}.oc p{margin-top:0}
  .xl{grid-template-columns:repeat(2,minmax(0,1fr))}.xl li:nth-child(3) a{padding-left:0}
  .hts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-hint{grid-template-columns:minmax(0,1fr)}
  .call{flex-wrap:wrap}.call-t{flex-basis:calc(100% - 84px)}.call-n{margin-left:84px}
  .ftr-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .ask{margin-top:28px}
  .hint-lg{font-size:13px}
  .hh{padding:0}
  .hh-phone,.hh-thread,.hh-calendar,.hh-truck,.hh-import{padding:0}
  .hh .ev-float{position:relative;inset:auto;right:auto;top:auto;bottom:auto;justify-items:stretch;display:grid;gap:8px;margin:-28px 14px 0;font-size:13px}
  .hh .ev-float .ev-c:nth-child(n){width:auto;margin-right:0}
  .hh .ev-float .ev-c:nth-child(2){margin-left:12%;margin-right:-6px}
  .hh .ev-float .ev-c:nth-child(3){display:none}
  .hero-art:has(.hh){margin-bottom:0}
  .sec-hero:has(.hh)+.sec{padding-top:var(--section)}
  .sec-fhero{padding:44px 0 56px}
  .fh-art{padding:32px 18px;border-radius:18px}
  .ct-list{justify-content:flex-start;width:auto;margin-bottom:32px}
  .ct-list button{padding:11px 16px;font-size:14px}
  .ct-copy h3{font-size:26px}
  .xl{grid-template-columns:minmax(0,1fr)}.xl li+li a,.xl li:nth-child(3) a{padding-left:0}
  .hts,.hts.n2,.hts.n4{grid-template-columns:minmax(0,1fr)}
  .hts.n2 .ht-art,.hts.n4 .ht-art{height:208px;padding:24px 24px 0}
  .hts.n2 .ht-art .hint-sm,.hts.n4 .ht-art .hint-sm{font-size:10.5px}
  .prm,.prm.n3,.prm.n4{grid-template-columns:minmax(0,1fr)}
  .prm li,.prm li:nth-child(4){padding:24px 0;border-left:0;border-top:1px solid var(--line)}
  .prm li:first-child{border-top:0}
  .prm b{font-size:22px}.prm b:before{margin-bottom:12px}
  .call{padding:24px;gap:16px}.call-ic{width:44px;height:44px}.call-t{flex-basis:calc(100% - 60px)}
  .call h2{font-size:24px}.call-n{margin-left:0;font-size:26px}
  .qt p{font-size:26px}
  .bk-hd{padding:24px 22px 0}.bk-dlg .form{padding:16px 22px 24px}.bk-hd h2{font-size:24px}
  .ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-dark,.sg-dark-h,.sg-modal-demo{padding:24px 16px}
}
/* /v6 */
/* X1 */
/* page agent x1: home, the four hubs, pricing. Shapes: words (home), seats, included, addons, askband (pricing);
   the hints_x1 drawings; five hub tiles in a 3 + 2 grid. */
.hts.n5{grid-template-columns:repeat(6,minmax(0,1fr))}
.hts.n5 li{grid-column:span 2}
.hts.n5 li:nth-child(-n+2){grid-column:span 3}
.hts.n5 li:nth-child(-n+2) .ht-art{height:236px;padding:32px 44px 0}
.hts.n5 li:nth-child(-n+2) .ht-art .hint-sm{font-size:12px}
.sec-tiles .ask{margin-top:48px}
/* seats: the team-size control */
.x1-seat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;max-width:960px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-tile);padding:40px 44px}
.x1-seat-in{display:grid;gap:14px}
.x1-seat-q{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.x1-seat-q label{font:600 18px/1.3 var(--display);color:var(--ink)}
.x1-ends{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.x1-seat-res{padding-left:44px;border-left:1px solid var(--line)}
.x1-seat-out{font:600 26px/1.35 var(--display);letter-spacing:-.015em;color:var(--ink)}
.x1-seat-out b{font-weight:600;background:linear-gradient(transparent 62%,var(--yellow) 62%,var(--yellow) 92%,transparent 92%)}
.x1-seat-note{margin-top:14px;color:var(--text)}
/* included: the reassurance list */
.x1-inc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;max-width:1040px;margin:0 auto;border-top:1px solid var(--line)}
.x1-inc li{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-weight:500;color:var(--ink)}
.x1-inc .ic{width:18px;height:18px;flex:none;color:var(--ok)}
.x1-inc-line{margin-top:32px;text-align:center;font-weight:600;color:var(--ink)}
/* add-ons as outcome cards */
.ocs.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;margin:0 auto}
.x1-ads .oc:first-child .oc-ic{background:var(--n900);color:#fff}
.x1-ad-p{margin-top:6px!important;font-size:15px;color:var(--muted)}
.x1-ad-p .num{font-size:18px;color:var(--ink)}
/* askband: terms line + mid-page ask on navy */
.x1-ab{max-width:760px;margin:0 auto;text-align:center}
.x1-terms{font:500 13px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:22px}
.x1-ab h2{color:#fff}
.x1-ab .lead{margin:14px auto 30px;color:var(--on-dark)}
/* hints_x1 drawings */
.x1-r{margin-left:auto}
.x1-pics{margin-top:.2em}
.x1-btn{display:block;margin-top:.4em;padding:.9em 1em;border-radius:.75em;background:var(--hy,var(--yellow));color:var(--hy-ink,var(--ink));font:600 .92em/1 var(--sans);text-align:center}
.x1-chart{display:flex;align-items:flex-end;gap:.9em;height:8.5em;padding-top:.4em;border-bottom:1px solid var(--line-2)}
.x1-col{flex:1;height:var(--h);border-radius:.35em .35em 0 0;background:#C9D2DE}
.x1-col.x1-on{background:var(--hy,var(--yellow))}
.x1-wk{height:6em;margin-bottom:.4em}
@media (max-width:1060px){
  .hts.n5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hts.n5 li,.hts.n5 li:nth-child(-n+2){grid-column:auto}
  .hts.n5 li:last-child{grid-column:1/-1}
  .x1-inc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .hts.n5{grid-template-columns:minmax(0,1fr)}
  .hts.n5 li:last-child{grid-column:auto}
  .hts.n5 li:nth-child(-n+2) .ht-art{height:208px;padding:24px 24px 0}
  .hts.n5 li:nth-child(-n+2) .ht-art .hint-sm{font-size:10.5px}
  .x1-seat{grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 22px}
  .x1-seat-res{padding:24px 0 0;border-left:0;border-top:1px solid var(--line)}
  .x1-seat-out{font-size:22px}
  .x1-inc{grid-template-columns:minmax(0,1fr)}
  .ocs.n2{grid-template-columns:minmax(0,1fr)}
}
/* /X1 */
/* X3 (switching and company pages, branch x3) */
.x3-ask{margin-top:48px}
#table .cg-n{display:none}
.x3-ask .ask{margin-top:0}
.sec-foot{padding:0 0 56px}
.sec-foot .checked{margin-top:0}
.x3-bring{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-block:1px solid var(--line)}
.x3-bring.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.x3-bring li{display:grid;gap:18px;align-content:start;padding:32px 24px;border-left:1px solid var(--line)}
.x3-bring li:first-child{border-left:0;padding-left:0}
.x3-bring b{font:600 19px/1.3 var(--display);letter-spacing:-.01em}
.x3-b-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--line-2);color:var(--ink)}
.x3-b-ic .ic{width:22px;height:22px}
.x3-incl{display:flex;flex-wrap:wrap;gap:12px}
.x3-incl li{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;font-size:16px;font-weight:500;background:#fff}
.x3-incl .ic{width:16px;height:16px;color:var(--ok);flex:none}
.sec-incl .hd{margin-bottom:36px}
.x3-fine{margin-top:4px;font-size:14px;color:var(--muted)}
.form .x3-fine{color:var(--muted)}
@media (max-width:1060px){
  .x3-bring{grid-template-columns:repeat(3,minmax(0,1fr))}
  .x3-bring li:nth-child(4){border-left:0;padding-left:0}
  .x3-bring li:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .x3-ask{margin-top:36px}
  .x3-bring{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x3-bring li{padding:24px 16px}
  .x3-bring li:nth-child(n){border-left:1px solid var(--line);padding-left:16px;border-top:1px solid var(--line)}
  .x3-bring li:nth-child(odd){border-left:0;padding-left:0}
  .x3-bring li:nth-child(-n+2){border-top:0}
  .x3-bring b{font-size:17px}
  .x3-incl{gap:8px}.x3-incl li{font-size:15px;padding:8px 14px}
  .sec-foot{padding-bottom:40px}
}
/* /X3 */

/* X2: feature and role page drawings (tools/site/pages/_x2art.py) and the role-page promise list */
.x2-ls{display:grid}
.x2-r{display:flex;align-items:center;justify-content:space-between;gap:.7em;padding:.78em 0;border-top:1px solid var(--line-2);font-size:.88em;color:var(--ink)}
.x2-r:first-child{border-top:0}
.x2-l{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.x2-v{flex:none;display:flex;justify-content:flex-end;min-width:3.6em}
.x2-v .hb{width:3.4em}
.x2-on{margin:0 -.7em;padding:.78em .7em;border-radius:.6em;border-top-color:transparent;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.x2-on+.x2-r{border-top-color:transparent}
.x2-on .x2-v .num{padding:.35em .6em;border-radius:.45em;background:var(--hy,var(--yellow));color:var(--hy-ink,var(--ink));font-weight:600}
.x2-mk{display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;flex:none;font:700 .8em/1 var(--sans)}
.x2-mk-ic{background:var(--line-2);color:var(--ink)}.x2-mk-ic .ic{width:.9em;height:.9em}
.x2-mk-warn{background:#FBF1DD;color:var(--warn)}
.x2-mk-dot{width:.55em;height:.55em;margin:0 .45em;background:#CAD2DD}
.x2-p{font:600 .78em/1 var(--sans);padding:.45em .7em;border-radius:99px;background:var(--line-2);color:var(--ink);white-space:nowrap}
.x2-p-ok{background:#E3F2EB;color:#0B6B4A}.x2-p-warn{background:#FBF1DD;color:var(--warn)}.x2-p-bad{background:#FBE7E5;color:var(--bad)}
.x2-f{display:flex;align-items:center;gap:.5em;margin-top:.9em;padding-top:.85em;border-top:1px solid var(--line-2);font:500 .76em/1.2 var(--mono);color:var(--muted)}
.x2-f .ic{width:1.05em;height:1.05em}
.x2 .hpill{display:inline-flex;align-items:center;gap:.35em}.x2 .hpill .ic{width:1em;height:1em}
/* board variants */
.bk-late{background:#FBF1DD;border-color:var(--warn);color:var(--warn);box-shadow:inset 0 0 0 1px #E9CC8E}
.bk-hold{background:repeating-linear-gradient(-45deg,#F5F7FA 0 .35em,#E6EAF0 .35em .7em);border-color:#A9B6CA;border-left-style:dashed}
.x2-tag{font:600 .72em/1 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-hold .x2-tag{color:var(--muted)}
/* bars against each other: costing, lead sources */
.x2-cs{display:grid;gap:1em}
.x2-cr{display:grid;grid-template-columns:6.8em minmax(0,1fr) 4.4em;gap:.8em;align-items:center}
.x2-cr>:last-child{justify-self:end}
.x2-cl{font:500 .7em/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.x2-cb{display:block;height:.75em;border-radius:99px;background:var(--line-2);overflow:hidden}
.x2-cb i{display:block;height:100%;width:var(--w);border-radius:inherit;background:#A9B6CA}
.x2-cr-on .x2-cb i,.x2-src .x2-sr:first-child .x2-cb i{background:var(--hy,var(--yellow))}
.x2-cr-on .num{font-size:1.15em;font-weight:600;color:var(--ink)}
.x2-cs-f{display:grid;gap:.6em;margin-top:1.3em;padding-top:1.1em;border-top:1px solid var(--line-2)}
.x2-sr{display:grid;grid-template-columns:6em minmax(0,1fr);gap:.8em;align-items:center}
/* payment link, heater, inbox, visit, review */
.x2-pay{display:flex;justify-content:space-between;align-items:center;margin-top:1em;padding:.95em 1em;border-radius:.65em;background:var(--hy,var(--yellow));color:var(--hy-ink,var(--ink));font:600 .9em/1 var(--sans)}
.x2-ht{display:flex;align-items:baseline;gap:.7em;margin:-.3em 0 .5em}
.x2-ht-l{font:500 .7em/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.x2-ht-v{font-size:2.3em;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.x2-av{width:2.1em;height:2.1em;background:var(--line-2)}
.x2-two{display:grid;gap:.45em}
.x2-unread{width:.62em;height:.62em;border-radius:50%;background:var(--hy,var(--yellow));flex:none}
.x2-who{display:flex;align-items:center;gap:.6em;margin-bottom:1em}.x2-who .hb{width:7em}
.x2-sts{list-style:none;margin:0;padding:0;display:grid;gap:.8em}
.x2-st{display:flex;align-items:center;gap:.7em;font-size:.88em;color:var(--ink)}
.x2-st i{width:1.15em;height:1.15em;border-radius:50%;box-shadow:inset 0 0 0 .14em #C3CBD6;flex:none}
.x2-st-done i{background:var(--ok);box-shadow:none}
.x2-st-now i{background:var(--hy,var(--yellow));box-shadow:0 0 0 .3em var(--yellow-soft)}
.x2-st-now span{font-weight:600}
.x2-st .hb{width:6em}
.x2-stars{display:flex;gap:.3em;margin-bottom:1em}
.x2-star .ic{width:1.7em;height:1.7em;color:var(--hy,var(--yellow));fill:currentColor}
/* matches, photos, signature */
.x2-mr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) 4.4em;gap:.6em}
.x2-mr>:last-child{justify-self:end}
.x2-ph{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5em}
.x2-ph i{position:relative;aspect-ratio:1;border-radius:.5em;background:#E6EAF0}
.x2-mk-up b{position:absolute;inset:24%;border:.18em solid var(--hy,var(--yellow));border-radius:50%}
.x2-sig{display:grid;gap:.6em;margin-top:1.3em}
.x2-sig-l{position:relative;display:block;height:2.6em;border-bottom:1.5px solid var(--ink)}
.x2-sig-l:before{content:"";position:absolute;left:6%;bottom:.3em;width:38%;height:1.6em;border:2px solid var(--ink);border-color:var(--ink) transparent transparent;border-radius:50%;transform:rotate(-8deg)}
.x2-sig-l:after{content:"";position:absolute;left:38%;bottom:.5em;width:18%;height:1.1em;border:2px solid var(--ink);border-color:transparent transparent var(--ink);border-radius:50%}
/* event cards as a tab drawing */
.x2-ev{display:grid;place-items:center;padding:1em 0}
.x2-ev .ev{width:100%;max-width:24em}
.x2-ev .ev-c{box-shadow:0 0 0 1px rgba(12,31,58,.08),0 1.2em 2.4em -1.2em rgba(12,31,58,.3)}
.x2-ev .ev-c:nth-child(2){margin-left:2.4em;margin-right:-1em}
/* role pages: five promises, each with a small hint */
.x2-rp{list-style:none;margin:0 auto;padding:0;max-width:1040px;display:grid;gap:16px}
.x2-rp a{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:center;gap:48px;padding:16px;border-radius:var(--r-tile);box-shadow:inset 0 0 0 1px var(--line);background:#fff;color:inherit;text-decoration:none;transition:box-shadow .2s}
.x2-rp a:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.x2-rp li:nth-child(even) a{grid-template-columns:minmax(0,1fr) 320px}
.x2-rp li:nth-child(even) .x2-rp-art{order:2}
.x2-rp li:nth-child(even) .x2-rp-t{padding-left:24px}
.x2-rp-art{display:flex;align-items:center;justify-content:center;min-height:196px;padding:20px 32px;border-radius:12px;background:var(--paper);overflow:hidden;--hy:var(--n800);--hy-ink:#fff}
.x2-rp li:first-child .x2-rp-art{--hy:var(--yellow);--hy-ink:var(--ink)}
.x2-rp-art .hint-sm{font-size:12.5px;max-width:100%}
.x2-rp-t b{display:block;font:600 26px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.x2-rp-go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:500 15px/1 var(--sans);color:var(--muted)}
.x2-rp a:hover .x2-rp-go{color:var(--ink)}
.sec-x2rp .ask{margin-top:56px}
.x2-sec{margin-top:20px}
.x2-sec a{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:500}
@media (max-width:760px){
  .x2-rp a,.x2-rp li:nth-child(even) a{grid-template-columns:minmax(0,1fr);gap:20px;padding:12px 12px 20px}
  .x2-rp li:nth-child(even) .x2-rp-art{order:0}
  .x2-rp li:nth-child(even) .x2-rp-t{padding-left:8px}
  .x2-rp-t{padding:0 8px}
  .x2-rp-art{min-height:0;padding:18px 20px}
  .x2-rp-t b{font-size:21px}
  .x2-ev .ev-c:nth-child(2){margin-left:1.2em;margin-right:0}
}
/* /X2 */

/* X4: drawings at three real words (ruler ticks, calendar without letters or day numbers, checks in place of labels) */
.br-ruler .tick{width:1px;height:.55em;background:#CAD2DD}
.cw .hb{height:.32em;margin:.6em auto}
.cd-dot{display:block;width:.36em;height:.36em;border-radius:50%;background:#CAD2DD}
.cd-on .cd-dot{background:#fff}
.cd-x .cd-dot{background:#E6EAF0}
.op-tag{display:grid;place-items:center;padding:.3em}
.op-tag .ic{width:1.1em;height:1.1em;stroke-width:3}
.hb-ink{background:currentColor;opacity:.35}
.ph-next .hb{flex:none}
.tt-m .ic{width:1.1em;height:1.1em;color:var(--ok);stroke-width:2.6}
.cal-b .hb{margin:0 auto}
.ftr-bare a{text-decoration:underline;text-underline-offset:2px}
/* X4: outcome and add-on cards on phones keep every line in the text column (add-on cards carry a price line too) */
@media (max-width:1060px){.oc>:not(.oc-ic){grid-column:2}.oc-ic{grid-row:span 3}}
.nw{white-space:nowrap}
/* legal pages (launch) */
.sec-legal .legal{max-width:720px}
.legal-upd{color:var(--mute,#5b6676);font-size:14px;margin:0 0 24px}
.legal h2{font-size:22px;line-height:1.25;margin:36px 0 10px}
.legal p,.legal li{font-size:16px;line-height:1.65;margin:0 0 12px}
.legal ul{padding-left:20px;margin:0 0 12px}
.legal a{color:inherit;text-decoration:underline}
.legal ul{list-style:disc}.legal li{display:list-item}