/* 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;
  /* Glass (hero floating cards): a translucent take on --v7-surface plus the top highlight and hair
     border that sell the effect. Tokenised so the dark block only has to restate these three. */
  --v7-glass: color-mix(in srgb, var(--v7-surface) 62%, transparent);
  --v7-glass-line: color-mix(in srgb, var(--v7-ink) 9%, transparent);
  --v7-glass-hi: rgba(255,255,255,.65);
  --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;
  /* Darker glass and a barely-there highlight - the light theme's white edge reads as a glare here. */
  --v7-glass: color-mix(in srgb, var(--v7-surface) 58%, transparent);
  --v7-glass-line: color-mix(in srgb, var(--v7-ink) 14%, transparent);
  --v7-glass-hi: rgba(255,255,255,.09);
}
/* 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-glass);
  border: 1px solid var(--v7-glass-line);
  border-radius: var(--v7-r-md);
  /* saturate() keeps the photography under the cards from going flat once it is blurred. */
  backdrop-filter: blur(1.25rem) saturate(1.7);
  -webkit-backdrop-filter: blur(1.25rem) saturate(1.7);
  box-shadow: 0 0.75rem 2rem rgba(18,18,18,.09), inset 0 1px 0 var(--v7-glass-hi);
  text-align: left;
}
/* Without a backdrop-filter the translucency just reads as a washed-out card, so those browsers get
   the original opaque surface back. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .home--v7 .v7-float { background: var(--v7-surface); border-color: var(--v7-line) }
}
.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) {
  /* Tablet band. The handset used to go full width here, which left no room beside it and was the
     reason the floating cards were dropped. Capped at 70% the composition still holds, so the cards
     stay - they carry the loan range, the credit line and the lender activity, and losing them this
     early cost the hero its content. Both are pushed down to the 560px block, where the width really
     does run out. */
  .home--v7 .v7-device { width: 100%; max-width: 70% }
  .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 }
  /* Phone band. Here the absolute composition genuinely cannot hold and the handset frame stops
     earning its space, so the cards go and the phone runs full width without its bezel. */
  .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-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 }
}