/* ============================================================
   HeyDividend — Design System
   Shared across all marketing pages for cohesiveness.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  /* Canvas */
  --bg:#ffffff; --bg-soft:#ffffff; --bg-card:#ffffff;
  --ink:#0a0a0a; --ink-2:#2a2a2a; --muted:#6a6a6a; --muted-soft:#8a8a8a;
  --line:rgba(10,10,10,.08); --line-soft:rgba(10,10,10,.05);
  /* Semantic accents */
  --navy:#1a5a9a; --navy-hover:#154e88; --navy-ink:#103f6b;
  --green:#147a45; --green-soft:rgba(20,122,69,.10);
  --clay:#b3402e; --clay-soft:rgba(179,64,46,.10);
  --gold:#9a7b1f; --gold-soft:rgba(154,123,31,.12);
  /* On-dark */
  --d-text:#eef1f6; --d-muted:#aebbd2; --d-eyebrow:#9fb4d8; --d-gold:#e3c878; --d-green:#5fd098;
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px;
  --shadow-sm:0 1px 2px rgba(10,10,10,.04), 0 4px 12px rgba(10,10,10,.03);
  --shadow:0 1px 2px rgba(10,10,10,.05), 0 12px 32px rgba(10,10,10,.08);
  --maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:'Geist',system-ui,-apple-system,sans-serif;
  font-feature-settings:'ss01' on,'cv11' on;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden}
a{color:inherit}
h1,h2,h3,h4{letter-spacing:-.025em; font-weight:600; margin:0}
.serif{font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; letter-spacing:-.01em}
.mono{font-family:'Geist Mono',ui-monospace,monospace}

/* Eyebrow */
.eyebrow{font-family:'Geist Mono',monospace; font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
  display:inline-flex; align-items:center; gap:8px; margin:0 0 16px}
.eyebrow::before{content:""; width:18px; height:1.5px; background:var(--navy); opacity:.5}
.eyebrow.green{color:var(--green)} .eyebrow.green::before{background:var(--green)}
.eyebrow.clay{color:var(--clay)} .eyebrow.clay::before{background:var(--clay)}
.eyebrow.gold{color:var(--gold)} .eyebrow.gold::before{background:var(--gold)}
.eyebrow.on-dark{color:var(--d-eyebrow)} .eyebrow.on-dark::before{background:var(--d-eyebrow)}
.eyebrow.center{justify-content:center}

/* Buttons */
.btn{font-size:15px; font-weight:500; padding:12px 22px; border-radius:var(--r);
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .18s ease, background .18s ease, border-color .18s ease; border:1px solid transparent}
.btn-primary{background:var(--navy); color:var(--bg); border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-hover); transform:translateY(-1px)}
.btn-secondary{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-secondary:hover{border-color:rgba(10,10,10,.22)}
.btn-ondark{background:var(--bg); color:var(--navy-ink); border-color:var(--bg)}
.btn-ondark:hover{transform:translateY(-1px); background:#fff}
.btn-ghost-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.25)}
.btn-ghost-dark:hover{border-color:rgba(255,255,255,.55)}
.btn-sm{padding:9px 16px; font-size:13.5px}

