/* Homepage variant v7 — app-landing layout.
   Light grey ground, large white rounded cards, pill buttons, two-tone headlines, an absolutely
   positioned floating-card hero stage and a dark photo showcase, closing on the shared legal
   footer on the page's own ground.
   Graphics: fixed photography in media/v7/ (overridable per slot in the TAV), the handset and its
   app screen built in markup, and line-art SVG icons elsewhere - no placeholders, no rotation.
   Scoped under .home--v7 and layered on home.css. */

.home--v7 {
  --v7-bg: #EFEFEE;
  --v7-surface: #FFFFFF;
  --v7-ink: #121212;
  --v7-dim: #A2A2A2;
  --v7-muted: #6E6E6C;
  --v7-line: #E7E7E5;
  --v7-chip: #F2F2F0;
  --v7-dark: #101010;
  --v7-brand: var(--brand);
  /* Secondary panel (estimator output). Its on-tones are mixed from the same secondary rather than
     hardcoded greys, so the block stays coherent whatever style.secondary a brand sets. */
  --v7-panel: var(--brand-2);
  --v7-on-panel: color-mix(in srgb, var(--brand-2) 7%, #fff);
  --v7-on-panel-dim: color-mix(in srgb, var(--brand-2) 34%, #fff);
  --v7-panel-line: color-mix(in srgb, var(--brand-2) 74%, #fff);
  --v7-r: 1.75rem;
  --v7-r-md: 1.125rem;
  --v7-max: 1240px;
  --v7-gut: clamp(0.75rem, 2vw, 1.25rem);
  --v7-pad: clamp(1.25rem, 3.4vw, 3.25rem);
}

/* ---------- dark mode ----------
   Only the tokens are redefined, so every rule that reads them follows automatically. Anything that
   sits on photography or on the secondary panel keeps its literal white - those surfaces do not
   change with the theme. */
.home--v7.is-dark {
  --v7-bg: #0E0E0D;
  --v7-surface: #1A1A18;
  --v7-ink: #F2F2F0;
  --v7-dim: #6C6C68;
  --v7-muted: #A2A29D;
  --v7-line: #2B2B27;
  --v7-chip: #232320;
}
/* Logo art is dark-on-transparent, so it needs inverting once the ground goes dark. */
#home.home--v7.is-dark .brand-logo-img,
#home.home--v7.is-dark .footer-logo-img { filter: brightness(0) invert(1) }

#home.home--v7 {
  background: var(--v7-bg);
  transition: background-color .35s ease, color .35s ease;
  color: var(--v7-ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  padding: var(--v7-gut);
}
#home.home--v7 h1, #home.home--v7 h2, #home.home--v7 h3 { color: var(--v7-ink); font-weight: 500 }
#home.home--v7 a { color: var(--v7-ink); text-decoration: none }
#home.home--v7 button { border: 0; font: inherit; cursor: pointer }
#home.home--v7 :focus-visible { outline: 2px solid var(--v7-ink); outline-offset: 3px }

.home--v7 .v7-main { max-width: var(--v7-max); margin: 0 auto; display: grid; gap: var(--v7-gut) }

/* ---------- portraits ---------- */
/* Agent portrait in the hero float. object-fit crops any source ratio to a clean square. */
.home--v7 .v7-agent {
  flex: none;
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  object-fit: cover;
}
/* Avatar tiles. Rounded squares to match the reference - set border-radius: 50% for circles. */
.home--v7 .v7-thumb {
  flex: none;
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.6rem;
  object-fit: cover;
}

/* Photography */
/* Anchored right and narrower than the block, so the subject sits on the right and the left is
   clear for the copy. Horizontal object-position could not do this: the source is square in a wide
   box, so cover scales it to fill the width exactly and only ever overflows vertically - there is
   no horizontal slack to shift. The parent's overflow:hidden supplies the corner radius. */
.home--v7 .v7-cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 70%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
/* Angled scrim: solid secondary behind the copy, cutting diagonally across the block so the photo
   opens up toward the top right. 115deg rather than a steeper angle keeps the solid edge past the
   full height of the copy column - a sharper diagonal would clip the headline's last line. */
.home--v7 .v7-scrim {
  position: absolute;
  inset: 0;
  border-radius: var(--v7-r);
  background: linear-gradient(115deg,
    var(--brand-2) 0%,
    var(--brand-2) 38%,
    color-mix(in srgb, var(--brand-2) 72%, transparent) 54%,
    color-mix(in srgb, var(--brand-2) 32%, transparent) 78%,
    color-mix(in srgb, var(--brand-2) 66%, transparent) 100%);
}
/* Icon tile on the showcase mini cards. Compact rather than the full-width square the photo used:
   an icon floating in a large empty tile reads as a missing image. */
/* Shared glyph. Strokes with currentColor so each context sets it once on the wrapper: white on the
   glass cards, brand on the light stat cards. */
.home--v7 .v7-glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* No tile - the glyph sits directly on the glass. White, because there is no light surface behind
   it and a brand stroke would fall apart wherever the photo runs bright or busy. */
.home--v7 .v7-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}
.home--v7 .v7-mini-icon svg { width: 1.75rem; height: 1.75rem; display: block }
/* Stat-card icon. Brand-tinted tile on the white card - unlike the glass cards there is a light
   surface here, so the brand stroke holds. */
.home--v7 .v7-trio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 1rem;
  background: var(--v7-surface);
  color: var(--v7-brand);
}
.home--v7 .v7-trio-icon svg { width: 1.8rem; height: 1.8rem; display: block }
/* Emoji chip. TAV-overridable per slot, so a brand can swap the glyph without touching markup.
   The font stack asks for Apple's set first, so macOS/iOS render the iOS emoji; other platforms
   fall through to their own colour font rather than a monochrome outline. */
.home--v7 .v7-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.6rem;
  background: var(--v7-chip);
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
  font-size: 0.95rem;
  line-height: 1;
}
/* The note sits on a chip-grey card, so its icon needs to lift off it. Row icons are handled in
   the notification block below and deliberately not included here. */
