/* ============================================================
   Kaitiaki Design System — light.
   White / graphite / single pounamu-teal accent (#0D9488).
   Reference bar: Linear, Stripe, Vercel, Notion. WCAG 2.2 AA.
   Type: Inter UI (system fallback) + JetBrains Mono data. 4px spacing.
   This file is the single source of truth for the whole site.
   ============================================================ */
@font-face{ font-family:"JetBrains Mono"; font-weight:300 800; font-style:normal; font-display:swap;
  src:url("/fonts/jetbrains-mono/jetbrains-mono-300-800-normal-latin.woff2") format("woff2"); }

:root{
  --ink:#0B1220; --ink-2:#1F2A37; --slate:#3E4C5E; --muted:#64748B; --faint:#93A0B4;
  --line:#E8EDF2; --line-2:#F1F4F8;
  --bg:#FBFCFE; --surface:#FFFFFF; --surface-2:#F7F9FC; --surface-3:#F2F6FA;
  --teal:#0D9488; --teal-700:#0F766E; --teal-800:#115E59; --teal-50:#F0FDFA; --teal-100:#CCFBF1; --teal-200:#99F6E4;
  --ink-grad-a:#0B2A33; --ink-grad-b:#0B1220;
  --red:#DC2626; --red-50:#FEF2F2; --red-100:#FEE2E2;
  --amber:#B45309; --amber-50:#FFFBEB; --amber-100:#FEF3C7;
  --blue:#1D4ED8;
  --sh-xs:0 1px 2px rgba(15,23,42,.05);
  --sh-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.07);
  --sh:0 4px 14px rgba(15,23,42,.07), 0 2px 5px rgba(15,23,42,.04);
  --sh-lg:0 18px 44px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.06);
  --r-sm:8px; --r:12px; --r-lg:18px;
  --sans:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1140px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--sans); background:var(--bg); color:var(--ink-2); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
.mono{ font-family:var(--mono); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* type */
h1,h2,h3,h4{ color:var(--ink); letter-spacing:-.02em; margin:0; font-weight:650; }
h1{ font-size:clamp(34px,4.4vw,52px); line-height:1.05; letter-spacing:-.028em; font-weight:680; }
h2{ font-size:clamp(26px,3vw,36px); line-height:1.12; }
h3{ font-size:19px; line-height:1.3; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--teal-800); background:var(--teal-50);
  border:1px solid var(--teal-100); border-radius:100px; padding:6px 13px; }
.eyebrow .d{ width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px rgba(13,148,136,.16); }
.label{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--teal-700); }
.lede{ font-size:18px; line-height:1.62; color:var(--slate); }
.lede b{ color:var(--ink-2); font-weight:600; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-weight:600;
  font-size:14.5px; border-radius:var(--r-sm); padding:11px 18px; cursor:pointer; border:1px solid transparent;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .12s; white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:15px; height:15px; }
.btn-pri{ background:var(--teal-700); color:#fff; box-shadow:var(--sh-xs); }
.btn-pri:hover{ background:var(--teal-800); box-shadow:var(--sh-sm); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:#D2DAE4; box-shadow:var(--sh-xs); }
.btn-lg{ padding:13px 22px; font-size:15px; }

/* nav */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); }
.nav-in{ max-width:var(--maxw); margin:0 auto; padding:0 28px; height:62px; display:flex; align-items:center; gap:30px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .mark{ width:28px; height:28px; }
.brand .wm{ font-weight:600; font-size:16px; letter-spacing:-.01em; color:var(--ink); }
.brand .wm b{ color:var(--teal-700); font-weight:600; }
.nav-links{ display:flex; gap:26px; margin-left:6px; }
.nav-links a{ font-size:14px; color:var(--slate); font-weight:450; transition:color .15s; }
.nav-links a:hover,.nav-links a.active{ color:var(--ink); }
.nav-r{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.nav-r .signin{ font-size:14px; color:var(--slate); font-weight:500; }
.nav-r .signin:hover{ color:var(--ink); }

/* sections */
.section{ padding:84px 0; }
.section.alt{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ max-width:720px; }
.section-head h2{ margin:12px 0 14px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* card */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }

/* footer */
.footer{ background:var(--surface); border-top:1px solid var(--line); padding:56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.footer-brand .brand{ margin-bottom:14px; }
.footer-brand p{ font-size:14px; color:var(--muted); line-height:1.6; max-width:340px; margin:0 0 14px; }
.sov-mark{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; font-weight:600;
  color:var(--teal-800); background:var(--teal-50); border:1px solid var(--teal-100); border-radius:100px; padding:5px 11px; }
.sov-mark svg{ width:13px; height:13px; }
.footer-col h5{ font-size:12px; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:600; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{ font-size:14px; color:var(--slate); transition:color .15s; }
.footer-col a:hover{ color:var(--teal-700); }
.footer-bottom{ max-width:var(--maxw); margin:40px auto 0; padding:22px 28px 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.footer-bottom a:hover{ color:var(--teal-700); }

/* content components — product / marketing pages */
.phero{ padding:72px 0 12px; }
.phero .eyebrow{ margin-bottom:20px; }
.phero h1{ max-width:800px; margin-bottom:18px; }
.phero .lede{ max-width:640px; }
.phero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; }
.fgrid.two{ grid-template-columns:repeat(2,1fr); }
.feat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--sh-sm); transition:border-color .15s,box-shadow .15s,transform .12s; }
.feat:hover{ border-color:var(--teal-200); box-shadow:var(--sh); transform:translateY(-2px); }
.feat .fi{ width:40px; height:40px; border-radius:10px; background:var(--teal-50); border:1px solid var(--teal-100); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.feat .fi svg{ width:20px; height:20px; color:var(--teal-700); }
.feat h3{ font-size:16px; margin-bottom:8px; }
.feat p{ font-size:13.5px; color:var(--slate); line-height:1.6; margin:0; }
.speclist{ display:grid; grid-template-columns:1fr 1fr; gap:0 30px; margin-top:30px; }
.speclist .row{ display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--ink-2); padding:11px 0; border-top:1px solid var(--line-2); line-height:1.5; }
.speclist .row svg{ width:16px; height:16px; color:var(--teal-700); flex-shrink:0; margin-top:2px; }
.speclist .row b{ color:var(--ink); font-weight:600; }
.cta-band{ background:linear-gradient(165deg,#0B2A33,#0B1220); border-radius:var(--r-lg); padding:52px 40px; text-align:center; box-shadow:var(--sh-lg); }
.cta-band h2{ color:#fff; max-width:600px; margin:0 auto 12px; }
.cta-band p{ color:rgba(255,255,255,.66); font-size:16px; max-width:540px; margin:0 auto 24px; line-height:1.6; }
.cta-band .btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta-band .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.22); }
.cta-band .btn-ghost:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.4); }
@media (max-width:920px){ .fgrid,.fgrid.two{ grid-template-columns:1fr; } .speclist{ grid-template-columns:1fr; } }

/* reveal-on-scroll — only hides once ds.js marks <html class="ds-js">, so a
   page that omits the script (or has JS off) still renders fully visible. */
html.ds-js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
html.ds-js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ html.ds-js .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; } }
@media (max-width:620px){ .nav-links{ display:none; } .section{ padding:60px 0; } .footer-grid{ grid-template-columns:1fr; } }