/* ============================================================
   Masava — marketing site shared stylesheet
   Tokens mirror the Masava Design System (theme.ts).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inconsolata:wght@400;500;600&display=swap');

:root {
  /* Neutrals */
  --neutral-25:#FCFCFD; --neutral-50:#F9FAFB; --neutral-100:#F3F4F6;
  --neutral-200:#E5E7EB; --neutral-300:#D2D6DB; --neutral-400:#9DA4AE;
  --neutral-500:#6C737F; --neutral-600:#4D5761; --neutral-700:#384250;
  --neutral-800:#1F2A37; --neutral-900:#111927; --neutral-950:#0D121C;

  /* Primary blue */
  --blue-25:#F6F8FE; --blue-50:#E8EDFC; --blue-100:#D7DFFD; --blue-200:#BECBFA;
  --blue-300:#97ABF5; --blue-400:#728EEF; --blue-500:#5374E8; --blue-600:#4467E2;
  --blue-700:#3F60D8; --blue-800:#3150BD; --blue-900:#2E469C; --blue-950:#313C64;

  /* Indigo + brand purple */
  --indigo-50:#EFE9FC; --indigo-100:#DFD3F8; --indigo-700:#7A4AD9; --indigo-800:#683BC2;
  --brand-purple:#9747FF;

  /* Semantic */
  --green-50:#E4FBF0; --green-100:#D1F5E3; --green-700:#2A8D5D; --green-800:#22774E;
  --red-50:#FEF2F3; --red-100:#FEE2E4; --red-700:#B41825; --red-800:#911822;
  --yellow-50:#FFF5E0; --yellow-100:#FEECC7; --yellow-600:#DC9403; --yellow-800:#93660D;

  /* Wine accents */
  --wine-red:#991b36; --wine-white:#f7d471; --wine-rose:#f3b9b9;
  --wine-orange:#e77e42; --wine-other:#cad3c8;

  /* Text */
  --text-primary:rgba(13,18,28,0.96);
  --text-secondary:rgba(13,18,28,0.78);
  --text-tertiary:rgba(13,18,28,0.50);
  --text-disabled:rgba(13,18,28,0.36);

  /* Surfaces & borders */
  --bg-paper-0:#FFFFFF; --bg-paper-1:var(--neutral-50); --bg-paper-2:var(--neutral-100);
  --divider:rgba(13,18,28,0.08);
  --outline-hairline:rgba(13,18,28,0.04);
  --outline-minimal:rgba(13,18,28,0.08);
  --outline-optimal:rgba(13,18,28,0.16);

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(16,24,40,0.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,0.10),0 1px 2px rgba(16,24,40,0.06);
  --shadow-md:0 4px 8px rgba(16,24,40,0.10),0 0 6px rgba(16,24,40,0.06);
  --shadow-lg:0 12px 16px rgba(16,24,40,0.08),0 0 4px rgba(16,24,40,0.04);
  --shadow-xl:0 20px 24px rgba(16,24,40,0.08),0 8px 8px rgba(16,24,40,0.03);
  --shadow-2xl:0 24px 48px rgba(16,24,40,0.18);
  --shadow-skeuomorphic:
    0 0 0 1px rgba(10,13,18,0.18) inset,
    0 -2px 0 0 rgba(10,13,18,0.05) inset,
    0 1px 2px 0 rgba(10,13,18,0.05);

  /* Radius */
  --radius-main:8px; --radius-card:12px; --radius-card-outside:16px; --radius-pill:9999px;

  /* Spacing — 8px base */
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-6:48px; --space-8:64px; --space-10:80px; --space-16:128px;

  /* Fonts */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-mono:'Inconsolata','SF Mono',Menlo,monospace;

  --maxw:1200px;
}

/* ─── Reset / base ─────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font-sans); color:var(--text-primary);
  background:var(--bg-paper-0); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,p { margin:0; }
a { color:inherit; text-decoration:none; }
img,svg { display:block; }
ul { margin:0; padding:0; list-style:none; }
::selection { background:var(--blue-100); }

:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px rgba(83,116,232,0.30);
  border-radius:4px;
}

.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ─── Layout primitives ───────────────────────────────────── */
.container { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section { padding:128px 0; }
.section.tight { padding:96px 0; }
.band { background:var(--neutral-50); }
.band-dark { background:var(--neutral-950); color:rgba(255,255,255,0.92); }

.eyebrow {
  font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--blue-700); margin-bottom:18px;
}
.band-dark .eyebrow { color:var(--blue-300); }

