/* Bid Reasoner — shared stylesheet for SEO money pages + /demo.
   Mirrors the homepage design tokens so new pages are on-brand without
   duplicating the homepage's full inline <style> block. */

:root {
  --ink: #0B0F1A;
  --ink-2: #1F2937;
  --muted: #64748B;
  --muted-2: #94A3B8;
  --line: #E5E7EB;
  --line-2: #F1F5F9;
  --bg: #FFFFFF;
  --bg-soft: #FAFAFA;
  --bg-tint: #F8FAFC;
  --accent: #F59E0B;
  --accent-dark: #D97706;
  /* text-only amber: #D97706 is 3.19:1 on white (fails AA at body size).
     --accent-text 5.02:1 on white, --accent-chip 6.37:1 on --accent-soft (measured).
     Fills, .btn-accent, .logo-mark and large display amber keep --accent/-dark. */
  --accent-text: #B45309;
  --accent-chip: #92400E;
  --accent-soft: #FEF3C7;
  --ok: #10B981;
  --ok-text: #047857;   /* --ok #10B981 is 2.54:1 on white; this is 5.48:1, measured */
  --ok-soft: #ECFDF5;
  --risk: #DC2626;
  --risk-soft: #FEF2F2;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.12), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
html, body { overflow-x: hidden; }
html { scroll-padding-top: 76px; }   /* D3: clear the 61-65px sticky nav */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0; font-size: 14px; font-weight: 600;
}
.skip-link:focus { left: 0; }
main:focus { outline: none; }   /* focusable only as a skip-link target */

.container { max-width: 1120px; margin: 0 auto; padding: 0 56px; }
@media (max-width: 900px) { .container { padding: 0 40px; } }
@media (max-width: 600px) { .container { padding: 0 28px; } }
@media (max-width: 380px) { .container { padding: 0 20px; } }

/* ===== Nav ===== */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; padding: 8px 0; }
.logo-mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--ink); color: var(--accent);
  display: grid; place-items: center; font-weight: 800; font-size: 14px; letter-spacing: -0.02em;
}
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a.link { color: var(--muted); font-size: 14px; font-weight: 500; padding: 9px 0; transition: color 0.15s; }
.nav-links a.link:hover { color: var(--ink); }
@media (max-width: 820px) { .nav-links a.link { display: none; } .nav-links { gap: 10px; } }
@media (max-width: 540px) { .nav-links .btn-ghost { display: none; } .logo { white-space: nowrap; } }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; min-height: 44px; border-radius: var(--radius);
  font-weight: 600; font-size: 14px; letter-spacing: -0.005em; cursor: pointer;
  border: 1px solid transparent; transition: all 0.15s ease; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-accent:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-lg { padding: 13px 24px; min-height: 50px; font-size: 15px; }

/* ===== Breadcrumb ===== */
.breadcrumb { padding: 18px 0 0; font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--muted); display: inline-block; padding: 12px 0; }   /* 44px, matching .btn's own floor */
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span.sep { margin: 0 8px; color: var(--muted); }

/* ===== Page hero (money pages) ===== */
header.page-hero {
  padding: 56px 0 64px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(245, 158, 11, 0.08), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-tint) 100%);
  border-bottom: 1px solid var(--line-2);
}
.page-hero .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-chip); background: var(--accent-soft);
  padding: 6px 12px; border-radius: 100px; margin-bottom: 22px;
}
.page-hero h1 {
  font-size: clamp(32px, 5vw, 50px); line-height: 1.08; font-weight: 800;
  letter-spacing: -0.03em; max-width: 880px; margin-bottom: 20px;
}
.page-hero h1 .accent { color: var(--accent-dark); }
.page-hero .lede { font-size: 19px; color: var(--muted); max-width: 680px; margin-bottom: 28px; line-height: 1.55; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-note { font-size: 13px; color: var(--muted); margin-top: 14px; display: flex; align-items: center; gap: 7px; }

/* ===== Sections ===== */
section { padding: 80px 0; border-bottom: 1px solid var(--line-2); }
section:last-of-type { border-bottom: none; }
@media (max-width: 820px) { section { padding: 60px 0; } header.page-hero { padding: 40px 0 48px; } }
@media (max-width: 520px) { section { padding: 52px 0; } }
section.soft { background: var(--bg-soft); }
.section-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; }
h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; max-width: 760px; margin-bottom: 16px; }
.section-sub { font-size: 17px; color: var(--muted); max-width: 660px; margin-bottom: 40px; line-height: 1.55; }
h3 { letter-spacing: -0.015em; }

