/* ============================================================
   Insta Quote AI — website shared styles
   Black + Platinum theme (matches the Meta ad landing page).
   Hand-written CSS, no Tailwind runtime.
   Keeps the class names / selectors the existing JS relies on:
     - quiz.js  : .option-card, .selection-circle, .option-radio,
                  .quiz-next, .quiz-skip, [data-result]
     - contact.js: form.contact-form, .form-status, .btn-loading,
                  .btn-spinner, .btn-success
     - animations.js: .reveal -> .reveal.is-visible, [data-count-to]
   ============================================================ */

:root {
  /* Core surfaces */
  --bg:            #0a0a0b;
  --bg-elev:       #110f12;
  --bg-card:       rgba(255, 255, 255, 0.035);
  --bg-card-hover: rgba(255, 255, 255, 0.06);

  /* Text */
  --text:      #f4f4f6;
  --text-mut:  #a2a2ab;
  --text-dim:  #6c6c75;

  /* Platinum */
  --plat-1: #ffffff;
  --plat-2: #dcdde0;
  --plat-3: #b6b7bc;
  --plat-4: #8d8f95;
  --plat-grad: linear-gradient(135deg, #ffffff 0%, #d7d8db 26%, #9a9ca2 54%, #ededf0 78%, #c2c3c8 100%);
  --plat-grad-soft: linear-gradient(135deg, #f3f3f5 0%, #c9cace 50%, #e9eaec 100%);

  /* Lines / borders */
  --hair:        rgba(229, 228, 226, 0.12);
  --hair-soft:   rgba(229, 228, 226, 0.07);
  --hair-strong: rgba(229, 228, 226, 0.28);

  --radius: 18px;
  --radius-lg: 26px;
  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; max-width: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient platinum glow over the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 50% -8%, rgba(220, 221, 224, 0.10), transparent 70%),
    radial-gradient(45vw 40vh at 100% 30%, rgba(150, 152, 158, 0.06), transparent 70%),
    radial-gradient(45vw 45vh at 0% 70%, rgba(150, 152, 158, 0.05), transparent 70%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

main { flex: 1 0 auto; position: relative; z-index: 1; }

/* ---- Layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
section { position: relative; z-index: 1; }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }

/* ---- Typography ---- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.h-xl { font-size: clamp(2.6rem, 7vw, 5.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; }
.h-lg { font-size: clamp(2rem, 4.8vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }
.h-md { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.lead { font-size: clamp(1rem, 1.4vw, 1.18rem); color: var(--text-mut); line-height: 1.55; letter-spacing: -0.011em; }
.muted { color: var(--text-mut); }
.center { text-align: center; }

/* Platinum metallic text */
.platinum {
  background: var(--plat-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 17px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease);
  white-space: nowrap;
  font-family: inherit;
  text-align: center;
}
.btn svg { width: 18px; height: 18px; }
.btn .material-symbols-outlined { font-size: 20px; line-height: 1; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(220, 221, 224, 0.4); }

.btn-platinum {
  background: #ffffff;
  color: #0a0a0b;
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.btn-platinum:hover { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: transparent;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: transparent; }

.btn-block { width: 100%; }
.btn-lg { padding: 19px 38px; font-size: 1.08rem; }
.btn-sm { padding: 12px 22px; font-size: 0.9rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-row.center { justify-content: center; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 10, 11, 0.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hair-soft);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px; overflow: hidden;
  background: #000; border: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-name { font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; }
.header-cta { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  text-align: center;
  padding: 96px 0 64px;
  overflow: hidden;
}
.hero-inner { max-width: 880px; margin: 0 auto; position: relative; z-index: 2; }
.hero .h-xl { margin-bottom: 24px; }
.hero .lead { max-width: 640px; margin: 0 auto 38px; }
.hero .cta-row { justify-content: center; }

/* ============================================================
   Video section (replaces the old 3-phone mockup)
   ============================================================ */
.video-frame {
  position: relative;
  width: 100%;
  max-width: 380px;          /* vertical 9:16 demo, shown phone-sized */
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hair);
  background: #000;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  aspect-ratio: 9 / 16;
}
.video-frame video,
.video-frame iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }

/* ============================================================
   Stats
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: center;
}
.stat {
  padding: 40px 24px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.stat .num { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 12px; }
.stat .cap { color: var(--text-mut); font-size: 1.02rem; max-width: 240px; margin: 0 auto; }

/* ============================================================
   Trusted by (client logo marquee) — white social-proof band
   ============================================================ */
.trustband {
  background: #ffffff;
  padding: 74px 0 66px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.trustband .tb-heading {
  text-align: center;
  color: #101014;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 auto 38px;
  text-wrap: balance;
}
.tb-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.tb-track {
  display: flex;
  width: max-content;
  animation: tb-scroll 52s linear infinite;
}
.tb-marquee:hover .tb-track { animation-play-state: paused; }
.tb-item {
  flex: 0 0 auto;
  width: 290px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
.tb-item img { width: auto; max-width: 100%; object-fit: contain; }
.tb-maverick img  { max-height: 100px; }
.tb-kennedy img   { max-height: 94px; }
.tb-rustynail img { max-height: 96px; }
.tb-areatech img  { max-height: 56px; }

/* Travels left to right. The track holds the logo set twice, so shifting
   it back to 0 from -50% loops with no visible seam. */
@keyframes tb-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ============================================================
   Generic section header
   ============================================================ */
.sec-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.sec-head .eyebrow { margin-bottom: 16px; display: block; }
.sec-head .lead { margin-top: 18px; }

/* ============================================================
   3 steps (From site visit to sent quote)
   ============================================================ */
.steps { display: flex; flex-direction: column; gap: 80px; }
.step { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.step.reverse .step-media { order: 2; }
.step-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hair);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.8);
  background: var(--bg-elev);
}
.step-media img { width: 100%; height: auto; }
.step-num {
  font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 16px; display: block;
}
.step-body h3 { margin-bottom: 16px; }
.step-body p { color: var(--text-mut); font-size: 1.08rem; line-height: 1.65; margin-bottom: 26px; }

/* ============================================================
   Feature cards (Why Tradies Love It)
   ============================================================ */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card {
  padding: 40px 36px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.feature-card:hover { background: var(--bg-card-hover); border-color: var(--hair-strong); transform: translateY(-3px); }
.feature-card .ic {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 24px;
  border: 1px solid var(--hair); background: var(--bg-elev);
  display: flex; align-items: center; justify-content: center;
}
.feature-card .ic .material-symbols-outlined { font-size: 28px; color: var(--plat-2); }
.feature-card h4 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 12px; }
.feature-card p { color: var(--text-mut); line-height: 1.6; }

/* ============================================================
   Trade / job-type pills (Any job, any complexity)
   ============================================================ */
.tag-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 860px; margin: 0 auto; }
.tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  border: 1px solid var(--hair-strong); background: rgba(255,255,255,0.02);
  font-weight: 600; font-size: 1.02rem; color: var(--text);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--plat-grad-soft); box-shadow: 0 0 10px var(--plat-3); }
.tag:hover { background: var(--bg-card-hover); border-color: var(--plat-3); transform: translateY(-2px); }

/* ============================================================
   Numbered sign-up steps (Get Started in 3 Steps)
   ============================================================ */
.signup { position: relative; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.signup::before {
  content: ""; position: absolute; left: 27px; top: 24px; bottom: 24px;
  width: 2px; background: var(--hair);
}
.signup-step { position: relative; display: flex; gap: 24px; align-items: flex-start; }
.signup-num {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem;
  background: var(--plat-grad-soft); color: #0a0a0b;
  box-shadow: 0 6px 20px rgba(220,221,224,0.18);
}
.signup-step h4 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
.signup-step p { color: var(--text-mut); font-size: 1.05rem; line-height: 1.6; }

/* ============================================================
   About band (Built by a tradie, for tradies)
   ============================================================ */
.about-band {
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(220,221,224,0.10), transparent 60%),
    var(--bg-elev);
  padding: 64px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.about-band .about-copy p { color: var(--text-mut); font-size: 1.2rem; line-height: 1.6; margin-bottom: 28px; }
.about-rule { width: 80px; height: 3px; background: var(--hair-strong); margin-bottom: 28px; }

/* ============================================================
   Features (spec-sheet / checklist style)
   What's Inside Your Subscription
   ============================================================ */
.spec {
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
  max-width: 920px;
  margin: 0 auto;
}
.spec-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px 20px;
  padding: 28px 32px;
  border-bottom: 1px solid var(--hair-soft);
  align-items: start;
  transition: background 0.25s var(--ease);
}
.spec-row:last-child { border-bottom: 0; }
.spec-row:hover { background: var(--bg-card-hover); }
.spec-tick {
  grid-row: span 2;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--plat-grad-soft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(220,221,224,0.18);
}
.spec-tick svg { width: 20px; height: 20px; stroke: #0a0a0b; stroke-width: 3; fill: none; }
.spec-row h4 { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; }
.spec-row p { color: var(--text-mut); font-size: 1rem; line-height: 1.6; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(220,221,224,0.4); border-radius: var(--radius); }
.faq .chev { flex-shrink: 0; width: 20px; height: 20px; stroke: var(--plat-3); fill: none; transition: transform 0.25s var(--ease); }
.faq[open] .chev { transform: rotate(180deg); }
.faq .faq-body { padding: 0 28px 26px; color: var(--text-mut); line-height: 1.7; font-size: 1rem; }

/* ============================================================
   Final CTA band
   ============================================================ */
.cta-band {
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(220,221,224,0.12), transparent 60%),
    var(--bg-elev);
  padding: 72px 32px;
  text-align: center;
}
.cta-band .h-lg { margin-bottom: 28px; }
.cta-band .cta-row { justify-content: center; }

/* ============================================================
   Get Started page — two action cards
   ============================================================ */
.start-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 0 auto; }
.start-card {
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 44px 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 36px;
}
.start-card.feature {
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(220,221,224,0.12), transparent 60%),
    var(--bg-elev);
}
.start-card h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 18px; }
.start-card p { color: var(--text-mut); font-size: 1.08rem; line-height: 1.6; }

/* ============================================================
   Contact page layout
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}
.contact-info { display: flex; flex-direction: column; gap: 32px; padding-top: 8px; }
.contact-info .label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.contact-info .email { font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -0.01em; }
.contact-info .email:hover { color: var(--plat-2); }
.info-card {
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--bg-card); padding: 24px 26px;
  display: flex; gap: 16px; align-items: flex-start;
}
.info-card .material-symbols-outlined { color: var(--plat-2); font-size: 28px; }
.info-card h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.info-card p { color: var(--text-mut); font-size: 0.96rem; line-height: 1.55; }

/* ============================================================
   Forms (shared: inline homepage form + contact page + lead)
   contact.js targets form.contact-form
   ============================================================ */
.lead-form, .contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-card {
  border: 1px solid var(--hair); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 36px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.field input, .field textarea {
  width: 100%;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--hair);
  border-radius: 13px;
  padding: 15px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--plat-3); box-shadow: 0 0 0 3px rgba(220,221,224,0.12); }
.field input.invalid, .field textarea.invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }
.field textarea { min-height: 130px; resize: vertical; }

