@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* crm.care v2 tokens — inlined so this folder is self-contained.
 * Source of truth is the design system's styles.css; keep in sync if tokens change. */
:root {
  /* Brand */
  --c-paper: #fffefa;
  --c-ink: #1e1e1e;
  --c-pulse: #35e0c2;
  --accent-deep: #01b498;
  --accent-blue: #0085ca;

  /* Channel form — Tailwind/white-label consumers map these */
  --care-c-pulse: 53 224 194; /* @kind color */
  --care-c-accent-deep: 1 180 152; /* @kind color */
  --care-c-accent-blue: 0 133 202; /* @kind color */

  /* Ink scale */
  --ink-92: rgba(30, 30, 30, 0.92);
  --ink-78: rgba(30, 30, 30, 0.78);
  --ink-55: rgba(30, 30, 30, 0.55);
  --ink-32: rgba(30, 30, 30, 0.32);
  --ink-15: rgba(30, 30, 30, 0.15);
  --ink-08: rgba(30, 30, 30, 0.08);
  --ink-04: rgba(30, 30, 30, 0.04);

  /* Paper scale (dark surfaces) */
  --paper-92: rgba(255, 254, 250, 0.92);
  --paper-55: rgba(255, 254, 250, 0.55);
  --paper-32: rgba(255, 254, 250, 0.32);
  --paper-15: rgba(255, 254, 250, 0.15);
  --paper-08: rgba(255, 254, 250, 0.08);

  /* Teal alphas — replace every rgba(212,255,74,…) from v1 */
  --pulse-32: rgba(53, 224, 194, 0.32);
  --pulse-25: rgba(53, 224, 194, 0.25);
  --pulse-15: rgba(53, 224, 194, 0.15);
  --pulse-08: rgba(53, 224, 194, 0.08);

  /* Surfaces */
  --surface: #fffefa;
  --surface-alt: #f3f2ee;
  --surface-ink: #1e1e1e;
  --surface-ink-2: #2a2a2a;

  /* Semantic */
  --c-pos: #1e1e1e;
  --c-pos-bg: #35e0c2;
  --c-warn: #1e1e1e;
  --c-warn-bg: #ffd84a;
  --c-neg: #c1272d;
  --c-neg-bg: #ffe1e2;

  /* Type */
  --font-sans: "Jost", "Century Gothic", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Spacing — 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Borders — square is intentional */
  --br: 0; /* @kind radius */
  --br-pill: 999px;
  --bw: 1px;

  /* Layout */
  --max-w: 1240px;
  --max-w-app: 1440px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --dur-1: 120ms; /* @kind other */
  --dur-2: 220ms; /* @kind other */
  --dur-3: 360ms; /* @kind other */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--c-ink);color:var(--c-paper);font-family:var(--font-sans);font-weight:300;font-size:15.5px;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 40px}
@media(max-width:700px){.wrap{padding:0 20px}}

