/* FitForge marketing site.
   ============================================================================
   Direction: precision instruments, not SaaS gloss. Deep slate ground, brushed
   steel surfaces, surveyor's brass for the shimmer. Every highlight behaves
   like a specular reflection on metal, lit from above-left, which is why the
   gradients all run the same way. Sparkle would look cheap on a tool that
   costs a contractor money.

   Mobile first throughout: every layout rule starts at the small screen and
   widens at a breakpoint, never the reverse.
   ============================================================================ */

/* Self-hosted typefaces. Latin subset, served from this origin, so no visitor
   IP reaches a third party and the cookie policy needs no qualification.
     Barlow Semi Condensed  : Jeremy Tribby, SIL Open Font License 1.1
     IBM Plex Mono          : Mike Abbink / Bold Monday, SIL OFL 1.1
     Source Sans 3          : Paul D. Hunt, SIL OFL 1.1
   Licence: assets/fonts/OFL.txt */

@font-face { font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/barlow-semi-condensed-600.woff2') format('woff2'); }
@font-face { font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/barlow-semi-condensed-700.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2'); }
@font-face { font-family:'Source Sans 3'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/source-sans-3-400.woff2') format('woff2'); }
@font-face { font-family:'Source Sans 3'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/source-sans-3-600.woff2') format('woff2'); }

/* ── Tokens ───────────────────────────────────────────────────────── */
/* Dark is the designed state. Light is a full, deliberate alternative rather
   than an inversion, because brass on paper needs different weight to brass on
   slate. */
:root {
  color-scheme: dark light;

  --void:       #07090D;
  --ground:     #0C1016;
  --surface:    #141A22;
  --surface-2:  #1B222C;
  --surface-3:  #232C38;
  --edge:       #2B3644;
  --edge-soft:  #1F2833;

  --ink:        #F3F6F9;
  --ink-2:      #B9C4D0;
  --muted:      #808E9F;

  --brass:      #C9A227;
  --brass-lit:  #F2DB92;
  --brass-deep: #7A6215;
  --brass-wash: rgba(201,162,39,.10);

  --steel:      #5B9BE5;
  --steel-lit:  #9CC6F5;
  --steel-wash: rgba(91,155,229,.12);

  --ok:         #4FC08A;  --ok-wash:   rgba(79,192,138,.12);
  --warn:       #E0A458;  --warn-wash: rgba(224,164,88,.12);
  --risk:       #E8737D;  --risk-wash: rgba(232,115,125,.12);

  /* Light from above-left, consistently, on every raised surface. */
  --sheen:      linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 68%);
  --lift:       linear-gradient(180deg, var(--surface-2), var(--surface));
  --lift-2:     linear-gradient(180deg, var(--surface-3), var(--surface-2));

  --shadow-sm:  0 1px 2px rgba(0,0,0,.5);
  --shadow:     0 4px 12px -2px rgba(0,0,0,.55), 0 12px 32px -12px rgba(0,0,0,.65);
  --shadow-lg:  0 8px 24px -4px rgba(0,0,0,.6), 0 32px 64px -24px rgba(0,0,0,.75);

  /* One spacing scale, used everywhere. Fluid, so nothing is cramped on a
     phone or marooned on a monitor. */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;  --sp-7:3rem;
  --sp-8: clamp(3rem, 8vw, 5rem);
  --sp-9: clamp(4rem, 11vw, 7.5rem);

  --gutter: clamp(1.15rem, 5vw, 3rem);
  --measure: 62ch;

  --t-1:.8125rem; --t0:1.0625rem; --t1:1.1875rem; --t2:1.4375rem;
  --t3: clamp(1.6rem, 4.5vw, 2.25rem);
  --t4: clamp(2.1rem, 7vw, 3.4rem);
  --t5: clamp(2.6rem, 10vw, 4.6rem);

  --r-sm:6px; --r:12px; --r-lg:18px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --void:#E8EBEF; --ground:#F4F6F8; --surface:#FFFFFF; --surface-2:#FAFBFC;
    --surface-3:#F0F3F6; --edge:#D6DCE4; --edge-soft:#E6EAEF;
    --ink:#10151C; --ink-2:#3D4854; --muted:#6B7684;
    --brass:#8A6D0F; --brass-lit:#B8951F; --brass-deep:#5E4A0A; --brass-wash:rgba(138,109,15,.09);
    --steel:#175FB8; --steel-lit:#2E7BD9; --steel-wash:rgba(23,95,184,.09);
    --ok:#1F7A52; --ok-wash:rgba(31,122,82,.10);
    --warn:#8A5A11; --warn-wash:rgba(138,90,17,.10);
    --risk:#A32B36; --risk-wash:rgba(163,43,54,.10);
    --sheen:linear-gradient(155deg, rgba(255,255,255,.9), rgba(255,255,255,.4) 40%, rgba(255,255,255,0) 70%);
    --lift:linear-gradient(180deg,#FFFFFF,#FAFBFC);
    --lift-2:linear-gradient(180deg,#FFFFFF,#F4F6F8);
    --shadow-sm:0 1px 2px rgba(16,21,28,.06);
    --shadow:0 2px 8px -1px rgba(16,21,28,.08), 0 10px 28px -12px rgba(16,21,28,.14);
    --shadow-lg:0 6px 20px -4px rgba(16,21,28,.10), 0 28px 56px -24px rgba(16,21,28,.18);
  }
}

:root[data-theme="light"] {
  --void:#E8EBEF; --ground:#F4F6F8; --surface:#FFFFFF; --surface-2:#FAFBFC;
  --surface-3:#F0F3F6; --edge:#D6DCE4; --edge-soft:#E6EAEF;
  --ink:#10151C; --ink-2:#3D4854; --muted:#6B7684;
  --brass:#8A6D0F; --brass-lit:#B8951F; --brass-deep:#5E4A0A; --brass-wash:rgba(138,109,15,.09);
  --steel:#175FB8; --steel-lit:#2E7BD9; --steel-wash:rgba(23,95,184,.09);
  --ok:#1F7A52; --ok-wash:rgba(31,122,82,.10);
  --warn:#8A5A11; --warn-wash:rgba(138,90,17,.10);
  --risk:#A32B36; --risk-wash:rgba(163,43,54,.10);
  --sheen:linear-gradient(155deg, rgba(255,255,255,.9), rgba(255,255,255,.4) 40%, rgba(255,255,255,0) 70%);
  --lift:linear-gradient(180deg,#FFFFFF,#FAFBFC);
  --lift-2:linear-gradient(180deg,#FFFFFF,#F4F6F8);
  --shadow-sm:0 1px 2px rgba(16,21,28,.06);
  --shadow:0 2px 8px -1px rgba(16,21,28,.08), 0 10px 28px -12px rgba(16,21,28,.14);
  --shadow-lg:0 6px 20px -4px rgba(16,21,28,.10), 0 28px 56px -24px rgba(16,21,28,.18);
}

/* ── Base ─────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:'Source Sans 3',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--t0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Room for the sticky mobile CTA bar; removed once that bar is hidden. */
  padding-bottom:calc(4.75rem + env(safe-area-inset-bottom));
}
@media (min-width:900px) { body { padding-bottom:0; } }

/* One ambient wash behind everything: steel high-right, brass low-left. Fixed,
   so it does not travel with the scroll, which is what keeps it reading as
   light in a room rather than a decorative blob. */
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70rem 40rem at 82% -8%, var(--steel-wash), transparent 60%),
    radial-gradient(52rem 34rem at 6% 18%, var(--brass-wash), transparent 62%);
}

h1,h2,h3,h4 {
  font-family:'Barlow Semi Condensed','Barlow',ui-sans-serif,system-ui,sans-serif;
  font-weight:600; line-height:1.06; letter-spacing:-.012em;
  text-wrap:balance; margin:0;
}
h1 { font-size:var(--t5); font-weight:700; letter-spacing:-.022em; }
h2 { font-size:var(--t4); letter-spacing:-.016em; }
h3 { font-size:var(--t1); }
h4 { font-size:var(--t0); }

p { margin:0; max-width:var(--measure); }
a { color:var(--steel-lit); text-underline-offset:.18em; text-decoration-thickness:1px; transition:color .18s var(--ease); }
a:hover { color:var(--brass-lit); }
:focus-visible { outline:2px solid var(--brass); outline-offset:3px; border-radius:3px; }

ul,ol { margin:0; padding-left:1.15rem; display:flex; flex-direction:column; gap:var(--sp-2); max-width:var(--measure); }
li::marker { color:var(--brass); }

code,.mono,.num { font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
code {
  font-size:.875em; background:var(--surface-3); border:1px solid var(--edge);
  border-radius:4px; padding:.08em .36em; color:var(--ink-2); word-break:break-word;
}

.eyebrow {
  font-family:'IBM Plex Mono',monospace; font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brass-lit);
  margin:0 0 var(--sp-3); display:inline-flex; align-items:center; gap:.55rem;
}
.eyebrow::before { content:''; width:1.6rem; height:1px; flex:none; background:linear-gradient(90deg,transparent,var(--brass)); }

.lede { font-size:var(--t1); color:var(--ink-2); line-height:1.55; max-width:54ch; }
.muted { color:var(--muted); }
.small { font-size:var(--t-1); }

.skip {
  position:absolute; top:.5rem; left:.5rem; z-index:200;
  background:var(--brass); color:#12100A; padding:.7rem 1.1rem; border-radius:var(--r-sm);
  font-weight:600; clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap;
}
.skip:focus { clip-path:none; width:auto; height:auto; overflow:visible; }

/* ── Shell ────────────────────────────────────────────────────────── */
.wrap { width:min(1160px,100%); margin-inline:auto; padding-inline:var(--gutter); }

header.site {
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--edge-soft);
}
/* A hairline of light along the bottom edge: the detail that makes a sticky
   bar read as a physical surface rather than a rectangle. */
header.site::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 25%,rgba(255,255,255,.10) 75%,transparent);
}
header.site .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3) var(--sp-4); min-height:60px; }
html.js header.site .wrap { flex-wrap:nowrap; }
@media (min-width:900px) { header.site .wrap { min-height:74px; } }