.form-status { margin-top: 6px; padding: 13px 16px; border-radius: 12px; font-size: 0.92rem; display: none; }
.form-status.show { display: block; animation: fade-in 0.25s var(--ease); }
.form-status.success { background: rgba(22,163,74,0.14); color: #6ee7a8; border: 1px solid rgba(22,163,74,0.35); }
.form-status.error { background: rgba(239,68,68,0.12); color: #fca5a5; border: 1px solid rgba(239,68,68,0.35); }

/* Submit button loading / success states (set by contact.js) */
.btn-loading { pointer-events: none; opacity: 0.9; }
.btn-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(10,10,11,0.3); border-top-color: #0a0a0b;
  border-radius: 50%; animation: spin 0.7s linear infinite; margin-left: 8px; vertical-align: middle;
}
.btn-success { background: #16a34a !important; color: #fff !important; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Quiz pages (multi-page flow — keeps quiz.js selectors)
   ============================================================ */
.quiz-page { max-width: 680px; margin: 0 auto; padding: 48px 24px 80px; width: 100%; position: relative; z-index: 1; }
.quiz-progress-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
.quiz-progress-head span { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
.quiz-bars { display: flex; gap: 8px; height: 4px; margin-bottom: 40px; }
.quiz-bars i { flex: 1; border-radius: 999px; background: rgba(255,255,255,0.1); transition: background 0.3s var(--ease); }
.quiz-bars i.on { background: var(--plat-grad-soft); }

.quiz-q { text-align: center; margin-bottom: 32px; }
.quiz-q h1, .quiz-q h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.quiz-q p { color: var(--text-mut); margin-top: 12px; }

.quiz-options { display: flex; flex-direction: column; gap: 12px; }
/* Each option keeps markup: <label><input.option-radio><div.option-card>...<span> */
.option-radio { position: absolute; opacity: 0; pointer-events: none; }
.option-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.12s var(--ease);
}
label:hover .option-card { border-color: var(--plat-4); background: var(--bg-card-hover); }
label:active .option-card { transform: scale(0.995); }
.option-card .selection-circle,
.selection-circle {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--hair-strong);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}
.option-card span { font-weight: 600; font-size: 1.05rem; color: var(--text); }
.option-radio:checked + .option-card { border-color: var(--plat-2); background: rgba(220,221,224,0.07); }
.option-radio:checked + .option-card .selection-circle { border-color: var(--plat-2); background: var(--plat-grad-soft); }
.option-radio:checked + .option-card .selection-circle::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: #0a0a0b; display: block;
  animation: dot-pop 180ms ease-out;
}
@keyframes dot-pop { from { transform: scale(0); } to { transform: scale(1); } }

.quiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }
.quiz-skip { background: none; border: none; color: var(--text-dim); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: color 0.2s; }
.quiz-skip:hover { color: var(--text); }
.quiz-next[disabled] { opacity: 0.4; pointer-events: none; }

/* ---- Quiz results ---- */
.result-head { text-align: center; margin-bottom: 32px; max-width: 760px; margin-left: auto; margin-right: auto; }
.result-head h1 { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; max-width: 820px; margin-left: auto; margin-right: auto; }
.result-card {
  border: 1px solid var(--hair); border-radius: var(--radius); background: var(--bg-card);
  padding: 32px 18px; text-align: center;
}
.result-card .rc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.result-card .rc-num { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; }
.result-card .rc-sub { font-size: 13px; color: var(--text-mut); font-weight: 600; }
.result-desc { text-align: center; color: var(--text-mut); max-width: 620px; margin: 0 auto 36px; line-height: 1.65; font-size: 1.05rem; }

/* ============================================================
   Footer + app store download buttons
   ============================================================ */
.site-footer { border-top: 1px solid var(--hair-soft); margin-top: 40px; position: relative; z-index: 1; }
.site-footer .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: 40px; padding-bottom: 40px; flex-wrap: wrap;
}
.foot-legal { color: var(--text-dim); font-size: 0.85rem; }
.foot-links { display: flex; gap: 22px; }
.foot-links a { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); transition: color 0.2s; }
.foot-links a:hover { color: var(--text); }

/* Download buttons row (footer) */
.store-badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.store-btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 10px 18px; border-radius: 14px;
  border: 1px solid var(--hair-strong);
  background: rgba(255,255,255,0.02);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.store-btn:hover { background: rgba(255,255,255,0.07); border-color: var(--plat-3); transform: translateY(-2px); }
.store-btn svg { width: 24px; height: 24px; flex-shrink: 0; }
.store-btn .store-txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn .store-txt small { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mut); }
.store-btn .store-txt b { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }

/* ============================================================
   Material Symbols flash-of-unstyled-text suppressor
   ============================================================ */
.material-symbols-outlined { visibility: hidden; }
html.fonts-ready .material-symbols-outlined { visibility: visible; }

/* ============================================================
   Scroll reveal + motion (animations.js adds .is-visible)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }
/* Stacked on mobile the plan grid is several screens tall, so waiting for 18%
   of it to be visible leaves the first card blank until you scroll past it.
   Plans are shown outright at that width. */
@media (max-width: 860px) {
  .plan-grid.reveal { opacity: 1; transform: none; transition: none; }
}
.reveal-item { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--delay, 0ms); }
.reveal.is-visible .reveal-item { opacity: 1; transform: none; }

@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .section { padding: 68px 0; }
  .section-sm { padding: 48px 0; }
  .step { grid-template-columns: 1fr; gap: 28px; }
  .step.reverse .step-media { order: 0; }
  .stats { grid-template-columns: 1fr; gap: 14px; }
  .feature-grid { grid-template-columns: 1fr; }
  .about-band { grid-template-columns: 1fr; padding: 44px 30px; gap: 28px; }
  .start-cards { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .header-cta .btn-contact { display: none; }
  .trustband { padding: 56px 0 60px; }
  .trustband .tb-heading { margin-bottom: 34px; }
  .tb-item { width: 230px; height: 94px; padding: 0 14px; }
  .tb-maverick img  { max-height: 78px; }
  .tb-kennedy img   { max-height: 74px; }
  .tb-rustynail img { max-height: 76px; }
  .tb-areatech img  { max-height: 44px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .tb-item { width: 196px; height: 84px; padding: 0 12px; }
  .tb-maverick img  { max-height: 66px; }
  .tb-kennedy img   { max-height: 62px; }
  .tb-rustynail img { max-height: 64px; }
  .tb-areatech img  { max-height: 37px; }
  .field-row { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; }
  .spec-row { padding: 22px 20px; grid-template-columns: 44px 1fr; }
  .brand-name { font-size: 1rem; }
  .btn { padding: 15px 24px; }
  .site-footer .wrap { flex-direction: column; text-align: center; }
  .store-badges { justify-content: center; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-item { opacity: 1; transform: none; }
  .tb-track { animation: none !important; transform: none !important; }
  .tb-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .option-radio:checked + .option-card .selection-circle::after { animation: none; }
}


/* ============================================================
   Insta Quote AI — Pricing page + plan finder
   Appended to css/styles.css in both repos (website + landing page).

   The signature piece is .plan-panel: a white panel floating on the
   black page, with the platinum sweep across the top half and the
   signal-blue horizon settling at the base. Straight off the design
   system rules — blue is atmosphere, it lives at the bottom of the
   frame, it is never a fill, and black stays the subject.
   ============================================================ */

:root {
  /* Signal blue — from design_handoff_instaquote_design_system */
  --blue-050: #f4f8fc;
  --blue-100: #e4eef8;
  --blue-200: #cbdff1;
  --blue-300: #a9c7e4;

  /* Platinum (warm neutral metal) */
  --platinum-050: #fafaf9;
  --platinum-100: #f2f2f0;
  --platinum-200: #e5e4e2;
  --platinum-400: #b9b8b4;

  /* Ink on the white panel */
  --panel-ink:      #0a0a0b;
  --panel-ink-mut:  #4a4c52;
  --panel-ink-dim:  #6f7178;
  --panel-hair:     rgba(10, 10, 11, 0.10);
  --panel-hair-sub: rgba(10, 10, 11, 0.07);
}

/* ============================================================
   Header nav — plain text links beside the brand, the way most
   sites do it. The buttons on the right stay as they were.
   ============================================================ */
.site-header .wrap { justify-content: flex-start; }
.site-header .header-cta { margin-left: auto; }
/* Sits on the right, beside Contact and Take the Quiz, as plain white text
   rather than a pill. */
.site-header .header-cta { margin-left: 0; }
.site-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; margin-right: 20px; }
.site-nav a {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #ffffff;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease);
  white-space: nowrap;
}
.site-nav a:hover, .site-nav a.is-current { border-bottom-color: rgba(255, 255, 255, 0.55); }

/* ============================================================
   The band — the pricing panel as a full width section, with its
   own heading in black sitting inside it.
   ============================================================ */
.plan-band {
  --horizon: 1180px;
  --chrome:  520px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
  background:
    linear-gradient(to top,
      var(--blue-300)                        0,
      #bed6ed        calc(var(--horizon) * 0.16),
      #d3e3f3        calc(var(--horizon) * 0.38),
      #e9f1fa        calc(var(--horizon) * 0.66),
      rgba(233, 241, 250, 0)     var(--horizon)),
    linear-gradient(180deg, #ffffff 0%, #fbfbfa 45%, var(--platinum-100) 100%);
}
.plan-band.compact { --horizon: 940px; --chrome: 420px; }

/* Same chrome sweep as the card version. */
.plan-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(112deg,
    rgba(154, 156, 162, 0)    0%,
    rgba(255, 255, 255, 0.95) 17%,
    rgba(148, 152, 160, 0.16) 30%,
    rgba(255, 255, 255, 0.92) 43%,
    rgba(148, 152, 160, 0.11) 55%,
    rgba(255, 255, 255, 0.85) 67%,
    rgba(148, 152, 160, 0.17) 79%,
    rgba(255, 255, 255, 0.70) 90%,
    rgba(154, 156, 162, 0)   100%);
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--chrome), transparent calc(var(--chrome) * 2));
          mask-image: linear-gradient(180deg, #000 0, #000 var(--chrome), transparent calc(var(--chrome) * 2));
}

.plan-band-inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}
.plan-band-head { max-width: 780px; padding: 92px 0 52px; }
.plan-band-title {
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--panel-ink);
}
.plan-band-lead {
  margin-top: 20px;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--panel-ink-mut);
}
/* Inside the band each plan is its own boxed section, outlined in black.
   The design system calls for a 1px ink hairline on emphatic containers. */
.plan-band .plan-grid { column-gap: 22px; padding-bottom: 96px; }
.plan-band .plan-col {
  border: 1px solid var(--panel-ink);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.plan-band .plan-col        { position: relative; }
/* .plan-col:first-child drops its left border further down the file for the
   old divider layout. In the band every plan is a boxed section, so put it back. */
.plan-band .plan-col:first-child { border-left: 1px solid var(--panel-ink); }
.plan-band .plan-head       { padding: 54px 30px 0; }

/* Sits in the top corner of a plan, clear of the name below it. */
.plan-flag {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel-ink);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-band .plan-pitch      { padding: 18px 30px 0; }
.plan-band .plan-cta        { padding: 26px 30px 0; }
.plan-band .plan-inclusions { padding: 30px 30px 36px; }
/* The mobile card treatment (.plan-col > * { position: relative }) must not
   pull the flag into the flow — it stays pinned to the card corner. */
.plan-band .plan-col .plan-flag { position: absolute; z-index: 2; }

/* ============================================================
   The panel — the card version, still used for a single plan
   on the quiz result
   ============================================================ */
.plan-panel {
  /* Depth of the blue horizon, measured up from the base of the panel.
     Fixed in px, not a percentage, so a long panel and a short one get the
     same weight of blue instead of the tall one washing out. */
  --horizon: 700px;
  --chrome:  420px;

  position: relative;
  border-radius: 34px;
  overflow: hidden;
  isolation: isolate;
  background:
    /* the horizon, sitting at the base */
    linear-gradient(to top,
      var(--blue-300)                        0,
      #bed6ed        calc(var(--horizon) * 0.16),
      #d3e3f3        calc(var(--horizon) * 0.38),
      #e9f1fa        calc(var(--horizon) * 0.66),
      rgba(233, 241, 250, 0)     var(--horizon)),
    /* white through platinum, the body of the panel */
    linear-gradient(180deg, #ffffff 0%, #fbfbfa 45%, var(--platinum-100) 100%);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.85);
}
.plan-panel.single  { --horizon: 380px; --chrome: 260px; }
.plan-panel.compact { --horizon: 520px; --chrome: 340px; }

/* Chrome — a metallic sweep of light and shade across the top of the panel.
   Plain opacity, no blend mode, so it renders the same in every browser. */
.plan-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(112deg,
    rgba(154, 156, 162, 0)    0%,
    rgba(255, 255, 255, 0.95) 17%,
    rgba(148, 152, 160, 0.16) 30%,
    rgba(255, 255, 255, 0.92) 43%,
    rgba(148, 152, 160, 0.11) 55%,
    rgba(255, 255, 255, 0.85) 67%,
    rgba(148, 152, 160, 0.17) 79%,
    rgba(255, 255, 255, 0.70) 90%,
    rgba(154, 156, 162, 0)   100%);
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--chrome), transparent calc(var(--chrome) * 2));
          mask-image: linear-gradient(180deg, #000 0, #000 var(--chrome), transparent calc(var(--chrome) * 2));
}

/* ============================================================
   Columns inside the panel
   ============================================================ */
/* Four shared rows across all three columns: head, pitch, button, inclusions.
   Subgrid keeps them in line, so every "Inquire now" sits at the same height
   however long the copy above it runs. */
