/* ======================================================================
   VANTWYN -- THE MARKETING SITE (www.vantwyn.com)

   THE SAME TOKENS AS THE APP, token for token. The Frost and Carbon
   blocks below are copied from artifact/vantwyn.template.html and a
   test (tests/test_marketing_site.py) fails the moment either drifts,
   so the site and the app cannot stop looking like the same product.
   Frost is the daytime look; Carbon follows the visitor's dark-mode
   setting. The fonts are the app's: Space Grotesk for headings,
   Instrument Sans for text, IBM Plex Mono for the small labels.
   ====================================================================== */

:root{
  --radius:3px; --measure:66ch;
}

/* ---------- LIGHT: FROST -- copied from the app ---------- */
:root, :root[data-theme="frost"], :root[data-theme="light"]{
  --ground:#EEF2F6; --surface:#FFFFFF; --surface-2:#E3E9F0; --surface-3:#D6DEE8;
  --line:#C2CCD8; --line-soft:#DEE5EC;
  --ink:#0F1720; --ink-2:#33414F; --ink-dim:#5F6E7E;
  --accent:#3A5BD9; --accent-soft:#DCE3FB;
  --brass:#96702A; --brass-soft:#F1E6CC;
  --good:#217A5B; --good-soft:#D8EDE5;
  --bad:#B33A45;  --bad-soft:#F8DFE2;
}

/* ---------- DARK: CARBON -- copied from the app ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="frost"]):not([data-theme="light"]){
    --ground:#0B0B0C; --surface:#141416; --surface-2:#1C1C20; --surface-3:#26262B;
    --line:#33333A; --line-soft:#232329;
    --ink:#EDEDEF; --ink-2:#BFC0C4; --ink-dim:#8A8B91;
    --accent:#7AA2F7; --accent-soft:#16233A;
    --brass:#C79B57; --brass-soft:#2E2517;
    --good:#4FB07A; --good-soft:#132A1D;
    --bad:#DE6A62;  --bad-soft:#331A18;
  }
}
:root[data-theme="carbon"], :root[data-theme="dark"]{
  --ground:#0B0B0C; --surface:#141416; --surface-2:#1C1C20; --surface-3:#26262B;
  --line:#33333A; --line-soft:#232329;
  --ink:#EDEDEF; --ink-2:#BFC0C4; --ink-dim:#8A8B91;
  --accent:#7AA2F7; --accent-soft:#16233A;
  --brass:#C79B57; --brass-soft:#2E2517;
  --good:#4FB07A; --good-soft:#132A1D;
  --bad:#DE6A62;  --bad-soft:#331A18;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;font-weight:800;
  letter-spacing:-.022em;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,5.2vw,60px);line-height:1.04}
h1 em{font-style:normal;color:var(--accent)}
h2{font-size:clamp(24px,2.8vw,34px);line-height:1.15}
h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.sub{color:var(--ink-2)}
.dim{color:var(--ink-dim)}
.measure{max-width:var(--measure)}

/* ---------- buttons ---------- */
.btn{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;
  background:var(--accent);color:#fff;border:0;border-radius:var(--radius);
  padding:13px 22px;cursor:pointer;text-decoration:none;display:inline-block;
  line-height:1.2}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn.big{font-size:17px;padding:16px 28px}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:20}
.masthead .wrap{display:flex;align-items:center;gap:18px;padding:12px 24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.mark{width:34px;height:34px;flex:none;color:var(--accent)}
.wordmark{font-family:"Space Grotesk",sans-serif;font-weight:800;font-size:23px;
  letter-spacing:-.03em;line-height:1}
.wordmark span{color:var(--accent)}
.brand-sub{font-size:11.5px;color:var(--ink-dim);margin-top:2px}
nav.top{margin-left:auto;display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;
  justify-content:flex-end}
nav.top a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:15px}
nav.top a:hover{color:var(--ink)}
nav.top a.btn{color:#fff}
nav.top a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--accent)}

/* ---------- hero ---------- */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--line)}
.hero .lead{font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);margin:22px 0 30px;
  max-width:62ch}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .fine{margin-top:16px;font-size:14px;color:var(--ink-dim)}
.strap{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.strap i{display:block;width:34px;height:2px;background:var(--accent)}

/* ---------- figures ---------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:34px 0;
  border-bottom:1px solid var(--line)}
.fig{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 16px}
.fig .n{font-family:"Space Grotesk",sans-serif;font-weight:800;font-size:34px;
  letter-spacing:-.03em;line-height:1;color:var(--ink)}
.fig .n small{font-size:16px;color:var(--ink-dim);font-weight:700;margin-left:4px}
.fig .l{margin-top:8px;font-size:14px;color:var(--ink-2)}

/* ---------- sections ---------- */
section.block{padding:60px 0;border-bottom:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.sec-head .count{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  color:var(--ink-dim);letter-spacing:.04em}
.split{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.split.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.card-pad{padding:22px 22px 20px}
.card h3{margin-bottom:8px}
.card p + p{margin-top:8px}
.card .sub{font-size:15px}
.jobs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.job{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  background:var(--surface-2)}
.job b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.1em;color:var(--accent);display:block;margin-bottom:6px}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px}
.step::before{counter-increment:step;content:counter(step);display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:800;font-size:13px;
  background:var(--accent);color:#fff;width:26px;height:26px;line-height:26px;
  text-align:center;border-radius:50%;margin-bottom:12px}
.promise{background:var(--good-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:start}
.promise ul{margin:10px 0 0;padding-left:18px;color:var(--ink-2)}
.promise li{margin:4px 0}
.refuse{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.refuse .card-pad{border-left:3px solid var(--bad)}

/* ---------- waitlist ---------- */
#waitlist{scroll-margin-top:80px}
.wait{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.waitbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;min-height:220px}
.waitbox .note{color:var(--ink-dim);font-size:14px}
.waitbox .cl-rootBox{width:100%}

/* ---------- footer ---------- */
footer{padding:36px 0 56px;color:var(--ink-dim);font-size:14px}
footer .wrap{display:flex;gap:8px 22px;flex-wrap:wrap;align-items:center}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .copy{margin-left:auto}

/* ---------- phones ---------- */
@media (max-width:900px){
  .figs,.jobs,.steps,.refuse{grid-template-columns:repeat(2,1fr)}
  .split,.split.three,.wait,.promise{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap{padding-left:16px;padding-right:16px}
  .masthead .wrap{padding-left:16px;padding-right:16px}
  .figs,.jobs,.steps,.refuse{grid-template-columns:1fr}
  .hero{padding:44px 0 40px}
  .brand-sub{display:none}
  nav.top a:not(.btn){display:none}
}