/* Layout */
section{position:relative}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
.band{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cta-buttons{display:flex; gap:12px; flex-wrap:wrap}
.center-cta{justify-content:center}

/* NAV */
.nav-wrap{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
nav.bar{max-width:var(--maxw); margin:0 auto; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{display:inline-flex; align-items:center; text-decoration:none}
.brand .wm{font-family:'Geist','Helvetica Neue',Arial,sans-serif; font-weight:300; font-size:32px; letter-spacing:.05em; color:#1a5a9a; line-height:1; white-space:nowrap}
.brand .wm b{font-weight:700}
.nav-links{display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0}
.nav-links a{color:var(--ink-2); text-decoration:none; font-size:14px; font-weight:500; transition:color .18s}
.nav-links a:hover,.nav-links a.active{color:var(--navy)}
/* Mobile nav toggle — hidden on desktop, shown ≤900px */
.nav-toggle{position:absolute; width:1px; height:1px; opacity:0; margin:-1px; overflow:hidden}
.nav-burger{display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:0 10px; border:1px solid var(--line); border-radius:10px;
  background:var(--bg-card); cursor:pointer; flex:0 0 auto}
.nav-burger span{display:block; height:2px; width:100%; background:var(--ink-2); border-radius:2px;
  transition:transform .22s ease, opacity .18s ease}
.nav-toggle:focus-visible ~ .nav-burger{outline:2px solid var(--navy); outline-offset:3px}

/* Page hero (subpages) */
.page-hero{max-width:var(--maxw); margin:0 auto; padding:72px 32px 40px}
.page-hero.center{text-align:center}
.page-hero h1{font-size:clamp(34px,4.4vw,54px); line-height:1.05; margin-bottom:18px}
.page-hero p.sub{font-size:17px; line-height:1.55; color:var(--muted); max-width:560px; margin:0}
.page-hero.center p.sub{margin:0 auto}

/* Section heading (centered block) */
.centered{max-width:680px; margin:0 auto; text-align:center}
.centered h2{font-size:clamp(26px,3vw,36px); line-height:1.12; margin-bottom:14px}
.centered p{color:var(--muted); font-size:16px; line-height:1.6}
.section-pad{padding:80px 32px}

/* Cards */
.card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm)}
.mock{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden}
.mock-head{display:flex; align-items:center; gap:9px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-2)}
.mock-head .live{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-soft)}
.mock-head-mono{font-family:'Geist Mono',monospace; font-size:12px; color:var(--muted); padding:14px 18px; border-bottom:1px solid var(--line); letter-spacing:.02em}
.mock-head-row{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); font-size:13.5px; font-weight:500}

/* Tables */
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:10px 18px; text-align:left}
th{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-soft); font-weight:500; border-bottom:1px solid var(--line)}
.ticker,td.ticker{font-family:'Geist Mono',monospace; font-weight:500}
td.num,th.num{text-align:right; font-family:'Geist Mono',monospace}
tbody tr:not(:last-child) td{border-bottom:1px solid var(--line-soft)}

/* Badges */
.badge{font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px; display:inline-block}
.badge.safe{background:var(--green-soft); color:var(--green)}
.badge.risk{background:var(--clay-soft); color:var(--clay)}
.badge.watch{background:var(--gold-soft); color:var(--gold)}
.badge.navy{background:rgba(26,90,154,.1); color:var(--navy)}
.pill{font-size:13.5px; color:var(--muted); padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:var(--bg-card); text-decoration:none; display:inline-block}
.pill:hover{border-color:rgba(10,10,10,.2)}

/* Metric rows */
.metric{display:flex; justify-content:space-between; padding:9px 18px; font-size:13.5px}
.metric:not(:last-child){border-bottom:1px solid var(--line-soft)}
.metric .ml{color:var(--muted)} .metric .mv{font-family:'Geist Mono',monospace; font-weight:500}
.footer-strip{padding:13px 18px; background:var(--bg-soft); border-top:1px solid var(--line); font-size:13px; color:var(--ink-2)}
.score{display:flex; align-items:baseline; gap:4px; padding:18px 18px 8px}
.score .n{font-size:46px; font-weight:600; letter-spacing:-.03em}
.score .d{font-size:16px; color:var(--muted-soft)}
.check{color:var(--green); font-weight:600} .xmark{color:var(--muted-soft)}