.section-head { max-width:720px; }
.section-head.center { margin:0 auto; text-align:center; }
h2.display {
  font-size:clamp(30px,3.6vw,40px); font-weight:600; line-height:1.12;
  letter-spacing:-1px; color:var(--neutral-950);
}
.band-dark h2.display { color:#fff; }
.lead {
  font-size:19px; line-height:1.55; color:var(--text-secondary);
  margin-top:18px; text-wrap:pretty;
}
.band-dark .lead { color:rgba(255,255,255,0.72); }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--font-sans); font-weight:500; font-size:15px; line-height:1;
  height:44px; padding:0 20px; border:0; border-radius:var(--radius-main);
  cursor:pointer; white-space:nowrap; transition:background .15s,box-shadow .15s,color .15s;
}
.btn svg { width:17px; height:17px; }
.btn.sm { height:38px; padding:0 16px; font-size:14px; }
.btn.primary { background:var(--blue-700); color:#fff; box-shadow:var(--shadow-skeuomorphic); }
.btn.primary:hover { background:var(--blue-800); }
.btn.secondary { background:#fff; color:var(--text-primary); box-shadow:inset 0 0 0 1px var(--outline-optimal),var(--shadow-xs); }
.btn.secondary:hover { background:var(--neutral-50); }
.btn.ghost { background:transparent; color:var(--text-secondary); }
.btn.ghost:hover { background:var(--action-hover,rgba(13,18,28,0.04)); color:var(--text-primary); }
.btn.on-dark { background:#fff; color:var(--neutral-950); box-shadow:var(--shadow-skeuomorphic); }
.btn.on-dark:hover { background:var(--neutral-100); }
.btn.ghost-dark { background:transparent; color:rgba(255,255,255,0.86); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.22); }
.btn.ghost-dark:hover { background:rgba(255,255,255,0.08); }

.btn-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ─── Brand mark ──────────────────────────────────────────── */
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--neutral-950); }
.brand-mark { width:24px; height:22px; color:var(--neutral-950); }
.brand-word { font-size:21px; font-weight:600; letter-spacing:-0.02em; color:var(--neutral-950); }
.band-dark .brand, .site-footer.band-dark .brand-word { color:#fff; }

/* ─── Header ──────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.82); backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s,box-shadow .2s;
}
.site-header.scrolled { border-bottom-color:var(--outline-minimal); box-shadow:var(--shadow-xs); }
.nav {
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  height:64px; display:flex; align-items:center; gap:32px;
}
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a {
  font-size:14px; font-weight:500; color:var(--text-secondary);
  padding:8px 12px; border-radius:7px; transition:background .12s,color .12s;
}
.nav-links a:hover { color:var(--text-primary); background:rgba(13,18,28,0.04); }
.nav-links a.current { color:var(--neutral-950); }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-signin { font-size:14px; font-weight:500; color:var(--text-secondary); padding:8px 12px; border-radius:7px; }
.nav-signin:hover { color:var(--text-primary); background:rgba(13,18,28,0.04); }
.nav-toggle {
  display:none; width:40px; height:40px; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:8px; cursor:pointer; color:var(--neutral-800);
}
.nav-toggle:hover { background:rgba(13,18,28,0.04); }

/* Mobile menu */
.mobile-menu {
  display:none; flex-direction:column; gap:4px;
  padding:8px 16px 20px; border-bottom:1px solid var(--outline-minimal); background:#fff;
}
.mobile-menu.open { display:flex; }
.mobile-menu a { font-size:16px; font-weight:500; padding:12px 8px; color:var(--text-primary); border-radius:8px; }
.mobile-menu a:hover { background:var(--neutral-50); }
.mobile-menu .btn { margin-top:8px; }

/* ─── Hero ────────────────────────────────────────────────── */
.hero { position:relative; overflow:hidden; padding:84px 0 104px; }
.hero-glow {
  position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:1100px; height:680px; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 50% 50% at 50% 40%, rgba(151,71,255,0.18), rgba(151,71,255,0) 70%);
}
.hero-inner { position:relative; z-index:1; text-align:center; max-width:880px; margin:0 auto; }
h1.hero-title {
  font-size:clamp(40px,6vw,68px); font-weight:600; line-height:1.06;
  letter-spacing:-1.8px; color:var(--neutral-950); text-wrap:balance;
}
.hero-sub {
  font-size:clamp(17px,1.6vw,20px); line-height:1.55; color:var(--text-secondary);
  margin:24px auto 0; max-width:620px; text-wrap:pretty;
}
.hero .btn-row { justify-content:center; margin-top:32px; }
.trust-line {
  margin-top:24px; font-size:13px; color:var(--text-tertiary);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.hero-shot { position:relative; z-index:1; max-width:1080px; margin:64px auto 0; padding:0 24px; }

/* ─── Browser frame ───────────────────────────────────────── */
.browser {
  background:#fff; border:1px solid var(--outline-minimal); border-radius:14px;
  box-shadow:var(--shadow-xl); overflow:hidden;
}
.browser-bar {
  display:flex; align-items:center; gap:14px; height:42px; padding:0 14px;
  background:var(--neutral-50); border-bottom:1px solid var(--outline-minimal);
}
.browser-dots { display:flex; gap:7px; }
.browser-dots i { width:11px; height:11px; border-radius:999px; background:var(--neutral-300); }
.browser-url {
  flex:1; max-width:340px; height:26px; display:flex; align-items:center; gap:7px;
  padding:0 12px; background:#fff; border:1px solid var(--outline-minimal);
  border-radius:7px; font-family:var(--font-mono); font-size:12px; color:var(--text-tertiary);
}
.browser-url svg { width:12px; height:12px; color:var(--green-700); }
.browser-body { background:#fff; }

/* ─── Chips ───────────────────────────────────────────────── */
.chip {
  display:inline-flex; align-items:center; gap:5px;
  height:22px; padding:0 9px; border-radius:999px;
  font-size:11px; font-weight:500; border:1px solid; white-space:nowrap;
}
.chip .dot { width:5px; height:5px; border-radius:999px; }
.chip.neutral { color:var(--text-secondary); background:var(--neutral-50); border-color:var(--outline-minimal); }
.chip.success { color:var(--green-800); background:var(--green-50); border-color:var(--green-100); }
.chip.warning { color:var(--yellow-800); background:var(--yellow-50); border-color:var(--yellow-100); }
.chip.danger { color:var(--red-800); background:var(--red-50); border-color:var(--red-100); }
.chip.primary { color:var(--blue-800); background:var(--blue-50); border-color:var(--blue-100); }

/* ─── Data table mockup ──────────────────────────────────── */
.dt-wrap { overflow:hidden; }
table.dt { width:100%; border-collapse:collapse; font-size:13px; }
table.dt th {
  text-align:left; padding:11px 16px; background:var(--neutral-50);
  font-size:10px; font-weight:600; color:var(--text-tertiary);
  text-transform:uppercase; letter-spacing:0.06em;
  border-bottom:1px solid var(--outline-minimal); white-space:nowrap;
}
table.dt td { padding:13px 16px; border-bottom:1px solid var(--outline-hairline); color:var(--text-secondary); white-space:nowrap; }
table.dt tbody tr:last-child td { border-bottom:0; }
table.dt tbody tr { transition:background .1s; }
table.dt tbody tr:hover td { background:var(--neutral-50); }
table.dt .num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; }
table.dt .id { font-family:var(--font-mono); color:var(--text-secondary); }
table.dt .acct { font-weight:500; color:var(--text-primary); }

/* ─── Feature rows ───────────────────────────────────────── */
.feature {
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;
}
.feature + .feature { margin-top:128px; }
.feature.flip .feature-copy { order:2; }
.feature.flip .feature-visual { order:1; }
.feature-copy h3 {
  font-size:clamp(26px,2.8vw,32px); font-weight:600; line-height:1.15;
  letter-spacing:-0.6px; color:var(--neutral-950);
}
.band-dark .feature-copy h3 { color:#fff; }
.feature-copy p { font-size:17px; line-height:1.6; color:var(--text-secondary); margin-top:16px; text-wrap:pretty; }
.band-dark .feature-copy p { color:rgba(255,255,255,0.72); }
.feature-list { margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.feature-list li { display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--text-secondary); }
.feature-list svg { width:18px; height:18px; color:var(--blue-700); flex:0 0 18px; margin-top:1px; }
.band-dark .feature-list li { color:rgba(255,255,255,0.78); }
.band-dark .feature-list svg { color:var(--blue-300); }

/* Generic card */
.card {
  background:#fff; border:1px solid var(--outline-minimal); border-radius:var(--radius-card);
  box-shadow:var(--shadow-xs); padding:24px; transition:box-shadow .18s,transform .18s;
}
.card.hover:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }

/* ─── Problem columns ────────────────────────────────────── */
.cols-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.problem-col { padding:28px 0 0; border-top:2px solid var(--neutral-200); }
.problem-col h4 { font-size:18px; font-weight:600; color:var(--neutral-900); letter-spacing:-0.2px; }
.problem-col p { font-size:15px; color:var(--text-tertiary); margin-top:10px; line-height:1.55; }

/* ─── Inventory panel mockup ─────────────────────────────── */
.inv-card { padding:0; overflow:hidden; }
.inv-head {
  display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid var(--outline-minimal); background:var(--neutral-50);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-tertiary);
}
.inv-row { padding:16px 18px; border-bottom:1px solid var(--outline-hairline); }
.inv-row:last-child { border-bottom:0; }
.inv-row-top { display:flex; align-items:center; gap:10px; }
.cat-dot { width:9px; height:9px; border-radius:999px; flex:0 0 9px; }
.inv-name { font-size:14px; font-weight:600; color:var(--text-primary); }
.inv-sku { font-family:var(--font-mono); font-size:12px; color:var(--text-tertiary); margin-left:auto; }
.inv-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:14px; background:var(--outline-hairline); border:1px solid var(--outline-hairline); border-radius:8px; overflow:hidden; }
.inv-stat { background:#fff; padding:10px 12px; }
.inv-stat .k { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-tertiary); }
.inv-stat .v { font-family:var(--font-mono); font-size:18px; font-weight:600; color:var(--neutral-950); margin-top:3px; }
.inv-stat.reserved .v { color:var(--text-tertiary); }