/* ── type ─────────────────────────────── */
.display{font-weight:300;font-size:clamp(40px,6.5vw,96px);line-height:1;letter-spacing:-.04em;text-transform:uppercase;margin:0}
.display em{font-weight:500}
.h1{font-weight:400;font-size:clamp(30px,4.2vw,54px);line-height:1.05;letter-spacing:-.03em;text-transform:uppercase;margin:0}
.h1 em{font-weight:500}
.h2{font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-.02em;margin:0}
.h2 em{font-weight:500}
.h3{font-weight:500;font-size:20px;line-height:1.2;letter-spacing:-.01em;margin:0}
.body{font-size:15.5px;line-height:1.65;margin:0}
.lede{font-size:17px;line-height:1.6;color:var(--paper-55);max-width:62ch;margin:0}
.lede em{color:var(--c-paper)}
.label{font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.mono{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em}
.muted{color:var(--paper-55)}

/* ── sections ─────────────────────────── */
.sec{padding:112px 0;border-top:1px solid var(--paper-15)}
@media(max-width:700px){.sec{padding:64px 0}}
.invert,.paper{background:var(--c-paper);color:var(--c-ink);border-top:1px solid var(--ink-15)}
.invert .lede,.paper .lede{color:var(--ink-55)}
.invert .lede em,.paper .lede em{color:var(--c-ink)}
.invert .muted,.paper .muted{color:var(--ink-55)}
.sechead{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
@media(max-width:900px){.sechead{grid-template-columns:1fr;gap:20px;margin-bottom:36px}}
.sechead .label{color:var(--paper-55);display:block;margin-bottom:16px}
.invert .sechead .label{color:var(--ink-55)}

/* ── nav ──────────────────────────────── */
.chrome{position:sticky;top:0;z-index:50;background:var(--c-ink);border-bottom:1px solid var(--paper-15)}
.announce{background:var(--c-pulse);color:var(--c-ink);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;text-align:center;padding:9px 20px}
.announce a{color:var(--c-ink);border-bottom:1px solid var(--c-ink);font-weight:500}
.announce strong{font-weight:500;text-transform:uppercase;letter-spacing:.12em;margin-right:8px}
.nav{display:flex;align-items:center;gap:32px;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--c-paper);font-size:19px;font-weight:400;letter-spacing:-.02em}
.brand svg{width:26px;height:20px;color:var(--c-pulse)}
.navlinks{display:flex;gap:26px;margin-left:auto}
.navlinks a{color:var(--paper-55);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.navlinks a:hover,.navlinks a.on{color:var(--c-paper)}
.navtools{display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid var(--paper-15)}
.lang button{background:none;border:0;color:var(--paper-55);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;padding:7px 9px;cursor:pointer}
.lang button.on{background:var(--c-paper);color:var(--c-ink)}
.navmenu{display:none;margin-left:auto}
.navmenu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:1px solid var(--paper-15);color:var(--c-paper);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.navmenu summary::-webkit-details-marker{display:none}
.navmenu summary .bars{display:grid;gap:3px}
.navmenu summary .bars i{display:block;width:16px;height:1px;background:var(--c-paper)}
.navmenu[open] summary .bars i:nth-child(2){opacity:0}
.drawer{position:absolute;left:0;right:0;top:100%;background:var(--c-ink);border-top:1px solid var(--paper-15);border-bottom:1px solid var(--paper-15);display:grid;z-index:60}
.drawer a{display:flex;align-items:center;min-height:52px;padding:0 40px;color:var(--c-paper);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--paper-08)}
.drawer a:last-child{border-bottom:0}
.drawer a:hover{background:var(--surface-ink-2)}
@media(max-width:1000px){.navlinks{display:none}.navmenu{display:block}.nav{position:relative}}
@media(max-width:700px){.drawer a{padding:0 20px}.navtools .btn--sm{display:none}.navtools .lang{margin-left:auto}}

/* ── buttons ──────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:15px 22px;border:1px solid var(--paper-15);color:var(--c-paper);background:transparent;cursor:pointer;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.btn:hover{background:var(--c-paper);color:var(--c-ink);border-color:var(--c-paper)}
.btn--solid{background:var(--c-pulse);border-color:var(--c-pulse);color:var(--c-ink)}
.btn--solid:hover{background:var(--c-paper);border-color:var(--c-paper);color:var(--c-ink)}
.btn--sm{padding:10px 14px;font-size:10.5px}
.invert .btn{border-color:var(--ink-15);color:var(--c-ink)}
.invert .btn:hover{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink)}
.invert .btn--solid{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--c-paper)}
.invert .btn--solid:hover{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-paper)}
.btn .arrow{transition:transform var(--dur-1) var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.ctarow{display:flex;flex-wrap:wrap;gap:12px}

/* ── hero ─────────────────────────────── */
.hero{padding:96px 0 80px}
@media(max-width:700px){.hero{padding:56px 0 48px}}
.chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--paper-15);padding:7px 12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--paper-55);margin-bottom:36px}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--c-pulse);box-shadow:0 0 0 3px var(--pulse-25)}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:end}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero-sub{font-size:19px;line-height:1.5;color:var(--paper-92);max-width:30ch;margin:0 0 24px}
.herofoot{display:flex;flex-wrap:wrap;align-items:end;gap:32px;margin-top:52px;padding-top:28px;border-top:1px solid var(--paper-15)}
.herofacts{flex:1 1 520px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0}
.herofacts>div{padding-left:24px;border-left:1px solid var(--paper-15)}
.herofacts>div:first-child{padding-left:0;border-left:0}
.herofacts dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-32);margin-bottom:8px}
.herofacts dd{margin:0;font-size:15px;line-height:1.35;color:var(--paper-92);max-width:22ch}
@media(max-width:760px){.herofacts{grid-template-columns:1fr;gap:20px}.herofacts>div{padding-left:0;border-left:0;padding-top:20px;border-top:1px solid var(--paper-15)}.herofacts>div:first-child{padding-top:0;border-top:0}.herofoot .cc-anim{display:none}}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--paper-15);padding:6px 11px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;color:var(--paper-55)}
.invert .pill{border-color:var(--ink-15);color:var(--ink-55)}
.pill--pulse{background:var(--c-pulse);border-color:var(--c-pulse);color:var(--c-ink)}
.cc-anim{width:100%;max-width:340px;color:var(--c-pulse);opacity:.9}
.cc-anim path{animation:ccpulse 4.2s var(--ease) infinite}
.cc-anim path:last-child{animation-delay:.5s}
@keyframes ccpulse{0%,100%{opacity:.35}45%{opacity:1}}