.brand {
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:1.32rem;
  letter-spacing:-.015em; color:var(--ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem; flex:none;
}
.brand .dot {
  width:7px; height:7px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 30% 30%, var(--brass-lit), var(--brass) 60%, var(--brass-deep));
  box-shadow:0 0 0 3px var(--brass-wash), 0 0 12px -2px var(--brass);
}

/* The toggle only exists once JavaScript is running. Without it there is
   nothing to press, so the nav below stays permanently visible instead. */
.nav-toggle { display:none; }
html.js .nav-toggle {
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; flex:none;
  background:var(--lift); border:1px solid var(--edge); border-radius:var(--r-sm); cursor:pointer;
}
.nav-toggle span {
  display:block; height:1.5px; width:100%; border-radius:2px; background:var(--ink);
  transition:transform .28s var(--ease), opacity .18s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Without JavaScript the nav is a plain wrapped row of links, always on
   screen. With JavaScript it becomes the slide-down panel the toggle drives. */
nav.site-nav {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-4);
  padding-block:var(--sp-2);
}
html.js nav.site-nav {
  position:fixed; inset:60px 0 auto 0; z-index:55;
  display:grid; gap:var(--sp-1);
  padding:var(--sp-4) var(--gutter) var(--sp-6);
  background:var(--surface); border-bottom:1px solid var(--edge); box-shadow:var(--shadow-lg);
  transform:translateY(-12px); opacity:0; visibility:hidden;
  transition:transform .3s var(--ease), opacity .22s var(--ease), visibility .22s;
  max-height:calc(100dvh - 60px); overflow-y:auto;
}
html.js nav.site-nav.open { transform:none; opacity:1; visibility:visible; }
nav.site-nav a:not(.btn) {
  color:var(--ink-2); text-decoration:none; font-size:1.05rem; font-weight:600;
  padding:.85rem .25rem; border-bottom:1px solid var(--edge-soft);
}
nav.site-nav a:not(.btn):last-of-type { border-bottom:0; }
nav.site-nav a:not(.btn):hover,
nav.site-nav a:not(.btn)[aria-current="page"] { color:var(--brass-lit); }
nav.site-nav .btn { margin-top:var(--sp-3); }

