/* ═══════════════════════════════════════════════════════════════
   TRADEdraft — Marketing site · clean rebuild (v160)
   Brand-locked: Blueprint Navy #002147 · Oxidised Brass #C5A059
   Newsreader · Space Grotesk · DM Sans · IBM Plex Mono · British English
   No TradeDraft engine — tools live in their own files.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Brand palette, status, structure + type scale all live in css/tokens.css — the single source
     linked FIRST by every surface. Site-only tokens below; don't re-declare a shared one here.
     (The --brass-deep override that used to sit here is GONE: it darkened brass to #86692D for the
     marketing pages only, because site.css isn't linked by the app — which knowingly left the
     BUILDER's brass text at 3.40:1, failing WCAG AA. tokens.css now carries the AA value for every
     surface, so the override is both redundant and the reason the app stayed broken.) */
  --rule:#E0DDD8; --rule-strong:#cdd9e3;   /* marketing aliases; --rule == --line in tokens.css */
  --ink:#1C1C1C; /* #1E3A52 is --slate, #566B89 is --steel (tokens.css) — aliases --ink-2/3/4 removed */
  --instructional-blue:#0070C0;
  --maxw:1100px; --pad:52px; --rad:3px; --rad-lg:8px;
  --ease:cubic-bezier(.22,1,.36,1);
  --sh-sm:0 1px 3px rgba(0,33,71,.06); --sh-md:0 10px 30px rgba(0,33,71,.10);
  --sh-lg:0 28px 70px rgba(0,33,71,.20);
}
/* ── Responsive breakpoint ladder — documented so it stays intentional, not ad hoc ──
   Primary ladder (reuse these): 860 = nav→burger + 3-up/2-up grids → 1 col · 620 = page
   gutter 52→22px + mobile line-breaks · 380 = footer → 1 col.
   Component-specific by design (a grid breaks where IT gets cramped, off the global ladder):
   880 .steps (3-up -> 1 col: three items cannot split 2-up without orphaning one) · 760 .stats ·
   720 .sweetspot · 560 .packs. New rules should reuse 860/620/380 unless a component truly needs its own. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--prose);color:var(--slate);background:var(--chalk);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px;box-shadow:0 0 0 4px var(--brass)}  /* two-layer: navy on light + brass halo on navy — WCAG 1.4.11 AA */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.skip-link{position:absolute;left:8px;top:-48px;z-index:2000;background:var(--navy);color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;padding:10px 16px;border-radius:0 0 6px 6px;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:0;outline:2px solid var(--brass);outline-offset:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
@media(max-width:620px){:root{--pad:22px}}
section{padding:80px 0}
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);font-weight:600;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,4.6vw,44px);line-height:1.15;letter-spacing:-.02em}
h2{font-size:clamp(24px,3.2vw,32px);line-height:1.2;letter-spacing:-.015em}
h3{font-family:var(--sans);font-weight:600;letter-spacing:normal;font-size:20px;line-height:1.3}
h1 em,h2 em,h3 em{font-style:italic;color:var(--brass);font-weight:600}
br.m-br{display:inline}
br.m-only{display:none}
@media(max-width:620px){br.m-only{display:inline}}
br.d-only{display:inline}
@media(max-width:620px){br.d-only{display:none}}
p{margin:0 0 16px;text-wrap:pretty}
.lead{font-size:clamp(15px,1.4vw,17px);color:var(--slate);line-height:1.6;text-wrap:pretty}
.hero-strap{font-family:var(--sans);font-size:clamp(17px,2.1vw,21px);font-weight:700;color:var(--navy);margin-top:14px;letter-spacing:.01em}
.lead strong{color:var(--ink);font-weight:600}
.overline{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);display:block;margin-bottom:14px} /* navy, not brass: 13px brass on chalk is ~2.2:1 (decor, not info); dark-surface eyebrows use .on-dark below */
.overline.on-dark{color:var(--brass-soft)}
/* Eyebrow's second segment — same line, set off by a gap. A literal space sits before it in the markup, so even with no CSS the two parts never run together. */
.overline .oe-sub{display:inline;text-transform:none;font-size:12px;font-weight:400;letter-spacing:.02em;color:var(--slate);margin-left:14px}
/* phones: drop the descriptor to its own single line under the brand, instead of wrapping mid-phrase */
@media(max-width:480px){.overline .oe-sub{display:block;margin-left:0;margin-top:3px}}
/* mono data utility — apply to figures, refs & status for a precise, ledger-aligned look (tabular numerals) */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.brass-rule{width:40px;height:2px;background:var(--brass);border:0;margin:22px 0}
.section-head{max-width:760px;margin:0 0 44px;text-align:left}
.section-head::after{content:"";display:block;width:40px;height:2px;background:var(--brass);margin-top:22px}
.section-head.flush::after{display:none}/* de-symmetrise: drop the repeated brass underline on selected section heads so not every heading is built to the same template */
.center{text-align:center}.center .brass-rule{margin-left:auto;margin-right:auto}
.hero-left-inner .brass-rule{margin:0 0 20px}/* divider connects the headline block to the description; gap tuned to sit in the copy's even ~22px rhythm */
.hero-head .hero-strap{margin-top:8px;margin-bottom:0}/* bind the strap tight under the headline; kill the stray global bottom margin so the head→rule gap is the flex gap alone */
.dark{background:var(--navy);color:rgba(255,255,255,.82)}
.dark h1,.dark h2,.dark h3{color:#fff}.dark .lead{color:rgba(255,255,255,.62)}.dark .lead strong{color:#fff}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 32px;border-radius:var(--rad);font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:transform .14s var(--ease),background .15s,box-shadow .15s,border-color .15s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary:focus-visible,.btn-navy:focus-visible,.btn-light:focus-visible{outline-color:var(--instructional-blue)}
/* Any real <button> (page-bespoke submits: .lc-btn, .si-btn, .idea-form/.f50 claim) gets the same blue action ring, not the brass link ring — keeps focus consistent site-wide. Links stay brass by design. */
button:focus-visible{outline-color:var(--instructional-blue)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-3)}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--navy-3)}
.btn-light{background:#fff;color:var(--navy)}.btn-light:hover{background:#eef1f5}
.btn-ghost{background:#fff;border:1.5px solid var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-text{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--slate);display:inline-flex;align-items:center;gap:6px}
.btn-text:hover{color:var(--brass-deep)}
.btn-text.light{color:rgba(255,255,255,.7)}.btn-text.light:hover{color:var(--brass-soft)}
/* Inline-style utilities — lift the most-repeated one-off styles out of the page markup.
   .link-navy = navy underlined inline link (was style="color:var(--navy);text-decoration:underline;font-weight:500"). */
.link-navy{color:var(--navy);text-decoration:underline;font-weight:500}
.cta-fineprint{font-family:var(--sans);font-size:13px;color:var(--steel)}

/* Nav */
.nav{position:sticky;top:0;z-index:60;background:var(--ink-navy);border-bottom:2px solid var(--brass-soft)}
.nav-inner{margin:0 auto;padding:0 var(--pad);height:60px;display:flex;align-items:center;gap:28px}
.wordmark{font-family:var(--sans);font-size:21px;line-height:1;letter-spacing:.02em;display:flex;align-items:baseline}
.wordmark .wm-t{font-weight:700;color:#fff}.wordmark .wm-d{font-weight:300;color:var(--brass)}
.wordmark .wm-tm{align-self:flex-start;font-size:.46em;font-weight:400;line-height:1;margin-left:2px;color:rgba(255,255,255,.55)}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav-link{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66);padding:0 0 3px;border-bottom:1.5px solid transparent;transition:color .12s,border-color .12s}
.nav-link:hover{color:rgba(255,255,255,.92)}
.nav-link.active{color:#fff;border-bottom-color:var(--brass)}
/* Primary CTA button — the product door. Lives OUTSIDE .nav-links so it stays visible on mobile
   (next to the burger). Two anchors swap on the existing .nav.signed-in switch: signed-out shows
   --out (Try TradeDraft free → the app/trial); signed-in shows --in (Open TradeDraft → the portal).
   Each carries a full desktop label (.cta-lg) and a short mobile label (.cta-sm). */
.nav-cta{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 16px;border:1px solid transparent;border-radius:var(--rad);background:#fff;color:var(--navy);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,transform .14s var(--ease)}
.nav-cta:hover{background:#eef1f5;transform:translateY(-1px)}
.nav-cta svg{width:14px;height:14px;flex:none}
.nav-cta .cta-sm{display:none}
.nav-cta--in{display:none}
.nav.signed-in .nav-cta--out{display:none}
/* signed-in user is already a customer — quieten the CTA to a ghost outline (signed-out stays solid white) */
.nav.signed-in .nav-cta--in{display:inline-flex;position:relative;background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.nav.signed-in .nav-cta--in:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7)}
/* signed-in: the chip is the far-right element; this divider sits before the whole right cluster
   (button + chip), separating it from the nav tabs — mirrors the signed-out "Log in" divider */
.nav.signed-in .nav-cta--in::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:1px;height:15px;background:rgba(255,255,255,.18)}
.nav-signin{position:relative;font-family:var(--sans);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.66);padding:0 0 3px;margin-left:32px;white-space:nowrap;transition:color .12s}
.nav-signin::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:1px;height:15px;background:rgba(255,255,255,.18)}
.nav-signin:hover{color:rgba(255,255,255,.95)}
.nav-signin[aria-current="page"]{color:#fff;border-bottom:1.5px solid var(--brass)}
/* ── Signed-in desktop account chip + dropdown ───────────────────────────────
   site.js adds .signed-in to <header class="nav"> when a session is stored, which swaps the
   "Sign in" text link OUT for this chip (business name + logo/initials from the cached profile —
   never the login email; marketing pages have no Supabase). The chip sits to the RIGHT of the CTA
   button (account in the far corner — the standard signed-in layout); the divider before the button
   separates the whole cluster from the tabs. Desktop-only — hidden below 860px (burger takes over). */
.acct-wrap{display:none}
.nav.signed-in .nav-signin{display:none}
.nav.signed-in .acct-wrap{position:relative;display:flex;align-items:center}
/* Pre-paint mirror (see the inline script in partials/nav.html): the same signed-in swap, driven off the
   <html>.td-auth-in flag set BEFORE first paint, so a signed-in user's nav is correct on load instead of
   flashing the signed-out "Try TradeDraft free" CTA. site.js still adds .nav.signed-in (chip data + wiring). */
html.td-auth-in .nav-cta--out{display:none}
html.td-auth-in .nav-cta--in{display:inline-flex;position:relative;background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
html.td-auth-in .nav-cta--in::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:1px;height:15px;background:rgba(255,255,255,.18)}
html.td-auth-in .nav-signin{display:none}
html.td-auth-in .acct-wrap{position:relative;display:flex;align-items:center}
.acct-chip{display:flex;align-items:center;gap:9px;cursor:pointer;color:#fff;background:none;border:0;font-family:var(--sans);padding:0}
.acct-av{width:30px;height:30px;border-radius:50%;background:var(--brass);color:var(--navy);font-family:var(--sans);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.acct-av img{width:100%;height:100%;object-fit:cover}
.acct-name{font-family:var(--sans);font-size:12.5px;font-weight:500;color:rgba(255,255,255,.92);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-name .car{color:rgba(255,255,255,.5);margin-left:6px}
.acct-menu{position:absolute;top:46px;right:0;background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:0 16px 40px rgba(0,33,71,.22);min-width:230px;padding:6px;display:none;z-index:70}
.acct-menu.open{display:block}
/* the menu sits inside .nav-links (uppercase links) — reset so the items read sentence-case */
.acct-menu a,.acct-menu button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font-family:var(--prose);font-size:14px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--navy);background:none;border:0;border-bottom:0;padding:9px 12px;border-radius:8px;cursor:pointer;text-decoration:none}
.acct-menu a:hover,.acct-menu button:hover{background:rgba(0,33,71,.08);color:var(--navy)}
.acct-menu a svg,.acct-menu button svg{width:18px;height:18px;flex:none;color:var(--steel)}
/* "£" prices icon — rendered via ::before so the glyph isn't in the menu's text (keeps the parity guard reading the label as just "Prices") */
.acct-menu .am-pound{width:18px;height:18px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--steel);font-family:var(--sans);font-size:17px;font-weight:700;line-height:1}
.acct-menu .am-pound::before{content:"£"}
.acct-menu a:hover svg,.acct-menu button:hover svg{color:var(--navy)}
.acct-menu hr{border:0;border-top:1px solid var(--rule);margin:5px 4px}
.am-head{display:flex;align-items:center;gap:10px;padding:10px 12px 12px}
.am-av{width:36px;height:36px;border-radius:50%;background:var(--brass);color:var(--navy);font-family:var(--sans);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.am-av img{width:100%;height:100%;object-fit:cover}
.am-id{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.am-id b{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-out{color:#9A3526}
.am-out svg{color:#9A3526!important}
.burger{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.2s}
@media(max-width:860px){
  .nav-links{display:none}
  .burger{display:flex;margin-left:14px}
  .nav-cta{margin-left:auto}
  .nav-cta .cta-lg{display:none}
  .nav-cta .cta-sm{display:inline}
  .nav.signed-in .acct-wrap,html.td-auth-in .acct-wrap{display:none}   /* chip is desktop-only; mobile uses the burger drawer */
}
/* Drawer */
/* Lighter, cleaner: the mobile drawer now mirrors the desktop account dropdown (.acct-menu) —
   a compact white card under the burger, sentence-case navy items with a soft hover, not the old
   full-width navy sheet. */
.drawer{position:fixed;top:62px;right:var(--pad);left:auto;z-index:65;width:min(300px,calc(100vw - 28px));background:#fff;display:flex;flex-direction:column;padding:8px;border:1px solid var(--rule);border-radius:14px;box-shadow:0 18px 44px rgba(0,33,71,.22);transform:translateY(-10px);opacity:0;visibility:hidden;transition:transform .2s var(--ease),opacity .2s var(--ease),visibility .2s}
.drawer.open{transform:translateY(0);opacity:1;visibility:visible}

.drawer a,.drawer button.dl{display:flex;align-items:center;gap:12px;font-family:var(--prose);font-size:15px;font-weight:500;color:var(--navy);letter-spacing:normal;text-transform:none;padding:11px 12px;border-radius:8px;text-align:left;width:100%;transition:background .12s}
.drawer a:hover,.drawer button.dl:hover{background:rgba(0,33,71,.06)}
.drawer a.cta{color:var(--brass-deep);font-weight:700}
.drawer a[data-td-signout]{color:#9A3526}
/* Leading icon on every drawer row — matches the in-app account menu (18px, muted steel). */
.drawer .dr-ico{width:18px;height:18px;flex:none;color:var(--steel)}
.drawer .dr-pound{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;font-size:17px;line-height:1}
.drawer a[data-td-signout] .dr-ico{color:#9A3526}
/* The single Log in / Quotes toggle carries both icons; CSS shows the right one for the auth state
   (the door-in icon signed-out, the clipboard signed-in) — site.js only swaps the .dr-t label text. */
.drawer .dr-ico-in{display:none}
.drawer.signed-in .dr-ico-in{display:block}
.drawer.signed-in .dr-ico-out{display:none}
/* Burger account section — the signed-in user's menu. Markup is static (per the no-build rule);
   site.js adds .signed-in to #drawer to reveal it (marketing pages don't load the auth library). */
.drawer .dr-in{display:none}
.drawer.signed-in a.dr-in{display:flex}
.drawer .dr-label{display:none;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-top:8px;padding:14px 12px 5px;border-top:1px solid var(--rule);width:100%}
.drawer.signed-in .dr-label{display:block}
/* Brand header at the top of the mobile menu — titles the panel (item 10). Navy/brass wordmark
   (the nav's .wm-t is white-on-navy, so it can't be reused on this white dropdown). */
.drawer .dr-brand{display:flex;align-items:baseline;font-family:var(--sans);font-size:18px;line-height:1;letter-spacing:.02em;padding:7px 12px 13px;margin:0 0 3px;border-bottom:1px solid var(--rule)}
.drawer .dr-brand .dr-wm-t{font-weight:700;color:var(--navy)}
.drawer .dr-brand .dr-wm-d{font-weight:300;color:var(--brass)}
.drawer .dr-brand .dr-wm-tld{font-size:.6em;font-weight:500;letter-spacing:.01em;color:rgba(0,33,71,.5);margin-left:2px;align-self:center}
/* ── Centred menu sheet on mobile (owner, 16 Jul) ───────────────────────────────────────────
   The menu was a card pinned under the burger in the top-right — the hardest corner of a phone to
   reach one-handed, which is exactly how a trade uses this in a van. It now drops into the middle
   of the screen over a dimmed page: same rows, same fonts, same icons, just repositioned, a little
   larger, and with a backdrop so it reads as "this is the thing now".
   NB the backdrop is body::before, NOT a child of .drawer — a scrim inside the drawer would paint
   over the drawer's own white background and tint the card navy.
   ⚠️ This block is DUPLICATED in three places, because the drawer CSS already was: css/site.css
   (the 14 marketing pages), build-posts.js's template (the 9 generated guides) and the 5 hand-built
   guide pages. Change one → change all three, or the menu behaves differently on guides. */
@media(max-width:860px){
  .drawer{top:50%;left:50%;right:auto;width:min(380px,calc(100vw - 44px));padding:10px;border-radius:20px;
    box-shadow:0 30px 70px rgba(0,33,71,.4);transform:translate(-50%,-50%) scale(.97)}
  .drawer.open{transform:translate(-50%,-50%) scale(1)}
  .drawer a,.drawer button.dl{padding:13px 12px;font-size:15.5px}
  .drawer .dr-brand{justify-content:center;padding:9px 12px 14px}
  /* Dimmed page behind. site.js toggles body.drawer-open; a tap on it lands on <body>, which the
     existing "click outside closes" handler already catches — no extra listener needed. */
  body::before{content:"";position:fixed;inset:0;z-index:64;background:rgba(0,33,71,.44);
    opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s}
  body.drawer-open::before{opacity:1;visibility:visible}
  body.drawer-open{overflow:hidden}   /* stop the page scrolling under the open sheet */
}
@media(max-width:860px) and (prefers-reduced-motion:reduce){
  .drawer,.drawer.open{transform:translate(-50%,-50%)}
}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero (v157 split — soft-white left / navy right) */
.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 60px);background:var(--navy);padding:0;border-bottom:2px solid var(--brass-soft)}
/* Top-anchor (not centre) the copy: the hero grows taller than the fold to hold the whole document, so
   centring dropped the copy low on first view. Aligning to the top sits it in the fold on open and lines
   its start up with the document's letterhead. (Mobile overrides align-items:stretch below.) */
/* CHALK, not white-soft: this page's hero is SPLIT, so its left half is already a light surface —
   and the first section below the hero is white-soft. Matching tones meant the rhythm started with
   two identical bands and the hero's brass foot-rule floated in a continuous light field with
   nothing on either side of it (owner, 19 Jul 2026). Every other page gets away with white-below
   because its hero is fully navy. Starting the left half on chalk makes the whole page alternate
   chalk → white-soft → chalk … down to the chalk .final, and gives that rule two sides. */
.hero-left{position:relative;background:var(--chalk);display:flex;align-items:flex-start;padding:clamp(56px,9vh,104px) 0 56px}
/* Anchor the copy to a firm left gutter (aligned with the page, not floating dead-centre in the half) and
   give it a fuller column, so the block reads as deliberately placed. Vertical rhythm is one even step. */
.hero-left-inner{width:100%;max-width:600px;margin:0 auto;padding:0 clamp(40px,5.5vw,80px);display:flex;flex-direction:column;gap:30px}
.hero-gold-strip{position:absolute;top:0;bottom:0;right:0;width:3px;background:var(--brass);opacity:.85;z-index:6}
.hero-right{position:relative;overflow:hidden;background:var(--navy)}
.hero-right::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0 59px,rgba(197,160,89,.1) 59px 60px),repeating-linear-gradient(90deg,transparent 0 59px,rgba(197,160,89,.1) 59px 60px);pointer-events:none}
.hero-doc-stage{position:relative;display:flex;align-items:flex-start;justify-content:center;padding:44px 12px 52px;z-index:2}
/* The whole sheet sits in normal flow at a large, readable size, so the hero grows to the sheet's real
   height: the WHOLE quote (letterhead → signatures) is there, and because the sheet is naturally taller
   than the fold the reader scrolls down a little to reach the foot, then the next section begins — nothing
   is clipped. Sizing is by zoom (it reflows, so the column tracks the sheet's height; transform:scale
   would not). Zoom steps up by viewport WIDTH so the sheet always fits the navy column without its content
   touching the edges. zoom is well-supported (Chrome/Edge/Safari; Firefox 126+); a browser that ignores it
   just shows the sheet full-size — ugly, not broken. Mobile keeps its own transform path in the block below. */
.hero-doc-stage .fpdoc{zoom:.55;flex:none}
@media(min-width:960px){.hero-doc-stage .fpdoc{zoom:.62}}
@media(min-width:1120px){.hero-doc-stage .fpdoc{zoom:.7}}
@media(min-width:1300px){.hero-doc-stage .fpdoc{zoom:.78}}
@media(min-width:1500px){.hero-doc-stage .fpdoc{zoom:.86}}
@media(min-width:1720px){.hero-doc-stage .fpdoc{zoom:.94}}
.hero-left h1{color:var(--navy);font-size:clamp(30px,4.6vw,42px)} /* cap 42px: the italic headline "Quote with confidence." holds as ONE line up to 42px in this column — retune if the headline changes */
.hero-left .overline{margin-bottom:15px} /* kicker sits with air above the headline; the strap binds tight below it */
.hero-left .lead{color:var(--slate);max-width:44ch}
.hero-trust{font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;color:var(--slate);margin:24px 0 26px;display:flex;align-items:center;gap:9px}
.hero-trust::before{content:"✓";color:var(--brass-deep);font-weight:700;font-size:13px;line-height:1}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.hero-cta .btn-text{flex-basis:100%;margin-top:10px}
/* The promoted sample-quote link (19 Jul 2026, replaced the demo section): the page's one honest
   interactive proof, so it reads as a real action rather than footnote text — but stays a LINK,
   not a third button (two buttons is the ceiling here, and buttons are never brass). */
/* plain navy link, no brass underline (owner, 19 Jul 2026) — the arrow carries the affordance; underline on hover only */
.hero-sample{flex-basis:100%;margin-top:10px;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--navy);text-decoration:none}
.hero-sample::after{content:" →"}
.hero-sample:hover{color:var(--brass-deep);text-decoration:underline;text-underline-offset:4px}
@media(max-width:860px){
  .hero{display:block;min-height:0}
  .hero-left{padding:72px 0 48px;align-items:stretch}/* drop the hero copy down off the nav on mobile (owner, 13 Jul) */
  .hero-left-inner{max-width:100%;margin:0;padding:0 var(--pad);display:block;min-height:0}
  .hero-gold-strip{display:none}
  .hero-right{min-height:0}
  /* Frame the showcase sheet with an EVEN navy margin on all four sides (owner: "same in height as
     in width — uniform top and bottom"). The sheet is a fixed-width zoomed element centred in the band,
     so its horizontal navy gap is (100vw − sheetWidth)/2; we drive the vertical padding by the SAME
     formula (sheetWidth ≈ 720×.455 ≈ 328, so half-width ≈ 164) — clamped so it never jams on a 360px
     phone or balloons on a tablet. zoom (not transform:scale) so the sheet reflows and the band grows
     to its real height instead of clipping in a fixed 560px box. */
  .hero-doc-stage{position:relative;inset:auto;align-items:center;justify-content:center;padding:clamp(22px,calc(50vw - 164px),56px) 12px}/* relative (not static) so its z-index:2 stays active and the sheet sits ABOVE the ::after blueprint grid — static let the grid paint over the white paper (owner review, 10 Jul 2026) */
  .hero-doc-stage .fpdoc{zoom:.455;transform:none}
}
@media(max-width:620px){
  /* Phone: the one-line headline ("Quote with confidence.") is held on a single nowrap line, its size
     derived from the viewport so it fills the content width (viewport minus the 2×22px gutters) without
     overflowing — the multiplier is tuned to the current headline's length; retune it if the headline changes. */
  .hero-left h1{white-space:nowrap;font-size:calc((100vw - 44px) * 0.084);letter-spacing:-.03em}
  /* the eyebrow ("The quoting app for UK trades") gets a slight trim to hold one line on phones */
  .hero-left .overline{font-size:11px;letter-spacing:.12em}
}

/* Hero document — a faithful CSS mini-recreation of the LIVE TradeDraft quote, sized as a full A4 sheet
   (aspect-ratio 210:297). Mirrors the pv-* document in engine.css; same trade as the site leans on — a
   Builder, the biggest trade — quoting a homeowner rear extension at standard 20% VAT (the majority case:
   CIS/DRC are B2B-only and would read as errors to a homeowner). Keep in step with the real document. */
/* aspect-ratio is a touch taller than strict A4 (210/297) so the full contract-sum ledger — all the live
   reverse-charge + CIS rows — plus the signatures fit on one showcase sheet without clipping. */
.fpdoc{width:720px;aspect-ratio:210/336;background:var(--paper);color:#001830;font-family:var(--prose);line-height:1.4;border:3px solid rgba(255,255,255,.82);border-radius:3px;box-shadow:0 20px 60px rgba(0,0,0,.65),0 6px 18px rgba(0,0,0,.35);overflow:hidden;padding:32px 46px 40px;display:flex;flex-direction:column}/* taller sheet + more bottom padding so the signatures no longer clip the foot and the quote has a proper bottom margin (owner item 5, 14 Jul) */
/* shared small caps label */
.fpd-lbl{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--steel);margin-bottom:5px}
/* letterhead */
.fpd-band{display:flex;justify-content:space-between;align-items:center;gap:18px}
.fpd-brand{display:flex;align-items:center;gap:11px;max-width:62%}
.fpd-logo-mark{flex:none}
.fpd-logo-mark svg{display:block;width:44px;height:44px}
.fpd-logo-word{display:flex;flex-direction:column;justify-content:center;min-width:0}
.fpd-logo-word b{font-family:var(--sans);font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);line-height:1}
.fpd-logo-word em{font-family:var(--sans);font-style:normal;font-size:8px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-top:4px;white-space:nowrap}
.fpd-meta{text-align:right;flex-shrink:0}
.fpd-doctitle{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:.01em;color:var(--navy);line-height:1;text-transform:uppercase}
.fpd-ref{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-top:8px}
.fpd-rule{height:2px;background:var(--navy);margin:12px 0 0}
/* parties */
.fpd-parties{display:grid;grid-template-columns:1fr 1fr}
.fpd-party{padding:8px 0;min-width:0}
.fpd-parties .fpd-party:first-child{padding-right:24px}
.fpd-party+.fpd-party{padding-left:24px;border-left:1px solid #E2E8ED}
.fpd-nm{font-weight:700;font-size:15px;color:#001830;line-height:1.25;margin-bottom:1px}
.fpd-ad{font-size:11px;color:#4A6072;line-height:1.5}
.fpd-role{font-size:11px;font-weight:600;color:var(--navy)}
.fpd-kv{margin:7px 0 0;display:flex;flex-direction:column;gap:3px}
.fpd-kv-row{display:flex;gap:10px;font-size:10.5px;line-height:1.35}
.fpd-kv dt{flex:none;width:58px;color:#8496A6;font-weight:600;letter-spacing:.02em}
.fpd-kv dd{margin:0;color:#334A5C;font-variant-numeric:tabular-nums}
/* project band */
.fpd-project{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;padding:11px 0;border-top:1px solid #E2E8ED;border-bottom:1px solid #E2E8ED}
.fpd-proj-title{font-weight:700;font-size:14px;color:#001830;line-height:1.3}
.fpd-proj-desc{font-size:11px;color:#4A6072;line-height:1.45;margin-top:2px}
.fpd-proj-dates{display:flex;gap:26px;text-align:right}
.fpd-dv{font-family:var(--mono);font-size:12.5px;color:#001830;font-variant-numeric:tabular-nums;line-height:1}
/* schedule of works */
.fpd-works{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:12px}
.fpd-works .fpd-wtitle{font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--navy);text-align:left;padding:0 0 6px}
.fpd-works .fpd-wh{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--steel);text-align:right;padding:0 0 6px;border-bottom:1.6px solid var(--navy)}
.fpd-works .fpd-wh.desc{text-align:left}
.fpd-works .fpd-wc{font-family:var(--mono);font-size:11px;color:#001830;text-align:right;padding:3px 0;border-bottom:1px solid #EDF0F5;font-variant-numeric:tabular-nums}
.fpd-works .fpd-wc.desc{font-family:var(--prose);text-align:left;color:#4A6072;font-weight:500;padding-right:12px}
.fpd-works .fpd-wc.desc.num{padding-left:20px}
.fpd-wc-no{display:inline-block;width:20px;margin-left:-20px;font-family:var(--mono);font-size:9px;font-weight:500;color:#6B80A0;font-variant-numeric:tabular-nums}
/* contract-sum ledger */
.fpd-sum{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:7px}
.fpd-sum td{padding:2px 0;vertical-align:baseline}
.fpd-sl{font-family:var(--sans);text-align:right;font-size:11px;color:var(--steel);padding-right:16px}
.fpd-sv{font-family:var(--mono);text-align:right;font-size:12px;color:#001830;font-variant-numeric:tabular-nums;width:130px}
/* muted informational lines (materials note, DRC notional VAT) — mirror the live .sub rows */
.fpd-sum tr.sub .fpd-sl{font-size:9.5px;color:#9fb2c2}
.fpd-sum tr.sub .fpd-sv{font-size:10px;color:var(--steel)}
/* MEMO rows — information only, part of no sum. Italic label + inset out of the money column so a
   scanning eye never reads them as arithmetic. Inset, NOT bracketed (brackets mean negative). */
.fpd-sum tr.memo .fpd-sl{font-style:italic}
/* memo figures stay IN the money column, right-aligned like every other figure (owner, 19 Jul 2026
   — this reverses the 18 Jul inset, which read as a misalignment bug rather than as meaning). The
   italic label + quieter figure already say "this adds up to nothing"; don't re-add padding-right. */
/* A memo row hugs the row it belongs to (1px above) but must CLEAR the rule below it by the same
   amount that rule clears the text beneath it — otherwise "materials excluded from CIS" sits cramped
   against the heavy terminal rule while "Contract Sum" breathes under its own. Measured, not guessed:
   3.19px below vs 5.69px above; 4.5px equalises them. Mirrors .pv-sum tr.memo td in css/engine.css. */
.fpd-sum tr.memo td{padding-top:1px;padding-bottom:5.6px}
/* "not applicable" dash — the DRC VAT row carries no figure at all */
.fpd-sv.na{color:#9fb2c2}   /* no inset — the dash holds the money column's right edge like every other row */
/* CIS deduction — neutral slate (matches the brand-neutral live document) */
.fpd-sum tr.cis .fpd-sl,.fpd-sum tr.cis .fpd-sv{color:#4A6072}
/* Contract Sum — an intermediate total when CIS is deducted below it: a light rule and a modest
   step up in weight. It defers to the terminal row; it does NOT get the heavy navy rule. */
.fpd-sum tr.gross td{border-top:1px solid #D8DEE7;padding-top:6px}
.fpd-sum tr.gross .fpd-sl{font-weight:700;letter-spacing:.04em;color:var(--navy);font-size:11px}
.fpd-sum tr.gross .fpd-sv{font-size:13px;font-weight:700;color:var(--navy)}
/* THE terminal figure — the one number the customer actually pays. Heavy navy rule, largest type.
   Only ever one row carries this. */
/* 3px, not the live document's 2px: this showcase sheet is zoom:0.7, so 3px renders at ~2px and
   matches the weight the real quote's terminal rule carries at full size. */
.fpd-sum tr.terminal td{border-top:3px solid var(--navy);padding-top:8px}
.fpd-sum tr.terminal .fpd-sl{font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);font-size:12px}
.fpd-sum tr.terminal .fpd-sv{font-size:17px;font-weight:700;color:var(--navy)}
/* Reverse-charge statement under the ledger. Colours mirror .pv-drc in css/engine.css (the real
   document's note) — a warm amber panel that reads as "tax notice", not another grey block. Keep
   the two in step: if engine.css's .pv-drc changes, this showcase should follow. */
.fpd-drc{font-family:var(--sans);font-size:9px;line-height:1.5;color:#5c4310;margin:7px 0 0;padding:7px 10px;border-left:2px solid #d9b45a;background:#fbeec9}
.fpd-drc strong{color:#3d2c08;font-weight:700}
/* section heads (payment terms, terms & conditions) */
.fpd-sechead{display:flex;align-items:center;gap:11px;margin:8px 0 5px}
.fpd-sechead span{font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--navy)}
.fpd-sechead::after{content:"";flex:1;height:1px;background:#E2E8ED}
/* payment terms */
.fpd-pay{width:100%;border-collapse:collapse;table-layout:fixed}
.fpd-pay td{padding:2px 0;border-bottom:1px solid #EDF0F5}
.fpd-pl{font-size:11px;color:#4A6072}
.fpd-pv{font-family:var(--mono);text-align:right;font-size:11px;color:#001830;font-variant-numeric:tabular-nums;width:112px}
/* terms & conditions */
.fpd-terms{margin:0;padding:0;list-style:none;counter-reset:t}
.fpd-terms li{counter-increment:t;position:relative;padding:0 0 4px 20px;font-size:11px;color:#4A6072;line-height:1.4}
.fpd-terms li::before{content:counter(t) ".";position:absolute;left:0;top:0;font-family:var(--sans);font-weight:700;font-size:10px;color:var(--navy)}
/* acceptance line sits directly under the terms; only the signatures pin to the foot of the sheet */
.fpd-accept{font-size:11px;color:#4A6072;line-height:1.5;margin:12px 0 0}
.fpd-sigs{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:auto;padding-top:14px}
.fpd-sig-rule{height:1px;background:#C6CED6;margin-bottom:7px}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.stat{padding:4px 38px;display:flex;flex-direction:column}
.stat+.stat{border-left:1px solid rgba(197,160,89,.22)}
.stat:first-child{padding-left:0}.stat:last-child{padding-right:0}
.stat .num{font-family:var(--mono);font-size:clamp(38px,4.8vw,54px);line-height:1;color:var(--brass);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat h3{color:#fff;font-size:16px;font-family:var(--sans);font-weight:600;letter-spacing:.01em;line-height:1.35;margin:14px 0 10px;min-height:4.05em}
.stat p{font-size:14px;color:rgba(255,255,255,.58);margin:0}
.stat .src{display:block;margin-top:auto;padding-top:14px;font-family:var(--sans);font-size:10px;letter-spacing:.05em;color:rgba(255,255,255,.5)}
@media(max-width:760px){.stats{grid-template-columns:1fr;gap:34px}.stat{padding:0}.stat h3{min-height:0}.stat+.stat{border-left:0;border-top:1px solid rgba(197,160,89,.22);padding-top:30px}}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.steps::before{content:"";position:absolute;top:28px;left:16.667%;right:16.667%;height:2px;background:var(--brass);z-index:0}
.step{position:relative;z-index:1;padding:0 16px;text-align:center}
.step .n{width:56px;height:56px;border-radius:50%;background:var(--navy);border:2px solid var(--brass);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-family:var(--sans);font-size:18px;font-weight:700;color:var(--brass)}
/* all four steps share one navy circle + brass ring/number — matches the app's brass step colour (no greyed-out 3-4) */
.step h3{font-size:18px;margin-bottom:10px;color:var(--navy);line-height:1.25}
.step p{font-size:14px;color:var(--slate);margin:0}
@media(max-width:880px){.steps{grid-template-columns:1fr;gap:34px}.steps::before{display:none}}


/* Value cards */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.val{background:var(--paper);border:1px solid var(--rule);border-radius:var(--rad-lg);padding:30px 26px;box-shadow:var(--sh-sm);transition:transform .18s var(--ease),box-shadow .18s}
.val:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.val .vn{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--brass)}
.val h3{margin:12px 0 10px;font-size:18px}
.val p{font-size:14px;color:var(--slate)}
.val .docs{font-family:var(--sans);font-size:11px;letter-spacing:.02em;color:var(--steel);border-top:1px solid var(--rule);padding-top:14px;margin-top:6px}
@media(max-width:860px){.values{grid-template-columns:1fr}}

/* Split (margin health) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:40px}}

/* Inside (what's in the docs) */
.inside{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ins{background:var(--paper);border:1px solid var(--rule);border-radius:var(--rad-lg);padding:24px;box-shadow:var(--sh-sm)}
.ins .k{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);font-weight:700;margin-bottom:10px}
.ins h3{font-size:18px;margin-bottom:8px}.ins p{font-size:14px;color:var(--slate);margin:0}
@media(max-width:860px){.inside{grid-template-columns:1fr}}

/* Sweet-spot positioning (sits on the dark about section) */
.sweetspot{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:38px;flex-wrap:wrap}
.ss-col{flex:1 1 180px;max-width:240px;text-align:center}
.ss-mid{flex:1 1 250px;max-width:320px;background:var(--navy);border:1px solid var(--navy);border-radius:16px;padding:30px 26px;box-shadow:0 22px 50px rgba(0,33,71,.30)}
.ss-arrow{flex:0 0 auto;color:rgba(255,255,255,.3);font-size:22px;font-weight:300}
.ss-tag{display:block;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:9px}
.ss-tag-mid{color:var(--brass)}
.ss-name{font-family:var(--sans);font-size:18px;font-weight:700;color:rgba(255,255,255,.92)}
.ss-name-mid{font-size:30px;letter-spacing:.005em;margin-top:2px}
.ss-name-mid .wm-t{font-weight:700;color:#fff}
.ss-name-mid .wm-d{font-weight:300;color:var(--brass)}
.ss-desc{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.5);margin-top:8px}
.ss-desc-mid{color:rgba(255,255,255,.72)}
.ss-legal{max-width:76ch;margin:26px auto 0;text-align:center;font-size:12px;line-height:1.6;text-wrap:balance;color:rgba(255,255,255,.5)}
@media(max-width:720px){.sweetspot{flex-direction:column;gap:14px;margin-top:58px}.ss-arrow{transform:rotate(90deg);font-size:18px}.ss-col,.ss-mid{flex:0 0 auto;max-width:340px;width:100%}.ss-mid{padding:22px 20px}.ss-legal{margin-top:48px}}
/* Sweet-spot block when rendered on a light surface (.lite section). Side columns re-tinted off the navy whites; the highlighted middle card keeps its brass/navy. */
.lite .ss-tag{color:var(--steel)}
.lite .ss-tag-mid{color:var(--brass)}
.lite .ss-name{color:var(--slate)}
.lite .ss-desc{color:var(--steel)}
.lite .ss-desc-mid{color:rgba(255,255,255,.72)}
.lite .ss-arrow{color:rgba(0,33,71,.28)}
.lite .ss-legal{color:var(--steel)}
.lite .ss-mid{box-shadow:0 22px 50px rgba(0,33,71,.22)}
/* Stats band on a light surface — re-tinted off the navy whites */
.lite .stat .num{color:var(--brass)}
.lite .stat h3{color:var(--navy)}
.lite .stat p{color:var(--slate)}
.lite .stat .src{color:var(--steel)}
.lite .stat+.stat{border-left-color:var(--rule)}

/* Pricing */
.price-grid{display:grid;grid-template-columns:1fr;gap:28px;max-width:620px;margin:0 auto}
.plan{background:var(--paper);border:1px solid var(--rule-strong);border-radius:var(--rad-lg);overflow:hidden;box-shadow:var(--sh-md)}
.plan-top{padding:30px 32px;border-bottom:1px solid var(--rule)}
.plan .tag{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.plan h3{font-size:23px;margin:8px 0 14px}
.toggle{display:inline-flex;background:var(--chalk);border:1px solid var(--rule);border-radius:999px;padding:4px;margin:6px 0 18px}
.toggle button{font-family:var(--sans);font-size:12px;font-weight:600;padding:8px 16px;border-radius:999px;color:var(--slate)}
.toggle button.active{background:var(--navy);color:#fff}
.price-amt{display:flex;align-items:baseline;gap:8px}
.price-amt .big{font-family:var(--mono);font-weight:600;font-size:50px;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.price-amt .per{font-family:var(--sans);font-size:14px;color:var(--slate)}
.price-sub{font-size:12.5px;color:var(--steel);margin-top:8px}
.plan-body{padding:26px 32px 30px}
.feat{list-style:none;padding:0;margin:0 0 24px}
.feat li{font-size:13.5px;color:var(--slate);padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--rule)}
.feat li:last-child{border-bottom:0}
.feat li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.feat li b{font-family:var(--sans);font-weight:600;color:var(--navy)}

/* Trade packs */
.packs{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:560px){.packs{grid-template-columns:1fr}}
.pack{background:var(--paper);border:1px solid var(--rule);border-radius:var(--rad-lg);padding:26px 26px 22px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.pack:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--brass)}
.pack-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pack-ico{width:44px;height:44px;color:var(--brass)}
.pack-tag{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--steel);border:1px solid var(--rule);border-radius:999px;padding:4px 11px}
.pack h3{font-size:20px;margin:0 0 8px;color:var(--navy)}
.pack p{font-size:13px;color:var(--slate);line-height:1.6;margin:0;flex:1}
.pack-foot{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.pack-price{display:flex;flex-direction:column;line-height:1.05}
.pack .pp{font-family:var(--serif);font-size:30px;color:var(--navy)}
.pack .pp-sub{font-family:var(--sans);font-size:11px;color:var(--steel);margin-top:4px;letter-spacing:.01em}
.pack-cta{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--navy);border-radius:9px;padding:11px 15px;white-space:nowrap;transition:background .15s}
.pack:hover .pack-cta{background:var(--navy-3)}

/* FAQ */
.faq{max-width:780px;margin:0 auto}
details{border-bottom:1px solid var(--rule-strong)}
details:first-of-type{border-top:1px solid var(--rule-strong)}
summary{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--navy);padding:20px 40px 20px 0;cursor:pointer;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:24px;font-weight:300;color:var(--brass);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
.faq-a{font-size:14px;color:var(--slate);line-height:1.75;padding:0 30px 22px 0}
.faq-a strong{color:var(--ink)}

/* Final CTA — cream with a subtle drafting-paper grid (contrasts the navy VAT section above) */
/* Closing CTA — tighter than the standard 80px section rhythm so the sign-off reads as one deliberate,
   compact block on the blueprint grid rather than a small stack stranded in a lot of empty space. */
.final{position:relative;overflow:hidden;background:var(--chalk);border-top:1px solid var(--rule);padding:60px 0 64px}
.final::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0 59px,rgba(0,33,71,.045) 59px 60px),repeating-linear-gradient(90deg,transparent 0 59px,rgba(0,33,71,.045) 59px 60px);pointer-events:none}
.final .wrap{position:relative}

/* Footer */
/* Navy is deliberate: the footer is the page's full stop, and the brass rule above it needs a dark
   ground. (Briefly chalk, 14 Jul — that read the owner's "go lighter at the bottom bar" as the site
   footer when it meant the portal's mobile bottom nav. Reverted 16 Jul on owner instruction.) */
footer{background:var(--ink-navy);color:rgba(255,255,255,.6);padding:64px 0 calc(36px + env(safe-area-inset-bottom,0px));font-size:13px;border-top:2px solid var(--brass-soft)}
.foot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;align-items:start}
.foot-col h5{margin-top:0}
.foot-brand{max-width:none;margin-bottom:44px}
@media(max-width:760px){.foot-grid{grid-template-columns:repeat(2,1fr);gap:32px 24px}}
@media(max-width:380px){footer{padding-top:48px}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .foot-legal{margin-top:32px}}
.foot-grid h5{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-soft);margin:0 0 16px}
.foot-grid a{display:block;color:rgba(255,255,255,.72);padding:5px 0;font-size:13px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);text-underline-offset:3px}
.foot-grid a:hover{color:#fff;text-decoration-color:rgba(255,255,255,.6)}
.foot-brand .wordmark{margin-bottom:6px}
.foot-brand .sub{font-family:var(--sans);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:16px}
.foot-brand p{font-size:12.5px;color:rgba(255,255,255,.5);max-width:34ch}
.foot-addr{font-size:13px;color:rgba(255,255,255,.72);margin-top:10px;line-height:1.6}
.foot-tag{font-style:italic;color:rgba(255,255,255,.62)}
.foot-social{display:flex;align-items:center;gap:13px;margin-top:16px}
.foot-social a{display:inline-flex;align-items:center;padding:4px;color:var(--brass-soft);text-decoration:none}
.foot-social a:hover{color:#fff}
.foot-social a svg{width:20px;height:20px;max-width:none;flex:none;display:block}
.foot-handle{font-family:var(--sans);font-size:12.5px;color:rgba(255,255,255,.66);letter-spacing:.01em}
.foot-legal{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:24px;font-size:11px;color:rgba(255,255,255,.68);line-height:1.7}
.foot-legal a{color:rgba(255,255,255,.72);text-decoration:underline}
.foot-copy{margin-top:12px;font-size:11px;color:rgba(255,255,255,.68);letter-spacing:.04em}
.foot-copy a{color:inherit;text-decoration:none}.foot-copy a:hover{color:rgba(255,255,255,.7)}
.disclaimer{max-width:760px;margin:48px auto 0;text-align:center;font-size:13px;color:var(--steel);line-height:1.95}
.dark .disclaimer{color:rgba(255,255,255,.55)}.dark .disclaimer a{color:var(--brass-soft)}

/* reveal — hidden initial state is gated on html.js (set pre-paint in the nav).
   No JS / JS fails  ->  no .js class  ->  .rv keeps the browser default (visible), never blank. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.on{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.btn:hover{transform:none}}

/* Legal pages (privacy / terms / refunds) — shared prose layout */
.lg-hero{background:var(--navy);color:#fff;padding:58px 0 42px}
.lg-hero h1{color:#fff}
.lg-body{padding:60px 0}
.lg-prose{max-width:760px;margin:0 auto}
.lg-prose h2{font-size:21px;margin:32px 0 10px}.lg-prose h2:first-child{margin-top:0}
.lg-prose p{font-size:14.5px;color:var(--slate);margin:0 0 14px;line-height:1.7}
.lg-prose ul{margin:0 0 14px;padding-left:20px;color:var(--slate);font-size:14.5px;line-height:1.7}
.lg-prose li{padding:2px 0}
.lg-prose a:not(.btn){color:var(--brass-deep);text-decoration:underline}
.lg-updated{font-family:var(--sans);font-size:11px;letter-spacing:.05em;color:var(--steel);text-transform:uppercase;margin-top:32px}
/* sign-off / closing line — small + muted like .lg-updated but NOT uppercase (it holds a full sentence, not a label) */
.lg-signoff{font-family:var(--sans);font-size:12.5px;letter-spacing:.01em;color:var(--steel);margin-top:32px}
.lg-signoff a{color:var(--brass-deep);text-decoration:underline;text-underline-offset:2px}

.stat-cat{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);display:block;margin-bottom:8px}