/* ─── Reconciliation diff card ───────────────────────────── */
.recon { padding:0; overflow:hidden; }
.recon-head { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--outline-minimal); }
.recon-head .id { font-family:var(--font-mono); font-size:13px; color:var(--text-secondary); }
.recon-head .ttl { font-size:15px; font-weight:600; color:var(--text-primary); }
.recon-cols { display:grid; grid-template-columns:1fr 1fr; }
.recon-col { padding:6px 0 14px; }
.recon-col:first-child { border-right:1px solid var(--outline-minimal); }
.recon-col .src { padding:12px 20px 8px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-tertiary); }
.recon-line { display:flex; justify-content:space-between; padding:8px 20px; font-size:13px; }
.recon-line .lbl { color:var(--text-secondary); }
.recon-line .amt { font-family:var(--font-mono); color:var(--text-primary); }
.recon-line.mismatch { background:var(--red-50); }
.recon-line.mismatch .amt { color:var(--red-700); font-weight:600; }
.recon-foot { display:flex; align-items:center; gap:8px; padding:13px 20px; border-top:1px solid var(--outline-minimal); background:var(--neutral-50); font-size:12px; color:var(--text-tertiary); }

/* ─── Insights metric cards ──────────────────────────────── */
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.metric { padding:20px; }
.metric .label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-tertiary); }
.metric .value { font-family:var(--font-mono); font-size:30px; font-weight:600; letter-spacing:-0.5px; color:var(--neutral-950); margin-top:8px; line-height:1; }
.metric .delta { font-family:var(--font-mono); font-size:12px; display:inline-flex; align-items:center; gap:3px; margin-top:10px; }
.metric .delta.up { color:var(--green-800); }
.metric .delta svg { width:13px; height:13px; }
.spark { margin-top:14px; display:flex; align-items:flex-end; gap:4px; height:34px; }
.spark i { flex:1; background:var(--blue-100); border-radius:2px 2px 0 0; }
.spark i.hot { background:var(--blue-500); }
.metric .bar-track { margin-top:16px; height:7px; border-radius:999px; background:var(--neutral-100); overflow:hidden; }
.metric .bar-fill { height:100%; border-radius:999px; }

