/* ════════════════════════════════════════════════════════════════════════
   CARLO — /v2 HOMEPAGE REDESIGN
   --------------------------------------------------------------------------
   ISOLATED STYLESHEET. Nothing here is imported by, or imports from, the
   live /styles.css. The live homepage and all 15 static subpages are
   unaffected by anything in this file.

   TOKEN DUPLICATION (deliberate): the `html.sacred-mode` block below is a
   verbatim copy of styles.css:3279–3400 (Sky palette). It is copied
   rather than imported so that /v2 cannot regress the live site. At
   promotion time these two blocks must be reconciled into one.
   ════════════════════════════════════════════════════════════════════════ */

/* ── SKY (formerly "Rain") — copied verbatim from styles.css ── */
html.sacred-mode {
  --font-serif: 'Source Serif 4';
  --font-sans: 'Inter';

  /* Backgrounds */
  --bg:            #E8F4FD;
  --bg-card:       #D0EAF8;
  --bg-card2:      #D0EAF8;
  --bg-feature-card: #C8E4F8;
  --bg-icon-tile:  rgba(26, 96, 144, 0.06);
  --surface:       #D0EAF8;

  /* Borders */
  --border:              rgba(26, 96, 144, 0.25);
  --border-feature-card: rgba(26, 96, 144, 0.12);
  --border-icon-tile:    rgba(26, 96, 144, 0.30);

  /* Text */
  --text:         #0A2840;
  --text-heading: #0A2840;
  --text-body:    #0A2840;
  --text-muted:   #2060A0;
  --text-dim:     rgba(106, 158, 192, 0.9);

  /* Accents */
  --teal:       #1A6090;
  --teal-dark:  #15506E;
  --teal-dim:   rgba(26, 96, 144, 0.12);
  --coral:      #902020;

  /* Named tokens */
  --ink:           #0A2840;
  --cream:         #E8F4FD;
  --cream-deep:    #D0EAF8;
  --gold:          #1A6090;
  --gold-light:    #4A90C8;
  --blue-deep:     #2050C0;
  --border-on-ink: rgba(232, 244, 253, 0.30);
  --danger:        #902020;

  /* rgba helper ladders */
  --accent-04:  rgba(26, 96, 144, 0.04);
  --accent-06:  rgba(26, 96, 144, 0.06);
  --accent-07:  rgba(26, 96, 144, 0.07);
  --accent-08:  rgba(26, 96, 144, 0.08);
  --accent-10:  rgba(26, 96, 144, 0.10);
  --accent-12:  rgba(26, 96, 144, 0.12);
  --accent-15:  rgba(26, 96, 144, 0.15);
  --accent-25:  rgba(26, 96, 144, 0.25);
  --accent-30:  rgba(26, 96, 144, 0.30);
  --accent-35:  rgba(26, 96, 144, 0.35);
  --accent-40:  rgba(26, 96, 144, 0.40);
  --accent-45:  rgba(26, 96, 144, 0.45);
  --ink-04:     rgba(10, 40, 64, 0.04);
  --ink-06:     rgba(10, 40, 64, 0.06);
  --ink-08:     rgba(10, 40, 64, 0.08);
  --ink-09:     rgba(10, 40, 64, 0.09);
  --ink-55:     rgba(10, 40, 64, 0.55);
  --on-ink-12:  rgba(232, 244, 253, 0.12);
  --on-ink-30:  rgba(232, 244, 253, 0.30);
  --on-ink-35:  rgba(232, 244, 253, 0.35);
  --on-ink-50:  rgba(232, 244, 253, 0.50);
  --on-ink-55:  rgba(232, 244, 253, 0.55);
  --on-ink-65:  rgba(232, 244, 253, 0.65);
  --on-ink-70:  rgba(232, 244, 253, 0.70);
  --on-ink-75:  rgba(232, 244, 253, 0.75);
  --on-ink-80:  rgba(232, 244, 253, 0.80);
  --on-ink-85:  rgba(232, 244, 253, 0.85);

  --on-ink-text:  #E4F1FB;
  --on-ink-muted: #9FC4E0;
  --nav-bg: rgba(232, 244, 253, 0.92);
  --ink-hover: #123450;

  --section-band:        #D8ECF8;
  --feature-card-bg:     #C8E4F8;
  --feature-card-title:  #0A2840;
  --feature-card-body:   #2A5575;
  --feature-card-emoji:  #2A5575;

  --accent-gold:       #1A6090;
  --text-accent-gold:  #1A6090;
  --accent-teal:       #15506E;

  --footer-bg: var(--ink);
  --footer-border-top: var(--on-ink-12);
  --footer-text: var(--on-ink-55);
  --footer-text-dim: var(--on-ink-35);
  --footer-text-hover: var(--cream);
}

/* ════════════════════════════════════════════════════════════════════════
   V2-ONLY ADDITIONS TO THE SKY FAMILY
   --------------------------------------------------------------------------
   Page-rhythm tones. Per direction: stay INSIDE the Sky family — no true
   ivory/cream. `--tone-warm` is a barely-warm near-neutral derived from Sky
   pale sky by pulling ~2% toward warm grey. Against #E8F4FD it reads as
   "human / paper-adjacent" without reading as beige or as a second palette.
   ════════════════════════════════════════════════════════════════════════ */
html.sacred-mode {
  /* The tonal journey down the page */
  --tone-ink:      #0A2840;  /* hero, privacy */
  --tone-ink-deep: #071E31;  /* hero vignette floor */
  --tone-icy:      #E8F4FD;  /* chapters — base pale sky */
  --tone-band:     #DCEEFA;  /* alternating chapter band */
  /* Chapter two only. Its screenshot is on a warm paper theme (#F3ECE4,
     B−R −15); against --tone-band's icy cyan (75% sat, B−R +30) simultaneous
     contrast pushed the cream to read yellow, as if mismatched rather than
     deliberate. Same hue (~205°) and lightness (~92%), saturation down to
     46% — still plainly in the family, but the warm/cool contrast now reads
     as controlled. The quote section keeps the original --tone-band. */
  --tone-band-neutral: #E1ECF4;
  --tone-warm:     #EFF2F4;  /* memories — barely warm near-neutral */
  --tone-warm-2:   #E7EDF1;  /* memories, one step deeper */
  --tone-powder:   #D6E9F7;  /* research */
  --tone-cocarlo:  #E4EEF6;  /* cocarlo — softest cool-warm blend */
  --tone-paper:    #F1F6FA;  /* pricing */

  /* Layout scale */
  --page-max:    1320px;
  --content-max: 1120px;
  --pad-x:       16px;

  /* Motion */
  --rise:        20px;
  --dur-reveal:  520ms;
  --dur-hover:   180ms;
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px)  { html.sacred-mode { --pad-x: 24px; } }
@media (min-width: 1024px) { html.sacred-mode { --pad-x: 32px; } }

