/* Homepage variant v9 — "slide deck" layout.
   The page ground is white ruled with faint vertical guides, and every section is a rounded slide
   card on it: soft off-white (--v9-soft) or white, with --brand-2 for the footer and the inner
   panels / buttons, and deep (a brand / brand-2 mix) for accents. Wide display type (Saira, expanded) on headings and figures,
   Manrope for body - both loaded by partials/homepage/v9.tpl.
   Every colour derives from --brand / --brand-2, so the page re-themes from the TAV with no edits.
   Assumes --brand is light enough to carry dark type and --brand-2 dark enough to carry white.
   Scoped under .home--v9 and layered on home.css. */

.home--v9 {
  --v9-dark: var(--brand-2);
  /* The main slides' ground: a subtle off-white with a whisper of the brand. */
  --v9-soft: color-mix(in srgb, var(--brand) 5%, #F7F7F4);
  --v9-deep: color-mix(in srgb, var(--brand) 36%, var(--brand-2));
  --v9-mint: color-mix(in srgb, var(--brand) 16%, #FFFFFF);
  --v9-surface: #FFFFFF;
  --v9-ink: var(--brand-2);
  --v9-muted: color-mix(in srgb, var(--brand-2) 68%, #FFFFFF);
  --v9-line: color-mix(in srgb, var(--brand-2) 12%, #FFFFFF);
  --v9-on-dark: rgba(255, 255, 255, .66);
  --v9-rule: color-mix(in srgb, var(--brand-2) 12%, transparent);
  --v9-display: 'Saira', 'Manrope', system-ui, sans-serif;
  --v9-body: 'Manrope', var(--font);
  --v9-r: clamp(1.25rem, 2.6vw, 2.25rem);
  --v9-r-sm: clamp(0.85rem, 1.6vw, 1.25rem);
  --v9-max: 84rem;
  --v9-pad: clamp(0.75rem, 2.6vw, 2.5rem);
  --v9-in: clamp(1.25rem, 4.4vw, 4.5rem);
}

/* The brand ground with the reference's faint vertical guides. */
#home.home--v9 {
  background-color: #FFFFFF;
  background-image: linear-gradient(to right, var(--v9-rule) 1px, transparent 1px);
  background-size: clamp(9rem, 22vw, 27rem) 100%;
  background-position: center top;
  color: var(--v9-ink);
  font-family: var(--v9-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  padding: 0;
  /* Selects Saira's expanded width (the wdth 125 instance loaded in v9.tpl) wherever the display
     font is used. Manrope has no width axis, so body text is unaffected. */
  font-stretch: 125%;
}
/* The display face, restated at id level. home.css sets `#home h1, #home h2, #home p, #home span,
   #home button... { font-family: inherit }` - an id selector, so it outranks every class rule here
   and the display font silently fell back to the body font. Every element that should wear the
   display face is listed here instead of carrying font-family in its own rule. */
#home.home--v9 .v9-hero-title,
#home.home--v9 .v9-title,
#home.home--v9 .v9-stage-value,
#home.home--v9 .v9-stair-tab,
#home.home--v9 .v9-stair-tab span,
#home.home--v9 .v9-person-name,
#home.home--v9 .v9-field-value,
#home.home--v9 .v9-est-figure,
#home.home--v9 .v9-stat-value,
#home.home--v9 .v9-faq-no,
#home.home--v9 #mobile-nav a { font-family: var(--v9-display) }

/* Class-level resets, same reasoning as v8: at #home.home--v9 these would outrank every
   .home--v9 .v9-* rule that sets a margin, colour or background. */
.home--v9 h1, .home--v9 h2, .home--v9 h3 { color: inherit; font-weight: 400; margin: 0 }
.home--v9 p { margin: 0 }
.home--v9 button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit }
#home.home--v9 a { color: inherit; text-decoration: none }

.home--v9 .v9-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--v9-pad);
  padding: var(--v9-pad);
}

/* ---------- shared: slide cards ---------- */
.home--v9 .v9-card {
  position: relative;
  width: 100%;
  max-width: var(--v9-max);
  margin: 0 auto;
  padding: var(--v9-in) var(--v9-in) clamp(1.25rem, 2.4vw, 2rem);
  border-radius: var(--v9-r);
  overflow: hidden;
}
/* "dark" names the slide role (hero, statement, steps, estimator, market); it now sits on --v9-soft. */
.home--v9 .v9-card--dark { background: var(--v9-soft); color: var(--v9-ink) }
.home--v9 .v9-card--light { background: var(--v9-surface); color: var(--v9-ink) }
/* home.css styles these section ids directly (#home #how / #market get a white background and
   borders, #home #estimator its own padding and width). Two ids outrank the card classes above, so
   the cards are restated at id level here. */
#home.home--v9 #how,
#home.home--v9 #market { background: var(--v9-soft); border: 0 }
#home.home--v9 #estimator { max-width: var(--v9-max); margin: 0 auto; padding: var(--v9-in) var(--v9-in) clamp(1.25rem, 2.4vw, 2rem) }
/* The slide foot: brand mark bottom-left, slide number bottom-right. */
.home--v9 .v9-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: 0.8rem;
  color: currentColor;
}
.home--v9 .v9-foot span { opacity: .55 }
.home--v9 .v9-mark { width: 1.4rem; height: 1.4rem; fill: var(--brand); display: block; flex: none }
.home--v9 .v9-card--light .v9-mark { fill: var(--v9-deep) }

