/* Homepage variant v8 — dark-stage layout.
   A hero that fades from a near-white brand tint down to the full brand colour, frosted product cards
   dissolving off its bottom edge, then a warm off-white page of white cards: fact marquee,
   photo-studded statement, five-tile bento, four-column category row, the estimator dressed as a
   process block, the market trio, the FAQ, and the shared legal footer.
   Everything accented reads --brand, so the whole page re-themes from the TAV with no edits here.
   Scoped under .home--v8 and layered on home.css. */

.home--v8 {
  --v8-bg: #F3F0EE;
  --v8-surface: #FFFFFF;
  --v8-ink: #14100E;
  --v8-dim: #A9A29D;
  --v8-muted: #756E69;
  --v8-line: #E6E0DB;
  --v8-chip: #EFEBE7;
  /* Every dark surface on the page - hero, footer, dark tiles, estimator output, mobile nav - is
     the site's secondary brand colour rather than a flat black, so the two brand values both do
     real work. Assumes style.secondary is dark enough to carry white type; a light secondary would
     need the on-dark text tokens revisited. */
  --v8-dark: var(--brand-2);
  --v8-r: 1.5rem;
  --v8-r-sm: 0.875rem;
  --v8-max: 78rem;
  /* The one horizontal gutter on the page. The hero uses it too, so its header lines up with every
     section below rather than sitting on its own inset. */
  --v8-pad: clamp(1.25rem, 3.6vw, 3.5rem);
  --v8-on-dark: rgba(255, 255, 255, 0.6);
}

/* No dark mode. v8 is already a dark hero on a warm light ground; flipping the ground inverts that
   relationship rather than preserving it, so the variant ships one palette and drops the toggle.
   v7 keeps its own - js/home-v7-theme.js is untouched and still loaded there. */

/* No logo filter here: the hero opens on white behind the header, so the site's normal logo art
   shows as-is. home.css still inverts the footer logo for the dark footer. */

#home.home--v8 {
  background: var(--v8-bg);
  color: var(--v8-ink);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.55;
  letter-spacing: -0.011em;
  padding: 0;
  transition: background-color .35s ease, color .35s ease;
}
/* These three resets stay at class level on purpose. At #home.home--v8 they would be (1,1,1) and
   would outrank every .home--v8 .v8-* rule below that sets a margin, a border or a background - the
   heading margins, the theme toggle's outline and the button fills would all silently vanish.
   Nothing in home.css styles bare p / h1-h3 / button under #home, so class level is enough.
   The anchor rule is the exception: home.css sets #home a's colour by id, so it has to match. */
.home--v8 h1, .home--v8 h2, .home--v8 h3 { color: var(--v8-ink); font-weight: 500; margin: 0 }
.home--v8 p { margin: 0 }
.home--v8 button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit }
#home.home--v8 a { color: inherit; text-decoration: none }
/* gap:0 - below the hero the page is one continuous ground rather than a stack of cards, so the
   sections' own vertical padding sets the rhythm.
   minmax(0, 1fr) rather than the default auto column: the marquee's tracks are flex:none and
   thousands of pixels wide, and an auto grid column sizes to its content's min-content width, so
   the whole page would stretch to the marquee's length. */
.home--v8 .v8-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 }

/* ---------- shared: buttons ----------
   Prefixed with #home.home--v8 rather than the bare class: the reset above is (1,1,1) and would
   otherwise strip the background and colour off every one of these. #header-cta needs the prefix
   twice over, since home.css styles it by id. */
#home.home--v8 .v8-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
/* Tucked into the button's own right padding, so a button with an arrow and one without keep the
   same box - no :has() needed to tell them apart. */
#home.home--v8 .v8-btn-arrow {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: -0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}
.home--v8 .v8-btn-arrow svg { width: 0.8rem; height: 0.8rem }
#home.home--v8 .v8-btn--lg { font-size: 0.95rem; padding: 0.7rem 1.35rem }
#home.home--v8 .v8-btn--lg .v8-btn-arrow { width: 1.75rem; height: 1.75rem; margin-right: -0.5rem }
#home.home--v8 .v8-btn--accent { background: var(--brand); color: #FFFFFF }
#home.home--v8 .v8-btn--accent:hover { background: var(--brand-accent); color: #FFFFFF; transform: translateY(-0.0625rem) }
/* --v8-dark, not --v8-ink: ink is the body-copy colour and stays near-black for readability, while
   every dark FILL on the page follows the secondary brand. */
#home.home--v8 .v8-btn--light { background: #FFFFFF; color: var(--v8-dark) }
#home.home--v8 .v8-btn--light:hover { background: var(--brand); color: #FFFFFF }
/* The header sits on the white top of the hero, so a white pill would vanish - it takes the brand
   fill instead and deepens to the accent on hover. */
