/* ============================================================
   Trust Systems — Shared CSS (public site)
   Owner: Builder 1. Other builders APPEND ONLY under the marked
   sections at the bottom — do not rewrite core tokens/components.
   ============================================================ */

/* BRAND LOCK tokens (Builder A1, 2026-10-07) — approved identity colors + logo sizing.
   APPEND-ONLY region: do not restyle other builders' components here. */
:root {
  --brand-deep:#0A3D91;
  --brand-cyan:#06B6D4;
  --brand-graphite:#1F2937;
  --brand-gray:#E5E7EB;
}

/* BRAND LOCK logo presentation (Builder A1).
   The approved lockups are dark-wordmark compositions; on the site's dark
   navy header/footer they are presented on white panels (the approved
   white-background composition) — never stretched, recolored, or re-drawn. */
.brand-logo { display:block; height:auto; max-width:100%; }
.brand-logo-panel {
  display:inline-flex; align-items:center;
  background:#fff; border-radius:10px; padding:6px 14px;
  line-height:0;
}
.brand-logo-header { height:38px; width:auto; }
@media (max-width:640px) { .brand-logo-header { height:30px; } }
.brand-logo-footer { width:200px; height:auto; }
.brand-tagline {
  margin:14px 0 0; font-size:14px; letter-spacing:0.02em;
  color:rgba(255,255,255,.92); font-weight:600;
}

