/* ============================================================================
   VeriSyte — site styles
   Design tokens from the Marketing brand system (navy / steel / teal).
   Mobile-first-friendly; tested at 375 / 768 / 1280.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:        #0A1628;
  --steel:       #1E4D8C;
  --steel-light: #2D6CB5;
  --teal:        #1AACB8;
  --teal-light:  #2EC4D0;
  --teal-pale:   #E0F7F9;
  --text-primary:   #0A1628;
  --text-secondary: #4B5A6E;
  --text-muted:     #8A97A8;
  --bg:          #ffffff;
  --bg-surface:  #F4F7FB;
  --border:      rgba(10,22,40,0.09);
  --border-teal: rgba(26,172,184,0.3);
  --danger:      #E24B4A;
  --maxw: 1140px;
  --radius: 10px;
  --shadow: 0 6px 28px rgba(10,22,40,0.09);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
body::after { content:''; position:fixed; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--steel), var(--teal)); z-index:200; }

img { max-width: 100%; height: auto; }
a { color: var(--steel); text-decoration: none; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; color: var(--navy); line-height: 1.15; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; width: 100%; }
.container.narrow { max-width: 820px; }
.visually-hidden, .hp { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; z-index:300; }
.skip-link:focus { left:8px; top:8px; }
.text-muted { color: var(--text-muted); }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:13px; letter-spacing:0.04em;
  padding:12px 22px; border-radius:4px; border:1px solid transparent; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .15s; white-space:nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding:14px 28px; font-size:14px; }
.btn-block { width:100%; }
.btn-primary { background:var(--steel); color:#fff; }
.btn-primary:hover { background:var(--steel-light); color:#fff; }
.btn-secondary { background:var(--teal); color:#fff; }
.btn-secondary:hover { background:var(--teal-light); color:#fff; }
.btn-ghost { background:transparent; color:var(--navy); border-color:var(--border); }
.btn-ghost:hover { border-color:var(--steel); color:var(--steel); }
.btn-outline { background:transparent; color:var(--steel); border-color:var(--border-teal); }
.btn-outline:hover { background:var(--teal-pale); color:var(--steel); }

/* ── Header / nav ── */
.site-header { position:sticky; top:3px; z-index:100; background:rgba(255,255,255,0.97);
  backdrop-filter: blur(8px); border-bottom:1px solid var(--border); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:20px;
  max-width:var(--maxw); margin:0 auto; padding:16px 32px; }
.logo { display:block; }
.logo-wordmark { font-family:'Playfair Display',serif; font-weight:700; font-size:23px; color:var(--navy); letter-spacing:0.02em; display:block; }
.logo-wordmark em { font-style:normal; color:var(--teal); }
.logo-sub { font-size:9px; font-weight:400; letter-spacing:0.13em; text-transform:uppercase; color:var(--text-muted); margin-top:2px; display:block; }

.nav-menu { display:flex; align-items:center; gap:28px; }
.nav-links { display:flex; align-items:center; gap:26px; list-style:none; }
.nav-links > li > a { font-size:14px; font-weight:500; color:var(--text-secondary); padding:6px 0; }
.nav-links > li > a:hover { color:var(--steel); }
.nav-cta { }

/* dropdown */
.has-dropdown { position:relative; }
.dropdown { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  width:520px; padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:4px;
  opacity:0; visibility:hidden; transition:opacity .18s, transform .18s; z-index:120; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity:1; visibility:visible; transform:translateX(-50%) translateY(6px); }
.dropdown > a { display:flex; gap:11px; padding:10px 12px; border-radius:8px; align-items:flex-start; }
.dropdown > a:hover { background:var(--bg-surface); }
.dd-icon { flex-shrink:0; width:26px; height:26px; display:flex; align-items:center; justify-content:center; }
.dd-icon svg { width:22px; height:22px; }
.dd-title { display:block; font-size:13.5px; font-weight:600; color:var(--navy); }
.dd-desc { display:block; font-size:11.5px; color:var(--text-muted); line-height:1.45; margin-top:2px; }
.dropdown-all { grid-column:1 / -1; text-align:center; font-size:12.5px; font-weight:600; color:var(--teal); padding:10px; border-top:1px solid var(--border); margin-top:4px; }