#home.home--v8 #header-cta { background: var(--brand); color: #FFFFFF; border-radius: 999px; font-size: 0.85rem; font-weight: 500; padding: 0.6rem 1.1rem }
#home.home--v8 #header-cta:hover { background: var(--brand-accent); color: #FFFFFF }
#home.home--v8 .v8-btn--dark { background: var(--v8-dark); color: #FFFFFF }
#home.home--v8 .v8-btn--dark .v8-btn-arrow { background: rgba(255, 255, 255, .16) }
#home.home--v8 .v8-btn--dark:hover { background: var(--brand); color: #FFFFFF; transform: translateY(-0.0625rem) }

/* ---------- shared: section heads ----------
   No background and no radius: sections sit straight on the page ground, which is what makes the
   white tiles, stat cards and FAQ rows inside them read as cards at all. */
.home--v8 .v8-section {
  padding: clamp(2.5rem, 6vw, 5rem) var(--v8-pad);
}
.home--v8 .v8-head { max-width: var(--v8-max); margin: 0 auto clamp(2rem, 4vw, 3rem) }
.home--v8 .v8-head--center { text-align: center; display: grid; justify-items: center; gap: 0.75rem }
.home--v8 .v8-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.home--v8 .v8-head--split > div { display: grid; gap: 0.75rem; justify-items: start }
.home--v8 .v8-pill {
  display: inline-flex;
  align-items: center;
  /* Symmetric now that there is no dot to make room for on the left. */
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--v8-line);
  border-radius: 999px;
  background: var(--v8-surface);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--v8-muted);
  box-shadow: 0 0.25rem 0.75rem rgba(20, 16, 14, .04);
}
.home--v8 .v8-title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.home--v8 .v8-title--left { text-align: left; max-width: 18ch }
.home--v8 .v8-accent { color: var(--brand) }
.home--v8 .v8-lede { font-size: 0.9rem; color: var(--v8-muted); max-width: 52ch }
.home--v8 .v8-lede--left { text-align: left }
.home--v8 .v8-section-foot { display: flex; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.5rem) }

/* ---------- shared: line-art glyphs ---------- */
.home--v8 .v8-glyph { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.home--v8 .v8-ico {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, .12);
  font-size: 0.95rem;
  line-height: 1;
}
.home--v8 .v8-ico--accent { background: rgba(255, 255, 255, .22) }
/* Line-art rather than emoji: the glyph inherits currentColor, so it stays legible on the accent and
   dark tiles without a per-tile override, and it matches the icons in the category row. */
.home--v8 .v8-ico svg { width: 1.15rem; height: 1.15rem; display: block }

/* ---------- 1. hero ---------- */
.home--v8 .v8-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(36rem, 88vh);
  padding: clamp(1.25rem, 2.6vw, 2rem) var(--v8-pad) clamp(3rem, 7vw, 5.5rem);
  /* One straight fade from a near-white brand tint at the top down to a soft brand tint at the
     bottom. Kept light end to end so the site's own logo and the dark hero copy both read on it. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, #FFFFFF) 0%, color-mix(in srgb, var(--brand) 30%, #FFFFFF) 100%);
  color: var(--v8-ink);
  overflow: hidden;
}

/* header */
.home--v8 .v8-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}
/* Beside the logo, not under it. The baseline nudge lines the small caption up with the wordmark
   rather than with the logo box's centre. */
.home--v8 .v8-brand { display: flex; align-items: center; gap: 0.6rem }
#home.home--v8 .site-powered {
  width: auto;
  margin: 0;
  padding-left: 0.6rem;
  border-left: 1px solid var(--v8-line);
  color: var(--v8-muted);
  text-align: left;
  font-style: normal;
}
/* Both nav rules are addressed by id, not by .v8-nav: home.css styles #main-nav's display / gap /
   font-size AND sets `#home #main-nav a { color: #595959 }` at two ids, which outranks any
   class-based selector here - the links would render mid-grey instead of ink.
   The ≤900px rule there hides this and shows the burger, which is what we want. */
#home.home--v8 #main-nav { display: flex; justify-content: center; gap: clamp(1rem, 2.4vw, 2rem); font-size: 0.85rem }
#home.home--v8 #main-nav a { color: var(--v8-ink); transition: color .18s ease }
#home.home--v8 #main-nav a:hover { color: var(--brand) }
.home--v8 .v8-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem }
#home.home--v8 #nav-toggle { border-color: var(--v8-line); color: var(--v8-ink); padding: 0.7rem 0.9rem; min-height: 0 }
.home--v8 .v8-burger { display: grid; gap: 0.25rem; width: 1.05rem }
.home--v8 .v8-burger i { display: block; height: 0.1rem; background: currentColor; border-radius: 999px; transition: width .2s ease }
.home--v8 .v8-burger i:nth-child(2) { width: 75% }
.home--v8 .v8-burger i:nth-child(3) { width: 50% }
#home.home--v8 #nav-toggle:hover .v8-burger i { width: 100% }
#home.home--v8 #mobile-nav { background: var(--v8-dark); gap: 0.25rem }
#home.home--v8 .mobile-nav-cta { background: var(--brand); color: #FFFFFF; border-radius: 999px }