:root {
  --navy: #0A1F44;
  --navy-2: #10295A;
  --blue: #0074FF;
  --blue-dark: #005CE0;
  --cyan: #38BDF8;
  --ink: #0F1E33;
  --gray: #5B6B82;
  --line: #E3E9F2;
  --red: #DC2626;
  --bg: #FFFFFF;
  --bg-soft: #F4F7FB;
  --radius: 14px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max-w: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

h1, h2, h3 { color: var(--navy); line-height: 1.25; margin: 0 0 0.6em; }
h1 { font-size: 44px; line-height: 1.15; }
h2 { font-size: 32px; }
h3 { font-size: 20px; }

p { margin: 0 0 1em; }
a { color: var(--blue); }
ul { padding-left: 1.25em; }

/* ---------- Accessibility baseline ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: 12px 20px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--navy); color: #fff; }
.center { text-align: center; }
.narrow { max-width: 720px; margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn, .btn-ghost, .btn-light {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 48px; padding: 12px 28px;
  font-size: 16px; font-weight: 700; line-height: 1.4;
  text-decoration: none; border-radius: 10px; border: 2px solid transparent;
  cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn:hover, .btn:focus-visible { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-ghost { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(0, 116, 255, 0.08); }
.btn-light { background: #fff; color: var(--navy); border-color: #fff; }
.btn-light:hover, .btn-light:focus-visible { background: #EAF2FF; }
.btn-ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost-dark:hover, .btn-ghost-dark:focus-visible { border-color: #fff; background: rgba(255,255,255,.08); }

.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.cta-row.center { justify-content: center; }

/* ---------- Eyebrow / badges ---------- */
.eyebrow {
  display: block; font-size: 13px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 16px;
}
.on-dark .eyebrow { color: var(--cyan); }

.icon-badge {
  width: 48px; height: 48px; border-radius: 12px; flex: 0 0 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E7F1FF; color: var(--blue);
}
.icon-badge svg { width: 26px; height: 26px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 72px; gap: 16px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; font-weight: 800;
  letter-spacing: 0.12em; font-size: 17px; white-space: nowrap;
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 15px; letter-spacing: 0;
}
.site-nav ul {
  display: flex; gap: 4px; list-style: none; margin: 0; padding: 0;
}
.site-nav a {
  color: rgba(255,255,255,.82); text-decoration: none;
  padding: 12px 14px; border-radius: 8px; font-size: 15px; font-weight: 600;
  min-height: 44px; display: inline-flex; align-items: center;
}
.site-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.signin-link {
  color: #fff; text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 12px 10px; min-height: 44px; display: inline-flex; align-items: center;
  white-space: nowrap;
}
.signin-link:hover { text-decoration: underline; }
.header-actions .btn { min-height: 44px; padding: 10px 22px; }
.nav-toggle {
  display: none; background: none; border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px; width: 48px; height: 48px; cursor: pointer;
  color: #fff; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0,116,255,0.28), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(56,189,248,0.14), transparent 60%),
    linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 55%, #071536 100%);
  color: #fff; padding: 84px 0 72px; overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 .hl { color: var(--cyan); }
.hero .lede { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.hero .support { color: rgba(255,255,255,.82); font-size: 17px; max-width: 560px; }
.value-indicators {
  display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none;
  margin: 28px 0; padding: 0;
}
.value-indicators li {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; color: #fff; font-size: 16px;
}
.value-indicators svg { width: 22px; height: 22px; color: var(--cyan); flex: 0 0 22px; }

.pricing-band {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius); overflow: hidden; margin: 32px 0;
  max-width: 560px;
}
.pricing-band .cell {
  padding: 20px 24px; text-align: center;
  border-left: 1px solid rgba(255,255,255,0.12);
}
.pricing-band .cell:first-child { border-left: 0; }
.pricing-band .amount { display: block; font-size: 26px; font-weight: 800; color: #fff; }
.pricing-band .label { display: block; font-size: 13px; color: rgba(255,255,255,.7); margin-top: 4px; }
.hero-note { color: rgba(255,255,255,.65); font-size: 14px; margin-top: 24px; }

/* Hero visual: abstract CSS/SVG site-mockup composition */
.hero-visual { position: relative; min-width: 0; }
.browser-frame {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12);
}
.browser-bar {
  display: flex; align-items: center; gap: 6px;
  background: #EDF2F9; padding: 12px 16px;
}
.browser-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: #C4D2E6; }
.browser-url {
  flex: 1; margin-left: 10px; background: #fff; border-radius: 6px;
  font-size: 12px; color: var(--gray); padding: 6px 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.browser-body { padding: 22px; display: grid; gap: 14px; }
.mock-nav { display: flex; align-items: center; justify-content: space-between; }
.mock-nav .bar { height: 10px; border-radius: 5px; background: var(--line); }
.mock-nav .bar.wide { width: 120px; background: var(--blue); }
.mock-nav-links { display: flex; gap: 12px; }
.mock-nav-links .bar { width: 44px; }
.mock-hero {
  border-radius: 10px; padding: 26px 22px;
  background: linear-gradient(140deg, var(--navy-2), var(--navy));
  display: grid; gap: 10px;
}
.mock-hero .bar { height: 12px; border-radius: 6px; background: rgba(255,255,255,.85); }
.mock-hero .bar.hl { background: var(--cyan); width: 45%; }
.mock-hero .bar.short { width: 65%; background: rgba(255,255,255,.5); }
.mock-btn-row { display: flex; gap: 10px; margin-top: 4px; }
.mock-btn { height: 30px; width: 110px; border-radius: 8px; background: var(--blue); }
.mock-btn.outline { background: transparent; border: 2px solid rgba(255,255,255,.5); width: 90px; }
.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mock-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 14px;
  display: grid; gap: 8px;
}
.mock-icon { width: 30px; height: 30px; border-radius: 8px; background: #E7F1FF; }
.mock-card .bar { height: 8px; border-radius: 4px; background: var(--line); }
.mock-card .bar.short { width: 60%; }
.phone-frame {
  position: absolute; right: -14px; bottom: -24px; width: 130px;
  background: #fff; border-radius: 22px; padding: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.15);
}
.phone-screen { border-radius: 14px; background: var(--bg-soft); padding: 12px; display: grid; gap: 8px; }
.phone-screen .bar { height: 8px; border-radius: 4px; background: var(--line); }
.phone-screen .bar.cta { background: var(--blue); height: 26px; border-radius: 8px; }
.phone-screen .bar.title { height: 10px; background: var(--navy); width: 80%; }
.float-glow {
  position: absolute; inset: -40px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,116,255,.25), transparent);
  filter: blur(20px);
}

/* ---------- Cards & grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px 28px;
  box-shadow: 0 2px 10px rgba(10,31,68,0.05);
  min-width: 0;
}
.card h3 { margin-top: 18px; margin-bottom: 10px; }
.card p { color: var(--gray); margin: 0; }
.card p + p { margin-top: 8px; }
.card-title-row { display: flex; gap: 16px; align-items: flex-start; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(800px 400px at 50% -20%, rgba(0,116,255,0.3), transparent 65%),
    linear-gradient(160deg, var(--navy-2), var(--navy));
  color: #fff; border-radius: 20px; padding: 64px 48px; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.82); max-width: 640px; margin: 0 auto; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 24px;
  font-weight: 700; color: var(--navy); font-size: 17px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-plus { flex: 0 0 auto; color: var(--blue); font-size: 22px; font-weight: 400; line-height: 1; }
.faq-item[open] summary .faq-plus { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 24px 22px; color: var(--gray); }
.faq-item .faq-answer p { margin: 0; }
.faq-item .faq-answer p + p { margin-top: 10px; }

/* ---------- Examples ---------- */
.example-card { padding: 0; overflow: hidden; }
.example-mock {
  position: relative; height: auto;
  display: block; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg-soft);
}
.example-mock img {
  display: block; width: 100%; height: auto;
  /* V3 layout-shift reservation fallback (2026-10-08): matches the 450x310
     width/height attributes so the slot is reserved even before CSS/HTML
     attribute reservation applies; loading="lazy" is intentionally kept. */
  aspect-ratio: 450 / 310;
}
.example-mock .mock-window {
  width: 82%; height: 130px; background: #fff; border-radius: 10px 10px 0 0;
  box-shadow: 0 -8px 30px rgba(10,31,68,.18);
  display: grid; gap: 8px; padding: 14px; align-content: start;
}
.example-mock .mock-window .bar { height: 9px; border-radius: 5px; background: var(--line); }
.example-mock .mock-window .bar.title { height: 11px; background: var(--navy); width: 75%; }
.example-mock .mock-window .bar.cta { background: var(--blue); width: 90px; height: 24px; border-radius: 7px; margin-top: 4px; }
.concept-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--navy); color: #fff; font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.example-body { padding: 24px 28px 28px; }
.example-body h3 { margin: 0 0 6px; }
.example-body p { color: var(--gray); margin: 0; }