/* Dark sections */
.dark{background:var(--navy-ink); color:var(--d-text); width:min(var(--maxw), 100% - 48px); margin:24px auto; border-radius:var(--r-lg); overflow:hidden}
.dark h2,.dark h1,.dark h3{color:#fff}
.dark .lede,.dark p{color:var(--d-muted)}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:48px}
.dark .stat{padding:22px 0; border-top:1px solid rgba(255,255,255,.14)}
.dark .stat .num{font-size:34px; font-weight:600; color:#fff; letter-spacing:-.03em}
.dark .stat .num.green{color:var(--d-green)} .dark .stat .num.gold{color:var(--d-gold)}
.dark .stat .lbl{font-size:13px; color:#9fb0cc; margin-top:6px; line-height:1.4}

/* Light stat grid (on cream) */
.lstat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.lstat{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:24px}
.lstat .num{font-size:32px; font-weight:600; letter-spacing:-.03em}
.lstat .lbl{font-size:13px; color:var(--muted); margin-top:6px; line-height:1.4}

/* Feature rows */
.feature{max-width:var(--maxw); margin:0 auto; padding:84px 32px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.feature.full{max-width:none}
.feature .inner{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.feature h2{font-size:clamp(24px,2.7vw,34px); line-height:1.14; margin-bottom:16px}
.feature p.body{font-size:16px; line-height:1.6; color:var(--muted); max-width:460px}

/* Final CTA */
.final{text-align:center; padding:96px 32px}
.final h2{font-size:clamp(28px,3.4vw,42px); max-width:760px; margin:0 auto 20px; line-height:1.1}
.final p{max-width:560px; margin:0 auto 32px; line-height:1.6; font-size:16px}
.final .cta-buttons{justify-content:center}
.final .micro{margin-top:22px; font-size:13px; color:#8fa1bf}
.final .micro a{color:#cdd8ec}

/* Footer */
footer.site{padding:52px 32px 26px; border-top:1px solid var(--line); background:var(--bg-soft)}
.foot-top{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.25fr 2fr; gap:48px; padding-bottom:34px; border-bottom:1px solid var(--line)}
.foot-brand .brand{margin-bottom:12px}
.foot-tag{font-size:14px; color:var(--muted); max-width:300px; line-height:1.5; margin:0 0 20px}
.app-badges{display:flex; gap:10px; flex-wrap:wrap}
.app-badge{display:inline-flex; align-items:center; gap:10px; background:var(--navy); color:#fff; border-radius:11px; padding:9px 15px; text-decoration:none; transition:background .18s ease, transform .18s ease}
.app-badge:hover{background:var(--navy-hover); transform:translateY(-1px)}
.app-badge svg{width:22px; height:22px; flex-shrink:0; fill:#fff}
.app-badge span{display:flex; flex-direction:column; line-height:1.15}
.app-badge small{font-size:9px; opacity:.82; letter-spacing:.02em}
.app-badge b{font-size:14px; font-weight:600; letter-spacing:-.01em}
.foot-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.fcol{display:flex; flex-direction:column; gap:11px}
.fcol h4{font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-soft); margin:0 0 3px; font-weight:500}
.fcol a{font-size:14px; color:var(--ink-2); text-decoration:none; transition:color .18s}
.fcol a:hover{color:var(--navy)}
.foot-bottom{max-width:var(--maxw); margin:24px auto 0; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted); flex-wrap:wrap; gap:14px}
.foot-bottom nav{display:flex; gap:22px}
.foot-bottom a{text-decoration:none; color:var(--muted)}
.foot-bottom a:hover{color:var(--navy)}
@media(max-width:760px){
  .foot-top{grid-template-columns:1fr; gap:32px}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
}

/* ---- PRICING ---- */
.toggle{display:inline-flex; background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:4px; gap:4px; margin:0 auto}
.toggle button{border:none; background:transparent; font-family:inherit; font-size:13.5px; font-weight:500; padding:8px 18px; border-radius:999px; cursor:pointer; color:var(--muted)}
.toggle button.on{background:var(--navy); color:#fff}
.toggle .save{font-size:11px; color:var(--green); margin-left:4px}
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:880px; margin:36px auto 0}
.price-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-xl); padding:32px; position:relative}
.price-card.pro{border-color:var(--navy); box-shadow:var(--shadow)}
.price-card .pname{font-size:14px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--navy)}
.price-card .pdesc{font-size:14px; color:var(--muted); margin:8px 0 22px; line-height:1.5; min-height:42px}
.price-card .pamt{display:flex; align-items:baseline; gap:6px}
.price-card .pamt .n{font-size:46px; font-weight:600; letter-spacing:-.03em}
.price-card .pamt .s{font-size:14px; color:var(--muted)}
.price-card .pbill{font-size:12.5px; color:var(--muted-soft); margin-top:6px; min-height:18px}
.price-card .btn{width:100%; justify-content:center; margin-top:22px}
.pop-tag{position:absolute; top:-12px; right:24px; background:var(--gold); color:#fff; font-size:11px; font-weight:600; padding:4px 12px; border-radius:999px; letter-spacing:.04em}
.cmp{max-width:var(--maxw); margin:0 auto; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-card)}
.cmp table{font-size:13.5px}
.cmp th{padding:16px 18px; background:var(--bg-soft)}
.cmp th:nth-child(2){color:var(--navy)}
.cmp td{padding:13px 18px; border-bottom:1px solid var(--line-soft)}
.cmp td:first-child{color:var(--ink-2)}
.cmp td.hd{background:rgba(26,90,154,.04); font-weight:500}
.cmp .grouprow td{background:var(--bg-soft); font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-soft); font-weight:500}
.cmp .num{text-align:center}
.fineprint{font-size:12.5px; color:var(--muted-soft); text-align:center; padding:16px; border-top:1px solid var(--line); background:var(--bg-soft)}

/* ---- TOOL / FEATURE LIST (Free tools) ---- */
.tool-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:var(--maxw); margin:0 auto}
.tool-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; display:flex; flex-direction:column}
.tool-card .cat{font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--green); text-transform:uppercase; margin-bottom:12px}
.tool-card h3{font-size:20px; margin-bottom:10px}
.tool-card p{font-size:14.5px; color:var(--muted); line-height:1.55; margin:0 0 18px}
.tool-card ul{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px}
.tool-card li{font-size:13.5px; color:var(--ink-2); display:flex; gap:9px; align-items:flex-start}
.tool-card li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green); margin-top:7px; flex-shrink:0}
.tool-card .actions{margin-top:auto; display:flex; gap:18px; font-size:13.5px}
.tool-card .actions a{color:var(--navy); text-decoration:none; font-weight:500}

