/* v5-warm: the one page. Hero option B4, picked 2026-11-05 (built in _build/hero-options/b4/ from B, B2 and B3,
   with patterns taken from Checkmate Financial Group, ~/code/Website Inspiration/checkmatefinancialgroup.com).
   Hero: the porch photo runs edge to edge across the top on phones and sits as a rounded frame on the right on
   desktop (B5 framed, 2026-11-05); headline and one
   button, "See what it would cost", on the band. The button opens the question card (the engine's start-closed mode:
   a [data-quiz-open] button, #quiz hidden until it is pressed): over the dimmed photo on desktop, under the headline
   on phones. The checklist sits in a darker strip under the hero. Below: one set of tokens, a fluid type and
   spacing scale, a tracked eyebrow with a short rule on every section, left-aligned serif headings, layered shadows,
   dark sections alternating with light ones, a big stat, numbered points and questions, a dark rounded closing
   panel, and sections that ease in. The footer, the quiz and the bottom bar keep their shared styles. */

.v5-warm-page {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-settle: 1.4s;
  --dur-fast: .18s;
  --dur-reveal: .6s;
  --band-rgb: 44 74 99;                       /* --band (#2C4A63) as channels, for the photo dimming */
  --pad-section: clamp(56px, 2.5rem + 5vw, 112px);
  --fs-title: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  --tint: #EDEAE3;
  --line-light: rgb(29 39 51 / .12);
  --line-dark: rgb(244 241 236 / .16);
  --eyebrow-light: var(--accent-600);
  --shadow-button: 0 1px 2px rgb(10 20 30 / .2), 0 4px 12px rgb(10 20 30 / .16);
  --shadow-photo: 0 1px 2px rgb(16 28 40 / .08), 0 12px 28px rgb(16 28 40 / .12), 0 32px 64px rgb(16 28 40 / .10);
  --shadow-panel: 0 2px 4px rgb(16 28 40 / .10), 0 18px 40px rgb(16 28 40 / .18), 0 48px 96px rgb(16 28 40 / .16);
  --shadow-cta: 0 1px 2px rgb(16 28 40 / .16), 0 6px 16px rgb(16 28 40 / .14);
}

/* Header: part of the band, not a cream lid on the photo. */
.v5-warm-header { background: var(--band); border-bottom-color: rgb(244 241 236 / .12); }
.v5-warm-header .site-header__brand { color: var(--band-text); }
.v5-warm-header .site-header__note { color: var(--band-muted); }

/* Wordmark: the site's own address (the brand, 2026-11-05) after a small house mark in the button color.
   Weight and color split it into Find / MortgageProtection / .com so it reads at a glance. */