/* ===== Prose blocks ===== */
.prose { max-width: 720px; }
.prose p { font-size: 16px; color: var(--ink-2); line-height: 1.65; margin-bottom: 16px; }
.prose p.muted { color: var(--muted); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose code { background: var(--bg-soft); padding: 1px 6px; border-radius: 4px; font-family: 'SF Mono', Menlo, monospace; font-size: 13px; color: var(--ink-2); }

/* ===== Feature / step grids ===== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }
.card { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.card.tint { background: var(--bg-soft); }
.card .icon-box {
  width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft);
  color: var(--accent-chip); display: grid; place-items: center; margin-bottom: 16px;
}
.card h3 { font-size: 17px; font-weight: 600; margin-bottom: 7px; }
.card p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.card .stat-number { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 10px; }
.card .stat-number .unit { color: var(--muted); font-size: 18px; font-weight: 600; margin-left: 3px; }

/* numbered steps */
.step-num {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  background: var(--ink); color: var(--accent); font-weight: 700; font-size: 14px; margin-bottom: 16px;
}

/* ===== Comparison table ===== */
.compare-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; font-size: 14.5px; }
.compare-table th, .compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-2); }
.compare-table thead th { background: var(--bg-soft); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.compare-table thead th.us { color: var(--accent-text); }
.compare-table td.us { font-weight: 600; color: var(--ink); background: rgba(245,158,11,0.04); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-wrap { overflow-x: auto; }

/* ===== FAQ accordion ===== */
.faq { max-width: 800px; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 0; font-size: 16.5px; font-weight: 600;
  color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-dark); font-weight: 700; font-size: 22px; line-height: 1; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { font-size: 15px; color: var(--muted); line-height: 1.65; padding: 0 0 20px; max-width: 720px; }

/* ===== CTA band (dark) ===== */
.cta-band { background: var(--ink); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; margin: 0 auto 14px; }
.cta-band p { color: rgba(255,255,255,0.7); max-width: 560px; margin: 0 auto 28px; font-size: 17px; }
.cta-band .cta-row { justify-content: center; }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.25); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,0.08); }
.cta-band .fine { color: rgba(255,255,255,0.5); font-size: 13px; margin-top: 18px; }
.cta-band .fine a { color: rgba(255,255,255,0.8); text-decoration: underline; }

/* ===== Inline lead-magnet strip ===== */
.magnet-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.magnet {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: 44px; font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); background: #fff; transition: all 0.15s;
}
.magnet:hover { border-color: var(--accent); color: var(--ink); }
.magnet svg { color: var(--accent-dark); }

/* ===== Demo form ===== */
.demo-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
@media (max-width: 880px) { .demo-grid { grid-template-columns: 1fr; gap: 32px; } }
.demo-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); }
.demo-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.demo-form .field { margin-bottom: 18px; }
.demo-form input, .demo-form select {
  width: 100%; padding: 11px 13px; font-size: 16px; font-family: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; min-height: 44px;
}
.demo-form input:focus, .demo-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.demo-form .btn { width: 100%; }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; display: flex; align-items: center; gap: 7px; justify-content: center; }
.success-msg { display: none; padding: 16px 18px; border-radius: var(--radius); background: var(--ok-soft); color: var(--ok-text); border: 1px solid rgba(16,185,129,0.3); font-size: 14px; }
.success-msg.show { display: block; }
.demo-points { list-style: none; }
.demo-points li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; color: var(--ink-2); }
.demo-points li:last-child { border-bottom: none; }
.demo-points li svg { flex-shrink: 0; color: var(--ok-text); margin-top: 2px; }

/* ===== Footer (hub) ===== */
footer { background: #fff; padding: 56px 0 40px; border-top: 1px solid var(--line-2); }
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; margin-bottom: 36px; }
@media (max-width: 900px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 12px; }
.footer-brand .logo-mark { width: 24px; height: 24px; font-size: 12px; }
.footer-blurb { font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 280px; }
.footer-col h3, .footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 14px; font-weight: 700; }
.footer-col a { display: block; font-size: 14px; color: var(--muted); padding: 9px 0; margin-bottom: 0; transition: color 0.15s; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }

/* ===== Misc ===== */
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pill { font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px; }
.callout { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 14.5px; color: var(--ink-2); margin: 8px 0; }
.callout strong { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
  .card:hover { transform: translateY(-2px); border-color: rgba(245,158,11,0.4); box-shadow: 0 10px 24px -16px rgba(15,23,42,0.18); }
}