/* ---- FAQ ---- */
.faq{max-width:760px; margin:0 auto}
.faq-item{border-bottom:1px solid var(--line); padding:20px 0}
.faq-item .q{display:flex; justify-content:space-between; align-items:center; font-size:16px; font-weight:500; cursor:pointer}
.faq-item .q::after{content:"+"; color:var(--muted-soft); font-size:20px; font-weight:400}
.faq-item .a{font-size:14.5px; color:var(--muted); line-height:1.6; margin-top:12px; max-width:660px}

/* ---- METRIC GRID (benchmark) ---- */
.mgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.mcard{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:18px}
.mcard .ml{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-soft); display:flex; justify-content:space-between; align-items:center}
.mcard .mv{font-size:26px; font-weight:600; margin-top:10px; letter-spacing:-.02em; font-family:'Geist Mono',monospace}
.mcard .mh{font-size:11.5px; color:var(--muted-soft); margin-top:4px}
.pos{color:var(--green)} .neg{color:var(--clay)}

/* Workbench */
.workbench{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:24px; display:grid; grid-template-columns:1.6fr 1fr 1fr auto; gap:14px; align-items:end}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:7px; font-weight:500}
.field input,.field select{width:100%; font-family:inherit; font-size:14px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; color:var(--ink)}

/* ---- CODE TABS (widgets) ---- */
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); padding:0 4px}
.tabs button{border:none; background:transparent; font-family:inherit; font-size:13px; font-weight:500; padding:11px 14px; cursor:pointer; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs button.on{color:var(--navy); border-bottom-color:var(--navy)}
.code{background:var(--navy-ink); color:#cdd8ec; font-family:'Geist Mono',monospace; font-size:12px; line-height:1.6; padding:18px; border-radius:var(--r-sm); overflow-x:auto; white-space:pre; margin:0}
.copy-btn{font-family:'Geist Mono',monospace; font-size:11px; color:var(--d-eyebrow); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:4px 10px; cursor:pointer}

/* ---- TESTIMONIALS ---- */
.quote-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:var(--maxw); margin:0 auto}
.quote{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px}
.quote .tag{font-family:'Geist Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); background:rgba(26,90,154,.07); padding:4px 9px; border-radius:999px; display:inline-block; margin-bottom:18px}
.quote .body{font-size:17px; line-height:1.5; letter-spacing:-.01em; margin:0 0 20px}
.quote .body::before{content:"\201C"}
.quote .body::after{content:"\201D"}
.quote .who{font-size:13.5px; font-weight:600}
.quote .role{font-size:12.5px; color:var(--muted); margin-top:2px}
.logo-row{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:820px; margin:30px auto 0}

/* ---- SECURITY PILLARS ---- */
.pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:var(--maxw); margin:0 auto}
.pillar{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px}
.pillar .ic{width:40px; height:40px; border-radius:11px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.pillar .ic svg{width:20px; height:20px}
.pillar h3{font-size:17px; margin-bottom:9px}
.pillar p{font-size:14px; color:var(--muted); line-height:1.55; margin:0}
.intro-cards{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:var(--maxw); margin:0 auto}
.intro-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px}
.intro-card h3{font-size:20px; margin:14px 0 10px; line-height:1.2}
.intro-card p{font-size:14.5px; color:var(--muted); line-height:1.6; margin:0}

/* ---- BLOG ---- */
.featured{display:grid; grid-template-columns:1.1fr .9fr; gap:0; max-width:var(--maxw); margin:0 auto; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; background:var(--bg-card)}
.featured .ft-text{padding:40px}
.featured .ft-text h2{font-size:clamp(24px,2.6vw,32px); line-height:1.14; margin:14px 0 14px}
.featured .ft-text p{font-size:15.5px; color:var(--muted); line-height:1.6; max-width:440px}
.featured .ft-meta{font-family:'Geist Mono',monospace; font-size:12px; color:var(--muted-soft); margin-top:20px}
.featured .ft-img{background:linear-gradient(135deg,var(--navy),var(--navy-hover)); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); font-family:'Instrument Serif',serif; font-style:italic; font-size:40px; min-height:300px}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:var(--maxw); margin:0 auto}
.post{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; display:flex; flex-direction:column; text-decoration:none; transition:transform .18s ease, border-color .18s ease}
.post:hover{transform:translateY(-2px); border-color:rgba(10,10,10,.2)}
.post .cat{font-family:'Geist Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); display:flex; justify-content:space-between}
.post h3{font-size:18px; line-height:1.25; margin:14px 0 10px}
.post p{font-size:14px; color:var(--muted); line-height:1.55; margin:0 0 18px; flex:1}
.post .pmeta{font-family:'Geist Mono',monospace; font-size:11.5px; color:var(--muted-soft)}
.cat-color-ai{color:var(--clay)} .cat-color-eng{color:var(--navy)} .cat-color-research{color:var(--gold)}
.cat-color-product{color:var(--green)} .cat-color-income{color:var(--green)} .cat-color-company{color:var(--ink-2)}

/* ---- CONTACT ---- */
.contact-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; max-width:var(--maxw); margin:0 auto}
.form-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px}
.form-row{margin-bottom:18px}
.form-row label{display:block; font-size:13px; color:var(--ink-2); margin-bottom:7px; font-weight:500}
.form-row input,.form-row select,.form-row textarea{width:100%; font-family:inherit; font-size:14px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; color:var(--ink); resize:vertical}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.channels{display:flex; flex-direction:column; gap:12px}
.channel{display:flex; align-items:center; gap:14px; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:18px; text-decoration:none; transition:border-color .18s}
.channel:hover{border-color:rgba(10,10,10,.2)}
.channel .ic{width:38px; height:38px; border-radius:10px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.channel .ic svg{width:18px; height:18px}
.channel .cl{font-size:12.5px; color:var(--muted)} .channel .cv{font-size:14px; font-weight:500; margin-top:2px}

/* ---- AI BENCHMARK (model-vs-model) ---- */
.bm-meta{display:flex; gap:24px; flex-wrap:wrap; margin-top:22px}
.bm-meta .mi{font-family:'Geist Mono',monospace; font-size:12px; color:var(--muted); display:flex; gap:7px}
.bm-meta .mi b{color:var(--navy); font-weight:500}
.sect-title{font-family:'Geist Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-soft); margin:0 0 20px; display:flex; align-items:center; gap:14px}
.sect-title::after{content:""; flex:1; height:1px; background:var(--line)}

.hl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:40px}
.hl-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; text-align:center; position:relative; overflow:hidden}
.hl-card.primary{border-color:var(--navy)}
.hl-card.primary::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--navy),transparent)}
.hl-label{font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.hl-value{font-size:54px; font-weight:600; line-height:1; letter-spacing:-.03em; color:var(--navy)}
.hl-value.gold{color:var(--gold)} .hl-value.green{color:var(--green)}
.hl-sub{font-size:13px; color:var(--muted); margin-top:10px}

.moat{background:linear-gradient(135deg,rgba(26,90,154,.07),rgba(20,122,69,.05)); border:1px solid rgba(26,90,154,.2); border-radius:var(--r-lg); padding:28px 32px; margin-bottom:48px}
.moat h3{font-size:21px; margin-bottom:12px}
.moat p{font-size:16px; color:var(--ink-2); line-height:1.65; margin:0}
.moat p strong{color:var(--navy)}

.pillar3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px}
.p3{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px}
.p3 .w{font-family:'Geist Mono',monospace; font-size:10.5px; letter-spacing:.08em; color:var(--navy); margin-bottom:10px}
.p3 .nm{font-size:18px; font-weight:600; margin-bottom:6px}
.p3 .sc{font-size:38px; font-weight:600; line-height:1; letter-spacing:-.03em; margin-bottom:10px}
.p3 .ds{font-size:13.5px; color:var(--muted); line-height:1.55}
.formula{background:var(--navy-ink); color:#cdd8ec; border-radius:var(--r-sm); padding:18px 22px; font-family:'Geist Mono',monospace; font-size:14px; line-height:1.8; margin-bottom:48px}
.formula .v{color:#9fd9b8} .formula .o{color:var(--d-gold)}

.bm-legend{display:flex; gap:14px; flex-wrap:wrap; padding:16px 20px; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); margin-bottom:24px}
.bm-legend .li{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2)}
.bm-legend .dot{width:10px; height:10px; border-radius:50%}
.model-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:48px}
.model-chips .c{font-family:'Geist Mono',monospace; font-size:12px; color:var(--muted); padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--bg-card)}
.model-chips .c.win{color:var(--navy); border-color:var(--navy); font-weight:500}