/* ════════════════════════════════════════════════════════════════════════
   RESET + BASE
   ════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  background: var(--ink); color: var(--on-ink-text);
  padding: 12px 20px; border-radius: 0 0 12px 12px;
  font-size: 14px; font-weight: 500; text-decoration: none;
  z-index: 200; transition: transform 160ms var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ════════════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   ════════════════════════════════════════════════════════════════════════ */
.v2-section {
  width: 100%;
  padding: 72px var(--pad-x);
  position: relative;
}
@media (min-width: 768px)  { .v2-section { padding: 96px var(--pad-x); } }
@media (min-width: 1024px) { .v2-section { padding: 120px var(--pad-x); } }

/* Editorial sections get more air */
.v2-section--tall { padding-top: 88px; padding-bottom: 88px; }
@media (min-width: 1024px) {
  .v2-section--tall { padding-top: 160px; padding-bottom: 160px; }
}

.v2-inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}
.v2-inner--wide { max-width: var(--page-max); }

/* 12-column grid, 24px gutters */
.v2-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
}
@media (max-width: 1023px) {
  .v2-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Tonal backgrounds */
.tone-ink     { background: var(--tone-ink);     color: var(--on-ink-text); }
.tone-icy     { background: var(--tone-icy); }
.tone-band    { background: var(--tone-band); }
.tone-band-neutral { background: var(--tone-band-neutral); }
.tone-warm    { background: var(--tone-warm); }
.tone-powder  { background: var(--tone-powder); }
.tone-cocarlo { background: var(--tone-cocarlo); }
.tone-paper   { background: var(--tone-paper); }

/* ════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════════ */
.v2-eyebrow {
  font-family: var(--font-sans), sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin: 0 0 20px;
}
@media (min-width: 768px) { .v2-eyebrow { font-size: 12px; } }
.tone-ink .v2-eyebrow { color: var(--gold-light); }

.v2-h1 {
  font-family: var(--font-serif), serif;
  font-size: clamp(42px, 8.4vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0 0 28px;
}
.v2-h2 {
  font-family: var(--font-serif), serif;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.005em;
  font-weight: 400;
  margin: 0 0 24px;
  color: var(--text-heading);
}
.tone-ink .v2-h2 { color: var(--on-ink-text); }

/* Italic serif emphasis — the recognizable Carlo device */
.v2-h1 em, .v2-h2 em, .v2-quote em {
  font-style: italic;
  color: var(--blue-deep);
}
.tone-ink .v2-h1 em, .tone-ink .v2-h2 em { color: var(--gold-light); }

.v2-lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0 0 20px;
  max-width: 56ch;
}
@media (min-width: 1024px) { .v2-lead { font-size: 23px; } }
.tone-ink .v2-lead { color: var(--on-ink-80); }

.v2-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--feature-card-body);
  margin: 0 0 18px;
  max-width: 62ch;
}
@media (min-width: 768px) { .v2-body { font-size: 18px; } }
.tone-ink .v2-body { color: var(--on-ink-75); }

.v2-small {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.tone-ink .v2-small { color: var(--on-ink-55); }

/* ════════════════════════════════════════════════════════════════════════
   BUTTONS + LINKS
   ════════════════════════════════════════════════════════════════════════ */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  border-radius: 13px;
  border: none;
  font-family: var(--font-sans), sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-hover) var(--ease),
              color var(--dur-hover) var(--ease),
              opacity var(--dur-hover) var(--ease);
}
.v2-btn--primary { background: var(--cream); color: var(--ink); }
.v2-btn--primary:hover { background: var(--cream-deep); }
.tone-paper .v2-btn--primary,
.tone-icy .v2-btn--primary { background: var(--ink); color: var(--cream); }
.tone-paper .v2-btn--primary:hover,
.tone-icy .v2-btn--primary:hover { background: var(--ink-hover); }

.v2-btn[disabled], .v2-btn--disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* Secondary actions are text links, not button chrome */
.v2-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-30);
  padding-bottom: 2px;
  transition: color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}
.v2-link:hover { color: var(--teal-dark); border-color: var(--gold); }
.tone-ink .v2-link { color: var(--on-ink-80); border-color: var(--on-ink-30); }
.tone-ink .v2-link:hover { color: var(--cream); border-color: var(--cream); }

.v2-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin: 32px 0 0;
}

/* ════════════════════════════════════════════════════════════════════════
   MOTION — reveal on scroll
   ════════════════════════════════════════════════════════════════════════ */
.r {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}
.r.is-in { opacity: 1; transform: none; }

/* Scroll-linked device drift — max 10px, transform only */
.drift { transform: translate3d(0, var(--drift-y, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .r { opacity: 1 !important; transform: none !important; transition: none !important; }
  .drift { transform: none !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════════════════════════ */
.v2-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--pad-x);
  /* Integrates with the hero at rest: the nav sits above the hero in flow,
     so it needs the ink surface itself rather than a transparent pass-through. */
  background: var(--tone-ink);
  border-bottom: 1px solid transparent;
  transition: background 240ms var(--ease), border-color 240ms var(--ease);
}
@media (min-width: 768px) { .v2-nav { height: 74px; } }

.v2-nav.is-stuck {
  background: rgba(10, 40, 64, 0.82);
  border-bottom-color: var(--on-ink-12);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}

.v2-nav-logo {
  font-family: var(--font-serif), serif;
  font-size: 22px;
  font-style: italic;
  color: var(--on-ink-text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.v2-nav-right { display: flex; align-items: center; gap: 8px; }

.v2-nav-links { display: none; }
@media (min-width: 900px) {
  .v2-nav-links { display: flex; align-items: center; gap: 28px; margin-right: 20px; }
}
.v2-nav-links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--on-ink-70);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease);
}
.v2-nav-links a:hover { color: var(--cream); }

.v2-nav-cta {
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: none;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans), sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease);
}
.v2-nav-cta:hover { background: var(--cream-deep); }

/* Mobile menu affordance */
.v2-nav-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--on-ink-30);
  border-radius: 12px;
  background: transparent;
  color: var(--on-ink-text);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease);
}
.v2-nav-menu:hover { border-color: var(--on-ink-55); }
@media (min-width: 900px) { .v2-nav-menu { display: none; } }

.v2-nav-drawer {
  position: fixed;
  inset: 64px 0 auto 0;
  background: rgba(10, 40, 64, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--on-ink-12);
  padding: 8px var(--pad-x) 20px;
  display: none;
  z-index: 99;
}
.v2-nav-drawer.is-open { display: block; }
@media (min-width: 900px) { .v2-nav-drawer { display: none !important; } }
.v2-nav-drawer a {
  display: block;
  padding: 14px 0;
  font-size: 17px;
  color: var(--on-ink-80);
  text-decoration: none;
  border-bottom: 1px solid var(--on-ink-12);
}
.v2-nav-drawer a:last-child { border-bottom: none; }

