/* TOKENS — mirror of DESIGN_SYSTEM.md §2 (app repo = source of truth).
   If a token changes, change it in the doc FIRST, then paste the block here.
   Never edit a value only in this file. */
:root {
  /* neutrals */
  --ink:#0F1A30; --base:#16223B; --base-2:#101A2E;
  --text:#1E2530; --muted:#5C6573; --border:#DCE5EF;
  --surface:#EEF3F9; --canvas:#FBFCFE; --white:#FFFFFF;

  /* accent — THEMEABLE. Brand layer overrides these four. Default = sky. */
  --accent:#378ADD; --accent-strong:#1F6FC4;
  --accent-tint:#E6F1FB; --accent-tint-text:#0C447C;

  /* semantic */
  --success:#E1F5EE; --success-text:#0F6E56;
  --warning:#FAEEDA; --warning-text:#854F0B;
  --danger:#FCEBEB;  --danger-text:#A32D2D;
  --info:#E6F1FB;    --info-text:#0C447C;

  /* type */
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* radius */
  --radius:10px; --radius-lg:14px; --radius-pill:999px;

  /* spacing (optional helpers) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
}

* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:var(--font-sans); color:var(--text);
  background:var(--canvas); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.mono { font-family:var(--font-mono); }

a { color:var(--accent-strong); text-decoration:none; }
a:hover { color:var(--accent); }

:focus-visible { outline:none; box-shadow:0 0 0 3px var(--accent-tint); }

img, svg { display:block; max-width:100%; }
ul { list-style:none; }

/* ---------- layout ---------- */
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
section { padding:84px 0; }
.section-surface { background:var(--surface); }
.section-dark { background:var(--base); color:var(--white); }

.eyebrow {
  font-size:13px; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent-strong);
}
h2 {
  font-size:clamp(26px, 3.5vw, 38px); font-weight:600;
  color:var(--ink); line-height:1.2; letter-spacing:-.01em;
}
.section-dark h2 { color:var(--white); }
.section-head { max-width:640px; margin-bottom:48px; }
.section-head .eyebrow { margin-bottom:12px; display:block; }
.section-head p { font-size:18px; color:var(--muted); margin-top:16px; }
.section-dark .section-head p { color:var(--border); }

/* ---------- buttons (DESIGN_SYSTEM.md §5) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:500;font-size:14px;
  border-radius:var(--radius);padding:10px 18px;cursor:pointer;transition:.15s;
  border:.5px solid transparent;font-family:var(--font-sans);line-height:1;}
.btn-primary{background:var(--accent);color:var(--white);border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--white);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border);}
.btn-ghost:hover{background:var(--surface);color:var(--ink);}
.btn-lg{padding:13px 24px;font-size:15px;}
/* ghost variant for dark sections — token-pure (white text, hairline border) */
.btn-ghost-dark{background:transparent;color:var(--white);border-color:var(--border);}
.btn-ghost-dark:hover{border-color:var(--white);color:var(--white);}

/* ---------- badges (DESIGN_SYSTEM.md §5) ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
  padding:4px 10px;border-radius:var(--radius);white-space:nowrap;}
.badge-accent {background:var(--accent-tint); color:var(--accent-tint-text);}
.badge-success{background:var(--success);     color:var(--success-text);}
.badge-warning{background:var(--warning);     color:var(--warning-text);}
.badge-muted  {background:var(--surface);     color:var(--muted);}

/* ---------- avatar (DESIGN_SYSTEM.md §5) ---------- */
.avatar{width:34px;height:34px;border-radius:50%;
  background:var(--accent-tint);color:var(--accent-tint-text);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:500;flex-shrink:0;}

