/* ════════════════════════════════════════════════════════════════════════
   axiom:void — design system  ·  techno aesthetic ("Matrix")
   ────────────────────────────────────────────────────────────────────────
   Reusable, page-agnostic CSS. Extracted from the approved pricing.html
   prototype (see _design-reference-pricing.html). Every page links this file
   and builds from the SAME tokens + components (.wrap / .section / .head /
   .btn / cards / table). Sharp corners, thin --line dividers, mono numerals,
   vertical section numbers, emerald accent.
   Old rounded-corner system backed up as styles.css.bak-old-20260616.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════ TOKENS ════════════ */
:root{
  --bg:#070F0C;       --bg-2:#0C1714;          /* page bg / raised surface  */
  --ink:#E8F0EC;      --ink-dim:#7E9389;       /* primary / secondary text  */
  --line:#1B2A24;     --accent:#34D399;        /* hairline / emerald accent */
  --accent-dim:#1C6B50;                         /* quiet emerald (marks)     */
  --muted:#5F756C;                              /* tertiary labels / units   */
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --maxw:1180px;
  --pad:48px;         /* left gutter holding the vertical section number */
  --t:.18s cubic-bezier(.2,.7,.2,1);
}

/* ════════════ RESET + BASE ════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink-dim);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 520px at 88% -8%, rgba(52,211,153,.06), transparent 60%);
}
::selection{background:var(--accent);color:var(--bg)}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ════════════ TYPE ════════════ */
h1,h2,h3{font-family:var(--body);color:var(--ink);font-weight:600;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(38px,6.4vw,66px)}
h2{font-size:clamp(25px,3.4vw,36px)}
h3{font-size:18px;letter-spacing:-.01em}
.eyebrow{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}

/* ════════════ NAV ════════════ */
nav{position:sticky;top:0;z-index:50;background:rgba(7,15,12,.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin-inline:auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-family:var(--body);font-weight:700;letter-spacing:-.02em;color:var(--ink);font-size:18px}
.logo i{color:var(--accent);font-style:normal}
.nav-links{display:flex;gap:26px;align-items:center;list-style:none}
.nav-links a{font-size:14px;color:var(--ink-dim);transition:color var(--t)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.nav-cta{border:1px solid var(--line);padding:8px 16px;font-size:13px;color:var(--ink)}
.nav-links a.nav-cta:hover{border-color:var(--accent);color:var(--accent)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav-toggle span{width:22px;height:2px;background:var(--ink);transition:var(--t)}
@media(max-width:880px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--bg-2);border-bottom:1px solid transparent;padding:0 24px;
    max-height:0;overflow:hidden;transition:max-height var(--t)}
  .nav-links.open{max-height:520px;padding:8px 24px 20px;border-bottom-color:var(--line)}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:12px 0;width:100%}
  .nav-links a.nav-cta{margin-top:8px;text-align:center}
}

/* ════════════ SECTION SHELL + vertical number ════════════
   Generic: any page wraps content in <section class="section"> with an
   optional <span class="section__num"><b>01</b> / LABEL</span>. Add the
   `.hero` modifier on the first section. */
.section{position:relative;padding-block:clamp(72px,9.5vw,120px);border-top:1px solid var(--line)}
.section:first-of-type{border-top:none}
.section__num{position:absolute;left:max(calc((100vw - var(--maxw))/2 + 6px),10px);top:clamp(72px,9.5vw,120px);
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.30em;color:var(--ink-dim);
  writing-mode:vertical-rl;display:flex;align-items:center;gap:16px}
.section__num b{color:var(--accent);font-weight:600}
.section__num::after{content:"";writing-mode:initial;width:1px;height:56px;background:linear-gradient(var(--line),transparent)}
.section .wrap{padding-left:var(--pad)}
@media(max-width:880px){
  .section__num{position:static;writing-mode:initial;margin-bottom:22px;padding-left:24px;color:var(--ink-dim)}
  .section__num::after{display:none}
  .section .wrap{padding-left:24px}
  .section:first-of-type{padding-top:clamp(28px,5vh,48px)}
}

/* two-column section heading: title left, copy right (.head.single = one col) */
.head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:end;margin-bottom:56px}
.head .eyebrow{margin-bottom:18px}
.head h2 em{font-style:normal;color:var(--accent)}
.head p{font-size:16.5px;color:var(--ink-dim);max-width:56ch}
.head.single{grid-template-columns:1fr;align-items:start}
@media(max-width:880px){.head{grid-template-columns:1fr;gap:22px;margin-bottom:40px;align-items:start}}

/* ════════════ HERO ════════════ */
.hero .hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:end}
.hero .eyebrow{margin-bottom:26px}
.hero h1 span{color:var(--accent)}
.hero-lead{font-size:17.5px;color:var(--ink-dim);max-width:48ch;padding-bottom:6px}
@media(max-width:880px){.hero .hero-grid{grid-template-columns:1fr;gap:26px;align-items:start}}

/* ════════════ CARD GRID (sharp, bordered) ════════════
   .grid2 / .grid3 / .grid4 — equal columns joined by hairlines; collapse to
   one column under 880px. Drop any number of <div class="card"> inside. */
.grid2,.grid3,.grid4{display:grid;gap:0;border:1px solid var(--line)}
.grid2{grid-template-columns:repeat(2,1fr)}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid4{grid-template-columns:repeat(4,1fr)}
.grid2 > *,.grid3 > *,.grid4 > *{border-left:1px solid var(--line)}
.grid2 > *:first-child,.grid3 > *:first-child,.grid4 > *:first-child{border-left:none}
@media(max-width:880px){
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .grid2 > *,.grid3 > *,.grid4 > *{border-left:none;border-top:1px solid var(--line)}
  .grid2 > *:first-child,.grid3 > *:first-child,.grid4 > *:first-child{border-top:none}
}

