/* Homepage variant v12 — "agency" layout.
   A soft off-white page (navy ink, dark footer) ruled with faint grid lines, wide bold display type (Syne) over Manrope, a cut-out
   portrait under a huge centred headline. --brand drives the key words, fills and the solid
   decorative blocks (as three tones: --v12-tone / -deep / -light), plus --v12-contrast (the
   primary's opposite hue) for the stat card (v12.tpl overrides it from the TAV v12.contrast). Both fonts are loaded by partials/homepage/v12.tpl.
   Scoped under .home--v12 and layered on home.css. */

.home--v12 {
  /* Soft off-white ground (a whisper of the brand) with navy ink. */
  --v12-bg: color-mix(in srgb, var(--brand) 4%, #F7F7F4);
  --v12-bg-2: color-mix(in srgb, var(--brand) 6%, #F1F1ED);
  --v12-card: #FFFFFF;
  --v12-raise: color-mix(in srgb, var(--brand) 7%, #ECECE7);
  --v12-line: rgba(20, 23, 41, .07);
  --v12-line-2: rgba(20, 23, 41, .14);
  --v12-text: rgba(20, 23, 41, .92);
  --v12-muted: rgba(20, 23, 41, .6);
  --v12-accent: var(--brand);
  /* Brand tones for the solid decorative surfaces, so they follow the site colour. */
  --v12-tone: var(--brand);
  --v12-tone-deep: color-mix(in srgb, var(--brand) 62%, #000);
  --v12-tone-light: color-mix(in srgb, var(--brand) 72%, #FFFFFF);
  /* Contrast colour for the stat card: the primary's opposite hue, kept light so navy text reads on
     it (a blue brand lands on warm gold). The hex is the fallback for browsers without relative
     colour syntax; the @supports block below swaps in the computed one. */
  --v12-contrast: #F3C66E;
  --v12-navy-ink: #141729;
  --v12-display: 'Syne', 'Manrope', system-ui, sans-serif;
  --v12-body: 'Manrope', var(--font);
  --v12-max: 80rem;
  --v12-gut: clamp(1rem, 4.5vw, 4rem);
  --v12-r: clamp(1rem, 2vw, 1.5rem);
}

@supports (color: hsl(from red h s l)) {
  .home--v12 { --v12-contrast: hsl(from var(--brand) calc(h + 180) 82% 70%) }
}

/* home.css sets `#home h1, #home h2, #home p, #home span, #home button ... { font-family: inherit }` -
   an id selector, so the display face is restated at id level for every element that wears it. */
#home.home--v12 .v12-hero-title,
#home.home--v12 .v12-hero-title span,
#home.home--v12 .v12-title,
#home.home--v12 .v12-title span,
#home.home--v12 .v12-card-title,
#home.home--v12 .v12-pair-text b,
#home.home--v12 .v12-fig-value,
#home.home--v12 .v12-ycard-value,
#home.home--v12 .v12-how-big,
#home.home--v12 .v12-step-no,
#home.home--v12 .v12-field-value,
#home.home--v12 .v12-est-figure,
#home.home--v12 #mobile-nav a { font-family: var(--v12-display) }

#home.home--v12 {
  background: var(--v12-bg);
  color: var(--v12-text);
  font-family: var(--v12-body);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.home--v12 h1, .home--v12 h2, .home--v12 h3 { color: inherit; font-weight: 700; margin: 0 }
.home--v12 p { margin: 0 }
.home--v12 ol { margin: 0; padding: 0; list-style: none }
.home--v12 button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit }
#home.home--v12 a { color: inherit; text-decoration: none }
#home.home--v12 a.u { text-decoration: underline; text-underline-offset: 0.1875rem }
#home.home--v12 :focus-visible { outline-color: var(--v12-accent) }
.home--v12 .v12-sprite { position: absolute; width: 0; height: 0; overflow: hidden }

/* ---------- shared ---------- */
.home--v12 .v12-accent { color: var(--v12-accent) }
.home--v12 .v12-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; font-weight: 500; color: var(--v12-text) }
.home--v12 .v12-eyebrow::after { content: ''; width: 1rem; height: 1px; background: currentColor }
.home--v12 .v12-title {
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* Titles in a narrow column (FAQ, recipients head) step down so a long word like "EVERYTHING" in
   Syne 800 never runs out of its column. */
.home--v12 .v12-faq .v12-title,
.home--v12 .v12-head--split .v12-title { font-size: clamp(1.6rem, 3vw, 2.6rem) }
.home--v12 .v12-lede { max-width: 54ch; font-size: 0.92rem; color: var(--v12-muted) }
.home--v12 .v12-head { display: grid; justify-items: start; gap: 1rem; margin-bottom: clamp(2rem, 4.5vw, 3.25rem) }
.home--v12 .v12-head--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 1.5rem 3rem }
.home--v12 .v12-head--split > div { display: grid; justify-items: start; gap: 1rem }
.home--v12 .v12-section { max-width: calc(var(--v12-max) + 2 * var(--v12-gut)); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) var(--v12-gut) }
#home.home--v12 #how,
#home.home--v12 #market { background: none; border: 0 }

/* Placeholders for the hand-added images in media/v12/. */
.home--v12 .v12-ph {
  display: grid;
  place-content: center;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  border: 0.125rem dashed var(--v12-line-2);
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 0.75rem, transparent 0.75rem 1.5rem);
  color: var(--v12-muted);
  font-size: 0.75rem;
  text-align: center;
}
.home--v12 .v12-ph b { color: var(--v12-text); font-weight: 600 }
.home--v12 .v12-ph small { font-size: 0.68rem }

/* The paired icon CTA: a solid square with ↗, an outlined square with ✳, then two lines. */
#home.home--v12 .v12-pair { display: inline-flex; align-items: center; gap: 0.9rem; text-align: left; color: var(--v12-text) }
.home--v12 .v12-pair-icons { display: flex; gap: 0.25rem }
.home--v12 .v12-pair-icons i {
  display: grid;
  place-items: center;
  width: clamp(2.6rem, 4vw, 3.1rem);
  aspect-ratio: 1;
  border-radius: 0.6rem;
  transition: transform .25s ease, background .25s ease;
}
.home--v12 .v12-pair-icons svg { width: 45%; height: 45% }
.home--v12 .v12-pair-a { background: var(--v12-navy-ink); color: #FFFFFF }
.home--v12 .v12-pair-b { border: 1px solid var(--v12-line-2); color: var(--v12-text) }
#home.home--v12 .v12-pair:hover .v12-pair-a { transform: rotate(-8deg); background: var(--v12-accent) }
#home.home--v12 .v12-pair:hover .v12-pair-b { transform: rotate(45deg) }
.home--v12 .v12-pair-text { display: grid; line-height: 1.25 }
.home--v12 .v12-pair-text b { font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 700 }
.home--v12 .v12-pair-text small { font-size: 0.85rem; color: var(--v12-muted) }

/* The rotating circular-text badge. */
.home--v12 .v12-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(5.5rem, 9vw, 7.5rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(20, 23, 41, .05);
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
}
.home--v12 .v12-badge-ring { position: absolute; inset: 0 }
.home--v12 .v12-badge-ring svg { display: block; width: 100%; height: 100%; overflow: visible }
.home--v12 .v12-badge-ring text { fill: var(--v12-text); font-family: var(--v12-body); font-size: 7.5px; font-weight: 600; letter-spacing: 0.08em }
.home--v12 .v12-badge-glyph { position: relative; width: 38%; height: 38%; color: var(--v12-text) }
/* Brand-tone disc offset behind the badge, as the laptop reference. */
.home--v12 .v12-badge--disc::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--v12-tone-light);
  translate: 0 42%;
}
.home--v12 .v12-badge--disc .v12-badge-glyph { width: 30%; height: 30% }