.home--v7 .v7-note .v7-ico { background: var(--v7-surface) }
/* ---------- phone frame ----------
   A real CSS device: black bezel as a thick border and an inset screen, no notch. */
.home--v7 .v7-phone {
  position: relative;
  background: var(--v7-surface);
  border: 0;
  border-radius: 2.9rem;
  box-shadow: 0 1.5rem 3rem rgba(18, 18, 18, .16);
}
/* True modern-iPhone display ratio (1179x2556 etc. all reduce to ~19.5:9). box-sizing is border-box
   here, so the ratio covers the bezel too - with a thin uniform bezel the screen reads correctly.
   The radius is a percentage PAIR so it scales with the phone instead of shrinking visually as the
   device widens. A single percentage would give elliptical corners on a 9:19.5 box; the vertical
   value is the horizontal one x (9/19.5) = x0.4615, which keeps them circular. */
.home--v7 .v7-phone--fixed {
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: 14% / 6.46%;
}
.home--v7 .v7-phone-screen { position: absolute; inset: 0.35rem; display: grid; overflow: hidden; border-radius: 12.5% / 5.77% }

/* ---------- app screen (hero handset) ---------- */
/* Sits over the photo, so it carries a scrim instead of a solid fill - dark at the ends where the
   greeting and the rows sit, clear through the middle so the faces read. */
.home--v7 .v7-app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.6rem 1.15rem 1.35rem;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 28%, rgba(0,0,0,.1) 55%, rgba(0,0,0,.62) 100%);
}

.home--v7 .v7-app-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem }
.home--v7 .v7-app-hi {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}
/* Scaled with the greeting so the row stays balanced. */
.home--v7 .v7-app-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--v7-brand) 25%, #fff);
  flex: none;
}
/* Pushed to the bottom so the middle of the photo stays clear. */
.home--v7 .v7-app-card {
  margin-top: auto;
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding: 0.75rem;
  background: var(--v7-surface);
  border-radius: 1rem;
}
/* Photo fills the whole screen. The source is square and the screen is 9:19.5, so cover crops it
   hard on the sides; object-position biases upward to keep the faces rather than the hands. */
.home--v7 .v7-app-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* Matches the real CTAs so the mock screen shows the same primary action. */
.home--v7 .v7-app-cta {
  width: 100%;
  padding: 0.45rem;
  border-radius: 999px;
  background: var(--v7-brand);
  color: #FFFFFF;
  font-size: 0.6rem;
  font-weight: 500;
  text-align: center;
}
.home--v7 .v7-app-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem }
.home--v7 .v7-app-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--v7-surface);
  border-radius: 0.6rem;
  font-size: 0.55rem;
}
.home--v7 .v7-app-rows span { color: var(--v7-muted) }
.home--v7 .v7-app-rows strong { font-weight: 500 }
/* Pure-CSS bar chart (hero float). Bar heights come from an inline --h per bar. */
.home--v7 .v7-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.2rem;
  height: 3.5rem;
  margin-top: 0.5rem;
}
.home--v7 .v7-bar {
  flex: 1;
  height: var(--h, 50%);
  min-width: 0.3rem;
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--v7-ink) 12%, transparent);
}
.home--v7 .v7-bar--on { background: var(--v7-brand) }