/* ---------- nav ---------- */
.nav {
  position:sticky; top:0; z-index:50;
  background:var(--canvas); border-bottom:.5px solid var(--border);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.wordmark { font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.wordmark .dot { color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a.navlink { color:var(--text); font-size:15px; }
.nav-links a.navlink:hover { color:var(--accent-strong); }
.nav-actions { display:flex; align-items:center; gap:12px; }
.nav-toggle { display:none; }

/* ---------- hero ---------- */
.hero { background:var(--base); color:var(--white); padding:96px 0 104px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1 {
  font-size:clamp(34px, 5vw, 58px); font-weight:600; line-height:1.05;
  letter-spacing:-.02em; color:var(--white); margin:20px 0 0;
}
.hero-sub { font-size:18px; color:var(--border); margin-top:20px; max-width:520px; }
.hero-cta { display:flex; gap:12px; margin-top:32px; }
.hero-trust { margin-top:24px; font-size:13px; color:var(--border); }
.hero-trust .mono { color:var(--white); }

/* ---------- muster board (signature element) ---------- */
.muster {
  background:var(--canvas); color:var(--text);
  border:.5px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; max-width:440px; margin-left:auto;
}
.muster-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:.5px solid var(--border); }
.muster-title { font-size:18px; font-weight:500; color:var(--ink); }
.muster-date { font-size:13px; color:var(--muted); margin-top:2px; }
.muster-list { margin-top:8px; }
.muster-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:.5px solid var(--border); }
.muster-row:last-child { border-bottom:0; padding-bottom:0; }
.muster-person { flex:1; min-width:0; }
.muster-name { font-size:15px; font-weight:500; color:var(--ink); display:block; }
.muster-loc { font-size:13px; color:var(--muted); display:block; }
.muster-when { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.muster-time { font-size:13px; color:var(--text); }

/* ---------- trust strip ---------- */
.trust-strip { padding:28px 0; background:var(--surface); border-top:.5px solid var(--border); border-bottom:.5px solid var(--border); }
.trust-strip p { text-align:center; font-size:18px; color:var(--text); max-width:760px; margin:0 auto; }
.trust-strip strong { font-weight:500; color:var(--ink); }

/* ---------- features ---------- */
.feature-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.card{background:var(--canvas);border:.5px solid var(--border);
  border-radius:var(--radius-lg);padding:26px 24px;}
.card h3{font-size:18px;font-weight:500;color:var(--ink);margin-bottom:8px;}
.card p{font-size:15px;color:var(--muted);}
.icon-chip {
  width:44px; height:44px; border-radius:var(--radius);
  background:var(--accent-tint); color:var(--accent-tint-text);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; margin-bottom:16px;
}

/* ---------- how it works ---------- */
.how-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.steps { display:flex; flex-direction:column; gap:28px; }
.step { display:flex; gap:16px; }
.step-num {
  width:34px; height:34px; flex-shrink:0; border-radius:50%;
  background:var(--accent-tint); color:var(--accent-tint-text);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:500; font-family:var(--font-mono);
}
.step h3 { font-size:18px; font-weight:500; color:var(--ink); margin-bottom:2px; }
.step p { font-size:15px; color:var(--muted); }

.bill {
  background:var(--canvas); border:.5px solid var(--border);
  border-radius:var(--radius-lg); padding:28px 26px;
}
.bill-title { font-size:18px; font-weight:500; color:var(--ink); margin-bottom:20px; }
.bill-row { display:flex; align-items:baseline; justify-content:space-between; padding:12px 0; border-bottom:.5px solid var(--border); }
.bill-row span:first-child { color:var(--muted); font-size:15px; }
.bill-row .num { color:var(--text); font-size:15px; }
.bill-total { display:flex; align-items:baseline; justify-content:space-between; padding:16px 0 0; }
.bill-total .label { font-size:15px; font-weight:500; color:var(--ink); }
.bill-total .num { font-size:28px; font-weight:500; color:var(--ink); }
.bill-total .num small { font-size:14px; color:var(--muted); font-weight:400; }
.bill-note { font-size:13px; color:var(--muted); margin-top:16px; padding-top:16px; border-top:.5px solid var(--border); }

/* ---------- pricing ---------- */
.price-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; align-items:start; }
.price-card {
  background:var(--canvas); border:.5px solid var(--border);
  border-radius:var(--radius-lg); padding:28px 26px; position:relative;
}
.price-card.featured { border:2px solid var(--accent); }
.price-flag { position:absolute; top:-11px; left:26px; }
.price-name { font-size:18px; font-weight:500; color:var(--ink); }
.price-range { font-size:13px; color:var(--muted); margin-top:2px; }
.price-amount { margin:20px 0 4px; display:flex; align-items:baseline; gap:4px; }
.price-amount .big { font-size:40px; font-weight:500; color:var(--ink); font-family:var(--font-mono); letter-spacing:-.02em; }
.price-amount .per { font-size:14px; color:var(--muted); }
.price-card p { font-size:14px; color:var(--muted); margin-bottom:22px; min-height:42px; }
.price-card .btn { width:100%; }

/* ---------- cta band ---------- */
.cta-band { text-align:center; }
.cta-band h2 { margin:0 auto; max-width:680px; }
.cta-band p { color:var(--border); font-size:18px; margin:16px auto 32px; max-width:560px; }

/* ---------- footer ---------- */
.footer { background:var(--canvas); border-top:.5px solid var(--border); padding:48px 0; }
.footer-inner { display:flex; align-items:flex-start; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.footer .wordmark { font-size:18px; }
.footer-desc { font-size:14px; color:var(--muted); margin-top:8px; max-width:300px; }
.footer-links { display:flex; gap:28px; flex-wrap:wrap; }
.footer-links a { color:var(--text); font-size:14px; }
.footer-links a:hover { color:var(--accent-strong); }
.footer-copy { width:100%; margin-top:32px; padding-top:24px; border-top:.5px solid var(--border); font-size:13px; color:var(--muted); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}

/* ---------- responsive (≤680px) ---------- */
@media (max-width:680px) {
  section { padding:56px 0; }
  .wrap { padding:0 20px; }

  .nav-links { display:none; }
  .nav-actions .btn-ghost { display:none; }

  .hero { padding:64px 0 72px; }
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .hero-cta { flex-direction:column; }
  .hero-cta .btn { width:100%; }
  .muster { margin:0 auto; max-width:100%; }

  .trust-strip p { font-size:16px; }

  .feature-grid { grid-template-columns:1fr; }
  .how-grid { grid-template-columns:1fr; gap:40px; }
  .price-grid { grid-template-columns:1fr; }
  .price-card.featured { order:-1; }

  .muster-when { flex-direction:column; align-items:flex-end; gap:4px; }

  .footer-inner { flex-direction:column; gap:24px; }
}

/* ---------- legal & content pages ---------- */
.legal { padding:56px 0 84px; }
.legal-wrap { max-width:760px; }
.legal h1 { font-size:clamp(28px,4vw,40px); font-weight:600; color:var(--ink); line-height:1.15; letter-spacing:-.01em; }
.legal .updated { font-size:13px; color:var(--muted); margin-top:10px; }
.legal .legal-lead { font-size:18px; color:var(--muted); margin:20px 0 0; }
.legal h2 { font-size:20px; font-weight:600; color:var(--ink); margin:40px 0 12px; }
.legal h3 { font-size:16px; font-weight:500; color:var(--ink); margin:24px 0 8px; }
.legal p { font-size:16px; color:var(--text); line-height:1.7; margin:0 0 16px; }
.legal ul, .legal ol { margin:0 0 16px; padding-left:22px; }
.legal ul { list-style:disc; }
.legal ol { list-style:decimal; }
.legal li { font-size:16px; color:var(--text); line-height:1.7; margin-bottom:8px; }
.legal strong { font-weight:500; color:var(--ink); }
.legal a:not(.btn) { color:var(--accent-strong); }
.legal a:not(.btn):hover { color:var(--accent); }
.legal hr { border:0; border-top:.5px solid var(--border); margin:36px 0; }

.legal table { width:100%; border-collapse:collapse; margin:0 0 16px; font-size:15px; }
.legal th, .legal td { text-align:left; padding:10px 12px; border-bottom:.5px solid var(--border); vertical-align:top; }
.legal th { font-weight:500; color:var(--ink); background:var(--surface); }
.legal td { color:var(--text); }

/* draft-for-review banner — REMOVE from the page content before publishing */
.draft-banner {
  display:flex; gap:10px; align-items:flex-start;
  background:var(--warning); color:var(--warning-text);
  border-radius:var(--radius); padding:12px 16px; font-size:14px;
  line-height:1.5; margin:0 0 32px;
}
.draft-banner i { font-size:18px; flex-shrink:0; }

/* contact page */
.contact-card {
  border:.5px solid var(--border); border-radius:var(--radius-lg);
  padding:22px 24px; margin:0 0 16px; background:var(--canvas);
}
.contact-card h3 { font-size:16px; font-weight:500; color:var(--ink); margin-bottom:4px; }
.contact-card p { font-size:15px; color:var(--muted); margin:0 0 12px; }
.contact-card a.btn { font-size:14px; }