/* ---------- hero ---------- */
.home--v12 .v12-hero { position: relative; overflow: hidden; padding: 0 var(--v12-gut) 2rem }
/* The faint grid, fading out toward the edges. */
.home--v12 .v12-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--v12-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--v12-line) 1px, transparent 1px);
  background-size: clamp(5rem, 9vw, 7.5rem) clamp(5rem, 9vw, 7.5rem);
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 60%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 60%, #000 30%, transparent 80%);
  pointer-events: none;
}
.home--v12 .v12-hero > * { position: relative }
.home--v12 .v12-header {
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--v12-max);
  margin: 0 auto;
  padding: 1.6rem 0;
}
.home--v12 .v12-brand { display: flex; align-items: center; gap: 0.6rem }
#home.home--v12 .site-powered { width: auto; margin: 0; padding-left: 0.6rem; border-left: 1px solid var(--v12-line-2); color: var(--v12-muted); text-align: left; font-style: normal }
#home.home--v12 #main-nav { display: flex; justify-content: center; gap: clamp(1.25rem, 3vw, 2.75rem); font-size: 0.9rem }
#home.home--v12 #main-nav a { color: var(--v12-muted); transition: color .18s ease }
#home.home--v12 #main-nav a:hover,
#home.home--v12 #main-nav a:first-child { color: var(--v12-text) }
.home--v12 .v12-header-actions { display: flex; align-items: center; gap: 1rem }
#home.home--v12 #header-cta { padding: 0.55rem 1.1rem; border: 1px solid var(--v12-line-2); border-radius: 999px; background: transparent; color: var(--v12-text); font-size: 0.82rem; font-weight: 600 }
#home.home--v12 #header-cta:hover { background: var(--v12-navy-ink); color: #FFFFFF }
#home.home--v12 #nav-toggle { display: inline-flex; min-height: 0; padding: 0.4rem 0; border: 0; color: var(--v12-text) }
.home--v12 .v12-burger { display: grid; gap: 0.22rem; width: 1.35rem }
.home--v12 .v12-burger i { display: block; height: 0.09rem; background: currentColor }
#home.home--v12 #mobile-nav { background: var(--v12-bg) }
#home.home--v12 #mobile-nav a { font-size: clamp(1.4rem, 6vw, 2.2rem); font-weight: 700; color: var(--v12-text) }
#home.home--v12 #mobile-nav a:hover { color: var(--v12-accent) }
#home.home--v12 .mobile-nav-close { border-radius: 999px; border-color: var(--v12-line-2); color: var(--v12-text) }
#home.home--v12 .mobile-nav-cta { background: var(--v12-navy-ink); color: #FFFFFF; border-radius: 0.6rem }