/* ---------- shared bits ---------- */
.home--v7 .v7-card { background: var(--v7-surface); border-radius: var(--v7-r) }
/* home.css styles these sections by id - `#home #how`, `#home #market`, `#home #estimator` - at
   (2,0,0), which beats any class selector here. Two of them hardcode background:#FFFFFF, which is
   why the cards stayed white in dark mode, and #estimator forces its own max-width and padding.
   Two ids plus a class gets to (2,1,0) and takes them back. */
#home.home--v7 #how,
#home.home--v7 #market {
  background: var(--v7-surface);
  border-top: 0;
  border-bottom: 0;
  overflow: visible;
}
#home.home--v7 #estimator {
  max-width: none;
  margin: 0;
  padding: clamp(2rem, 4vw, 3.5rem) var(--v7-pad);
}
.home--v7 .v7-pill {
  display: inline-block;
  margin: 0;
  padding: 0.4rem 0.9rem;
  background: var(--v7-chip);
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--v7-muted);
}
.home--v7 .v7-pill--dark { background: rgba(255,255,255,.16); color: #FFFFFF }
.home--v7 .v7-dim { color: var(--v7-dim) }
/* Lifted from .6 and given a shadow: this sits over rotating photography, so it has to stay
   readable against whatever frame the rotation lands on, not just an average one. */
.home--v7 .v7-dim-light { color: rgba(255,255,255,.82) }
.home--v7 .v7-showcase-copy { text-shadow: 0 1px 12px rgba(0,0,0,.45) }
.home--v7 .v7-title {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.home--v7 .v7-title--center { text-align: center; margin-inline: auto; max-width: 18ch }
/* Needs the id to clear `#home.home--v7 h2 {color:var(--v7-ink)}` at (1,1,1) - a class-only rule
   at (0,2,0) loses on id count and the heading renders dark-on-dark. */
#home.home--v7 .v7-title--light { color: #FFFFFF }
.home--v7 .v7-body { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--v7-muted); max-width: 42ch }
.home--v7 .v7-body--light { color: rgba(255,255,255,.75) }

/* One button style: brand fill on every CTA. Needs the id to clear `#home.home--v7 a` at (1,2,1) -
   one of these buttons is an anchor, and a class-only rule at (0,2,0) loses to it, leaving the
   label dark on the brand fill. */
#home.home--v7 .v7-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  background: var(--v7-brand);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
#home.home--v7 .v7-btn:hover { background: color-mix(in srgb, var(--v7-brand) 84%, #000); color: #FFFFFF }

/* ---------- header (sits on the grey ground, outside the cards) ---------- */
.home--v7 .v7-header {
  max-width: var(--v7-max);
  margin: 0 auto;
  padding: 0.55rem 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Matches the funnel header's treatment (.funnel-brand / .funnel-header__powered in app.css):
   inline-flex column, logo above, powered-by right-aligned under it in italic. */
.home--v7 .v7-brand { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0 }
#home.home--v7 .v7-logo { display: flex; align-items: center }
#home.home--v7 .site-powered {
  margin: var(--powered-gap-funnel, 0.15rem) 0 0;
  width: 100%;
  font-size: 0.7rem;
  font-style: italic;
  letter-spacing: 0.02em;
  text-align: right;
  color: var(--v7-muted);
}

/* Hamburger + shelf. home.css keeps #nav-toggle hidden and flips it to inline-flex at 900px with
   !important, so only the skin is set here - and the base display:none is at (1,2,0) to beat
   home.css's own (1,1,0) rule without touching the breakpoint behaviour. */
.home--v7 .v7-header-actions { display: flex; align-items: center; gap: 0.6rem }
/* Theme toggle. Only one of the two glyphs shows: moon while light (what you would switch to),
   sun while dark. */
#home.home--v7 .v7-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--v7-line);
  border-radius: 999px;
  background: var(--v7-surface);
  color: var(--v7-ink);
  transition: background .2s ease, border-color .2s ease;
}
#home.home--v7 .v7-theme:hover { border-color: var(--v7-ink) }
.home--v7 .v7-theme svg { width: 1.2rem; height: 1.2rem }
.home--v7 .v7-theme-sun { display: none }
.home--v7.is-dark .v7-theme-sun { display: block }
.home--v7.is-dark .v7-theme-moon { display: none }