.v5-warm-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; line-height: 1; letter-spacing: -.005em; white-space: nowrap; }
.v5-warm-brand__mark { flex: none; width: 28px; height: 28px; }
.v5-warm-brand__mark rect { fill: var(--accent); }
.v5-warm-brand__mark path { fill: none; stroke: var(--on-accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.v5-warm-brand__find, .v5-warm-brand__tld { font-weight: 400; }
.v5-warm-brand__tld { color: var(--mark-on-band); }

/* ---------- Hero ---------- */
.v5-warm-band {
  --shadow-card:
    0 1px 2px rgb(10 20 30 / .16),
    0 10px 24px rgb(10 20 30 / .2),
    0 36px 72px rgb(10 20 30 / .3);
}
.v5-warm-band::before, .v5-warm-band::after { display: none; }
.v5-warm-band > .v5-warm-hero { z-index: 2; margin-top: 0; }

/* Photo: edge to edge. Phones: across the top. */
.v5-warm-photo {
  position: relative; z-index: 0;
  margin: 0; aspect-ratio: 16 / 10; overflow: hidden;
  border: 0; border-radius: 0; background: none;
}
.v5-warm-photo picture { display: block; height: 100%; }
.v5-warm-photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 52% 45%;
  animation: v5-warm-settle var(--dur-settle) var(--ease-out) both;
  transition: filter .55s var(--ease-out);
}
@keyframes v5-warm-settle { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

/* Open: the button goes, the card shows; the photo blurs and dims behind it. */
.v5-warm-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgb(var(--band-rgb) / .62);
  opacity: 0; transition: opacity .55s var(--ease-out);
}
.v5-warm-band:has(#quiz:not([hidden])) .v5-warm-photo::before { opacity: 1; }
.v5-warm-band:has(#quiz:not([hidden])) .v5-warm-photo img { filter: blur(3px); }
.v5-warm-hero:has(> #quiz:not([hidden])) .v5-warm-start { display: none; }

/* Eyebrow: tracked small caps with a short rule in front. Headline: one fluid size from phone to desktop. */
.v5-warm-hero .eyebrow { display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .06em; }
.v5-warm-hero .eyebrow::before { content: ""; flex: 0 0 20px; height: 2px; border-radius: 1px; background: currentColor; }
.v5-warm-hero .h1 { font-size: clamp(2rem, 1.15rem + 3vw, 3.375rem); line-height: 1.08; letter-spacing: -.01em; }

/* The button: wide on phones, arrow nudges on hover. */
.v5-warm-start {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 60px; margin-top: 28px; padding: 0 28px 0 32px;
  border: 0; border-radius: 12px; box-shadow: var(--shadow-button);
  background: var(--accent); color: var(--on-accent);
  font: 700 18px/1 var(--font-body); letter-spacing: .005em;
  cursor: pointer;
}
@media (hover: hover) { .v5-warm-start:hover { background: var(--accent-600); } }
.v5-warm-start:focus-visible { outline: 3px solid var(--band-text); outline-offset: 3px; }
.v5-warm-start svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .v5-warm-start:hover svg { transform: translateX(4px); } }

/* Subhead: the answer to the headline's problem, between it and the button. */
.v5-warm-hero .v5-warm-sub { max-width: none; margin-top: 16px; color: var(--band-muted); text-wrap: balance; }

/* The checklist: a darker strip right under the hero (three across on desktop). */
.v5-warm-strip { background: #233D52; color: var(--band-text); border-top: 1px solid rgb(244 241 236 / .12); }
.v5-warm-strip .warm-check { box-sizing: content-box; max-width: 1120px; margin: 0 auto; padding: 28px 16px 32px; }
.v5-warm-strip .warm-check > li { font-size: 16px; }
.v5-warm-strip .warm-check > li > span { text-wrap: pretty; }

/* ---------- Sections below the hero ---------- */
.v5-warm-sec { padding-block: var(--pad-section); }
.v5-warm-wrap { box-sizing: content-box; max-width: 1120px; margin-inline: auto; padding-inline: 16px; }

/* Section heads: eyebrow with a rule, a big left-aligned serif title, a short lead. */
.v5-warm-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase;
  color: var(--eyebrow-light);
}
.v5-warm-eyebrow::before { content: ""; flex: 0 0 28px; height: 2px; border-radius: 1px; background: currentColor; }
.v5-warm-eyebrow--center { justify-content: center; }
.v5-warm-eyebrow--center::after { content: ""; flex: 0 0 28px; height: 2px; border-radius: 1px; background: currentColor; }
.v5-warm-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-title); line-height: 1.1; letter-spacing: -.01em;
  color: var(--text); text-wrap: balance;
}
.v5-warm-lead { max-width: 56ch; margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
.v5-warm-head--wide .v5-warm-title { max-width: 20ch; }

/* The button below the hero: same look as the hero's. */
.v5-warm-cta {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 60px; margin-top: 28px; padding: 0 28px 0 32px;
  border-radius: 12px; box-shadow: var(--shadow-cta);
  background: var(--accent); color: var(--on-accent);
  font: 700 18px/1 var(--font-body); text-decoration: none;
}
.v5-warm-cta svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .v5-warm-cta:hover { background: var(--accent-600); }
  .v5-warm-cta:hover svg { transform: translateX(4px); }
}

/* 1. Where the money goes: white, photo beside the copy, three choices. */
.v5-warm-money { background: var(--white); }
.v5-warm-money__grid { display: grid; gap: 40px; }
.v5-warm-kitchen {
  margin: 0; aspect-ratio: 16 / 9; overflow: hidden;
  border: 0; border-radius: 16px; background: var(--tint); box-shadow: var(--shadow-photo);
}
.v5-warm-options { margin-top: 28px; border-bottom: 1px solid var(--line-light); }
.v5-warm-options > li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px;
  padding: 16px 0; border-top: 1px solid var(--line-light);
  font-size: 17px; line-height: 1.5; color: var(--text-muted);
}
.v5-warm-options > li::before {
  content: ""; width: 22px; height: 22px; margin-top: 1px; background: var(--accent);
  -webkit-mask: var(--icon-check) center / 22px no-repeat; mask: var(--icon-check) center / 22px no-repeat;
}
.v5-warm-options strong { color: var(--text); }