/* ---------- shared: heads ---------- */
.home--v9 .v9-head { display: grid; justify-items: start; gap: 0.85rem; margin-bottom: clamp(2rem, 4.5vw, 3.5rem) }
.home--v9 .v9-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem }
.home--v9 .v9-head--split > div { display: grid; justify-items: start; gap: 0.85rem }
.home--v9 .v9-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.8rem;
  border-radius: 999px;
  background: var(--brand);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
}
.home--v9 .v9-tag--dark { background: var(--v9-dark); color: #FFFFFF }
/* Section eyebrows: plain text, no capsule. Brand on the dark slides, deep on the white ones so it
   keeps contrast. The hero's figure pill (.v9-tag--dark) is not inside a .v9-head and keeps its
   capsule. */
.home--v9 .v9-head .v9-tag { padding: 0; border-radius: 0; background: none; color: var(--brand); font-weight: 600 }
.home--v9 .v9-card--light .v9-head .v9-tag { color: var(--v9-deep) }
.home--v9 .v9-title {
  font-family: var(--v9-display);
  font-size: clamp(1.3rem, 2.9vw, 2.35rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 30ch;
  text-wrap: balance;
}
.home--v9 .v9-accent { color: var(--brand) }
.home--v9 .v9-lede { max-width: 56ch; font-size: 0.92rem; color: var(--v9-muted) }

/* ---------- shared: buttons ---------- */
#home.home--v9 .v9-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
#home.home--v9 .v9-btn--lg { font-size: 0.95rem; padding: 0.8rem 1.45rem }
#home.home--v9 .v9-btn--brand,
#home.home--v9 #header-cta { background: var(--brand); color: #FFFFFF; border-radius: 999px; font-size: 0.875rem; font-weight: 600; padding: 0.65rem 1.2rem }
#home.home--v9 .v9-btn--brand:hover,
#home.home--v9 #header-cta:hover { background: var(--brand-accent); color: #FFFFFF; transform: translateY(-0.0625rem) }
#home.home--v9 .v9-btn--dark { background: var(--v9-dark); color: #FFFFFF }
#home.home--v9 .v9-btn--dark:hover { background: var(--v9-deep); color: #FFFFFF; transform: translateY(-0.0625rem) }
#home.home--v9 .v9-btn-arrow {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: -0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .12);
}
#home.home--v9 .v9-btn--dark .v9-btn-arrow { background: rgba(255, 255, 255, .16) }
.home--v9 .v9-btn-arrow svg { width: 0.8rem; height: 0.8rem }

/* The inline icon sprite only carries <symbol> definitions; it must take no space. */
.home--v9 .v9-sprite { position: absolute; width: 0; height: 0; overflow: hidden }

/* ---------- shared: glyphs + media ---------- */
.home--v9 .v9-glyph { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.home--v9 .v9-media { position: relative; overflow: hidden; border-radius: var(--v9-r-sm) }
.home--v9 .v9-media img,
.home--v9 .v9-media video { display: block; width: 100%; height: 100%; object-fit: cover }
/* Shown until the real file is dropped into media/v9/. */
.home--v9 .v9-ph {
  display: grid;
  place-content: center;
  gap: 0.25rem;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0.125rem dashed rgba(255, 255, 255, .35);
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 0.75rem, transparent 0.75rem 1.5rem);
  color: rgba(255, 255, 255, .7);
  text-align: center;
  font-size: 0.8rem;
}
.home--v9 .v9-ph small { font-size: 0.7rem; opacity: .7 }
/* Full-bleed image strip at the foot of a dark slide, fading up into the card. */
.home--v9 .v9-media--fade {
  margin: clamp(2rem, 4vw, 3rem) calc(-1 * var(--v9-in)) 0;
  height: clamp(10rem, 24vw, 20rem);
  min-height: 10rem;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
}
.home--v9 .v9-media--fade img { height: 120% }
.home--v9 .v9-media--fade + .v9-foot { margin-top: -2.75rem; position: relative; z-index: 1 }

/* ---------- 01. hero ---------- */
.home--v9 .v9-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 7vw, 5.5rem);
}
.home--v9 .v9-brand { display: flex; align-items: center; gap: 0.6rem }
#home.home--v9 .site-powered {
  width: auto;
  margin: 0;
  padding-left: 0.6rem;
  border-left: 1px solid var(--v9-line);
  color: var(--v9-muted);
  text-align: left;
  font-style: normal;
}
#home.home--v9 #main-nav { display: flex; justify-content: center; gap: clamp(1rem, 2.4vw, 2rem); font-size: 0.85rem }
#home.home--v9 #main-nav a { color: var(--v9-ink); transition: color .18s ease }
#home.home--v9 #main-nav a:hover { color: var(--brand) }
.home--v9 .v9-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem }
#home.home--v9 #nav-toggle { border-color: var(--v9-line); border-radius: 999px; color: var(--v9-ink); padding: 0.7rem 0.9rem; min-height: 0 }
.home--v9 .v9-burger { display: grid; gap: 0.25rem; width: 1.05rem }
.home--v9 .v9-burger i { display: block; height: 0.1rem; background: currentColor; border-radius: 999px; transition: width .2s ease }
.home--v9 .v9-burger i:nth-child(2) { width: 75% }
.home--v9 .v9-burger i:nth-child(3) { width: 50% }
#home.home--v9 #nav-toggle:hover .v9-burger i { width: 100% }
#home.home--v9 #mobile-nav { background: var(--v9-dark); gap: 0.25rem }
#home.home--v9 #mobile-nav a { font-family: var(--v9-display); font-size: 1.1rem; font-weight: 400 }
#home.home--v9 .mobile-nav-close { border-radius: 999px }
#home.home--v9 .mobile-nav-cta { background: var(--brand); color: #FFFFFF; border-radius: 999px }

