/*
 * Axel CRM — the marketing site's design system.
 *
 * One stylesheet for every public page: the homepage, the SEO landing pages,
 * pricing, contact and the legal pages. Page-specific rules live at the
 * bottom under a page class, so that a change to a token here reaches all of
 * them rather than one of them.
 *
 * Loaded as /css/axel.css?v=<filemtime>, so a deploy busts the cache.
 */
/* Reset — the artifact host supplied this; a standalone page needs its own. */
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none !important}

/* ──────────────────────────────────────────────────────────────────────────
   Axel CRM — homepage
   Layout: editorial, left-aligned, 1180px measure. Asymmetric 7:5 hero.
   Light the whole way down with one navy band at Capabilities, so the
   product story stays bright and the "what you get" block lands hard.
   Committed single (light) theme: this is a marketing site, and it should
   look the same for every visitor the way the real axelcrm.com does.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  color-scheme: light;

  /* Color */
  --paper:#FCFBF9;        /* warm white page */
  --paper-2:#F1F4F4;      /* pale neutral band, biased toward the teal */
  --card:#FFFFFF;
  --ink:#0A0E2A;          /* deep navy — all primary type */
  --ink-2:#474D66;        /* secondary type */
  --ink-3:#767C92;        /* captions, meta */
  --line:#E3E7E7;
  --line-2:#EDEFEE;
  --teal:#14C0C0;         /* brand accent — graphics, rules, marks */
  --teal-ink:#0B7A7A;     /* 5.1:1 on white — every button and small text */
  --teal-wash:#E6F6F6;
  --sky:#60A5FA;          /* supporting highlight only, never text */
  --sky-wash:#EAF2FE;
  --amber-ink:#8A5A00;
  --amber-wash:#FDF3DF;

  /* Type */
  --display:"Manrope", ui-sans-serif, system-ui, sans-serif;
  --body:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Scale */
  --r:14px;               /* consistent card radius */
  --r-sm:9px;
  --shadow:0 1px 2px rgba(10,14,42,.04), 0 8px 24px -12px rgba(10,14,42,.14);
  --shadow-lg:0 2px 4px rgba(10,14,42,.05), 0 28px 60px -28px rgba(10,14,42,.28);
}

*{box-sizing:border-box}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* Paints the strip above a sticky header on phones with a notch. */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}

h1,h2,h3,h4{font-family:var(--display); color:var(--ink); margin:0; text-wrap:balance; letter-spacing:-.022em}
h1{font-size:clamp(2.1rem,1.3rem + 2.9vw,3.45rem); line-height:1.07; font-weight:800}
h2{font-size:clamp(1.65rem,1.2rem + 1.6vw,2.3rem); line-height:1.15; font-weight:800}
h3{font-size:1.0625rem; line-height:1.35; font-weight:700}
p{margin:0}
a{color:var(--teal-ink)}
img,svg{max-width:100%}