/* Addressed by id: home.css sets `#home #nav-toggle { background:none; color:#131A16; border:… }`
   at (2,0,0), which beats a class selector here - so in dark mode the glyph stayed near-black on a
   dark button. Two ids plus a class reaches (2,1,0) and takes it back. */
#home.home--v7 #nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--v7-line);
  border-radius: 999px;
  background: var(--v7-surface);
  color: var(--v7-ink);
}
#home.home--v7 #nav-toggle:hover { border-color: var(--v7-ink) }

/* Staggered bars. Right-aligned at uneven widths at rest; hovering runs them out to full width one
   after the next, and aria-expanded folds them into an X. gap .34 + height .1 puts the outer bars
   .44rem off centre, which is exactly how far each has to travel to meet in the middle. */
#home.home--v7 #nav-toggle .v7-burger {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.34rem;
  width: 1.15rem;
}
#home.home--v7 #nav-toggle .v7-burger i {
  display: block;
  width: 100%;
  height: 0.1rem;
  border-radius: 999px;
  background: currentColor;
  transition: width .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}
#home.home--v7 #nav-toggle .v7-burger i:nth-child(2) { width: 60% }
#home.home--v7 #nav-toggle .v7-burger i:nth-child(3) { width: 80% }
#home.home--v7 #nav-toggle:hover .v7-burger i { width: 100% }
#home.home--v7 #nav-toggle:hover .v7-burger i:nth-child(2) { transition-delay: .05s }
#home.home--v7 #nav-toggle:hover .v7-burger i:nth-child(3) { transition-delay: .1s }
#home.home--v7 #nav-toggle[aria-expanded='true'] .v7-burger i { width: 100%; transition-delay: 0s }
#home.home--v7 #nav-toggle[aria-expanded='true'] .v7-burger i:nth-child(1) { transform: translateY(0.44rem) rotate(-45deg) }
#home.home--v7 #nav-toggle[aria-expanded='true'] .v7-burger i:nth-child(2) { opacity: 0; transform: scaleX(0.2) }
#home.home--v7 #nav-toggle[aria-expanded='true'] .v7-burger i:nth-child(3) { transform: translateY(-0.44rem) rotate(45deg) }
@media (prefers-reduced-motion: reduce) {
  #home.home--v7 #nav-toggle .v7-burger i { transition: none }
}
#home.home--v7 #mobile-nav { background: var(--v7-bg); gap: 0.25rem }
#home.home--v7 #mobile-nav a {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--v7-ink);
}
#home.home--v7 #mobile-nav a:hover { color: var(--v7-brand) }
#home.home--v7 .mobile-nav-close {
  border: 1px solid var(--v7-line);
  border-radius: 999px;
  background: var(--v7-surface);
  color: var(--v7-ink);
}
#home.home--v7 .mobile-nav-cta {
  background: var(--v7-brand);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.9rem 2rem;
}

/* ---------- 1. hero ---------- */
.home--v7 .v7-hero { padding: clamp(2rem, 4.5vw, 3.5rem) var(--v7-pad) 0; text-align: center; overflow: hidden }
.home--v7 .v7-hero-title {
  margin: 1.1rem auto 0;
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.042em;
  font-weight: 500;
  max-width: 16ch;
  text-wrap: balance;
}
.home--v7 .v7-hero-lede {
  margin: 1rem auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--v7-muted);
  max-width: 52ch;
}

/* Floating-card stage. Cards are absolutely placed as a percentage of the stage so the whole
   composition scales with the card width; the phone is the only in-flow element and sets height. */
.home--v7 .v7-stage {
  position: relative;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  width: 100%;
  max-width: 60rem;
}
/* Only the top ~3/4 of the handset shows. The phone keeps its own 9/18.5 ratio while this wrapper
   is 9/13.9 (75% of that height) and clips the rest, so it reads as running off the bottom of the
   hero card. Because the wrapper is the stage's only in-flow child and .v7-hero has padding-bottom 0,
   the clip lands exactly on the card edge - and using a ratio rather than a negative margin keeps it
   correct at every breakpoint where .v7-device changes width. */
.home--v7 .v7-device {
  width: 40%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  aspect-ratio: 9 / 14.625;
  overflow: hidden;
}
.home--v7 .v7-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: var(--v7-surface);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-r-md);
  box-shadow: 0 0.75rem 2rem rgba(18,18,18,.07);
  text-align: left;
}
.home--v7 .v7-float p { margin: 0 }
.home--v7 .v7-float-text { min-width: 0 }
.home--v7 .v7-float-title { font-size: 12.5px; font-weight: 500; line-height: 1.25 }
.home--v7 .v7-float-sub { font-size: 11px; color: var(--v7-muted); line-height: 1.3 }
.home--v7 .v7-float--a { left: 2%;  top: 6%;  max-width: 15rem }
.home--v7 .v7-float--b { left: 0;   top: 52%; max-width: 11rem }
.home--v7 .v7-float--c { left: 22%; top: 40%; max-width: 14.5rem }
/* Card C's title is a single claim ("All credit scores welcome") that reads badly broken over two
   lines, so it is pinned to one line and the card widened to fit it. */