.plan-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto;
}
.plan-col {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  border-left: 1px solid var(--panel-hair);
}
.plan-col:first-child { border-left: 0; }

/* These all carry a display value, which would otherwise beat the browser's
   own [hidden] rule and leave hidden blocks on screen. */
.plan-col[hidden],
[data-pq-form][hidden],
[data-pq-generic][hidden],
[data-pq-reveal-form][hidden],
[data-pq-verdict-extras][hidden] { display: none !important; }

/* Bottom aligned, so the plan names sit on the same line across all three
   columns whether or not a column carries a badge above it. */
.plan-head       { padding: 44px 38px 0; display: flex; flex-direction: column; justify-content: flex-end; }
.plan-pitch      { padding: 20px 38px 0; }
.plan-cta        { padding: 28px 38px 0; align-self: end; }
.plan-inclusions { padding: 32px 38px 46px; }

.plan-name {
  /* Sized so "Home & Development" stays on one line. If it wraps, the whole
     head row grows and leaves a void above the shorter plan names. */
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--panel-ink);
}

.plan-line {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--panel-ink);
  margin-bottom: 14px;
}
.plan-desc {
  font-size: 0.99rem;
  line-height: 1.62;
  color: var(--panel-ink);
}

/* Browsers without subgrid fall back to even columns plus reserved space. */
@supports not (grid-template-rows: subgrid) {
  .plan-col { display: flex; flex-direction: column; }
  .plan-cta { margin-top: auto; }
  .plan-line { min-height: 3.8em; }
  .plan-desc { min-height: 9.8em; }
}

/* Black pill CTA — the design system's primary action on a light surface. */
.btn-ink {
  background: #000000;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(10, 10, 11, 0.22);
}
.btn-ink:hover { background: #26262a; box-shadow: 0 10px 28px rgba(10, 10, 11, 0.30); }
.btn-ink:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10, 10, 11, 0.35); }

.plan-list-head {
  margin: 0 0 18px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--panel-ink);
}
.plan-list-head b { font-weight: 800; }
.plan-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.plan-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--panel-ink);
}
.plan-tick {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(10, 10, 11, 0.07);
  border: 1px solid var(--panel-hair);
  display: flex; align-items: center; justify-content: center;
}
.plan-tick svg { width: 11px; height: 11px; stroke: var(--panel-ink); stroke-width: 3.2; fill: none; }

/* Sub heading under a list head, e.g. "Built for developers and complex systems" */
.plan-sub-head {
  margin: -10px 0 18px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--panel-ink-dim);
}

/* What Lite deliberately does not do. Same list shape, crosses not ticks,
   dropped back so it reads as a footnote rather than a feature. */
.plan-excl-head { margin-top: 30px; color: var(--panel-ink-mut); }
.plan-list.plan-excl li { color: var(--panel-ink-dim); font-size: 0.92rem; }
.plan-cross {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(10, 10, 11, 0.04);
  border: 1px solid var(--panel-hair-sub);
  display: flex; align-items: center; justify-content: center;
}
.plan-cross svg { width: 10px; height: 10px; stroke: var(--panel-ink-dim); stroke-width: 2.6; fill: none; }

/* Line under the panel — the Lite upgrade nudge. */
.plan-note {
  text-align: center;
  margin-top: 28px;
  color: var(--text-mut);
  font-size: 1.02rem;
}
.plan-note b { color: var(--text); font-weight: 700; }

/* ============================================================
   Simple by design — what you do vs what it is doing
   ============================================================ */
/* The product shot sits on a light stage, which is what the design system's
   stage gradient is for. The image background is near white, so it meets the
   stage seamlessly at the top and sides, and fades into the blue at the base. */
/* The coded workspace mock sits inside the stage rather than filling it edge
   to edge, so it reads at its designed size instead of blown up. */
.flow-stage .ui-mini { max-width: 820px; margin: 0 auto; }
.flow-stage:has(.ui-mini) { padding: 44px 44px 0; }
@media (max-width: 860px) { .flow-stage:has(.ui-mini) { padding: 20px 16px 0; border-radius: 22px; } }

.flow-stage {
  --horizon: 340px;
  border-radius: 34px;
  overflow: hidden;
  margin-bottom: 72px;
  background:
    linear-gradient(to top,
      var(--blue-300)                        0,
      #cbdff1        calc(var(--horizon) * 0.28),
      #e9f1fa        calc(var(--horizon) * 0.62),
      rgba(233, 241, 250, 0)     var(--horizon)),
    #fdfdfd;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.85);
}
.flow-stage img {
  width: 100%;
  display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 97%);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 97%);
}

/* The three steps, sitting under the shot. */
.flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-bottom: 34px; }
.flow-item { display: flex; flex-direction: column; }
.flow-body { padding: 0 4px; }
.flow-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--plat-grad-soft); color: #0a0a0b;
  font-weight: 800; font-size: 0.92rem;
  margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(220, 221, 224, 0.18);
}
.flow-body h4 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; }
.flow-body p { color: var(--text); line-height: 1.6; }

.simple-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.simple-card {
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
}
.simple-card.front {
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(220, 221, 224, 0.12), transparent 60%),
    var(--bg-elev);
}
/* This whole section reads white, so it lifts off the page instead of
   sitting back like body copy. */
/* The plan band above ends in blue at its base. This section starts in that
   same blue and fades down to paper, so the colour flows straight through. */
.simple-flow.sec-light {
  --flow: 900px;
  background:
    linear-gradient(to bottom,
      var(--blue-300)                    0,
      #bed6ed        calc(var(--flow) * 0.16),
      #d3e3f3        calc(var(--flow) * 0.38),
      #e9f1fa        calc(var(--flow) * 0.66),
      rgba(233, 241, 250, 0)  var(--flow)),
    var(--paper);
}
/* Reading back to ink now the section is light. */
.simple-flow .lead,
.simple-flow .simple-tag,
.simple-flow .simple-foot,
.simple-flow .flow-item h4,
.simple-flow .simple-list li,
.simple-flow .simple-list li span { color: var(--panel-ink); }
.simple-flow .flow-item h4 { font-weight: 700; }
.simple-flow .flow-num { background: var(--ink); color: #ffffff; box-shadow: 0 6px 18px rgba(10, 10, 11, 0.18); }
.simple-flow .simple-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(10, 10, 11, 0.10);
  backdrop-filter: blur(2px);
}
.simple-flow .simple-list .plan-tick { background: var(--ink); border-color: var(--ink); }
.simple-flow .simple-list .plan-tick svg { stroke: #ffffff; }
.simple-flow .simple-foot { border-top-color: rgba(10, 10, 11, 0.12); }
/* Keep the hero's soft base fade so the mock does not end on a hard crop. */
.simple-flow .flow-stage { padding: 0; background: none; box-shadow: none; }

.simple-section .lead { color: var(--text); }
.simple-tag {
  display: block; margin-bottom: 28px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text);
}
.simple-steps { list-style: none; display: flex; flex-direction: column; gap: 26px; }
.simple-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; }
.simple-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--plat-grad-soft); color: #0a0a0b;
  font-weight: 800; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(220, 221, 224, 0.18);
}
.simple-steps h4 { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 8px; }
.simple-steps p { color: var(--text); line-height: 1.6; }
.simple-list li { color: var(--text); font-size: 0.99rem; }
.simple-section .simple-card { padding: 36px 36px 32px; }
.simple-list .plan-tick { background: rgba(255, 255, 255, 0.05); border-color: var(--hair); }
.simple-list .plan-tick svg { stroke: var(--plat-2); }
.simple-foot {
  margin-top: auto; padding-top: 22px;
  border-top: 1px solid var(--hair-soft);
  color: var(--text); font-weight: 600; font-size: 0.98rem; line-height: 1.6;
}

/* ============================================================
   Who each plan is for — one proper section per plan
   ============================================================ */
.fit-bands { display: flex; flex-direction: column; }
.fit-band {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
  padding: 52px 0;
  border-top: 1px solid var(--hair);
}
.fit-band:first-child { border-top: 0; padding-top: 0; }
.fit-band:last-child { padding-bottom: 0; }
.fit-main .eyebrow { display: block; margin-bottom: 14px; color: var(--text); }
.fit-main h3 { margin-bottom: 22px; }
.fit-main p { color: var(--text-mut); font-size: 1.06rem; line-height: 1.68; margin-bottom: 18px; }
.fit-main p:last-child { margin-bottom: 0; }

.fit-side {
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 32px 30px;
}
.fit-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 16px;
}
.fit-signs { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 30px; }
.fit-signs li {
  display: grid; grid-template-columns: 7px 1fr; gap: 13px;
  color: var(--text-mut); font-size: 0.99rem; line-height: 1.55;
}
.fit-signs li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--plat-grad-soft); margin-top: 0.55em;
}
.fit-side .fit-chips { margin-bottom: 28px; }
.fit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-mut);
  white-space: nowrap;
}

/* ============================================================
   Comparison table
   ============================================================ */
/* White table with black type and rounded corners, so it reads as part of the
   same family as the pricing band. Not-included cells drop back to chrome. */
.cmp-wrap {
  border: 1px solid var(--panel-ink);
  border-radius: 22px;
  background: #ffffff;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.85);
}
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; }
.cmp th, .cmp td { padding: 17px 20px; text-align: left; border-bottom: 1px solid var(--panel-hair-sub); }
/* Scoped to tbody: the thead holds a single row, so an unscoped :last-child
   here also matches the header row and strips the black rule under it. */
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th {
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--panel-ink);
  white-space: nowrap;
  padding-top: 22px;
  padding-bottom: 22px;
  background: var(--platinum-050);
  /* A solid black rule under the headings, splitting them off from the rows. */
  border-bottom: 2px solid var(--panel-ink);
}
.cmp thead th:first-child { width: 210px; }
/* The row labels down the left are headings too, so give them the same weight
   and a black rule separating them from the plan columns. */
.cmp tbody th {
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--panel-ink);
  border-right: 2px solid var(--panel-ink);
}
.cmp thead th:first-child { border-right: 2px solid var(--panel-ink); }
.cmp tbody td { font-size: 0.96rem; color: var(--panel-ink-mut); }
.cmp tbody td.yes { color: var(--panel-ink); font-weight: 600; }
.cmp tbody td.no { color: #9a9ca2; }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: rgba(10, 10, 11, 0.025); }
.cmp-hint { display: none; margin-top: 12px; text-align: center; font-size: 0.85rem; color: var(--text-dim); }

/* ============================================================
   Plan finder CTA band
   ============================================================ */
.finder-band {
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 130% at 50% 100%, rgba(169, 199, 228, 0.14), transparent 62%),
    radial-gradient(60% 120% at 50% 0%, rgba(220, 221, 224, 0.10), transparent 60%),
    var(--bg-elev);
  padding: 62px 32px;
  text-align: center;
}
.finder-band .lead { max-width: 620px; margin: 18px auto 32px; }
.finder-steps {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px;
  margin-top: 30px; color: var(--text-dim); font-size: 0.88rem;
}
.finder-steps span { display: inline-flex; align-items: center; gap: 8px; }
.finder-steps span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--plat-4); }

/* ============================================================
   Plan finder quiz — steps
   (reuses .quiz-page / .quiz-bars / .option-card / .selection-circle)
   ============================================================ */
.pq-step { display: none; }
.pq-step.active { display: block; animation: fade-in 0.28s var(--ease); }
.pq-back {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--text-dim); font-size: 13px; font-weight: 500; transition: color 0.2s;
}
.pq-back:hover { color: var(--text); }

/* Result — a single-column version of the panel */
.plan-panel.single .plan-grid { grid-template-columns: 1fr; grid-template-rows: none; }
.plan-panel.single .plan-col { border-left: 0; display: block; grid-row: auto; grid-template-rows: none; }
.plan-panel.single .plan-head { padding: 40px 40px 0; }
.plan-panel.single .plan-pitch { padding: 18px 40px 0; }
.plan-panel.single .plan-inclusions { padding: 28px 40px 0; }
.plan-panel.single .pq-why { margin: 24px 40px 40px; }
.pq-verdict {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--panel-ink-dim); margin-bottom: 16px;
}
.pq-why {
  margin: 22px 0 0;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid var(--panel-hair);
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.99rem;
  line-height: 1.62;
  color: var(--panel-ink-mut);
}
.pq-form-wrap { max-width: 620px; margin: 34px auto 0; }
.pq-alt { text-align: center; margin-top: 26px; }
.pq-alt a { color: var(--text-mut); font-size: 0.92rem; border-bottom: 1px solid var(--hair-strong); padding-bottom: 2px; }
.pq-alt a:hover { color: var(--text); }

