/* Mortgage insurance explainer (/fmi/): its older section classes mapped onto the site design,
   then its own pieces: the stairs diagram, the charts, the payout quiz and the comparison cards.
   Mortgage insurance (the bank's cover, which shrinks) is the muted series, in slate.
   Life insurance (the family's cover) is the strong one, in gold, or pale gold on navy. */

/* ---------- Sections and type ---------- */
.sctyp { padding-block: var(--section); }
.sctyp--light, .sctyp--white { background: var(--white); }
.sctyp--light + .sctyp--white, .sctyp--white + .sctyp--light { border-top: 1px solid var(--line); }
.styp { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.sec-heading { margin: 0 0 0.5em; font: 400 var(--text-h2)/1.15 var(--font-serif); letter-spacing: -0.01em; text-wrap: balance; }
h1.sec-heading { font-size: var(--text-h1); line-height: 1.08; }
.sec-lead { font-size: var(--text-lead); line-height: 1.55; }
.sec-lead, .sec-body, .callout, .notice { max-width: var(--measure); }
.section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 52rem) { .section-grid { grid-template-columns: 1fr; } }

/* A note beside the text. The key one is filled in pale gold. */
.callout { margin-top: var(--s3); padding-left: var(--s2); border-left: 3px solid var(--gold); }
.callout--key { padding: var(--s2) var(--s3); border-left: 0; border-radius: var(--radius); background: var(--gold-pale); }
.callout > :last-child { margin-bottom: 0; }

/* ---------- Opening (navy, with a faint grid) ---------- */
.hero-grid { position: relative; display: flex; align-items: center; min-height: 80vh; overflow: hidden; }
.hero-grid__inner { position: relative; z-index: 1; padding-block: var(--s5); }
.hero-grid__bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at center, #fff, transparent 80%);
  mask-image: radial-gradient(ellipse at center, #fff, transparent 80%);
}
.scroll-cue { margin-top: var(--s4); font-size: var(--text-h3); line-height: 1; }

/* ---------- Stairs diagram ----------
   Life insurance bars stay full height; mortgage insurance bars sit in front and shrink. */
.stairs { position: relative; max-width: 44rem; height: 15.625rem; margin: var(--s4) auto 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stairs__steps { display: flex; align-items: flex-end; height: 100%; }
.stairs__step { position: relative; flex: 1; margin: 0 2px; }
.stairs__bar { position: absolute; bottom: 0; left: 0; width: 100%; border-radius: 2px 2px 0 0; }
.stairs__bar--life { background: var(--gold); }
.stairs__bar--mortgage { z-index: 1; background: var(--slate); }
.stairs__climber { position: absolute; z-index: 2; width: 1.75rem; height: 1.75rem; border: 3px solid var(--white); border-radius: 50%; }
.stairs__climber--mortgage { background: var(--slate); }
.stairs__climber--life { background: var(--gold); }
@media (max-width: 30rem) { .stairs__climber { width: 1.25rem; height: 1.25rem; border-width: 2px; } }
.stairs-key { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s4); margin: var(--s2) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.stairs-key li { display: flex; align-items: center; gap: 0.5rem; }
.stairs-key li::before { content: ""; width: 1rem; height: 1rem; border-radius: 2px; background: var(--slate); }
.stairs-key .stairs-key__life::before { background: var(--gold); }

.mid-cta { margin-top: var(--s5); text-align: center; }
.mid-cta p { margin: 0 auto var(--s2); font-weight: 600; }

/* ---------- Charts ---------- */
.chart { position: relative; max-width: 56rem; height: clamp(16rem, 12rem + 18vw, 26rem); margin: var(--s4) auto; }

/* ---------- Moving or refinancing ---------- */
.reset-list { display: grid; gap: var(--s3); max-width: var(--measure); margin: var(--s4) 0; }
.reset-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s2); }
.reset-icon { font: 400 var(--text-h3)/1.25 var(--font-sans); color: var(--slate); }
.reset-item h3 { margin: 0 0 0.25rem; line-height: 1.25; }
.reset-item p { margin: 0; }

/* ---------- Who receives the money? ---------- */
.decision-wrap { max-width: 45rem; margin: var(--s4) auto 0; }
.decision-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s4); }
.decision-dropzone { padding: var(--s4) var(--s3); border: 2px dashed var(--slate); border-radius: var(--radius); text-align: center; transition: border-color 0.2s; }
.decision-dropzone.is-over, .decision-dropzone.is-chosen { border-style: solid; border-color: var(--gold-pale); }
.decision-dropzone h3 { margin-bottom: 0.25rem; }
.decision-dropzone p { margin: 0; }
.decision-token { padding: 1rem 1.5rem; border-radius: var(--radius); background: var(--gold-pale); color: var(--navy); font-weight: 600; cursor: grab; user-select: none; }
.decision-token:active { cursor: grabbing; }
.decision-result { max-width: var(--measure); margin: var(--s4) auto 0; font-weight: 600; text-align: center; }
@media (max-width: 768px) {
  .decision-grid { grid-template-columns: 1fr; gap: var(--s3); }
  .decision-token { justify-self: center; cursor: pointer; }
  .decision-dropzone { padding: var(--s3); }
}

/* ---------- Comparison cards ---------- */
.comparison-grid { margin-top: var(--s4); }
.comparison-card { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid var(--line); border-top: 4px solid var(--slate); border-radius: var(--radius); }
.comparison-card--life { border-top-color: var(--gold); }
.comparison-card__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s1) var(--s2); margin-bottom: var(--s2); }
.comparison-card__header h3 { margin: 0; }
.comparison-card__tag { padding: 0.1rem 0.6rem; border: 1px solid var(--slate); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; }
.comparison-card--life .comparison-card__tag { border-color: var(--gold-pale); background: var(--gold-pale); }
.comparison-list { margin: 0; padding: 0; list-style: none; }
.comparison-list li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s2); padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.comparison-list li:last-child { border-bottom: 0; }
.comparison-list .label { font-weight: 600; }
@media (max-width: 26rem) { .comparison-list li { grid-template-columns: 1fr; gap: 0; } }
.comparison-cta { margin-top: var(--s4); padding: var(--s4) var(--s3); border-radius: var(--radius); text-align: center; }
.comparison-cta__text { margin: 0 0 var(--s3); font: 400 var(--text-h3)/1.3 var(--font-serif); }