@media (min-width:900px) {
  html.js .nav-toggle { display:none; }
  nav.site-nav, html.js nav.site-nav {
    position:static; inset:auto; display:flex; flex-wrap:nowrap; align-items:center; gap:var(--sp-5);
    padding:0; background:none; border:0; box-shadow:none;
    transform:none; opacity:1; visibility:visible; max-height:none; overflow:visible;
  }
  nav.site-nav a:not(.btn) { font-size:var(--t-1); padding:0; border:0; }
  nav.site-nav .btn { margin-top:0; }
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:600; font-size:1.06rem;
  padding:.82rem 1.5rem; border-radius:var(--r-sm); border:1px solid transparent;
  text-decoration:none; cursor:pointer; line-height:1.2; white-space:nowrap;
  transition:transform .16s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.btn:active { transform:translateY(1px); }

.btn-primary {
  color:#1A1400;
  background:linear-gradient(180deg,var(--brass-lit),var(--brass) 55%,var(--brass-deep));
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, var(--shadow);
}
.btn-primary:hover { color:#1A1400; box-shadow:0 1px 0 rgba(255,255,255,.45) inset, var(--shadow-lg); }

/* The glimmer: a specular band that sweeps once per hover. */
.btn-primary::after {
  content:''; position:absolute; top:0; bottom:0; width:60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-180%) skewX(-18deg); pointer-events:none;
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after { animation:glimmer .85s var(--ease); }
@keyframes glimmer { to { transform:translateX(280%) skewX(-18deg); } }

.btn-ghost { background:var(--lift); color:var(--ink); border-color:var(--edge); box-shadow:var(--shadow-sm); }
.btn-ghost:hover { color:var(--ink); border-color:var(--brass); box-shadow:0 0 0 1px var(--brass-wash), var(--shadow); }
.btn-sm { padding:.5rem 1rem; font-size:var(--t-1); }
.full { width:100%; }

/* ── Sections ─────────────────────────────────────────────────────── */
main > section { padding-block:var(--sp-8); position:relative; }
main > section + section::before {
  content:''; position:absolute; top:0; left:var(--gutter); right:var(--gutter); height:1px;
  background:linear-gradient(90deg,transparent,var(--edge) 20%,var(--edge) 80%,transparent);
}
.section-head { display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-6); }

.hero { padding-block:var(--sp-9) var(--sp-8); }
.hero h1 { max-width:16ch; }
.hero .lede { margin-top:var(--sp-5); }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6); }
.hero-actions .btn { flex:1 1 auto; }
@media (min-width:560px) { .hero-actions .btn { flex:0 0 auto; } }
.hero-note { margin-top:var(--sp-4); font-size:var(--t-1); color:var(--muted); }