.wrap{
  max-width:1180px; margin-inline:auto;
  padding-left:max(20px, env(safe-area-inset-left, 0px));
  padding-right:max(20px, env(safe-area-inset-right, 0px));
}
section{scroll-margin-top:84px}
.band{background:var(--paper-2)}
.band-navy{background:var(--ink); color:#fff}
.pad{padding-block:clamp(56px,7vw,96px)}
.pad-sm{padding-block:clamp(36px,4vw,54px)}

.eyebrow{
  font-family:var(--display); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal-ink);
}
.lede{font-size:1.0625rem; color:var(--ink-2); max-width:62ch}
.muted{color:var(--ink-3)}
.tnum{font-variant-numeric:tabular-nums}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-weight:700; font-size:.9375rem;
  padding:12px 22px; border-radius:10px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn-primary{background:var(--teal-ink); color:#fff}
.btn-primary:hover{background:#096A6A}
.btn-secondary{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-secondary:hover{border-color:var(--ink-3); background:#fff}
.btn-quiet{background:transparent; color:var(--ink); padding:9px 14px}
.btn-quiet:hover{background:rgba(10,14,42,.05)}
.btn-onnavy{background:#fff; color:var(--ink)}
.btn-onnavy:hover{background:#EAF3F3}
.btn-ghost-navy{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost-navy:hover{border-color:rgba(255,255,255,.6)}
.btn-sm{padding:9px 16px; font-size:.875rem}
.btn-block{width:100%}

.link-arrow{
  font-family:var(--display); font-weight:700; font-size:.9375rem;
  color:var(--teal-ink); text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.link-arrow:hover{text-decoration:underline}
.link-arrow span{transition:transform .16s ease}
.link-arrow:hover span{transform:translateX(3px)}

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--teal-ink); outline-offset:3px; border-radius:6px;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.8125rem; font-weight:600; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 13px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none}

/* ── Header ────────────────────────────────────────────────────────────── */
.hdr{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:rgba(252,251,249,.9); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-2);
}
.hdr-in{display:flex; align-items:center; gap:10px; height:66px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:14px}
.brand-name{font-family:var(--display); font-weight:800; font-size:1.0625rem; color:var(--ink); letter-spacing:-.02em}
.brand-name i{color:var(--teal-ink); font-style:normal}

.nav{display:flex; align-items:center; gap:2px; flex:1}
.nav-item{position:relative}
.nav-btn{
  font-family:var(--display); font-weight:600; font-size:.9375rem; color:var(--ink);
  background:none; border:none; cursor:pointer; padding:9px 13px; border-radius:8px;
  display:inline-flex; align-items:center; gap:5px; text-decoration:none;
}
.nav-btn:hover{background:rgba(10,14,42,.05)}
.nav-btn .caret{width:9px;height:9px;transition:transform .18s ease; color:var(--ink-3)}
.nav-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav-btn[aria-expanded="true"]{background:rgba(10,14,42,.05)}

.menu{
  position:absolute; top:calc(100% + 9px); left:0; z-index:5;
  min-width:286px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-lg); padding:8px;
}
.menu a{
  display:block; padding:10px 12px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink);
}
.menu a:hover{background:var(--paper-2)}
.menu strong{display:block; font-family:var(--display); font-weight:700; font-size:.9375rem}
.menu small{display:block; color:var(--ink-3); font-size:.8125rem; line-height:1.45; margin-top:1px}

.hdr-cta{display:flex; align-items:center; gap:8px}
.burger{display:none; background:none; border:1px solid var(--line); border-radius:9px; padding:8px 10px; cursor:pointer}
.burger svg{display:block; width:20px; height:20px; color:var(--ink)}

.mnav{display:none; border-top:1px solid var(--line-2); background:var(--paper)}
.mnav.open{display:block}
.mnav-in{padding-block:14px 22px; display:grid; gap:4px}
.mnav details{border-bottom:1px solid var(--line-2)}
.mnav summary{
  list-style:none; cursor:pointer; padding:13px 2px;
  font-family:var(--display); font-weight:700; font-size:1rem;
  display:flex; align-items:center; justify-content:space-between;
}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"+"; color:var(--ink-3); font-weight:600}
.mnav details[open] summary::after{content:"–"}
.mnav details div{padding-bottom:10px; display:grid; gap:2px}
.mnav details a{padding:8px 2px; text-decoration:none; color:var(--ink-2); font-size:.9375rem}
.mnav > .mnav-in > a.mlink{padding:13px 2px; font-family:var(--display); font-weight:700; font-size:1rem; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2)}
.mnav-cta{display:grid; gap:9px; margin-top:16px}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5.6fr); gap:clamp(28px,4vw,56px); align-items:center}
.hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:18px; min-width:0}
.hero h1{margin-top:2px}
.hero .lede{font-size:1.125rem; max-width:34ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:2px}
.reassure{display:flex; align-items:center; gap:8px; font-size:.875rem; color:var(--ink-3)}
.reassure svg{width:16px;height:16px;color:var(--teal-ink);flex:none}