/* ============================================================
   Landing page: compact in-page pricing section
   ============================================================ */
.plan-band.compact .plan-band-head   { padding: 76px 0 44px; }
.plan-band.compact .plan-line        { font-size: 1.08rem; }
.plan-band.compact .plan-pitch       { padding-bottom: 46px; }
.plan-band.compact .plan-list        { gap: 12px; }
.plan-band.compact .plan-list li     { font-size: 0.92rem; }
.plan-band.compact .plan-grid        { padding-bottom: 80px; }
@supports not (grid-template-rows: subgrid) {
  .plan-band.compact .plan-line { min-height: 2.7em; }
  .plan-band.compact .plan-desc { min-height: 6.5em; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .simple-split { grid-template-columns: 1fr; }
  .flow-grid { grid-template-columns: 1fr; gap: 26px; }
  .flow-stage { --horizon: 220px; border-radius: 24px; margin-bottom: 44px; }
  .fit-band { grid-template-columns: 1fr; gap: 30px; padding: 40px 0; }
  /* Grid items default to min-width:auto, so one long chip would otherwise
     stretch the whole column past the edge of the screen. */
  .fit-band > *, .simple-split > * { min-width: 0; }
}
@media (max-width: 860px) {
  .plan-panel { border-radius: 24px; --horizon: 460px; --chrome: 240px; }
  /* On a phone the band itself steps back and each plan becomes its own white
     pill, carrying its own blue horizon, stacked down the dark page. */
  .plan-band, .plan-band.compact { background: none; }
  .plan-band::before { content: none; }
  .plan-band-inner { padding: 0 18px; }
  .plan-band-head, .plan-band.compact .plan-band-head { padding: 54px 0 28px; }
  .plan-band-title { color: var(--text); }
  .plan-band-lead  { color: var(--text-mut); }
  .plan-band .plan-grid, .plan-band.compact .plan-grid { row-gap: 20px; padding-bottom: 60px; }

  .plan-band .plan-col,
  .plan-band .plan-col:first-child {
    --horizon: 460px;
    position: relative;
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    background:
      linear-gradient(to top,
        var(--blue-300)                        0,
        #bed6ed        calc(var(--horizon) * 0.16),
        #d3e3f3        calc(var(--horizon) * 0.38),
        #e9f1fa        calc(var(--horizon) * 0.66),
        rgba(233, 241, 250, 0)     var(--horizon)),
      linear-gradient(180deg, #ffffff 0%, #fbfbfa 45%, var(--platinum-100) 100%);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  }
  /* Each pill gets its own chrome sweep across the top. */
  .plan-band .plan-col::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(112deg,
      rgba(154, 156, 162, 0)    0%,
      rgba(255, 255, 255, 0.95) 17%,
      rgba(148, 152, 160, 0.16) 30%,
      rgba(255, 255, 255, 0.92) 43%,
      rgba(148, 152, 160, 0.11) 55%,
      rgba(255, 255, 255, 0.85) 67%,
      rgba(148, 152, 160, 0.17) 79%,
      rgba(255, 255, 255, 0.70) 90%,
      rgba(154, 156, 162, 0)   100%);
    opacity: 0.85;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 170px, transparent 340px);
            mask-image: linear-gradient(180deg, #000 0, #000 170px, transparent 340px);
  }
  .plan-band .plan-col > * { position: relative; z-index: 1; }

  .plan-band .plan-head       { padding: 32px 26px 0; }
  .plan-band .plan-pitch      { padding: 16px 26px 0; }
  .plan-band .plan-cta        { padding: 24px 26px 0; }
  .plan-band .plan-inclusions { padding: 28px 26px 34px; }
  .plan-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .plan-col {
    display: block;
    grid-row: auto;
    grid-template-rows: none;
    border-left: 0;
    border-top: 1px solid var(--panel-hair);
  }
  .plan-col:first-child { border-top: 0; }
  .plan-head       { padding: 36px 28px 0; }
  .plan-pitch      { padding: 16px 28px 0; }
  .plan-cta        { padding: 24px 28px 0; }
  .plan-inclusions { padding: 28px 28px 38px; }
  .plan-line, .plan-desc { min-height: 0; }
  .cmp-hint { display: block; }
  .finder-band { padding: 46px 24px; }
}
@media (max-width: 560px) {
  .plan-head       { padding: 30px 22px 0; }
  .plan-pitch      { padding: 14px 22px 0; }
  .plan-cta        { padding: 20px 22px 0; }
  .plan-inclusions { padding: 24px 22px 32px; }
  .plan-panel.single .plan-head { padding: 30px 22px 0; }
  .plan-panel.single .plan-pitch { padding: 14px 22px 0; }
  .plan-panel.single .plan-inclusions { padding: 24px 22px 0; }
  .plan-panel.single .pq-why { margin: 20px 22px 32px; }
  .simple-card { padding: 30px 24px 28px; }
  .fit-side { padding: 26px 22px; }
  /* The longest trade names have to be allowed to wrap on a phone. */
  .chip { white-space: normal; }
  /* The extra Pricing button pushes the header over the edge of a small
     phone, so tighten the header buttons up. */
  .site-header .header-cta { gap: 6px; }
  .site-nav { margin-left: auto; margin-right: 12px; gap: 14px; }
  .site-header .btn { padding: 10px 12px; font-size: 0.8rem; }
  .site-header .brand { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .pq-step.active { animation: none; }
  .fit-card:hover { transform: none; }
}

/* Shown on the contact page when someone arrives from a plan card. */
.plan-note-line {
  margin-bottom: 20px;
  padding: 13px 16px;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--plat-3);
  border-radius: 12px;
  background: var(--bg-elev);
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 600;
}
/* An outlined counterpart to .btn-ink, for the light band. */
.btn-ink-outline {
  background: rgba(10, 10, 11, 0.06);
  color: var(--panel-ink);
  border-color: transparent;
}
.btn-ink-outline:hover { background: rgba(10, 10, 11, 0.11); border-color: transparent; }
.btn-ink-outline:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10, 10, 11, 0.3); }

/* The pair of buttons sitting under the plans inside the band. */
.band-cta { position: relative; z-index: 1; padding-bottom: 84px; margin-top: -40px; }
@media (max-width: 860px) { .band-cta { padding-bottom: 56px; margin-top: -30px; } }
/* ============================================================
   REDESIGN 2026-08 — light system, handoff-style hero,
   coded app UI mockups, Book a review.
   Tokens transcribed from the product design system
   (tooling/tailwind/brand.css). Blue is atmosphere, never a fill.
   ============================================================ */