/* The one text shimmer on the site, on the one headline that matters. A slow
   single sweep every 9s. The base colour is fully opaque, so it is never
   unreadable mid-sweep, and reduced motion paints it flat instead. */
.hero h1 {
  background-image:linear-gradient(104deg,var(--ink) 42%,var(--brass-lit) 50%,var(--ink) 58%);
  background-size:300% 100%; background-position:150% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:sweep 9s var(--ease) 1.2s infinite;
}
@keyframes sweep { 0%,72%,100% { background-position:150% 0; } 88% { background-position:-40% 0; } }

/* ── Grids ────────────────────────────────────────────────────────── */
.grid { display:grid; gap:var(--sp-4); }
.g2,.g3 { grid-template-columns:1fr; }
@media (min-width:620px) { .g3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:760px) { .g2 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:980px) { .g3 { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.stack { display:flex; flex-direction:column; gap:var(--sp-4); }
.stack-lg { display:flex; flex-direction:column; gap:var(--sp-6); }

/* ── Raised surfaces ──────────────────────────────────────────────── */
/* One shared treatment. The ::before draws a 1px gradient border through a
   mask, which is the only way to get an edge that is bright top-left and fades
   away, the way a real edge catches light. */
.card,.callout,.plan,.signup,.table-wrap,.legal-meta {
  position:relative; background:var(--lift); border-radius:var(--r); box-shadow:var(--shadow);
}
.card::before,.callout::before,.plan::before,.signup::before,.table-wrap::before,.legal-meta::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--sheen);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; pointer-events:none; z-index:1;
}
.card > *,.callout > *,.plan > *,.signup > * { position:relative; z-index:2; }

.card {
  padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.card h3 { font-size:var(--t1); }
/* A card heading that is a link needs a thumb-sized target, not the 23px a
   bare heading gives it. */
.card h3 a {
  display:block; padding-block:.4rem; margin-block:-.4rem;
  color:var(--ink); text-decoration:none;
}
.card h3 a:hover { color:var(--brass-lit); }
.card p { font-size:var(--t-1); color:var(--ink-2); }

.callout {
  padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3);
  background:var(--lift-2); border-left:2px solid var(--brass);
}
.callout h3 { font-size:var(--t0); color:var(--brass-lit); }
.callout p { font-size:var(--t-1); color:var(--ink-2); }