.home--v9 .v9-hero-copy { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem) }
.home--v9 .v9-hero-title {
  font-family: var(--v9-display);
  font-size: clamp(1.75rem, 4.6vw, 4.1rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--v9-ink);
  max-width: 24ch;
  text-wrap: balance;
}
.home--v9 .v9-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2.5rem }
.home--v9 .v9-hero-lede { max-width: 54ch; font-size: 0.95rem; color: var(--v9-muted) }

/* The notched stage. One brand shape; the site label is cut into its top-left corner (a dark tab
   with concave fillets either side) and an icon tab rises off its top-right corner.
   Fillets are small squares painted with a radial gradient: the card colour everywhere except a
   quarter-circle, which leaves the brand shape with a rounded inside corner. */
.home--v9 .v9-stage { --tab: clamp(3.5rem, 6vw, 5rem); --f: var(--v9-r-sm); position: relative; margin-top: calc(var(--tab) + clamp(1.5rem, 4vw, 3rem)) }
.home--v9 .v9-stage-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 2.6fr);
  gap: clamp(0.6rem, 1.2vw, 1rem);
  padding: clamp(0.6rem, 1.2vw, 1rem);
  border-radius: var(--v9-r-sm) 0 var(--v9-r-sm) var(--v9-r-sm);
  background: var(--brand);
  color: #FFFFFF;
}
.home--v9 .v9-stage-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.4rem 0.9rem 0;
  border-bottom-right-radius: var(--f);
  background: var(--v9-soft);
  color: var(--v9-ink);
  font-size: clamp(1rem, 1.8vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.home--v9 .v9-stage-label::before,
.home--v9 .v9-stage-label::after {
  content: '';
  position: absolute;
  width: var(--f);
  height: var(--f);
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--f) - 0.5px), var(--v9-soft) var(--f));
}
.home--v9 .v9-stage-label::before { top: 0; left: 100% }
.home--v9 .v9-stage-label::after { top: 100%; left: 0 }
.home--v9 .v9-stage-label .v9-mark { width: 1.6rem; height: 1.6rem }
.home--v9 .v9-stage-tab {
  position: absolute;
  right: 0;
  bottom: 100%;
  display: grid;
  place-items: center;
  width: calc(var(--tab) * 1.3);
  height: var(--tab);
  border-radius: var(--f) var(--f) 0 0;
  background: var(--brand);
  color: #FFFFFF;
}
.home--v9 .v9-stage-tab::before {
  content: '';
  position: absolute;
  right: 100%;
  bottom: 0;
  width: var(--f);
  height: var(--f);
  background: radial-gradient(circle at 0 0, transparent calc(var(--f) - 0.5px), var(--brand) var(--f));
}
.home--v9 .v9-stage-tab svg { width: 45%; height: 45% }
.home--v9 .v9-stage-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(3.25rem, 5vw, 4rem) clamp(0.6rem, 1.5vw, 1.4rem) clamp(0.6rem, 1.5vw, 1.4rem);
}
.home--v9 .v9-stage-eyebrow { max-width: 22ch; font-size: clamp(0.9rem, 1.4vw, 1.1rem); line-height: 1.4 }
.home--v9 .v9-stage-figure { display: grid; justify-items: start; gap: 0.7rem }
.home--v9 .v9-stage-value { font-family: var(--v9-display); font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.03em }
.home--v9 .v9-stage-figure .v9-tag { font-size: 0.85rem; padding: 0.3rem 0.95rem }
.home--v9 .v9-stage-divider { width: clamp(0.6rem, 1vw, 0.9rem); margin-top: clamp(3rem, 5vw, 4rem); border-radius: 999px; background: var(--v9-soft) }
.home--v9 .v9-stage-media { min-height: clamp(14rem, 30vw, 27rem); border-radius: var(--f) }
/* Anchored on the hero photo's subject, so narrow crops keep it in frame. */
.home--v9 .v9-stage-media img { object-position: 45% 35% }
/* The video's couple sits centre frame, heads in the upper half. */
.home--v9 .v9-stage-media video { object-position: 55% 40% }
.home--v9 .v9-stage-media .v9-ph { border-color: rgba(255, 255, 255, .55); color: #FFFFFF; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .1) 0 0.75rem, transparent 0.75rem 1.5rem) }

/* ---------- 02. statement ---------- */
.home--v9 .v9-statement-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center }
.home--v9 .v9-statement-text {
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 2.2rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--v9-ink) 42%, transparent);
  text-wrap: pretty;
}
.home--v9 .v9-key { color: var(--v9-ink) }
/* Taller strip and a short fade: the photos' faces sit near their top edge, and the default 45%
   fade would wash them out. Shared by the statement and market strips. */