.home--v7 .v7-float--c .v7-float-title { white-space: nowrap }
.home--v7 .v7-float--d { right: 16%; top: 12%; width: 9.5rem; flex-direction: column; align-items: stretch; gap: 0 }
.home--v7 .v7-float--e { right: 1%;  top: 4%;  gap: 0.4rem }
.home--v7 .v7-float--f { right: 3%;  top: 56%; max-width: 12rem }

/* ---------- 2. tabs ---------- */
.home--v7 .v7-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
}
.home--v7 .v7-tab {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--v7-muted);
  transition: background .15s ease, color .15s ease;
}
.home--v7 .v7-tab:hover { background: var(--v7-chip); color: var(--v7-ink) }
.home--v7 .v7-tab--active { background: var(--v7-chip); color: var(--v7-ink) }

/* ---------- 3. split ---------- */
/* 50/50: copy on the left with the note tucked under its CTA, phone on the right. */
.home--v7 .v7-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2rem, 4vw, 3.5rem) var(--v7-pad);
}
.home--v7 .v7-split-copy { display: grid; justify-items: start; gap: 1rem }
/* Inherits the parent's justify-items: start, so it sizes to its content instead of filling the
   column. max-width keeps the line length sane if the copy is overridden with something longer. */
.home--v7 .v7-split-copy .v7-note { margin-top: 0.25rem; max-width: 24rem }
/* 24rem matches the hero handset at full size (.v7-device is 40% of a 60rem stage). */
.home--v7 .v7-split-device { justify-self: center; width: 100%; max-width: 24rem }
/* Fills the handset screen. The phone is a fixed 9:19.5 box, which is far taller than this content
   needs, so the column stretches: title pinned top, rows centred in the space between, progress
   pinned bottom. */
.home--v7 .v7-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--v7-chip);
  border-radius: inherit;
  padding: 2rem 1.5rem 1.75rem;
}
.home--v7 .v7-panel .v7-rows { flex: 1; align-content: center }
.home--v7 .v7-panel .v7-progress { margin-top: auto; padding-top: 1rem }
.home--v7 .v7-panel-title {
  margin: 0 0 1.5rem;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 500;
}
/* Step rows as a stack of iOS notification cards: identical rounded cards, squircle app icon,
   semibold title over secondary detail. No spine or active state - a connector would fight the
   read, since notifications are a flat stack rather than a sequence. */
.home--v7 .v7-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.8rem;
}
.home--v7 .v7-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: 1.05rem;
  background: var(--v7-surface);
}
.home--v7 .v7-row p { margin: 0 }
/* Squircle, ~27% radius, the proportion iOS uses for app icons. */
/* Mixed toward --v7-surface, not literal #fff, so the tile darkens with the theme. */
#home.home--v7 .v7-row .v7-ico {
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--v7-brand) 14%, var(--v7-surface));
  font-size: 0.95rem;
}
/* Tokenised rather than literal black/grey: these rows sit on --v7-surface, which flips in dark. */
.home--v7 .v7-row-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--v7-ink);
}
.home--v7 .v7-row-sub {
  margin-top: 0.1rem;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--v7-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home--v7 .v7-progress { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem }
.home--v7 .v7-progress-val {
  padding: 0.3rem 0.6rem;
  background: var(--v7-ink);
  color: var(--v7-surface);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.home--v7 .v7-progress-track { flex: 1; height: 0.4rem; background: var(--v7-line); border-radius: 999px; overflow: hidden }
.home--v7 .v7-progress-fill { display: block; width: 24%; height: 100%; background: var(--v7-brand) }
/* Placement lives with the other .v7-split children above; this is appearance only. */
.home--v7 .v7-note {
  display: grid;
  gap: 0.7rem;
  padding: 1.1rem;
  background: var(--v7-chip);
  border-radius: var(--v7-r-md);
}
.home--v7 .v7-note-text { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 500 }

/* ---------- 4. estimator ---------- */
.home--v7 .v7-est {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2rem, 4vw, 3.5rem) var(--v7-pad);
  align-items: start;
}
.home--v7 .v7-est-copy { display: grid; justify-items: start; gap: 1rem; align-content: start }
.home--v7 .v7-est-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--v7-muted); max-width: 40ch }
.home--v7 .v7-est-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v7-gut) }
.home--v7 .v7-est-panel {
  background: var(--v7-chip);
  border-radius: 1.5rem;
  padding: 1.25rem 1.15rem 1.4rem;
}
.home--v7 .v7-est-panel--dark { background: var(--v7-panel); color: var(--v7-on-panel) }
.home--v7 .v7-est-panel-label {
  margin: 0 0 1.2rem;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v7-muted);
}
.home--v7 .v7-est-panel-label--light { color: var(--v7-on-panel-dim) }