/* hero copy */
/* margin-block auto centres the copy in whatever height is left under the header, now that there is
   no stat row below it to anchor against. */
.home--v8 .v8-hero-copy {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  margin-block: auto;
  text-align: center;
}
.home--v8 .v8-trust { display: flex; align-items: center; gap: 0.6rem }
.home--v8 .v8-trust-faces { display: flex }
.home--v8 .v8-trust-faces img {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  object-fit: cover;
  border: 0.125rem solid var(--brand);
}
.home--v8 .v8-trust-faces img + img { margin-left: -0.55rem }
.home--v8 .v8-trust-text { max-width: 14ch; font-size: 0.72rem; line-height: 1.3; text-align: left; color: var(--v8-muted) }
.home--v8 .v8-hero-title {
  font-size: clamp(2rem, 5.4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--v8-ink);
  max-width: 18ch;
  text-wrap: balance;
}
.home--v8 .v8-hero-lede { font-size: 0.9rem; color: var(--v8-muted); max-width: 46ch }

/* ---------- 2. fact marquee ---------- */
.home--v8 .v8-marquee-band {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  display: grid;
  /* Same reason as .v8-main: an auto column would size to the marquee's full min-content width and
     drag the label's centring off with it. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  overflow: hidden;
}
.home--v8 .v8-marquee-label {
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  /* Tracking adds a trailing space after the last letter, which pulls centred uppercase text off
     to the left by half of it. */
  padding-left: 0.18em;
  text-transform: uppercase;
  color: var(--v8-dim);
}
.home--v8 .v8-marquee {
  display: flex;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* The container keeps gap:0 and the spacing lives inside each track, so translating one track by
   exactly -100% lands the duplicate in its place with no seam. */
.home--v8 .v8-marquee-track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  /* padding-left must be zeroed explicitly - the UA's list indent would offset the duplicate track
     and put a visible jump in the loop. */
  padding: 0 clamp(2rem, 5vw, 4rem) 0 0;
  margin: 0;
  list-style: none;
  animation: v8-marquee 32s linear infinite;
}
.home--v8 .v8-marquee-track li {
  font-size: clamp(0.95rem, 1.8vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--v8-dim);
}
@keyframes v8-marquee { to { transform: translateX(-100%) } }
@media (prefers-reduced-motion: reduce) {
  .home--v8 .v8-marquee-track { animation: none }
}

/* ---------- 3. statement ---------- */
.home--v8 .v8-statement {
  padding: clamp(3rem, 7vw, 6rem) var(--v8-pad);
  text-align: center;
}
.home--v8 .v8-statement-text {
  margin: 0 auto;
  max-width: 34ch;
  font-size: clamp(1.35rem, 3.4vw, 2.45rem);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--v8-dim);
  text-wrap: pretty;
}
.home--v8 .v8-key { color: var(--v8-ink) }
.home--v8 .v8-inline-face {
  display: inline-block;
  width: clamp(1.6rem, 3.4vw, 2.6rem);
  height: clamp(1.6rem, 3.4vw, 2.6rem);
  border-radius: 999px;
  object-fit: cover;
  vertical-align: -0.3em;
  margin: 0 0.1em;
  box-shadow: 0 0.25rem 0.75rem rgba(20, 16, 14, .16);
}
.home--v8 .v8-statement-cite { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: 0.8rem; color: var(--v8-dim) }

/* ---------- 4. bento ----------
   Two independent columns rather than one grid with row spans: the reference stacks two tall tiles
   against three shorter ones, and letting each column distribute its own rows keeps that silhouette
   at every width without hand-tuned spans. */
.home--v8 .v8-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.75rem;
  max-width: var(--v8-max);
  margin: 0 auto;
}
/* Spans both columns at the foot of the grid. */
.home--v8 .v8-tile--wide { grid-column: 1 / -1 }
.home--v8 .v8-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 13rem;
  padding: 1.1rem;
  border: 1px solid var(--v8-line);
  border-radius: var(--v8-r);
  background: var(--v8-surface);
  overflow: hidden;
}
.home--v8 .v8-tile-art { flex: 1; display: grid; place-items: center; min-height: 6rem; border-radius: var(--v8-r-sm) }
/* Pinned to the corner rather than stacked into the copy, so it never competes with the heading and
   sits in the same place whether the tile leads with art or with an icon. currentColor carries it
   across the light, soft and dark tiles without a per-variant override. */