.home--v12 .v12-hero-title {
  z-index: 2;
  max-width: 17ch;
  margin: clamp(1.5rem, 5vw, 3.5rem) auto 0;
  font-size: clamp(2rem, 5.2vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  text-transform: capitalize;
  text-wrap: balance;
}

.home--v12 .v12-hero-body {
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: var(--v12-max);
  margin: clamp(0.75rem, 1.5vw, 1.25rem) auto 0;
}
.home--v12 .v12-hero-left { display: grid; gap: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(1rem, 3vw, 2.5rem) }
.home--v12 .v12-card {
  position: relative;
  display: grid;
  gap: 1rem;
  margin-top: 3.75rem;
  padding: clamp(4.25rem, 6vw, 5rem) clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.5rem, 2.6vw, 2rem);
  border-radius: var(--v12-r);
  background: color-mix(in srgb, var(--v12-card) 85%, transparent);
}
.home--v12 .v12-card .v12-badge { position: absolute; left: clamp(4rem, 9vw, 6.5rem); top: 0; translate: 0 -55% }
.home--v12 .v12-card-title { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-transform: capitalize; max-width: 12ch }
.home--v12 .v12-card-text { font-size: 0.85rem; line-height: 1.6; color: var(--v12-muted) }

.home--v12 .v12-person { position: relative; align-self: end; height: clamp(24rem, 44vw, 40rem) }
/* Pinned inside the slot. A % height on an in-flow child of a grid item resolves as auto, so the
   image would render at its natural size and spill into the hero foot; absolute positioning gives
   it the slot's real box. */
.home--v12 .v12-person img { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom center }
.home--v12 .v12-ph--person { border-radius: 50% 50% 0 0 / 30% 30% 0 0; border-bottom: 0 }