/* 2. Living benefits: a dark band, numbered points. */
.v5-warm-living {
  background: linear-gradient(165deg, #335571 0%, var(--band) 42%, #22394D 100%);
  color: var(--band-text);
}
.v5-warm-living .v5-warm-eyebrow { color: var(--mark-on-band); }
.v5-warm-living .v5-warm-title { color: var(--band-text); }
.v5-warm-living .v5-warm-lead { color: var(--band-muted); }
.v5-warm-trio { display: grid; gap: 32px; margin-top: 44px; }
.v5-warm-trio > li { padding-top: 22px; border-top: 1px solid var(--line-dark); }
.v5-warm-trio > li:nth-child(2) { --i: 1; }
.v5-warm-trio > li:nth-child(3) { --i: 2; }
.v5-warm-trio__num { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--mark-on-band); }
.v5-warm-trio h3 { margin-top: 12px; font-family: var(--font-display); font-size: 23px; font-weight: 600; line-height: 1.25; color: var(--band-text); }
.v5-warm-trio p { margin-top: 8px; font-size: 17px; line-height: 1.55; color: var(--band-muted); text-wrap: pretty; }
.v5-warm-trio > li::after { content: ""; display: block; width: 24px; height: 2px; margin-top: 20px; border-radius: 1px; background: var(--mark-on-band); }
.v5-warm-note { max-width: 72ch; margin-top: 44px; font-size: 14px; line-height: 1.55; color: var(--band-muted); }

/* 3. What it costs: the big number. */
.v5-warm-cost { background: var(--bg); }
.v5-warm-cost__grid { display: grid; gap: 28px; }
.v5-warm-stat { display: grid; gap: 6px; }
.v5-warm-stat__num {
  font-family: var(--font-display); font-weight: 600; line-height: .9; letter-spacing: -.03em;
  font-size: clamp(5.5rem, 3.5rem + 9vw, 10rem); color: var(--band);
}
.v5-warm-stat__num > span { font-size: .5em; letter-spacing: 0; vertical-align: .62em; margin-left: .04em; }
.v5-warm-stat__label { max-width: 24ch; font-size: 18px; line-height: 1.45; color: var(--text-muted); }
.v5-warm-foot { max-width: 60ch; margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

/* 4 and 5. How it works and Questions: heading on the left, list on the right.
   The steps list keeps the engine's .steps class (the engine hides "What happens next" after an exit),
   so these rules replace the shared numbered-circle look. */
.v5-warm-next { background: var(--white); }
.v5-warm-split { display: grid; gap: 32px; }
.v5-warm-steps { display: block; gap: 0; counter-reset: v5-warm-step; border-bottom: 1px solid var(--line-light); }
.v5-warm-steps > li {
  counter-increment: v5-warm-step;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: baseline;
  padding: 22px 0; border-top: 1px solid var(--line-light);
  font-size: 17px; line-height: 1.55; color: var(--text);
}
.v5-warm-steps > li::before {
  content: counter(v5-warm-step);
  display: block; place-items: normal; width: auto; height: auto; margin-top: 0;
  border: 0; border-radius: 0; background: none;
  font-family: var(--font-display); font-size: 36px; font-weight: 600; line-height: 1; color: var(--band);
}

.v5-warm-faq { background: var(--tint); }
.v5-warm-faq__list { counter-reset: v5-warm-q; border-top-color: var(--line-light); }
.v5-warm-faq__list details { counter-increment: v5-warm-q; border-bottom-color: var(--line-light); }
.v5-warm-faq__list summary { justify-content: flex-start; gap: 14px; min-height: 64px; padding: 16px 0; }
.v5-warm-faq__list summary::before { content: counter(v5-warm-q, decimal-leading-zero); flex: 0 0 26px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--eyebrow-light); }
.v5-warm-faq__list summary::after { margin-left: auto; }
.v5-warm-faq__list details > p { max-width: 62ch; padding-left: 40px; padding-bottom: 20px; font-size: 17px; line-height: 1.6; color: var(--text-muted); }