/* ── Product preview ───────────────────────────────────────────────────── */
.preview{position:relative; min-width:0}
.app{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.app-bar{
  display:flex; align-items:center; gap:9px; padding:11px 14px;
  border-bottom:1px solid var(--line-2); background:#FCFDFD;
}
.app-dots{display:flex; gap:5px}
.app-dots i{width:9px;height:9px;border-radius:50%;background:#E0E4E4;display:block}
.app-title{font-family:var(--display); font-weight:700; font-size:.8125rem; color:var(--ink-2)}
.app-tag{
  margin-left:auto; font-family:var(--mono); font-size:.6875rem;
  color:var(--teal-ink); background:var(--teal-wash); padding:3px 8px; border-radius:5px;
}
.board{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; padding:14px; background:#FAFBFB}
.col-head{display:flex; align-items:center; gap:5px; margin-bottom:8px}
.col-name{font-family:var(--display); font-weight:700; font-size:.6875rem; color:var(--ink-2); letter-spacing:.02em}
.col-count{font-size:.625rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.rail{height:2.5px; border-radius:2px; margin-bottom:9px}
.lead{
  background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:9px 10px; margin-bottom:7px; box-shadow:0 1px 2px rgba(10,14,42,.04);
}
.lead b{display:block; font-family:var(--display); font-size:.75rem; font-weight:700; color:var(--ink); line-height:1.3}
.lead span{display:block; font-size:.6875rem; color:var(--ink-3); margin-top:2px; line-height:1.35}
.lead em{
  display:inline-block; font-style:normal; font-size:.625rem; font-weight:600;
  margin-top:6px; padding:2px 7px; border-radius:5px;
}
.src-ig{background:#FDEEF4;color:#9D2B5E}
.src-wa{background:#E8F7EC;color:#1A6B38}
.src-web{background:var(--sky-wash);color:#1C4E9C}
.src-paid{background:var(--teal-wash);color:var(--teal-ink)}
.src-due{background:var(--amber-wash);color:var(--amber-ink)}

.float{
  position:absolute; display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:9px 13px; box-shadow:var(--shadow-lg); font-size:.8125rem; font-weight:600; color:var(--ink);
}
.float svg{width:17px;height:17px;flex:none}
.float-1{left:-14px; top:28%}
.float-2{right:-10px; bottom:12%}
.preview-note{
  margin-top:11px; font-size:.75rem; color:var(--ink-3); text-align:center;
}

/* ── Walkthrough strip (early trust) ───────────────────────────────────── */
.strip{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between}
.strip-steps{display:flex; flex-wrap:wrap; gap:8px}
.strip-steps a{text-decoration:none}
.strip-steps a:hover .chip{border-color:var(--teal-ink); color:var(--teal-ink)}
.strip-steps .chip{transition:border-color .16s, color .16s}
.strip-n{
  font-family:var(--mono); font-size:.6875rem; color:var(--teal-ink);
  background:var(--teal-wash); width:18px;height:18px;border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}

/* ── Problem ───────────────────────────────────────────────────────────── */
.prob{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,4vw,60px); align-items:center}
.prob-list{display:grid; gap:14px; margin-top:22px; padding:0; list-style:none}
.prob-list li{display:flex; gap:12px; align-items:flex-start}
.prob-x{
  flex:none; width:21px; height:21px; border-radius:6px; margin-top:1px;
  background:#FBEDED; color:#A33A3A;
  display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700;
}
.prob-list b{font-family:var(--display); font-weight:700; display:block; font-size:.9375rem}
.prob-list span{font-size:.9375rem; color:var(--ink-2)}

.converge{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center}
.sources{display:grid; gap:9px}
.src{
  display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:9px 13px; font-size:.8125rem; font-weight:600; color:var(--ink-2);
}
.src svg{width:16px;height:16px;flex:none;color:var(--ink-3)}
.lines{width:54px; color:var(--teal); flex:none}
.record{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.record-h{padding:12px 15px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:8px}
.record-h b{font-family:var(--display); font-size:.875rem}
.record dl{margin:0; padding:13px 15px; display:grid; grid-template-columns:auto 1fr; gap:9px 14px; font-size:.8125rem}
.record dt{color:var(--ink-3)}
.record dd{margin:0; font-weight:600; color:var(--ink)}
.record-f{padding:11px 15px; border-top:1px solid var(--line-2); background:var(--teal-wash); font-size:.8125rem; color:var(--teal-ink); font-weight:600}

/* ── Workflow tabs ─────────────────────────────────────────────────────── */
.wf{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(24px,3.5vw,52px); margin-top:40px; align-items:start}
.wf-tabs{display:grid; gap:7px}
.wf-tab{
  display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start; text-align:left;
  background:none; border:1px solid transparent; border-radius:var(--r); padding:15px 16px; cursor:pointer;
  transition:background .16s, border-color .16s;
}
.wf-tab:hover{background:#fff}
.wf-tab[aria-selected="true"]{background:#fff; border-color:var(--line); box-shadow:var(--shadow)}
.wf-num{
  width:27px;height:27px;border-radius:8px; flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono); font-size:.75rem; font-weight:600;
  background:var(--paper-2); color:var(--ink-3);
}
.wf-tab[aria-selected="true"] .wf-num{background:var(--teal-ink); color:#fff}
.wf-tab b{display:block; font-family:var(--display); font-size:1rem; font-weight:700; color:var(--ink)}
.wf-tab span{display:block; font-size:.875rem; color:var(--ink-2); margin-top:2px; line-height:1.45}
.wf-panel{min-width:0}

/* ── Small product views used inside the workflow panels ───────────────── */
.view{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.view-h{
  padding:11px 15px; border-bottom:1px solid var(--line-2); background:#FCFDFD;
  display:flex; align-items:center; gap:8px;
}
.view-h b{font-family:var(--display); font-size:.8125rem; color:var(--ink-2)}
.view-h .app-tag{margin-left:auto}
.view-b{padding:16px}
.field{margin-bottom:11px}
.field label{display:block; font-size:.6875rem; font-weight:600; color:var(--ink-3); margin-bottom:4px; letter-spacing:.02em; text-transform:uppercase}
.field div{border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-size:.8125rem; color:var(--ink-2); background:#FCFDFD}
.timeline{display:grid; gap:0; list-style:none; margin:0; padding:0}
.timeline li{display:grid; grid-template-columns:auto 1fr; gap:13px; padding-bottom:16px; position:relative}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:""; position:absolute; left:13px; top:26px; bottom:0; width:1.5px; background:var(--line);
}
.timeline li:last-child::before{display:none}
.tl-dot{
  width:27px;height:27px;border-radius:8px;flex:none; z-index:1;
  display:flex;align-items:center;justify-content:center; font-size:.6875rem; font-weight:700;
  background:var(--teal-wash); color:var(--teal-ink); font-family:var(--mono);
}
.timeline b{display:block; font-family:var(--display); font-size:.875rem}
.timeline span{display:block; font-size:.8125rem; color:var(--ink-3); margin-top:1px}
.slots{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:8px}
.slot{
  border:1px solid var(--line); border-radius:9px; padding:10px; text-align:center;
  font-size:.8125rem; font-weight:600; color:var(--ink-2); background:#FCFDFD;
}
.slot.on{border-color:var(--teal-ink); background:var(--teal-wash); color:var(--teal-ink)}
.inv{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.inv b{font-family:var(--display); font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums}
.paid{font-size:.75rem; font-weight:700; color:#1A6B38; background:#E8F7EC; padding:3px 9px; border-radius:6px}

/* ── Capabilities (navy) ───────────────────────────────────────────────── */
.band-navy h2, .band-navy h3{color:#fff}
.band-navy .eyebrow{color:var(--teal)}
.band-navy .lede{color:#B4BACD}
.cap-theme{
  display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:clamp(18px,3vw,44px);
  padding-block:30px; border-top:1px solid rgba(255,255,255,.12);
}
.cap-theme:first-of-type{border-top:none}
.cap-label{display:flex; align-items:baseline; gap:10px}
.cap-label h3{font-size:1.25rem; letter-spacing:-.02em}
.cap-pair{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:clamp(16px,2.4vw,34px)}
.cap b{display:block; font-family:var(--display); font-weight:700; font-size:1rem; color:#fff; margin-bottom:5px}
.cap p{font-size:.9375rem; color:#B4BACD; line-height:1.55}
.cap-mark{display:flex; align-items:center; gap:7px; margin-bottom:9px; color:var(--teal)}
.cap-mark svg{width:17px;height:17px}
.cap-foot{margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.band-navy .link-arrow{color:var(--teal)}

/* ── Audience ──────────────────────────────────────────────────────────── */
.aud{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:18px; margin-top:38px}
.aud .card{display:flex; flex-direction:column; gap:11px}
.aud-icon{width:38px;height:38px;border-radius:10px;background:var(--teal-wash);color:var(--teal-ink);display:flex;align-items:center;justify-content:center}
.aud-icon svg{width:20px;height:20px}
.aud p{font-size:.9375rem; color:var(--ink-2)}
.aud-flow{
  margin-top:auto; padding-top:13px; border-top:1px dashed var(--line);
  font-size:.8125rem; color:var(--ink-3); line-height:1.5;
}
.aud-flow b{font-family:var(--display); color:var(--ink-2); font-weight:700}

/* ── Onboarding ────────────────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:18px; margin-top:38px; counter-reset:s}
.step{position:relative; padding-top:20px; border-top:2.5px solid var(--line)}
.step.live{border-top-color:var(--teal)}
.step-n{font-family:var(--mono); font-size:.75rem; color:var(--teal-ink); font-weight:600}
.step h3{margin-top:7px}
.step p{font-size:.9375rem; color:var(--ink-2); margin-top:6px}

/* ── Placeholder (customer proof) ──────────────────────────────────────── */
.placeholder{
  border:1.5px dashed #C9CFCF; border-radius:var(--r); padding:clamp(22px,3.5vw,38px);
  background:repeating-linear-gradient(135deg, transparent, transparent 11px, rgba(10,14,42,.016) 11px, rgba(10,14,42,.016) 22px);
}
.ph-tag{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--amber-ink);
  background:var(--amber-wash); border-radius:6px; padding:4px 9px; margin-bottom:14px;
}
.ph-needs{display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:10px; margin-top:18px; padding:0; list-style:none}
.ph-needs li{font-size:.8125rem; color:var(--ink-2); background:#fff; border:1px solid var(--line); border-radius:9px; padding:10px 13px}

/* ── Pricing ───────────────────────────────────────────────────────────── */
.toggle{display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; gap:2px}
.toggle button{
  font-family:var(--display); font-weight:700; font-size:.875rem; color:var(--ink-2);
  background:none; border:none; border-radius:999px; padding:8px 17px; cursor:pointer;
  transition:background .16s, color .16s;
}
.toggle button[aria-pressed="true"]{background:var(--ink); color:#fff}
.save{font-size:.75rem; font-weight:700; color:var(--teal-ink); margin-left:3px}

.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(214px,1fr)); gap:14px; margin-top:28px; align-items:stretch}
.plan{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px;
  display:flex; flex-direction:column; gap:12px;
}
.plan.featured{border-color:var(--teal-ink); box-shadow:0 0 0 1px var(--teal-ink), var(--shadow)}
.plan-top{display:flex; align-items:center; gap:8px; min-height:22px}
.plan-name{font-family:var(--display); font-weight:800; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.pop{font-size:.625rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--teal-ink); background:var(--teal-wash); padding:3px 8px; border-radius:5px; margin-left:auto}
.price{display:flex; align-items:baseline; gap:3px; font-family:var(--display)}
.price b{font-size:2rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.price i{font-style:normal; font-size:1.125rem; font-weight:700; color:var(--ink-2)}
.price u{text-decoration:none; font-size:.8125rem; font-weight:600; color:var(--ink-3)}
.plan-for{font-size:.8125rem; color:var(--ink-3); min-height:2.6em; line-height:1.4}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:.8125rem; color:var(--ink-2)}
.plan li{display:flex; gap:8px; align-items:flex-start}
.tick{flex:none; width:15px;height:15px; color:var(--teal-ink); margin-top:2px}
.plan .btn{margin-top:auto}

.offer{
  margin-top:22px; border:1px solid var(--line); border-left:3px solid var(--teal);
  background:#fff; border-radius:var(--r); padding:18px 20px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center;
}
.offer b{font-family:var(--display); font-size:.9375rem; display:block; margin-bottom:4px}
.offer p{font-size:.8125rem; color:var(--ink-2); line-height:1.5}
.pricing-note{margin-top:18px; font-size:.8125rem; color:var(--ink-3); line-height:1.6; max-width:76ch}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{max-width:820px; margin-top:34px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:17px 34px 17px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:1rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg); transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-a{padding:0 44px 19px 0; font-size:.9375rem; color:var(--ink-2); line-height:1.65}
.faq-a p + p{margin-top:10px}

/* ── Final CTA + demo form ─────────────────────────────────────────────── */
.final{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(28px,4vw,60px); align-items:start}
.form{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:clamp(20px,2.6vw,28px)}
.form h3{margin-bottom:4px}
.form-sub{font-size:.875rem; color:var(--ink-3); margin-bottom:18px}
.fg{margin-bottom:14px}
.fg label{display:block; font-size:.8125rem; font-weight:600; color:var(--ink-2); margin-bottom:5px}
.fg .req{color:#A33A3A}

/* Dial code and number as a single control, matching the signup form at
   /step1: one border around both, a divider between them, and the focus ring
   on the wrapper so the pair lights up together rather than one half of it. */
.phone{
  display:grid; grid-template-columns:auto 1fr;
  border:1px solid var(--line); border-radius:9px; background:#fff;
  overflow:hidden; transition:border-color .16s, box-shadow .16s;
}
.phone:focus-within{border-color:var(--teal-ink); box-shadow:0 0 0 3px rgba(11,122,122,.12)}
.phone select{
  width:auto; border:none; border-right:1px solid var(--line); border-radius:0;
  background:#fff; padding:11px 9px 11px 13px;
  font-family:var(--display); font-weight:700; font-size:.875rem; color:var(--ink);
  font-variant-numeric:tabular-nums; cursor:pointer;
}
.phone input{border:none; border-radius:0; background:#fff}
.phone select:focus, .phone input:focus{outline:none; box-shadow:none}
.phone[data-invalid="true"]{border-color:#C04A4A; background:#FFFCFC}
.fg input, .fg select{
  width:100%; font-family:var(--body); font-size:.9375rem; color:var(--ink);
  border:1px solid var(--line); border-radius:9px; padding:11px 13px; background:#fff;
  transition:border-color .16s, box-shadow .16s;
}
.fg input:focus, .fg select:focus{border-color:var(--teal-ink); box-shadow:0 0 0 3px rgba(11,122,122,.12); outline:none}
.fg input[aria-invalid="true"], .fg select[aria-invalid="true"]{border-color:#C04A4A; background:#FFFCFC}
.err{display:block; font-size:.8125rem; color:#A33A3A; margin-top:5px}
.err[hidden]{display:none}
.form-note{font-size:.75rem; color:var(--ink-3); margin-top:11px; line-height:1.5}
.alert{border-radius:10px; padding:13px 15px; font-size:.875rem; margin-bottom:16px; line-height:1.5}
.alert-ok{background:#E8F7EC; color:#17603A; border:1px solid #BFE5CC}
.alert-bad{background:#FBEDED; color:#8F3232; border:1px solid #F0CFCF}
.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── Footer ────────────────────────────────────────────────────────────── */
.ft{background:var(--ink); color:#A9AFC4}
.ft-top{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(130px,1fr)); gap:clamp(24px,3vw,40px); padding-block:clamp(40px,5vw,62px) 34px}
.ft h4{font-family:var(--display); font-size:.75rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#fff; margin-bottom:13px}
.ft ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.ft a{color:#A9AFC4; text-decoration:none; font-size:.875rem}
.ft a:hover{color:#fff}
.ft-about p{font-size:.875rem; line-height:1.6; margin-top:12px; max-width:38ch}
.ft-contact{display:grid; gap:7px; margin-top:16px; font-size:.875rem; line-height:1.55}
.ft-contact strong{color:#fff; font-weight:600}
.ft-bot{
  border-top:1px solid rgba(255,255,255,.1); padding-block:20px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.8125rem;
}
.ft-portals{display:flex; flex-wrap:wrap; gap:16px}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr; gap:36px}
  .hero .lede{max-width:58ch}
  .float-1{left:-6px}
  .float-2{right:-4px}
  .final{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav, .hdr-cta .btn-quiet{display:none}
  .burger{display:block}
  .hdr-cta{margin-left:auto}
  .wf{grid-template-columns:1fr; gap:26px}
  .wf-tabs{display:none}
  .wf-panel[hidden]{display:block !important}
  .wf-stack-head{display:flex !important}
  .prob{grid-template-columns:1fr}
  .cap-theme{grid-template-columns:1fr; gap:16px}
  .offer{grid-template-columns:1fr}
}
@media (max-width:720px){
  .converge{grid-template-columns:1fr; gap:16px}
  .lines{display:none}
  .sources{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .board{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .float{position:static; margin-top:10px; width:100%}
  .float-1{margin-top:12px}
  .ft-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){
  .board{grid-template-columns:1fr}
  .board .col:nth-child(n+3){display:none}
  .hero-cta .btn{flex:1 1 100%}
  .ft-top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:11px 18px;border-radius:0 0 9px 0;z-index:100;text-decoration:none;font-weight:600}
.skip:focus{left:0}
.wf-stack-head{display:none; align-items:center; gap:11px; margin-bottom:13px}

/* ──────────────────────────────────────────────────────────────────────────
   Prose pages — terms, privacy, support, docs.
   Long-form reading, so the measure is tight and the rhythm is vertical.
   ────────────────────────────────────────────────────────────────────────── */
.page-head {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-2);
  padding-block: clamp(40px, 5vw, 62px) clamp(28px, 3.5vw, 40px);
}
.page-head h1 {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem);
  margin: 10px 0 0;
}
.page-head .updated { font-size: .8125rem; color: var(--ink-3); margin-top: 10px; }

.prose { max-width: 74ch; padding-block: clamp(34px, 4vw, 54px) clamp(50px, 6vw, 80px); }
.prose h2 {
  font-family: var(--display); font-size: 1.1875rem; font-weight: 700;
  color: var(--ink); letter-spacing: -.015em; margin: 36px 0 10px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1rem; margin: 26px 0 8px; }
.prose p, .prose li { font-size: .9688rem; line-height: 1.75; color: var(--ink-2); }
.prose p { margin: 0 0 13px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 16px; }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: .9rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.prose th { font-family: var(--display); color: var(--ink); font-weight: 700; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 32px 0; }