/* ─── Deal builder mockup ────────────────────────────────── */
.deal { display:flex; align-items:center; gap:14px; padding:18px 20px; }
.deal-ic { width:40px; height:40px; border-radius:10px; background:var(--blue-50); color:var(--blue-700); display:grid; place-items:center; flex:0 0 40px; }
.deal-ic svg { width:20px; height:20px; }
.deal-body { flex:1; min-width:0; }
.deal-body .t { font-size:15px; font-weight:600; color:var(--text-primary); }
.deal-body .s { font-size:13px; color:var(--text-tertiary); margin-top:2px; }

/* ─── Roles cards ────────────────────────────────────────── */
.role-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.role-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:980px) { .role-grid.cols-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .role-grid.cols-4 { grid-template-columns:1fr; } }
.role-ic { width:44px; height:44px; border-radius:11px; background:var(--blue-50); color:var(--blue-700); display:grid; place-items:center; margin-bottom:18px; }
.role-ic svg { width:22px; height:22px; }
.role-card h4 { font-size:18px; font-weight:600; color:var(--neutral-900); letter-spacing:-0.2px; }
.role-card p { font-size:14px; line-height:1.55; color:var(--text-secondary); margin-top:8px; }

/* ─── Integrations strip ─────────────────────────────────── */
.integ-card { display:flex; align-items:center; gap:24px; padding:32px; }
.integ-logo {
  width:88px; height:88px; flex:0 0 88px; border-radius:16px; display:grid; place-items:center;
  background:#2CA01C; color:#fff; font-weight:700; font-size:38px; letter-spacing:-1px;
}
.integ-body h4 { font-size:20px; font-weight:600; color:var(--neutral-900); letter-spacing:-0.3px; }
.integ-body p { font-size:15px; color:var(--text-secondary); margin-top:8px; line-height:1.55; }