/* ════════════════════════════════════════════════════════════════════════
   HERO
   --------------------------------------------------------------------------
   Deep navy, near-full-screen. The product composition is the point: the
   center device is ~600px tall on desktop (vs. 220–240px wide on the live
   page). Real content is ~1100px tall, so we set a min-height floor and let
   it exceed the viewport rather than shrinking the phones back down.
   ════════════════════════════════════════════════════════════════════════ */
.v2-hero {
  position: relative;
  background: var(--tone-ink);
  color: var(--on-ink-text);
  padding: 56px var(--pad-x) 72px;
  text-align: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .v2-hero { padding: 72px var(--pad-x) 96px; }
}
@media (min-width: 1024px) {
  .v2-hero { min-height: 860px; padding: 80px var(--pad-x) 120px; }
}

/* Environmental depth — a soft radial lift behind the devices and a darker
   floor. Derived from the palette, not an abstract blob: it reads as light
   falling on a page. */
.v2-hero::before {
  content: '';
  position: absolute;
  left: 50%; top: 46%;
  width: min(1180px, 130vw);
  aspect-ratio: 16 / 10;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(74, 144, 200, 0.16) 0%,
    rgba(74, 144, 200, 0.06) 42%,
    transparent 72%);
  pointer-events: none;
}
.v2-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(to bottom, transparent, var(--tone-ink-deep));
  pointer-events: none;
}
.v2-hero > * { position: relative; z-index: 1; }

.v2-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--on-ink-30);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--on-ink-75);
  margin-bottom: 28px;
}
.v2-hero-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-light);
}

.v2-hero .v2-h1 { color: var(--on-ink-text); }
.v2-hero .v2-h1 em { color: var(--gold-light); }

.v2-hero-explain {
  font-size: 18px;
  line-height: 1.5;
  color: var(--on-ink-80);
  max-width: 48ch;
  margin: 0 auto 18px;
}
@media (min-width: 768px) { .v2-hero-explain { font-size: 21px; } }

.v2-hero-thesis {
  font-size: 15px;
  line-height: 1.65;
  color: var(--on-ink-55);
  max-width: 42ch;
  margin: 0 auto;
}

/* ── Device composition (desktop) ──
   Three real phones, overlapping, center dominant. Flex + negative margins
   so the overlap is physical rather than absolutely positioned (keeps the
   row centered at every width and avoids layout shift). */
.v2-phones {
  display: none;
}
@media (min-width: 1024px) {
  .v2-phones {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 64px auto 0;
    padding-bottom: 8px;
  }
  .v2-phone { flex: 0 0 auto; }
  /* Side phones: 500px tall, rotated inward, tucked behind */
  .v2-phone--side { width: 231px; z-index: 1; }
  .v2-phone--left  { transform: rotate(-3deg); margin-right: -34px; }
  .v2-phone--right { transform: rotate(3deg);  margin-left:  -34px; }
  /* Center phone: 600px tall, dominant */
  .v2-phone--center { width: 277px; z-index: 2; }
}
@media (min-width: 1280px) {
  .v2-phone--side   { width: 268px; }
  .v2-phone--center { width: 330px; }
  .v2-phone--left  { margin-right: -44px; }
  .v2-phone--right { margin-left:  -44px; }
}
/* Larger displays: the composition kept capping at the 1280px size, so on a
   16" or 27" screen the phones read smaller than intended relative to the
   viewport. Let the devices keep growing — the center phone is the point. */
@media (min-width: 1600px) {
  .v2-phone--side   { width: 292px; }
  .v2-phone--center { width: 360px; }
  .v2-phone--left  { margin-right: -50px; }
  .v2-phone--right { margin-left:  -50px; }
}
@media (min-width: 1920px) {
  .v2-phone--side   { width: 312px; }
  .v2-phone--center { width: 386px; }
  .v2-phone--left  { margin-right: -54px; }
  .v2-phone--right { margin-left:  -54px; }
}

/* Phone bezel — same construction as the live site's .dh-device so the
   hardware reads identically, scaled up. */
.v2-device {
  width: 100%;
  background: linear-gradient(160deg, #252525 0%, #101010 55%, #1c1c1c 100%);
  border-radius: 40px;
  padding: 9px 7px 11px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10),
    0 24px 60px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
}
.v2-phone--center .v2-device {
  border-radius: 44px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.13),
    0 32px 80px rgba(0,0,0,0.58),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.v2-device-screen {
  border-radius: 32px;
  overflow: hidden;
  background: var(--cream);
  aspect-ratio: 1125 / 2436;
}
.v2-phone--center .v2-device-screen { border-radius: 36px; }
.v2-device-screen img,
.v2-device-screen video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.v2-phone-label { margin-top: 20px; text-align: center; }
.v2-phone-label-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--on-ink-text);
}
.v2-phone-label-sub {
  font-size: 13px;
  color: var(--on-ink-50);
  margin-top: 3px;
}

/* ── Device composition (mobile/tablet) ──
   One dominant phone with cropped peeks either side. Reuses the live site's
   drag-carousel interaction model. */
.v2-phones-mobile { margin: 44px 0 0; }
@media (min-width: 1024px) { .v2-phones-mobile { display: none; } }

.v2-mc-window {
  overflow: hidden;
  width: 100%;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%);
}
.v2-mc-track {
  display: flex;
  gap: 20px;
  transition: transform 300ms var(--ease);
  will-change: transform;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.v2-mc-panel {
  flex: 0 0 70vw;
  max-width: 300px;
  display: flex;
  justify-content: center;
  transition: opacity 300ms var(--ease);
}
.v2-mc-panel[aria-hidden="true"] { opacity: 0.42; }
.v2-mc-panel .v2-device { box-shadow: none; }
.v2-mc-panel img { -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; }

.v2-mc-dots { display: flex; justify-content: center; gap: 9px; margin-top: 24px; }
.v2-mc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--on-ink-35);
  background: transparent; padding: 0; cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.v2-mc-dot[aria-pressed="true"] {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: scale(1.15);
}
.v2-mc-label { text-align: center; margin-top: 18px; min-height: 44px; transition: opacity 150ms var(--ease); }
.v2-mc-label.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .v2-mc-track, .v2-mc-label, .v2-mc-panel { transition: none; }
}

/* Hero trust line — quiet supporting proof, not four icon cards */
.v2-hero-privacy {
  font-size: 15px;
  color: var(--on-ink-70);
  margin: 56px 0 0;
}
.v2-hero .v2-actions { justify-content: center; margin-top: 24px; }
.v2-hero-trust {
  font-size: 13px;
  color: var(--on-ink-50);
  margin: 22px 0 0;
  letter-spacing: 0.01em;
}

