/* ═══════════════════════════════════════════════════════════════════
   CarinaOS marketing site — shared design system
   Loaded by every page in sites/marketing/. Page-specific rules stay
   in that page's own <style> block.

   CloudFront is invalidated on every deploy (/*), so this file needs
   no cache-busting query string — just edit and push to staging.

   COLOR NOTE: --gold (#c8a84b) is for FILLS only. On white it is
   ~2.2:1 and fails contrast, so gold-as-text must use --gold-ink.
   ═══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg{max-width:100%}

:root{
  --ink:#0d1627;          /* headings */
  --body:#0d1627;         /* body copy = INK. Never fade reading text. */
  --muted:#4b5566;        /* LABELS AND CHROME ONLY — table <th>, eyebrows,
                             chip codes, frame captions. NEVER reading text. */
  --line:#e6e9f0;
  --line2:#d5dae4;
  --bg:#ffffff;
  --bg2:#eff3f9;
  --bg3:#eef1f6;
  --navy:#0d1627;
  --navy2:#152340;
  --gold:#c8a84b;         /* fills / accents only */
  --gold-ink:#7a5f1c;     /* gold as TEXT on white — ~6.0:1 (was #8a6d20, 4.9:1) */
  --gold-soft:#fdfaf1;
  --gold-line:#e8dab4;   /* chip border — gold at low saturation, reads on white AND tint */
  --green:#0f5f41;        /* ~7.7:1 on white, ~6.9:1 on the soft tint */
  --green-soft:#edf8f3;
  --blue:#24528f;
  --display:'Bebas Neue',sans-serif;   /* wordmark ONLY — never headings */
  --sans:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:1180px;
  --shadow:0 1px 2px rgba(13,22,39,.04),0 8px 24px -12px rgba(13,22,39,.14);
  --shadow-lg:0 2px 4px rgba(13,22,39,.04),0 24px 60px -20px rgba(13,22,39,.24);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--body);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1,h2,h3,h4{color:var(--ink);font-weight:600;line-height:1.18;letter-spacing:-.015em;
  text-wrap:balance}          /* even line lengths, no stranded last word */
.lede,.hero-sub,.card-desc,p{text-wrap:pretty}   /* kills orphans; ignored where unsupported */

/* ── layout ─────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.sec{padding:92px 0}
.sec-tight{padding:64px 0}
.tint{background:var(--bg2)}
.rule{border-top:1px solid var(--line2)}
/* Section kicker. Sized against .h2 at roughly 1:2, the same relationship the
   hero uses, so a section reads kicker -> headline instead of the headline
   swallowing the line above it. Tracking is .11em, not .14em — .14em is set
   for ~12px type and reads as scattered capitals once the size goes up.
   NB: component labels (.vs-h, .toc-label, .prod .kind, .prob-h) deliberately
   stay small — they label a box, they don't lead a section. */
.eyebrow{display:inline-block;font-size:17px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;line-height:1.2;color:var(--gold-ink);background:var(--gold-soft);
  border:1px solid var(--gold-line);border-radius:999px;padding:7px 16px;margin-bottom:18px}
/* NB: .tm is already taken by the state-map tiles (aspect-ratio:1, display:flex),
   which squashed the mark to an invisible square. Hence .tmark. */
.eyebrow .tmark{font-size:.72em;letter-spacing:normal;font-weight:600;vertical-align:.3em;margin-left:2px}
/* inline-block so the chip hugs its text; centred section heads still centre it,
   and the h2 after it is a block so it starts a new line either way. */
.on-dark .eyebrow,.eyebrow.on-dark{color:var(--gold);background:rgba(200,168,75,.13);
  border-color:rgba(200,168,75,.42)}
.h2{font-size:clamp(26px,2.8vw,34px);margin-bottom:10px}
.lede{font-size:17.5px;color:var(--body);max-width:62ch}
.sec-head{margin-bottom:40px}
.sec-head.center{text-align:center}
.sec-head.center .lede{margin-left:auto;margin-right:auto}