/* ─── Closing CTA band ───────────────────────────────────── */
.cta-band { text-align:center; }
.cta-band h2 { font-size:clamp(30px,4vw,44px); font-weight:600; letter-spacing:-1px; color:#fff; line-height:1.1; }
.cta-band p { font-size:18px; color:rgba(255,255,255,0.72); margin:18px auto 0; max-width:560px; }
.cta-band .btn-row { justify-content:center; margin-top:32px; }

/* ─── Footer ──────────────────────────────────────────────── */
.site-footer { padding:72px 0 40px; border-top:1px solid var(--outline-minimal); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; }
.footer-brand .tag { font-size:14px; color:var(--text-tertiary); margin-top:16px; max-width:260px; line-height:1.55; }
.footer-col h5 { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-tertiary); margin-bottom:14px; }
.footer-col a { display:block; font-size:14px; color:var(--text-secondary); padding:6px 0; transition:color .12s; }
.footer-col a:hover { color:var(--text-primary); }
.footer-bottom {
  display:flex; align-items:center; gap:16px; margin-top:56px; padding-top:24px;
  border-top:1px solid var(--outline-minimal);
}
.footer-bottom .copy { font-family:var(--font-mono); font-size:12px; color:var(--text-tertiary); }
.footer-bottom .legal { margin-left:auto; display:flex; gap:18px; }
.footer-bottom .legal a { font-size:13px; color:var(--text-tertiary); }
.footer-bottom .legal a:hover { color:var(--text-primary); }
.wine-dots { display:flex; gap:5px; }
.wine-dots i { width:8px; height:8px; border-radius:999px; }

/* ─── Pricing ─────────────────────────────────────────────── */
.tier-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.tier {
  display:flex; flex-direction:column; padding:28px; background:#fff;
  border:1px solid var(--outline-minimal); border-radius:var(--radius-card-outside); box-shadow:var(--shadow-xs);
}
.tier.popular { border-top:3px solid var(--blue-700); box-shadow:var(--shadow-md); }
.tier-badge { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue-700); margin-bottom:12px; }
.tier h3 { font-size:22px; font-weight:600; color:var(--neutral-950); letter-spacing:-0.3px; }
.tier .price { font-family:var(--font-mono); font-size:30px; font-weight:600; color:var(--neutral-950); margin-top:16px; letter-spacing:-0.5px; }
.tier .price small { font-family:var(--font-sans); font-size:14px; font-weight:400; color:var(--text-tertiary); }
.tier .blurb { font-size:14px; color:var(--text-secondary); margin-top:8px; line-height:1.5; min-height:42px; }
.tier .btn { width:100%; margin-top:22px; }
.tier-feats { margin-top:24px; display:flex; flex-direction:column; gap:11px; }
.tier-feats li { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text-secondary); }
.tier-feats svg { width:17px; height:17px; color:var(--green-700); flex:0 0 17px; margin-top:1px; }

.compare { width:100%; border-collapse:collapse; font-size:14px; }
.compare th, .compare td { padding:15px 16px; text-align:left; border-bottom:1px solid var(--outline-hairline); }
.compare thead th { font-size:14px; font-weight:600; color:var(--neutral-900); border-bottom:1px solid var(--outline-minimal); }
.compare thead th:not(:first-child), .compare td:not(:first-child) { text-align:center; }
.compare tbody td:first-child { color:var(--text-secondary); }
.compare .yes { color:var(--green-700); display:inline-flex; }
.compare .yes svg { width:18px; height:18px; }
.compare .no { color:var(--neutral-300); }
.compare tr.highlight td { background:var(--blue-25); }

/* Included checklist */
.included-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 40px; }
.included-grid li { display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--text-secondary); }
.included-grid li b { color:var(--neutral-900); font-weight:600; }
.included-grid svg { width:18px; height:18px; color:var(--green-700); flex:0 0 18px; margin-top:2px; }
@media (max-width:720px) { .included-grid { grid-template-columns:1fr; } }

/* ─── FAQ ─────────────────────────────────────────────────── */
.faq { max-width:760px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--outline-minimal); }
.faq-q {
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  padding:24px 4px; background:transparent; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-sans); font-size:18px; font-weight:600; color:var(--neutral-900);
}
.faq-q svg { width:20px; height:20px; color:var(--text-tertiary); flex:0 0 20px; transition:transform .2s; }
.faq-item.open .faq-q svg { transform:rotate(45deg); }
.faq-a { overflow:hidden; max-height:0; transition:max-height .26s ease; }
.faq-a-inner { padding:0 4px 24px; font-size:16px; line-height:1.6; color:var(--text-secondary); max-width:640px; }

/* ─── Company ─────────────────────────────────────────────── */
.prose { max-width:680px; }
.prose p { font-size:18px; line-height:1.65; color:var(--text-secondary); }
.prose p + p { margin-top:20px; }
.value-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.value-card h4 { font-size:18px; font-weight:600; color:var(--neutral-900); letter-spacing:-0.2px; }
.value-card p { font-size:15px; color:var(--text-secondary); margin-top:8px; line-height:1.55; }
.value-num { font-family:var(--font-mono); font-size:13px; color:var(--blue-700); font-weight:600; margin-bottom:14px; }
.stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat-item { padding:24px 0 0; border-top:2px solid var(--neutral-200); }
.stat-item .big { font-size:22px; font-weight:600; color:var(--neutral-950); letter-spacing:-0.3px; }
.stat-item .cap { font-size:13px; color:var(--text-tertiary); margin-top:8px; }