/* ════════════════════════════════════════════════════════════════════════
   CHAPTERS — replaces the 6-card feature grid
   --------------------------------------------------------------------------
   Three large editorial chapters, each an asymmetric 7/5 split with a
   substantial device. Alternating device side + alternating band tone gives
   a visible change roughly every 1–1.5 viewports.
   ════════════════════════════════════════════════════════════════════════ */
.v2-chapter { position: relative; }

/* Desktop: device 7 cols / copy 5 cols, alternating sides */
@media (min-width: 1024px) {
  /* Both cells are pinned to row 1. Without an explicit row, a flipped
     chapter (media in cols 6-12, copy in 1-5) auto-places the copy on a
     SECOND row, because auto-placement never backtracks past a later
     column start — which stacks the two vertically instead of pairing them. */
  .v2-chapter-media { grid-column: 1 / span 7; grid-row: 1; }
  .v2-chapter-copy  { grid-column: 8 / span 5; grid-row: 1; }
  .v2-chapter--flip .v2-chapter-media { grid-column: 6 / span 7; grid-row: 1; }
  .v2-chapter--flip .v2-chapter-copy  { grid-column: 1 / span 5; grid-row: 1; }
  /* Let one device break the content grid for controlled asymmetry */
  .v2-chapter--bleed .v2-chapter-media { margin-right: -6%; }
}

/* Chapter device: 580–620px tall on desktop */
.v2-chapter-device { width: 100%; max-width: 278px; margin: 0 auto; }
@media (min-width: 1024px) {
  .v2-chapter-device { max-width: 286px; margin: 0 auto; }
}
.v2-chapter-media { display: flex; justify-content: center; }

/* Chapter 2 is the visually richest: larger device + surrounding real
   memory photos pulled from the moments set.
   Composition: the media cluster sits left and low, the copy rides high, so
   the two form a tight diagonal instead of facing each other across a dead
   centre-left gap. Whitespace stays generous — it just moves outboard. */
@media (min-width: 1024px) {
  .v2-chapter--rich .v2-chapter-device { max-width: 330px; }
  /* Media drops and shifts left; copy rides high against the top of the row.
     Both are positioned from the row's TOP edge (align-self:start) so the
     diagonal is explicit instead of depending on centring maths. */
  .v2-chapter--rich .v2-chapter-media {
    align-self: start;
    transform: translate(-11%, 96px);
  }
  .v2-chapter--rich .v2-chapter-copy {
    align-self: start;
    padding-top: 8px;
  }
}
@media (min-width: 1400px) {
  .v2-chapter--rich .v2-chapter-device { max-width: 348px; }
  .v2-chapter--rich .v2-chapter-media { transform: translate(-12%, 112px); }
}