/* ── Steps ────────────────────────────────────────────────────────── */
/* Numbered because these genuinely are a sequence: you cannot price the job
   before the rates are in. */
.steps { counter-reset:step; display:grid; }
.step {
  counter-increment:step; position:relative;
  display:grid; grid-template-columns:2.5rem 1fr; gap:0 var(--sp-4);
  padding-block:var(--sp-5); border-top:1px solid var(--edge-soft);
}
.step:last-child { border-bottom:1px solid var(--edge-soft); }
.step::before {
  content:counter(step,decimal-leading-zero);
  font-family:'IBM Plex Mono',monospace; font-size:.8125rem; font-weight:500;
  color:var(--brass); padding-top:.25em;
}
.step h3 { margin-bottom:var(--sp-1); }
.step p { font-size:var(--t-1); color:var(--ink-2); }

/* ── Tables ───────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; font-size:var(--t-1); min-width:34rem; }
th,td { text-align:left; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--edge-soft); vertical-align:top; }
thead th {
  font-family:'IBM Plex Mono',monospace; font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); font-weight:500;
  background:var(--surface-3); border-bottom:1px solid var(--edge); white-space:nowrap;
}
tbody tr:last-child td { border-bottom:0; }
tbody tr { transition:background .16s var(--ease); }
tbody tr:hover { background:var(--steel-wash); }
td.num,th.num { text-align:right; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
caption { caption-side:bottom; text-align:left; padding:var(--sp-3) var(--sp-4); color:var(--muted); font-size:var(--t-1); border-top:1px solid var(--edge-soft); }

/* ── Pricing ──────────────────────────────────────────────────────── */
.plans { display:grid; gap:var(--sp-4); grid-template-columns:1fr; align-items:start; }
@media (min-width:720px) { .plans { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.plan { padding:var(--sp-6) var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4); }
.plan.featured {
  background:var(--lift-2);
  box-shadow:0 0 0 1px var(--brass), 0 0 40px -14px var(--brass), var(--shadow-lg);
}
.plan.featured::before { background:linear-gradient(155deg,rgba(242,219,146,.5),rgba(201,162,39,.12) 40%,transparent 70%); }
.plan-name { font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:var(--t1); }
.plan-price { display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
.plan-price .amount {
  font-family:'IBM Plex Mono',monospace; font-size:clamp(2.2rem,8vw,2.8rem); font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1;
  background:linear-gradient(180deg,var(--ink),var(--ink-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.plan-price .per { font-size:var(--t-1); color:var(--muted); }
.plan ul { padding-left:0; list-style:none; gap:var(--sp-2); font-size:var(--t-1); }
.plan li { display:grid; grid-template-columns:1.15rem 1fr; gap:.6rem; color:var(--muted); }
.plan li::before { content:"\00B7"; color:var(--edge); font-weight:700; text-align:center; }
.plan li.yes { color:var(--ink-2); }
.plan li.yes::before { content:"\2713"; color:var(--ok); font-weight:700; }

/* ── Badges ───────────────────────────────────────────────────────── */
.badge {
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.65rem;
  letter-spacing:.09em; text-transform:uppercase; font-weight:500;
  padding:.22rem .55rem; border-radius:3px; white-space:nowrap;
}
.badge-chalk { background:var(--steel-wash); color:var(--steel-lit); border:1px solid color-mix(in srgb,var(--steel) 34%,transparent); }
.badge-ochre { background:var(--warn-wash);  color:var(--warn);      border:1px solid color-mix(in srgb,var(--warn) 34%,transparent); }
.badge-ok    { background:var(--ok-wash);    color:var(--ok);        border:1px solid color-mix(in srgb,var(--ok) 34%,transparent); }

/* ── Q&A and prose ────────────────────────────────────────────────── */
.qa { border-top:1px solid var(--edge-soft); padding-block:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); }
.qa:last-of-type { border-bottom:1px solid var(--edge-soft); }
.qa h3 { font-size:var(--t1); max-width:var(--measure); }
.qa p { font-size:var(--t0); color:var(--ink-2); }

.prose { display:flex; flex-direction:column; gap:var(--sp-4); }
.prose h2 { margin-top:var(--sp-6); font-size:var(--t2); }
.prose h3 { margin-top:var(--sp-3); }
.prose p,.prose ul,.prose ol { max-width:var(--measure); }
.prose table { min-width:0; }
.legal-meta {
  font-family:'IBM Plex Mono',monospace; font-size:var(--t-1); color:var(--muted);
  padding:var(--sp-4) var(--sp-5); max-width:var(--measure); display:grid; gap:.3rem;
}
mark.todo {
  background:var(--warn-wash); color:var(--warn);
  border:1px dashed color-mix(in srgb,var(--warn) 50%,transparent);
  padding:0 .35em; border-radius:3px; font-weight:600;
}

/* ── Waitlist form ────────────────────────────────────────────────── */
.signup { padding:var(--sp-6) var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4); }
.signup form { display:flex; flex-direction:column; gap:var(--sp-4); }
.field { display:grid; gap:.45rem; }
.field label { font-size:var(--t-1); font-weight:600; color:var(--ink-2); }
.field input,.field select {
  width:100%; font:inherit; font-size:var(--t0);
  background:var(--void); color:var(--ink);
  border:1px solid var(--edge); border-radius:var(--r-sm); padding:.78rem .9rem;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus,.field select:focus { border-color:var(--brass); outline:none; box-shadow:0 0 0 3px var(--brass-wash); }
.field-row { display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
@media (min-width:520px) { .field-row { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.consent { display:grid; grid-template-columns:1.25rem 1fr; gap:.65rem; align-items:start; font-size:var(--t-1); color:var(--ink-2); }
.consent input { width:1.15rem; height:1.15rem; margin-top:.22rem; accent-color:var(--brass); }
.form-msg { font-size:var(--t-1); min-height:1.4em; }
.form-msg.error { color:var(--risk); }
.form-msg.ok { color:var(--ok); }
.hp { position:absolute; clip-path:inset(50%); width:1px; height:1px; overflow:hidden; }

/* ── Sticky mobile CTA ────────────────────────────────────────────── */
/* The most valuable thing on a phone: the action is always one thumb away,
   without a full-screen interstitial. Hidden once the inline nav CTA appears,
   so it never duplicates a control already on screen. */
.cta-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid var(--edge);
}
.cta-bar::before {
  content:''; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--brass) 30%,var(--brass) 70%,transparent);
  opacity:.55;
}
.cta-bar .cta-text { flex:1 1 auto; min-width:0; font-size:var(--t-1); line-height:1.3; color:var(--muted); }
.cta-bar .cta-text strong { display:block; color:var(--ink); font-size:var(--t0); font-weight:600; }
.cta-bar .btn { flex:none; }
@media (min-width:900px) { .cta-bar { display:none; } }

/* ── Footer ───────────────────────────────────────────────────────── */
footer.site {
  position:relative; margin-top:var(--sp-8);
  padding-block:var(--sp-7) var(--sp-6);
  font-size:var(--t-1); color:var(--muted);
  background:linear-gradient(180deg,transparent,var(--void));
  border-top:1px solid var(--edge-soft);
}
footer.site .cols { display:grid; gap:var(--sp-6); grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:var(--sp-6); }
@media (min-width:760px) { footer.site .cols { grid-template-columns:repeat(4,minmax(0,1fr)); } }
footer.site h4 {
  font-family:'IBM Plex Mono',monospace; font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brass); font-weight:500; margin-bottom:var(--sp-3);
}
footer.site ul { list-style:none; padding:0; gap:.55rem; }
footer.site a:not(.btn) { color:var(--ink-2); text-decoration:none; }
footer.site a:not(.btn):hover { color:var(--brass-lit); }
footer.site .base {
  border-top:1px solid var(--edge-soft); padding-top:var(--sp-5);
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); justify-content:space-between;
}

/* ── Motion and capability guards ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  /* The shimmer needs its animation to ever reveal the text, so without it the
     headline has to go back to a painted colour. */
  .hero h1,.plan-price .amount { -webkit-text-fill-color:var(--ink); color:var(--ink); background:none; }
  .card:hover { transform:none; }
}

/* Same guard for a browser without background-clip on text. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)) {
  .hero h1,.plan-price .amount { -webkit-text-fill-color:var(--ink); color:var(--ink); background:none; }
}

@media print {
  header.site,.cta-bar,nav.site-nav { display:none; }
  body { background:#fff; color:#000; padding:0; }
  body::before { display:none; }
}