/* ── marquee ──────────────────────────── */
.marquee{overflow:hidden;border-top:1px solid var(--paper-15);border-bottom:1px solid var(--paper-15);padding:16px 0;background:var(--surface-ink-2)}
.marquee-track{display:flex;gap:40px;white-space:nowrap;animation:slide 38s linear infinite;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--paper-55);text-transform:uppercase}
.marquee-track span em{color:var(--c-pulse);font-weight:400}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── grids / cards ────────────────────── */
.grid{display:grid;gap:1px;background:var(--ink-15);border:1px solid var(--ink-15)}
.grid>*{background:var(--c-paper)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}
.feature{padding:32px;display:grid;gap:14px;align-content:start;min-height:260px}
.feature .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--ink-32)}
.feature .job{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--accent-deep)}
.feature .body{color:var(--ink-78);font-size:14.5px}
.feature .stamp{margin-top:auto;padding-top:16px;border-top:1px solid var(--ink-15);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-55)}
.feature .stamp a{color:var(--ink-55)}
.feature:hover .stamp a{color:var(--accent-blue)}

.operator{background:var(--c-ink);color:var(--c-paper);padding:36px 40px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;margin-top:1px}
@media(max-width:900px){.operator{grid-template-columns:1fr;gap:18px;padding:28px 24px}}
.operator .label{color:var(--c-pulse);display:block;margin-bottom:12px}
.operator .body{color:var(--paper-92);max-width:74ch}
.operator a{color:var(--c-pulse);border-bottom:1px solid var(--pulse-32)}

/* ── loop ─────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--paper-15);border:1px solid var(--paper-15)}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:var(--c-ink);padding:28px;display:grid;gap:12px;align-content:start;min-height:230px}
.step .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--c-pulse)}
.step .h3{font-weight:500;font-size:18px}
.step .body{color:var(--paper-55);font-size:14.5px}
.step .t{margin-top:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--paper-32);letter-spacing:.08em}

/* ── three ways ───────────────────────── */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-15);border:1px solid var(--paper-15)}
@media(max-width:900px){.ways{grid-template-columns:1fr}}
.way{background:var(--c-ink);padding:32px;display:grid;gap:14px;align-content:start;min-height:300px;position:relative}
.way--feat{background:var(--surface-ink-2);outline:1px solid var(--c-pulse);outline-offset:-1px;z-index:1}
.way .flag{position:absolute;top:0;right:0;background:var(--c-pulse);color:var(--c-ink);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px}
.way .kind{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--paper-32);text-transform:uppercase}
.way .body{color:var(--paper-55);font-size:14.5px}
.way .btn{margin-top:auto;justify-self:start}