.card{position:relative;background:transparent;padding:36px 30px;display:flex;flex-direction:column}
.card.pop{background:var(--bg-2)}                                   /* featured fill */
.card.pop::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--accent)}
.badge{position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bg);background:var(--accent);padding:4px 9px;font-weight:600}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}

/* card: stacked pay rows (one-time vs setup, etc.) */
.pay{display:flex;flex-direction:column;gap:0;margin:0 0 26px}
.pay-row{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.pay-row:first-child{padding-top:0}
.pay-row:last-child{border-bottom:none;padding-bottom:0}
.pay-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pay-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:23px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.card.pop .pay-v{color:var(--ink)}
.pay-v em{font-style:normal;font-family:var(--body);font-size:12px;color:var(--muted);margin-left:7px;letter-spacing:0;font-weight:400}

/* card: big price + feature list */
.price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:44px;color:var(--ink);letter-spacing:-.03em;line-height:1}
.card.pop .price{color:var(--accent)}
.price .per{font-family:var(--mono);font-size:14px;color:var(--muted);font-weight:400;letter-spacing:0}
.who{margin:20px 0 24px;font-size:14px;color:var(--ink-dim);line-height:1.55}
.feat{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
.feat li{position:relative;padding-left:24px;font-size:14px;color:var(--ink-dim);line-height:1.5}
.feat li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border:1px solid var(--accent-dim);background:transparent}
.card.pop .feat li::before{border-color:var(--accent)}
.feat li b{color:var(--ink);font-weight:600}

.learn{margin-top:auto;font-family:var(--mono);font-size:13px;color:var(--ink-dim);transition:color var(--t)}
.learn:hover{color:var(--accent)}

/* ════════════ BUTTONS ════════════
   .btn = outline (secondary) · .btn.solid = emerald fill (primary). Mono. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;
  border:1px solid var(--line);color:var(--ink);transition:var(--t);min-height:46px}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.solid{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn.solid:hover{filter:brightness(1.08);color:var(--bg)}
.plan-cta{margin-top:auto;display:block}
.plan-cta .btn{width:100%}

/* connector line (e.g. between two pricing models) */
.connector{margin-top:40px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink-dim)}
.connector::before{content:"↓ ";color:var(--muted)}

/* ════════════ EXPLAINER BLOCKS ════════════ */
.blocks{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);margin-bottom:56px}
.block{padding:28px 30px;border-top:1px solid var(--line);border-left:2px solid var(--accent-dim)}
.block:first-child{border-top:none}
.block h3{font-size:16px;margin-bottom:12px}
.block p{font-size:14px;line-height:1.6;color:var(--ink-dim);max-width:80ch}
.block p + p{margin-top:10px}
.block p b{color:var(--ink);font-weight:600}
.block .pts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;margin-top:4px}
.block .pts li{position:relative;padding-left:20px;font-size:14px;color:var(--ink-dim);line-height:1.5}
.block .pts li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;background:var(--accent-dim)}
.block .pts li b{color:var(--ink);font-weight:600}
@media(max-width:880px){.block .pts{grid-template-columns:1fr}}

/* ════════════ COMPARE TABLE (techno) ════════════ */
.cmp-wrap{border:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:640px}
thead th{position:sticky;top:0;background:var(--bg);text-align:center;padding:18px 20px;border-bottom:1px solid var(--line);
  font-family:var(--body);font-size:14px;color:var(--ink);font-weight:600}
thead th .p{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400;margin-top:4px}
thead th:first-child{text-align:left}
thead th.g,tbody td.g{background:var(--bg-2)}                       /* highlighted column */
tbody th{text-align:left;font-family:var(--body);font-weight:400;color:var(--ink-dim);padding:16px 20px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{text-align:center;padding:16px 20px;border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
tbody tr:hover td,tbody tr:hover th{background:var(--bg-2)}
.yes{color:var(--accent)}.no{color:var(--muted)}
.small-print{margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--muted)}

/* ════════════ FAQ ACCORDIONS ════════════ */
.acc{border:1px solid var(--line)}
.acc details{border-top:1px solid var(--line)}
.acc details:first-child{border-top:none}
.acc summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
.acc summary::-webkit-details-marker{display:none}
.acc summary h3{font-size:17px}
.acc summary .chev{flex-shrink:0;color:var(--muted);transition:transform var(--t)}
.acc details[open] summary .chev{transform:rotate(180deg)}
.acc-body{padding:0 26px 24px}
.acc-body p{font-size:14px;line-height:1.65;color:var(--ink-dim);max-width:74ch}
.acc-body p + p{margin-top:12px}
.acc-body strong{color:var(--ink);font-weight:600}

/* ════════════ CENTERED CTA SECTION ════════════ */
.cta{text-align:center;border-top:1px solid var(--line);padding-block:clamp(72px,9vw,110px)}
.cta .wrap{max-width:680px}
.cta .eyebrow{margin-bottom:22px}
.cta p{margin:18px auto 32px;color:var(--ink-dim);max-width:44ch}
.cta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ════════════ FOOTER ════════════ */
footer{border-top:1px solid var(--line);padding:30px 24px}
.foot-in{max-width:var(--maxw);margin-inline:auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.foot-in .logo{font-size:15px}
.foot-in a{color:var(--ink-dim);transition:color var(--t)}
.foot-in a:hover{color:var(--accent)}

/* ════════════ MOTION / A11Y ════════════ */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){.anim{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}