.v2-memory-scatter {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.v2-chapter--rich .v2-chapter-media { position: relative; }
.v2-chapter--rich .v2-chapter-device { position: relative; z-index: 1; }
@media (min-width: 1200px) {
  .v2-memory-scatter { display: block; }
  /* Photo scraps: crop the PHOTO out of a tall screenshot rather than
     showing the whole 1125x2436 frame (which reads as a second phone).
     A 4:3 window plus object-position pulls the image's photo area up. */
  .v2-memory-scrap {
    position: absolute;
    width: 172px;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(10, 40, 64, 0.20);
    background: var(--cream);
    /* a thin paper edge, so it reads as a print rather than a screenshot */
    border: 5px solid #fff;
  }
  .v2-memory-scrap img { width: 100%; height: 100%; object-fit: cover; }
  /* Scrap A is the bridge: it reaches toward the copy block so the eye
     travels text -> photo -> device. It must clear the headline, so it sits
     below the copy's first two lines rather than level with them. */
  /* Sits in the gutter between copy and device: clear of the text, tucked a
     little behind the phone. Sized so the face stays visible in the gap. */
  .v2-memory-scrap--a { top: 74%;  left: -34%; width: 200px; transform: rotate(-5deg); }
  .v2-memory-scrap--b { bottom: 7%; right: -11%; width: 182px; transform: rotate(3.5deg); }
}

/* Process line — photo → voice → amount → memory */
.v2-process {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.v2-process li {
  font-size: 13px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.v2-process li::after {
  content: '';
  width: 16px; height: 1px;
  background: var(--accent-30);
}
.v2-process li:last-child::after { display: none; }

/* Quiet supporting facts inside a chapter — typography, not cards */
.v2-notes { margin: 26px 0 0; padding: 0; list-style: none; }
.v2-notes li {
  position: relative;
  padding: 12px 0 12px 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--feature-card-body);
  border-top: 1px solid var(--accent-12);
}
.v2-notes li:first-child { border-top: none; }
.v2-notes li::before {
  content: '';
  position: absolute; left: 0; top: 20px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
}

/* ════════════════════════════════════════════════════════════════════════
   PHILOSOPHY QUOTE — full-bleed typographic moment
   ════════════════════════════════════════════════════════════════════════ */
.v2-quote-section { text-align: center; }
.v2-quote {
  font-family: var(--font-serif), serif;
  font-size: clamp(26px, 3.9vw, 52px);
  line-height: 1.24;
  font-weight: 400;
  color: var(--text-heading);
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* ════════════════════════════════════════════════════════════════════════
   MEMORIES — the emotional high point
   --------------------------------------------------------------------------
   Barely-warm near-neutral tone (--tone-warm), NOT ivory: stays inside the
   Sky family so it reads as the same design system.
   ════════════════════════════════════════════════════════════════════════ */
.v2-memories { text-align: center; }
.v2-memories .v2-h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.v2-memories-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--feature-card-body);
  max-width: 52ch;
  margin: 0 auto;
}
@media (min-width: 768px) { .v2-memories-sub { font-size: 19px; } }

/* Asymmetric stage. The carousel interaction is preserved; only the
   presentation is restyled — center artifact larger, flanks lower and
   smaller, one card allowed to sit outside the content column. */
.v2-moments {
  position: relative;
  margin: 56px auto 0;
  max-width: var(--page-max);
}
.v2-moments-viewport {
  overflow: hidden;
  /* The centred card's shadow (0 28px 64px) extends ~92px below the device;
     with only 28px of padding, `overflow:hidden` sliced it off. Pad enough
     for the shadow to render, then pull the box back so the carousel sits
     exactly where it did. Horizontal padding stays 0 — the overflow clip is
     what hides the off-screen cards. */
  padding: 40px 0 100px;
  margin-bottom: -72px;
}
/* Mobile: match the hero carousel's soft edges. Without this the peeking
   cards are sliced off at a hard vertical line, which the hero never does.
   The gradient runs `to right` only, so it fades horizontally while staying
   fully opaque top-to-bottom — a radial or multi-axis mask would eat the
   centred card's shadow, which the padding above exists to preserve.
   Desktop shows all three cards inside the content width, so it needs no
   mask and keeping it off avoids fading the outer cards unnecessarily. */
@media (max-width: 767px) {
  .v2-moments-viewport {
    /* Gentler than the hero's 13%: these side cards carry readable entries,
       not decorative slivers, so the fade only needs to soften the cut —
       ~5% keeps the flanking cards legible. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  }
}
.v2-moments-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  will-change: transform;
}
.v2-moment-card {
  flex-shrink: 0;
  width: 208px;
  border: none;
  background: transparent;
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}
@media (min-width: 768px) { .v2-moment-card { width: 236px; } }
@media (min-width: 1200px) { .v2-moment-card { width: 258px; } }

.v2-moment-card .v2-device { box-shadow: 0 18px 44px rgba(10, 40, 64, 0.22); }
.v2-moment-card[aria-current="true"] .v2-device {
  box-shadow: 0 28px 64px rgba(10, 40, 64, 0.30);
}

.v2-moments-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--accent-25);
  background: rgba(255,255,255,0.72);
  color: var(--gold);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
@media (min-width: 768px) { .v2-moments-arrow { display: inline-flex; } }
.v2-moments-arrow:hover { border-color: var(--gold); background: #fff; }
.v2-moments-arrow--prev { left: 8px; }
.v2-moments-arrow--next { right: 8px; }

.v2-moments-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
@media (min-width: 768px) { .v2-moments-dots { display: none; } }
.v2-moments-dots button {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--accent-40);
  background: transparent; padding: 0; cursor: pointer;
}
.v2-moments-dots button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); }

/* The caption repeated the merchant, amount and note already visible on the
   screenshot above it — and the section's whole argument is that the entries
   speak for themselves. Kept as an aria-live region only, so screen-reader
   users are still told which entry is centred as they navigate. */
.v2-moments-caption {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 46ch;
}

@media (prefers-reduced-motion: reduce) {
  .v2-moment-card { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   RESEARCH — its own editorial composition, not a rounded card
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .v2-research-copy    { grid-column: 1 / span 6; }
  .v2-research-diagram { grid-column: 8 / span 5; }
}

/* Behavioral process diagram — a drawn line, no fake UI and no card.
   Presence comes from scale and from the line itself: bigger type, a longer
   run, and a weighted rule that thickens through the Awareness node, which
   is the claim the section is making. */
.v2-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: flow;
}
.v2-flow li {
  position: relative;
  counter-increment: flow;
  padding: 0 0 40px 52px;
  color: var(--text-heading);
}
.v2-flow li:last-child { padding-bottom: 0; }

/* the node */
.v2-flow li::before {
  content: '';
  position: absolute; left: 0; top: 6px;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: var(--tone-powder);
  z-index: 1;
  transition: transform var(--dur-hover) var(--ease);
}
/* the connecting line */
.v2-flow li::after {
  content: '';
  position: absolute; left: 8px; top: 20px;
  width: 1.5px; height: calc(100% - 6px);
  background: linear-gradient(to bottom, var(--accent-40), var(--accent-25));
}
.v2-flow li:last-child::after { display: none; }

.v2-flow-label {
  display: block;
  font-family: var(--font-serif), serif;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.005em;
}
@media (min-width: 1200px) { .v2-flow-label { font-size: 28px; } }

.v2-flow-note {
  display: block;
  font-size: 15px;
  color: var(--text-muted);
  margin-top: 5px;
}

/* The Awareness step is the mechanism — the one the headline names. It gets
   a filled, ringed node and italic serif, so the sequence has a climax
   rather than five equal beats. */
/* Selector must out-specify `.v2-flow li::before`, which also sets
   background — otherwise the fill silently loses and the node stays hollow. */
.v2-flow li.v2-flow-em::before {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 5px var(--accent-15);
}
.v2-flow-em .v2-flow-label {
  font-style: italic;
  color: var(--blue-deep);
}
.v2-flow li.v2-flow-em::after { background: var(--accent-40); width: 2px; left: 7.75px; }

/* Give the whole diagram a quiet left rule so it reads as a column with
   weight, balancing the copy block opposite it. */
@media (min-width: 1024px) {
  .v2-research-diagram { padding-left: 40px; border-left: 1px solid var(--accent-15); }
}

/* Stats — much larger numbers, no oversized rounded rectangle */
.v2-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 52px 0 0;
  border-top: 1px solid var(--accent-25);
}
@media (min-width: 768px) {
  .v2-stats { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
.v2-stat {
  padding: 26px 0;
  border-bottom: 1px solid var(--accent-25);
}
@media (min-width: 768px) {
  .v2-stat { padding: 30px 0 0; border-bottom: none; }
}
.v2-stat-num {
  font-family: var(--font-serif), serif;
  font-size: clamp(56px, 7vw, 92px);
  line-height: 0.9;
  color: var(--gold);
  margin-bottom: 14px;
}
.v2-stat-label {
  font-size: 14px;
  line-height: 1.55;
  color: var(--feature-card-body);
  max-width: 30ch;
}

/* Mobile: number beside its label rather than above it. Stacked, each figure
   sat alone on a full-width line with a rule above, so the three read as
   separate facts in a lot of dead space instead of one argument in three
   beats. Side-by-side keeps each stat a compact unit and lets them group. */
@media (max-width: 767px) {
  /* The flow diagram and the stats belong to one argument; the default gap
     was wide enough that they read as separate sections. */
  .v2-stats { margin-top: 28px; }
  .v2-stat {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    column-gap: 20px;
    /* Centre the figure against its whole label block. With `start` the
       one-line rows ("2", "1") left the number sitting visibly above its
       text; centring reads correctly for both one- and two-line labels. */
    align-items: center;
    padding: 22px 0;
  }
  .v2-stat-num {
    font-size: 38px;
    line-height: 1;
    margin-bottom: 0;
    /* Centred, not right-aligned: "29" is two digits and "2"/"1" are one, so
       right-aligning pushed the single digits further right than the 29 and
       the column read as ragged. */
    text-align: center;
  }
  .v2-stat-label { max-width: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   PRIVACY — dedicated high-contrast moment.
   Typography-led. One real phone as atmosphere. No shields, no lock art.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .v2-privacy-copy  { grid-column: 1 / span 6; }
  .v2-privacy-media { grid-column: 8 / span 5; }
}
.v2-privacy-media { display: flex; justify-content: center; }
.v2-privacy-device { width: 100%; max-width: 250px; }

.v2-privacy-claims { list-style: none; margin: 32px 0 0; padding: 0; }
.v2-privacy-claims li {
  font-family: var(--font-serif), serif;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.35;
  color: var(--on-ink-text);
  padding: 14px 0;
  border-bottom: 1px solid var(--on-ink-12);
}
.v2-privacy-claims li:last-child { border-bottom: none; }

/* ════════════════════════════════════════════════════════════════════════
   COCARLO
   --------------------------------------------------------------------------
   PLACEHOLDER DEVICES. Real CoCarlo screenshots are pending. Each slot is a
   .v2-device with a .v2-placeholder inside; to ship the real thing, replace
   the .v2-placeholder div with a <picture>/<img> and delete nothing else.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .v2-cocarlo-media { grid-column: 1 / span 7; }
  .v2-cocarlo-copy  { grid-column: 8 / span 5; }
}
.v2-cocarlo-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.v2-cocarlo-pair .v2-phone { flex: 0 0 auto; width: 200px; }
@media (min-width: 768px) { .v2-cocarlo-pair .v2-phone { width: 228px; } }
/* Overlap is small on purpose: both screens carry the shared-space signal
   (each view tags the OTHER member's entries), so the front phone must not
   cover the back one's entry list. */
.v2-cocarlo-pair .v2-phone:first-child { transform: rotate(-2.5deg); margin-right: -12px; z-index: 1; }
.v2-cocarlo-pair .v2-phone:last-child  { transform: rotate(2.5deg);  margin-left:  -12px; z-index: 2; }
/* Narrow screens can't fit two 200px phones at that overlap (388px + padding
   overflows a 390px viewport), so tighten the pair and shrink the devices.
   The attribution tags stay legible because the front phone still clears the
   back one's entry rows. */
@media (max-width: 480px) {
  .v2-cocarlo-pair .v2-phone { width: 168px; }
  .v2-cocarlo-pair .v2-phone:first-child { margin-right: -20px; }
  .v2-cocarlo-pair .v2-phone:last-child  { margin-left:  -20px; }
}

/* Placeholder screen — honestly labeled, palette-native, never mistakable
   for real product UI. */
.v2-placeholder {
  aspect-ratio: 1125 / 2436;
  border-radius: 32px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Dashed inner frame = "reserved slot", the standard visual language for
   pending art. Reads as deliberate rather than broken. */
.v2-placeholder::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1.5px dashed var(--accent-30);
  border-radius: 22px;
}
.v2-placeholder-mark {
  font-family: var(--font-serif), serif;
  font-size: 28px;
  font-style: italic;
  color: var(--gold);
  position: relative;
}
.v2-placeholder-text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  position: relative;
}

/* ════════════════════════════════════════════════════════════════════════
   PRINCIPLES — replaces the 6 homepage comparison cards
   ════════════════════════════════════════════════════════════════════════ */
.v2-principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 8px 0 0;
  border-top: 1px solid var(--accent-25);
}
@media (min-width: 1024px) {
  .v2-principles { grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: none; }
}
.v2-principle {
  padding: 30px 0;
  border-bottom: 1px solid var(--accent-25);
}
/* Below 1024px the last principle's bottom border and .v2-compare-row's top
   border stack into two rules separated by the row's margin. Desktop is
   unaffected: there the principles switch to border-top, so no bottom border
   exists to collide. Drop the last one and let the compare row's rule serve
   as the single divider. */
@media (max-width: 1023px) {
  .v2-principle:last-child { border-bottom: none; }
}
@media (min-width: 1024px) {
  .v2-principle { padding: 0; border-bottom: none; border-top: 2px solid var(--gold); padding-top: 26px; }
}
.v2-principle-title {
  font-family: var(--font-serif), serif;
  font-size: clamp(23px, 2.5vw, 30px);
  line-height: 1.22;
  color: var(--text-heading);
  margin: 0 0 12px;
}
.v2-principle-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--feature-card-body);
  margin: 0;
}

/* Quiet comparison link row — preserves every /compare/* link */
.v2-compare-row {
  margin: 56px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--accent-15);
}
.v2-compare-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.v2-compare-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2-compare-links a {
  font-size: 15px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-hover) var(--ease);
}
.v2-compare-links a:hover { border-bottom-color: var(--gold); }