.chart-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; margin-bottom:16px}
.chart-card .ch-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px}
.chart-card .ch-name{font-size:19px; font-weight:600}
.chart-card .ch-desc{font-size:13.5px; color:var(--muted); margin-top:4px; max-width:520px}
.chart-card .ch-badge{font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:.06em; padding:4px 9px; border:1px solid var(--line); border-radius:4px; color:var(--muted-soft); white-space:nowrap}
.bar-row{display:grid; grid-template-columns:130px 1fr 56px; align-items:center; gap:12px; margin-bottom:10px}
.bar-row .lab{font-family:'Geist Mono',monospace; font-size:12px; color:var(--muted); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-row .lab.win{color:var(--navy); font-weight:700}
.bar-track{height:8px; background:var(--bg-soft); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.bar-fill{height:100%; border-radius:4px}
.bar-row .val{font-family:'Geist Mono',monospace; font-size:13px; color:var(--ink); text-align:right}
.bar-row .val.win{color:var(--navy); font-weight:700}

.scoretable{border:1px solid var(--line); border-radius:var(--r-lg); overflow:auto; background:var(--bg-card); margin-bottom:48px}
.scoretable table{min-width:760px}
.scoretable th{padding:14px 12px; background:var(--bg-soft); text-align:center}
.scoretable th:first-child{text-align:left}
.scoretable td{padding:12px; text-align:center; font-size:13px; border-bottom:1px solid var(--line-soft)}
.scoretable td:first-child{text-align:left}
.scoretable tr:last-child td{border-bottom:none}
.scoretable .winner-row td{background:rgba(26,90,154,.04)}
.task-name{font-weight:500; display:block} .task-cat{font-family:'Geist Mono',monospace; font-size:10px; color:var(--muted-soft); display:block; margin-top:2px}
.spill{display:inline-block; font-family:'Geist Mono',monospace; font-size:12px; padding:3px 10px; border-radius:4px; min-width:54px; font-weight:600}
.spill.navy{background:rgba(26,90,154,.1); color:var(--navy); border:1px solid rgba(26,90,154,.25)}
.spill.green{background:var(--green-soft); color:var(--green); border:1px solid rgba(20,122,69,.25)}
.spill.gold{background:var(--gold-soft); color:var(--gold); border:1px solid rgba(154,123,31,.25)}
.spill.clay{background:var(--clay-soft); color:var(--clay); border:1px solid rgba(179,64,46,.25)}

.cov-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:48px}
.cov-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:20px 16px; text-align:center}
.cov-card .cl{font-family:'Geist Mono',monospace; font-size:10.5px; letter-spacing:.06em; color:var(--muted); margin-bottom:10px}
.cov-card .cv{font-size:34px; font-weight:600; line-height:1; letter-spacing:-.03em; color:var(--navy); margin-bottom:4px}
.cov-card .cu{font-size:12.5px; color:var(--muted)}
.meth{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; margin-bottom:48px}
.meth h3{font-size:20px; margin-bottom:20px}
.meth-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.meth-item h4{font-family:'Geist Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); margin-bottom:8px}
.meth-item p{font-size:14px; color:var(--muted); line-height:1.65; margin:0}
@media(max-width:760px){
  .hl-grid,.pillar3,.cov-grid,.meth-grid{grid-template-columns:1fr}
  .cov-grid{grid-template-columns:repeat(2,1fr)}
  .bar-row{grid-template-columns:90px 1fr 48px}
}

/* Mock annotation banner */

/* Responsive */
@media(max-width:900px){
  nav.bar{flex-wrap:wrap; gap:14px}
  .brand{margin-right:auto}
  nav.bar > .btn{order:2}
  .nav-burger{display:flex; order:3}
  .nav-links{order:4; display:none; flex-direction:column; align-items:stretch; gap:0; width:100%; margin-top:4px}
  .nav-toggle:checked ~ .nav-links{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block; padding:13px 2px; font-size:15px; border-top:1px solid var(--line-soft)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .feature,.feature .inner,.price-grid,.tool-grid,.quote-grid,.pillar-grid,.intro-cards,.blog-grid,.featured,.contact-grid{grid-template-columns:1fr; gap:28px}
  .stat-grid,.lstat-grid,.mgrid{grid-template-columns:repeat(2,1fr)}
  .workbench{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .wrap,nav.bar,.page-hero,.section-pad,.feature,.feature .inner,.final,footer.site{padding-left:20px; padding-right:20px}
  .page-hero{padding-top:52px; padding-bottom:30px}
  .section-pad{padding-top:56px; padding-bottom:56px}
  .feature,.feature .inner{padding-top:56px; padding-bottom:56px; gap:32px}
  .final{padding-top:64px; padding-bottom:64px}
  .stat-grid,.lstat-grid,.mgrid,.cov-grid{grid-template-columns:1fr}
  .price-card{padding:24px}
  .featured .ft-text{padding:28px}
  .featured .ft-img{min-height:200px; font-size:30px}
  .quote,.pillar,.intro-card,.tool-card,.moat{padding:22px}
  .page-hero h1{font-size:clamp(30px,8vw,40px)}
}
@media(max-width:760px){
  .resp-grid{grid-template-columns:1fr !important}
}