.home--v9 .v9-statement-media,
.home--v9 .v9-market-media {
  height: clamp(12rem, 30vw, 26rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
}
.home--v9 .v9-statement-media img { object-position: 50% 25% }
.home--v9 .v9-market-media img { object-position: 35% 25% }
.home--v9 .v9-curve { position: relative; align-self: stretch; min-height: 14rem }
.home--v9 .v9-curve-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.home--v9 .v9-curve-path { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round }
/* Sits on the curve's crest: (250, 46) in the 400 x 220 viewBox, which meets the box at its centre. */
.home--v9 .v9-curve-dot {
  position: absolute;
  left: 62.5%;
  top: 20.9%;
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--brand) 30%, transparent);
}
.home--v9 .v9-curve-note {
  position: absolute;
  left: 62.5%;
  bottom: calc(79.1% + 1.1rem);
  transform: translateX(-50%);
  display: grid;
  gap: 0.15rem;
  width: max-content;
  max-width: 15rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  background: var(--brand);
  color: #FFFFFF;
  font-size: 0.8rem;
  line-height: 1.35;
}
.home--v9 .v9-curve-note b { font-weight: 700 }

/* ---------- 03. staircase ---------- */
.home--v9 .v9-stairs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 1vw, 0.85rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.home--v9 .v9-stair { --rise: clamp(2.5rem, 5vw, 4.25rem); display: flex; flex-direction: column; gap: clamp(0.5rem, 1vw, 0.85rem) }
.home--v9 .v9-stair:nth-child(1) { padding-top: calc(var(--rise) * 3) }
.home--v9 .v9-stair:nth-child(2) { padding-top: calc(var(--rise) * 2) }
.home--v9 .v9-stair:nth-child(3) { padding-top: var(--rise) }
.home--v9 .v9-stair-tab {
  padding: clamp(0.55rem, 1vw, 0.8rem) clamp(1rem, 2vw, 1.5rem);
  border-radius: 999px;
  background: var(--brand);
  color: #FFFFFF;
  font-family: var(--v9-display);
  font-size: clamp(0.68rem, 1vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.home--v9 .v9-stair-tab { display: flex; align-items: center; gap: 0.7em; padding-left: 1em }
/* The icon sits in a white circle at the pill's left end. Sized in em so it tracks the tab's fluid
   type size; the padding on the svg itself is the gap between the circle and the glyph. */
.home--v9 .v9-stair-tab-ico {
  display: block;
  flex: none;
  width: 2.6em;
  height: 2.6em;
  padding: 0.6em;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--brand);
}
.home--v9 .v9-stair-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 11rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--v9-r-sm);
  background: #FFFFFF;
  color: var(--v9-ink);
}
.home--v9 .v9-stair-ico { width: 1.6rem; height: 1.6rem; display: block }
.home--v9 .v9-stair-ico svg { width: 100%; height: 100%; display: block }
.home--v9 .v9-stair-card h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.35rem }
.home--v9 .v9-stair-card p { font-size: 0.85rem; line-height: 1.5; color: var(--v9-muted) }
.home--v9 .v9-section-cta { display: flex; justify-content: flex-start; margin-top: clamp(1.75rem, 3.5vw, 2.5rem) }