.home--v8 .v8-step-no {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: currentColor;
  opacity: .4;
}
.home--v8 .v8-tile-copy .v8-ico { margin-bottom: 0.7rem }
.home--v8 .v8-tile-copy h3 { font-size: 1rem; letter-spacing: -0.02em; margin-bottom: 0.3rem }
.home--v8 .v8-tile-copy p { font-size: 0.8rem; line-height: 1.5; color: var(--v8-muted) }
/* A flat brand tint rather than the bloom this used to carry. The tile is mostly a white mock card
   and two lines of copy, and a strong gradient behind them fought both. */
.home--v8 .v8-tile--glow {
  border-color: color-mix(in srgb, var(--brand) 16%, var(--v8-line));
  background: color-mix(in srgb, var(--brand) 7%, var(--v8-surface));
}
/* A soft neutral halo under the pill, not a brand bloom - the pill is already the darkest thing in
   the tile and a coloured glow behind it read as a second light source. Named --shade rather than
   --glow so the class does not promise colour it no longer has. */
.home--v8 .v8-tile-art--shade {
  background: radial-gradient(ellipse 68% 68% at 50% 52%, color-mix(in srgb, var(--v8-ink) 11%, transparent) 0%, transparent 70%);
}
.home--v8 .v8-tile--soft { background: var(--v8-chip) }
.home--v8 .v8-tile-art--tiles { display: flex; align-items: center; justify-content: center; gap: 0.5rem }
.home--v8 .v8-net {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.9rem;
  background: var(--v8-surface);
  border: 1px solid var(--v8-line);
  color: var(--v8-ink);
  box-shadow: 0 0.5rem 1.25rem rgba(20, 16, 14, .06);
}
.home--v8 .v8-net svg { width: 1.35rem; height: 1.35rem }
.home--v8 .v8-net:nth-child(2) { transform: translateY(-0.45rem) }
/* flex-end for the same reason as the dark tile: the icon now sits inside .v8-tile-copy, so icon,
   statement and citation move as one block anchored to the bottom. */
.home--v8 .v8-tile--accent {
  justify-content: flex-end;
  border-color: transparent;
  background: var(--brand);
  color: #FFFFFF;
}
/* Scoped through .v8-tile--accent so these outrank `.v8-tile-copy p`, which is one class + one type
   and would otherwise drop the statement to 0.8rem muted body copy now that it lives in a copy
   block. */
.home--v8 .v8-tile--accent .v8-tile-quote {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: 0.55rem;
}
.home--v8 .v8-tile--accent .v8-tile-cite { font-size: 0.72rem; color: rgba(255, 255, 255, .72) }
/* flex-end, not space-between: the icon now lives inside .v8-tile-copy, so the whole block sits at
   the bottom of the tile as one unit. */
.home--v8 .v8-tile--dark {
  justify-content: flex-end;
  border-color: transparent;
  background: var(--v8-dark);
  color: #FFFFFF;
}
.home--v8 .v8-tile--dark h3 { color: #FFFFFF }
.home--v8 .v8-tile--dark p { color: var(--v8-on-dark) }

/* bento mocks — built in markup so they theme with --brand and cost no request */
.home--v8 .v8-mock {
  width: 100%;
  max-width: 15rem;
  padding: 0.75rem;
  border-radius: 0.9rem;
  background: var(--v8-surface);
  box-shadow: 0 1rem 2.25rem rgba(20, 16, 14, .14);
}
.home--v8 .v8-mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem }
.home--v8 .v8-mock-head p { font-size: 0.78rem; font-weight: 500 }
.home--v8 .v8-mock-avatar { width: 1.35rem; height: 1.35rem; border-radius: 999px; background: var(--v8-chip) }
.home--v8 .v8-mock-cta {
  padding: 0.45rem;
  border-radius: 0.55rem;
  background: var(--brand);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 500;
  text-align: center;
}
.home--v8 .v8-mock-rows { margin: 0.6rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem }
.home--v8 .v8-mock-rows li { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--v8-muted) }
.home--v8 .v8-mock-rows strong { font-weight: 500; color: var(--v8-ink) }
.home--v8 .v8-mock--dark {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 15rem;
  background: var(--v8-dark);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 0.6rem 1rem 0.6rem 0.6rem;
}
.home--v8 .v8-mock-ico {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: 0.9rem;
  flex: none;
}
.home--v8 .v8-mock-title { font-size: 0.75rem; font-weight: 500 }
.home--v8 .v8-mock-sub { font-size: 0.65rem; color: var(--v8-on-dark) }

/* ---------- 5. four-column category row ---------- */
.home--v8 .v8-quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: var(--v8-max);
  margin: 0 auto;
}
.home--v8 .v8-quad-item { display: grid; align-content: start; gap: 0.5rem }
.home--v8 .v8-quad-ico {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.7rem;
  background: var(--v8-chip);
  color: var(--v8-ink);
  margin-bottom: 0.35rem;
}
.home--v8 .v8-quad-ico svg { width: 1.2rem; height: 1.2rem }
.home--v8 .v8-quad-item h3 { font-size: 0.92rem; letter-spacing: -0.02em }
.home--v8 .v8-quad-item p { font-size: 0.8rem; line-height: 1.5; color: var(--v8-muted) }
#home.home--v8 .v8-quad-item a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.1875rem }