.home--v7 .v7-field + .v7-field { margin-top: 1.4rem }
.home--v7 .v7-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem }
.home--v7 .v7-field-label { display: block; font-size: 12px; color: var(--v7-muted) }
.home--v7 .v7-field-value {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.home--v7 .v7-field-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--v7-dim) }

/* Soft rounded slider to match the pill language (v6 uses a hard-edged one). */
#home.home--v7 .v7-field input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.75rem;
  background: transparent;
  cursor: pointer;
}
#home.home--v7 .v7-field input[type=range]::-webkit-slider-runnable-track {
  height: 0.4rem;
  border-radius: 999px;
  background: var(--v7-surface);
}
#home.home--v7 .v7-field input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: -0.35rem;
  border-radius: 50%;
  background: var(--v7-ink);
  border: 3px solid var(--v7-surface);
  box-shadow: 0 1px 4px rgba(18,18,18,.25);
}
#home.home--v7 .v7-field input[type=range]::-moz-range-track {
  height: 0.4rem; border-radius: 999px; background: var(--v7-surface);
}
#home.home--v7 .v7-field input[type=range]::-moz-range-thumb {
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--v7-ink); border: 3px solid var(--v7-surface);
}

.home--v7 .v7-terms { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem }
#home.home--v7 .term-btn {
  padding: 0.45rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--v7-surface);
  color: var(--v7-ink);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease, color .15s ease;
}
#home.home--v7 .term-btn:hover { background: color-mix(in srgb, var(--v7-ink) 10%, var(--v7-surface)) }
#home.home--v7 .term-btn.active { background: var(--v7-ink); color: var(--v7-surface) }
.home--v7 .v7-term-note { margin: 0.7rem 0 0; font-size: 11px; color: var(--v7-muted) }

.home--v7 .v7-est-figure {
  margin: 0 0 1.1rem;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.home--v7 .v7-est-bar {
  display: flex;
  height: 0.5rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--v7-panel-line);
}
.home--v7 .v7-est-bar-principal { background: var(--v7-brand); transition: width .25s ease }
.home--v7 .v7-est-bar-interest { background: rgba(255,255,255,.32); transition: width .25s ease }
.home--v7 .v7-est-bar-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
  font-size: 10.5px;
  color: var(--v7-on-panel-dim);
}
.home--v7 .v7-est-rows { margin: 1.3rem 0 0; display: grid }
.home--v7 .v7-est-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--v7-panel-line);
  font-size: 12.5px;
}
.home--v7 .v7-est-row:last-child { border-bottom: 1px solid var(--v7-panel-line) }
.home--v7 .v7-est-row dt { color: var(--v7-on-panel-dim) }
.home--v7 .v7-est-row dd { margin: 0; font-weight: 500; color: #FFFFFF; font-variant-numeric: tabular-nums }
.home--v7 .v7-est-disclosure {
  margin: 1.1rem 0 0;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--v7-on-panel-dim);
}
#home.home--v7 .estimator-fineprint {
  grid-column: 1 / -1;
  max-width: 70ch;
  margin: 0.5rem auto 0;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--v7-muted);
  text-align: center;
}

/* ---------- 5. identity statement ---------- */
.home--v7 .v7-statement {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.35rem;
  padding: clamp(2.75rem, 5vw, 4.5rem) var(--v7-pad);
}
.home--v7 .v7-statement-text {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-weight: 500;
  text-wrap: balance;
}
.home--v7 .v7-statement-key { color: var(--v7-brand) }
/* Word spans injected by home-v7.js for the scroll reveal. inline-block so the opacity tween has a
   box to work on; the whitespace between them is preserved as real text nodes, so wrapping is
   unaffected. Without JS the spans never appear and the sentence renders normally. */
.home--v7 .v7-word { display: inline-block }
.home--v7 .v7-statement-cite {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--v7-dim);
}