.home--v12 .v12-hero-right { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); padding-bottom: clamp(1rem, 3vw, 2.5rem); scroll-margin-top: 2rem }
.home--v12 .v12-curl { width: clamp(3.5rem, 6vw, 5rem); height: auto; margin-left: 20%; color: var(--v12-muted) }
.home--v12 .v12-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) }
.home--v12 .v12-fig { display: grid; align-content: start; gap: 0.35rem; min-width: 0; margin: 0; padding-right: 1rem }
.home--v12 .v12-fig + .v12-fig { padding: 0 0 0 1rem; border-left: 1px solid var(--v12-line-2) }
/* Syne 800 is a very wide face: sized so two figures always fit side by side in the column. */
.home--v12 .v12-fig-value { font-size: clamp(1.3rem, 2.1vw, 1.85rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; white-space: nowrap }
.home--v12 .v12-fig figcaption { font-size: 0.82rem; line-height: 1.35; color: var(--v12-muted) }

/* The notched contrast card. The notch is a patch of page colour in the top-right corner; its two
   fillets are squares painted with a radial gradient so the card keeps rounded inside corners. */
.home--v12 .v12-ycard {
  --n-w: clamp(4.75rem, 7vw, 5.75rem);
  --n-h: clamp(2.9rem, 4vw, 3.4rem);
  --f: 1.1rem;
  position: relative;
  display: grid;
  gap: 0.4rem;
  padding: clamp(1.25rem, 2.2vw, 1.6rem);
  padding-right: calc(var(--n-w) + 0.5rem);
  border-radius: var(--v12-r);
  background: var(--v12-contrast);
  color: var(--v12-navy-ink);
}
.home--v12 .v12-notch { position: absolute; right: 0; top: 0; width: var(--n-w); height: var(--n-h); border-bottom-left-radius: var(--f); background: var(--v12-bg) }
.home--v12 .v12-notch::before,
.home--v12 .v12-notch::after {
  content: '';
  position: absolute;
  width: var(--f);
  height: var(--f);
  background: radial-gradient(circle at 0 100%, transparent calc(var(--f) - 0.5px), var(--v12-bg) var(--f));
}
.home--v12 .v12-notch::before { right: 100%; top: 0 }
.home--v12 .v12-notch::after { right: 0; top: 100% }
#home.home--v12 .v12-notch-btn {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: calc(var(--n-w) - 0.4rem);
  height: calc(var(--n-h) - 0.4rem);
  border-radius: 999px;
  background: var(--v12-raise);
  color: var(--v12-text);
  transition: background .2s ease, color .2s ease;
}
#home.home--v12 .v12-notch-btn:hover { background: var(--v12-navy-ink); color: #FFFFFF }
.home--v12 .v12-notch-btn svg { width: 1.3rem; height: 1.3rem }
.home--v12 .v12-ycard-value { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em }
.home--v12 .v12-ycard-label { font-size: 0.82rem; font-weight: 500 }
.home--v12 .v12-ycard-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; margin-right: calc(-1 * var(--n-w) + 0.5rem) }
.home--v12 .v12-avatars { display: flex }
.home--v12 .v12-avatars > * {
  display: grid;
  place-items: center;
  width: clamp(2.6rem, 4vw, 3.2rem);
  aspect-ratio: 1;
  border: 0.15rem solid var(--v12-contrast);
  border-radius: 999px;
  object-fit: cover;
}
.home--v12 .v12-avatars > * + * { margin-left: -0.7rem }
.home--v12 .v12-ph--av { padding: 0; border-style: dashed; border-color: var(--v12-navy-ink); background: color-mix(in srgb, var(--v12-contrast) 70%, #FFFFFF); color: var(--v12-navy-ink); font-size: 0.7rem; font-style: normal; font-weight: 700 }
.home--v12 .v12-ycard-src { display: grid; justify-items: end; line-height: 1.25; text-align: right }
.home--v12 .v12-ycard-src b { font-size: 0.9rem; font-weight: 800 }
.home--v12 .v12-ycard-src small { font-size: 0.7rem }

.home--v12 .v12-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--v12-max);
  margin: 0 auto;
  padding-top: 1rem;
  border-top: 1px solid var(--v12-line);
}
.home--v12 .v12-mkt-note { max-width: 70ch; font-size: 0.68rem; color: var(--v12-muted) }
#home.home--v12 .v12-scroll {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--v12-muted);
}
.home--v12 .v12-scroll span { max-width: 5rem; text-align: right }
.home--v12 .v12-scroll svg { width: 1.6rem; height: auto; color: var(--v12-text) }