:root {
  /* Product interface tokens */
  --ink:          #000000;
  --ink-soft:     #3B3B3B;
  --ink-on:       #E2E2E2;   /* text/icons on black — platinum, never pure white */
  --paper:        #F9F9F9;
  --paper-lift-1: #F3F3F3;
  --paper-lift-2: #E8E8E8;
  --pure:         #ffffff;
  --hair-light:   rgba(198, 198, 198, 0.2);
  --shadow-ambient: 0 20px 40px rgba(0, 0, 0, 0.06);
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --grad-horizon: linear-gradient(180deg, #ffffff 0%, #f2f2f0 42%, #e4eef8 72%, #a9c7e4 100%);
  --grad-horizon-soft: linear-gradient(180deg, #ffffff 0%, #fafaf9 55%, #f4f8fc 82%, #cbdff1 100%);
  --grad-stage: radial-gradient(ellipse 90% 75% at 50% 30%, #ffffff 0%, #f2f2f0 45%, #e4eef8 78%, #a9c7e4 100%);
  --grad-bloom: radial-gradient(circle at 50% 50%, rgba(169,199,228,0.55) 0%, rgba(169,199,228,0.2) 35%, rgba(169,199,228,0) 70%);
  --grad-hero-band: linear-gradient(180deg, #000000 0%, #161616 34%, #2c2c2c 58%, #5c5a54 78%, #a8a59c 91%, #f9f9f9 100%);
}

/* ============================================================
   Light / dark section system.
   The body stays dark (quiz pages etc. untouched); index and
   book-a-review opt sections in explicitly.
   ============================================================ */
.sec-light {
  background: var(--paper);
  color: var(--panel-ink);
}
.sec-light--horizon { background: var(--grad-horizon-soft); }
/* Panel sits high in the band so the money-on-clouds artwork shows below it. */
.sec-light--plan { padding-top: 72px; padding-bottom: 260px; }
@media (max-width: 860px) { .sec-light--plan { padding-top: 56px; padding-bottom: 180px; } }

/* Time-and-money artwork behind the review band under a paper veil — no blue horizon. */
.sec-light--plan {
  background:
    linear-gradient(180deg, rgba(249,249,249,0.95) 0%, rgba(249,249,249,0.55) 50%, rgba(249,249,249,0.18) 100%),
    url('../assets/review-time-money.webp') center bottom / cover no-repeat #f9f9f9;
}
.sec-light--stage   { background: var(--grad-stage); }
.sec-dark {
  background: #050506;
  color: var(--text);
}

.sec-light .h-lg, .sec-light .h-md, .sec-light h2, .sec-light h3, .sec-light h4 { color: var(--panel-ink); }
.sec-light .lead { color: var(--panel-ink); }
/* Review promo: black panel over the artwork — heading left, copy + CTA right. */
.review-band {
  background: #0a0a0b;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5.5vw, 68px);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(30px, 4.5vw, 64px);
  align-items: center;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}
.review-band .h-lg { color: var(--text); text-align: left; }
/* Must out-rank .sec-light .platinum, which flattens gradient text to ink. */
.sec-light .review-band .platinum {
  background: var(--plat-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.review-band-body p { color: rgba(255, 255, 255, 0.88); line-height: 1.7; font-size: 1.03rem; }
.review-band-body p + p { margin-top: 14px; }
.review-band-btn {
  margin-top: 26px;
  background: #ffffff;
  color: #0a0a0b;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}
.review-band-btn:hover { background: #ffffff; color: #0a0a0b; transform: translateY(-1px); }
@media (max-width: 860px) {
  .review-band { grid-template-columns: 1fr; padding: 34px 26px; }
  .review-band .h-lg { text-align: center; }
  .review-band-btn { display: flex; justify-content: center; }
}
.sec-light .eyebrow { color: var(--panel-ink-dim); }
.sec-light .muted { color: var(--panel-ink-mut); }
/* Metallic text is illegible on paper — drop to plain ink in light sections. */
.sec-light .platinum {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--panel-ink);
}
.sec-light .btn-ghost {
  background: rgba(10, 10, 11, 0.06);
  color: var(--panel-ink);
  border-color: transparent;
}
.sec-light .btn-ghost:hover { background: rgba(10, 10, 11, 0.11); border-color: transparent; }

/* Cards / stats / forms / FAQ on paper */
.sec-light .stat {
  background: var(--pure);
  border: 1px solid var(--hair-light);
  box-shadow: none;
  transition: box-shadow 0.2s var(--ease);
}
.sec-light .stat:hover { box-shadow: var(--shadow-ambient); }
.sec-light .stat .num {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--panel-ink);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.sec-light .stat .cap { color: var(--panel-ink); }

.sec-light .step-media { border-color: var(--hair-light); box-shadow: var(--shadow-ambient); background: var(--pure); }
.sec-light .step-num { color: var(--panel-ink-dim); }
.sec-light .step-body p { color: var(--panel-ink); }

.sec-light .tag { border-color: rgba(10,10,11,0.16); background: var(--pure); color: var(--panel-ink); }
.sec-light .tag::before { background: var(--panel-ink); box-shadow: none; }
.sec-light .tag:hover { background: var(--paper-lift-1); border-color: var(--panel-ink); }

.sec-light .spec { border-color: var(--hair-light); background: var(--pure); }
.sec-light .spec-row { border-bottom-color: rgba(10,10,11,0.06); }
.sec-light .spec-row:hover { background: var(--paper-lift-1); }
.sec-light .spec-tick { background: var(--ink); box-shadow: none; }
.sec-light .spec-tick svg { stroke: var(--ink-on); }
.sec-light .spec-row p { color: var(--panel-ink-mut); }

.sec-light .contact-card { background: var(--pure); border-color: var(--hair-light); box-shadow: var(--shadow-ambient); }
.sec-light .field label { color: var(--panel-ink-dim); }
.sec-light .field input, .sec-light .field textarea {
  background: var(--paper);
  border-color: rgba(10,10,11,0.14);
  color: var(--panel-ink);
}
.sec-light .field input::placeholder, .sec-light .field textarea::placeholder { color: var(--panel-ink-dim); }
.sec-light .field input:focus, .sec-light .field textarea:focus {
  border-color: var(--panel-ink);
  box-shadow: 0 0 0 3px rgba(10,10,11,0.08);
}
.sec-light .form-status.success { background: rgba(22,163,74,0.1); color: #15803d; border-color: rgba(22,163,74,0.3); }
.sec-light .form-status.error { background: rgba(239,68,68,0.08); color: #b91c1c; border-color: rgba(239,68,68,0.3); }

.sec-light .faq { background: var(--pure); border-color: var(--hair-light); }
.sec-light .faq summary { color: var(--panel-ink); }
.sec-light .faq .chev { stroke: var(--panel-ink-dim); }
.sec-light .faq .faq-body { color: var(--panel-ink); }

.sec-light .btn-platinum { box-shadow: 0 6px 24px rgba(10,10,11,0.10), inset 0 1px 0 rgba(255,255,255,0.7); }

/* Original benefits + signup sections on paper */
.sec-light .feature-card { background: var(--pure); border-color: var(--hair-light); }
.sec-light .feature-card:hover { background: var(--pure); border-color: rgba(10,10,11,0.25); transform: translateY(-3px); }
.sec-light .feature-card .ic { background: var(--paper-lift-1); border-color: transparent; }
.sec-light .feature-card .ic .material-symbols-outlined { color: var(--panel-ink); }
.sec-light .feature-card p { color: var(--panel-ink-mut); }
.sec-light .signup::before { background: rgba(10,10,11,0.12); }
.sec-light .signup-num { background: var(--ink); color: var(--ink-on); box-shadow: none; }
.sec-light .signup-step p { color: var(--panel-ink-mut); }

/* Trustband gets hairline separators so it reads deliberate between light sections */
.trustband { border-top: 1px solid rgba(10,10,11,0.07); border-bottom: 1px solid rgba(10,10,11,0.07); }

/* ============================================================
   Header — hamburger nav (js/nav.js toggles body.nav-open)
   ============================================================ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 8px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle i {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
body.nav-open .nav-toggle i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .nav-toggle i:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .site-header .wrap { justify-content: space-between; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(10, 10, 11, 0.97);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--hair-soft);
    padding: 8px 18px 18px;
  }
  .site-nav a { padding: 15px 6px; border-bottom: 1px solid var(--hair-soft); font-size: 1.05rem; }
  .site-nav a.btn { border-bottom: none; }
  .site-nav .btn { margin-top: 16px; width: 100%; border-bottom: none; padding: 15px 24px; }
  body.nav-open .site-nav { display: flex; }
  .header-cta .btn-review-cta { display: inline-flex; padding: 11px 16px; font-size: 0.8rem; }
  .site-header .header-cta { margin-left: auto; margin-right: 6px; }
}

@media (min-width: 761px) {
  /* true vertical centre: links drop the underline padding, hover uses
     text-decoration instead, so text and pill share one centreline */
  .site-nav { align-items: center; }
  .site-nav a { padding-bottom: 0; border-bottom: 0; }
  .site-nav a:hover, .site-nav a.is-current { text-decoration: underline; text-underline-offset: 5px; }
  .site-nav a.btn {
    display: inline-flex;
    width: auto;
    padding: 11px 18px;
    font-size: 0.85rem;
    margin-left: 8px;
    text-decoration: none;
  }
  .site-nav a.btn:hover { text-decoration: none; }
  .site-header .header-cta .btn-review-cta { display: none; }
}

/* ============================================================
   Hero — light, horizon, coded UI composite
   ============================================================ */
.hero-light {
  position: relative;
  overflow: hidden;
  padding: 96px 0 96px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 260px);
}
.hero-light::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 430px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(169, 199, 228, 0) 0%,
    rgba(228, 238, 248, 0.5) 32%,
    rgba(203, 223, 241, 0.85) 58%,
    #a9c7e4 80%,
    #cfe0f1 92%,
    #f9f9f9 100%);
}
.hero-light .hero-head { max-width: 900px; margin: 0 auto; position: relative; z-index: 3; }
.hero-light .wrap { z-index: 4; }
.hero-light .h-xl {
  color: var(--panel-ink);
  margin-bottom: 24px;
}
.hero-light .lead { max-width: 640px; margin: 0 auto 34px; color: var(--panel-ink); }
.hero-light .cta-row { justify-content: center; margin-bottom: 26px; }
.hero-light .cta-row .btn-ink { box-shadow: 0 16px 38px rgba(10, 10, 11, 0.32); }
.hero-light .cta-row .btn-ink:hover { box-shadow: 0 20px 46px rgba(10, 10, 11, 0.38); }
.hero-light .cta-row .btn-ink-outline { background: var(--pure); box-shadow: 0 12px 30px rgba(10, 10, 11, 0.14); }

/* The stage the mockups float on */
.hero-stagewrap {
  position: relative;
  max-width: 1220px;
  margin: -128px auto 0;
  padding: 26px 24px 0;
}
.hero-plans {
  position: absolute;
  inset: -20px 0 0 0;
  width: 100%;
  height: 105%;
  z-index: 0;
  pointer-events: none;
  color: var(--ink);
  opacity: 0.55;
}
.hero-composite {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 1080px;
}

/* ---- Browser window mock ---- */
.browser-mock {
  position: relative;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 30px 80px -30px rgba(10, 20, 40, 0.22), var(--shadow-ambient);
  overflow: hidden;
  text-align: left;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,0.55) 80%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,0.55) 80%, transparent 98%);
}
.bm-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  background: var(--pure);
  border-bottom: 1px solid var(--hair-light);
  position: relative;
}
.bm-dots { display: flex; gap: 7px; }
.bm-dots i { width: 11px; height: 11px; border-radius: 50%; background: #E3E3E1; display: block; }
.bm-url {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 30px;
  border-radius: 999px;
  background: var(--paper-lift-1);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Fixed internal canvas, scaled by js/hero.js via --bm-scale */
.bm-viewport { overflow: hidden; }
.bm-canvas {
  width: 1080px;
  height: 700px;
  transform: scale(var(--bm-scale, 1));
  transform-origin: top left;
  display: grid;
  grid-template-columns: 232px 1fr;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

/* Sidebar */
.bm-side {
  background: var(--pure);
  border-right: 1px solid var(--hair-light);
  display: flex;
  flex-direction: column;
  padding: 64px 12px 16px;
}
.bm-logo { display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; }
.bm-logo-tile {
  width: 30px; height: 30px; border-radius: 7px; overflow: hidden; background: #000;
  flex-shrink: 0;
}
.bm-logo-tile img { width: 100%; height: 100%; object-fit: cover; }
.bm-logo b { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }
.bm-new {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border-radius: 12px;
  background: var(--ink); color: var(--ink-on);
  font-size: 14px; font-weight: 600; letter-spacing: -0.1px;
  margin-bottom: 10px;
}
.bm-search {
  display: flex; align-items: center; gap: 8px;
  height: 34px; border-radius: 10px; padding: 0 10px;
  background: var(--paper-lift-1); color: var(--ink-soft);
  font-size: 12px; margin-bottom: 12px;
}
.bm-search .bm-kbd { margin-left: auto; font-size: 10px; color: rgba(59,59,59,0.7); font-family: var(--font-display); }
.bm-nav { display: flex; flex-direction: column; gap: 3px; }
.bm-nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 37px; border-radius: 10px; padding: 0 10px;
  font-size: 13px; color: var(--ink-soft);
}
.bm-nav-item.active { background: var(--paper-lift-1); color: var(--ink); font-weight: 600; }
.bm-side-foot {
  margin-top: auto;
  border-top: 1px solid var(--hair-light);
  padding-top: 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.bm-side-mail { padding: 8px 10px 2px; font-size: 11px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-ic { width: 15px; height: 15px; flex-shrink: 0; }
.bm-ic svg { width: 100%; height: 100%; display: block; }

/* Main */
.bm-main { position: relative; overflow: hidden; }
.bm-main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 420px;
  background: var(--grad-horizon);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  pointer-events: none;
}
.bm-content { position: relative; max-width: 660px; margin: 0 auto; padding: 104px 28px 0; }
.bm-h1 {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 22px;
}
.bm-composer {
  background: var(--pure);
  border-radius: 12px;
  padding: 10px;
  box-shadow: var(--shadow-ambient);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bm-circle {
  width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
  background: var(--paper-lift-1);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.bm-circle.dark { background: var(--ink); color: var(--ink-on); }
.bm-composer-text { flex: 1; font-size: 14.5px; color: rgba(59,59,59,0.7); text-align: left; }
.bm-helper {
  display: flex; align-items: center; gap: 7px;
  margin-top: 10px; font-size: 11.5px; color: var(--ink-soft);
}
.bm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.bm-card {
  background: var(--pure); border-radius: 12px; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.bm-card-l { display: flex; align-items: center; gap: 10px; }
.bm-bubble {
  width: 30px; height: 30px; border-radius: 999px; background: var(--paper-lift-1);
  display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0;
}
.bm-card b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }
.bm-arrow { color: var(--ink-soft); }
.bm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.bm-stat { background: var(--pure); border-radius: 12px; padding: 14px 18px 12px; }
.bm-stat-label { font-size: 9.5px; letter-spacing: 1px; font-weight: 500; text-transform: uppercase; color: var(--ink-soft); }
.bm-stat-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 24px; line-height: 1.15; letter-spacing: -0.5px; font-weight: 700; color: var(--ink);
  margin-top: 2px;
}
.bm-stat-hint { font-size: 10.5px; color: var(--ink-soft); margin-top: 1px; }
.bm-recent-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 20px 0 10px;
}
.bm-recent-head b { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink); }
.bm-recent-head span { font-size: 11px; color: var(--ink-soft); }
.bm-row {
  background: var(--pure); border-radius: 12px; padding: 15px 18px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.bm-row-title { font-size: 14px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }
.bm-row-sub { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }
.bm-row-r { display: flex; align-items: center; gap: 12px; }
.bm-money { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.bm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 5px 10px;
  font-size: 10.5px; font-weight: 500;
  background: var(--paper-lift-1); color: var(--ink);
}
.bm-badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); display: block; }
.bm-badge.pos { background: var(--ink); color: var(--ink-on); }
.bm-badge.pos i { background: var(--ink-on); }

/* ---- Phone mock ---- */
.phone-mock {
  position: absolute;
  right: -14px;
  bottom: -30px;
  z-index: 2;
  width: 288px;
  text-align: left;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,0.6) 84%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,0.6) 84%, transparent 99%);
}
.pm-screen {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: var(--paper);
  height: 568px;
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 80px -28px rgba(0, 0, 0, 0.45);
}
.pm-band {
  position: absolute;
  inset: 0 0 auto 0;
  height: 368px;
  background: var(--grad-hero-band);
  pointer-events: none;
}
.pm-top {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px 20px 0;
}
.pm-brand { display: flex; align-items: center; gap: 7px; }
.pm-brand img { width: 30px; height: 19px; object-fit: contain; display: block; }
.pm-brand b { font-size: 13px; font-weight: 700; letter-spacing: -0.2px; color: #fff; }
.pm-burger { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pm-burger i { width: 18px; height: 2.2px; border-radius: 1.5px; background: #fff; display: block; }
.pm-greet {
  position: relative;
  padding: 24px 20px 0;
  font-size: 29px;
  line-height: 1.09;
  letter-spacing: -0.7px;
  font-weight: 700;
  color: #fff;
}
.pm-hero-tile {
  position: relative;
  margin: 24px 16px 0;
  border-radius: 12px;
  background: #000;
  padding: 15px;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.pm-hero-tile::after {
  /* shimmer sweep */
  content: "";
  position: absolute;
  top: -20px; bottom: -20px;
  left: -80px;
  width: 60px;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 35%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.18) 65%, transparent);
  animation: pm-shimmer 6.2s var(--ease) infinite;
}
@keyframes pm-shimmer {
  0%   { transform: translateX(0) rotate(18deg); }
  22%  { transform: translateX(420px) rotate(18deg); }
  100% { transform: translateX(420px) rotate(18deg); }
}
.pm-tile-top { display: flex; align-items: flex-start; justify-content: space-between; }
.pm-zap {
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-on);
}
.pm-go {
  width: 24px; height: 24px; border-radius: 999px; background: #fff;
  display: flex; align-items: center; justify-content: center; color: #000;
}
.pm-tile-title { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; color: #fff; }
.pm-tile-sub { font-size: 10.5px; line-height: 1.45; color: rgba(226,226,226,0.6); margin-top: 2px; }
.pm-tiles { position: relative; display: flex; gap: 10px; margin: 10px 16px 0; }
.pm-tile {
  flex: 1; aspect-ratio: 1; border-radius: 12px; background: var(--paper-lift-2);
  padding: 11px; display: flex; flex-direction: column; justify-content: space-between;
}
.pm-tile-ic {
  width: 27px; height: 27px; border-radius: 999px; background: #fff;
  display: flex; align-items: center; justify-content: center; color: #000;
}
.pm-tile b { font-size: 12.5px; font-weight: 600; letter-spacing: -0.2px; color: #000; line-height: 1.25; }
.pm-input-row {
  position: relative;
  margin-top: auto;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 16px 16px;
}
.pm-pill {
  flex: 1; height: 40px; border-radius: 999px; background: var(--paper-lift-2);
  display: flex; align-items: center; padding: 0 15px;
  font-size: 11px; color: var(--ink-soft);
  overflow: hidden; white-space: nowrap;
}
.pm-caret { display: inline-block; width: 1px; height: 13px; background: var(--ink-soft); margin-left: 2px; animation: pm-blink 1s steps(1) infinite; }
@keyframes pm-blink { 50% { opacity: 0; } }
.pm-mic, .pm-plus { color: #000; flex-shrink: 0; display: flex; }

/* The blue veil washing over the lower part of the composite */


/* Composite responsiveness */
@media (max-width: 900px) {
  .phone-mock { right: -6px; bottom: -22px; width: 258px; }
  .pm-screen { height: 520px; }
}
@media (max-width: 720px) {
  /* Phones keep the same composite as desktop: the web app view with the
     phone sitting over it. The phone's insides are fixed px, so it is
     scaled rather than narrowed, which would wreck its layout. */
  .hero-stagewrap { margin-top: 8px; padding-top: 10px; }
  .phone-mock {
    right: -10px; bottom: -14px;
    width: 288px;
    transform: scale(0.52);
    transform-origin: bottom right;
  }
  .pm-screen { height: 568px; }
}

/* ============================================================
   "AI that doesn't do half the job" — black band + timeline
   ============================================================ */
.halfjob-band { position: relative; overflow: hidden; }
.halfjob-band::before {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(180deg, rgba(36,68,106,0) 0%, rgba(36,68,106,0.35) 100%);
  pointer-events: none;
}
.timeline { list-style: none; counter-reset: tl; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; max-width: 1040px; margin: 56px auto 0; }
.timeline li { position: relative; padding: 0 18px; text-align: center; }
.timeline li::before {
  content: "";
  position: absolute; top: 10px; left: 0; right: 0; height: 2px;
  background: rgba(226,226,226,0.18);
}
.timeline li:first-child::before { left: 50%; }
.timeline li:last-child::before { right: 50%; }
.tl-dot {
  position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  margin: 0 auto 18px;
  background: #0a0a0b;
  border: 2px solid var(--ink-on);
  display: flex; align-items: center; justify-content: center;
}
.tl-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-on); display: block; }
.timeline .tl-time {
  display: block;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--plat-3); margin-bottom: 8px; text-transform: uppercase;
}
.timeline h4 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; color: #ffffff; margin-bottom: 6px; }
.timeline p { font-size: 0.88rem; color: #ffffff; line-height: 1.5; }
.timeline li.tl-end .tl-dot { background: var(--ink-on); border-color: var(--ink-on); }
.timeline li.tl-end .tl-dot i { background: #0a0a0b; }
@media (max-width: 860px) {
  .timeline { grid-template-columns: 1fr; gap: 26px; max-width: 420px; }
  .timeline li { text-align: left; padding: 0 0 0 44px; }
  .timeline li::before { top: 22px; bottom: -26px; left: 10px; right: auto; width: 2px; height: auto; }
  .timeline li:first-child::before { top: 22px; left: 10px; }
  .timeline li:last-child::before { display: none; }
  .tl-dot { position: absolute; left: 0; top: 0; margin: 0; }
}

/* ============================================================
   Pain section
   ============================================================ */
/* The whole pain section sits in a black inside-band on the light page. */
.pain-band {
  background: #050506;
  border-radius: var(--radius-lg);
  padding: clamp(44px, 6vw, 76px) clamp(24px, 5vw, 64px);
  box-shadow: var(--shadow-ambient);
}
.pain-band .sec-head { margin-bottom: 44px; }
.pain-band .h-lg { color: var(--text); }
.pain-band .platinum {
  background: var(--plat-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pain-band .pain-copy p { color: var(--text); }
/* Stats-only layout: three cards across the band, stacked on mobile. */
.pain-band .pain-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1040px;
  margin: 0 auto;
}
@media (max-width: 860px) { .pain-band .pain-stats { grid-template-columns: 1fr; } }
.pain-band .pain-stat {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: none;
}
@media (max-width: 860px) { .pain-band .sec-head { margin-bottom: 30px; } }

.pain-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; max-width: 1040px; margin: 0 auto; }
.pain-copy p { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.55; color: var(--panel-ink); font-weight: 600; letter-spacing: -0.01em; }
.pain-copy p + p { margin-top: 18px; color: var(--panel-ink); font-weight: 500; font-size: clamp(1rem, 1.5vw, 1.15rem); }
.pain-stats { display: flex; flex-direction: column; gap: 14px; }
.pain-stat { background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 16px; padding: 26px 28px; box-shadow: var(--shadow-ambient); }
.pain-stat b { display: block; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; background: var(--plat-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pain-stat span { color: var(--text-mut); font-size: 0.98rem; }
@media (max-width: 860px) { .pain-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ============================================================
   Structure explainer (Simple by design. Complex back end.)
   ============================================================ */
.structure-band {
  border-radius: var(--radius-lg);
  background: var(--pure);
  border: 1px solid var(--hair-light);
  box-shadow: var(--shadow-ambient);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}
.structure-band h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--panel-ink); margin-bottom: 16px; }
.structure-band p { color: var(--panel-ink); line-height: 1.65; font-size: 1.05rem; }
.structure-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.structure-list li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; color: var(--panel-ink); font-size: 1rem; line-height: 1.55; }
.structure-list .plan-tick { width: 26px; height: 26px; background: var(--ink); border: 0; margin-top: 1px; }
.structure-list .plan-tick svg { stroke: var(--ink-on); width: 12px; height: 12px; }
@media (max-width: 860px) { .structure-band { grid-template-columns: 1fr; padding: 36px 26px; gap: 28px; } }

/* ============================================================
   Mission band (light)
   ============================================================ */
.sec-light .about-band {
  background: var(--pure);
  border-color: var(--hair-light);
  box-shadow: var(--shadow-ambient);
}
.sec-light .about-band .about-copy p { color: var(--panel-ink-mut); }
.sec-light .about-rule { background: rgba(10,10,11,0.18); }

/* ============================================================
   Book a review page — quiz panel (.rq-*, fully separate from
   plan-quiz's .pq-* and quiz.js's .option-radio system)
   ============================================================ */
.review-hero { padding-bottom: 26px; }
.rq-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px 96px; position: relative; z-index: 1; }
.rq-panel {
  --horizon: 420px;
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(to top,
      var(--blue-300) 0,
      #cbdff1 calc(var(--horizon) * 0.28),
      #e9f1fa calc(var(--horizon) * 0.62),
      rgba(233, 241, 250, 0) var(--horizon)),
    linear-gradient(180deg, #ffffff 0%, #fbfbfa 45%, var(--platinum-100) 100%);
  border: 1px solid rgba(10, 10, 11, 0.10);
  box-shadow: var(--shadow-ambient), 0 40px 90px -40px rgba(10, 20, 40, 0.35);
  padding: 44px 44px 48px;
}
.rq-progress-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
.rq-progress-head span { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--panel-ink-dim); }
.rq-bars { display: flex; gap: 8px; height: 4px; margin-bottom: 36px; }
.rq-bars i { flex: 1; border-radius: 999px; background: rgba(10, 10, 11, 0.10); transition: background 0.3s var(--ease); }
.rq-bars i.on { background: var(--panel-ink); }

.rq-step { display: none; }
.rq-step.active { display: block; animation: fade-in 0.28s var(--ease); }
.rq-q { text-align: center; margin-bottom: 28px; }
.rq-q h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--panel-ink); }
.rq-q p { color: var(--panel-ink-mut); margin-top: 10px; }