/* ---------- 04. notched "team" cards ---------- */
.home--v9 .v9-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.6rem, 1.2vw, 1rem) }
.home--v9 .v9-person {
  --tile: clamp(6.5rem, 11vw, 9rem);
  --f: 0.9rem;
  --c: var(--v9-deep);
  --t: var(--brand);
  position: relative;
  display: grid;
  grid-template-columns: var(--tile) minmax(0, 1fr);
  grid-template-rows: var(--tile) auto;
  min-height: 14rem;
  border-radius: var(--v9-r-sm);
  background: var(--c);
  color: #FFFFFF;
  overflow: hidden;
}
.home--v9 .v9-person--brand { --c: var(--brand); --t: var(--v9-deep); color: #FFFFFF }
/* The notched tile: where the portrait sits in the reference, flush to the card's top-left corner
   with only its inner corner rounded. */
.home--v9 .v9-person-tile {
  position: relative;
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  border-bottom-right-radius: var(--f);
  background: var(--t);
  color: #FFFFFF;
}
.home--v9 .v9-person-tile { overflow: hidden }
.home--v9 .v9-person-tile img { display: block; width: 100%; height: 100%; object-fit: cover }
.home--v9 .v9-person-name {
  grid-area: 1 / 2;
  align-self: start;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2vw, 1.5rem) 0;
  font-family: var(--v9-display);
  font-size: clamp(1.1rem, 2.1vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.home--v9 .v9-person-role {
  grid-area: 2 / 1;
  align-self: end;
  padding: 1rem clamp(0.85rem, 1.6vw, 1.25rem) clamp(1rem, 1.8vw, 1.25rem);
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: .8;
}
.home--v9 .v9-person-desc {
  grid-area: 2 / 2;
  align-self: end;
  padding: 1rem clamp(1rem, 2vw, 1.5rem) clamp(1rem, 1.8vw, 1.25rem);
  font-size: 0.82rem;
  line-height: 1.5;
  opacity: .9;
}
#home.home--v9 .v9-person-desc a { text-decoration: underline; text-underline-offset: 0.1875rem }

/* ---------- 05. estimator ----------
   Reuses the hero's notched stage (.v9-stage / -label / -tab / -body / -divider). Inputs sit on the
   brand panel in white; results and chart sit on the dark panel where the hero has its photo. */
.home--v9 .v9-stage--est { margin-top: calc(var(--tab) + clamp(0.5rem, 2vw, 1.5rem)) }
.home--v9 .v9-stage--est .v9-stage-body { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr) }
.home--v9 .v9-est-inputs { display: grid; align-content: start; gap: 1.35rem; justify-content: stretch; color: #FFFFFF }
.home--v9 .v9-est-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, .85) }
.home--v9 .v9-est-label--light { color: rgba(255, 255, 255, .55) }
.home--v9 .v9-field { display: grid; gap: 0.4rem }
.home--v9 .v9-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem }
.home--v9 .v9-field-name { font-size: 0.85rem; font-weight: 500; color: rgba(255, 255, 255, .9) }
.home--v9 .v9-field-value { font-family: var(--v9-display); font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -0.02em; color: #FFFFFF }
.home--v9 .v9-field-scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: rgba(255, 255, 255, .78) }
.home--v9 .v9-field-note { font-size: 0.74rem; line-height: 1.5; color: rgba(255, 255, 255, .82) }