/* ════════════════════════════════════════════════════════════════════════
   PRICING — editorial and values-led, not a SaaS tier card
   ════════════════════════════════════════════════════════════════════════ */
.v2-pricing { text-align: center; }
@media (min-width: 1024px) {
  .v2-pricing-figure { grid-column: 1 / span 5; text-align: left; }
  .v2-pricing-list   { grid-column: 7 / span 6; text-align: left; }
}
.v2-price {
  font-family: var(--font-serif), serif;
  font-size: clamp(84px, 12vw, 150px);
  line-height: 0.86;
  color: var(--text-heading);
  margin: 0;
  letter-spacing: -0.02em;
}
.v2-price-period { font-size: 17px; color: var(--text-muted); margin: 14px 0 0; }
.v2-price-alt { font-size: 15px; color: var(--feature-card-body); margin: 6px 0 0; }
.v2-pricing-figure .v2-actions { margin-top: 40px; justify-content: center; }
/* The community block is max-width'd, so it needs auto margins to sit under
   the centred CTA rather than hugging the left edge. */
.v2-pricing-figure .v2-community { margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) {
  /* Desktop puts this column back to left-aligned. */
  .v2-pricing-figure .v2-actions { justify-content: flex-start; }
  .v2-pricing-figure .v2-community { margin-left: 0; margin-right: 0; }
}

.v2-includes { list-style: none; margin: 0; padding: 0; }
.v2-includes li {
  padding: 15px 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-heading);
  border-bottom: 1px solid var(--accent-15);
}
.v2-includes li:first-child { border-top: 1px solid var(--accent-15); }
@media (min-width: 768px) { .v2-includes li { font-size: 17px; } }

.v2-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--text-muted);
}
.v2-proof li { display: inline-flex; align-items: center; gap: 8px; }
/* Mobile: the inclusions above this row are centred, so a left-aligned proof
   row made the section change alignment mid-block. */
@media (max-width: 1023px) {
  .v2-proof { justify-content: center; }
}
.v2-proof li::before {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-45);
}

/* ════════════════════════════════════════════════════════════════════════
   FINAL CTA
   ════════════════════════════════════════════════════════════════════════ */
.v2-final { text-align: center; }
.v2-final .v2-h2 { max-width: 24ch; margin: 0 auto 20px; }
.v2-final .v2-actions { justify-content: center; }

/* ════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════ */
.v2-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border-top);
  padding: 64px var(--pad-x) 40px;
  color: var(--footer-text);
}
.v2-footer-top {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
/* Mobile: one column per group made the footer ~1400px tall — every link on
   its own full-width row with empty space beside it. Two columns halve that
   while keeping the groups intact; the brand block spans both so the wordmark
   still leads. */
@media (max-width: 767px) {
  .v2-footer { padding-top: 48px; }
  .v2-footer-top {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 16px;
    row-gap: 32px;
  }
  /* Very narrow screens can't fit three columns without "How it works"
     wrapping, so drop to two there. */
  @media (max-width: 359px) {
    .v2-footer-top { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  }
  .v2-footer-top > :first-child { grid-column: 1 / -1; }
  .v2-footer-col li { margin-bottom: 8px; }
}
@media (min-width: 768px) {
  .v2-footer-top { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
}
.v2-footer-logo {
  font-family: var(--font-serif), serif;
  font-size: 24px;
  font-style: italic;
  color: var(--cream);
  text-decoration: none;
}
.v2-footer-tag { font-size: 14px; color: var(--footer-text); margin: 12px 0 0; max-width: 30ch; }
.v2-footer-col h2 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--footer-text-dim);
  margin: 0 0 14px;
}
.v2-footer-col ul { list-style: none; margin: 0; padding: 0; }
.v2-footer-col li { margin-bottom: 10px; }
.v2-footer-col a {
  font-size: 14px;
  color: var(--footer-text);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease);
}
.v2-footer-col a:hover { color: var(--footer-text-hover); }