/* ── comparison table ─────────────────── */
.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp th{text-align:left;font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:14px 12px;color:var(--ink-55);border-bottom:1px solid var(--c-ink)}
.cmp th.us{background:var(--c-pulse);color:var(--c-ink)}
.cmp td{padding:14px 12px;border-bottom:1px dashed var(--ink-15);color:var(--ink-78);vertical-align:top}
.cmp td.us{background:var(--pulse-08);color:var(--c-ink);font-weight:400}
.cmp tbody tr td:first-child{color:var(--c-ink)}
.tblwrap{overflow-x:auto}

/* ── pricing ──────────────────────────── */
.pricing{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ink-15);border:1px solid var(--ink-15)}
@media(min-width:1100px){.pricing{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.pricing{grid-template-columns:1fr}}
.tier{background:var(--c-paper);padding:28px;display:grid;gap:16px;align-content:start;position:relative}
.tier .name{font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.tier .price{font-weight:300;font-size:40px;line-height:1;letter-spacing:-.03em;color:var(--c-ink)}
.tier .price span{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-55)}
.tier .desc{font-size:13.5px;line-height:1.55;color:var(--ink-55)}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13.5px;color:var(--ink-78)}
.tier li{display:grid;grid-template-columns:14px 1fr;gap:9px;align-items:start}
.tier li::before{content:"";width:8px;height:8px;background:var(--accent-deep);margin-top:6px}
.tier .btn{margin-top:8px;justify-self:stretch;justify-content:center}
/* featured tier — these MUST stay after the base .tier rules above:
   equal specificity means source order decides, and the dark card needs paper text. */
.tier--feat{background:var(--c-ink);color:var(--c-paper)}
.tier--feat .desc,.tier--feat ul,.tier--feat li{color:var(--paper-55)}
.tier--feat .price{color:var(--c-paper)}
.tier--feat .price span{color:var(--paper-55)}
.tier--feat li::before{background:var(--c-pulse)}
.tier--feat .flag{position:absolute;top:0;right:0;background:var(--c-pulse);color:var(--c-ink);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px}
.tier--feat .btn{background:var(--c-pulse);border-color:var(--c-pulse);color:var(--c-ink)}
.tier--feat .btn:hover{background:var(--c-paper);border-color:var(--c-paper)}

/* ── faq ──────────────────────────────── */
.faq{border-top:1px solid var(--paper-15)}
.faq details{border-bottom:1px solid var(--paper-15)}
.faq summary{cursor:pointer;list-style:none;padding:24px 0;display:grid;grid-template-columns:44px 1fr 24px;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font-family:var(--font-mono);font-size:11px;color:var(--paper-32);letter-spacing:.12em}
.faq summary .q{font-size:19px;font-weight:400;letter-spacing:-.01em}
.faq summary .m{font-family:var(--font-mono);color:var(--c-pulse);text-align:right}
.faq details[open] summary .m{color:var(--paper-32)}
.faq .a{padding:0 0 28px 60px;color:var(--paper-55);max-width:76ch;font-size:15px}
@media(max-width:700px){.faq .a{padding-left:0}}

/* ── final cta ────────────────────────── */
.final{padding:128px 0;text-align:center;border-top:1px solid var(--paper-15)}
.final .display{margin-bottom:36px}
.final .ctarow{justify-content:center}
.final .meta{margin-top:28px;font-family:var(--font-mono);font-size:11.5px;color:var(--paper-32);letter-spacing:.06em}