/* ── brand lockups ──────────────────────────────────────── */
.os{color:var(--gold-ink);font-weight:600}
.on-dark .os{color:var(--gold)}
.gowm{font-family:var(--display);letter-spacing:.05em;color:var(--ink);
  display:inline-flex;align-items:center;white-space:nowrap;font-weight:400}
.gowm .os{color:var(--gold-ink);font-weight:400}
.gowm .go-pill{font-family:var(--display);letter-spacing:.06em;color:#fff;background:var(--ink);
  border-radius:4px;padding:.06em .34em .02em;margin-left:.38em;line-height:1;font-size:.8em}
.on-dark .gowm{color:#fff}
.on-dark .gowm .os{color:var(--gold)}
.on-dark .gowm .go-pill{background:var(--gold);color:var(--navy)}

/* ── buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:15px;font-weight:600;text-decoration:none;border-radius:6px;
  padding:10px 20px;border:1px solid transparent;transition:all .15s;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#1b2740}
.btn-outline{border-color:var(--line2);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--ink)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:#d6b95f}
.btn-lg{padding:13px 26px;font-size:16.5px}
.btn-onnavy{background:#fff;color:var(--navy)}
.btn-onnavy:hover{background:#f0f2f7}
.btn-ghost-navy{border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost-navy:hover{border-color:#fff}

/* ── status pills ───────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:4px;border:1px solid}
.pill-live{color:var(--green);background:var(--green-soft);border-color:#c6e4d7}
.pill-beta{color:var(--blue);background:#eaf1fb;border-color:#c9dbf4}
.pill-soon{color:var(--muted);background:var(--bg3);border-color:var(--line2)}
.pill-erp{color:var(--gold-ink);background:var(--gold-soft);border-color:#ecdcae}

/* ── nav ────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:100;color:rgba(255,255,255,.74);background:rgba(13,22,39,.95);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid rgba(255,255,255,.09)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 32px;height:58px;
  display:flex;align-items:center;gap:30px}
.nav-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
.nav-logo svg{width:26px;height:26px}
.nav-wordmark{font-family:var(--display);font-size:23px;letter-spacing:.05em;color:#fff}
.nav-wordmark em{color:var(--gold);font-style:normal}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{font-size:15.5px;font-weight:500;color:rgba(255,255,255,.74);text-decoration:none;transition:color .15s;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:#fff}
.nav-links a.on{font-weight:600}
/* The one nav item that is not simply another page: a product still in beta,
   and said so in the nav rather than discovered on arrival. Gold because the
   site already spends gold on "this is the thing" — the logo and the CTA — and
   a second accent here would just be noise. */
/* The spacing lives on the TAG, not on a flex parent. The mobile sheet's links
   are direct children of the sheet with no wrapper to hang a rule on, so a
   parent-based gap silently did nothing there and it read as one word:
   "ERPBeta". A margin on the badge itself works wherever the badge is put. */
.nav-tag{display:inline-block;vertical-align:2px;margin-left:8px;
  font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(200,168,75,.45);border-radius:999px;
  padding:2px 6px 1px;line-height:1}
a:hover > .nav-tag{border-color:var(--gold);background:rgba(200,168,75,.16)}
.nav-sp{flex:1}
.nav-act{display:flex;gap:18px;align-items:center;flex-shrink:0}
.nav-act .signin{font-size:15.5px;font-weight:500;color:rgba(255,255,255,.74);text-decoration:none;white-space:nowrap}
.nav-act .signin:hover{color:#fff}
/* the nav sits on navy, so its CTA, burger and GO lockup flip to the
   light-on-dark set — .gowm defaults to dark ink and would vanish here */
nav .gowm,.mobile-sheet .gowm{color:#fff}
nav .gowm .os,.mobile-sheet .gowm .os{color:var(--gold)}
nav .gowm .go-pill,.mobile-sheet .gowm .go-pill{background:var(--gold);color:var(--navy)}
.nav-act .btn-primary{background:var(--gold);color:var(--navy)}
.nav-act .btn-primary:hover{background:#d6b95f}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.28);border-radius:6px;
  width:38px;height:34px;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
.burger i{display:block;width:16px;height:1.5px;background:#fff}
/* NB: the sheet is a SIBLING of <nav>, not a child — it needs its own light
   color or it inherits --body and renders dark-on-dark. */
/* Full height below the nav, not auto — an auto-height sheet ends after its
   buttons and the page shows through underneath it, which reads as broken.
   Scrolls internally if the links ever outgrow a short viewport. */
.mobile-sheet{display:none;position:fixed;inset:58px 0 0;z-index:99;overflow-y:auto;
  color:rgba(255,255,255,.86);background:var(--navy);
  padding:14px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg)}
.mobile-sheet.open{display:block}
body.sheet-open{overflow:hidden}
.mobile-sheet a{display:block;padding:12px 0;font-size:17px;font-weight:500;color:rgba(255,255,255,.86);
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-sheet .ms-act .btn-outline{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);color:#fff}
.mobile-sheet .ms-act .btn-outline:hover,
.mobile-sheet .ms-act .btn-outline:active{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4)}
.mobile-sheet .ms-act .btn-primary{background:var(--gold);color:var(--navy)}
.mobile-sheet .ms-act{display:flex;gap:10px;margin-top:18px}
/* `.mobile-sheet a` sets display:block and its own padding, and at (0,1,1) it
   outranks `.btn` (0,1,0) — so the buttons lost inline-flex and their labels
   sat left-aligned against the edge. Restore the button box explicitly. */
.mobile-sheet .ms-act .btn{flex:1;display:inline-flex;align-items:center;
  justify-content:center;text-align:center;padding:13px 16px;border-bottom:none}

/* ── hero (base — pages override the grid ratio) ────────── */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center}
.hero-h1{font-size:clamp(32px,3.6vw,45px);line-height:1.08;letter-spacing:-.025em;margin-bottom:16px}
.hero-h1 em{font-style:normal;color:var(--gold-ink)}
.hero-sub{font-size:18.5px;line-height:1.6;color:var(--body);max-width:52ch;margin-bottom:22px}
/* the closing sentence carries the positioning, so it takes ink weight rather than the default browser bold */
.hero-sub b{color:var(--ink);font-weight:600}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.hero-note{font-size:14.5px;color:var(--body)}
.hero-note b{color:var(--ink);font-weight:600}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}

/* ── browser frame for screenshots ──────────────────────── */
.frame{border:1px solid var(--line2);border-radius:9px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg)}
.frame-bar{height:28px;background:var(--bg2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 11px;gap:5px}
.frame-bar i{width:8px;height:8px;border-radius:50%;background:#d4d9e3;display:block}
.frame-bar span{margin-left:10px;font-size:12px;color:var(--muted)}
.frame img{display:block;width:100%;height:auto}

/* ── device mock-up stack ────────────────────────────────────
   Phones sit staggered and slightly rotated rather than in a flat row: the
   front device is larger and square-on, the one behind is offset, smaller and
   tilted. Carried over from the previous design, which read better than a row
   of parallel screenshots. */
.phonestack{position:relative;display:flex;justify-content:center;align-items:flex-end;
  width:100%;max-width:460px;margin:0 auto;min-height:500px}
.device{border:2px solid #1d2c4a;border-radius:34px;padding:5px;background:#04070f;
  box-shadow:0 26px 60px -18px rgba(13,22,39,.45),0 0 0 1px rgba(200,168,75,.10)}
.device img{border-radius:29px;width:100%;display:block}
.phonestack .d1{width:250px;position:relative;z-index:2}
.phonestack .d2{width:210px;position:absolute;right:2%;bottom:6%;z-index:1;
  opacity:.92;transform:rotate(4deg)}
/* three-up: front centred, the other two fanned out behind it */
.phonestack.trio{max-width:520px}
.phonestack.trio .d1{width:224px;z-index:3}
.phonestack.trio .d2{width:186px;position:absolute;left:0;bottom:7%;z-index:1;
  opacity:.9;transform:rotate(-5deg)}
.phonestack.trio .d3{width:186px;position:absolute;right:0;bottom:7%;z-index:2;
  opacity:.9;transform:rotate(5deg)}
/* deeper shadow where the stack sits on the navy band */
#go .device{box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(200,168,75,.10)}

@media(max-width:900px){
  .phonestack{min-height:430px}
  .phonestack .d1{width:210px}
  .phonestack .d2{width:176px}
  .phonestack.trio .d1{width:190px}
  .phonestack.trio .d2,.phonestack.trio .d3{width:156px}
}
@media(max-width:600px){
  .phonestack{min-height:360px;max-width:100%}
  .phonestack .d1{width:min(178px,50%)}
  .phonestack .d2{width:min(150px,42%);right:4%}
  .phonestack.trio .d1{width:min(160px,45%)}
  /* inset the fanned pair so the rotated corners stay inside the card */
  .phonestack.trio .d2,.phonestack.trio .d3{width:min(126px,35%)}
  .phonestack.trio .d2{left:3%}
  .phonestack.trio .d3{right:3%}
  .device{border-radius:26px;padding:4px}
  .device img{border-radius:22px}
}

/* ── generic card ───────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px;box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s ease,border-color .22s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold-line)}
/* Cards are the main hoverable surface; .plan gets the same so pricing doesn't
   feel dead next to it. Motion is suppressed for anyone who asked for less. */
.plan{transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s ease,border-color .22s ease}
.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold-line)}
@media(prefers-reduced-motion:reduce){
  .card,.plan{transition:box-shadow .22s ease,border-color .22s ease}
  .card:hover,.plan:hover{transform:none}
}
.card-ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.card h3{font-size:19px;margin-bottom:6px}
.card-desc{font-size:15.5px;color:var(--body);margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.card li{font-size:15px;line-height:1.55;color:var(--body);padding-left:17px;position:relative}
.card li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.card li b{color:var(--ink);font-weight:600}

/* ── two-column split with numbered steps ───────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.split h3{font-size:22px;margin-bottom:10px}
.split p{margin-bottom:14px}
.split p b{color:var(--ink);font-weight:600}
.steps-num{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.sn{display:flex;gap:14px;align-items:flex-start}
.sn-n{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--gold-soft);border:1px solid #ecdcae;
  color:var(--gold-ink);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.sn-t{font-size:15.5px;color:var(--body)}
.sn-t b{color:var(--ink);font-weight:600}

/* ── stat row ───────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:9px;overflow:hidden}
.stat{background:#fff;padding:20px 22px}
.stat-n{font-size:25px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.stat-l{font-size:14.5px;color:var(--body);margin-top:2px}

/* ── status chips (coverage / states) ───────────────────── */
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:26px;font-size:14.5px;color:var(--body)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-live{background:var(--green)}
.dot-soon{background:#b9c0cd}
.dot-none{background:#fff;border:1.5px solid #b9c0cd}
.cov-block{margin-bottom:26px}
.cov-h{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:3px;display:flex;align-items:center;gap:8px}
.cov-note{font-size:15px;color:var(--body);margin-bottom:12px;max-width:70ch}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;color:var(--body);
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px 11px;white-space:nowrap}
.chip.live{border-color:#c6e4d7;background:#fbfefd;color:var(--ink);font-weight:500}
.chip .code{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.cov-foot{border-top:1px solid var(--line);padding-top:18px;margin-top:4px;font-size:15px;color:var(--body)}
.cov-foot b{color:var(--ink);font-weight:600}

/* ── pricing cards ──────────────────────────────────────── */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px;margin:0 auto;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:11px;padding:26px;
  display:flex;flex-direction:column;box-shadow:var(--shadow)}
.plan.featured{border-color:var(--gold);
  box-shadow:0 2px 4px rgba(13,22,39,.04),0 20px 50px -22px rgba(138,109,32,.35)}
.plan-n{font-size:16.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
.plan-p{font-size:40px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1}
/* <sup> already applies vertical-align:super; adding `top` on top of that
   double-lifts the glyph so it floats above the digits. Neutralise the
   super and place it once, at the digits' cap height. */
.plan-p sup{font-size:.5em;font-weight:600;vertical-align:baseline;
  position:relative;top:-.72em;margin-right:.03em}
.plan-p span{font-size:14.5px;font-weight:500;color:var(--muted);letter-spacing:0}
.plan-d{font-size:15px;color:var(--body);margin:9px 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:20px;flex:1}
.plan li{font-size:15px;line-height:1.55;color:var(--body);padding-left:21px;position:relative}
.plan li::before{content:'';position:absolute;left:1px;top:6px;width:9px;height:5px;
  border-left:1.8px solid var(--green);border-bottom:1.8px solid var(--green);transform:rotate(-45deg)}
.plan li b,.plan li strong{color:var(--ink);font-weight:600}
.plan-foot{font-size:14px;color:var(--body);text-align:center;margin-top:11px;line-height:1.55}
.plan-foot a{color:var(--gold-ink);font-weight:600}
/* The footer under a plan CTA was three long centred sentences that wrapped into
   a block of text — the reader had to parse prose to find two numbers. Split into
   a lead, a two-row rate ladder, and a link line: one idea per row, prices right
   aligned so they can be compared down the column rather than read out of a
   sentence. */
.pf-lead{font-weight:600;color:var(--ink)}
.pf-rates{max-width:280px;margin:10px auto;text-align:left;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pf-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:6px 2px}
.pf-row+.pf-row{border-top:1px solid var(--line)}
.pf-row span{color:var(--body)}
.pf-row b{color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.pf-row b i{font-style:normal;font-weight:400;font-size:12px;color:var(--muted)}
.pf-links{font-size:13px;color:var(--muted)}
.price-note{max-width:860px;margin:24px auto 0;text-align:center;font-size:15.5px;color:var(--body);
  border-top:1px solid var(--line);padding-top:20px}
.price-note b{color:var(--ink);font-weight:600}

/* ── FAQ accordion ──────────────────────────────────────── */
.faq{max-width:800px;margin:0 auto;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.faq details{border-bottom:1px solid var(--line);background:#fff}
.faq details:last-child{border-bottom:none}
.faq summary{padding:16px 20px;font-size:16.5px;font-weight:600;color:var(--ink);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:21px;font-weight:400;color:var(--muted);flex-shrink:0}
.faq details[open] summary::after{content:'\2212'}
.faq .ans{padding:0 20px 18px;font-size:15.5px;color:var(--body);line-height:1.65;max-width:72ch}
.faq .ans b{color:var(--ink);font-weight:600}

/* ── closing CTA + footer ───────────────────────────────── */
#cta{background:var(--navy2);color:rgba(255,255,255,.8);text-align:center}
#cta h2{color:#fff;font-size:clamp(27px,3.1vw,37px);margin-bottom:10px}
#cta p{font-size:17px;margin-bottom:22px}
#cta p b{color:#fff;font-weight:600}
.cta-btns{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
footer{background:var(--navy);color:rgba(255,255,255,.6);padding:44px 0 28px;font-size:15px}
.f-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:32px;padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.f-h{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:12px}
.f-col a{display:block;color:rgba(255,255,255,.72);text-decoration:none;margin-bottom:8px}
.f-col a:hover{color:#fff}
.f-blurb{max-width:34ch;line-height:1.6;margin-top:12px;color:rgba(255,255,255,.55)}
.f-social{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  color:rgba(255,255,255,.6);text-decoration:none;font-size:14px}
.f-social:hover{color:#fff}
.f-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;
  font-size:13.5px;color:rgba(255,255,255,.45)}
.f-legal{font-size:14.5px;color:var(--body);margin-top:18px;max-width:80ch}

/* ── responsive ─────────────────────────────────────────── */
/* Between the 980px mobile cut and roughly 1200px there was no breakpoint at
   all, so seven links, the logo, Sign in and the CTA had to share a bar that
   could not hold them — the flex row shrank until "Sign in" wrapped to two
   lines. Tighten the gaps and drop a point of type across that band; the
   content then fits with room to spare instead of overflowing. */
@media(min-width:981px) and (max-width:1200px){
  .nav-in{gap:18px;padding:0 22px}
  .nav-links{gap:15px}
  .nav-links a,.nav-act .signin{font-size:14.5px}
  .nav-wordmark{font-size:21px}
  .nav-act{gap:13px}
  .nav-act .btn{padding:9px 15px;font-size:14.5px}
}
@media(max-width:980px){
  .nav-links{display:none}
  .burger{display:flex}
  .hero-grid,.split{grid-template-columns:1fr;gap:32px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:760px){
  .nav-act .signin{display:none}
  .nav-act .btn{padding:8px 13px;font-size:14px}
  .nav-wordmark{font-size:21px}
}
/* Small phones (SE-class, 320px): logo + CTA + burger stop fitting on one row,
   so tighten every part of the bar rather than dropping the CTA — it is the
   primary conversion target and lives above the fold. */
@media(max-width:400px){
  .nav-in{gap:10px;padding:0 14px}
  .nav-logo{gap:6px}
  .nav-logo svg{width:22px;height:22px}
  .nav-wordmark{font-size:19px}
  .nav-act{gap:8px}
  .nav-act .btn{padding:7px 10px;font-size:13.5px}
  .burger{width:34px;height:31px}
}
@media(max-width:600px){
  .wrap,.nav-in{padding:0 20px}
  .sec{padding:60px 0}
  .stats{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}

  /* Phones sit a notch above the desktop 17px base — at arm's length on a
     small screen the desktop scale reads cramped. Small meta text is lifted
     furthest, since that is what was hardest to read. Keep every value here
     >= its desktop counterpart; when the desktop scale moves, move these too
     or phones silently end up with smaller type than a 27" display. */
  body{font-size:17.5px;line-height:1.6}
  .lede{font-size:17.5px}
  .h2{font-size:27px}
  .hero-h1{font-size:31px;line-height:1.14}
  .hero-sub{font-size:18px}
  .hero-note{font-size:15px}
  .eyebrow{font-size:15px;padding:6px 13px;margin-bottom:15px}
  .card h3{font-size:19px}
  .card-desc{font-size:16px}
  .card li,.plan li{font-size:16px}
  .plan-d{font-size:16px}
  .plan-foot{font-size:15px}
  .stat-l{font-size:15px}
  .chip{font-size:15px;padding:8px 13px}
  .cov-note,.cov-h{font-size:15px}
  .legend{font-size:15px;gap:12px}
  .faq summary{font-size:17px;padding:16px}
  .faq .ans{font-size:16px;padding:0 16px 18px}
  .f-blurb,.f-col a,.f-bot{font-size:15px}
  .btn{font-size:16px;padding:11px 20px}
  .btn-lg{font-size:17px;padding:14px 24px}
}


/* ── scroll reveal ───────────────────────────────────────────
   Progressive enhancement, deliberately: the hidden state is scoped to
   .js-reveal, which reveal.js only sets once it knows IntersectionObserver
   exists and motion is welcome. With JS off, blocked, or reduced-motion set,
   none of this applies and every section renders normally — a reveal effect
   must never be able to leave content invisible. */
.js-reveal .reveal{opacity:0;transform:translateY(14px);will-change:opacity,transform}
/* ledger rows sit inside a bordered card, so they slide a shorter distance and
   settle faster than a whole section would */
.js-reveal .led-r.reveal{transform:translateY(7px)}
.js-reveal .led-r.reveal.in{transition-duration:.42s}
.js-reveal .reveal.in{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}


/* ── focus ───────────────────────────────────────────────────
   There were no focus styles at all, so keyboard users got nothing — and the
   hover states added alongside this made the gap worse, giving pointer users
   feedback that tabbing never produced. :focus-visible only, so a mouse click
   does not leave a ring behind on buttons.
   The nav, footer and dark bands need the bright --gold; --gold-ink is a text
   colour tuned for white and effectively disappears on navy. */
:where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--gold-ink);outline-offset:2px;border-radius:4px}
.btn:focus-visible{outline-offset:3px}
nav :where(a,button):focus-visible,
footer :where(a,button):focus-visible,
.on-dark :where(a,button):focus-visible,
#cta :where(a,button):focus-visible{outline-color:var(--gold)}
/* The mobile sheet sits on navy too */
.mobile-sheet a:focus-visible{outline-color:var(--gold)}