.rq-options { display: flex; flex-direction: column; gap: 12px; }
.rq-opt { position: relative; display: block; cursor: pointer; }
.rq-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rq-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(10, 10, 11, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.12s var(--ease);
}
.rq-opt:hover .rq-card { border-color: var(--panel-ink); background: #ffffff; }
.rq-opt:active .rq-card { transform: scale(0.995); }
.rq-ring {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(10, 10, 11, 0.28);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}
.rq-card span:last-child { font-weight: 600; font-size: 1.02rem; color: var(--panel-ink); }
.rq-opt input:checked ~ .rq-card, .rq-opt.selected .rq-card { border-color: var(--panel-ink); background: #ffffff; }
.rq-opt input:checked ~ .rq-card .rq-ring, .rq-opt.selected .rq-card .rq-ring { border-color: var(--panel-ink); background: var(--panel-ink); }
.rq-opt input:checked ~ .rq-card .rq-ring::after, .rq-opt.selected .rq-card .rq-ring::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: #fff; display: block;
  animation: dot-pop 180ms ease-out;
}

.rq-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; }
.rq-nav.end { justify-content: flex-end; }
.rq-back {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--panel-ink-dim); font-size: 13px; font-weight: 600; transition: color 0.2s;
}
.rq-back:hover { color: var(--panel-ink); }
.rq-next[disabled] { opacity: 0.4; pointer-events: none; }

.rq-panel .field label { color: var(--panel-ink-dim); }
.rq-panel .field input {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(10, 10, 11, 0.16);
  color: var(--panel-ink);
}
.rq-panel .field input::placeholder { color: var(--panel-ink-dim); }
.rq-panel .field input:focus { border-color: var(--panel-ink); box-shadow: 0 0 0 3px rgba(10, 10, 11, 0.08); }
.rq-panel .field input.invalid { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12); }
.rq-thanks { text-align: center; padding: 12px 0; }
.rq-thanks h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 800; letter-spacing: -0.02em; color: var(--panel-ink); margin-bottom: 14px; }
.rq-thanks p { color: var(--panel-ink-mut); line-height: 1.65; max-width: 480px; margin: 0 auto 26px; }

/* What-happens-on-the-call cards on book-a-review */
.review-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1000px; margin: 0 auto; }
.review-point { background: var(--pure); border: 1px solid var(--hair-light); border-radius: 16px; padding: 28px 26px; text-align: left; }
.review-point .rp-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--ink-on); font-weight: 800; font-size: 0.9rem; font-family: var(--font-display); margin-bottom: 16px; }
.review-point h4 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; color: var(--panel-ink); margin-bottom: 8px; }
.review-point p { color: var(--panel-ink-mut); font-size: 0.96rem; line-height: 1.6; }
@media (max-width: 860px) {
  .review-points { grid-template-columns: 1fr; }
  .rq-panel { padding: 30px 22px 36px; border-radius: 22px; }
}

/* ============================================================
   Reduced motion for the new pieces
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pm-hero-tile::after { animation: none; display: none; }
  .pm-caret { animation: none; }
  .rq-step.active { animation: none; }
}

/* ============================================================
   Step visuals — coded web app UI slices (fixed canvas, scaled
   by js/hero.js like the hero browser mock)
   ============================================================ */
.ui-mini { overflow: hidden; position: relative; }
.ui-mini-canvas {
  width: 760px;
  height: 560px;
  transform: scale(var(--mini-scale, 1));
  transform-origin: top left;
  background: var(--paper);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  text-align: left;
  position: relative;
}
.mm-label { font-size: 11px; line-height: 14px; letter-spacing: 1px; font-weight: 500; text-transform: uppercase; color: var(--ink-soft); }
.mm-tabular { font-variant-numeric: tabular-nums; }