/* Range sliders - same technique as v8: separate prefixed rules, filled part from --fill.
   White track on the brand panel, dark thumb ringed in white. */
#home.home--v9 input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 1.6rem; margin: 0; background: transparent; cursor: pointer }
#home.home--v9 input[type=range]::-webkit-slider-runnable-track {
  height: 0.4rem;
  border-radius: 999px;
  background: linear-gradient(to right, #FFFFFF 0, #FFFFFF var(--fill, 50%), rgba(255, 255, 255, .32) var(--fill, 50%), rgba(255, 255, 255, .32) 100%);
}
#home.home--v9 input[type=range]::-moz-range-track { height: 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, .32) }
#home.home--v9 input[type=range]::-moz-range-progress { height: 0.4rem; border-radius: 999px; background: #FFFFFF }
#home.home--v9 input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: -0.475rem;
  border: 0.22rem solid #FFFFFF;
  border-radius: 999px;
  background: var(--v9-dark);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .2);
  transition: transform .15s ease;
}
#home.home--v9 input[type=range]::-moz-range-thumb {
  width: 1.35rem;
  height: 1.35rem;
  border: 0.22rem solid #FFFFFF;
  border-radius: 999px;
  background: var(--v9-dark);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .2);
  transition: transform .15s ease;
}
#home.home--v9 input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.1) }
#home.home--v9 input[type=range]:hover::-moz-range-thumb { transform: scale(1.1) }
#home.home--v9 input[type=range]:focus { outline: none }
#home.home--v9 input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 0.35rem rgba(255, 255, 255, .4) }
#home.home--v9 input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 0.35rem rgba(255, 255, 255, .4) }

.home--v9 .v9-terms { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem }
#home.home--v9 .term-btn {
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
#home.home--v9 .term-btn:hover { background: rgba(255, 255, 255, .38) }
#home.home--v9 .term-btn.active { background: var(--v9-dark); color: #FFFFFF }

/* The results panel takes the hero photo's slot: dark, rounded, full height of the stage. */
.home--v9 .v9-est-out {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  padding: clamp(1.25rem, 2.6vw, 2rem);
  border-radius: var(--f);
  background: var(--v9-dark);
  color: #FFFFFF;
}
.home--v9 .v9-est-figure { font-family: var(--v9-display); font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.03em; line-height: 1; color: var(--brand) }
.home--v9 .v9-est-bar { display: flex; height: 0.45rem; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .14); margin-top: 0.5rem }
.home--v9 .v9-est-bar-principal { background: var(--brand); transition: width .3s ease }
.home--v9 .v9-est-bar-interest { background: rgba(255, 255, 255, .3); transition: width .3s ease }
.home--v9 .v9-est-bar-labels { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.7rem; color: var(--v9-on-dark) }
.home--v9 .v9-est-rows { margin: 0.5rem 0 0; display: grid }
.home--v9 .v9-est-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid rgba(255, 255, 255, .1) }
.home--v9 .v9-est-row dt { font-size: 0.8rem; color: var(--v9-on-dark) }
.home--v9 .v9-est-row dd { margin: 0; font-size: 0.8rem; font-weight: 600 }
.home--v9 .v9-est-disclosure { margin-top: 0.4rem; font-size: 0.7rem; line-height: 1.55; color: rgba(255, 255, 255, .45) }