/* ---------- 6. estimator as a process block ---------- */
.home--v8 .v8-process .v8-head--split { margin-bottom: clamp(1.5rem, 3vw, 2rem) }
/* Amortisation stack: two filled areas, drawn as SVG paths by js/home-v8.js from the real
   month-by-month schedule. Nothing here knows the maths - only the geometry box and the colours.
   Series colours are the site's own --brand and --brand-2. Those separate by roughly dE 39 for
   normal vision and dE 28+ under every CVD type, and the legend names AND values both series, so
   identity never rests on colour alone. */
.home--v8 .v8-plot-wrap {
  max-width: var(--v8-max);
  margin: clamp(3.75rem, 8.5vw, 7rem) auto clamp(4.25rem, 9.5vw, 7.5rem);
}
.home--v8 .v8-plot-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.75rem;
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
  color: var(--v8-muted);
}
.home--v8 .v8-plot-keys { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem }
/* Carries the amount slider's real effect, so it is given more weight than the two series labels. */
.home--v8 .v8-plot-total { font-size: 0.85rem }
.home--v8 .v8-plot-total b { font-weight: 500; color: var(--v8-ink) }
.home--v8 .v8-plot-key { display: inline-flex; align-items: baseline; gap: 0.45rem }
.home--v8 .v8-plot-key::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 0.15rem;
  flex: none;
  transform: translateY(0.05rem);
}
.home--v8 .v8-plot-key--principal::before { background: var(--brand) }
.home--v8 .v8-plot-key--interest::before { background: var(--brand-2) }
/* The value wears ink, not the series colour - the swatch beside it already carries identity. */
.home--v8 .v8-plot-key b { font-weight: 500; color: var(--v8-ink) }

.home--v8 .v8-plot {
  position: relative;
  height: clamp(11rem, 22vw, 17rem);
  border-bottom: 1px solid var(--v8-line);
  cursor: crosshair;
  /* pan-y so a vertical swipe still scrolls the page while a horizontal drag reads the chart. */
  touch-action: pan-y;
}
.home--v8 .v8-plot-svg { display: block; width: 100%; height: 100% }
.home--v8 .v8-plot-area--principal { fill: var(--brand) }
.home--v8 .v8-plot-area--interest { fill: var(--brand-2) }
/* The 2px surface-coloured gap that stops the two stacked fills reading as one shape.
   non-scaling-stroke because preserveAspectRatio="none" would otherwise stretch its width with the
   box and leave a wedge instead of a hairline. */
.home--v8 .v8-plot-split {
  fill: none;
  stroke: var(--v8-bg);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Progressive enhancement: where `d` is animatable the bands morph between values and elsewhere
   they snap. Point count only changes on a term change, which is the one case it cannot tween. */
.home--v8 .v8-plot-area,
.home--v8 .v8-plot-split { transition: d .35s cubic-bezier(.22, .8, .3, 1) }

.home--v8 .v8-plot-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--v8-ink);
  opacity: .35;
  pointer-events: none;
}
.home--v8 .v8-plot-tip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  display: grid;
  gap: 0.1rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.55rem;
  background: var(--v8-dark);
  color: #FFFFFF;
  font-size: 0.68rem;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  box-shadow: 0 0.5rem 1.5rem rgba(20, 16, 14, .22);
}
/* Near the right edge the tip would run past the plot, so it hangs off the cursor instead. */
.home--v8 .v8-plot-tip.is-flipped { transform: translateX(-100%) }
.home--v8 .v8-plot-tip b { font-weight: 500 }
.home--v8 .v8-plot-tip span { color: var(--v8-on-dark) }
.home--v8 .v8-plot-axis {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  color: var(--v8-dim);
}

.home--v8 .v8-est {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 0.75rem;
  max-width: var(--v8-max);
  margin: 0 auto;
}
.home--v8 .v8-est-inputs,
.home--v8 .v8-est-out { padding: clamp(1.25rem, 2.4vw, 1.85rem); border-radius: var(--v8-r) }
.home--v8 .v8-est-inputs { border: 1px solid var(--v8-line); background: var(--v8-surface); display: grid; align-content: start; gap: 1.1rem }
.home--v8 .v8-est-label { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v8-dim) }
.home--v8 .v8-est-label--light { color: rgba(255, 255, 255, .55) }
.home--v8 .v8-field { display: grid; gap: 0.35rem }
.home--v8 .v8-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem }
.home--v8 .v8-field-name { font-size: 0.82rem; color: var(--v8-muted) }
.home--v8 .v8-field-value { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.035em; color: var(--v8-ink) }
.home--v8 .v8-field-scale { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--v8-dim) }