/* ---------- how: angled photo + brand block ---------- */
.home--v12 .v12-how { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: start }
.home--v12 .v12-how-media { position: relative }
.home--v12 .v12-how-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--v12-card);
  clip-path: polygon(0 0, 74% 0, 100% 15%, 100% 100%, 0 100%);
}
.home--v12 .v12-how-photo img { display: block; width: 100%; height: 100%; object-fit: cover }
.home--v12 .v12-how-photo .v12-ph { border-radius: 0 }
.home--v12 .v12-how-block {
  position: relative;
  display: grid;
  gap: 0.4rem;
  margin-top: -1px;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem) clamp(2rem, 4vw, 2.75rem);
  background: var(--v12-tone);
  color: #FFFFFF;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 64%, 1.1rem 50%, 0 36%);
}
.home--v12 .v12-how-big { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em }
.home--v12 .v12-how-small { max-width: 26ch; font-size: 0.95rem; line-height: 1.35 }

.home--v12 .v12-how-copy { position: relative; display: grid; justify-items: start; gap: 1.25rem; padding-top: clamp(0rem, 2vw, 1.5rem) }
.home--v12 .v12-how-copy .v12-title { max-width: 14ch; padding-right: clamp(5rem, 10vw, 8rem) }
.home--v12 .v12-how-copy .v12-badge { position: absolute; right: 0; top: clamp(1.5rem, 4vw, 3rem) }
.home--v12 .v12-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; width: 100%; margin: clamp(0.75rem, 2vw, 1.5rem) 0 clamp(0.75rem, 2vw, 1.5rem); padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--v12-line-2) }
.home--v12 .v12-steps li { display: grid; gap: 0.4rem }
.home--v12 .v12-step-no { font-size: 0.85rem; font-weight: 800; color: var(--v12-accent) }
.home--v12 .v12-steps h3 { font-size: 1rem; font-weight: 700 }
.home--v12 .v12-steps p { font-size: 0.82rem; color: var(--v12-muted) }

/* ---------- estimator ---------- */
#home.home--v12 #estimator { max-width: calc(var(--v12-max) + 2 * var(--v12-gut)); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) var(--v12-gut) }
.home--v12 .v12-est-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem) }
.home--v12 .v12-est-inputs { display: grid; align-content: start; gap: 1.75rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--v12-r); background: var(--v12-card) }
.home--v12 .v12-field { display: grid; gap: 0.5rem }
.home--v12 .v12-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem }
.home--v12 .v12-field-name { font-size: 0.85rem; font-weight: 600 }
.home--v12 .v12-field-value { font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 800; color: var(--v12-accent) }
.home--v12 .v12-field-scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--v12-muted) }
.home--v12 .v12-field-note { font-size: 0.74rem; color: var(--v12-muted) }

#home.home--v12 input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 1.5rem; margin: 0; background: transparent; cursor: pointer }
#home.home--v12 input[type=range]::-webkit-slider-runnable-track {
  height: 0.35rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--v12-accent) 0, var(--v12-accent) var(--fill, 50%), var(--v12-raise) var(--fill, 50%), var(--v12-raise) 100%);
}
#home.home--v12 input[type=range]::-moz-range-track { height: 0.35rem; border-radius: 999px; background: var(--v12-raise) }
#home.home--v12 input[type=range]::-moz-range-progress { height: 0.35rem; border-radius: 999px; background: var(--v12-accent) }
#home.home--v12 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.3rem; height: 1.3rem; margin-top: -0.475rem; border: 0.25rem solid var(--v12-card); border-radius: 999px; background: var(--v12-accent); box-shadow: 0 0 0 1px var(--v12-line-2) }
#home.home--v12 input[type=range]::-moz-range-thumb { width: 1.3rem; height: 1.3rem; border: 0.25rem solid var(--v12-card); border-radius: 999px; background: var(--v12-accent); box-shadow: 0 0 0 1px var(--v12-line-2) }
#home.home--v12 input[type=range]:focus { outline: none }
#home.home--v12 input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--v12-accent) 45%, transparent) }
#home.home--v12 input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--v12-accent) 45%, transparent) }