/* ─── Scroll reveal ──────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(12px); transition:opacity .5s ease,transform .5s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width:980px) {
  .section { padding:88px 0; }
  .feature, .feature.flip { grid-template-columns:1fr; gap:40px; }
  .feature.flip .feature-copy, .feature.flip .feature-visual { order:initial; }
  .feature + .feature { margin-top:80px; }
  .cols-3 { grid-template-columns:1fr; gap:8px; }
  .problem-col { padding:24px 0; }
  .metric-grid, .role-grid, .tier-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .stat-strip { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .nav-links, .nav-signin { display:none; }
  .nav-toggle { display:inline-flex; }
  .value-grid { grid-template-columns:1fr; }
  .compare-wrap { overflow-x:auto; }
  .compare { min-width:560px; }
  .integ-card { flex-direction:column; align-items:flex-start; text-align:left; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:14px; }
  .footer-bottom .legal { margin-left:0; }
}
@media (max-width:480px) {
  .section { padding:64px 0; }
  .hero { padding:48px 0 64px; }
  .btn-row .btn { width:100%; }
  .footer-grid { grid-template-columns:1fr; }
  .stat-strip { grid-template-columns:1fr; }
}

/* ============================================================
   PART 9 + 10 additions — mega-menus, callouts, inner pages
   ============================================================ */

/* ─── Mega-menu (desktop) ────────────────────────────────── */
.nav-mega { display:flex; align-items:center; }
.nav-mega-trigger {
  display:inline-flex; align-items:center; gap:4px; font-family:var(--font-sans);
  font-size:14px; font-weight:500; color:var(--text-secondary);
  padding:8px 12px; border:0; background:transparent; border-radius:7px; cursor:pointer;
  transition:background .12s,color .12s;
}
.nav-mega-trigger svg { width:15px; height:15px; color:var(--text-tertiary); transition:transform .18s; }
.nav-mega:hover .nav-mega-trigger, .nav-mega.open .nav-mega-trigger { color:var(--text-primary); background:rgba(13,18,28,0.04); }
.nav-mega.open .nav-mega-trigger svg { transform:rotate(180deg); }