/* ── footer ───────────────────────────── */
footer{border-top:1px solid var(--paper-15);padding:72px 0 40px;background:var(--surface-ink-2)}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;margin-bottom:56px}
@media(max-width:1100px){.fgrid{grid-template-columns:1fr 1fr 1fr;gap:32px}}@media(max-width:700px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}
.fcol h4{font-weight:500;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-32);margin:0 0 16px}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fcol a{color:var(--paper-55);font-size:13.5px}
.fcol a:hover{color:var(--c-paper)}
.fbrand p{color:var(--paper-55);font-size:13.5px;max-width:40ch;margin:14px 0 0}
.fbase{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--paper-15);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-32)}
.fbase a{color:var(--paper-55)}
.fbase a:hover{color:var(--c-paper)}
.flegal{margin-top:18px;font-size:11px;line-height:1.6;color:var(--paper-32);max-width:80ch}

/* ── misc ─────────────────────────────── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:28px}}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink-15);border:1px solid var(--ink-15)}
@media(max-width:800px){.cols{grid-template-columns:1fr}}
.cols>div{background:var(--c-paper);padding:32px}
.cols h4{font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 18px}
.cols ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:14.5px;color:var(--ink-78)}
.cols li{display:grid;grid-template-columns:16px 1fr;gap:10px}
.cols li::before{content:"";width:10px;height:10px;margin-top:6px;background:var(--accent-deep)}
.cols .no li::before{background:var(--c-neg)}
.invert a{color:var(--accent-blue)}
.invert a:hover{color:var(--accent-deep)}
a{color:var(--c-pulse)}
a:hover{color:var(--c-paper)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── document pages (legal, about, blog post) ─────────── */
.doc{max-width:74ch;margin:0 auto}
.doc h2{font-weight:400;font-size:26px;letter-spacing:-.02em;margin:56px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--ink-15)}
.doc h3{font-weight:500;font-size:17px;margin:32px 0 10px}
.doc p{margin:0 0 16px;color:var(--ink-78)}
.doc ul{margin:0 0 16px;padding-left:20px;color:var(--ink-78);display:grid;gap:8px}
.doc .updated{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55);margin-bottom:8px}
.doc table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px}
.doc th{text-align:left;font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:12px 10px;color:var(--ink-55);border-bottom:1px solid var(--c-ink)}
.doc td{padding:12px 10px;border-bottom:1px dashed var(--ink-15);color:var(--ink-78);vertical-align:top}
.toclist{display:grid;gap:1px;background:var(--ink-15);border:1px solid var(--ink-15);margin-bottom:48px}
.toclist a{background:var(--c-paper);padding:14px 18px;display:grid;grid-template-columns:44px 1fr;gap:12px;color:var(--c-ink);font-size:14px}
.toclist a:hover{background:var(--surface-alt)}
.toclist .n{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-32)}
.postlist{display:grid;gap:1px;background:var(--ink-15);border:1px solid var(--ink-15)}
.post{background:var(--c-paper);padding:28px 32px;display:grid;grid-template-columns:110px 1fr auto;gap:24px;align-items:baseline}
@media(max-width:800px){.post{grid-template-columns:1fr;gap:10px}}
.post .date{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-32)}
.post h3{margin:0;font-weight:500;font-size:19px;letter-spacing:-.01em}
.post p{margin:6px 0 0;font-size:14px;color:var(--ink-55);max-width:70ch}
.post .go{font-family:var(--font-mono);font-size:11px;color:var(--accent-blue)}
.empty{border:1px dashed var(--paper-15);padding:56px 40px;text-align:center}
.empty .mono{color:var(--paper-32);display:block;margin-bottom:16px}
.demolist{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ink-15);border:1px solid var(--ink-15)}
@media(max-width:800px){.demolist{grid-template-columns:1fr}}
.codebox{background:var(--c-ink);color:var(--c-paper);font-family:var(--font-mono);font-size:12.5px;line-height:1.7;padding:24px;overflow-x:auto;white-space:pre;border:1px solid var(--paper-15)}
.codebox .k{color:var(--c-pulse)}