/* ---- range sliders ----
   home.css leaves these as native controls tinted with accent-color. Everything below replaces that
   with a drawn track and thumb. The prefixed pseudo-elements have to live in SEPARATE rules: a
   selector list containing one pseudo-element the engine does not know invalidates the whole rule,
   so a combined -webkit-/-moz- list would style neither.
   The filled portion comes from --fill, which js/home-v8.js writes on input - WebKit has no
   equivalent of ::-moz-range-progress, so the track paints it as a hard-stop gradient instead. */
#home.home--v8 input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.6rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
#home.home--v8 input[type=range]::-webkit-slider-runnable-track {
  height: 0.375rem;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--brand) 0, var(--brand) var(--fill, 50%),
    var(--v8-chip) var(--fill, 50%), var(--v8-chip) 100%);
}
#home.home--v8 input[type=range]::-moz-range-track {
  height: 0.375rem;
  border-radius: 999px;
  background: var(--v8-chip);
}
#home.home--v8 input[type=range]::-moz-range-progress {
  height: 0.375rem;
  border-radius: 999px;
  background: var(--brand);
}
/* margin-top centres the thumb on the track: (track 0.375rem - thumb 1.2rem) / 2. Firefox centres
   its own thumb, which is why only the WebKit rule carries it. */
#home.home--v8 input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -0.41rem;
  border: 0.15rem solid var(--brand);
  border-radius: 999px;
  background: var(--v8-surface);
  box-shadow: 0 0.25rem 0.7rem rgba(20, 16, 14, .2);
  transition: transform .15s ease, box-shadow .15s ease;
}
#home.home--v8 input[type=range]::-moz-range-thumb {
  width: 1.2rem;
  height: 1.2rem;
  border: 0.15rem solid var(--brand);
  border-radius: 999px;
  background: var(--v8-surface);
  box-shadow: 0 0.25rem 0.7rem rgba(20, 16, 14, .2);
  transition: transform .15s ease, box-shadow .15s ease;
}
#home.home--v8 input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.08) }
#home.home--v8 input[type=range]:hover::-moz-range-thumb { transform: scale(1.08) }
/* The halo only appears while dragging, so the control shows it is live without carrying a
   permanent glow. */
#home.home--v8 input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.14);
  box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--brand) 15%, transparent);
}
#home.home--v8 input[type=range]:active::-moz-range-thumb {
  transform: scale(1.14);
  box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--brand) 15%, transparent);
}
/* The outline would otherwise ring the full 1.6rem-tall input rather than the thumb. */
#home.home--v8 input[type=range]:focus { outline: none }
#home.home--v8 input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--brand) 28%, transparent);
}
#home.home--v8 input[type=range]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--brand) 28%, transparent);
}
.home--v8 .v8-field-note { font-size: 0.72rem; line-height: 1.5; color: var(--v8-dim) }
.home--v8 .v8-terms { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem }
#home.home--v8 .term-btn {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--v8-line);
  border-radius: 999px;
  background: var(--v8-surface);
  color: var(--v8-ink);
  font-size: 0.82rem;
  font-weight: 400;
}
#home.home--v8 .term-btn:hover { background: var(--v8-chip) }
#home.home--v8 .term-btn.active { background: var(--v8-dark); border-color: var(--v8-dark); color: #FFFFFF }

/* Flat secondary, no glow behind it - this panel is dense with figures and a bloom under them only
   costs legibility. */
.home--v8 .v8-est-out {
  background: var(--v8-dark);
  color: #FFFFFF;
  display: grid;
  align-content: start;
  gap: 0.6rem;
}
.home--v8 .v8-est-figure { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1 }
.home--v8 .v8-est-bar { display: flex; height: 0.4rem; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .14); margin-top: 0.4rem }
.home--v8 .v8-est-bar-principal { background: #FFFFFF; transition: width .3s ease }
.home--v8 .v8-est-bar-interest { background: var(--brand); transition: width .3s ease }
.home--v8 .v8-est-bar-labels { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.68rem; color: var(--v8-on-dark) }
.home--v8 .v8-est-rows { margin: 0.5rem 0 0; display: grid; gap: 0.1rem }
.home--v8 .v8-est-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid rgba(255, 255, 255, .1) }
.home--v8 .v8-est-row dt { font-size: 0.78rem; color: var(--v8-on-dark) }
.home--v8 .v8-est-row dd { margin: 0; font-size: 0.78rem; font-weight: 500 }
.home--v8 .v8-est-disclosure { margin-top: 0.4rem; font-size: 0.68rem; line-height: 1.55; color: rgba(255, 255, 255, .45) }
#home.home--v8 .estimator-fineprint { max-width: var(--v8-max); margin: clamp(1.25rem, 2.5vw, 2rem) auto 0; color: var(--v8-dim) }