/* ---------- 6. showcase ---------- */
.home--v7 .v7-showcase {
  position: relative;
  border-radius: var(--v7-r);
  overflow: hidden;
  background: var(--v7-dark);
  min-height: clamp(24rem, 42vw, 34rem);
  display: grid;
  align-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  isolation: isolate;
}
/* Lift the copy above the photo and its scrim. Both of those must keep position:absolute, so they
   are excluded by name - this rule is (0,3,0) and would otherwise beat their own (0,2,0) rules and
   force them back into flow. */
.home--v7 .v7-showcase > *:not(.v7-cover):not(.v7-scrim) { position: relative; z-index: 1 }
.home--v7 .v7-showcase-copy { display: grid; justify-items: start; gap: 0.9rem; max-width: 34rem }
.home--v7 .v7-mini-row { display: flex; flex-wrap: wrap; gap: 0.75rem }
/* Frosted glass over the photo. Text inverts to white with it - the card is no longer an opaque
   white surface, so the previous ink/muted pair would sit on the photograph itself. */
.home--v7 .v7-mini {
  width: 8.5rem;
  padding: 0.7rem;
  border-radius: var(--v7-r-md);
  background: rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, .22);
  color: #FFFFFF;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1),
              background .28s ease,
              box-shadow .28s ease;
}
.home--v7 .v7-mini:hover {
  transform: translateY(-0.35rem);
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .28);
}
.home--v7 .v7-mini p { margin: 0 }
.home--v7 .v7-mini-title { margin-top: 0.55rem; font-size: 12px; font-weight: 600; color: #FFFFFF }
.home--v7 .v7-mini-sub { font-size: 10.5px; color: rgba(255, 255, 255, .72) }

/* ---------- 5. trio ---------- */
.home--v7 .v7-trio {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--v7-pad) clamp(2rem, 4vw, 3rem);
}
.home--v7 .v7-trio-grid {
  margin-top: 1rem;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--v7-gut);
}
/* Roomier now that an icon replaced the photo: the image supplied most of the card's height, so
   without more padding the stat would sit tight against the edges. */
/* Chip grey now that the section itself is a white card - white on white would erase them. */
.home--v7 .v7-trio-card {
  margin: 0;
  display: grid;
  justify-items: center;
  text-align: center;
  background: var(--v7-chip);
  border-radius: var(--v7-r-md);
  padding: 1.75rem 1.4rem 1.8rem;
}
.home--v7 .v7-trio-card figcaption { padding: 1.4rem 0 0 }
.home--v7 .v7-trio-card p { margin: 0 }
/* The figure is the point of the card, so it carries its own breathing room above and below rather
   than relying on the caption's padding. */
.home--v7 .v7-stat-value {
  margin: 0.4rem 0 0.9rem;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--v7-ink);
  font-variant-numeric: tabular-nums;
}
/* Capped so a centred label breaks into balanced lines rather than one long ragged one. */
.home--v7 .v7-stat-label {
  margin: 0.45rem auto 0;
  max-width: 22ch;
  font-size: 12.5px;
  color: var(--v7-muted);
  line-height: 1.4;
  text-wrap: balance;
}
.home--v7 .v7-stat-source {
  margin-top: 0.4rem;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--v7-dim);
}
.home--v7 .v7-trio-note { max-width: 60ch; text-align: center; font-size: 11px; color: var(--v7-muted) }

/* ---------- 6. faq ----------
   Native <details>, so no JS. name="v7-faq" makes it an exclusive accordion in browsers that
   support it and simply allows multiple open ones elsewhere. */
.home--v7 .v7-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding: clamp(2rem, 4vw, 3.5rem) var(--v7-pad);
  align-items: start;
}
.home--v7 .v7-faq-copy { display: grid; justify-items: start; gap: 1rem; align-content: start }
.home--v7 .v7-faq-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem }
#home.home--v7 .v7-faq-phone { font-size: 13px; color: var(--v7-muted) }
#home.home--v7 .v7-faq-phone:hover { color: var(--v7-ink) }

.home--v7 .v7-faq-list { display: grid; gap: 0.5rem }
.home--v7 .v7-faq-item {
  background: var(--v7-chip);
  border-radius: var(--v7-r-md);
  overflow: hidden;
  transition: background .18s ease;
}
.home--v7 .v7-faq-item:hover { background: color-mix(in srgb, var(--v7-ink) 6%, var(--v7-chip)) }
.home--v7 .v7-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
}
.home--v7 .v7-faq-item summary::-webkit-details-marker { display: none }
.home--v7 .v7-faq-q { font-size: 13.5px; font-weight: 500; line-height: 1.35 }