.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span { width:22px; height:2px; background:var(--navy); border-radius:2px; transition:.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Breadcrumbs ── */
.breadcrumbs { border-bottom:1px solid var(--border); background:var(--bg-surface); }
.breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:11px 0; font-size:12px; color:var(--text-muted); }
.breadcrumbs li:not(:first-child)::before { content:'/'; margin-right:8px; color:var(--text-muted); }
.breadcrumbs a { color:var(--text-secondary); }
.breadcrumbs a:hover { color:var(--steel); }
.breadcrumbs [aria-current="page"] { color:var(--navy); }

/* ── Hero (two-column: copy + product mockup) ── */
.hero { padding:56px 0 60px; position:relative; }
.hero::before { content:''; position:absolute; inset:0; z-index:-1;
  background-image: radial-gradient(circle, rgba(30,77,140,0.05) 1px, transparent 1px); background-size:30px 30px; }
.hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center; }
.hero-copy { text-align:left; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--teal); margin-bottom:18px; padding:6px 13px; background:var(--teal-pale); border-radius:2px; }
.hero h1 { font-size:clamp(32px, 4vw, 48px); font-weight:700; margin-bottom:18px; }
.hero h1 em { font-style:italic; color:var(--steel); }
.hero-sub { font-size:clamp(15px,1.6vw,16.5px); font-weight:300; color:var(--text-secondary); max-width:560px; margin:0 0 28px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-start; margin-bottom:22px; }
.hero-quick { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-start; max-width:460px; margin:0 0 22px; width:100%; }
.cta-input { flex:1; min-width:200px; background:var(--bg-surface); border:1px solid var(--border); padding:12px 16px;
  font-size:13px; font-family:'Inter',sans-serif; color:var(--navy); outline:none; border-radius:4px; transition:border-color .2s; }
.cta-input:focus { border-color:var(--teal); }
.cta-input::placeholder { color:var(--text-muted); }
.cta-success { display:inline-flex; align-items:center; gap:8px; color:var(--teal); font-family:'Playfair Display',serif; font-style:italic; font-size:16px; margin:0 0 22px; }
.hero-trust { display:flex; gap:22px; flex-wrap:wrap; justify-content:flex-start; list-style:none; padding-top:20px; border-top:1px solid var(--border); font-size:11.5px; color:var(--text-muted); }
.hero-trust li { position:relative; }
.hero-trust li::before { content:'✦'; color:var(--teal); font-size:8px; margin-right:6px; }