.v2-footer-social { display: flex; gap: 14px; margin-top: 18px; }
.v2-footer-social a { color: var(--footer-text); transition: color var(--dur-hover) var(--ease); }
.v2-footer-social a:hover { color: var(--footer-text-hover); }

.v2-footer-legal {
  max-width: var(--content-max);
  margin: 44px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--footer-border-top);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  font-size: 13px;
  color: var(--footer-text-dim);
}
.v2-footer-legal a { color: var(--footer-text-dim); text-decoration: none; }
.v2-footer-legal a:hover { color: var(--footer-text-hover); }
.v2-footer-copy { margin-left: auto; }

/* ════════════════════════════════════════════════════════════════════════
   V2 STAGING BANNER — /v2 is noindex; this makes the context obvious
   ════════════════════════════════════════════════════════════════════════ */
.v2-banner {
  background: var(--gold);
  color: #fff;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px var(--pad-x);
}
.v2-banner a { color: #fff; }

/* ── Contrast corrections (v2 only) ──────────────────────────────────────
   Three small text roles inherit token opacities that land just under WCAG
   AA on the navy surface: on-ink-50 measures 4.44:1 and the footer's
   on-ink-35 measures 2.88:1. Nudged to the next rung up so every text role
   on this page clears 4.5:1. Values verified, not guessed. */
.v2-hero-trust      { color: var(--on-ink-65); }  /* 4.44 -> 6.34 */
.v2-phone-label-sub { color: var(--on-ink-65); }  /* 4.44 -> 6.34 */
.v2-footer-legal,
.v2-footer-legal a  { color: var(--on-ink-65); }  /* 2.88 -> 6.34 */
.v2-footer-col h2   { color: var(--on-ink-65); }

/* ════════════════════════════════════════════════════════════════════════
   BANK REMINDERS — secondary treatment
   --------------------------------------------------------------------------
   Deliberately subordinate to the intentional-logging copy above it: smaller
   type, muted colour, and a left rule instead of a card. Bank Reminders is a
   reassuring footnote to the workflow, not a second product mode, so it must
   never read with the same weight as the chapter body.
   ════════════════════════════════════════════════════════════════════════ */
.v2-aside {
  margin: 32px 0 0;
  padding: 18px 0 2px 20px;
  border-left: 2px solid var(--accent-25);
}
.v2-aside-lead {
  font-size: 15px;
  font-weight: 500;
  color: var(--gold);
  margin: 0 0 8px;
}
.v2-aside-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--feature-card-body);
  margin: 0 0 10px;
  max-width: 54ch;
}
.v2-aside-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 54ch;
}

/* Privacy: the Plaid-vs-SimpleFIN distinction. Quiet, but it must be legible
   — it is the one place the page qualifies the encryption claim. */
.v2-privacy-note {
  font-size: 14px;
  line-height: 1.65;
  color: var(--on-ink-65);
  margin: 26px 0 0;
  padding-left: 18px;
  border-left: 1px solid var(--on-ink-30);
  max-width: 56ch;
}

/* ════════════════════════════════════════════════════════════════════════
   EARLY-ACCESS MODAL
   --------------------------------------------------------------------------
   Ported from styles.css on promotion. The modal markup and its Supabase
   POST came across with the homepage; without these rules it would render
   as unstyled markup. Every token it references is already defined above.
   ════════════════════════════════════════════════════════════════════════ */