/* --- Mock 1: describe the job --- */
.mm-home::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 440px;
  background: var(--grad-horizon);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.mm-home-inner { position: relative; padding: 64px 56px 0; }
.mm-home-h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.8px; font-weight: 700; color: var(--ink); }
.mm-composer { margin-top: 30px; background: var(--pure); border-radius: 12px; padding: 12px; box-shadow: var(--shadow-ambient); }
.mm-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 4px 12px; }
.mm-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 6px 12px;
  background: var(--paper-lift-1); color: var(--ink); font-size: 13px;
}
.mm-pill svg { width: 13px; height: 13px; color: var(--ink-soft); }
.mm-composer-row { display: flex; align-items: center; gap: 8px; }
.mm-circle {
  width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
  background: var(--paper-lift-1); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.mm-circle.dark { background: var(--ink); color: var(--ink-on); }
.mm-composer-text { flex: 1; font-size: 16.5px; line-height: 1.5; color: var(--ink); padding: 4px 8px; }
.mm-caret { display: inline-block; width: 1.5px; height: 18px; background: var(--ink); vertical-align: -3px; margin-left: 1px; }
.mm-helper { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
.mm-helper svg { width: 15px; height: 15px; flex-shrink: 0; }

/* --- Mock 2: the workspace --- */
.mm-ws-head {
  background: var(--pure);
  border-bottom: 1px solid var(--hair-light);
  padding: 18px 24px 0;
}
.mm-ws-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mm-ws-title { font-size: 19px; line-height: 24px; letter-spacing: -0.2px; font-weight: 600; color: var(--ink); }
.mm-ws-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.mm-ws-actions { display: flex; align-items: center; gap: 10px; }
.mm-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px; border-radius: 12px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.mm-btn svg { width: 15px; height: 15px; }
.mm-btn.soft { background: var(--paper-lift-3); color: var(--ink); }
.mm-btn.ink { background: var(--ink); color: var(--ink-on); }
.mm-tabs { display: flex; gap: 4px; margin-top: 14px; }
.mm-tab { padding: 9px 16px; border-radius: 12px 12px 0 0; font-size: 13px; color: var(--ink-soft); }
.mm-tab.active { background: var(--paper); color: var(--ink); font-weight: 600; }
.mm-ws-body { display: flex; gap: 14px; padding: 16px 24px 0; }
.mm-ws-main { flex: 1; min-width: 0; }
.mm-card { background: var(--pure); border-radius: 12px; overflow: hidden; }
.mm-grid-head { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px 10px; }
.mm-grid-head b { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }
.mm-grid-head span { font-size: 16px; font-weight: 600; color: var(--ink); }
.mm-table { width: 100%; border-collapse: collapse; }
.mm-table th {
  font-size: 10px; letter-spacing: 1px; font-weight: 500; text-transform: uppercase;
  color: var(--ink-soft); text-align: left; padding: 7px 10px;
  border-top: 1px solid var(--hair-light); border-bottom: 1px solid var(--hair-light);
}
.mm-table th.num, .mm-table td.num { text-align: right; }
.mm-table th:first-child, .mm-table td:first-child { padding-left: 18px; }
.mm-table th:last-child, .mm-table td:last-child { padding-right: 18px; }
.mm-table td { font-size: 13px; color: var(--ink); padding: 9px 10px; border-bottom: 1px solid var(--hair-light); }
.mm-table tr:last-child td { border-bottom: 0; }
.mm-addline { display: flex; align-items: center; gap: 7px; padding: 10px 18px; font-size: 12.5px; color: var(--ink-soft); }
.mm-addline svg { width: 14px; height: 14px; }
.mm-rail { width: 212px; flex-shrink: 0; }
.mm-rail-card { background: var(--pure); border-radius: 12px; padding: 18px; }
.mm-rail-total { font-size: 26px; line-height: 32px; letter-spacing: -0.5px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.mm-rail-sub { font-size: 12.5px; color: var(--ink-soft); }
.mm-hr { border: 0; border-top: 1px solid var(--hair-light); margin: 14px 0; }
.mm-rail-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; margin-top: 10px; }
.mm-rail-row:first-of-type { margin-top: 0; }
.mm-rail-row .rr-l { color: var(--ink-soft); }
.mm-rail-row .rr-v { color: var(--ink); font-weight: 500; }
.mm-bar { display: block; height: 4px; width: 100%; border-radius: 999px; background: var(--paper-lift-2); margin-top: 5px; overflow: hidden; }
.mm-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ink); }

/* --- Rates-focused workspace state (Your rates capability tab) --- */
.mm-rate-hl {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(10, 10, 11, 0.07);
  box-shadow: inset 0 0 0 1px rgba(10, 10, 11, 0.12);
}
.mm-rate-hl.focus { background: var(--pure); box-shadow: 0 0 0 2px var(--ink); }
.mm-rail-card--rates { box-shadow: 0 0 0 2px var(--ink), 0 16px 34px rgba(0, 0, 0, 0.12); }
.mm-btn--block { display: flex; justify-content: center; margin-top: 16px; }

/* --- Mock 3: generate quote zoom --- */
.mm-gen-bg {
  position: absolute; inset: 0;
  padding: 26px 40px;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}
.mm-gen-bg .mm-row-ghost { height: 38px; border-bottom: 1px solid var(--hair-light); display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-soft); }
.mm-gen-focus {
  position: relative;
  max-width: 540px;
  margin: 72px auto 0;
  background: var(--pure);
  border-radius: 16px;
  padding: 32px 36px 30px;
  box-shadow: 0 30px 70px -25px rgba(10, 20, 40, 0.25), var(--shadow-ambient);
}
.mm-gen-total { font-size: 36px; line-height: 42px; letter-spacing: -0.8px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.mm-gen-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 62px; border-radius: 14px; margin-top: 22px;
  background: var(--ink); color: var(--ink-on);
  font-size: 19px; font-weight: 600; letter-spacing: -0.2px;
}
.mm-gen-btn svg { width: 21px; height: 21px; }
.mm-gen-banner {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; border-radius: 12px; padding: 12px 14px;
  background: var(--paper-lift-1); font-size: 13px; color: var(--ink);
}
.mm-gen-banner svg { width: 15px; height: 15px; flex-shrink: 0; }
.mm-gen-open {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 10px;
  background: var(--ink); color: var(--ink-on); font-size: 12px; font-weight: 600;
}


/* ============================================================
   White header (founder 2026-08-22: banner white, contrast flipped)
   ============================================================ */
.site-header {
  background: #ffffff;
  border-bottom: none;
}
@media (min-width: 761px) {
  .site-header .wrap { position: relative; }
  .site-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .site-header .header-cta { margin-left: auto; }
}
.site-header .brand-name { color: var(--panel-ink); }
.site-header .brand-mark { border-color: rgba(10, 10, 11, 0.1); }
.site-nav a { color: var(--panel-ink); }
.site-nav a:hover, .site-nav a.is-current { border-bottom-color: rgba(10, 10, 11, 0.55); }
.site-header .btn-platinum {
  background: #000000;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(10, 10, 11, 0.22);
}
.site-header .btn-platinum:hover { background: #26262a; box-shadow: 0 10px 28px rgba(10, 10, 11, 0.3); }
.nav-toggle i { background: var(--panel-ink); }
@media (max-width: 760px) {
  .site-nav {
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid rgba(10, 10, 11, 0.08);
  }
  .site-nav a { border-bottom: 1px solid rgba(10, 10, 11, 0.08); }
  .site-nav a:last-of-type { border-bottom: 1px solid rgba(10, 10, 11, 0.08); }
  .site-nav a.btn { border-bottom: none; }
}

/* ============================================================
   Engine band — inputs flow into the mark, capabilities flow out
   (founder-requested, modelled on the handoff.ai agent section)
   ============================================================ */
.engine-band {
  position: relative;
  overflow: hidden;
}
.engine-band::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(180deg, rgba(20, 20, 22, 0) 0%, rgba(154, 156, 162, 0.30) 100%);
  pointer-events: none;
}
.engine-band .wrap { position: relative; z-index: 1; }
.engine-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  max-width: 1140px;
  margin: 0 auto;
}
.engine-card {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 30px 20px 26px;
  text-align: center;
}
.engine-card .ec-ic {
  width: 44px; height: 44px; border-radius: 12px;
  margin: 0 auto 18px;
  border: 1px solid var(--hair);
  background: var(--bg-elev);
  display: flex; align-items: center; justify-content: center;
  color: var(--plat-2);
}
.engine-card .ec-ic svg { width: 20px; height: 20px; }
.engine-card h4 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin-bottom: 10px; }
.engine-card p { font-size: 0.94rem; line-height: 1.55; color: var(--text-mut); }

.engine-flow { position: relative; max-width: 1080px; margin: 0 auto; text-align: center; }
.engine-lines { display: block; width: 100%; height: 110px; }
.engine-lines path { fill: none; stroke: rgba(226, 226, 226, 0.14); stroke-width: 1.5; }
.engine-lines path.pulse {
  stroke: rgba(226, 226, 226, 0.9);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 28 640;
  stroke-dashoffset: 668;
  animation: line-flow 2.8s linear infinite;
  filter: drop-shadow(0 0 5px rgba(226, 226, 226, 0.7));
}
.engine-lines path.pulse.p2 { animation-delay: 0.5s; }
.engine-lines path.pulse.p3 { animation-delay: 1s; }
.engine-lines path.pulse.p4 { animation-delay: 1.5s; }
.engine-lines path.pulse.p5 { animation-delay: 2s; }
@keyframes line-flow { to { stroke-dashoffset: 0; } }
.engine-node {
  position: relative;
  width: 96px; height: 96px;
  margin: -6px auto 0;
  border-radius: 22px;
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 70px rgba(169, 199, 228, 0.28), 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}
.engine-node img { width: 100%; height: 100%; object-fit: cover; }
.engine-drop {
  width: 2px; height: 54px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(226, 226, 226, 0.55), rgba(226, 226, 226, 0.05));
  border-radius: 999px;
}
.engine-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px;
  max-width: 860px;
  margin: 10px auto 0;
}
.engine-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 21px;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.95rem; font-weight: 600; color: var(--text);
  white-space: nowrap;
}
.engine-chip svg { width: 15px; height: 15px; color: var(--plat-3); flex-shrink: 0; }
@media (max-width: 980px) {
  .engine-grid { grid-template-columns: 1fr 1fr; }
  .engine-lines { height: 70px; }
}
@media (max-width: 560px) {
  .engine-grid { grid-template-columns: 1fr; }
  .engine-lines { display: none; }
  .engine-node { margin-top: 26px; }
  .engine-chip { white-space: normal; }
}


/* Footer social links */
.social-links { display: flex; gap: 10px; align-items: center; }
.social-links a {
  width: 42px; height: 42px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.social-links a:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); }
.social-links svg { width: 19px; height: 19px; }



/* ============================================================
   Capability tabs (One system. Every job. Start to finish.)
   ============================================================ */
/* Underline tabs: one hairline across the row, the selected tab carries a
   thick ink rule sitting on it. No pills. */
.cap-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 1060px;
  margin: 0 auto 40px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(10, 10, 11, 0.13);
}
.cap-tab {
  border: 0; cursor: pointer; font-family: inherit;
  font-weight: 600; font-size: 1rem;
  padding: 14px 28px; border-radius: 0;
  background: transparent; color: var(--panel-ink-mut);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cap-tab:hover { color: var(--panel-ink); }
.cap-tab.active {
  background: transparent;
  color: var(--panel-ink);
  font-weight: 700;
  border-bottom-color: var(--ink);
  box-shadow: none;
}
.cap-panel { display: none; }
.cap-panel.active {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
  animation: fade-in 0.28s var(--ease);
}
.cap-copy h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; color: var(--panel-ink); margin-bottom: 14px; }
.cap-copy p { color: var(--panel-ink); line-height: 1.65; font-size: 1.05rem; }
.cap-copy p + p { margin-top: 14px; }
/* The whole copy column sits in one solid blue panel. */
.cap-copy {
  background: #cbdff1;
  border-radius: 22px;
  padding: 32px 30px;
}
@media (max-width: 860px) {
  .cap-copy { padding: 24px 20px; border-radius: 18px; }
  .cap-copy p { font-size: 1rem; }
  /* All three pills on one row instead of an awkward 2 + 1 wrap. */
  .cap-tabs { gap: 0; }
  .cap-tab { padding: 12px 8px; font-size: 0.84rem; white-space: nowrap; flex: 1; }
}
.cap-visual {
  background: var(--pure);
  border-radius: 20px;
  box-shadow: var(--shadow-ambient);
  padding: 26px;
  min-width: 0;
}