/* ---------- 7. market trio ---------- */
.home--v8 .v8-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: var(--v8-max);
  margin: 0 auto;
}
.home--v8 .v8-stat {
  margin: 0;
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
  border: 1px solid var(--v8-line);
  border-radius: var(--v8-r);
  background: var(--v8-surface);
  display: grid;
  gap: 0.75rem;
  align-content: start;
}
.home--v8 .v8-stat-value { font-size: clamp(2rem, 4.4vw, 2.85rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; color: var(--brand) }
.home--v8 .v8-stat-label { font-size: 0.85rem; line-height: 1.4; margin-top: 0.35rem }
/* Stacked, left-aligned: the mark sits above its period rather than beside it, so the two read as
   mark-then-date instead of one centred row. */
.home--v8 .v8-stat-source {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: var(--v8-dim);
}
/* Sized by height so marks of different aspect ratios sit at the same optical weight. Slightly held
   back, because this is a citation and should not out-shout the figure above it.
   display:block kills the inline baseline gap under the image, which would otherwise add a few
   stray pixels to the stack. */
.home--v8 .v8-stat-logo { display: block; height: 1.4rem; width: auto; flex: none; opacity: .9 }
.home--v8 .v8-stat-source span { display: block; line-height: 1 }
/* A stat with no period would otherwise leave the column gap hanging under the mark. */
.home--v8 .v8-stat-source span:empty { display: none }
.home--v8 .v8-trio-note {
  max-width: 56ch;
  margin: clamp(1.25rem, 2.5vw, 2rem) auto 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--v8-dim);
  text-align: center;
}

/* ---------- 8. faq ---------- */
.home--v8 .v8-faq { max-width: var(--v8-max); margin: 0 auto }

/* The cloud and the one-at-a-time behaviour only exist once the script has run. Until then every
   answer is on the page as a plain headed list - these are the disclosures, so they are never
   behind a click that JS has to deliver. */
.home--v8 .v8-cloud { display: none }
.home--v8 .v8-faq.is-enhanced .v8-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.1rem;
  max-width: 58rem;
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
}
.home--v8 .v8-cloud-chip {
  padding: 0.85rem 1.6rem;
  border: 1px solid color-mix(in srgb, #FFFFFF 55%, var(--v8-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--v8-surface) 55%, transparent);
  backdrop-filter: blur(0.75rem) saturate(1.6);
  -webkit-backdrop-filter: blur(0.75rem) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0.35rem 1rem rgba(20, 16, 14, .07);
  color: var(--v8-muted);
  font-size: 0.85rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}
/* The unselected questions sit back so the chosen one reads as chosen. Hover brings one forward
   again, so the cloud still feels live rather than greyed out. */
.home--v8 .v8-cloud-chip:not(.is-active) { opacity: .8 }
.home--v8 .v8-cloud-chip:not(.is-active):hover { opacity: 1 }
/* Without a backdrop-filter the translucency just reads as a washed-out chip, so those browsers get
   the opaque surface back. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .home--v8 .v8-cloud-chip { background: var(--v8-surface) }
}
/* Size and vertical drift vary on a 5-step cycle so the row reads as a drifting cloud rather than a
   tidy list of pills. Nothing here depends on the question count. */
.home--v8 .v8-cloud-chip:nth-child(5n + 1) { font-size: 0.95rem; transform: translateY(-0.3rem) }
.home--v8 .v8-cloud-chip:nth-child(5n + 2) { font-size: 0.8rem; transform: translateY(0.35rem) }
.home--v8 .v8-cloud-chip:nth-child(5n + 3) { font-size: 0.9rem }
.home--v8 .v8-cloud-chip:nth-child(5n + 4) { font-size: 0.82rem; transform: translateY(-0.45rem) }
.home--v8 .v8-cloud-chip:nth-child(5n + 5) { font-size: 0.88rem; transform: translateY(0.25rem) }
.home--v8 .v8-cloud-chip:hover {
  background: color-mix(in srgb, var(--v8-surface) 78%, transparent);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--v8-line));
  color: var(--v8-ink);
}
/* The selected chip stays solid. It is the one piece of state in the cloud, and glass would blur
   exactly the distinction that matters. */
.home--v8 .v8-cloud-chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0.4rem 1.1rem color-mix(in srgb, var(--brand) 28%, transparent);
}

/* Narrower than the section: at this type size the full --v8-max would run to an unreadable measure. */
.home--v8 .v8-faq-panels { display: grid; gap: 0.4rem; max-width: 52rem; margin: 0 auto }
/* No border, no fill - the answer sits straight on the page ground and the type carries it. Padding
   stays only to keep it off the cloud above and the contact row below. */