/* 6. Closing: a dark rounded panel on white instead of a full-width band. */
.warm-closing.v5-warm-closing { padding: var(--pad-section) 16px; background: var(--white); }
.v5-warm-panel {
  max-width: 1120px; margin: 0 auto; padding: clamp(48px, 2rem + 4vw, 88px) 20px;
  border-radius: 24px; box-shadow: var(--shadow-panel);
  background: radial-gradient(120% 130% at 18% 0%, #3A5D7C 0%, var(--band) 46%, #1F364A 100%);
  color: var(--band-text);
}
.v5-warm-panel .v5-warm-eyebrow { color: var(--mark-on-band); }
.warm-closing .v5-warm-eyebrow { max-width: none; margin: 0 0 14px; font-size: 13px; line-height: 1.3; }
.v5-warm-panel .v5-warm-title { max-width: 18ch; margin: 0 auto; color: var(--band-text); }
.warm-closing.v5-warm-closing p:not(.v5-warm-eyebrow) { margin-top: 20px; }
.v5-warm-cta--light { background: var(--band-btn-bg); color: var(--band-btn-text); }
@media (hover: hover) { .v5-warm-cta--light:hover { background: #FFFFFF; filter: none; } }
.v5-warm-cta--light:focus-visible { outline: 3px solid var(--mark-on-band); outline-offset: 3px; }

/* Sections ease in as they reach the screen (the page script adds v5-warm-js only when motion is welcome). */
.v5-warm-js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.v5-warm-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Wider screens ---------- */
@media (max-width: 767.98px) {
  .v5-warm-start { margin-top: 24px; }
}

@media (min-width: 768px) {
  .v5-warm-hero .eyebrow { letter-spacing: .14em; }
  .v5-warm-hero .eyebrow::before { flex-basis: 28px; }
  .v5-warm-brand { font-size: 20px; }
  .v5-warm-start { display: inline-flex; width: auto; }
  .v5-warm-strip .warm-check { padding: 28px 24px; }
  .v5-warm-wrap { padding-inline: 24px; }
  .v5-warm-lead { font-size: 18px; }
  .v5-warm-cta { display: inline-flex; width: auto; }
  .v5-warm-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .v5-warm-steps > li { grid-template-columns: 64px minmax(0, 1fr); font-size: 18px; padding: 26px 0; }
  .v5-warm-steps > li::before { font-size: 44px; }
  .v5-warm-faq__list summary { font-size: 18px; }
  .warm-closing.v5-warm-closing { padding-inline: 24px; }
  .v5-warm-panel { padding-inline: 48px; }
}

/* Desktop: text on the left over the plain band; the photo is a rounded 4:3 frame inside the page width
   (B5 framed, picked 2026-11-05), its right edge lined up with the header and the sections below, so both
   sides of the band keep the same blue margin on wide screens. The card opens over the photo. */
@media (min-width: 1024px) {
  .v5-warm-photo {
    position: absolute; top: 50%; right: max(24px, calc((100% - 1120px) / 2));
    width: calc(min(1120px, 100% - 48px) * .52); aspect-ratio: 4 / 3;
    transform: translateY(-50%);
    border-radius: 16px; box-shadow: var(--shadow-photo);
  }
  .v5-warm-photo img { object-position: 50% 45%; }
  .warm-hero.v5-warm-hero {
    margin-top: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 52%;
    grid-template-areas: "copy media" "aside media";
    grid-template-rows: auto 1fr;
    column-gap: 56px;
    align-content: center;
    padding-top: 80px; padding-bottom: 88px;
  }
  .v5-warm-hero > .quiz { grid-area: media; align-self: center; justify-self: center; width: min(100%, 480px); }
  .v5-warm-hero .h1 { max-width: none; }
  .v5-warm-strip .warm-check { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-top: 30px; padding-bottom: 30px; }
  .v5-warm-strip .warm-check > li { padding-right: 32px; }
  .v5-warm-strip .warm-check > li + li { padding-left: 32px; border-left: 1px solid rgb(244 241 236 / .14); }
  .v5-warm-money__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 80px; align-items: center; }
  .v5-warm-trio { gap: 56px; }
  .v5-warm-cost__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 96px; align-items: center; }
  .v5-warm-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 96px; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .v5-warm-photo img { animation: none; transition: none; }
  .v5-warm-start svg, .v5-warm-photo::before { transition: none; }
}