/* ===== Article (blog / glossary) ===== */
.article-wrap { max-width: 740px; margin: 0 auto; }
.article-hero { padding: 48px 0 28px; }
.article-cat { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; }
.article-hero h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 16px; }
.article-meta { font-size: 13.5px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.article-meta .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line); display: inline-block; }
.article-lede { font-size: 19px; color: var(--muted); line-height: 1.55; margin: 18px 0 0; }
.article-body { font-size: 17px; line-height: 1.7; color: var(--ink-2); padding: 8px 0 16px; }
.article-body > p { margin: 0 0 20px; }
.article-body h2 { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 38px 0 14px; }
.article-body h3 { font-size: 19px; font-weight: 600; color: var(--ink); margin: 28px 0 10px; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 22px; }
.article-body li { margin: 0 0 9px; }
.article-body a { color: var(--accent-text); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--ink); }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body code { background: var(--bg-soft); padding: 1px 6px; border-radius: 4px; font-family: 'SF Mono', Menlo, monospace; font-size: 14px; color: var(--ink-2); }
.article-body blockquote { margin: 24px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); color: var(--ink); font-size: 19px; font-weight: 500; line-height: 1.5; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0 24px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.article-body th, .article-body td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line-2); }
.article-body thead th { background: var(--bg-soft); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cta-inline { background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 22px 24px; margin: 30px 0; }
.cta-inline p { font-size: 16px; color: var(--ink-2); margin: 0 0 14px; }
.cta-inline strong { color: var(--ink); }
.article-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.related { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--line); }
.related h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 14px; }
.related a { display: block; font-size: 15px; color: var(--accent-text); font-weight: 500; margin-bottom: 9px; }
.related a:hover { color: var(--ink); }