/* Product mockup (illustrative compliance dashboard) */
.hero-visual { display:flex; justify-content:center; }
.mock { width:100%; max-width:440px; background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:0 24px 60px rgba(10,22,40,0.14); overflow:hidden; }
.mock-head { display:flex; align-items:center; gap:7px; padding:13px 16px; background:var(--bg-surface); border-bottom:1px solid var(--border); }
.mock-dot { width:9px; height:9px; border-radius:50%; background:#d7dee8; }
.mock-title { margin-left:8px; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:var(--text-secondary); letter-spacing:0.02em; }
.mock-live { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--teal); }
.mock-live::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); animation:blink 2.2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.3;transform:scale(.7);} }
.mock-body { padding:18px; }
.mock-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.mock-stat { border:1px solid var(--border); border-radius:9px; padding:13px 14px; }
.mock-stat-num { display:block; font-family:'Playfair Display',serif; font-weight:700; font-size:26px; color:var(--navy); line-height:1; }
.mock-stat-num em { font-style:normal; color:var(--teal); font-size:16px; }
.mock-stat-label { display:block; font-size:10.5px; color:var(--text-muted); margin-top:5px; }
.mock-rows { display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
.mock-rowhead { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); padding:0 2px 8px; }
.mock-row { display:flex; align-items:center; justify-content:space-between; padding:9px 2px; border-top:1px solid var(--border); }
.mock-vendor { font-size:12.5px; color:var(--navy); font-weight:500; }
.pill { font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px; letter-spacing:0.02em; }
.pill-ok { background:rgba(26,172,184,0.12); color:#0f8a94; }
.pill-warn { background:#FFF3DA; color:#B8860B; }
.pill-bad { background:#FDE7E7; color:#C0392B; }
.mock-alert { display:flex; align-items:center; gap:9px; background:#FFF7E8; border:1px solid #F3E2BE; border-radius:9px; padding:11px 13px; font-size:11.5px; color:#8a6d1f; }
.mock-alert-dot { flex-shrink:0; width:8px; height:8px; border-radius:50%; background:#E4A11B; }

/* ── Proof band ── */
.proof-band { background:var(--navy); padding:24px 0; }
.proof-lead { text-align:center; color:rgba(255,255,255,.6); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:14px; }
.proof-list { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px; }
.proof-list li { color:#fff; font-size:13px; font-weight:500; position:relative; padding-left:20px; }
.proof-list li::before { content:'✓'; position:absolute; left:0; color:var(--teal); font-weight:700; }

/* ── Stats ── */
.stats-strip { background:var(--bg-surface); border-bottom:1px solid var(--border); }
.stats-inner { display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item { padding:30px 22px; text-align:center; border-right:1px solid var(--border); }
.stat-item:last-child { border-right:none; }
.stat-num { font-family:'Playfair Display',serif; font-weight:700; font-size:34px; color:var(--navy); line-height:1; }
.stat-num span { color:var(--teal); font-size:20px; }
.stat-desc { font-size:11.5px; color:var(--text-secondary); margin-top:8px; max-width:180px; margin-left:auto; margin-right:auto; }

/* ── Sections ── */
.section { padding:72px 0; }
.section-alt { background:var(--bg-surface); }
.section-head { text-align:center; max-width:680px; margin:0 auto 48px; }
.section-label { display:block; font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal); margin-bottom:12px; }
.section-head h2 { font-size:clamp(26px,3.4vw,34px); }
.section-head p { font-size:15px; font-weight:300; color:var(--text-secondary); margin-top:12px; }
.section-cta { text-align:center; margin-top:40px; }
.page-hero { padding:64px 0 20px; text-align:center; }
.page-hero .eyebrow { margin-bottom:18px; }
.page-hero h1 { font-size:clamp(30px,4.4vw,46px); margin-bottom:18px; }
.lead { font-size:clamp(15px,1.7vw,17px); font-weight:300; color:var(--text-secondary); max-width:680px; margin:0 auto 26px; }
.page-hero .hero-actions { justify-content:center; }

/* ── Cards grid ── */
.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 24px; position:relative; overflow:hidden; transition:box-shadow .25s, border-color .25s, transform .2s; color:inherit; }
.feature-card:hover { box-shadow:var(--shadow); border-color:rgba(30,77,140,.2); transform:translateY(-3px); }
.feature-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--steel),var(--teal)); opacity:0; transition:opacity .3s; }
.feature-card:hover::after { opacity:1; }
.feature-icon { width:46px; height:46px; border-radius:10px; background:var(--bg-surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.feature-card h2, .feature-card h3 { font-size:18px; margin-bottom:8px; }
.feature-card p { font-size:13.5px; color:var(--text-secondary); margin-bottom:16px; flex:1; }
.feature-tag { display:inline-flex; align-self:flex-start; font-family:'Inter',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--teal); background:var(--teal-pale); padding:4px 10px; border-radius:2px; margin-bottom:14px; }
.feature-link { font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:var(--steel); }
/* Centered 2-up variant (e.g. "Related capabilities") so a pair of cards
   doesn't sit left-aligned in the 3-column grid. */
.cards-grid--pair { grid-template-columns:repeat(2,1fr); max-width:760px; margin-left:auto; margin-right:auto; }

/* ── Value grid ── */
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px 30px; }
.value-item { border-left:2px solid var(--teal); padding-left:18px; }
.value-item h3 { font-size:17px; margin-bottom:8px; }
.value-item p { font-size:13.5px; color:var(--text-secondary); }

/* ── Steps ── */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.step { text-align:center; padding:0 16px; }
.step-num { width:40px; height:40px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; margin:0 auto 14px; }
.step h3 { font-size:16px; margin-bottom:8px; }
.step p { font-size:13px; color:var(--text-secondary); }

/* ── Flow (how-it-works product steps) ── */
.flow { list-style:none; counter-reset:flow; position:relative; }
.flow-step { display:flex; gap:22px; padding:0 0 34px; position:relative; }
.flow-step:not(:last-child)::before { content:''; position:absolute; left:23px; top:48px; bottom:0; width:2px; background:var(--border); }
.flow-num { flex-shrink:0; width:48px; height:48px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-weight:700; font-size:19px; z-index:1; }
.flow-body { padding-top:4px; }
.flow-body h2 { font-size:20px; margin-bottom:8px; }
.flow-body p { font-size:14.5px; color:var(--text-secondary); }

/* ── Feature list (capability detail) ── */
.feature-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.feature-row { display:flex; gap:22px; padding:26px 0; border-bottom:1px solid var(--border); }
.feature-row:last-child { border-bottom:none; }
.feature-row-mark { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:var(--teal); flex-shrink:0; width:40px; }
.feature-row h2 { font-size:19px; margin-bottom:8px; }
.feature-row p { font-size:14.5px; color:var(--text-secondary); }

/* ── Outcome block ── */
.outcome-block { background:#fff; border:1px solid var(--border-teal); border-left:3px solid var(--teal); border-radius:8px; padding:28px 30px; }
.outcome-text { font-size:16px; font-style:italic; font-family:'Playfair Display',serif; color:var(--navy); line-height:1.6; margin-top:8px; }

/* ── Tables ── */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
.data-table { width:100%; border-collapse:collapse; min-width:600px; }
.data-table th { background:var(--navy); color:#fff; text-align:left; padding:14px 18px; font-size:12px; letter-spacing:0.04em; font-family:'Inter',sans-serif; }
.data-table td { padding:14px 18px; border-top:1px solid var(--border); font-size:13.5px; color:var(--text-secondary); vertical-align:top; }
.data-table td strong { color:var(--navy); }

/* ── Check list ── */
.check-list { list-style:none; max-width:820px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; }
.check-list li { position:relative; padding-left:30px; font-size:14px; color:var(--text-secondary); }
.check-list li::before { content:'✓'; position:absolute; left:0; top:-1px; width:20px; height:20px; background:var(--teal-pale); color:var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }

/* ── Timeline ── */
.timeline { list-style:none; position:relative; padding-left:34px; }
.timeline::before { content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--border); }
.timeline-item { position:relative; padding:0 0 34px; }
.timeline-item::before { content:''; position:absolute; left:-34px; top:4px; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--teal); }
.timeline-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.timeline-head h2 { font-size:20px; }
.timeline-when { font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:var(--teal); background:var(--teal-pale); padding:3px 10px; border-radius:2px; }
.timeline-item p { font-size:14px; color:var(--text-secondary); }

/* ── FAQ ── */
.faq-section { padding:72px 0; background:var(--bg-surface); }
.faq-list { display:flex; flex-direction:column; gap:12px; }
.faq-item { background:#fff; border:1px solid var(--border); border-radius:8px; padding:4px 22px; }
.faq-item summary { cursor:pointer; font-family:'Playfair Display',serif; font-weight:700; font-size:16px; color:var(--navy); padding:18px 0; list-style:none; position:relative; padding-right:30px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; position:absolute; right:0; top:16px; font-size:22px; color:var(--teal); font-family:'Inter',sans-serif; transition:transform .2s; }
.faq-item[open] summary::after { content:'−'; }
.faq-answer { padding:0 0 20px; }
.faq-answer p { font-size:14px; color:var(--text-secondary); }

/* ── CTA band ── */
.cta-band { background:linear-gradient(120deg, var(--navy), var(--steel)); color:#fff; }
.cta-band-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:52px 0; flex-wrap:wrap; }
.cta-band h2 { color:#fff; font-size:clamp(24px,3vw,30px); margin-bottom:8px; }
.cta-band p { color:rgba(255,255,255,.75); font-size:15px; max-width:560px; }
.cta-band .btn-primary { background:var(--teal); }
.cta-band .btn-primary:hover { background:var(--teal-light); }

/* ── Prose ── */
.prose h1 { font-size:clamp(28px,4vw,40px); margin-bottom:18px; }
.prose h2 { font-size:22px; margin:32px 0 12px; }
.prose h3 { font-size:18px; color:var(--navy); margin:24px 0 10px; }
.prose p { font-size:15.5px; color:var(--text-secondary); margin-bottom:16px; }
.prose a { color:var(--steel); text-decoration:underline; }
.prose ul { margin:0 0 16px; padding-left:22px; }
.prose li { font-size:15px; color:var(--text-secondary); line-height:1.6; margin-bottom:8px; }
/* Long legal documents read better a touch smaller/tighter. */
.legal p, .legal li { font-size:14.5px; }

/* ── Demo page ── */
.demo-page { padding:56px 0 72px; }
.demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.demo-pitch h1 { font-size:clamp(28px,3.6vw,40px); margin-bottom:16px; }
.demo-points { list-style:none; margin:22px 0; display:flex; flex-direction:column; gap:12px; }
.demo-points li { position:relative; padding-left:28px; font-size:14.5px; color:var(--text-secondary); }
.demo-points li::before { content:'✓'; position:absolute; left:0; color:var(--teal); font-weight:700; }
.demo-proof { margin-top:26px; }
.demo-proof li { color:var(--text-secondary); }
.demo-proof li::before { content:'✓'; color:var(--teal); }
.proof-list.demo-proof { justify-content:flex-start; }
.proof-list.demo-proof li { color:var(--text-secondary); padding-left:20px; }

.demo-form-wrap { background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:32px; position:sticky; top:90px; }
.field { margin-bottom:16px; display:flex; flex-direction:column; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field label { font-size:12.5px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.req { color:var(--danger); }
.form-input { width:100%; background:var(--bg-surface); border:1px solid var(--border); border-radius:4px; padding:11px 14px;
  font-family:'Inter',sans-serif; font-size:13.5px; color:var(--navy); outline:none; transition:border-color .2s; }
.form-input:focus { border-color:var(--teal); }
textarea.form-input { resize:vertical; }
.field-error { color:var(--danger); font-size:12px; margin-top:5px; }
.form-error-summary { color:var(--danger); font-size:13px; margin-bottom:14px; }
.form-note { font-size:11.5px; color:var(--text-muted); margin-top:12px; text-align:center; }
.form-note a { color:var(--steel); }
.form-success { text-align:center; padding:30px 10px; }
.form-success-mark { width:56px; height:56px; border-radius:50%; background:var(--teal-pale); color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 16px; }
.form-success h2 { font-size:24px; margin-bottom:8px; }
.form-success p { color:var(--text-secondary); font-size:14px; margin-bottom:18px; }

/* ── Error pages ── */
.error-page { text-align:center; padding:90px 0; }
.error-code { font-family:'Playfair Display',serif; font-weight:700; font-size:64px; color:var(--teal); display:block; }
.error-page h1 { font-size:32px; margin:8px 0 14px; }

/* ── Footer ── */
.site-footer { background:var(--navy); color:rgba(255,255,255,.7); padding:56px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px; }
.site-footer .logo-wordmark { color:#fff; }
.site-footer .logo-sub { color:rgba(255,255,255,.5); }
.footer-blurb { font-size:13px; margin:14px 0 20px; max-width:280px; color:rgba(255,255,255,.6); }
.footer-col h3 { color:#fff; font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col a { color:rgba(255,255,255,.7); font-size:13px; }
.footer-col a:hover { color:var(--teal-light); }
.footer-badges { margin-bottom:16px; }
.footer-badges li { font-size:12.5px; color:rgba(255,255,255,.6); position:relative; padding-left:16px; }
.footer-badges li::before { content:'✦'; position:absolute; left:0; color:var(--teal); font-size:8px; top:3px; }
.footer-bottom { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:20px 0; border-top:1px solid rgba(255,255,255,.1); font-size:11.5px; color:rgba(255,255,255,.5); }

/* ── Blog ── */
.blog-wrap { max-width:var(--maxw); margin:0 auto; padding:64px 32px; }
.blog-head { text-align:center; margin-bottom:44px; }
.blog-head h1 { font-size:clamp(28px,4vw,40px); margin-bottom:10px; }
.blog-head p { font-size:14px; font-weight:300; color:var(--text-secondary); }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.post-card { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:box-shadow .25s, transform .2s; }
.post-card:hover { box-shadow:var(--shadow); transform:translateY(-3px); }
.post-thumb { width:100%; height:170px; object-fit:cover; background:var(--bg-surface); }
.post-body { padding:22px; display:flex; flex-direction:column; flex:1; }
.post-cat { font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal); margin-bottom:10px; }
.post-title { font-size:19px; line-height:1.3; margin-bottom:10px; }
.post-title a { color:var(--navy); }
.post-title a:hover { color:var(--steel); }
.post-excerpt { font-size:13.5px; color:var(--text-secondary); margin-bottom:16px; flex:1; }
.post-meta { font-size:11.5px; color:var(--text-muted); margin-top:auto; }
.pagination { display:flex; justify-content:center; gap:14px; margin-top:44px; align-items:center; }
.pagination a, .pagination span { font-size:12px; padding:8px 16px; border:1px solid var(--border); border-radius:4px; color:var(--text-secondary); }
.pagination a:hover { border-color:var(--teal); color:var(--teal); }
.post-article { max-width:760px; margin:0 auto; padding:48px 32px 72px; }
.post-article .back-link { font-size:12px; color:var(--teal); display:inline-block; margin-bottom:24px; }
.post-article h1 { font-size:clamp(28px,4vw,40px); margin-bottom:14px; }
.post-article .post-meta { margin-bottom:28px; font-size:12px; }
.post-hero-img { width:100%; border-radius:var(--radius); margin-bottom:28px; }
.post-content { font-size:16px; line-height:1.8; color:var(--text-secondary); }
.post-content p { margin-bottom:18px; }
.post-content h2, .post-content h3 { color:var(--navy); margin:28px 0 12px; }
.post-content img { border-radius:8px; }
.post-content a { color:var(--steel); text-decoration:underline; }
.state-block { text-align:center; max-width:520px; margin:40px auto; padding:40px 24px; }
.state-block h2 { font-size:26px; margin-bottom:12px; }
.state-block p { font-size:14px; color:var(--text-secondary); }

/* ============================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1000px) {
  .stat-num { font-size:28px; }
}

@media (max-width: 900px) {
  .nav-toggle { display:flex; }
  .nav-menu { position:fixed; inset:0 0 0 auto; width:min(340px,84vw); background:#fff; flex-direction:column;
    align-items:stretch; gap:0; padding:84px 24px 30px; box-shadow:-8px 0 40px rgba(10,22,40,.18);
    transform:translateX(100%); transition:transform .28s ease; overflow-y:auto; z-index:90; }
  .nav-menu.open { transform:translateX(0); }
  .nav-links { flex-direction:column; align-items:stretch; gap:0; }
  .nav-links > li { border-bottom:1px solid var(--border); }
  .nav-links > li > a { display:block; padding:15px 0; font-size:15px; }
  .has-dropdown .dropdown { position:static; transform:none; width:auto; box-shadow:none; border:none; opacity:1; visibility:visible;
    display:flex; flex-direction:column; padding:0 0 12px; grid-template-columns:1fr; }
  .dropdown > a { padding:10px 0; }
  .dd-desc { display:none; }
  .dropdown-all { text-align:left; border-top:none; padding:8px 0; }
  .nav-cta { margin-top:18px; text-align:center; }
  body.nav-open { overflow:hidden; }
  .nav-backdrop { position:fixed; inset:0; background:rgba(10,22,40,.4); z-index:80; opacity:0; visibility:hidden; transition:opacity .25s; }
  .nav-backdrop.show { opacity:1; visibility:visible; }
}

@media (max-width: 900px) {
  /* Stack the hero: copy centered on top, mockup below. */
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .hero-copy { text-align:center; }
  .hero-sub { margin-left:auto; margin-right:auto; }
  .hero-actions, .hero-quick, .hero-trust { justify-content:center; }
  .hero-quick { margin-left:auto; margin-right:auto; }
}

@media (max-width: 860px) {
  .container { padding:0 22px; }
  .section, .faq-section { padding:52px 0; }
  .cards-grid { grid-template-columns:1fr 1fr; }
  .value-grid { grid-template-columns:1fr 1fr; }
  .blog-grid { grid-template-columns:1fr 1fr; }
  .blog-wrap { padding:52px 22px; }
  .stats-inner { grid-template-columns:1fr 1fr; }
  .stat-item:nth-child(2) { border-right:none; }
  .stat-item { border-bottom:1px solid var(--border); }
  .demo-grid { grid-template-columns:1fr; gap:36px; }
  .demo-form-wrap { position:static; }
  .cta-band-inner { flex-direction:column; align-items:flex-start; }
}

@media (max-width: 560px) {
  .container { padding:0 18px; }
  .hero { padding:52px 0 44px; }
  .cards-grid { grid-template-columns:1fr; }
  .value-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; gap:22px; }
  .stats-inner { grid-template-columns:1fr 1fr; }
  .check-list { grid-template-columns:1fr; }
  .field-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .footer-brand { grid-column:1 / -1; }
  .hero-actions .btn, .page-hero .hero-actions .btn { flex:1; }
  .demo-form-wrap { padding:24px 20px; }
  .feature-row { flex-direction:column; gap:8px; }
}