.home--v12 .v12-terms { display: flex; flex-wrap: wrap; gap: 0.4rem }
#home.home--v12 .term-btn { padding: 0.5rem 0.95rem; border-radius: 0.6rem; background: var(--v12-raise); color: var(--v12-text); font-size: 0.82rem; font-weight: 600; transition: background .15s ease, color .15s ease }
#home.home--v12 .term-btn:hover { background: color-mix(in srgb, var(--v12-raise) 70%, #FFFFFF) }
#home.home--v12 .term-btn.active { background: var(--v12-navy-ink); color: #FFFFFF }

.home--v12 .v12-est-out { display: grid; align-content: start; justify-items: start; gap: 0.75rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--v12-r); background: linear-gradient(145deg, var(--v12-tone) 0, var(--v12-tone-deep) 100%); color: #FFFFFF }
.home--v12 .v12-est-label { font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, .85) }
.home--v12 .v12-est-figure { font-size: clamp(3rem, 7vw, 5.25rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em }
.home--v12 .v12-est-bar { display: flex; width: 100%; height: 0.4rem; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .2) }
.home--v12 .v12-est-bar-principal { background: #FFFFFF; transition: width .3s ease }
.home--v12 .v12-est-bar-interest { background: var(--v12-contrast); transition: width .3s ease }
.home--v12 .v12-est-bar-labels { display: flex; justify-content: space-between; gap: 1rem; width: 100%; font-size: 0.7rem; color: rgba(255, 255, 255, .8) }
.home--v12 .v12-est-rows { display: grid; width: 100%; margin: 0.25rem 0 0 }
.home--v12 .v12-est-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 0.85rem }
.home--v12 .v12-est-row dt { color: rgba(255, 255, 255, .8) }
.home--v12 .v12-est-row dd { margin: 0; font-weight: 700 }
.home--v12 .v12-est-disclosure { font-size: 0.7rem; line-height: 1.55; color: rgba(255, 255, 255, .72) }
#home.home--v12 .v12-pair--dark { margin-top: 0.5rem; color: #FFFFFF }
.home--v12 .v12-pair--dark .v12-pair-b { border-color: rgba(255, 255, 255, .55); color: #FFFFFF }
.home--v12 .v12-pair--dark .v12-pair-text small { color: rgba(255, 255, 255, .78) }
#home.home--v12 .estimator-fineprint { max-width: none; margin: clamp(1.5rem, 3vw, 2rem) 0 0; text-align: left; color: var(--v12-muted) }

/* ---------- recipients ---------- */
.home--v12 .v12-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem) }
.home--v12 .v12-rcard {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: clamp(15rem, 22vw, 18rem);
  padding: clamp(1.25rem, 2.2vw, 1.6rem);
  border: 1px solid transparent;
  border-radius: var(--v12-r);
  background: var(--v12-card);
  transition: border-color .25s ease, transform .25s ease;
}
.home--v12 .v12-rcard:hover { border-color: var(--v12-tone); transform: translateY(-0.25rem) }
.home--v12 .v12-rcard-ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--v12-accent); color: #FFFFFF }
.home--v12 .v12-rcard-ico svg { width: 1.2rem; height: 1.2rem }
.home--v12 .v12-rcard small { margin-top: auto; font-size: 0.72rem; color: var(--v12-muted) }
/* Body face, not Syne: Syne's short, flat-cut descenders read as clipped on g / p at this size. */
.home--v12 .v12-rcard h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em }
.home--v12 .v12-rcard p { font-size: 0.8rem; line-height: 1.55; color: var(--v12-muted) }
#home.home--v12 .v12-rcard a { color: var(--v12-accent) }