.mega-panel {
  position:absolute; top:64px; left:50%; z-index:120;
  transform:translateX(-50%) translateY(6px);
  background:#fff; border:1px solid var(--outline-minimal); border-radius:var(--radius-card-outside);
  box-shadow:var(--shadow-xl); padding:24px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.mega-panel::before { content:''; position:absolute; left:0; right:0; top:-18px; height:18px; }
.nav-mega.open .mega-panel { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega-solutions { width:min(940px, calc(100vw - 48px)); }
.mega-usecases { width:min(720px, calc(100vw - 48px)); }
.mega-eyebrow {
  font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-tertiary); margin-bottom:16px; padding-left:8px;
}
.mega-grid { display:grid; gap:6px 20px; align-items:start; }
.mega-solutions .mega-grid { grid-template-columns:repeat(4,1fr); }
.mega-usecases .mega-grid { grid-template-columns:repeat(3,1fr); }
.mega-col-title {
  font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-tertiary); padding:0 8px 6px;
}
.mega-col.tint { background:var(--indigo-50); border-radius:12px; padding:10px 6px; align-self:stretch; }
.mega-col.tint .mega-col-title { color:var(--indigo-800); }
.mega-col.tint .mega-ic { background:#fff; color:var(--indigo-700); }
.mega-col.tint .mega-row:hover { background:rgba(255,255,255,0.7); }
.mega-row { display:flex; gap:12px; padding:9px 8px; border-radius:8px; align-items:flex-start; transition:background .12s; }
.mega-row:hover { background:var(--neutral-50); }
.mega-ic { width:32px; height:32px; flex:0 0 32px; border-radius:8px; background:var(--blue-50); color:var(--blue-700); display:grid; place-items:center; }
.mega-ic svg { width:17px; height:17px; }
.mega-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mega-label { font-size:14px; font-weight:600; color:var(--text-primary); line-height:1.25; }
.mega-desc { font-size:12px; color:var(--text-tertiary); line-height:1.4; }
.mega-foot {
  display:flex; align-items:center; gap:6px; margin-top:14px; padding:14px 16px;
  background:var(--neutral-50); border-radius:10px; font-size:13px; font-weight:600; color:var(--blue-700);
  transition:background .12s;
}
.mega-foot:hover { background:var(--blue-50); }
.mega-foot svg { width:15px; height:15px; }

/* ─── Mobile accordion ───────────────────────────────────── */
.m-acc-trigger {
  display:flex; width:100%; align-items:center; justify-content:space-between;
  background:transparent; border:0; font-family:var(--font-sans); font-size:16px; font-weight:500;
  color:var(--text-primary); padding:12px 8px; border-radius:8px; cursor:pointer;
}
.m-acc-trigger svg { width:18px; height:18px; color:var(--text-tertiary); transition:transform .2s; }
.m-acc.open .m-acc-trigger svg { transform:rotate(180deg); }
.m-acc-body { max-height:0; overflow:hidden; transition:max-height .26s ease; display:flex; flex-direction:column; }
.m-acc-body a { font-size:15px; padding:10px 8px 10px 20px; color:var(--text-secondary); }

/* ─── Homepage primary-features callouts ─────────────────── */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.feat-card { display:flex; flex-direction:column; }
.feat-ic { width:40px; height:40px; border-radius:10px; background:var(--blue-50); color:var(--blue-700); display:grid; place-items:center; margin-bottom:18px; }
.feat-ic svg { width:20px; height:20px; }
.feat-card h4 { font-size:18px; font-weight:600; color:var(--neutral-900); letter-spacing:-0.2px; }
.feat-card p { font-size:14px; line-height:1.55; color:var(--text-secondary); margin-top:8px; flex:1; }
.feat-link { display:inline-flex; align-items:center; gap:5px; margin-top:18px; font-size:13px; font-weight:600; color:var(--blue-700); }
.feat-link svg { width:14px; height:14px; transition:transform .15s; }
.feat-card:hover .feat-link svg { transform:translateX(3px); }

/* ─── Inner page (Solutions / Use Cases) ─────────────────── */
.crumb { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:18px; }
.crumb b { color:var(--blue-700); font-weight:600; }
.lp-hero { padding:96px 0 112px; position:relative; overflow:hidden; }
.lp-hero .hero-glow { top:-160px; }
.lp-hero-grid { display:grid; grid-template-columns:1.02fr 0.98fr; gap:64px; align-items:center; position:relative; z-index:1; }
.lp-hero h1 { font-size:clamp(34px,4.4vw,52px); font-weight:600; line-height:1.08; letter-spacing:-1.4px; color:var(--neutral-950); text-wrap:balance; }
.lp-hero .lead { max-width:520px; }
.lp-hero .btn-row { margin-top:30px; }
.lp-visual { min-width:0; }
@media (max-width:980px) {
  .feat-grid { grid-template-columns:1fr; }
  .lp-hero-grid { grid-template-columns:1fr; gap:40px; }
  .lp-hero { padding:72px 0 80px; }
}

/* ─── Proof strip (mono chips) ───────────────────────────── */
.proof-strip { display:flex; flex-wrap:wrap; gap:10px; }
.proof-chip {
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--outline-minimal); box-shadow:var(--shadow-xs);
  font-family:var(--font-mono); font-size:13px; color:var(--text-secondary);
}
.proof-chip .pc-dot { width:6px; height:6px; border-radius:999px; background:var(--blue-500); }

/* ─── Related cards ──────────────────────────────────────── */
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.rel-card { display:flex; flex-direction:column; }
.rel-card .re { font-size:10px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:10px; }
.rel-card h4 { font-size:17px; font-weight:600; color:var(--neutral-900); letter-spacing:-0.2px; }
.rel-card p { font-size:14px; color:var(--text-secondary); margin-top:8px; line-height:1.5; flex:1; }
.rel-card .rel-go { display:inline-flex; align-items:center; gap:5px; margin-top:16px; font-size:13px; font-weight:600; color:var(--blue-700); }
.rel-card .rel-go svg { width:14px; height:14px; transition:transform .15s; }
.rel-card:hover .rel-go svg { transform:translateX(3px); }
@media (max-width:880px) { .related-grid { grid-template-columns:1fr; } }

/* ─── Signal chips (accounts) ────────────────────────────── */
.chip.atrisk { color:var(--red-800); background:var(--red-50); border-color:var(--red-100); }
.chip.growing { color:var(--green-800); background:var(--green-50); border-color:var(--green-100); }
.chip.overdue { color:var(--yellow-800); background:var(--yellow-50); border-color:var(--yellow-100); }
.chip.never { color:var(--text-secondary); background:var(--neutral-50); border-color:var(--outline-minimal); }
.sig-cell { display:flex; flex-wrap:wrap; gap:5px; }

/* hover/pin card */
.pin-card { max-width:320px; }
.pin-head { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--outline-hairline); margin-bottom:12px; }
.pin-head .nm { font-size:15px; font-weight:600; color:var(--neutral-950); }
.pin-head .mt { font-family:var(--font-mono); font-size:12px; color:var(--text-tertiary); margin-left:auto; }
.pin-sigs { display:flex; flex-wrap:wrap; gap:6px; }