/* ---------- Steps (How It Works) ---------- */
.step-card { text-align: center; }
.step-num {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; margin-bottom: 18px;
}
.step-card h3 { margin-bottom: 8px; }
.step-card p { color: var(--gray); margin: 0; }

/* ---------- Pricing ---------- */
.price-card { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.price-tag { font-size: 48px; font-weight: 800; color: var(--navy); }
.price-tag small { font-size: 18px; font-weight: 700; color: var(--gray); }
.price-card .price-label {
  font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue);
}
.price-card p { color: var(--gray); }
.price-term {
  margin-top: 24px; padding: 20px 24px; text-align: center;
  background: #EAF1FE; border-radius: 12px; color: var(--navy); font-weight: 600;
}

/* ---------- Ownership ---------- */
.own-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.own-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius); padding: 28px; color: rgba(255,255,255,.85);
}
.own-card h3 { color: #fff; margin-top: 0; }
.own-card p { margin: 0; }
.own-card p + p { margin-top: 10px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.78); padding: 64px 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px;
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
}
.footer-brand .brand { margin-bottom: 16px; }
.footer-brand p { font-size: 15px; }
.footer-col h4 {
  color: #fff; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-col a {
  color: rgba(255,255,255,.78); text-decoration: none; font-size: 15px;
  padding: 8px 0; display: inline-block; min-height: 44px;
}
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  margin-top: 56px; border-top: 1px solid rgba(255,255,255,.12);
  padding: 24px;
}
.footer-bottom-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 14px; color: rgba(255,255,255,.6);
}
.staging-notice {
  color: var(--cyan); font-weight: 700;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--navy-2); border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 12px 24px 20px;
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: flex; min-height: 48px; }
  .header-actions .signin-link { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .grid-3 { grid-template-columns: 1fr; }
  .own-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 48px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  .section { padding: 56px 0; }
  .hero { padding: 64px 0 56px; }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .pricing-band { grid-template-columns: 1fr; max-width: 100%; }
  .pricing-band .cell { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); padding: 16px; }
  .pricing-band .cell:first-child { border-top: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .header-actions .btn { padding: 10px 16px; font-size: 15px; }
  .phone-frame { right: 8px; width: 110px; }
}

/* ============================================================
   Builder-1 page-specific additions (homepage)
   ============================================================ */

/* ============================================================
   --- builder-2 additions ---
   ============================================================ */

/* ============================================================
   --- builder-3 additions ---
   ============================================================ */

/* ============================================================
   --- builder-4 additions ---
   ============================================================ */

/* ============================================================
   --- builder-5 additions ---
   ============================================================ */

/* Draft banner: legal pages ONLY. Unmissable high-contrast stripes;
   rendered as the first visible element on every draft legal page. */