.home--v8 .v8-faq-panel {
  padding: clamp(0.5rem, 1.5vw, 1rem) 0;
  text-align: center;
}
.home--v8 .v8-faq-panel p {
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  letter-spacing: -0.018em;
  color: var(--v8-muted);
  text-wrap: pretty;
}
.home--v8 .v8-faq-panel-q { font-size: 0.95rem; margin-bottom: 0.4rem }
#home.home--v8 .v8-faq-panel a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.1875rem }

/* Enhanced: every panel shares one grid cell, so the box is as tall as the longest answer and
   switching question never shifts the page under the reader. visibility, not display, so the
   inactive panels stay out of the accessibility tree without collapsing the box. */
.home--v8 .v8-faq.is-enhanced .v8-faq-panels { grid-template-areas: 'panel' }
/* align-content centres each answer inside the shared cell. Without it a two-line answer would
   hang at the top of a box sized to the longest one. */
.home--v8 .v8-faq.is-enhanced .v8-faq-panel {
  grid-area: panel;
  display: grid;
  align-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.4rem);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.home--v8 .v8-faq.is-enhanced .v8-faq-panel.is-active { opacity: 1; visibility: visible; transform: none }
.home--v8 .v8-faq.is-enhanced .v8-faq-panel-q { display: none }

.home--v8 .v8-faq-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.home--v8 .v8-faq-phone { font-size: 0.85rem; color: var(--v8-muted) }

/* ---------- cursor ring ----------
   Created by js/home-v8.js and only on a fine pointer. The native cursor is deliberately left
   visible underneath: the estimator sliders, the chart's crosshair and every form control in the
   funnel carry meaningful cursors, and replacing them with a ring would cost more than it buys.
   Two elements because the JS owns the outer transform for position - the inner one is free to
   scale on hover without the two fighting over the same property. */
.home--v8-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  will-change: transform;
}
.home--v8-cursor i {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  margin: -1.125rem 0 0 -1.125rem;
  background: var(--brand);
  border-radius: 50%;
  transition: transform .22s ease, background .22s ease;
}
/* Over anything interactive the disc inverts whatever is under it instead of covering it, so a link
   stays readable through the cursor. White + difference is a true inversion; the blend has to sit on
   the OUTER element because a stacking context isolates blending, and the inner one is inside the
   context the outer creates. */
.home--v8-cursor.is-hot { mix-blend-mode: difference }
.home--v8-cursor.is-hot i { transform: scale(1.55); background: #FFFFFF }
/* The script already refuses to create this on touch. This is the backstop: a hybrid device that
   reports a fine pointer at load and is then used by finger would otherwise leave the ring parked
   on screen with nothing driving it. */
@media (hover: none), (pointer: coarse) {
  .home--v8-cursor { display: none }
}

/* ---------- funnel hand-off wipe ----------
   Created by js/home-v8.js, not by the template: it only exists when GSAP is present, and dead
   markup for an animation that may never run is worse than none. */
.home--v8-wipe {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
}
/* A soft-edged disc of flat brand colour. The blur is what turns a hard expanding circle into
   something that reads as ink spreading - without it this is a wipe, not a liquid. */
.home--v8-wipe span {
  position: absolute;
  border-radius: 50%;
  background: var(--brand);
  filter: blur(2rem);
  will-change: transform, opacity;
}

/* ---------- footer ---------- */
#home.home--v8 .site-footer { background: var(--v8-dark); color: rgba(255, 255, 255, .5) }
/* home.css already underlines these through .u, but this variant's blanket `a { text-decoration:
   none }` is the same specificity and loads second, so it was silently winning and stripping them.
   Scoped to the footer so the section nav and in-copy links keep their own treatment. */
#home.home--v8 .site-footer a { text-decoration: underline; text-underline-offset: 0.1875rem }
#home.home--v8 .footer-inner { padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem) }
#home.home--v8 .footer-legal { border-top-color: rgba(255, 255, 255, .1) }
#home.home--v8 .footer-col h3 { color: rgba(255, 255, 255, .8) }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .home--v8 .v8-quad { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 900px) {
  .home--v8 .v8-header { grid-template-columns: 1fr auto }
  .home--v8 .v8-hero { min-height: 0 }
  /* The outer columns carry the least information, so they go first and the composition keeps its
     centre rather than losing its anchor. */
  .home--v8 .v8-bento { grid-template-columns: minmax(0, 1fr) }
  .home--v8 .v8-est { grid-template-columns: minmax(0, 1fr) }
  .home--v8 .v8-trio { grid-template-columns: minmax(0, 1fr) }
  .home--v8 .v8-title--left { max-width: none }
}
@media (max-width: 620px) {
  .home--v8 .v8-quad { grid-template-columns: minmax(0, 1fr) }
  .home--v8 .v8-head--split { flex-direction: column; align-items: flex-start }
}