/* CTA sitting under the image inside each capability card */
/* min-width:0 or the fixed 760px mock canvas inside forces the column wide
   and crushes the copy panel beside it. */
.cap-col { display: flex; flex-direction: column; min-width: 0; }
.cap-cta { display: flex; width: fit-content; margin: 22px auto 0; }

/* Before/after renders floating over the proposal mock */
.cap-visual--proposal { position: relative; }
.cap-float {
  position: absolute;
  width: 36%;
  height: auto;
  border-radius: 12px;
  border: 3px solid #ffffff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30);
  z-index: 2;
}
.cap-float--left { left: -10px; top: 14%; transform: rotate(-4deg); }
.cap-float--right { right: -10px; bottom: 10%; transform: rotate(3deg); }

/* Plan scan visual */
.scan-stage { position: relative; }
.scan-stage svg { display: block; width: 100%; height: auto; }
.scan-stage img { display: block; width: 100%; height: auto; border-radius: 12px; }
.scan-line {
  position: absolute; left: 3%; right: 3%; top: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #24446a 30%, #24446a 70%, transparent);
  box-shadow: 0 0 12px rgba(36, 68, 106, 0.5);
  animation: scan-move 3.6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes scan-move { from { top: 6%; } to { top: 92%; } }
.scan-tag {
  position: absolute;
  background: var(--ink); color: #ffffff;
  border-radius: 999px; padding: 6px 12px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Rates visual */
.rate-card { max-width: 460px; margin: 0 auto; }
.rate-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; }
.rate-head b { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--panel-ink); }
.rate-head span { font-size: 0.8rem; color: var(--panel-ink-dim); }
.rate-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 13px 2px;
  border-top: 1px solid rgba(10, 10, 11, 0.08);
  font-size: 0.98rem;
}
.rate-row span { color: var(--panel-ink-mut); }
.rate-row b { color: var(--panel-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rate-foot {
  margin-top: 14px; padding: 10px 14px;
  border-radius: 10px; background: var(--paper-lift-1);
  font-size: 0.82rem; color: var(--panel-ink-dim);
}
.rate-foot b { color: var(--panel-ink-mut); }

/* Proposal / quote document visual */
.quote-doc { max-width: 440px; margin: 0 auto; border: 1px solid rgba(10, 10, 11, 0.08); border-radius: 12px; overflow: hidden; }
.qd-band {
  display: flex; align-items: center; justify-content: space-between;
  background: #000; color: #E2E2E2;
  padding: 14px 18px;
}
.qd-band .qd-brand { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }
.qd-band .qd-num { font-size: 0.72rem; letter-spacing: 0.14em; }
.qd-meta {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 18px;
  font-size: 0.78rem; line-height: 1.5; color: var(--panel-ink-mut);
  border-bottom: 2px solid #24446a;
}
.qd-line {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(10, 10, 11, 0.07);
  font-size: 0.88rem;
}
.qd-line span { color: var(--panel-ink); }
.qd-line b { color: var(--panel-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.qd-totals { padding: 12px 18px 16px; background: var(--platinum-050); }
.qd-totals > span { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 3px 0; }
.qd-totals i { font-style: normal; color: var(--panel-ink-mut); }
.qd-totals b { color: var(--panel-ink); font-variant-numeric: tabular-nums; }
.qd-totals .qd-grand { border-top: 1px solid rgba(10, 10, 11, 0.15); margin-top: 6px; padding-top: 9px; font-size: 0.95rem; }
.qd-totals .qd-grand b { font-weight: 800; }

@media (max-width: 860px) {
  .cap-panel.active { grid-template-columns: 1fr; gap: 28px; }
  .cap-visual { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-line { animation: none; display: none; }
  .engine-lines path.pulse { animation: none; display: none; }
}


/* ============================================================
   Plus Jakarta Sans for headings + sub-texts (founder pick).
   App UI mockups (.bm-/.pm-/.mm-/.rate-/.qd-) stay Inter on purpose.
   ============================================================ */
:root { --font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; }
.h-xl, .h-lg, .h-md, .lead,
.tb-heading, .plan-band-title, .plan-name, .plan-line,
.cap-copy h3, .structure-band h3, .pain-copy p,
.engine-card h4, .timeline h4, .cap-tab,
.quiz-q h1, .quiz-q h2, .rq-q h2, .result-head h1,
.start-card h2, .about-band h2 {
  font-family: var(--font-head);
}
.lead { letter-spacing: -0.005em; }

/* Capability tab breakdown lists */
.cap-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-top: 20px; }
.cap-list li {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
  color: var(--panel-ink); font-size: 0.97rem; line-height: 1.5;
}
.cap-list .plan-tick { width: 24px; height: 24px; background: var(--ink); border: 0; margin-top: 1px; }
.cap-list .plan-tick svg { stroke: #ffffff; width: 11px; height: 11px; }
/* The visual column gets more width and sticks alongside the copy, so the
   image reads at the same weight as the text instead of a small square
   stranded next to a tall panel. Cards keep their natural height — no
   stretched-out white space inside them. */
.cap-panel.active { align-items: start; }
/* Wider visual + sticky only from tablet up; below that the panel stacks. */
@media (min-width: 861px) {
  .cap-panel.active { grid-template-columns: 1fr 1.12fr; }
    .cap-col { position: sticky; top: 110px; }
}

/* ============================================================
   Review quiz (book-a-review) — same treatment as the standalone
   pricing-review LP: full-screen, all-square edges, black panel with
   the signal-blue horizon at its base, platinum selected option.
   ============================================================ */
#rq-quiz {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: #0a0a0b;
  padding: 48px 0;
}
/* The id rule above outranks the browser's own [hidden] rule, so the section
   would sit open on page load without this. */
#rq-quiz[hidden] { display: none !important; }
/* Once the quiz opens it IS the page: the explainer above it steps aside so
   the questionnaire fills the screen instead of arriving underneath. */
body.rq-open .review-hero { display: none; }
#rq-quiz .rq-wrap { width: 100%; max-width: 720px; padding-bottom: 0; }
#rq-quiz .sec-head .lead { color: var(--text-mut); }

.rq-panel {
  --horizon: 320px;
  max-width: 640px;
  border-radius: 0;
  padding: 40px 40px 56px;
  border: 1px solid rgba(229, 228, 226, 0.12);
  background:
    radial-gradient(120% 85% at 50% 112%, rgba(169, 199, 228, 0.22) 0%, rgba(169, 199, 228, 0.08) 36%, rgba(169, 199, 228, 0) 64%),
    linear-gradient(to top,
      #24446a                   0,
      #16283f calc(var(--horizon) * 0.32),
      #0d1520 calc(var(--horizon) * 0.64),
      rgba(13, 21, 32, 0) var(--horizon)),
    linear-gradient(180deg, #131114 0%, #0c0b0d 100%);
  /* Span the border box and never tile, or the horizon wraps into the
     1px border strip as a blue line across the top edge. */
  background-origin: border-box;
  background-repeat: no-repeat;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.rq-panel::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90% 65% at 50% 0%, rgba(220, 221, 224, 0.10), transparent 65%);
}
.rq-panel > * { position: relative; z-index: 1; }

.rq-progress-head span { color: var(--text-dim); }
.rq-bars i { border-radius: 0; background: rgba(255, 255, 255, 0.10); }
.rq-bars i.on { background: var(--plat-grad-soft); }

.rq-q h2 { color: var(--text); }
.rq-q p { color: var(--text-mut); }

.rq-card {
  border-radius: 0;
  padding: 19px 22px;
  gap: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(229, 228, 226, 0.12);
}
.rq-opt:hover .rq-card { border-color: var(--plat-4); background: rgba(255, 255, 255, 0.06); }
.rq-ring {
  border-radius: 0;
  border: 2px solid rgba(229, 228, 226, 0.28);
}
.rq-card span:last-child { color: var(--text); }
.rq-opt input:checked ~ .rq-card, .rq-opt.selected .rq-card {
  border-color: #ffffff;
  background: var(--plat-grad-soft);
  box-shadow: 0 6px 24px rgba(220, 221, 224, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.rq-opt input:checked ~ .rq-card span:last-child,
.rq-opt.selected .rq-card span:last-child { color: #0a0a0b; }
.rq-opt input:checked ~ .rq-card .rq-ring,
.rq-opt.selected .rq-card .rq-ring { border-color: #0a0a0b; background: #ffffff; }
/* Square box with a drawn tick, the same mark the standalone LP uses. */
.rq-opt input:checked ~ .rq-card .rq-ring::after,
.rq-opt.selected .rq-card .rq-ring::after {
  width: 11px; height: 6px;
  margin-top: -3px;
  border-radius: 0;
  background: none;
  border-left: 2.5px solid #0a0a0b;
  border-bottom: 2.5px solid #0a0a0b;
  transform: rotate(-45deg);
  animation: none;
}

.rq-back { color: var(--text-mut); }
.rq-back:hover { color: #ffffff; }
.rq-panel .btn { border-radius: 0; }
.rq-panel .btn-ink { background: var(--plat-grad-soft); color: #0a0a0b; }
.rq-panel .field label { color: var(--text-mut); }
.rq-panel .field input {
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(229, 228, 226, 0.12);
  color: #ffffff;
}
.rq-panel .field input::placeholder { color: rgba(255, 255, 255, 0.40); }
.rq-panel .field input:focus { border-color: #ffffff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); }
.rq-thanks h2 { color: var(--text); }
.rq-thanks p { color: var(--text-mut); }

@media (max-width: 860px) {
  #rq-quiz { padding: 32px 0; }
  .rq-panel { --horizon: 240px; border-radius: 0; padding: 26px 20px 44px; }
  .rq-card { padding: 17px 18px; gap: 13px; }
}

/* ============================================================
   An AI model built for construction — four light cards
   ============================================================ */
/* The artwork IS the section background. It is cut out (transparent surround)
   so the section can carry the same paper tone as every other light section. */
.model-band {
  background: url('../assets/model-construction.webp') center 330px / min(560px, 72%) no-repeat, var(--paper);
  padding-top: 84px;
}
.model-band .sec-head { margin-bottom: 470px; }
.model-band:has(.model-grid[hidden]) { padding-bottom: 40px; }
@media (max-width: 860px) {
  .model-band { background: url('../assets/model-construction.webp') center 300px / min(320px, 84%) no-repeat, var(--paper); }
  .model-band .sec-head { margin-bottom: 290px; }
}

/* The plans / photo / quote artwork sits behind the section, held back so the
   cards over it stay readable. */

/* display: grid would beat the browser's own [hidden] rule. */
.model-grid[hidden] { display: none !important; }
.model-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
}
.model-card {
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 30px 30px 32px;
  box-shadow: var(--shadow-ambient);
}
.model-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.10); color: #ffffff;
  margin-bottom: 18px;
}
.model-ic svg { width: 20px; height: 20px; }
.model-card h4 {
  font-size: 1.14rem; font-weight: 700; letter-spacing: -0.01em;
  color: #ffffff; margin-bottom: 9px;
}
.model-card p { color: rgba(255, 255, 255, 0.82); font-size: 0.99rem; line-height: 1.62; }
@media (max-width: 860px) {
  .model-grid { grid-template-columns: 1fr; gap: 14px; }
  .model-card { padding: 24px 22px 26px; }
}

/* Stat cards on the review page hero */
.review-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1040px;
  margin: 44px auto 0;
}
@media (max-width: 860px) { .review-stats { display: none; } }

/* White cards so they pop over the burning-money hero backdrop */
.review-stats .pain-stat { background: var(--pure); border-color: var(--hair-light); box-shadow: var(--shadow-ambient); }
.review-stats .pain-stat b {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--panel-ink);
}
.review-stats .pain-stat span { color: var(--panel-ink-mut); }

/* Breathing room under the hero CTA + the burning-money backdrop */
.review-hero {
  padding-bottom: 100px;
  background: url('../assets/review-money-fire.webp') center bottom / cover no-repeat #ffffff;
}

/* The start button has to pop over the flames — big white pill, deep shadow */
.btn-review-start {
  padding: 22px 56px;
  font-size: 1.15rem;
  background: #ffffff;
  color: #0a0a0b;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.3);
}
.btn-review-start:hover { background: #ffffff; color: #0a0a0b; transform: translateY(-1px); }