.draft-banner { background: #FFD400; color: #111111; text-align: center; }
.draft-banner-stripes {
  height: 10px;
  background: repeating-linear-gradient(45deg, #111111 0, #111111 16px, #FFD400 16px, #FFD400 32px);
}
.draft-banner-text {
  margin: 0; padding: 14px 20px;
  font-size: 17px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
}

/* Legal article column */
.legal-wrap { max-width: 780px; margin: 0 auto; padding: 48px 24px 72px; }
.legal-wrap h1 { font-size: 38px; letter-spacing: -0.5px; margin: 12px 0 14px; }
.legal-wrap h2 { font-size: 22px; margin: 34px 0 10px; }
.legal-wrap p { line-height: 1.7; }
.lead { font-size: 18px; color: var(--gray); }
.muted { color: var(--gray); font-size: 14px; }
@media (max-width: 640px) { .legal-wrap h1 { font-size: 30px; } }

/* --- builder-3 additions (Examples / About / Contact pages — Round 2) --- */
:root{ --cyan:#38BDF8; }

/* Accessible helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,[tabindex="-1"]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Header */

/* Footer */

/* Hero + sections */
.hero-dark{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;padding:76px 24px;text-align:center}
.hero-inner{max-width:880px;margin:0 auto}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin:0 0 16px}
.eyebrow-on-light{color:var(--blue)}
.hero-dark h1{font-size:44px;line-height:1.15;margin:0 0 18px;letter-spacing:-.5px;color:#fff}
.hero-dark h1 .hl{color:var(--cyan)}
.hero-dark .lead{color:#c7d6ee;font-size:18px;line-height:1.6;max-width:660px;margin:0 auto 30px}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-light{display:inline-block;background:#fff;color:var(--navy);border:1px solid #fff;border-radius:8px;padding:12px 22px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none}
.btn-light:hover{background:#e8eef7}
.btn-ghost{display:inline-block;background:transparent;color:var(--blue);border:2px solid var(--blue);border-radius:8px;padding:10px 20px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none}
.btn-ghost:hover{background:rgba(0,116,255,.08)}
.section{padding:68px 24px}
.section-soft{background:var(--bg)}
.section-inner{max-width:1080px;margin:0 auto}
.section-head{text-align:center;max-width:740px;margin:0 auto 44px}
.section-head h2{color:var(--navy);font-size:32px;line-height:1.25;margin:0 0 14px}
.section-head p{color:var(--gray);font-size:17px;margin:0}
.prose{max-width:760px;margin:0 auto;font-size:17px;line-height:1.7;color:var(--ink)}
.prose p{margin:0 0 18px}
.prose strong{color:var(--navy)}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border-radius:20px;padding:60px 32px;text-align:center;max-width:1080px;margin:72px auto}
.cta-band h2{font-size:32px;line-height:1.25;margin:0 0 14px;color:#fff}
.cta-band p{color:#c7d6ee;font-size:17px;max-width:640px;margin:0 auto 30px}

/* Examples */
.examples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.example-card{overflow:hidden;display:flex;flex-direction:column;padding:0}
.concept-badge{display:block;background:var(--amber);color:#fff;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;text-align:center;padding:9px 12px;margin:0;border-bottom:1px solid var(--line)}
.example-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.example-body h2{font-size:20px;color:var(--navy);margin:0 0 8px}
.example-body .tagline{color:var(--ink);margin:0 0 10px;font-weight:600}
.example-note{color:var(--gray);font-size:13px;margin:auto 0 0;padding-top:12px}
.mockup{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;margin-bottom:18px}
.mockup-bar{display:flex;gap:6px;padding:8px 12px;background:#eef2f7;border-bottom:1px solid var(--line)}
.mockup-bar i{width:9px;height:9px;border-radius:50%;background:#c3cede;display:block}
.mockup-nav{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.mk-logo{width:54px;height:12px;border-radius:4px;background:var(--navy);display:block;flex-shrink:0}
.mk-link{width:32px;height:8px;border-radius:4px;background:#dbe3ee;display:block}
.mk-cta{margin-left:auto;width:50px;height:18px;border-radius:6px;background:var(--trade,#0074FF);display:block;flex-shrink:0}
.mockup-hero{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.22)),var(--trade,#0074FF);padding:24px 16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.mk-h1{width:72%;height:14px;border-radius:4px;background:rgba(255,255,255,.95);display:block}
.mk-h2{width:46%;height:9px;border-radius:4px;background:rgba(255,255,255,.6);display:block}
.mk-btn{width:82px;height:22px;border-radius:6px;background:#fff;display:block;margin-top:6px}
.mockup-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 12px}
.mockup-cards span{height:42px;border-radius:8px;background:#f1f5f9;border:1px solid var(--line);display:block}
.honesty-card{max-width:860px;margin:0 auto 48px}
.honesty-card h2{color:var(--navy);font-size:22px;margin:0 0 10px}
.honesty-card p{margin:0 0 10px;color:var(--ink)}
.honesty-card p:last-child{margin-bottom:0}

/* Beliefs */
.belief-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.belief-card h3{color:var(--navy);font-size:18px;margin:14px 0 8px}
.belief-card p{margin:0;color:var(--ink);font-size:15px}

/* Accountability */
.account-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;text-align:left}
.account-point h3{color:var(--navy);font-size:17px;margin:0 0 8px}
.account-point p{margin:0;font-size:15px;color:var(--ink)}

/* Contact form */
.contact-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start}
.contact-form .req{color:var(--red);font-weight:800}

/* Contact form controls: full-width within the card column, comfortable
   padding, clear focus and error states. Scoped to .contact-form so no other
   page is affected. */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea{
  display:block;width:100%;box-sizing:border-box;
  font-size:16px;line-height:1.5;color:var(--ink);
  padding:12px 14px;margin:0;
  border:1px solid var(--line);border-radius:8px;background:#fff;
}
.contact-form textarea{resize:vertical;min-height:132px}
/* Field error visibility: contact page toggles via the hidden attribute,
   but a later generic .field-error rule sets display:none — override here. */
.contact-form .field-error{display:block;color:var(--red)}
.contact-form .field-error[hidden]{display:none}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#94a3b8;opacity:1}
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,116,255,.25);
}
.contact-form input[aria-invalid="true"],
.contact-form select[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"]{
  border-color:var(--red);
  background:#fff8f8;
}
.contact-form input[aria-invalid="true"]:focus-visible,
.contact-form select[aria-invalid="true"]:focus-visible,
.contact-form textarea[aria-invalid="true"]:focus-visible{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(220,38,38,.22);
}
/* Submit button spans the form column on narrow screens, sized
   comfortably on desktop. */
.contact-form .btn[type="submit"]{margin-top:4px}
@media(max-width:640px){
  .contact-form .btn[type="submit"]{display:flex;width:100%;box-sizing:border-box}
}
.field{margin:0 0 18px}
.field > label{display:block;font-size:14px;font-weight:700;color:var(--navy);margin:0 0 6px}
.field-error{color:var(--red);font-size:13px;font-weight:600;margin:6px 0 0}
.error-summary{background:#fef2f2;border:2px solid #fca5a5;color:#7f1d1d;border-radius:10px;padding:16px 18px;margin:0 0 24px}
.error-summary p{margin:0 0 8px;font-size:15px}
.error-summary ul{margin:0;padding-left:20px;font-size:14px}
.error-summary li{margin:4px 0}
.error-summary a{color:#7f1d1d;font-weight:600}
.success-panel{background:#f0fdf4;border:2px solid #86efac;border-radius:12px;padding:30px 28px;margin:0}
.success-panel h2{color:#14532d;font-size:24px;margin:0 0 12px}
.success-panel p{color:#14532d;font-size:16px;margin:0;max-width:560px}
.hp-field{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.consent-row{display:flex;gap:12px;align-items:flex-start}
.consent-row input[type="checkbox"]{width:22px;height:22px;min-width:22px;margin:2px 0 0;flex-shrink:0;accent-color:var(--blue);cursor:pointer}
.consent-row label{margin:0;font-size:14px;font-weight:600;line-height:1.55;color:var(--ink);cursor:pointer}
.required-note{font-size:13px;color:var(--gray);margin:0 0 20px}
.next-steps{list-style:none;margin:20px 0 0;padding:0;counter-reset:step}
.next-steps li{counter-increment:step;position:relative;padding:0 0 18px 44px;font-size:15px;color:var(--ink)}
.next-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.next-steps li:last-child{padding-bottom:0}
.aside-links{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}

/* Responsive */
@media(max-width:960px){
  .examples-grid{grid-template-columns:repeat(2,1fr)}
  .belief-grid{grid-template-columns:repeat(2,1fr)}
  .account-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .contact-layout{grid-template-columns:1fr}
}
@media(max-width:900px){
}
@media(max-width:640px){
  .hero-dark{padding:54px 20px}
  .hero-dark h1{font-size:32px}
  .hero-dark .lead{font-size:16px}
  .section{padding:50px 20px}
  .section-head h2{font-size:28px}
  .examples-grid{grid-template-columns:1fr}
  .belief-grid{grid-template-columns:1fr}
  .cta-band{margin:52px 16px;padding:44px 24px}
  .cta-band h2{font-size:28px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* --- builder-4 additions (Builder 4 owns this section; Builder 1's core
       header/footer styles, if added later in this file, take precedence) --- */

/* accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

/* site header (contract classes) */
.site-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex:none}
.site-brand-mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--blue),#38BDF8);flex:none}
.site-brand-text{font-weight:800;letter-spacing:3px;font-size:15px;color:#fff}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.nav-links a{color:#dbe4f5;text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.nav-links a:hover{color:#fff}
.auth-link{color:#fff;text-decoration:none;font-weight:700;font-size:14px}
.auth-signout{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:700;cursor:pointer}

/* site footer (contract classes) */
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}

/* get-started wizard */
.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:800;color:var(--blue);margin:0 0 8px}
.wizard{max-width:720px;margin:0 auto}
.wizard h1{font-size:32px;color:var(--navy);margin:0 0 10px}
.wiz-progress{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 0}
.wiz-step-label{font-weight:800;color:var(--navy);font-size:14px}
.wiz-bar{height:8px;background:#e6ecf5;border-radius:6px;overflow:hidden;margin:8px 0 24px}
.wiz-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),#38BDF8);transition:width .3s ease}
.error-summary ul{margin:8px 0 0;padding-left:20px}
.error.show{display:block}
.field{margin:0 0 4px}
.field-error{color:var(--red);font-size:13px;margin:6px 0 0;display:none}
.field-error.show{display:block}
.hint{font-size:13px;color:var(--gray);margin:6px 0 0}
.check-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.check-list li label{display:flex;align-items:flex-start;gap:10px;font-weight:600;font-size:15px;margin:0;cursor:pointer;color:var(--ink)}
.check-list input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--blue)}
.radio-group{border:0;margin:14px 0 6px;padding:0}
.radio-group legend{font-size:13px;font-weight:700;color:var(--navy);padding:0;margin-bottom:8px}
.radio-row{display:flex;gap:20px}
.radio-row label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;margin:0;cursor:pointer}
.radio-row input[type="radio"]{width:18px;height:18px;accent-color:var(--blue)}
.city-add{display:flex;gap:8px;align-items:stretch}
.city-add input{flex:1}
.city-add .btn{margin:0;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#eef4ff;border:1px solid #bfdbfe;border-radius:20px;padding:5px 6px 5px 14px;font-size:14px;font-weight:600;color:var(--navy)}
.chip button{background:none;border:0;color:var(--navy);cursor:pointer;font-size:16px;line-height:1;padding:2px 8px;border-radius:50%}
.chip button:hover{background:#dbeafe}
.review-list{margin:0 0 8px}
.review-row{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.review-row dt{flex:0 0 170px;font-weight:700;color:var(--navy)}
.review-row dd{margin:0;flex:1}
.wiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.wiz-nav .btn{margin:0}
.resume-banner{margin:20px 0}
.resume-banner h2{color:var(--navy)}
.hp-field{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* mobile */
@media(max-width:899px){
  .nav-links{flex-direction:column;align-items:stretch;gap:0}
  .nav-links a{display:block;padding:13px 4px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.08)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .wizard h1{font-size:26px}
  .review-row{flex-direction:column;gap:2px}
  .review-row dt{flex:none}
}
@media(max-width:520px){
  .footer-grid{grid-template-columns:1fr}
  .radio-row{flex-direction:column;gap:10px}
  .wiz-nav{flex-direction:column-reverse}
  .wiz-nav .btn{width:100%;text-align:center}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wiz-fill{transition:none}
}

/* ============================================================
   --- builder-2 additions ---
   Owner: Builder 2 (Round 2). Pages: /websites, /platform,
   /how-it-works. Additive only — does not alter core styles.
   ============================================================ */

/* Bridge: site.js (Builder 4) toggles `.is-open` on the mobile nav
   panel; core responsive CSS targeted `.open`. Support the JS class
   so the hamburger toggle actually reveals the panel. */
@media (max-width: 900px) {
}

/* Centered section headers */
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--gray); margin: 0; }
.section-head p + p { margin-top: 10px; }
.section-dark .section-head p { color: rgba(255,255,255,.82); }

/* Tick lists (included items, client requirements) */
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tick-list li { position: relative; padding-left: 30px; color: var(--ink); }
.tick-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--blue); font-weight: 800; font-size: 18px; line-height: 1.4;
}

/* Entitlement honesty badges — always paired with text labels,
   never color-alone status */
.badge-avail, .badge-included {
  display: inline-block; font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; border: 1px solid;
  margin-bottom: 14px;
}
.badge-avail { background: #EFF6FF; color: #005CE0; border-color: #BFDBFE; }
.badge-included { background: #E7F8EE; color: #15803D; border-color: #BBF7D0; }

/* SVG hero diagrams */
.diagram { width: 100%; height: auto; display: block; }

/* Trade pills under the /websites hero */
.trade-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding: 0; list-style: none; }
.trade-pills li {
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 8px 18px; font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.05);
}

/* ROUND2-FINAL: trust/included sections (Builder B — homepage reorder). Append-only. */
.trust-grid h3 { margin-top: 0; }

/* Wizard brand logo: natural aspect ratio, text fallback hidden until asset lands */
.brand-logo { height: 40px; width: auto; display: block; }
.brand-text-fallback { display: inline-flex; align-items: center; gap: 8px; }

.included-card { max-width: 980px; margin-left: auto; margin-right: auto; }
.included-list { columns: 2; column-gap: 48px; }
.included-note { margin-top: 28px; color: var(--gray); font-size: 15px; line-height: 1.65; }

@media (max-width: 720px) {
  .included-list { columns: 1; }
}

/* ============================================================
   --- visual-refresh additions (2026-10-07) ---
   Homepage visual reskin per the Signal Bridge landing-page visual
   implementation directive. APPEND-ONLY: restyles header/hero/
   homepage sections; does not touch forms, APIs, auth, or copy.
   ============================================================ */

/* ---------- 1. White site header ---------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px -20px rgba(10,31,68,.35);
}
.header-inner { min-height: 76px; }
/* Locked dark-wordmark logo sits directly on the white header —
   no white panel needed (it would be invisible on white anyway). */
.site-header .brand { color: var(--navy); }
.site-header .brand-logo-header { height: 42px; }
.site-nav a { color: var(--ink); }
.site-nav a:hover { color: var(--blue-dark); background: rgba(0,116,255,.08); }
.site-nav a[aria-current="page"] { color: var(--blue-dark); font-weight: 800; }
.signin-link { color: var(--ink); }
.signin-link:hover { color: var(--blue-dark); }
.nav-toggle { color: var(--navy); border-color: rgba(10,31,68,.28); }
@media (max-width: 900px) {
  /* White mobile panel; support both the site.js contract class
     (.is-open) and the legacy class (.open). */
  .site-nav {
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 32px 48px -20px rgba(10,31,68,.28);
  }
  .site-nav a { color: var(--ink); }
  .site-nav a:hover { color: var(--blue-dark); background: rgba(0,116,255,.07); }
  .site-nav.open, .site-nav.is-open { display: block; }
}
@media (max-width: 640px) {
  .site-header .brand-logo-header { height: 34px; }
}

/* ---------- 2. Hero: photographic composition (image reinstatement 2026-10-08) ---------- */
.hero-visual { position: relative; min-height: 560px; border-radius: 20px; overflow: hidden; }
.hero-photo {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 64% center;
}
.hero-visual::after {
  /* navy blend on the left edge into the hero background */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, var(--navy) 0%, rgba(10,31,68,.6) 24%, transparent 52%);
}
.hero-devices {
  position: absolute; z-index: 2; right: 4%; bottom: 22px;
  display: flex; align-items: flex-end; gap: 16px;
}
.device { position: relative; margin: 0; }
.device img {
  display: block; height: auto;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.15);
}
.device-laptop img { width: min(330px, 50vw); }
.device-phone img { width: min(132px, 25vw); border-radius: 20px; }
.preview-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  /* V2 badge-containment fix (2026-10-08): badge must stay inside its figure.device
     at every width — the phone mockup is narrower than the "Concept Preview" pill,
     so the badge wraps instead of protruding past the device frame. */
  max-width: calc(100% - 24px); box-sizing: border-box;
  background: #fff; color: var(--navy);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(10,31,68,.28);
  white-space: normal; line-height: 1.3;
}

/* ---------- 3. Trust / conversion cards ---------- */
.trust-grid .card { transition: transform .18s ease, box-shadow .18s ease; }
.trust-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -14px rgba(10,31,68,.20);
}
.trust-grid .icon-badge { margin-bottom: 6px; }
.trust-grid .card h3 { margin-top: 12px; }

/* ---------- 4. Included checklist: 3 columns on desktop ---------- */
.included-list { columns: 3; column-gap: 40px; }
@media (max-width: 1000px) { .included-list { columns: 2; } }
@media (max-width: 720px) { .included-list { columns: 1; } }

/* ---------- Included: checklist left + van photo right ---------- */
.included-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: center; }
.included-photo { margin: 0; }
.included-photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -18px rgba(10,31,68,.35);
}

/* ---------- 5. Ownership: keys LEFT, text CENTER, brand card RIGHT ---------- */
.own-visual-grid { display: grid; grid-template-columns: 0.9fr 1.35fr 0.75fr; gap: 32px; align-items: center; }
.own-photo { margin: 0; }
.own-photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.55);
}
.own-text .eyebrow { margin-bottom: 12px; }
.own-brand-card {
  background: #fff; border-radius: var(--radius); padding: 36px 24px;
  text-align: center; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.45);
}
.own-brand-card img { width: min(220px, 72%); height: auto; }
.own-brand-slogan { margin: 0; font-size: 15px; font-weight: 800; color: var(--navy); }
.own-brand-tag { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--gray); }
.own-meta { margin-top: 32px; }
.own-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.own-cell {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px; padding: 20px 12px; text-align: center;
}
.own-amount { display: block; font-size: 24px; font-weight: 800; color: #fff; }
.own-amount small { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.7); }
.own-label { display: block; font-size: 13px; color: rgba(255,255,255,.7); margin-top: 4px; }
@media (max-width: 640px) { .own-cells { grid-template-columns: 1fr; } }

/* ---------- 6. Image-reinstatement responsive tuning ---------- */
@media (max-width: 1000px) {
  .included-grid { grid-template-columns: 1fr; }
  .included-photo img { max-height: 360px; object-fit: cover; }
  .own-visual-grid { grid-template-columns: 1fr; }
  .own-photo img { max-height: 340px; object-fit: cover; }
  .own-brand-card { max-width: 420px; margin: 0 auto; width: 100%; }
}
@media (max-width: 900px) {
  .hero-visual { min-height: 480px; }
}
@media (max-width: 640px) {
  .hero-visual { min-height: 420px; border-radius: 16px; }
  .hero-devices { right: 3%; bottom: 14px; gap: 10px; }
  .device-laptop img { width: 60vw; }
  .device-phone img { width: 28vw; }
  .preview-badge { font-size: 10px; padding: 5px 10px; top: 8px; left: 8px; }
}

/* ---------- visual-refresh fix pass 1 (render-verified 2026-10-07) ---------- */
/* Keep all 7 nav links on one line inside the 1080px header. */
.site-nav ul { flex-wrap: nowrap; }
.site-nav a { white-space: nowrap; padding: 12px 10px; font-size: 14.5px; }
@media (max-width: 1000px) and (min-width: 901px) {
  .site-nav a { padding: 12px 8px; font-size: 14px; }
  .header-actions .btn { padding: 10px 16px; }
}
/* Concept badges ride the top of each visual like a label tab —
   never covering the mockup content beneath. */
.device > .preview-badge { top: 10px; left: 10px; }
.example-mock > .concept-badge { position: absolute; top: 10px; left: 10px; z-index: 2; border-radius: 8px; border: 0; }
/* Pricing band amounts never wrap. */
.pricing-band .amount { white-space: nowrap; font-size: 24px; }
@media (max-width: 640px) { .pricing-band .amount { font-size: 26px; } }

/* ---------- visual-refresh fix pass 2 ---------- */
/* Mobile nav panel anchors flush to the (now taller, white) header. */
@media (max-width: 900px) {
  .site-header .site-nav { top: 100%; }
}

/* ============================================================
   AI-DISCOVERY POSITIONING ADDITIONS — Builder C, 2026-10-08
   Staging only; pending owner approval. Existing rules above
   are untouched. Covers: hero support line, the "Search & AI
   Discovery Foundation" feature band (homepage + /websites
   panel), the /platform progression, and the flagged
   What-Is-Included note.
   ============================================================ */

/* A. Hero support line — quiet, small, below .support. */
.hero-ai-line {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.62);
  margin: 12px 0 0;
  max-width: 560px;
  letter-spacing: .2px;
}

/* B. Search & AI discovery feature band — full-width, light background,
   blue accents, NO second logo. Lives inside the existing Trust section. */
.eyebrow-blue { color: var(--blue); }
.ai-discovery-band {
  background: #f4f7fb;
  border: 1px solid #dbe4f0;
  border-left: 4px solid var(--blue);
  border-radius: 14px;
  padding: 32px 32px 28px;
}
.ai-discovery-band h3 {
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 12px;
  color: var(--brand-deep, #0A3D91);
}
.ai-discovery-band > p { margin: 0 0 8px; }
.ai-discovery-points h4 {
  font-size: 15px;
  margin: 0 0 6px;
  color: var(--brand-deep, #0A3D91);
}
.ai-discovery-points p { font-size: 14px; margin: 0; color: var(--gray, #5b6472); }
.ai-discovery-note {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--gray, #5b6472);
}
/* /websites panel variant — same band, scoped spacing only. */
.ai-discovery-band-panel { /* inherits .ai-discovery-band */ }

/* C. Flagged inclusion note — same tick-list look, visually quieter,
   marked data-owner-review="pending" in markup. */
.tick-list .inclusion-note { color: var(--gray, #5b6472); font-size: 15px; }

/* D. /platform progression — three-step list under the foundation card. */
.progression h3 { font-size: 20px; margin: 0 0 16px; color: var(--brand-deep, #0A3D91); }
.progression-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.progression-steps li {
  background: #f4f7fb;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  padding: 20px 22px;
}
.progression-steps h4 { font-size: 16px; margin: 0 0 6px; color: var(--brand-deep, #0A3D91); }
.progression-steps p { margin: 0; font-size: 14.5px; }

@media (max-width: 640px) {
  .ai-discovery-band { padding: 24px 20px; }
  .ai-discovery-band h3 { font-size: 19px; }
  .hero-ai-line { font-size: 13px; }
}