:root {
  --ink: #143f36;
  --ink-dark: #0c2f29;
  --mint: #dcece3;
  --mint-deep: #8ab79f;
  --cream: #f7f1e8;
  --paper: #fffdf9;
  --coral: #e78456;
  --coral-dark: #c9663c;
  --line: #d7e0da;
  --muted: #60746d;
  --shadow: 0 24px 65px rgba(20, 63, 54, 0.14);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.demo-banner { padding: 7px 16px; color: #fff; background: var(--ink-dark); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-align: center; text-transform: uppercase; }
.site-header { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; gap: 10px; align-items: center; font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800; text-decoration: none; letter-spacing: -.04em; }
.brand-copy { display: grid; gap: 1px; line-height: 1; }
.brand-copy strong { font-size: 12px; letter-spacing: .1em; }
.brand-copy small { color: var(--muted); font-size: 7px; letter-spacing: .17em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); background: var(--mint); border-radius: 10px; }
.brand-mark svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark .brand-wave { fill: none; stroke: var(--coral); stroke-width: 2.4; }

.hero { min-height: calc(100vh - 119px); display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: center; gap: 40px; padding-top: 24px; padding-bottom: 54px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { margin-bottom: 18px; color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.eyebrow span { display: inline-block; margin-right: 4px; padding: 5px 9px; color: var(--ink); background: var(--mint); border-radius: 6px; }
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
h1 { max-width: 630px; margin: 0; color: var(--ink-dark); font-size: clamp(48px, 5.4vw, 78px); line-height: .99; letter-spacing: -.065em; }
h1 em { color: var(--coral); font-style: normal; }
.hero-lede { max-width: 560px; margin: 28px 0 32px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.landing-address-form { max-width: 570px; margin-top: 34px; }
.landing-address-form > label { display: block; margin: 0 0 9px 2px; color: var(--ink-dark); font-size: 13px; font-weight: 800; }
.landing-address-entry { min-height: 70px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 7px 7px 16px; background: rgba(255,255,255,.9); border: 1.5px solid #cad9d1; border-radius: 17px; box-shadow: 0 16px 38px rgba(20,63,54,.1), 0 0 0 5px rgba(116,209,166,.05); transition: border-color .18s, box-shadow .18s; }
.landing-address-entry:focus-within { border-color: #3b916a; box-shadow: 0 18px 44px rgba(20,63,54,.14), 0 0 0 5px rgba(83,183,135,.1); }
.landing-address-entry > svg { width: 22px; fill: none; stroke: #4f8e73; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.landing-address-entry input { width: 100%; min-width: 0; height: 52px; padding: 0; color: var(--ink-dark); background: transparent; border: 0; outline: 0; font-size: 16px; }
.landing-address-entry input::placeholder { color: #8ba098; }
.landing-address-entry .primary-cta { min-height: 54px; padding-inline: 20px; border-radius: 11px; }
.landing-address-error { min-height: 19px; margin: 7px 3px 0; color: #b84d35; font-size: 12px; font-weight: 700; }
.primary-cta, .continue-button { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 26px; color: #fff; background: var(--ink); border: 0; border-radius: 13px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; box-shadow: 0 10px 28px rgba(20, 63, 54, .2); cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.primary-cta:hover, .continue-button:hover { background: var(--ink-dark); box-shadow: 0 14px 36px rgba(20, 63, 54, .25); transform: translateY(-2px); }
.primary-cta svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.privacy-note { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.privacy-note svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.hero-visual { position: relative; min-height: 500px; border-radius: 42% 42% 22% 22%; overflow: visible; }
.hero-visual::before { content: ''; position: absolute; inset: 38px 6px 28px 36px; background: linear-gradient(145deg, #dcece3, #c4dfd1); border-radius: 47% 47% 28% 28%; }
.hero-visual::after { content: ''; position: absolute; right: -15px; bottom: 5px; width: 120px; height: 150px; opacity: .25; background-image: radial-gradient(var(--ink) 1.2px, transparent 1.2px); background-size: 12px 12px; }
.sun-disc { position: absolute; top: 75px; right: 60px; z-index: 1; width: 105px; height: 105px; background: #f7c784; border-radius: 50%; }
.house-illustration { position: absolute; inset: 34px 2% 0 3%; z-index: 2; width: 94%; height: 92%; }
.question-card, .range-card { position: absolute; z-index: 4; background: rgba(255, 253, 249, .94); border: 1px solid rgba(20, 63, 54, .09); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.question-card { min-width: 210px; display: flex; gap: 11px; align-items: center; padding: 13px; border-radius: 14px; }
.question-card .mini-icon { width: 36px; height: 36px; display: grid; place-items: center; background: var(--mint); border-radius: 9px; font-weight: 800; }
.question-card div { display: grid; flex: 1; }
.question-card small, .range-card small { color: var(--muted); font-size: 11px; font-weight: 600; }
.question-card strong { margin-top: 2px; font-size: 13px; }
.check { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; background: #3d9568; border-radius: 50%; font-size: 12px; }
.card-one { top: 108px; left: 0; transform: rotate(-2deg); }
.card-two { right: -5px; bottom: 130px; transform: rotate(2deg); }
.range-card { bottom: 20px; left: 54px; min-width: 285px; display: grid; padding: 18px 20px; border-radius: 16px; }
.range-card strong { margin: 5px 0 4px; color: var(--coral); font-family: 'Manrope'; font-size: 21px; letter-spacing: -.04em; }
.range-card span { color: var(--muted); font-size: 11px; }

.why-section { padding: 100px 0; background: var(--ink-dark); color: #fff; }
.section-kicker { margin: 0 0 15px; color: #9ec8b4; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.why-section h2 { margin: 0 0 58px; font-size: clamp(34px, 4vw, 55px); line-height: 1.1; letter-spacing: -.05em; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.benefit-grid article { padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.035); }
.benefit-grid article > span { color: #efaa81; font-family: 'Manrope'; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.benefit-grid h3 { margin: 42px 0 10px; font-size: 19px; }
.benefit-grid p { margin: 0; color: #b7c9c3; font-size: 14px; line-height: 1.6; }
.trust-strip { display: flex; align-items: center; gap: 15px; margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.13); }
.trust-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); background: #f2c598; border-radius: 50%; font-family: 'Manrope'; font-weight: 800; }
.trust-strip p { margin: 0; color: #b7c9c3; font-size: 14px; }
.trust-strip strong { color: #fff; }

.site-footer { padding: 28px 0; color: var(--muted); background: #f1ece4; font-size: 12px; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.footer-inner p { margin: 0; }

/* Brokerage disclosure — see the note in index.html. Deliberately the same
   12px as the rest of the footer rather than fine print: "clear and prominent"
   is the wording of the rule it satisfies. */
.footer-brokerage { max-width: 420px; display: grid; gap: 5px; }
.brokerage-logo { display: block; width: auto; height: 32px; margin-bottom: 4px; }
.brokerage-line { color: var(--ink-dark); line-height: 1.5; }
.brokerage-line strong { font-weight: 700; }
.brokerage-address { font-size: 11px; line-height: 1.5; }

.footer-meta { display: grid; gap: 7px; justify-items: flex-end; text-align: right; }
.footer-links { display: flex; gap: 20px; }

/* "Powered by Roedde Systems" — the bolt and the RS mark share one colour so
   the pair reads as a single object, and both inherit from the link so the
   hover state needs no second rule. */
.footer-powered { display: flex; align-items: center; gap: 7px; }
.powered-label { font-size: 11px; opacity: .8; }
.powered-by { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-dark); text-decoration: none; opacity: .85; transition: opacity .16s; }
.powered-by:hover { opacity: 1; }
.powered-bolt { width: 13px; height: 13px; fill: var(--coral); }
.powered-mark { width: 22px; height: auto; }
.powered-name { font-family: 'Manrope', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: -.01em; }

/* The wizard's copy of the disclosure. Desktop only — under 520px the wizard
   footer is hidden for vertical space and the report screen's registrant line
   carries it instead. */
.wizard-footer-brokerage { display: block; margin-top: 4px; opacity: .92; }

.wizard { min-height: calc(100vh - 30px); background: var(--paper); }
.wizard-header { height: 76px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 0 22px; border-bottom: 1px solid #e8ece9; }
.wizard-brand { justify-self: center; }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.icon-button:hover { background: var(--mint); }
.icon-button svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.progress-wrap { width: min(700px, calc(100% - 40px)); margin: 27px auto 0; }
.progress-meta { display: flex; justify-content: space-between; margin-bottom: 9px; color: var(--muted); font-size: 12px; font-weight: 700; }
.progress-track { height: 5px; overflow: hidden; background: #e8ede9; border-radius: 999px; }
.progress-track span { display: block; width: 7%; height: 100%; background: var(--coral); border-radius: inherit; transition: width .3s ease; }
.wizard-stage { width: min(700px, calc(100% - 40px)); min-height: 590px; margin: 0 auto; padding: 68px 0 80px; }
.wizard-footer { padding: 16px; color: #81928c; font-size: 11px; text-align: center; }
.step-enter { animation: stepIn .28s ease both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.step-kicker { margin: 0 0 12px; color: var(--coral-dark); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.step-title { max-width: 650px; margin: 0; color: var(--ink-dark); font-size: clamp(31px, 5vw, 46px); line-height: 1.12; letter-spacing: -.045em; }
.step-subtitle { max-width: 570px; margin: 15px 0 30px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.field-label { display: block; margin-bottom: 9px; color: var(--ink); font-size: 13px; font-weight: 700; }
.text-input { width: 100%; height: 60px; padding: 0 17px; color: var(--ink-dark); background: #fff; border: 1.5px solid #ccd8d1; border-radius: 12px; outline: none; transition: border .15s, box-shadow .15s; }
.text-input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(20,63,54,.09); }
.input-help { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.error-message { min-height: 20px; margin: 8px 0 0; color: #b84d35; font-size: 13px; font-weight: 600; }
.action-row { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.continue-button { min-width: 155px; }
.continue-button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.keyboard-hint { color: #87958f; font-size: 11px; }

.option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.option-grid.single { grid-template-columns: 1fr; }
.option-button { min-height: 66px; display: flex; align-items: center; gap: 13px; padding: 14px 16px; color: var(--ink); text-align: left; background: #fff; border: 1.5px solid #d7e0da; border-radius: 13px; cursor: pointer; transition: border .15s, background .15s, transform .15s; }
.option-button:hover { border-color: var(--mint-deep); background: #f8fbf9; transform: translateY(-1px); }
.option-button.selected { border-color: var(--ink); background: var(--mint); box-shadow: inset 0 0 0 1px var(--ink); }
.option-icon { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); background: var(--cream); border-radius: 8px; font-weight: 800; }
.selected .option-icon { background: #fff; }
.option-copy { display: grid; gap: 2px; }
.option-copy strong { font-size: 14px; }
.option-copy small { color: var(--muted); font-size: 11px; }
.option-check { width: 19px; height: 19px; display: grid; place-items: center; margin-left: auto; color: transparent; border: 1.5px solid #bccbc3; border-radius: 50%; font-size: 11px; }
.selected .option-check { color: #fff; background: var(--ink); border-color: var(--ink); }
.multi-note { margin: -18px 0 22px; color: var(--muted); font-size: 12px; }

.result-panel { position: relative; overflow: hidden; padding: 38px; color: #fff; background: var(--ink-dark); border-radius: var(--radius); box-shadow: var(--shadow); }
.result-panel::after { content: ''; position: absolute; top: -85px; right: -70px; width: 230px; height: 230px; border: 52px solid rgba(255,255,255,.045); border-radius: 50%; }
.result-panel > * { position: relative; z-index: 1; }
.result-panel .step-kicker { color: #f2b28e; }
.result-panel h2 { margin: 5px 0 8px; color: #fff; font-size: clamp(36px, 7vw, 55px); letter-spacing: -.055em; }
.result-zone { margin: 0; color: #a9c4b9; font-size: 13px; }
.result-divider { height: 1px; margin: 28px 0; background: rgba(255,255,255,.13); }
.result-explanation { display: flex; gap: 13px; align-items: flex-start; color: #dbe7e2; font-size: 15px; line-height: 1.6; }
.spark { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); background: #f1c194; border-radius: 9px; }
.result-disclaimer { margin: 20px 0 0; color: #91aca1; font-size: 11px; line-height: 1.55; }
.result-actions { margin-top: 24px; }
.result-actions .continue-button { width: 100%; background: var(--coral); }
.result-actions .continue-button:hover { background: var(--coral-dark); }

.consent-box { margin-top: 18px; padding: 16px; color: var(--muted); background: var(--cream); border-radius: 11px; font-size: 12px; line-height: 1.55; }

/* Privacy and Terms. Set at 16px on a 720px measure rather than the 12px fine
   print these pages used as drafts — a policy nobody can read is not a policy,
   and these two are now the pages a Meta ad review and a RECO complaint would
   both land on first. */
.legal-page { max-width: 720px; padding-bottom: 90px; }
.legal-page h2 { margin: 34px 0 10px; color: var(--ink-dark); font-size: 19px; letter-spacing: -.02em; }
.legal-page p, .legal-page li { color: var(--muted); font-size: 16px; line-height: 1.68; }
.legal-page p { margin: 0 0 14px; }
.legal-page ul { margin: 0 0 14px; padding-left: 20px; }
.legal-page li { margin-bottom: 7px; }
.legal-page strong { color: var(--ink-dark); }
.legal-page a { color: var(--coral-dark); }
.legal-date { margin: -6px 0 26px !important; font-size: 13px !important; opacity: .8; }
.legal-foot { margin-top: 42px !important; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px !important; }
.checkbox-row { display: flex; gap: 11px; align-items: flex-start; margin-top: 19px; cursor: pointer; }
.checkbox-row input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }
.checkbox-row span { color: var(--ink); font-size: 13px; line-height: 1.5; }
.coming-soon { text-align: center; }
.coming-icon, .done-icon { width: 74px; height: 74px; display: grid; place-items: center; margin: 0 auto 24px; color: var(--ink); background: var(--mint); border-radius: 50%; font-size: 30px; }
.coming-soon .step-title, .done-screen .step-title { margin-inline: auto; }
.coming-soon .step-subtitle, .done-screen .step-subtitle { margin-inline: auto; }
.done-screen { padding-top: 25px; text-align: center; }
.done-summary { margin: 30px auto; padding: 20px; background: var(--cream); border-radius: 14px; text-align: left; }
.done-summary div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-bottom: 1px solid #ded8cf; font-size: 13px; }
.done-summary div:last-child { border: 0; }
.done-summary span { color: var(--muted); }
.done-summary strong { text-align: right; }
.secondary-button { min-height: 48px; padding: 0 19px; background: transparent; border: 1.5px solid var(--line); border-radius: 11px; font-weight: 700; cursor: pointer; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 55px; }
  .hero-copy { text-align: center; }
  .hero-lede { margin-inline: auto; }
  .landing-address-form { margin-right: auto; margin-left: auto; text-align: left; }
  .privacy-note { justify-content: center; }
  .hero-visual { width: min(620px, 100%); margin: -15px auto 0; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 28px, 1180px); }
  .demo-banner { font-size: 10px; }
  .site-header { height: 72px; }
  .hero { min-height: auto; gap: 20px; padding-top: 40px; padding-bottom: 60px; }
  h1 { font-size: 46px; }
  .hero-lede { margin: 22px 0 26px; font-size: 16px; }
  .primary-cta { width: 100%; }
  .hero-visual { min-height: 390px; transform: scale(.94); }
  .hero-visual::before { inset: 28px 2px 15px 10px; }
  .house-illustration { inset: 25px 0 0; width: 100%; }
  .sun-disc { top: 58px; right: 30px; width: 74px; height: 74px; }
  .question-card { min-width: 170px; padding: 10px; }
  .question-card .mini-icon { width: 30px; height: 30px; }
  .question-card strong { font-size: 11px; }
  .card-one { top: 74px; left: -7px; }
  .card-two { right: -8px; bottom: 88px; }
  .range-card { left: 17px; bottom: 3px; min-width: 240px; padding: 14px 16px; }
  .range-card strong { font-size: 17px; }
  .why-section { padding: 70px 0; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-grid h3 { margin-top: 26px; }
  .footer-inner { flex-direction: column; gap: 20px; }
  .footer-meta { justify-items: flex-start; text-align: left; }
  .wizard-header { height: 66px; padding-inline: 9px; }
  .wizard-brand > span:last-child { display: none; }
  .progress-wrap { width: calc(100% - 30px); margin-top: 21px; }
  .wizard-stage { width: calc(100% - 30px); min-height: calc(100vh - 170px); padding: 48px 0 55px; }
  .step-title { font-size: 32px; }
  .step-subtitle { font-size: 15px; }
  .option-grid { grid-template-columns: 1fr; gap: 10px; }
  .option-button { min-height: 61px; }
  .keyboard-hint { display: none; }
  .continue-button { flex: 1; }
  .result-panel { padding: 29px 22px; border-radius: 18px; }
  .result-panel h2 { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Conversational wizard */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body.wizard-open { overflow: hidden; background: #edf2ee; }
.wizard:not([hidden]) { height: calc(100vh - 30px); min-height: 690px; display: flex; flex-direction: column; background: #edf2ee; }
.wizard .wizard-header { flex: 0 0 70px; height: 70px; background: rgba(255,253,249,.93); backdrop-filter: blur(14px); }
.wizard .progress-wrap { flex: 0 0 auto; width: min(1120px, calc(100% - 40px)); margin: 16px auto 0; }
.wizard-layout { width: min(1120px, calc(100% - 40px)); min-height: 0; display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(330px, .78fr); flex: 1 1 auto; gap: 20px; margin: 15px auto 0; }
.wizard .wizard-footer { flex: 0 0 auto; padding: 9px 16px 11px; }

.chat-shell { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid rgba(20,63,54,.1); border-radius: 20px; box-shadow: 0 16px 46px rgba(20,63,54,.09); }
.chat-intro { min-height: 62px; display: flex; align-items: center; gap: 11px; padding: 11px 18px; background: #fbfcfa; border-bottom: 1px solid #e4eae6; }
.guide-avatar, .chat-avatar { display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: linear-gradient(145deg, #1b594c, #0f392f); border-radius: 50%; font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -.04em; }
.guide-avatar { width: 39px; height: 39px; font-size: 11px; box-shadow: 0 0 0 4px #e1eee7; }
.chat-intro div { display: grid; gap: 1px; }
.chat-intro strong { color: var(--ink-dark); font-size: 14px; }
.chat-intro span:not(.guide-avatar) { color: var(--muted); font-size: 12px; }
.chat-intro span:not(.guide-avatar)::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; background: #43a575; border-radius: 50%; }

/* NO `scroll-behavior: smooth` HERE. It made every scripted scroll an
   animation, and scrollChatToNewest deliberately runs several passes as the
   layout settles - each pass cancelled the one before it. On a phone, where the
   distance is large, the feed never arrived at all: setting scrollTop to any
   value left it where it was. Motion comes from the message's own entry
   animation; the scroll itself is instant and lands. */
.chat-feed { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 25px 24px 12px; scrollbar-color: #c7d4cc transparent; }
.chat-feed::before { content: 'Today'; display: block; width: max-content; margin: 0 auto 22px; padding: 4px 9px; color: #8a9993; background: #f1f4f2; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.chat-row { display: flex; align-items: flex-end; gap: 9px; margin: 0 0 14px; }
.chat-avatar { width: 28px; height: 28px; margin-bottom: 3px; font-size: 8px; }
.chat-bubble { max-width: min(82%, 520px); padding: 14px 17px; font-size: 15px; line-height: 1.5; }
.assistant-bubble { color: var(--ink-dark); background: #f0f5f1; border-radius: 16px 16px 16px 5px; }
/* ⚠ Every multi-paragraph message in this app was rendering as ONE BLOCK.
   Paragraphs are written as `</p><p>` in the step prompts and had margin: 0
   with nothing to separate them, so the breaks existed in the markup and were
   invisible on screen. Found 2026-08-30 — and it reframes a run of earlier
   feedback about messages feeling long and wall-like: they had already been
   split, the splits just never showed. `p + p` so the first paragraph still
   sits flush against the top of the bubble. */
.assistant-bubble p { margin: 0; }
.assistant-bubble p + p { margin-top: 17px; }
/* ⚠ THE HELPER LINE UNDER EVERY QUESTION. Nigel, 1 September 2026: "multiple
   parts previous to this, not proper spacing on mobile between sentences. it
   starts on a new line but with no gap." Measured at 375px: 6px, against 17px
   between paragraphs — so "Street and number is enough." read as a wrapped
   continuation of the question rather than a separate note. It is a different
   thought and now has a paragraph's worth of air. */
.assistant-bubble span { display: block; margin-top: 13px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.assistant-bubble .live-ai-reply { margin: -2px 0 9px; padding: 8px 9px; color: #174b3e; background: rgba(105, 189, 146, .13); border: 1px solid rgba(74, 157, 116, .18); border-radius: 9px; font-size: 14px; line-height: 1.5; }
.assistant-bubble .live-ai-reply span { display: inline; margin: 0 5px 0 0; color: #176647; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.live-ai-reply i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; background: #3ec884; border-radius: 50%; box-shadow: 0 0 8px rgba(62, 200, 132, .8); animation: livePulse 1.8s infinite; }
.ai-thinking-label { display: block; margin: 5px 0 0 4px; color: #698078; font-size: 9px; letter-spacing: .02em; }
/* ⭐ THE WORKING TRACE — rebuilt 2026-08-30 after Nigel tested the first version.
   It no longer lives in the bubble at all. It stands where the three typing dots
   were, fills in token by token, and is replaced by the message. Nothing about
   it persists, which is why it can no longer be compared against the big number
   on the right and found not to match: by the time there is an answer to compare
   it with, the trace is gone.
   Sized and coloured as the typing indicator it replaced, not as content. */
.typing-row .working-trace { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 9px 12px; overflow: hidden; background: #eef3f0; border: 1px solid #dde6e1; border-radius: 16px 16px 16px 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; color: #486b5d; white-space: nowrap; }
.typing-row .working-trace > i { width: 6px; height: 6px; flex: 0 0 auto; background: #4a9d74; border-radius: 50%; animation: livePulse 1s infinite; }
/* ⚠ `.assistant-bubble span` and its siblings set 13px on every span they can
   reach; scoped explicitly rather than out-specified, which is how the first
   version silently grew from 28px to 36px. */
.typing-row .working-trace > span { display: inline; margin: 0; overflow: hidden; color: inherit; font-size: inherit; line-height: inherit; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) {
  .typing-row .working-trace > i { animation: none; }
}
.assistant-bubble .local-insight.assistant-bubble .local-insight { margin: -2px 0 9px; padding: 9px 11px; color: var(--ink-dark); background: #eef2ee; border: 1px solid #d8e2dc; border-radius: 9px; font-size: 14px; line-height: 1.5; }
.assistant-bubble .ai-narrative { margin: 8px 0 0; padding: 11px 13px; color: var(--ink-dark); background: #fff; border: 1px solid #e1e8e3; border-radius: 10px; font-size: 14px; line-height: 1.55; }
.assistant-bubble .ai-narrative.narrative-streaming::after { content: '▍'; margin-left: 2px; opacity: .6; animation: livePulse 1s infinite; }
.assistant-bubble .fix-list { margin: 9px 0 0; padding: 10px 11px; background: #f6faf7; border: 1px solid #dbe6e0; border-radius: 10px; }
.fix-list-title { display: block; margin-bottom: 7px; color: #176647; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.fix-list ul { margin: 0; padding-left: 16px; }
.fix-list li { margin-bottom: 5px; color: var(--ink-dark); font-size: 14px; line-height: 1.5; }
.fix-list-prose { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.fix-list-prose:empty { display: none; }
.report-range { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 0; padding: 10px 11px; background: #fff; border: 1px solid #e1e8e3; border-radius: 10px; }
.report-range span { color: var(--muted); font-size: 12px; }
.report-range strong { color: var(--ink-dark); font-size: 17px; }
.user-row { justify-content: flex-end; }
.user-bubble { color: #fff; background: var(--ink); border-radius: 16px 16px 5px 16px; }
.message-new { animation: messageIn .28s ease both; }
@keyframes messageIn { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: none; } }
.typing-bubble { display: flex; gap: 4px; align-items: center; min-width: 55px; height: 36px; padding: 0 13px; background: #f0f5f1; border-radius: 15px 15px 15px 5px; }
.typing-bubble i { width: 5px; height: 5px; background: #789188; border-radius: 50%; animation: typingDot 1s infinite ease-in-out; }
.typing-bubble i:nth-child(2) { animation-delay: .15s; }
.typing-bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-composer { flex: 0 0 auto; max-height: 44%; overflow-y: auto; padding: 14px 18px 17px; background: #f8faf8; border-top: 1px solid #e1e8e3; scrollbar-color: #c7d4cc transparent; }
.question-worth { display: flex; margin-bottom: 9px; }
.question-worth span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; color: #c9663c; background: #fbeee6; border: 1px solid #f0cdb8; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.question-worth span::before { content: '✦'; font-size: 9px; }
.chat-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chat-option { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; color: var(--ink); text-align: left; background: #fff; border: 1px solid #d3dfd8; border-radius: 12px; cursor: pointer; transition: background .16s, border .16s, transform .16s, box-shadow .16s; }
.chat-option:hover { border-color: #82aa96; background: #f6faf7; box-shadow: 0 5px 15px rgba(20,63,54,.07); transform: translateY(-1px); }
.chat-option.selected { border-color: var(--ink); background: var(--mint); box-shadow: inset 0 0 0 1px var(--ink); }
.chat-option:active { transform: translateY(0) scale(.99); }
.chat-option-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; background: var(--cream); border-radius: 7px; font-weight: 800; }
.chat-option > span:nth-child(2) { display: grid; flex: 1; gap: 2px; }
.chat-option strong { font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
.chat-option small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.chat-option > i { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; color: transparent; border: 1.5px solid #c3d0c8; border-radius: 50%; font-size: 11px; font-style: normal; transition: background .16s, border-color .16s; }
.chat-option.selected > i { color: #fff; background: var(--ink); border-color: var(--ink); }
.chat-send { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 22px; color: #fff; background: var(--ink); border: 0; border-radius: 12px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; transition: background .16s, transform .16s; }
.chat-send:hover { background: var(--ink-dark); transform: translateY(-1px); }
.chat-send:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.chat-send.wide { width: 100%; }
/* §R5 — the back-half offer. Both buttons are the same weight (`.chat-send`)
   since both move the flow forward; neither reads as a lesser/link option. */
.back-half-offer-buttons { display: flex; gap: 10px; }
.back-half-offer-buttons .chat-send { flex: 1; }
.chat-send span { font-size: 16px; line-height: 1; opacity: .85; }
.compact-options .chat-send { grid-column: 1 / -1; margin-top: 3px; }

.chat-input-wrap { display: grid; grid-template-columns: 1fr 48px; gap: 7px; padding: 5px; background: #fff; border: 1px solid #cad7cf; border-radius: 13px; box-shadow: 0 5px 16px rgba(20,63,54,.06); }
.chat-input { width: 100%; min-width: 0; height: 48px; padding: 0 12px; color: var(--ink-dark); background: transparent; border: 0; outline: 0; font-size: 16px; }
.chat-input::placeholder { color: #91a098; }
.chat-input-send { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; color: #fff; background: var(--coral); border: 0; border-radius: 9px; font-size: 20px; cursor: pointer; }
.chat-input-send:hover { background: var(--coral-dark); }
.composer-error { min-height: 18px; margin: 6px 4px 0; color: #b84d35; font-size: 12px; font-weight: 700; }
.prototype-note { margin: 6px 4px 0; color: var(--muted); font-size: 11px; }
.chat-consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 11px; color: var(--muted); font-size: 12px; line-height: 1.45; cursor: pointer; }
.chat-consent input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--ink); }
/* The pixel floor is what stops the contact card being cut off on a short
   desktop window: 56% is right on a tall screen and too little on a 460px-tall
   one, where the trust line was the part that disappeared. */
.chat-composer.phone-mode { max-height: max(56%, 340px); padding: 12px; background: #edf3ef; }
.phone-capture-card { padding: 17px; background: #fff; border: 1px solid #d5e0d9; border-radius: 14px; box-shadow: 0 10px 28px rgba(20,63,54,.08); }
.completion-badge { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.completion-badge > span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: #3d9669; border-radius: 50%; font-size: 12px; box-shadow: 0 0 0 5px #e5f2ea; }
.completion-badge div { display: grid; gap: 1px; }
.completion-badge strong { color: var(--ink-dark); font-size: 11px; }
.completion-badge small { color: var(--muted); font-size: 9px; }
.report-preview { padding: 10px 11px; background: linear-gradient(135deg, #f4ede2, #eef5f0); border: 1px solid #e2ded5; border-radius: 10px; }
.report-preview-head { display: flex; align-items: center; gap: 8px; }
.report-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink); background: #fff; border-radius: 7px; box-shadow: 0 4px 10px rgba(20,63,54,.08); }
.report-preview-head div { display: grid; gap: 1px; }
.report-preview-head strong { color: var(--ink-dark); font-size: 10px; }
.report-preview-head small { color: var(--muted); font-size: 8px; }
.report-preview ul { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.report-preview li { color: var(--ink); font-size: 8px; font-weight: 700; }
.report-preview li::before { content: '✓'; margin-right: 4px; color: #3d9669; }
.phone-label { display: block; margin: 11px 0 5px; color: var(--ink-dark); font-size: 13px; font-weight: 800; }
.phone-entry { display: grid; grid-template-columns: minmax(90px, 1fr) auto; align-items: center; overflow: hidden; background: #fff; border: 1.5px solid #afc2b7; border-radius: 11px; box-shadow: 0 0 0 3px rgba(20,63,54,.04); }
/* .country-code removed 2026-08-29 (Nigel): the "+1" ate width on the narrowest
   screens and told a Canadian nothing they did not already know. */
.phone-input { min-width: 0; height: 52px; padding: 0 12px; color: var(--ink-dark); background: transparent; border: 0; outline: 0; font-size: 16px; }
.phone-entry button { height: 48px; display: inline-flex; align-items: center; gap: 9px; margin-right: 4px; padding: 0 18px; color: #fff; background: var(--coral); border: 0; border-radius: 9px; font-size: 15px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.phone-entry button:hover { background: var(--coral-dark); }
.phone-entry button span { font-size: 18px; }
.phone-trust { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; color: #547167; font-size: 7px; font-weight: 700; }
.phone-capture-card .chat-consent { margin-top: 8px; }
.phone-capture-card .prototype-note { margin-top: 7px; padding-top: 7px; border-top: 1px solid #e5e9e6; }
.phone-capture-card .composer-error { margin-bottom: -5px; }
/* ⚠ 24px of reserved nothing, in every state. It was collapsed for the
   keyboard-open case on 30 August and Nigel correctly reported no change — the
   card he was looking at was the ordinary one. Reserving the space prevents a
   jump when an error appears, but the error sits BELOW the button, so what moves
   is the trust line and not the control anyone is aiming at. Measured: link
   bottom 664, trust top 695. */
.phone-capture-card .composer-error:empty { min-height: 0; margin: 0; }
.offer-body { margin: 0 0 11px; color: var(--ink-dark); font-size: 12px; line-height: 1.55; }
.offer-body strong { color: var(--ink-dark); }
.why-phone { margin: 0 0 9px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.text-not-call { margin: 10px 0 0; color: var(--ink-dark); font-size: 13px; font-weight: 700; line-height: 1.45; }
.link-button { display: block; margin: 10px 0 0; padding: 4px 0; color: #3c5c50; background: none; border: 0; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.link-button:hover { color: var(--ink-dark); }
.trust-line { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid #e5e9e6; color: var(--muted); font-size: 12px; line-height: 1.5; }
/* ⚠ These were 10px labels on 10px buttons — sized back when the realtor
   question was crammed onto the contact card and every pixel was contested.
   They live on the report screen now, with a whole screen to themselves, and at
   that size nobody answered them. Nigel, 2026-08-29: "they are tiny with tiny
   font and don't draw attention." This is where the last useful data gets
   collected, so it is sized like a question rather than like fine print. */
.realtor-status-check { margin-top: 14px; padding: 15px 16px; background: #f6faf7; border: 1px solid #dbe6e0; border-radius: 12px; }
.realtor-status-check > span { display: block; margin-bottom: 10px; color: var(--ink-dark); font-size: 15px; font-weight: 700; line-height: 1.4; }
.realtor-status-options { display: flex; flex-wrap: wrap; gap: 7px; }
.chat-option.compact { min-height: 48px; flex: 1 1 auto; justify-content: center; padding: 0 15px; font-size: 14px; font-weight: 700; }
.realtor-reassurance { margin: 9px 0 0; font-size: 12.5px; line-height: 1.45; color: #176647; }

/* The report screen's own closing line, and a restart that no longer competes
   with it for attention. */
.done-note { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--ink-dark); }
.named-professional { grid-column: 1 / -1; display: grid; padding: 11px 13px; background: #eaf2ed; border-radius: 10px; }
.named-professional span { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.named-professional strong { margin-top: 2px; font-size: 12px; }
.named-professional small { color: var(--muted); font-size: 9px; }
/* The registrant disclosure. Separated from the line above it so it reads as
   an attribution rather than more of the promise, but NOT shrunk below 9px:
   Ontario's rule is that the registered name be clear and prominent, and type
   smaller than the rest of the small print is the first thing a regulator
   would call out. Same size as its sibling, with room above it. */
.named-professional .registrant-line { margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(20,63,54,.11); line-height: 1.45; }
.chat-done-card { display: grid; gap: 8px; margin: 10px 0 0; }
.chat-done-card > div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 11px; background: #fff; border: 1px solid #dde5e0; border-radius: 9px; font-size: 10px; }
.chat-done-card span { color: var(--muted); }
.chat-done-card strong { text-align: right; }
.monitor-offer { margin-top: 12px; padding: 10px 11px; background: #f6faf7; border: 1px solid #dbe6e0; border-radius: 10px; }
/* Was 10px, like the realtor question beside it — Nigel, 2026-08-30: "the text
   is still small on that page." Same cause: sized when these blocks were
   squeezed onto the contact card, never resized when they moved to a screen of
   their own. */
.monitor-offer p { margin: 0 0 11px; font-size: 15px; line-height: 1.6; }
.monitor-offer:has(.monitor-offer-buttons) p { color: var(--ink-dark); font-weight: 700; }
.monitor-offer-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.monitor-note { margin: 11px 0 0 !important; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.monitor-offer-buttons button { min-height: 48px; flex: 1; padding: 0 15px; color: var(--ink); background: #fff; border: 1px solid #d3dfd8; border-radius: 11px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .16s, border .16s, transform .16s, box-shadow .16s; }
.monitor-offer-buttons button:hover { border-color: #82aa96; background: #f6faf7; box-shadow: 0 5px 15px rgba(20,63,54,.07); transform: translateY(-1px); }
.monitor-offer .phone-entry { margin-top: 10px; }
.monitor-fine { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
/* ⚠ This was 10px inside a 10px-padded box — Nigel, 2026-08-29: "the message
   The offer stays open...is very small." It is the ONLY thing on the decline
   screen, and the last chance to recover a visitor who just said no, so it was
   set smaller than anything it was competing with. */
.guide-offer { margin-top: 14px; padding: 15px 16px; background: #f6faf7; border: 1px solid #dbe6e0; border-radius: 12px; }
.guide-offer p { margin: 0 0 11px; font-size: 14px; line-height: 1.5; }
/* The offer now leads with a short line and follows with the description, so only
   the lead is emphasised — bolding both made the whole block shout. */
.guide-offer:has(.guide-offer-buttons) > p:first-child { color: var(--ink-dark); font-weight: 700; }
.guide-offer-buttons { display: flex; gap: 6px; }
.guide-offer-buttons button { min-height: 48px; flex: 1; padding: 0 15px; color: var(--ink); background: #fff; border: 1px solid #d3dfd8; border-radius: 11px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .16s, border .16s, transform .16s, box-shadow .16s; }
.guide-offer-buttons button:hover { border-color: #82aa96; background: #f6faf7; box-shadow: 0 5px 15px rgba(20,63,54,.07); transform: translateY(-1px); }
/* The one door left open after two declines: stated, not offered, so it is set
   quieter than the copy above it and carries no control of its own. */
.guide-doorway { margin: 0 !important; padding-top: 10px; border-top: 1px solid #e3ebe6; color: var(--muted); font-size: 13px; line-height: 1.5; }
.guide-fine { margin: 8px 0 0 !important; color: var(--muted); font-size: 12px; line-height: 1.45; }
.guide-offer .phone-entry { margin-top: 4px; }
.demo-send-note { margin: 10px 0 0; color: #8b9a92; font-size: 12px; text-align: center; }

/* The closing offer on the report screen: a copy for them, and the one-pager.
   Weighted a step above the questions around it — it is the only block there
   that gives rather than asks, so it is the one that should look like an offer. */
.share-block { margin-top: 14px; padding: 16px 17px; background: #fff; border: 1px solid #cfded6; border-radius: 12px; box-shadow: 0 6px 18px rgba(20,63,54,.05); }
.share-title { display: block; margin-bottom: 5px; color: var(--ink-dark); font-size: 15px; font-weight: 700; }
.share-hint { margin: 0 0 13px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.share-block .chat-send { min-height: 46px; font-size: 14px; }
.share-fine { margin: 11px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.share-ack { margin: 0; color: var(--ink-dark); font-size: 16px; line-height: 1.55; }
/* The follow-on, shown only after the guide is accepted. Set apart by a rule
   rather than a second card: it is a further question inside the same
   conversation, not a new offer competing with the one just answered. */
.market-offer { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e3ebe6; }
.market-offer p { margin: 0 0 10px; color: var(--ink-dark); font-size: 15px; line-height: 1.62; }
/* The question gets its own line and its own air — it is the thing being
   answered, and it was previously buried at the tail of the sentence above it. */
.market-offer .market-ask { margin: 0 0 12px; font-weight: 700; }
.market-offer-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.market-offer-buttons button { min-height: 46px; flex: 1; padding: 0 14px; color: var(--ink); background: #fff; border: 1px solid #d3dfd8; border-radius: 11px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .16s, border .16s, transform .16s, box-shadow .16s; }
.market-offer-buttons button:hover { border-color: #82aa96; background: #f6faf7; box-shadow: 0 5px 15px rgba(20,63,54,.07); transform: translateY(-1px); }
.market-ack { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
[data-sla-line] { margin: 10px 0 0; }

.lead-card { display: grid; gap: 10px; max-width: 480px; margin: 30px 0; }
.lead-contact-preference { display: grid; gap: 2px; padding: 10px 11px; border-radius: 10px; }
.lead-contact-preference span { color: var(--muted); font-size: 10px; }
.lead-contact-preference strong { font-size: 14px; font-weight: 800; }
.lead-contact-preference small { font-size: 9px; }
.lead-contact-preference.wants-call { background: #fdecea; border: 1px solid #f3c1b8; }
.lead-contact-preference.wants-call strong { color: var(--coral-dark); }
.lead-contact-preference.text-only { background: #f6faf7; border: 1px solid #dbe6e0; }
.lead-contact-preference.text-only strong { color: var(--ink-dark); }
.lead-contact-preference.declined { background: #f4f4f2; border: 1px solid #ddd8d0; }
.lead-contact-preference.declined strong { color: var(--muted); }
.lead-timeline-callout { display: flex; justify-content: space-between; align-items: center; padding: 10px 11px; background: #fef2ea; border: 1px solid #f3d9c4; border-radius: 10px; }
.lead-timeline-callout span { color: var(--muted); font-size: 10px; }
.lead-timeline-callout strong { color: var(--coral-dark); font-size: 16px; font-weight: 800; }
.lead-empty { max-width: 480px; margin: 30px 0; padding: 16px; color: var(--muted); background: var(--cream); border-radius: 11px; font-size: 13px; line-height: 1.55; }
.lead-consent { display: grid; gap: 6px; padding: 11px 13px; background: #f6faf7; border: 1px solid #dbe6e0; border-radius: 10px; }
.lead-consent p { margin: 0; font-size: 11px; font-weight: 700; }
.consent-given { color: #176647; }
.consent-missing { color: var(--muted); }
.do-not-solicit { color: var(--coral-dark); }

.live-range { position: relative; min-width: 0; overflow: hidden; padding: 24px; color: #fff; background: linear-gradient(155deg, #103b32, #092b25); border-radius: 20px; box-shadow: 0 18px 50px rgba(10,45,38,.18); isolation: isolate; }
.range-glow { position: absolute; top: -110px; right: -100px; z-index: -1; width: 310px; height: 310px; background: radial-gradient(circle, rgba(111,188,150,.25), transparent 67%); border-radius: 50%; transition: background .5s; }
.is-detailed .range-glow { background: radial-gradient(circle, rgba(235,151,101,.28), transparent 67%); }
.live-range.awaiting-save { box-shadow: 0 18px 55px rgba(10,45,38,.24), 0 0 0 2px rgba(231,132,86,.45); }
.awaiting-save .live-range-value { color: #ffd3b9; animation: resultReady 1.6s infinite ease-in-out; }
@keyframes resultReady { 50% { text-shadow: 0 0 20px rgba(255,185,143,.28); transform: scale(1.015); } }
.range-topline { display: flex; justify-content: space-between; align-items: center; color: #b7cec5; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.live-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; color: #cce4d9; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; font-size: 8px; }
.live-pill i { width: 5px; height: 5px; background: #70d5a2; border-radius: 50%; box-shadow: 0 0 0 4px rgba(112,213,162,.12); animation: livePulse 1.8s infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 7px rgba(112,213,162,0); } }
.range-house { position: relative; width: 180px; height: 120px; margin: 20px auto 5px; overflow: hidden; }
.range-house svg { width: 100%; height: 100%; }
.range-ground, .range-home, .range-roof, .range-door, .range-window { fill: none; stroke: #90b8a5; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s, fill .5s; }
.range-home { fill: rgba(144,184,165,.06); }
.range-door, .range-window { stroke-width: 2; }
.is-ready .range-ground, .is-ready .range-home, .is-ready .range-roof, .is-ready .range-door, .is-ready .range-window { stroke: #d2eadd; }
.is-detailed .range-home { fill: rgba(231,132,86,.16); }
.scan-line { position: absolute; left: 20px; right: 20px; top: 15px; height: 2px; background: linear-gradient(90deg, transparent, #71d6a3, transparent); box-shadow: 0 0 10px #71d6a3; animation: houseScan 2.8s infinite ease-in-out; }
@keyframes houseScan { 0%, 100% { top: 20px; opacity: .35; } 50% { top: 101px; opacity: 1; } }
.range-label { margin: 7px 0 6px; color: #9ebbb0; font-size: 10px; font-weight: 700; text-align: center; }
.live-range-value { min-height: 36px; display: block; color: #fff; font-family: 'Manrope', sans-serif; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.055em; text-align: center; font-variant-numeric: tabular-nums; }
.range-mask { color: #75978a; letter-spacing: -.02em; animation: maskBreath 1.8s infinite ease-in-out; }
@keyframes maskBreath { 50% { opacity: .5; } }
.range-scale { position: relative; height: 5px; margin: 19px 12px 17px; background: rgba(255,255,255,.12); border-radius: 999px; }
.range-scale span { position: absolute; left: 35%; right: 35%; height: 100%; background: linear-gradient(90deg, #77c6a0, #ef9a69); border-radius: inherit; transition: left .8s, right .8s; }
.is-ready .range-scale span { left: 18%; right: 18%; }
.is-detailed .range-scale span { left: 25%; right: 25%; }
.range-scale i { position: absolute; top: 50%; width: 11px; height: 11px; background: #fff; border: 3px solid #68b88f; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); transition: left .8s, opacity .4s; }
.is-ready .range-scale i { opacity: 1; }
.pin-low { left: 18%; }
.pin-high { left: 82%; }
.is-detailed .pin-low { left: 25%; border-color: var(--coral); }
.is-detailed .pin-high { left: 75%; border-color: var(--coral); }
.range-context { min-height: 51px; margin: 0; color: #b8cec5; font-size: 10px; line-height: 1.55; text-align: center; }
.range-fineprint { position: absolute; right: 20px; bottom: 14px; left: 20px; margin: 0; color: #608177; font-size: 7px; text-align: center; text-transform: uppercase; letter-spacing: .08em; }

.confidence-meter { margin-top: 14px; }
.confidence-meter-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: #9ebbb0; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.confidence-meter-head strong { color: #d4e7df; font-family: 'Manrope', sans-serif; font-size: 11px; font-variant-numeric: tabular-nums; }
.confidence-track { height: 5px; overflow: hidden; background: rgba(255,255,255,.12); border-radius: 999px; }
.confidence-track span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #51ba86, #79e6b0); border-radius: inherit; transition: width .5s ease; }
.is-detailed .confidence-track span { background: linear-gradient(90deg, #79e6b0, var(--coral)); }

@media (max-width: 800px) {
  /* MOBILE REACHABILITY FIX — 2026-08-20, reported by Nigel from his own phone:
     on "Which part of town is that?" the lower answer chips could not be tapped and the
     page would not scroll to them. Reproduced at 390x620: the wizard rendered 647px tall
     against a 620px viewport, putting "East" and "Not sure" 14px below the fold, while
     `overflow: hidden` on the body made scrolling to them impossible. Two causes, both here:

       1. `min-height: 620px` was a FLOOR taller than a short phone's usable area. A floor
          plus a scroll lock means controls that exist, render, and cannot be reached.
       2. `100vh` on mobile is the LARGE viewport — it excludes the browser's URL bar. While
          that bar is showing, real usable height is ~60-120px LESS than 100vh, so anything
          sized to it hangs off the bottom of the screen by design.

     `100dvh` tracks the actually-visible area, so it shrinks when the URL bar is showing.
     The plain `100vh` line stays first as the fallback for anything that lacks dvh.
     `overflow-y: auto` is the safety net: if the content still cannot fit, the user can
     scroll to it rather than being stuck. Never re-add a fixed min-height here. */
  body.wizard-open { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* --vv-height is set from visualViewport by app.js and is the only value that
     shrinks when the SOFTWARE KEYBOARD opens; dvh only tracks the URL bar. The
     two fallbacks stay in order so the last one a browser understands wins. */
  .wizard:not([hidden]) {
    height: calc(100vh - 30px);
    height: calc(100dvh - 30px);
    height: calc(var(--vv-height, 100dvh) - 30px);
    min-height: 0;
  }
  .wizard-layout { width: min(100% - 20px, 620px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 10px; margin-top: 10px; }
  .live-range { order: -1; min-height: 124px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; align-items: center; padding: 14px 17px; border-radius: 15px; }
  .range-topline { grid-column: 1 / -1; }
  .range-house, .range-scale, .range-fineprint, .confidence-meter { display: none; }
  .range-label { margin: 11px 0 2px; text-align: left; }
  .live-range-value { min-height: 27px; font-size: 22px; text-align: left; }
  .range-context { grid-column: 2; grid-row: 2 / 4; width: 155px; min-height: 0; margin-left: 14px; text-align: right; font-size: 8px; }
  .chat-shell { border-radius: 15px; }
  .chat-intro { min-height: 52px; padding: 8px 13px; }
  .guide-avatar { width: 33px; height: 33px; }
  .chat-feed { padding: 18px 13px 8px; }
  .chat-feed::before { margin-bottom: 16px; }
  .chat-composer { max-height: 46%; padding: 10px 11px 12px; }
}

@media (max-width: 520px) {
  .wizard .wizard-header { flex-basis: 58px; height: 58px; }
  .wizard .progress-wrap { width: calc(100% - 24px); margin-top: 10px; }
  .wizard-layout { width: calc(100% - 12px); margin-top: 8px; }
  .wizard .wizard-footer { display: none; }
  .live-range { min-height: 110px; padding: 11px 13px; }
  .range-context { width: 115px; }
  .range-label { margin-top: 8px; font-size: 8px; }
  .live-range-value { font-size: 18px; }
  .chat-intro span:not(.guide-avatar) { display: none; }
  .chat-bubble { max-width: 90%; font-size: 15px; padding: 12px 14px; }
  .chat-avatar { width: 25px; height: 25px; }
  .chat-options { grid-template-columns: 1fr 1fr; gap: 7px; }
  .chat-option { min-height: 52px; padding: 10px 12px; gap: 10px; }
  .chat-option-icon { display: none; }
  .chat-option strong { font-size: 13px; }
  .chat-option small { font-size: 10px; }
  .chat-option > i { width: 19px; height: 19px; }
  .named-professional { padding: 9px 10px; }
  /* On a phone the contact card is the screen. It gets everything that is not
     the header and the feed's own floor, so the trust line at its foot is never
     the part that falls off. */
  .chat-composer.phone-mode { max-height: calc(100% - 172px); padding: 8px; }
  .phone-capture-card { padding: 13px; }
  /* Visually redundant beside the helper line and the field's own placeholder,
     and the ~28px it costs is the difference between the card fitting and not.
     Hidden, not removed: it is still the input's label for a screen reader. */
  .phone-label { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .report-preview { padding: 8px 9px; }
  .report-preview li { font-size: 10px; }
  .phone-entry { grid-template-columns: minmax(70px, 1fr) auto; }
  .phone-entry button { grid-column: 1 / -1; width: calc(100% - 8px); justify-content: center; margin: 0 4px 4px; }
  .phone-input { grid-row: 1; }
}

/* Home intelligence visual system */
.landing { position: relative; overflow: hidden; background: radial-gradient(circle at 77% 17%, rgba(103,220,179,.12), transparent 28%), linear-gradient(180deg, #fbfcfa, #fffdf9 76%); }
.landing::before { content: ''; position: absolute; inset: 0 0 auto 52%; z-index: 0; width: 760px; height: 760px; opacity: .32; background-image: linear-gradient(rgba(20,63,54,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(20,63,54,.06) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle, #000 0, transparent 68%); transform: perspective(700px) rotateX(58deg) translateY(-240px); pointer-events: none; }
.landing .site-header, .landing .hero { position: relative; z-index: 1; }
.intelligence-eyebrow { display: flex; align-items: center; gap: 8px; }
.intelligence-eyebrow span { display: inline-flex; align-items: center; gap: 7px; color: #dffbeb; background: var(--ink-dark); border: 1px solid rgba(93,222,169,.25); box-shadow: 0 5px 18px rgba(20,63,54,.14); }
.intelligence-eyebrow span i { width: 6px; height: 6px; background: #72e1aa; border-radius: 50%; box-shadow: 0 0 0 4px rgba(114,225,170,.12), 0 0 13px #72e1aa; animation: livePulse 1.8s infinite; }
.truth-chip { width: max-content; display: flex; align-items: center; gap: 9px; margin: -13px 0 25px; padding: 7px 10px; color: #557068; background: rgba(255,255,255,.72); border: 1px solid #dce6e0; border-radius: 8px; box-shadow: 0 5px 18px rgba(20,63,54,.04); font-size: 10px; font-weight: 700; backdrop-filter: blur(8px); }
.truth-chip i { color: var(--coral); font-size: 14px; font-style: normal; }
.intelligence-visual { min-height: 500px; border-radius: 26px; }
.intelligence-visual::before { inset: 5px; background: linear-gradient(145deg, #0b2924, #061c19); border: 1px solid rgba(118,236,187,.15); border-radius: 27px; box-shadow: 0 32px 80px rgba(6,36,30,.23); }
.intelligence-visual::after { right: -28px; bottom: -20px; width: 170px; height: 170px; opacity: .45; background-image: radial-gradient(#79d8aa 1px, transparent 1.4px); background-size: 13px 13px; }
.intelligence-shell { position: absolute; inset: 5px; z-index: 2; overflow: hidden; border-radius: 27px; }
.system-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(114,225,170,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(114,225,170,.16) 1px, transparent 1px); background-size: 31px 31px; mask-image: linear-gradient(to bottom, #000, transparent 87%); animation: systemGrid 14s linear infinite; }
@keyframes systemGrid { to { background-position: 31px 31px; } }
.ai-core { position: absolute; top: 72px; left: 50%; z-index: 4; width: 66px; height: 66px; display: grid; place-items: center; color: #dffbed; background: radial-gradient(circle at 38% 30%, #3a8d6e, #0e3f33 61%, #06241f); border: 1px solid rgba(126,237,191,.55); border-radius: 50%; box-shadow: 0 0 40px rgba(103,231,176,.24), inset 0 0 19px rgba(132,240,195,.17); font-family: 'Manrope'; font-size: 14px; font-weight: 800; transform: translateX(-50%); animation: coreFloat 3.2s infinite ease-in-out; }
.ai-core::after { content: 'HOME INTELLIGENCE'; position: absolute; top: 73px; width: 140px; color: #71978a; font-size: 6px; letter-spacing: .18em; text-align: center; }
.ai-core i { position: absolute; inset: -13px; border: 1px solid rgba(113,221,167,.25); border-radius: 50%; animation: orbitSpin 8s linear infinite; }
.ai-core i::before { content: ''; position: absolute; top: 5px; left: 9px; width: 5px; height: 5px; background: #72e1aa; border-radius: 50%; box-shadow: 0 0 9px #72e1aa; }
.ai-core i:nth-child(2) { inset: -24px; opacity: .62; animation-duration: 12s; animation-direction: reverse; }
.ai-core i:nth-child(3) { inset: -35px; opacity: .3; animation-duration: 17s; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes coreFloat { 50% { transform: translate(-50%, -5px); } }
.wire-home { position: absolute; top: 85px; left: 50%; width: 88%; height: 360px; transform: translateX(-50%); }
.wire-ground, .wire-shape, .wire-roof, .wire-detail, .wire-room, .signal-path { stroke: #72ad93; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wire-shape { fill: rgba(104,202,156,.035); stroke: #a0d2bb; stroke-width: 2; }
.wire-roof { stroke: #b6e4ce; stroke-width: 2.4; }
.wire-detail, .wire-room { opacity: .62; }
.signal-path { opacity: .45; stroke-dasharray: 4 7; animation: pathFlow 2s linear infinite; }
@keyframes pathFlow { to { stroke-dashoffset: -22; } }
.signal-node { fill: #071f1b; stroke: #75e0ab; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: signalNode 2s infinite ease-in-out; }
.signal-node.n2 { animation-delay: .45s; }
.signal-node.n3 { animation-delay: .9s; }
@keyframes signalNode { 50% { fill: #75e0ab; transform: scale(1.45); filter: drop-shadow(0 0 7px #75e0ab); } }
.hero-scan { position: absolute; top: 82px; right: 28px; left: 28px; z-index: 3; height: 2px; background: linear-gradient(90deg, transparent, #73e7ad, #baffde, #73e7ad, transparent); box-shadow: 0 0 19px rgba(115,231,173,.75); animation: heroScan 4.2s infinite ease-in-out; }
@keyframes heroScan { 0%, 100% { top: 92px; opacity: .25; } 50% { top: 410px; opacity: 1; } }
@keyframes cursorBlink { 50% { opacity: 0; } }
/* With the status bar and the two signal cards gone, this is the only claim
   the visual makes - your number lands here - so it is no longer set in 6px. */
.future-range { position: absolute; right: 24px; bottom: 22px; left: 24px; z-index: 5; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.future-range small { color: #7ba493; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.future-range strong { grid-row: 1 / 3; grid-column: 2; color: #f2ad85; font-family: 'Manrope'; font-size: 23px; letter-spacing: -.045em; }
.future-range span { color: #9bb7ac; font-size: 11px; }

.wizard .progress-track span { position: relative; overflow: hidden; background: linear-gradient(90deg, #51ba86, #79e6b0, #e78456); }
.wizard .progress-track span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); transform: translateX(-100%); animation: progressScan 2.4s infinite; }
@keyframes progressScan { to { transform: translateX(100%); } }
.intelligence-avatar { position: relative; background: radial-gradient(circle at 35% 28%, #65c99a, #0d3a30 68%); box-shadow: 0 0 0 4px #ddefe6, 0 0 24px rgba(82,195,143,.3); }
.chat-intro span:not(.guide-avatar)::before { display: none; }
.chat-shell { border-color: rgba(54,123,94,.2); box-shadow: 0 18px 52px rgba(12,55,46,.11), 0 0 0 1px rgba(118,225,178,.08); }
.assistant-bubble { background: linear-gradient(135deg, #edf5f0, #f4f6f4); border-left: 2px solid #69bd92; }
.chat-option:hover { border-color: #55bb88; box-shadow: 0 7px 20px rgba(35,130,87,.12), 0 0 0 2px rgba(84,190,137,.08); }
.live-range .range-house { width: 150px; height: 92px; margin: 6px auto 0; }
.live-range .range-context { min-height: 36px; }
.analysis-stream { display: grid; gap: 5px; margin-top: 11px; padding: 10px; background: rgba(0,0,0,.14); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; }
.stream-head { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; color: #77998c; font-size: 6px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.stream-head > span { color: #71dba7; }
.stream-head i { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(113,219,167,.35), transparent); }
.signals-count { flex: 0 0 auto; color: #71dba7; font-size: 6px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.analysis-stream p { display: flex; align-items: center; gap: 7px; margin: 0; color: #66877b; font-family: monospace; font-size: 7px; line-height: 1.25; transition: color .35s; }
.analysis-stream p > i { width: 5px; height: 5px; flex: 0 0 auto; background: #496b5e; border-radius: 50%; transition: background .35s, box-shadow .35s; }
.analysis-stream p.active { color: #bdd9ce; }
.analysis-stream p.active > i { background: #71dda8; box-shadow: 0 0 7px #71dda8; }
.live-range .range-fineprint { bottom: 8px; font-size: 6px; }

@media (max-width: 900px) {
  .intelligence-visual { width: min(620px, 100%); min-height: 540px; }
}

@media (max-width: 800px) {
  .live-range .analysis-stream { display: none; }
}

@media (max-width: 680px) {
  .intelligence-eyebrow { justify-content: center; }
  .truth-chip { margin-right: auto; margin-left: auto; }
  .intelligence-visual { min-height: 430px; transform: none; }
  .intelligence-visual::before, .intelligence-shell { inset: 0; }
  .wire-home { top: 66px; height: 295px; }
  .ai-core { top: 59px; width: 52px; height: 52px; }
  .ai-core::after { top: 59px; }
  .future-range { bottom: 12px; }
  .future-range strong { font-size: 13px; }
  .hero { min-height: auto; padding-top: 30px; padding-bottom: 55px; }
  .hero-copy { text-align: center; }
  .landing-address-form { margin-right: auto; margin-left: auto; text-align: left; }
  .privacy-note { justify-content: center; }
}

@media (max-width: 430px) {
  .intelligence-visual { min-height: 390px; }
  .future-range { right: 10px; left: 10px; }
  .landing-address-entry { grid-template-columns: 20px minmax(0, 1fr); padding: 7px 9px 7px 13px; }
  .landing-address-entry .primary-cta { grid-column: 1 / -1; width: 100%; }
  .landing-address-entry input { font-size: 14px; }
  .privacy-note { align-items: flex-start; text-align: left; }
}

/* KEYBOARD-OPEN STATE — see trackKeyboard() in app.js.
   Sizing the wizard to the VISUAL viewport removes the overflow the browser
   would otherwise scroll to reach the focused field, and the range panel drops
   to its number so it still fits above the keyboard. */
body.keyboard-open .wizard:not([hidden]) { height: var(--vv-height, 100dvh); min-height: 0; }
body.keyboard-open .demo-banner { display: none; }
body.keyboard-open .wizard .wizard-header { flex-basis: 46px; height: 46px; }
body.keyboard-open .wizard .progress-wrap { margin-top: 6px; }
body.keyboard-open .live-range { min-height: 0; padding: 8px 14px; }
body.keyboard-open .range-topline,
body.keyboard-open .range-context { display: none; }
body.keyboard-open .range-label { margin: 0 0 1px; }
body.keyboard-open .chat-intro { display: none; }

/* The free-text note on the report screen. Deliberately quiet — it is optional,
   it sits after the conversion, and it must not compete with the monitor offer
   beneath it. */
.extras-block { margin-top: 14px; padding: 15px 16px; background: #f6faf7; border: 1px solid #dbe6e0; border-radius: 12px; }
.extras-label { display: block; font-size: 15px; font-weight: 700; color: var(--ink-dark); }
.extras-hint { margin: 5px 0 9px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.extras-input { width: 100%; padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.5; color: var(--ink-dark); background: #fff; border: 1px solid #d5e0d9; border-radius: 9px; resize: vertical; }
.extras-input:focus-visible { outline: 2px solid #3d9669; outline-offset: 1px; }
.extras-sell { margin: 0 0 10px; color: var(--ink-dark); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.extras-block .link-button { margin-top: 8px; }
.extras-ack { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-dark); }

/* The explanatory line under the ask. Deliberately quiet and last: it carries a
   restriction, and a restriction announced loudly reads as a wall rather than
   as the reason a person is involved. */
.assistant-bubble .prompt-fine { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* ── The software keyboard ────────────────────────────────────────────────────
   Set by app.js from visualViewport. With the keyboard up the shell is roughly
   half its height, and the composer's percentage max-height collapsed the
   contact card into a strip whose own submit button sat off-screen.
   The transcript is not what anyone is reading at that moment, so it yields. */
/* ⚠ These hung off the wrong element, from a duplicate detector that has
   since been removed. The one detector sets `body.keyboard-open`. Two of the
   selectors below were also wrong: one named a progress class that does not
   exist (it is `.progress-wrap`), so the bar was never hidden — visible in
   Nigel's screenshot, still taking a row while the message was cut in half.

   The feed was also clamped to 64px, which is about two lines. With autofocus
   gone the keyboard only opens once someone has read the message and tapped,
   so the clamp can be generous: enough to keep the ask in view while typing. */
/* ⚠⚠ THE GAP UNDER THE KEYBOARD, and it was two faults stacked (Nigel,
   2026-08-31, from his own phone: "still a bit below keyboard that takes away
   from chat screen seen").

   1. The feed is capped at 34vh while the keyboard is up — and `vh` is the LARGE
      viewport, so it does NOT shrink when the keyboard opens. 34vh stays ~276px
      of an 812px screen no matter how little screen is actually left.
   2. The report screen's composer was emptied on 2026-08-30 rather than removed,
      so it still drew its padding and its top border — and, worse, the space it
      no longer filled was left as a hole between the capped feed and the
      keyboard.

   Together: a fixed-height feed, an empty strip under it, and nothing claiming
   the remainder. An empty composer now disappears entirely, and where there is
   no composer the feed takes everything left. */
#chat-composer:empty { display: none; }
body.keyboard-open .chat-feed { flex: 0 1 auto; max-height: 34vh; }
body.keyboard-open .chat-shell:has(#chat-composer:empty) .chat-feed { flex: 1 1 auto; max-height: none; }
/* The contact card is deliberately small now (see below), so the feed may keep
   more of the screen than the 34vh a full-height composer needed. */
body.keyboard-open .chat-shell:has(.phone-capture-card) .chat-feed { max-height: 44vh; }
body.keyboard-open .progress-wrap,
body.keyboard-open .wizard-footer { display: none; }
body.keyboard-open .chat-composer.phone-mode { max-height: none; overflow-y: visible; padding: 6px 8px 4px; }
body.keyboard-open .phone-capture-card { padding: 12px 12px 8px; }
/* 44px is the smallest a touch target should be, and this stops there. The point
   is not to shave the control — it is that every pixel taken off the card is a
   pixel of conversation still visible while somebody types their number. */
body.keyboard-open .phone-entry input,
body.keyboard-open .phone-entry button { height: 44px; }
body.keyboard-open .why-phone { display: none; }
/* ⭐ THE DEAD SPACE UNDER THE FIELD (Nigel, 2026-08-30). With the keyboard up
   there is very little screen left, and ~32px of what was left was reserved for
   nothing: the error line holds an empty 18px box against layout shift, and the
   trust line's own top margin and rule were sized for a full-height screen.
   Reclaiming it moves the top of the composer DOWN, which is the whole point —
   every pixel taken from under the field is a pixel of conversation the visitor
   can still see while they type.
   ⚠ Keyboard-open only. Nothing about the ordinary layout changes, and the error
   still reserves its space there, where the screen can afford it. */
/* ⭐ THE CARD COLLAPSES TO THE FIELD ITSELF once the keyboard is up. Nigel,
   2026-08-31: "ideally when the keyboard pops up the contact info gets captured
   lower, where they've been clicking all along vs this big pop up that changes
   things." The card was ~278px against the ~130px of option buttons his thumb
   had been using for ten questions, so the whole conversation jumped upward at
   the one moment he was deciding whether to hand over a number.
   Everything hidden here is a DECISION or a re-read, and both are already made
   by the time somebody is typing: the lane switch, and "a text, not a call".
   ⚠ The privacy assurance is NOT hidden — that is the sentence doing work at
   exactly this moment. It is split instead, so its promise stays on screen and
   only the elaboration goes. */
body.keyboard-open .phone-capture-card .link-button,
body.keyboard-open .text-not-call { display: none; }
body.keyboard-open .trust-more { display: none; }
body.keyboard-open .trust-line { margin-top: 8px; padding-top: 8px; font-size: 11.5px; }

/* ── The contact step, where vertical room is the scarce resource ────────────
   Set by app.js on the phone step only. Everything here has already done its
   job by this point and is compacted, not removed: the progress bar reads
   "Home complete ✓", and the range has been on screen for several questions.
   Roughly 250px comes back, which is the difference between the ask being
   readable and being cut in half. */
body.contact-step .progress-wrap { display: none; }
body.contact-step .chat-intro { display: none; }
body.contact-step .live-range { min-height: 0; padding: 11px 15px; }
body.contact-step .range-context,
body.contact-step .range-topline { display: none; }
body.contact-step .live-range-value { font-size: 19px; }
body.contact-step .range-label { margin: 0 0 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE REPORT SCREEN'S TYPE SCALE — added 1 September 2026.

   Nigel: "Just lots of different sizes, and bold / not bold, without what seems
   like a strategy behind it. It's the most 'off' page." He was counting
   correctly: this one screen carried TWELVE distinct size/weight combinations,
   applied per-block by whoever built that block. There was no strategy, because
   nobody had ever written one down.

   There is one now. Size encodes ROLE, never importance — importance is carried
   by weight and by state, so a block never has to grow to be noticed:

     NUMBER   17px / 700   the estimate. Exactly one per screen, and the largest
                           thing on it, because it is what they came for.
     ASK      15px / 700   a question or offer headline. One per block.
     RESULT   15px / 400   what happened after answering. Same size as the ask
                           it replaces, so nothing jumps; weight tells them apart.
     SUPPORT  14px / 400   the explanation. Always beneath an ask, never alone.
     FINE     12.5px / 400 one-line caveats only. If it matters, it is SUPPORT.
     EYEBROW  10px / 800   uppercase section label. Decorative; carries no
                           meaning that is not repeated beneath it.

   Bold is for the ask, and for a specific noun worth landing on (an email
   address). It is NOT for the agent's name: that was bolded seven times here,
   and bold everywhere is bold nowhere.

   ⚠ EVERY SELECTOR IS SCOPED UNDER .assistant-bubble ON PURPOSE. The first
   version of this block was not, and `.assistant-bubble span` (0,1,1) quietly
   out-specified `.share-title` (0,1,0) — so the asks kept rendering at 13px and
   the scale appeared to do nothing. Measured in the browser, not assumed.
   ═══════════════════════════════════════════════════════════════════════════ */
.assistant-bubble .share-title,
.assistant-bubble .extras-label,
.assistant-bubble .realtor-status-check > span,
.assistant-bubble .market-offer .market-ask,
.assistant-bubble .named-professional strong { display: block; margin-top: 0; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ink-dark); }

.assistant-bubble .share-ack,
.assistant-bubble .extras-ack,
.assistant-bubble .monitor-note,
.assistant-bubble .market-ack { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--ink-dark); }

.assistant-bubble .share-hint,
.assistant-bubble .extras-hint,
.assistant-bubble .extras-sell,
.assistant-bubble .named-professional small,
.assistant-bubble .market-offer > p:not(.market-ask) { display: block; font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--muted); }

.assistant-bubble .share-fine,
.assistant-bubble .monitor-fine { font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--muted); }

.assistant-bubble .named-professional > span:first-child { margin-top: 0; font-size: 10px; font-weight: 800; letter-spacing: .1em; }

/* The monitor's ask is a paragraph rather than a heading, so it is named here
   rather than restructured — first paragraph is the ask, the rest support. */
.assistant-bubble .monitor-offer > p:first-of-type { font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ink-dark); }

/* The number, and its label. */
.assistant-bubble .report-range span { font-size: 14px; color: var(--muted); }
.assistant-bubble .report-range strong { font-size: 17px; font-weight: 700; }

/* Links on this screen are controls, not fine print. */
.assistant-bubble .link-button { font-size: 14px; }

/* ⭐ "The 3 biggest mistakes" — Nigel: "make it pop a bit more. highlighted or
   something." Bold was already spent on the ask, so this is a highlight: the one
   thing on the page being given away, marked as such. */
.assistant-bubble mark {
  padding: 1px 4px; background: #fdf0d9; border-radius: 3px;
  color: var(--ink-dark); font-weight: 700;
}

/* ⭐ "WHEN SOMETHING NEW IS ADDED... it's hard to tell what gets added." Every
   answer swaps a block in place, silently — the change lands wherever the
   visitor is not looking. A brief tint that fades pulls the eye to what moved
   without adding anything permanent to the design. */
@keyframes justAdded {
  0%   { background: #e7f3ec; box-shadow: 0 0 0 6px #e7f3ec; }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}
.just-added { animation: justAdded 1.6s ease-out 1; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  .just-added { animation: none; }
}