/* ===== Blog / glossary index ===== */
.index-hero { padding: 52px 0 8px; }
.index-hero h1 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 14px; }
.index-hero p { font-size: 18px; color: var(--muted); max-width: 640px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 760px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { display: block; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.blog-card:hover { transform: translateY(-2px); border-color: rgba(245,158,11,0.4); box-shadow: 0 10px 24px -16px rgba(15,23,42,0.18); }
.blog-card .cat { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.blog-card h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin: 10px 0 8px; max-width: none; }
.blog-card p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.glossary-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 680px) { .glossary-list { grid-template-columns: 1fr; } }
.glossary-list a { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color 0.15s; }
.glossary-list a:hover { border-color: var(--accent); }
.glossary-list a strong { display: block; font-size: 15px; color: var(--ink); font-weight: 600; margin-bottom: 3px; }
.glossary-list a span { font-size: 13px; color: var(--muted); }

/* ===== Nav v2: Resources dropdown + mobile menu (redesign 2026-07) ===== */
.nav-dd, .nav-menu { position: relative; }
.nav-dd summary, .nav-menu summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.nav-dd summary::-webkit-details-marker, .nav-menu summary::-webkit-details-marker { display: none; }
.nav-dd summary {
  color: var(--muted); font-size: 14px; font-weight: 500; transition: color 0.15s;
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 0;
}
.nav-dd summary:hover { color: var(--ink); }
.nav-dd summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s;
}
.nav-dd[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-dd-menu {
  position: absolute; top: calc(100% + 8px); right: -12px; min-width: 264px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 8px; z-index: 60;
}
.nav-dd-menu a { display: block; padding: 10px 12px; border-radius: 8px; }
.nav-dd-menu a:hover { background: var(--bg-soft); }
.nav-dd-title { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.nav-dd-desc { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.nav-menu { display: none; }
.nav-menu summary {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius); border: 1px solid var(--line); background: #fff;
}
.nav-burger { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; }
.nav-burger::before, .nav-burger::after {
  content: ""; display: block; width: 16px; height: 2px; background: var(--ink);
  border-radius: 2px; position: absolute; left: 0;
}
.nav-burger::before { top: -5px; }
.nav-burger::after { top: 5px; }
.nav-menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(272px, calc(100vw - 32px));
  max-height: calc(100vh - 80px); overflow-y: auto;   /* D12: landscape phones */
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 8px; z-index: 60;
}
.nav-menu-panel a {
  display: flex; align-items: center; min-height: 44px; padding: 10px 14px;
  font-size: 15px; font-weight: 500; color: var(--ink-2); border-radius: 8px;
}
.nav-menu-panel a:hover { background: var(--bg-soft); }
.nav-menu-panel a.nav-menu-signin { border-top: 1px solid var(--line-2); border-radius: 0 0 8px 8px; margin-top: 6px; padding-top: 14px; color: var(--muted); }
@media (max-width: 880px) {
  .nav-links { gap: 12px; }
  .nav-links a.link, .nav-dd { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 380px) {
  .nav-links { gap: 8px; }
  .nav-links .btn { padding: 10px 12px; font-size: 13px; }
}
@media (max-width: 340px) {
  .logo { font-size: 0; gap: 0; }
  .logo .logo-mark { font-size: 14px; }
}
/* Article tables: scroll inside their own box on narrow screens */
@media (max-width: 700px) {
  .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* v6 (2026-10-25): the breadcrumb is also a <nav>, so the header rule `nav { position: sticky; top: 0; z-index: 50 }`
   applied to it too. Painted after the header at the same z-index, it covered the open Resources menu (Blog) and
   the phone menu (Product). Keep it in the normal flow, below the header. Nothing else about its look changes. */
nav.breadcrumb { position: relative; z-index: 0; }

/* v6: /demo "What happens next" (under the form) */
.demo-next { margin-top: 20px; padding: 18px 20px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.demo-next h2 { font-size: 16px; line-height: 1.3; letter-spacing: 0; margin: 0 0 8px; max-width: none; }
.demo-next ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.demo-next li { margin: 6px 0 0; }

/* v6: phone header sizing, matching the homepage and /product, so "Request a demo" fits beside the logo
   (at 360-390px the longer label touched "Bid Reasoner"). */
@media (max-width: 600px) {
  .nav-links { gap: 8px; }
  .nav-links .btn { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 380px) {
  nav .logo { font-size: 15px; }
  nav .logo-mark { width: 26px; height: 26px; font-size: 12px; }
  .nav-links .btn { padding: 7px 10px; font-size: 12px; }
}
@media (max-width: 340px) {
  nav .logo { font-size: 0; }
  nav .logo .logo-mark { font-size: 12px; }
}

/* v6: input limits next to the demo CTAs (closing band, in-article box) and on /demo */
.cta-band .cta-limits { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.7); max-width: 600px; margin: 22px auto 0; }
.cta-band .cta-limits a { color: #fff; text-decoration: underline; }
.cta-inline .cta-limits { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 14px 0 0; }
.cta-inline .cta-limits a { color: var(--accent-text); text-decoration: underline; }
.demo-needs { margin-top: 28px; padding: 20px 22px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.demo-needs h2 { font-size: 18px; line-height: 1.3; letter-spacing: 0; margin: 0 0 10px; max-width: none; }
.demo-needs ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.demo-needs li { margin: 8px 0 0; }
.demo-needs p { margin: 12px 0 0; font-size: 14px; }
.demo-needs p a { color: var(--accent-text); font-weight: 600; text-decoration: underline; }

/* v6: a button inside article text kept the article link style (amber, underlined): "Request a demo" was
   #B45309 on the #F59E0B button, 2.3:1, on the glossary pages whose CTA box sits inside .article-body. */
.article-body a.btn { font-weight: 600; text-decoration: none; }
.article-body a.btn-accent, .article-body a.btn-ghost { color: var(--ink); }
.article-body a.btn-accent:hover { color: #fff; }
.article-body a.btn-ghost:hover { color: var(--ink); }

/* v7 (2026-11): the menu button reads "Request a private demo", shortened to "Private demo" below 1100px.
   Everything above is site.v6.css, unchanged. */
.nl-s { display: none; }
@media (max-width: 1099px) { .nl-l { display: none; } .nl-s { display: inline; } }

/* v7, second part (2026-11): small fixes from the accessibility pass.
   - the amber button keeps its dark label while hovered (white on the darker amber was about 3.2:1);
   - links inside call-to-action paragraphs are underlined, so they can be told from the text around them;
   - the request form's placeholder text is dark enough in every browser;
   - smooth scrolling is off for visitors who ask for reduced motion. */
.btn-accent:hover, .article-body a.btn-accent:hover { color: var(--ink); }
.cta-band p a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cta-inline > p a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.demo-form input::placeholder { color: #64748B; opacity: 1; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* v7, third part (2026-11-11): the header, and links in running text.
   - the header is styled to stay at the top, but `overflow-x: hidden` on html and body turned the body into the
     scrolling box, so the header scrolled away with the page. `clip` hides sideways overflow without doing that
     (the homepage has had the same rule);
   - the header is opaque, so its links keep their contrast when a dark section scrolls under it (as on the homepage);
   - links inside running text are underlined, so they can be told from the text around them without relying on colour. */
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body > nav { background: #fff; }
main p a:not([class]):not([style]), main .callout a:not([class]):not([style]) { text-decoration: underline; text-underline-offset: 2px; }

/* v8 (2026-11-12): keyboard follow-up after the residential release. Everything above is site.v7.css, unchanged.
   - focusable items stop 80px below the top when the browser scrolls them into view, so the header that stays at the top
     does not cover them (Firefox, moving backwards with Shift+Tab);
   - the wide tables scroll inside a labelled box the keyboard can reach (tabindex="0", role="region" in the pages); on narrow
     screens the article tables scroll inside that box and keep their table layout;
   - the box shows the site's focus ring. */
a[href], button, summary, input, select, textarea, [tabindex] { scroll-margin-top: 80px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) { .article-body .table-scroll > table { display: table; } }
.compare-wrap:focus-visible, .table-scroll:focus-visible { outline: 3px solid #B45309; outline-offset: 2px; }