.ea-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ea-overlay.open { display: flex; }
.ea-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 52px 48px;
  width: 100%;
  max-width: 480px;
  position: relative;
  animation: fadeUp 0.3s ease both;
}
.ea-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 160px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46,232,160,0.55), transparent);
}
.ea-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 32px; height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
.ea-close:hover { background: rgba(255, 255, 255, 0.09); color: var(--text); }
.ea-eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ea-title {
  font-family: var(--font-serif), serif;
  font-size: 28px;
  letter-spacing: -0.3px;
  line-height: 1.15;
  margin-bottom: 8px;
}
.ea-sub {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 300;
  margin-bottom: 32px;
  line-height: 1.6;
}
.ea-field {
  margin-bottom: 16px;
}
.ea-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.ea-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: var(--font-sans), sans-serif;
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
}
.ea-input::placeholder { color: var(--text-dim); }
.ea-input:focus { border-color: rgba(46, 232, 160, 0.45); }
select.ea-input {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A9088' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
select.ea-input option { background: #1F1C18; color: var(--text); }
.ea-platform {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ea-platform input { display: none; }
.ea-platform label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  text-align: center;
}
.ea-platform input:checked + label {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-dim);
}
.ea-platform label:hover { border-color: rgba(46,232,160,0.30); color: var(--text); }
.ea-submit {
  width: 100%;
  margin-top: 24px;
  background: var(--teal);
  color: #0A0907;
  font-family: var(--font-sans), sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 16px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.ea-submit:hover { opacity: 0.88; transform: translateY(-1px); }
.ea-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.ea-privacy {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
}
.ea-success {
  display: none;
  text-align: center;
  padding: 16px 0;
}
.ea-success.show { display: block; }
.ea-form.hide { display: none; }
.ea-success-icon {
  width: 56px; height: 56px;
  background: var(--teal-dim);
  border: 1px solid var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 24px;
}
.ea-success-title {
  font-family: var(--font-serif), serif;
  font-size: 26px;
  margin-bottom: 10px;
}
.ea-success-body {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  font-weight: 300;
  max-width: 320px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .ea-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100dvh;
    padding: 0;
    flex-direction: column;
    background: var(--bg);
    backdrop-filter: none;
    animation: slideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1) both;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }
  .ea-overlay.open { display: flex; }
  .ea-panel {
    flex: 1;
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    padding: 0 24px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    animation: none;
    display: flex;
    flex-direction: column;
  }
  .ea-panel::before { display: none; }
  .ea-panel::after {
    content: '';
    display: block;
    order: -1;
    height: 56px;
    flex-shrink: 0;
  }
  .ea-close {
    position: fixed;
    top: 12px;
    left: 16px;
    right: auto;
    width: auto;
    height: 44px;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--teal);
    padding: 0 8px;
    gap: 4px;
    white-space: nowrap;
    touch-action: manipulation;
    z-index: 201;
  }
  .ea-close { font-size: 0; color: transparent; }
  .ea-close::before { content: '‹ Back'; font-size: 15px; color: var(--teal); }
  .ea-eyebrow { margin-top: 8px; }
}
html.light-mode .ea-overlay { background: rgba(26, 42, 30, 0.55); }
html.light-mode .ea-close { background: rgba(0, 0, 0, 0.06); }
html.light-mode .ea-close:hover { background: rgba(0, 0, 0, 0.08); }
html.light-mode .ea-input { background: rgba(0, 0, 0, 0.05); }
html.light-mode select.ea-input option { background: #EDE7DE; }
:is(html.sacred-mode,html.carlo-mode) .ea-panel {
  background: var(--cream);
  border-color: var(--accent-15);
}
:is(html.sacred-mode,html.carlo-mode) .ea-panel::before {
  background: linear-gradient(90deg, transparent, var(--accent-45), transparent);
}
:is(html.sacred-mode,html.carlo-mode) .ea-eyebrow     { color: var(--gold); }
:is(html.sacred-mode,html.carlo-mode) .ea-close       { background: var(--ink-06); border-color: var(--accent-15); }
:is(html.sacred-mode,html.carlo-mode) .ea-close:hover { background: var(--ink-09); color: var(--ink); }
:is(html.sacred-mode,html.carlo-mode) .ea-input {
  background: var(--ink-04);
  border-color: var(--accent-15);
  color: var(--ink);
}
:is(html.sacred-mode,html.carlo-mode) .ea-input::placeholder  { color: var(--text-dim); }
:is(html.sacred-mode,html.carlo-mode) .ea-input:focus         { border-color: var(--accent-45); }
:is(html.sacred-mode,html.carlo-mode) .ea-platform label      { border-color: var(--accent-15); color: var(--text-muted); }
:is(html.sacred-mode,html.carlo-mode) .ea-platform label:hover { border-color: var(--accent-40); color: var(--ink); }
:is(html.sacred-mode,html.carlo-mode) .ea-platform input:checked + label {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--accent-08);
}
:is(html.sacred-mode,html.carlo-mode) select.ea-input option  { background: var(--cream); color: var(--ink); }
:is(html.sacred-mode,html.carlo-mode) .ea-submit { background: var(--ink); color: var(--cream); border-radius: 6px; }
:is(html.sacred-mode,html.carlo-mode) .ea-submit:hover { background: var(--ink-hover); }
:is(html.sacred-mode,html.carlo-mode) .ea-overlay { background: var(--ink-55); }
:is(html.sacred-mode,html.carlo-mode) .ea-success-icon { background: var(--accent-10); border-color: var(--gold); }
@media (max-width: 640px) {
  :is(html.sacred-mode,html.carlo-mode) .ea-overlay { background: var(--cream); }
  :is(html.sacred-mode,html.carlo-mode) .ea-close::before { color: var(--gold); }
  :is(html.sacred-mode,html.carlo-mode) .ea-panel { background: var(--cream); }
}
/* ════════════════════════════════════════════════════════════════════════
   COMMUNITY PRICING
   --------------------------------------------------------------------------
   A quiet accessibility note, not a second tier. Deliberately no card, no
   border box, no second column — the $79 price must stay dominant. Sits
   under the CTA rather than the price so it is met at the decision point.
   ════════════════════════════════════════════════════════════════════════ */
.v2-community {
  margin: 38px 0 0;
  max-width: 400px;
}
.v2-community-lead {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0 0 6px;
}
@media (min-width: 768px) { .v2-community-lead { font-size: 16px; } }

.v2-community-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--feature-card-body);
  margin: 0 0 10px;
}
@media (min-width: 768px) { .v2-community-body { font-size: 15px; } }

/* A real button (it opens a dialog) styled as a text link — no button chrome. */
.v2-community-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: none;
  background: none;
  font-family: var(--font-sans), sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--gold);
  cursor: pointer;
  border-bottom: 1px solid var(--accent-30);
  transition: color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}
.v2-community-link:hover { color: var(--teal-dark); border-color: var(--gold); }

/* Inert "Get Carlo": keeps full primary styling — a faded button reads as
   broken rather than pending — but must not imply a working external action. */
.v2-btn--pending { cursor: default; }

/* ── Community pricing modal ──
   Reuses .ea-overlay / .ea-panel for layout, animation and the close control;
   only type and spacing are specific to this dialog. */
.cp-panel {
  max-width: 560px;
  padding: 40px;
  text-align: left;
}
@media (max-width: 640px) {
  .cp-panel { padding: 24px; max-width: none; }
}

.cp-title {
  font-family: var(--font-serif), serif;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--text-heading);
  margin: 0 0 20px;
}
@media (min-width: 768px) { .cp-title { font-size: 34px; } }

.cp-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--feature-card-body);
  margin: 0 0 16px;
}
@media (min-width: 768px) { .cp-body { font-size: 16px; } }

/* The trust statement gets emphasis through weight, size and space —
   not a loud callout box, which the design system doesn't use. */
.cp-statement {
  font-size: 16px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--text-heading);
  margin: 26px 0 24px;
}
@media (min-width: 768px) { .cp-statement { font-size: 17px; } }

.cp-closing {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--blue-deep);
  margin: 0 0 28px;
}

/* .v2-btn--primary defaults to a cream fill for dark sections; on the light
   modal panel that reads as an outline, so take the same ink treatment the
   light page sections use. */
.cp-got-it {
  width: 100%;
  justify-content: center;
  background: var(--ink);
  color: var(--cream);
}
.cp-got-it:hover { background: var(--ink-hover); }

/* Mobile: the shared .ea-panel rules turn the dialog full-screen with a
   "‹ Back" affordance — correct for the long early-access form, too heavy for
   a short informational one. Keep the community modal a centred sheet with
   16px outer margins, scrolling internally only if it needs to. */
@media (max-width: 640px) {
  .cp-overlay { padding: 16px; align-items: center; }
  .cp-overlay .ea-panel {
    flex: 0 1 auto;
    height: auto;
    max-height: calc(100vh - 32px);
    width: 100%;
    max-width: none;
    border-radius: 20px;
    border: 1px solid var(--border);
    padding: 28px 24px;
    overflow-y: auto;
  }
  .cp-overlay .ea-panel::after { display: none; }
  /* Restore the corner close control; the fixed "‹ Back" belongs to the
     full-screen form treatment. */
  .cp-overlay .ea-close {
    position: absolute;
    top: 14px;
    right: 14px;
    left: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-08);
    color: var(--text-muted);
    font-size: 15px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cp-title { font-size: 26px; padding-right: 40px; }
  /* The full-screen treatment injects a "‹ Back" label into the close
     control; this dialog uses the corner ✕ instead. */
  .cp-overlay .ea-close::before { content: none; }
}