/* ---------- faq ---------- */
.home--v12 .v12-faq { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start }
.home--v12 .v12-faq-head { position: sticky; top: 1.5rem; margin-bottom: 0 }
.home--v12 .v12-faq-contact { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.85rem }
#home.home--v12 .v12-faq-contact a:hover { color: var(--v12-accent) }
.home--v12 .v12-faq-list { display: grid; gap: 0.6rem }
.home--v12 .v12-faq-item { border-radius: 1rem; background: var(--v12-card); transition: background .2s ease }
.home--v12 .v12-faq-item[open] { background: var(--v12-raise) }
.home--v12 .v12-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; cursor: pointer; list-style: none }
.home--v12 .v12-faq-item summary::-webkit-details-marker { display: none }
.home--v12 .v12-faq-q { font-size: 0.95rem; font-weight: 600; line-height: 1.4 }
.home--v12 .v12-faq-plus { position: relative; flex: none; width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--v12-navy-ink) }
.home--v12 .v12-faq-plus::before,
.home--v12 .v12-faq-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 0.1rem; margin: -0.05rem 0 0 -0.375rem; background: #FFFFFF; transition: transform .25s ease }
.home--v12 .v12-faq-plus::after { transform: rotate(90deg) }
.home--v12 .v12-faq-item[open] .v12-faq-plus { background: var(--v12-accent) }
.home--v12 .v12-faq-item[open] .v12-faq-plus::after { transform: rotate(0) }
.home--v12 .v12-faq-item p { padding: 0 1.25rem 1.25rem; font-size: 0.85rem; line-height: 1.65; color: var(--v12-muted) }
#home.home--v12 .v12-faq-item a { color: var(--v12-accent); text-decoration: underline; text-underline-offset: 0.1875rem }

/* ---------- footer: stays dark, so it carries dark-ground tokens ---------- */
#home.home--v12 .site-footer {
  --v12-line: rgba(255, 255, 255, .07);
  --v12-line-2: rgba(255, 255, 255, .14);
  --v12-text: rgba(255, 255, 255, .92);
  --v12-muted: rgba(255, 255, 255, .58);
  background: #0F1222;
  color: rgba(255, 255, 255, .5);
}
#home.home--v12 .footer-inner { max-width: var(--v12-max); padding-left: var(--v12-gut); padding-right: var(--v12-gut) }
#home.home--v12 .footer-col h3 { color: var(--v12-accent) }
#home.home--v12 .footer-legal { border-top-color: var(--v12-line-2) }
#home.home--v12 .site-footer a { text-decoration: underline; text-underline-offset: 0.1875rem }

/* ---------- funnel step titles ----------
   1.tpl tags the funnel container with .funnel--v12, and v12.tpl has already loaded Syne. */
#funnel-view.funnel--v12 .step__title { font-family: 'Syne', 'Manrope', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em }
#funnel-view.funnel--v12 .step__title small { font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; letter-spacing: 0 }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .home--v12 .v12-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 1000px) {
  /* Three columns can't share the hero: the portrait leads, then the figures, then the card. */
  .home--v12 .v12-hero-body { grid-template-columns: minmax(0, 1fr); margin-top: 1rem; justify-items: stretch }
  .home--v12 .v12-person { order: -1; height: clamp(20rem, 80vw, 30rem) }
  .home--v12 .v12-hero-right,
  .home--v12 .v12-hero-left { padding-bottom: 0; max-width: 32rem; width: 100%; justify-self: center }
  .home--v12 .v12-curl { display: none }
  #home.home--v12 .v12-scroll { display: none }
}
@media (max-width: 900px) {
  .home--v12 .v12-header { grid-template-columns: 1fr auto }
  .home--v12 .v12-how { grid-template-columns: minmax(0, 1fr) }
  .home--v12 .v12-how-media { max-width: 28rem }
  .home--v12 .v12-est-grid { grid-template-columns: minmax(0, 1fr) }
  .home--v12 .v12-head--split { grid-template-columns: minmax(0, 1fr) }
  .home--v12 .v12-faq { grid-template-columns: minmax(0, 1fr) }
  .home--v12 .v12-faq-head { position: static }
}
@media (max-width: 560px) {
  .home--v12 .v12-steps { grid-template-columns: minmax(0, 1fr) }
  .home--v12 .v12-cards { grid-template-columns: minmax(0, 1fr) }
  .home--v12 .v12-rcard { min-height: 0 }
  .home--v12 .v12-rcard small { margin-top: 0.5rem }
}