/* ── forms ─────────────────────────────── */
.form{display:grid;gap:20px;max-width:560px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.form .row{grid-template-columns:1fr}}
.field{display:grid;gap:8px}
.field label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-55)}
.field label .req{color:var(--c-pulse)}
.field input,.field select,.field textarea{font-family:var(--font-sans);font-weight:300;font-size:15px;line-height:1.5;color:var(--c-paper);background:transparent;border:1px solid var(--paper-15);border-radius:var(--br);padding:13px 14px;min-height:48px;width:100%;transition:border-color var(--dur-1) var(--ease)}
.field textarea{min-height:118px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--paper-55) 50%),linear-gradient(135deg,var(--paper-55) 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.field select option{background:var(--c-ink);color:var(--c-paper)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--c-pulse)}
.field input::placeholder,.field textarea::placeholder{color:var(--paper-32)}
.field .hint{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--paper-32)}
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.form button[type=submit]{justify-self:start;position:relative}
.form button[type=submit][disabled]{opacity:.55;cursor:progress}
.form button[type=submit] .busy{display:none;width:11px;height:11px;border:1px solid currentColor;border-top-color:transparent;border-radius:999px;animation:spin .7s linear infinite}
.form.is-busy button[type=submit] .busy{display:inline-block}
.form.is-busy button[type=submit] .arrow{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.formstate{display:none;border:1px solid var(--paper-15);padding:32px;max-width:560px}
.formstate.on{display:block}
.formstate h3{font-weight:500;font-size:19px;letter-spacing:-.01em;margin:0 0 10px}
.formstate p{margin:0;font-size:15px;color:var(--paper-55)}
.formstate--err{border-color:var(--c-neg)}
.formstate--err h3{color:var(--c-neg)}
.formerr{display:none;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--c-neg);border-left:2px solid var(--c-neg);padding-left:12px}
.formerr.on{display:block}

/* ── reviews ───────────────────────────── */
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ink-15);border:1px solid var(--ink-15)}
@media(max-width:800px){.reviews{grid-template-columns:1fr}}
.review{background:var(--c-paper);padding:32px;display:grid;gap:16px;align-content:start}
.review .stars{display:flex;gap:3px;color:var(--accent-deep);font-size:15px;letter-spacing:.1em}
.review blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--ink-92)}
.review .who{display:grid;gap:2px;padding-top:14px;border-top:1px dashed var(--ink-15)}
.review .who b{font-weight:500;font-size:14px}
.review .who span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-32)}
.ratingbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:20px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--ink-15)}
.ratingbar .score{font-weight:300;font-size:46px;line-height:1;letter-spacing:-.03em}
.ratingbar .of{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55)}

/* ── ask-AI (GEO) footer block ──────────── */
.geo{margin-bottom:52px;padding-bottom:44px;border-bottom:1px solid var(--paper-15)}
.geo h4{font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-paper);margin:0 0 12px}
.geo p{margin:0 0 8px;font-size:14px;color:var(--paper-55);max-width:66ch}
.geo .files{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--paper-32);margin-bottom:24px}
.geo .files a{color:var(--c-pulse)}
.geotiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--paper-15);border:1px solid var(--paper-15)}
@media(max-width:700px){.geotiles{grid-template-columns:1fr 1fr}}
.geotile{background:var(--c-ink);padding:18px 20px;display:grid;gap:6px;color:var(--c-paper);transition:background var(--dur-1) var(--ease)}
.geotile:hover{background:var(--c-pulse);color:var(--c-ink)}
.geotile b{font-weight:500;font-size:14px;letter-spacing:-.01em}
.geotile span{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-32)}
.geotile:hover span{color:var(--c-ink)}

/* ── added by scripts/build-v2-site.js ───────────────────────────────────── */

/* Parent-company line under the nav wordmark. Sits outside the <a> so the
   anchor's underline doesn't paint through it — see the build script. */
.brandlock {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.brandlock small {
  /* 26px mark + the .brand 10px gap, so it aligns under the wordmark. */
  padding-left: 36px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper-55);
  white-space: nowrap;
}
@media (max-width: 420px) {
  /* Too tight beside the menu button on the smallest screens. */
  .brandlock small { display: none; }
}