/* ─── Leaderboard ────────────────────────────────────────── */
.board { padding:8px 4px; }
.board-head { display:flex; align-items:center; justify-content:space-between; padding:10px 16px 12px; }
.board-head .bt { font-size:13px; font-weight:600; color:var(--neutral-900); }
.board-head .bs { font-family:var(--font-mono); font-size:12px; color:var(--text-tertiary); }
.lead-row { display:flex; align-items:center; gap:14px; padding:11px 16px; border-top:1px solid var(--outline-hairline); }
.lead-rank { font-family:var(--font-mono); font-size:12px; color:var(--text-tertiary); width:16px; }
.lead-name { font-size:14px; font-weight:600; color:var(--text-primary); flex:0 0 132px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lead-track { flex:1; height:8px; border-radius:999px; background:var(--neutral-100); overflow:hidden; }
.lead-fill { height:100%; border-radius:999px; background:var(--blue-500); }
.lead-pts { font-family:var(--font-mono); font-size:13px; color:var(--text-primary); width:54px; text-align:right; }

/* ─── Visit list ─────────────────────────────────────────── */
.vlist { padding:0; overflow:hidden; }
.visit-row { display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--outline-hairline); }
.visit-row:last-child { border-bottom:0; }
.visit-ic { width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:var(--blue-50); color:var(--blue-700); display:grid; place-items:center; }
.visit-ic svg { width:17px; height:17px; }
.visit-main { min-width:0; }
.visit-main .va { font-size:14px; font-weight:600; color:var(--text-primary); }
.visit-main .vb { font-size:12px; color:var(--text-tertiary); margin-top:1px; }
.visit-row .vd { margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--text-tertiary); white-space:nowrap; }

/* ─── Rule builder ───────────────────────────────────────── */
.rule { padding:0; overflow:hidden; }
.rule-head { display:flex; align-items:center; gap:10px; padding:15px 20px; border-bottom:1px solid var(--outline-minimal); }
.rule-head .rt { font-size:14px; font-weight:600; color:var(--text-primary); }
.rule-body { padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.rule-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rule-kw { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); width:34px; }
.rule-token { padding:5px 11px; border-radius:7px; font-family:var(--font-mono); font-size:13px; background:var(--neutral-100); color:var(--text-primary); border:1px solid var(--outline-hairline); }
.rule-token.field { background:var(--blue-50); color:var(--blue-800); border-color:var(--blue-100); }
.rule-token.act { background:var(--indigo-50); color:var(--indigo-800); border-color:var(--indigo-100); }
.rule-foot { display:flex; align-items:center; padding:13px 20px; border-top:1px solid var(--outline-minimal); background:var(--neutral-50); }

/* ─── Survey / key-value capture ─────────────────────────── */
.kv-card { padding:0; overflow:hidden; }
.kv-head { padding:14px 18px; border-bottom:1px solid var(--outline-minimal); background:var(--neutral-50); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-tertiary); }
.kv-row { display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--outline-hairline); }
.kv-row:last-child { border-bottom:0; }
.kv-row .kvn { font-size:14px; font-weight:600; color:var(--text-primary); flex:1; min-width:0; }
.kv-row .kvv { font-family:var(--font-mono); font-size:13px; color:var(--text-secondary); }
.kv-tags { display:flex; gap:14px; }
.kv-tags span { font-family:var(--font-mono); font-size:12px; color:var(--text-tertiary); }
.kv-tags b { color:var(--text-primary); font-weight:600; }

/* ─── Sync mapping (QuickBooks) ──────────────────────────── */
.map-row { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--outline-hairline); }
.map-row:last-child { border-bottom:0; }
.map-row .mside { flex:1; font-size:14px; font-weight:600; color:var(--text-primary); }
.map-row .marrow { color:var(--blue-700); display:flex; }
.map-row .marrow svg { width:18px; height:18px; }
.map-row .mside.r { text-align:right; color:var(--text-secondary); }

/* ─── Pricing: how-it-works steps ───────────────────────── */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.step { padding-top:22px; border-top:2px solid var(--neutral-200); }
.step .sn { font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--blue-700); letter-spacing:0.5px; }
.step h4 { font-size:18px; font-weight:600; color:var(--neutral-900); letter-spacing:-0.2px; margin-top:14px; }
.step p { font-size:15px; color:var(--text-secondary); margin-top:8px; line-height:1.55; }
@media (max-width:880px) { .steps { grid-template-columns:1fr; gap:0; } .step { padding:22px 0; } }

/* generic two-up checklist inside feature blocks */
.checks { margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.checks li { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text-secondary); }
.checks svg { width:17px; height:17px; color:var(--green-700); flex:0 0 17px; margin-top:1px; }
@media (max-width:560px) { .checks { grid-template-columns:1fr; } }