/* ABAVault marketing site ,  brand: logo blue + navy + emerald, DM Sans */
/* Fonts are loaded from each page's <head> (preconnect + stylesheet link) so the CSS file doesn't chain-block them. */

:root {
  --blue: #246cb5;
  --blue-bright: #378add;
  --blue-deep: #185fa5;
  --navy: #0a1628;
  --navy-2: #0f172a;
  --slate: #1e293b;
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #64748b;
  --text-inv: #f8fafc;
  --text-inv-2: #94a3b8;
  --emerald: #10b981;
  --amber: #f59e0b;
  --bg: #ffffff;
  --bg-2: #f8fafc;
  --border: #e2e8f0;
  --req: #b91c1c;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 48px rgba(15, 23, 42, .14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', -apple-system, sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; font-size: 16px; }
img { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── Nav ── */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-logo img { height: 34px; display: block; }
.nav-links { display: flex; gap: 28px; align-items: center; list-style: none; }
.nav-links a { color: var(--text-2); font-weight: 500; font-size: 15px; }
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.nav-cta { background: var(--blue); color: #fff !important; padding: 9px 18px; border-radius: 8px; font-weight: 600; }
.nav-cta:hover { background: var(--blue-deep); }
.nav-toggle { display: none; background: none; border: none; font-size: 26px; cursor: pointer; color: var(--text); }

/* ── Hero ── */
.hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, #123055 100%); color: var(--text-inv); padding: 96px 0 88px; }
.hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; max-width: 800px; }
.hero h1 .accent { color: var(--blue-bright); }
.hero p.lead { font-size: 19px; color: var(--text-inv-2); max-width: 640px; margin: 22px 0 34px; }
.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.badge { border: 1px solid rgba(255,255,255,.18); color: var(--text-inv-2); border-radius: 99px; padding: 5px 14px; font-size: 13px; font-weight: 500; }
.badge b { color: var(--emerald); }

/* ── Buttons ── */
.btn { display: inline-block; padding: 13px 26px; border-radius: 9px; font-weight: 600; font-size: 16px; cursor: pointer; border: none; transition: .15s; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); }
.btn-ghost { background: transparent; color: var(--text-inv); border: 1.5px solid rgba(255,255,255,.35); margin-left: 12px; }
.btn-ghost:hover { border-color: #fff; }
.btn-emerald { background: var(--emerald); color: #fff; }
.btn-emerald:hover { background: #0da271; }
.btn-outline { background: #fff; color: var(--blue); border: 1.5px solid var(--blue); }
.btn-outline:hover { background: #eff6ff; }

/* ── Sections ── */
section { padding: 76px 0; }
.section-alt { background: var(--bg-2); }
.kicker { color: var(--blue); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
h2.section-title { font-size: clamp(28px, 3.6vw, 38px); letter-spacing: -.01em; line-height: 1.2; margin: 8px 0 14px; }
.section-sub { color: var(--text-2); font-size: 17px; max-width: 640px; }

/* ── Cards / grids ── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.card .icon { width: 44px; height: 44px; border-radius: 10px; background: #eaf2fb; color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { color: var(--text-2); font-size: 15px; }
.card ul { margin: 10px 0 0 18px; color: var(--text-2); font-size: 15px; }
.card ul li { margin-bottom: 6px; }

/* ── Diff band ── */
.band { background: var(--navy); color: var(--text-inv); border-radius: 16px; padding: 48px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.band h2 { font-size: 30px; line-height: 1.2; margin-bottom: 12px; }
.band p { color: var(--text-inv-2); }
.band .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stat { border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 18px; }
.stat .num { font-size: 28px; font-weight: 700; color: var(--emerald); }
.stat .lbl { font-size: 13px; color: var(--text-inv-2); }

/* ── Pricing ── */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; align-items: stretch; }
.plan { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; position: relative; }
.plan.featured { border: 2px solid var(--blue); box-shadow: var(--shadow-lg); }
.plan .flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 99px; white-space: nowrap; }
.plan h3 { font-size: 17px; }
.plan .for { color: var(--text-3); font-size: 13.5px; min-height: 42px; margin-top: 2px; }
.plan .price { font-size: 38px; font-weight: 700; letter-spacing: -.02em; margin: 14px 0 2px; }
.plan .price small { font-size: 14px; font-weight: 500; color: var(--text-3); }
.plan .min { font-size: 13px; color: var(--text-3); margin-bottom: 18px; }
.plan ul { list-style: none; margin-bottom: 24px; flex: 1; }
.plan ul li { padding: 6px 0 6px 26px; position: relative; font-size: 14.5px; color: var(--text-2); border-bottom: 1px dashed var(--border); }
.plan ul li:before { content: "✓"; position: absolute; left: 2px; color: var(--emerald); font-weight: 700; }
.plan .btn { text-align: center; }
.startup-strip { margin-top: 26px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 12px; padding: 18px 22px; font-size: 15px; }

/* ── Tables ── */
table.compare { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: 15px; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.compare th, table.compare td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); }
table.compare thead th { background: var(--navy); color: #fff; font-weight: 600; }
table.compare td.yes { color: var(--emerald); font-weight: 700; }
table.compare td.no { color: #cbd5e1; }
table.compare tr.hl { background: #eff6ff; }

/* ── ROI calculator ── */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.calc-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; }
.calc-panel label { display: block; font-weight: 600; font-size: 14px; margin: 18px 0 6px; }
.calc-panel label:first-of-type { margin-top: 0; }
.calc-panel input[type=range] { width: 100%; accent-color: var(--blue); }
.calc-panel .val { float: right; color: var(--blue); font-weight: 700; }
.calc-panel select, .calc-panel input[type=number] { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.calc-result { background: var(--navy); color: var(--text-inv); border-radius: var(--radius); padding: 30px; }
.calc-result .row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 15px; }
.calc-result .row .r { font-weight: 600; }
.calc-result .savings { text-align: center; padding: 22px 0 8px; }
.calc-result .savings .num { font-size: 42px; font-weight: 700; color: var(--emerald); }
.calc-result .savings .lbl { color: var(--text-inv-2); font-size: 14px; }
.fineprint { font-size: 12.5px; color: var(--text-3); margin-top: 16px; }

/* ── Forms ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.form-grid textarea { min-height: 120px; resize: vertical; }
/* The star on a required field. Marked in the markup rather than derived from
   input:required with :has(), because the checkbox at the end of the beta form
   has its label AFTER the input and a clever selector would silently miss it. */
.form-grid .req { color: var(--req); font-weight: 700; }
/* A submission that came back refused (beta.html). The same red as the
   required marks, so it reads as part of the form rather than a banner. */
.form-grid .form-error { grid-column: 1 / -1; border: 1px solid var(--req); color: var(--req); background: color-mix(in srgb, var(--req) 6%, transparent); border-radius: 8px; padding: 12px 14px; font-weight: 600; font-size: 14px; }
.form-grid .form-error[hidden] { display: none; }
.form-legend { color: var(--text-3); font-size: 13px; margin-top: 26px; }
.form-legend .req { color: var(--req); font-weight: 700; }

/* ── FAQ ── */
.faq details { border-bottom: 1px solid var(--border); padding: 18px 0; }
.faq summary { font-weight: 600; cursor: pointer; font-size: 16.5px; }
.faq details p { color: var(--text-2); margin-top: 10px; font-size: 15px; }

/* ── Blog ── */
.post-card { display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; color: inherit; transition: .15s; }
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.post-card .date { color: var(--text-3); font-size: 13px; }
.post-card h3 { margin: 6px 0 8px; font-size: 19px; }
.post-card p { color: var(--text-2); font-size: 15px; }

/* ── CTA banner ── */
.cta-banner { background: linear-gradient(135deg, var(--blue-deep), var(--blue)); border-radius: 16px; color: #fff; text-align: center; padding: 56px 32px; }
.cta-banner h2 { font-size: 32px; margin-bottom: 10px; }
.cta-banner p { opacity: .9; margin-bottom: 26px; }

/* ── Footer ── */
footer { background: var(--navy); color: var(--text-inv-2); padding: 56px 0 32px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
footer img { height: 30px; margin-bottom: 14px; }
footer h4 { color: #fff; font-size: 14px; margin-bottom: 12px; }
footer ul { list-style: none; }
footer ul li { margin-bottom: 8px; }
footer a { color: var(--text-inv-2); font-size: 14px; }
footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 22px; font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .grid-3, .pricing-grid { grid-template-columns: 1fr 1fr; }
  .band { grid-template-columns: 1fr; padding: 32px; }
  .calc, .grid-2, .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid-3, .pricing-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; background: #fff; flex-direction: column; padding: 20px; border-bottom: 1px solid var(--border); gap: 16px; }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .hero { padding: 64px 0 56px; }
  .btn-ghost { margin-left: 0; margin-top: 10px; }
}

/* ── Article layout ── */
.article { max-width: 760px; margin: 0 auto; }
.article .meta { color: var(--text-3); font-size: 14px; margin-bottom: 28px; }
.article h2 { font-size: 26px; margin: 38px 0 14px; letter-spacing: -.01em; }
.article p { color: var(--text-2); margin-bottom: 18px; font-size: 16.5px; }
.article .pull { border-left: 4px solid var(--blue); background: var(--bg-2); padding: 18px 22px; border-radius: 0 10px 10px 0; margin: 26px 0; font-size: 16.5px; color: var(--text); }
.article table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.article table th, .article table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.article table thead th { background: var(--bg-2); }
.article .cta-inline { background: #eaf2fb; border: 1px solid #c8ddf2; border-radius: 12px; padding: 20px 24px; margin: 30px 0; }

/* ── Inline SVG feature icons ── */
.icon svg { width: 22px; height: 22px; display: block; }

/* ── Screenshot placeholder frames (swap for real captures before launch) ── */
.shot-frame { background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
.shot-bar { background: var(--navy); height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 16px; }
.shot-bar span { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.shot-bar em { font-style: normal; color: var(--text-inv-2); font-size: 13px; margin: 0 auto; }
.shot-body { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); background: repeating-linear-gradient(45deg, #fbfcfe, #fbfcfe 14px, #f5f8fb 14px, #f5f8fb 28px); }
.shot-body svg { width: 40px; height: 40px; opacity: .45; }
.shot-body b { color: var(--text-2); font-size: 15px; }
.shot-body span { font-size: 13.5px; }
.shot-body img { width: 100%; height: auto; display: block; }

/* ── Product mockups & feature-page layout ── */
.mockup { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
.mockup svg { display: block; width: 100%; height: auto; }
.mockup-caption { text-align: center; color: var(--text-3); font-size: 13.5px; margin-top: 14px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 44px; }
.split .content h3 { font-size: 22px; margin-bottom: 10px; }
.split .content p { color: var(--text-2); margin-bottom: 12px; }
.split .content ul { margin: 8px 0 0 18px; color: var(--text-2); }
.split .content ul li { margin-bottom: 8px; }
.checkline { list-style: none !important; margin-left: 0 !important; }
.checkline li { padding-left: 26px; position: relative; list-style: none; }
.checkline li:before { content: "✓"; position: absolute; left: 0; color: var(--emerald); font-weight: 700; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } }

/* ── Nav dropdown ── */
.dropdown { position: relative; }
.dropdown > a:after { content: " ▾"; font-size: 11px; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: -14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); list-style: none; padding: 10px; min-width: 210px; z-index: 60; }
.dropdown-menu li a { display: block; padding: 9px 14px; border-radius: 8px; font-size: 14.5px; }
.dropdown-menu li a:hover { background: var(--bg-2); }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; }
@media (max-width: 640px) {
  .dropdown-menu { position: static; display: block; border: none; box-shadow: none; padding: 4px 0 4px 14px; }
}

/* ── Interactive tour ── */
.tour-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 36px 0 18px; }
.tour-tab { padding: 10px 20px; border-radius: 99px; border: 1.5px solid var(--border); background: #fff; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--text-2); cursor: pointer; }
.tour-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.tour-panel { display: none; }
.tour-panel.active { display: block; }
.tour-note { background: #eaf2fb; border: 1px solid #c8ddf2; border-radius: 10px; padding: 12px 18px; font-size: 14px; color: var(--text-2); margin-top: 16px; }
.dtt-live { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 28px; box-shadow: var(--shadow); }
.dtt-live .big-btns { display: flex; gap: 12px; margin: 14px 0; }
.dtt-live .big-btns button { flex: 1; padding: 22px 0; font: inherit; font-weight: 700; font-size: 17px; border: none; border-radius: 12px; cursor: pointer; color: #fff; }
.dtt-live .correct { background: var(--emerald); }
.dtt-live .incorrect { background: #e24b4a; }
.dtt-live .statline { font-size: 15px; color: var(--text-2); }
.dtt-live .pct { font-size: 44px; font-weight: 700; letter-spacing: -.02em; }
.trial-dots { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 16px; }
.trial-dots span { width: 18px; height: 18px; border-radius: 50%; background: var(--border); display: inline-block; }
.trial-dots span.c { background: var(--emerald); }
.trial-dots span.i { background: #e24b4a; }
@media (max-width: 900px) { .dtt-live { grid-template-columns: 1fr; } }

/* ── Hero visual ── */
.hero-shot { margin: 44px auto 0; max-width: 980px; }
.hero-shot .mockup { border-color: rgba(255,255,255,.15); box-shadow: 0 24px 80px rgba(0,0,0,.45); }

/* ════════════════════════════════════════════════════════════════
   MODERN THEME 2.0 ,  appended overrides. Aurora, glass, gradients,
   motion. Later rules win the cascade, so nothing above needs edits.
   ════════════════════════════════════════════════════════════════ */

:root {
  --grad-brand: linear-gradient(120deg, #378add 0%, #246cb5 45%, #10b981 110%);
  --grad-btn: linear-gradient(120deg, #2a7ac9, #185fa5);
  --radius: 16px;
}

::selection { background: rgba(36,108,181,.22); }
html { scrollbar-color: #b9cde0 transparent; }

/* ── Typography scale-up ── */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.hero h1 { font-size: clamp(38px, 5.4vw, 62px); letter-spacing: -.03em; line-height: 1.06; }
h2.section-title { letter-spacing: -.02em; }
.kicker { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .kicker { background: none; color: var(--blue-bright); }
.hero h1 .accent { background: linear-gradient(100deg, #5aa7ec, #34d39d); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Aurora hero ── */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero:before {
  content: ""; position: absolute; inset: -40% -20%; z-index: -2;
  background:
    radial-gradient(42% 55% at 18% 30%, rgba(55,138,221,.38), transparent 62%),
    radial-gradient(38% 48% at 82% 18%, rgba(16,185,129,.20), transparent 60%),
    radial-gradient(50% 60% at 65% 85%, rgba(24,95,165,.42), transparent 65%);
  animation: aurora 16s ease-in-out infinite alternate;
}
.hero:after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 70% at 50% 30%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 30%, transparent 100%);
}
@keyframes aurora {
  0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3%, -2%, 0) rotate(2deg) scale(1.06); }
  100% { transform: translate3d(-3%, 2%, 0) rotate(-2deg) scale(1.03); }
}
.badge { background: rgba(255,255,255,.06); backdrop-filter: blur(6px); border-color: rgba(255,255,255,.22); }

/* ── Glass nav ── */
.nav { background: rgba(255,255,255,.72); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); transition: box-shadow .25s, background .25s; }
.nav.scrolled { box-shadow: 0 8px 30px rgba(15,23,42,.10); background: rgba(255,255,255,.88); }
.nav-cta { background: var(--grad-btn); box-shadow: 0 4px 14px rgba(36,108,181,.35); border-radius: 10px; }
.nav-cta:hover { box-shadow: 0 6px 20px rgba(36,108,181,.5); transform: translateY(-1px); }
.dropdown-menu { border-radius: 14px; box-shadow: 0 18px 50px rgba(15,23,42,.16); border-color: #e8eef5; }

/* ── Buttons ── */
.btn { border-radius: 11px; transition: transform .18s, box-shadow .18s, background .18s; }
.btn-primary { background: var(--grad-btn); box-shadow: 0 6px 18px rgba(36,108,181,.32); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(36,108,181,.42); }
.btn-emerald { box-shadow: 0 6px 18px rgba(16,185,129,.3); }
.btn-emerald:hover { transform: translateY(-2px); }
.btn-outline:hover { transform: translateY(-1px); }

/* ── Cards: lift + gradient edge ── */
.card, .post-card, .plan, .cq {
  border-radius: var(--radius);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
  position: relative;
}
.card:hover, .post-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(15,23,42,.12); border-color: #cfe0f0; }
.card:before, .post-card:before {
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 3px; border-radius: 0 0 6px 6px;
  background: var(--grad-brand); opacity: 0; transition: opacity .25s;
}
.card:hover:before, .post-card:hover:before { opacity: 1; }
.card .icon { background: linear-gradient(135deg, #eaf2fb, #e2f7ef); box-shadow: inset 0 0 0 1px rgba(36,108,181,.12); border-radius: 12px; }

/* ── Pricing ── */
.plan.featured { border: 1.5px solid transparent; background: linear-gradient(#fff,#fff) padding-box, var(--grad-brand) border-box; }
.plan .flag { background: var(--grad-btn); box-shadow: 0 4px 12px rgba(36,108,181,.4); }
.plan:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15,23,42,.12); }

/* ── Tables ── */
table.compare { border-radius: var(--radius); }
table.compare tbody tr { transition: background .15s; }
table.compare tbody tr:hover { background: #f4f8fc; }
table.compare thead th { background: linear-gradient(120deg, #0a1628, #143152); }

/* ── Bands, banners, mockups ── */
.band { border-radius: 20px; position: relative; overflow: hidden; }
.band:before { content: ""; position: absolute; inset: -30%; background: radial-gradient(40% 50% at 80% 20%, rgba(55,138,221,.25), transparent 60%); pointer-events: none; }
.cta-banner { border-radius: 20px; position: relative; overflow: hidden; }
.cta-banner:before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 20% 10%, rgba(255,255,255,.14), transparent 55%); pointer-events: none; }
.mockup { border-radius: 18px; box-shadow: 0 24px 60px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.06); }
.hero-shot { position: relative; }
.hero-shot:before { content: ""; position: absolute; inset: 8% -6% -10% -6%; background: radial-gradient(50% 60% at 50% 60%, rgba(55,138,221,.35), transparent 70%); filter: blur(30px); z-index: 0; }
.hero-shot .mockup { position: relative; z-index: 1; }
.stat { transition: transform .2s, border-color .2s; }
.stat:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.35); }
.startup-strip { border-radius: 14px; background: linear-gradient(120deg, #ecfdf5, #f0fdf9); }
.faq details { transition: background .2s; border-radius: 10px; padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
.faq details[open] { background: #f6fafd; }
.faq summary::marker { color: var(--blue); }

/* ── Section rhythm ── */
section { padding: 88px 0; }
.section-alt { background: linear-gradient(180deg, #f8fafc 0%, #f2f7fb 100%); }

/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); transition-delay: var(--rd, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero:before { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ── Footer ── */
footer { position: relative; }
footer:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-brand); }

/* ════════════════════════════════════════════════════════════════
   POLISH 2.1 ,  accessibility, interaction states, small motion.
   ════════════════════════════════════════════════════════════════ */

html { color-scheme: light; }

/* Anchor targets land below the sticky nav instead of underneath it */
[id] { scroll-margin-top: 84px; }

/* Visible keyboard focus everywhere, without spraying rings on mouse clicks */
:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .nav-cta:focus-visible { outline-offset: 3px; }

/* Faster taps + honest press feedback */
a, button, summary, input[type=range] { touch-action: manipulation; }
.btn:active, .nav-cta:active, .tour-tab:active { transform: translateY(0) scale(.98); }
.dtt-live .big-btns button { transition: transform .12s, filter .12s; }
.dtt-live .big-btns button:active { transform: scale(.97); filter: brightness(.94); }
.dtt-live .big-btns button:disabled { cursor: default; }

/* Current-page link gets a marker, not just a color change */
.nav-links > li > a.active { position: relative; }
.nav-links > li > a.active:after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2.5px; border-radius: 2px; background: var(--grad-brand); }

/* Mobile menu: slide in instead of popping, plus a real shadow */
@media (max-width: 640px) {
  .nav-links { box-shadow: 0 18px 40px rgba(15,23,42,.14); }
  /* Re-flatten the dropdown submenu (the desktop card styles above win the cascade otherwise) */
  .dropdown-menu { box-shadow: none; border-radius: 0; }
  .nav-links.open { animation: navdrop .22s ease-out; }
  @keyframes navdrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .nav-links > li > a.active:after { display: none; }
}

/* FAQ answers ease in when opened */
.faq details[open] p { animation: faqin .25s ease-out; }
@keyframes faqin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Tables: keep the layout honest on small screens */
@media (max-width: 640px) {
  table.compare { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Form fields: clear focus state to match the buttons */
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.calc-panel select:focus, .calc-panel input[type=number]:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,108,181,.18);
}

@media (prefers-reduced-motion: reduce) {
  .nav-links.open, .faq details[open] p { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   POLISH 3.0 ,  contrast, grid rhythm, real product imagery,
   page-header system. Appended, so nothing above needs editing.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* Emerald at #10b981 only reaches 2.5:1 on white, which fails WCAG AA for
     text and icons. Fills keep the bright value; anything that is *read*
     uses the ink value below (5.6:1 on white). */
  --emerald-ink:#047857;
  --emerald-fill:#0f9d76;
  --amber-ink:#b45309;
  --red-ink:#c2413f;

  --space-1:8px;  --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:48px; --space-6:64px; --space-7:88px;

  --shot-shadow:0 28px 70px rgba(15,23,42,.16), 0 3px 10px rgba(15,23,42,.06);
}

/* ── 1. Contrast fixes ───────────────────────────────────────── */
.plan ul li:before,
.checkline li:before,
table.compare td.yes,
.card ul.checkline li:before { color:var(--emerald-ink); }

table.compare td.no { color:#8fa0b3; }             /* was #cbd5e1 → 1.5:1 */
table.compare tr.hl td.yes { color:var(--emerald-ink); }

.btn-emerald { background:var(--emerald-fill); }   /* white text now clears 4.5:1 */
.btn-emerald:hover { background:#0b8a67; }

/* Kickers sitting on the dark hero need the light blue, not the gradient */
.hero .kicker, .hero-sm .kicker { background:none; -webkit-text-fill-color:initial; color:#8fc2f0; }

/* ── 2. Page headers (replaces the repeated inline padding/size) ─ */
.hero-sm { padding:64px 0 56px; }
.hero-sm h1 { font-size:clamp(30px,4vw,44px); }
.hero-sm p.lead { margin-bottom:0; }
.hero-sm .hero-badges { margin-bottom:22px; }
.hero-sm a { color:#8fc2f0; }

/* A badge row sitting directly under a CTA button has no gap of its own,
   so the pills collide with the button's bottom edge (startups, founding). */
.btn + .hero-badges { margin-top:30px; }
/* Same collision, different neighbour: on index.html the badge row follows the hero
   screenshot rather than a button, so the rule above never fired and the pills sat
   flush against the caption. Measured 0px at 1440px on 2026-08-26. */
.hero-shot + .hero-badges { margin-top:30px; }

/* ── 3. Grid rhythm: no orphan rows ──────────────────────────── */
/* A trailing single card stretches; a trailing pair centres itself. */
.grid-3 > .card:last-child:nth-child(3n-2),
.grid-3 > .post-card:last-child:nth-child(3n-2) { grid-column:1 / -1; }
.grid-3 > .card:last-child:nth-child(3n-2) > p,
.grid-3 > .post-card:last-child:nth-child(3n-2) > p { max-width:70ch; }

/* These two place cards into explicit columns 1-3 and 3-4, so they are only
   valid while the grid actually HAS three columns. Below 900px .grid-3 becomes
   1fr 1fr, and an ungated 'grid-column:3 / 4' pushed the last card into an
   implicit, content-sized third track that crushed the other two down to about
   130px. Verified broken on founding.html and beta.html at 771px, 2026-08-26. */
@media (min-width:901px){
  .grid-3 > :nth-last-child(2):nth-child(3n-2) { grid-column:1 / 3; }
  .grid-3 > :last-child:nth-child(3n) { grid-column:3 / 4; }
}

/* A card can be told to span two columns when its content earns the width */
.card--wide { grid-column:span 2; }
@media (max-width:900px){ .card--wide { grid-column:span 2; } }
@media (max-width:640px){ .card--wide, .grid-3 > * { grid-column:auto !important; } }

/* Equal-height cards read as a system rather than a ragged pile */
.grid-3, .grid-2 { align-items:stretch; }
.grid-3 > .card, .grid-2 > .card { display:flex; flex-direction:column; }
.grid-3 > .card > p:last-child, .grid-2 > .card > p:last-child { margin-bottom:0; }

/* ── 4. Pricing: two plans should not sit in a four-column grid ── */
.pricing-grid.plans-2 {
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  max-width:880px; margin-left:auto; margin-right:auto; gap:24px;
}
@media (max-width:760px){ .pricing-grid.plans-2 { grid-template-columns:1fr; max-width:520px; } }

/* .pricing-grid is repeat(4,1fr) from the old four tier table. A grid keeps its
   declared column count however few children it has, so the single beta plan
   card sat in column one of four and rendered about 120px wide inside a 520px
   container. The modifier is per plan count, matching .plans-2 above. */
.pricing-grid.plans-1 {
  grid-template-columns:minmax(0,1fr);
  max-width:520px; margin-left:auto; margin-right:auto;
}

/* ── 5. Real product imagery ─────────────────────────────────── */
.shot-frame { box-shadow:var(--shot-shadow); border-radius:14px; }
.shot-body { min-height:0; padding:0; background:#fff; }
.shot-body img { width:100%; height:auto; display:block; }

.mockup { padding:0; background:#fff; }
.mockup img { width:100%; height:auto; display:block; }
.mockup-caption { margin-top:12px; }

/* Screenshots that are illustrative rather than photographic get a quiet mark */
.shot-note {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; color:var(--text-3); margin-top:10px;
}
.shot-note:before { content:""; width:5px; height:5px; border-radius:50%; background:#c3cedb; }

/* Hero shot: let the artwork read instead of floating in a glow */
.hero-shot { margin-top:48px; max-width:1040px; }
.hero-shot:before { inset:12% -4% -8% -4%; filter:blur(38px); opacity:.75; }
.hero-shot .shot-frame { border:1px solid rgba(255,255,255,.14); }

/* Full-bleed device shot used on the clinical page */
.shot-plain { border-radius:0; box-shadow:none; background:transparent; border:none; }
.shot-plain img { border-radius:0 }
/* A phone screenshot is a raw 1080x2340 capture from the app, so the page draws
   the handset around it rather than the image carrying a drawn bezel. */
.shot-phone img { max-width:300px; margin:0 auto; border:9px solid var(--navy); border-radius:34px; box-shadow:var(--shadow-lg); }

/* ── 6. Section rhythm ───────────────────────────────────────── */
section { padding:var(--space-7) 0; }
section + section:not(.section-alt):not(.section-dark) { padding-top:var(--space-6); }
.section-title + .section-sub { margin-top:0; }
.section-sub { line-height:1.65; }

/* A dark section every few screens keeps a long page from flattening out */
.section-dark {
  background:linear-gradient(165deg,var(--navy) 0%,#0d1e36 60%,#123055 100%);
  color:var(--text-inv); position:relative; overflow:hidden;
}
.section-dark:before {
  content:""; position:absolute; inset:-30% -10%;
  background:radial-gradient(38% 46% at 22% 24%,rgba(55,138,221,.26),transparent 62%),
             radial-gradient(34% 42% at 82% 76%,rgba(16,185,129,.16),transparent 60%);
  pointer-events:none;
}
.section-dark > .container { position:relative; z-index:1; }
.section-dark .kicker { background:none; -webkit-text-fill-color:initial; color:#8fc2f0; }
.section-dark .section-sub, .section-dark p { color:#a8bdd4; }
.section-dark .card {
  background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.13); color:var(--text-inv);
}
.section-dark .card h3 { color:#fff; }
.section-dark .card p, .section-dark .card ul { color:#a8bdd4; }
.section-dark .card .icon { background:rgba(255,255,255,.09); color:#8fc2f0; box-shadow:none; }
.section-dark .card:hover { background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.24); }
.section-dark .mockup-caption, .section-dark .shot-note { color:#8fa8c4; }
.section-dark a { color:#8fc2f0; }

/* ── 7. Split layouts ────────────────────────────────────────── */
.split { gap:56px; margin-top:var(--space-5); }
.split .content h3 { letter-spacing:-.015em; }
.split.reverse .content { order:2; }
@media (max-width:900px){ .split.reverse .content { order:0; } }

/* ── 8. Tables ───────────────────────────────────────────────── */
table.compare { box-shadow:0 2px 14px rgba(15,23,42,.05); border:1px solid var(--border); }
table.compare td, table.compare th { padding:14px 16px; }
table.compare td:first-child { font-weight:500; color:var(--text); }
table.compare tbody tr:last-child td { border-bottom:none; }
table.compare td.n, table.compare td.num { font-variant-numeric:tabular-nums; }

/* ── 9. Cards ────────────────────────────────────────────────── */
.card h3 { letter-spacing:-.012em; line-height:1.35; }
.card p { line-height:1.62; }
.card ul li { line-height:1.5; }
a.card, a.post-card { text-decoration:none; }
a.card h3:after { content:" →"; opacity:0; transition:opacity .2s; color:var(--blue); font-weight:600; }
a.card:hover h3:after { opacity:1; }

/* ── 10. Buttons and links ───────────────────────────────────── */
.btn { line-height:1.35; }
.btn-ghost { border-color:rgba(255,255,255,.42); }
.btn + .btn { margin-left:12px; }
@media (max-width:640px){
  .btn, .btn + .btn { display:block; width:100%; text-align:center; margin-left:0; margin-top:10px; }
}

/* ── 11. Stat band ───────────────────────────────────────────── */
.band { padding:52px; }
.stat .num { letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stat .lbl { line-height:1.45; margin-top:3px; }
@media (max-width:640px){ .band .stat-grid { grid-template-columns:1fr; } }

/* ── 12. Footer ──────────────────────────────────────────────── */
footer { padding-top:64px; }
footer a { transition:color .15s; }
.footer-bottom { color:#8497ad; }

/* ── 13. Typography detail ───────────────────────────────────── */
.article p, .section-sub, .card p { text-wrap:pretty; }
h1, h2, h3, .hero h1, h2.section-title { text-wrap:balance; }
.fineprint { line-height:1.6; max-width:78ch; }

/* ── 14. Skip link (keyboard users land in content, not the nav) ─ */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--blue-deep); color:#fff; padding:12px 20px;
  border-radius:0 0 10px 0; font-weight:600; font-size:15px;
}
.skip-link:focus { left:0; }

/* ── 15. Motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .card:hover, .post-card:hover, .plan:hover, .stat:hover { transform:none; }
}

/* ── 16. Real product captures ───────────────────────────────────
   Dark-theme screenshots straight out of the running product. They
   carry a provenance line so nobody has to wonder whether the
   picture is a rendering. */
.shot-real { border-radius:14px; overflow:hidden; background:#0a0a0c; box-shadow:var(--shot-shadow); }
.shot-real img { width:100%; height:auto; display:block; }
.hero .shot-real { box-shadow:0 30px 90px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.1); }

.shot-real-cap {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:var(--text-3); margin-top:12px;
}
.hero .shot-real-cap { color:#8fa8c4; justify-content:center; }
.shot-real-cap .tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--emerald-ink); background:#e8f8f2; border-radius:20px; padding:3px 10px;
}
.hero .shot-real-cap .tag { color:#6ee7b7; background:rgba(16,185,129,.14); }
.shot-real-cap .tag:before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }

.shot-illus .tag { color:var(--text-3); background:#eef2f7; }
.section-dark .shot-real-cap { color:#8fa8c4; }
.section-dark .shot-illus .tag { color:#8fa8c4; background:rgba(255,255,255,.09); }

.gallery-2 { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:44px; align-items:start; }
@media (max-width:900px){ .gallery-2 { grid-template-columns:1fr; gap:32px; } }

/* Dark captures need a hairline and a lift so they read as objects on a
   light page rather than holes punched in it. */
.shot-real { border:1px solid rgba(15,23,42,.10); }
.section-alt .shot-real, section:not(.hero):not(.section-dark) .shot-real {
  box-shadow:0 20px 50px rgba(15,23,42,.20), 0 2px 6px rgba(15,23,42,.08);
}
.gallery-2 .shot-real img { aspect-ratio:2035/1601; object-fit:cover; object-position:top left; }

/* ── 17. Final contrast pass ─────────────────────────────────────
   Values below were picked against WCAG AA (4.5:1) rather than by
   eye. The old emerald button was 3.4:1 with white text. */
.btn-emerald { background:#08805e; }              /* white on this = 4.9:1 */
.btn-emerald:hover { background:#046b4f; }
table.compare td.no { color:#64748b; }            /* 4.8:1, was 1.5:1 */
.shot-illus .tag { color:#556377; }               /* 5.4:1 on #eef2f7 */

/* The "not included" mark should not rely on colour alone */
table.compare td.no { font-weight:600; }


/* ── Click a screenshot to see it full size ──────────────────────────────────
   The anchor is the real link, so middle-click and "open in new tab" work and
   the images are still reachable with JS off. site.js upgrades a plain left
   click into an in-page lightbox. The captures are 2800px wide, so there is
   real detail to see: on the page they render around 500px. */
.shot-zoom { display:block; cursor:zoom-in; position:relative; }
.shot-zoom:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.shot-zoom:after {
  content:"Click to enlarge";
  position:absolute; right:10px; bottom:10px;
  background:rgba(10,22,40,.82); color:#fff; font-size:11.5px; font-weight:600;
  padding:4px 9px; border-radius:20px; opacity:0; transition:opacity .15s;
  pointer-events:none;
}
.shot-zoom:hover:after, .shot-zoom:focus-visible:after { opacity:1; }

.lb { position:fixed; inset:0; z-index:200; background:rgba(8,18,32,.92);
      display:flex; align-items:center; justify-content:center; padding:28px 28px 46px;
      opacity:0; pointer-events:none; transition:opacity .16s; }
.lb.open { opacity:1; pointer-events:auto; }
.lb img { max-width:100%; max-height:100%; border-radius:8px;
          box-shadow:0 30px 90px rgba(0,0,0,.55); background:#fff; }
.lb-close { position:absolute; top:18px; right:22px; width:38px; height:38px;
            border-radius:50%; border:none; cursor:pointer; font-size:20px;
            background:rgba(255,255,255,.14); color:#fff; line-height:1; }
.lb-close:hover { background:rgba(255,255,255,.26); }
.lb-hint { position:absolute; bottom:18px; left:0; right:0; text-align:center;
           color:#9fb3c8; font-size:12.5px; }
@media (max-width:640px){ .lb { padding:12px; } .lb-hint { display:none; } }

/* Footer status line, filled in by site.js from status.abavault.com. The dot
   stays hidden until a real state has been read, so a failed fetch shows a
   plain link rather than a guessed colour. The words change with the state
   too, so colour is never the only signal. Colours match the status page. */
.status-link { display: inline-flex; align-items: center; gap: 8px; }
.status-dot { display: none; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status-dot[data-level] { display: inline-block; }
.status-dot[data-level="none"] { background: #35C98D; box-shadow: 0 0 0 3px rgba(53,201,141,.2); }
.status-dot[data-level="maintenance"] { background: #5b9bf5; }
.status-dot[data-level="minor"] { background: #f0b429; }
.status-dot[data-level="major"] { background: #f08b3c; }
.status-dot[data-level="critical"] { background: #ef5f5f; }