/* Round marker: a plus that rotates 45deg into a cross when the item opens. */
.home--v7 .v7-faq-mark {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--v7-surface);
  transition: background .18s ease, transform .22s ease;
}
.home--v7 .v7-faq-mark::before, .home--v7 .v7-faq-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--v7-ink);
  transition: background .18s ease;
}
.home--v7 .v7-faq-mark::before { width: 0.7rem; height: 1.5px; transform: translate(-50%, -50%) }
.home--v7 .v7-faq-mark::after { width: 1.5px; height: 0.7rem; transform: translate(-50%, -50%) }
.home--v7 .v7-faq-item[open] .v7-faq-mark { background: var(--v7-ink); transform: rotate(45deg) }
/* The open circle is --v7-ink, so the cross has to be the ground it sits against, not literal white -
   in dark mode --v7-ink is near-white and a white cross disappeared into it. */
.home--v7 .v7-faq-item[open] .v7-faq-mark::before,
.home--v7 .v7-faq-item[open] .v7-faq-mark::after { background: var(--v7-surface) }

.home--v7 .v7-faq-a { padding: 0 3.5rem 1.1rem 1.1rem }
.home--v7 .v7-faq-a p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--v7-muted) }
#home.home--v7 .v7-faq-a a { color: var(--v7-ink); text-decoration: underline; text-underline-offset: 2px }
#home.home--v7 .v7-faq-a a:hover { color: var(--v7-brand) }


/* ---------- shared footer (legal) restyled ---------- */
#home.home--v7 .site-footer { background: transparent; color: var(--v7-muted) }
/* No horizontal padding: --v7-pad is the inset used INSIDE the cards, and the cards have a visible
   background that justifies it. This footer is transparent, so the same inset just reads as stray
   whitespace - dropping it lines the legal text up with the card edges above. */
#home.home--v7 .footer-inner { max-width: var(--v7-max); padding: 2rem 0 2.5rem; font-size: 10.5px }
/* home.css inverts and dims this to .4 for its dark footers. v7's footer is light, so the logo
   shows as-is at full strength - both the filter and the opacity have to be undone. */
#home.home--v7 .footer-logo-img { filter: none; opacity: 1 }
#home.home--v7 .footer-col h3 { color: var(--v7-ink) }
#home.home--v7 .footer-col a, #home.home--v7 .footer-legal a { color: var(--v7-ink) }
#home.home--v7 .footer-col a:hover, #home.home--v7 .footer-legal a:hover { color: var(--v7-brand) }
#home.home--v7 .footer-legal { border-top-color: var(--v7-line) }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  /* The 50/50 split still holds here, so the explicit grid placement is left alone. Overriding
     .v7-note to span both columns would have collided with the phone, which occupies column 2
     across both rows. */
  .home--v7 .v7-float--a, .home--v7 .v7-float--e { display: none }
  .home--v7 .v7-device { width: 48% }
  /* Copy drops above the panels; the two panels stay side by side while there is room. */
  .home--v7 .v7-est { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 860px) {
  /* The absolute composition cannot hold at this width, and the handset frame stops earning its
     space on a phone-sized screen - drop both, keep the content. */
  .home--v7 .v7-float { display: none }
  .home--v7 .v7-device { width: 100%; max-width: none }
  .home--v7 .v7-phone { border: 0; box-shadow: none }
  .home--v7 .v7-split { grid-template-columns: minmax(0, 1fr) }
  .home--v7 .v7-split-device { max-width: 24rem }
  .home--v7 .v7-faq { grid-template-columns: minmax(0, 1fr) }
  .home--v7 .v7-faq-a { padding-right: 1.1rem }
  .home--v7 .v7-trio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  /* Inputs and results stack - side by side they are too narrow for the sliders and the figures. */
  .home--v7 .v7-est-panels { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 560px) {
  #home.home--v7 { padding: 0.5rem }
  .home--v7 .v7-trio-grid { grid-template-columns: minmax(0, 1fr) }
  .home--v7 .v7-mini { width: calc(50% - 0.375rem) }
}
/* 900px is where home.css swaps the desktop nav for the hamburger. From there down the header
   icons sit bare - no pill, no rule - so they read as glyphs against the header. Selectors match
   the base rules exactly so they win on order, which a plain class rule could not do against
   home.css's `#home #nav-toggle`. */
@media (max-width: 900px) {
  #home.home--v7 #nav-toggle,
  #home.home--v7 .v7-theme {
    width: 2.2rem;
    border: 0;
    background: none;
  }
  #home.home--v7 #nav-toggle:hover,
  #home.home--v7 .v7-theme:hover { border-color: transparent }
}