/* The chart: a gradient wash under a bright line, sharing the results panel below a hairline. */
.home--v9 .v9-plot-wrap {
  margin: 0.85rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #FFFFFF;
}
.home--v9 .v9-plot-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.75rem;
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  color: var(--v9-on-dark);
}
.home--v9 .v9-plot-keys { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem }
.home--v9 .v9-plot-key { display: inline-flex; align-items: baseline; gap: 0.45rem }
.home--v9 .v9-plot-key::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 999px; flex: none; transform: translateY(0.05rem) }
.home--v9 .v9-plot-key--principal::before { background: var(--brand) }
.home--v9 .v9-plot-key--interest::before { background: rgba(255, 255, 255, .35) }
.home--v9 .v9-plot-key b,
.home--v9 .v9-plot-total b { font-weight: 600; color: #FFFFFF }
.home--v9 .v9-plot { position: relative; height: clamp(11rem, 22vw, 17rem); border-bottom: 1px solid rgba(255, 255, 255, .16); cursor: crosshair; touch-action: pan-y }
.home--v9 .v9-plot-svg { display: block; width: 100%; height: 100%; overflow: visible }
.home--v9 .v9-stop-top { stop-color: var(--brand); stop-opacity: .85 }
.home--v9 .v9-stop-bottom { stop-color: var(--brand); stop-opacity: .12 }
.home--v9 .v9-plot-area--principal { fill: url(#v9-plot-grad) }
.home--v9 .v9-plot-area--interest { fill: rgba(255, 255, 255, .1) }
.home--v9 .v9-plot-line { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.home--v9 .v9-plot-line--split { stroke: var(--brand); stroke-width: 2.5 }
.home--v9 .v9-plot-line--total { stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; stroke-dasharray: 4 4 }
.home--v9 .v9-plot-area,
.home--v9 .v9-plot-line { transition: d .35s cubic-bezier(.22, .8, .3, 1) }
.home--v9 .v9-plot-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: #FFFFFF; opacity: .4; pointer-events: none }
.home--v9 .v9-plot-tip {
  position: absolute;
  top: 0;
  display: grid;
  gap: 0.1rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.6rem;
  background: var(--brand);
  color: #FFFFFF;
  font-size: 0.7rem;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}
.home--v9 .v9-plot-tip.is-flipped { transform: translateX(-100%) }
.home--v9 .v9-plot-tip b { font-weight: 700 }
.home--v9 .v9-plot-axis { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.6rem }
/* Axis ticks as the reference's year pills. */
.home--v9 .v9-plot-axis span { padding: 0.15rem 0.65rem; border-radius: 999px; background: var(--brand); color: #FFFFFF; font-size: 0.7rem }
.home--v9 .v9-plot-axis span:empty { display: none }
#home.home--v9 .estimator-fineprint { max-width: none; margin: clamp(1.25rem, 2.5vw, 2rem) 0 0; text-align: left; color: var(--v9-muted) }

/* ---------- 06. market trio ---------- */
.home--v9 .v9-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.6rem, 1.2vw, 1rem) }
.home--v9 .v9-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: clamp(13rem, 22vw, 17rem);
  margin: 0;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  border-radius: var(--v9-r-sm);
}
.home--v9 .v9-stat--brand { background: var(--brand); color: #FFFFFF }
.home--v9 .v9-stat--brand .v9-stat-logo { filter: brightness(0) invert(1) }
.home--v9 .v9-stat--deep { background: var(--v9-deep); color: #FFFFFF }
.home--v9 .v9-stat--mint { background: #FFFFFF; color: var(--v9-ink) }
.home--v9 .v9-stat-label { font-size: clamp(0.95rem, 1.5vw, 1.15rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; max-width: 20ch }
.home--v9 .v9-stat-value { margin-top: auto; font-family: var(--v9-display); font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -0.03em }
.home--v9 .v9-stat-source { display: flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; opacity: .75 }
.home--v9 .v9-stat-logo { display: block; height: 1.25rem; width: auto; flex: none; filter: brightness(0) }
.home--v9 .v9-stat--deep .v9-stat-logo { filter: brightness(0) invert(1) }
.home--v9 .v9-stat-source span:empty { display: none }
.home--v9 .v9-trio-note { max-width: 60ch; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); font-size: 0.78rem; line-height: 1.55; color: var(--v9-muted) }

/* ---------- 07. faq ---------- */
.home--v9 .v9-faq { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start }
.home--v9 .v9-faq-head { margin-bottom: 0; position: sticky; top: 1.5rem }
.home--v9 .v9-faq-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.5rem }
.home--v9 .v9-faq-phone { font-size: 0.875rem; color: var(--v9-muted) }
.home--v9 .v9-faq-list { display: grid; gap: 0.5rem }
.home--v9 .v9-faq-item { border-radius: var(--v9-r-sm); background: transparent; transition: background .2s ease }
.home--v9 .v9-faq-item[open] { background: var(--brand); color: #FFFFFF }
.home--v9 .v9-faq-item[open] p { color: rgba(255, 255, 255, .9) }
.home--v9 .v9-faq-item summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
}
.home--v9 .v9-faq-item summary::-webkit-details-marker { display: none }
.home--v9 .v9-faq-no { font-family: var(--v9-display); font-size: 0.75rem; opacity: .55 }
.home--v9 .v9-faq-q { font-size: 0.95rem; font-weight: 600; line-height: 1.35 }
.home--v9 .v9-faq-plus { position: relative; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--v9-dark); flex: none }
.home--v9 .v9-faq-plus::before,
.home--v9 .v9-faq-plus::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.7rem;
  height: 0.1rem;
  margin: -0.05rem 0 0 -0.35rem;
  border-radius: 999px;
  background: #FFFFFF;
  transition: transform .25s ease;
}
.home--v9 .v9-faq-plus::after { transform: rotate(90deg) }
.home--v9 .v9-faq-item[open] .v9-faq-plus::after { transform: rotate(0) }
.home--v9 .v9-faq-item p { padding: 0 1.15rem 1.15rem calc(1.15rem + 2.1rem); font-size: 0.875rem; line-height: 1.6; color: color-mix(in srgb, var(--v9-dark) 82%, transparent) }
#home.home--v9 .v9-faq-item a { text-decoration: underline; text-underline-offset: 0.1875rem }

/* ---------- footer, as one more dark slide ---------- */
#home.home--v9 .site-footer {
  max-width: var(--v9-max);
  margin: 0 auto var(--v9-pad);
  width: calc(100% - 2 * var(--v9-pad));
  border-radius: var(--v9-r);
  background: var(--v9-dark);
  color: rgba(255, 255, 255, .5);
}
#home.home--v9 .site-footer a { text-decoration: underline; text-underline-offset: 0.1875rem }
#home.home--v9 .footer-inner { padding: var(--v9-in) }
#home.home--v9 .footer-legal { border-top-color: rgba(255, 255, 255, .1) }
#home.home--v9 .footer-col h3 { color: var(--brand) }

/* ---------- funnel step titles ----------
   1.tpl tags the funnel container with .funnel--v9 when this variant is active, and v9.tpl has
   already loaded Saira on the page, so the question titles can wear the display face too without
   touching app.css. The subline in <small> goes back to the body face. */
#funnel-view.funnel--v9 .step__title { font-family: 'Saira', 'Manrope', system-ui, sans-serif; font-stretch: 125%; font-weight: 500; letter-spacing: -0.01em }
#funnel-view.funnel--v9 .step__title small { font-family: 'Manrope', system-ui, sans-serif; font-stretch: normal; letter-spacing: 0 }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .home--v9 .v9-faq { grid-template-columns: minmax(0, 1fr) }
  .home--v9 .v9-faq-head { position: static }
}
@media (max-width: 900px) {
  .home--v9 .v9-header { grid-template-columns: 1fr auto }
  .home--v9 .v9-stage-body { grid-template-columns: minmax(0, 1fr); border-top-right-radius: 0 }
  .home--v9 .v9-stage-divider { display: none }
  .home--v9 .v9-stage-media { min-height: 13rem }
  .home--v9 .v9-statement-grid { grid-template-columns: minmax(0, 1fr) }
  .home--v9 .v9-curve { min-height: 12rem; margin-top: 4rem }
  .home--v9 .v9-stairs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .home--v9 .v9-stair:nth-child(n) { padding-top: 0 }
  .home--v9 .v9-people { grid-template-columns: minmax(0, 1fr) }
  .home--v9 .v9-stage--est .v9-stage-body { grid-template-columns: minmax(0, 1fr) }
  .home--v9 .v9-trio { grid-template-columns: minmax(0, 1fr) }
  .home--v9 .v9-stat { min-height: 11rem }
}
@media (max-width: 560px) {
  .home--v9 .v9-stairs { grid-template-columns: minmax(0, 1fr) }
  .home--v9 .v9-stair-card { min-height: 0 }
  .home--v9 .v9-person { --tile: 5.5rem }
  .home--v9 .v9-person-role { grid-area: 2 / 1 / 3 / 3; padding-bottom: 0 }
  .home--v9 .v9-person-desc { grid-area: 3 / 1 / 4 / 3; padding-top: 0.4rem }
  .home--v9 .v9-hero-row .v9-btn { width: 100%; justify-content: center }
  .home--v9 .v9-curve-note { max-width: 12rem }
}