/* Landing page v3 (/v3/ preview). Builds on style.css (reset, Poppins,
   the base palette). Everything visual here comes from the tokens below,
   which mirror the Figma file (8LQGxmCkwnPhnmgp993UOD):

   1. Palette: raw colors (primitives). Only the semantic layer uses them.
   2. Semantic colors: named after the Figma variables, e.g.
      "Text & Content/Brand" → --text-brand, "Background/Primary" →
      --background-primary. Components use these.
   3. Text styles: one .type-* class per Figma text style (H1, H2, H3, Body,
      Body Bold, Eyebrow, Caption, Pullout), set on the element in the HTML the way
      a text layer gets a style in Figma. Components only add color/layout.
   4. Spacing + radius scale.

   Breakpoints can't be variables in media queries: 767px (phone → wide)
   and 960px (Plan grid goes two-column). */

/* ── 1. PALETTE ──
   style.css already defines --evernight-500, --mint-500 (Figma "Mint Glow/
   500"), --sand-300/500, --onyx-500/600, --twilight-500 and --white. */
:root {
  --onyx-900: #111110;
  --onyx-800: #1a1a18;
  --onyx-400: #6c6c6a;
  --onyx-100: #ebebeb; /* Figma only exposes it as Background/Surface 2 */
  --sand-200: #f9f5ee;
  --sand-600: #e2dac9;
  --sand-700: #bbb5a7;
  --sand-800: #959085;
  --mint-100: #f1fcec; /* Figma "Mint Glow/100" */
  --lavender-200: #dddcf0; /* Figma spells it "Lavendar" */
  --lavender-600: #a5a2ce;
  --rose-500: #b5585e;
}

/* ── 2. SEMANTIC COLORS (Figma variables) ── */
:root {
  /* Text & Content/… */
  --text-brand: var(--evernight-500);
  --text-dark: var(--onyx-500);
  --text-medium: var(--onyx-400);
  --text-light: var(--white);
  --text-mint: #e0f9d4; /* Figma exposes no palette step for this one */
  --text-ovulation: var(--twilight-500);
  --text-soft: var(--sand-500);
  --text-medium-light: #ababaa; /* no palette step in Figma */

  /* Background/… */
  --background-surface: var(--white);
  --background-surface-2: var(--onyx-100);
  --background-secondary: var(--white);
  --background-light: var(--sand-300);
  --background-primary: var(--sand-500);
  --background-brand: var(--evernight-500);
  --background-medium: var(--onyx-500);
  --background-dark: var(--onyx-600);
  --background-medium-dark: var(--onyx-800);
  --background-darkest: var(--onyx-900);
  --background-mint: var(--mint-500);

  /* Actions/…, Strokes/…, Status/… */
  --actions-primary-normal: var(--evernight-500);
  --actions-tertiary-normal: var(--mint-500);
  --strokes-dark: var(--onyx-500);
  --strokes-medium: var(--sand-700);
  --strokes-medium-dark: var(--text-medium-light);
  --status-error: var(--rose-500);
}

/* ── 4. SPACING, RADIUS, SHADOW, MOTION ──
   No spacing variables in Figma yet, so the scale is named by size. One-off
   nudges that line things up with a Figma frame stay literal, commented. */
:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  --page-gutter: var(--space-32);

  --radius-8: 8px;
  --radius-16: 16px;
  --radius-pill: 100px;

  --shadow-soft: 0 0 11px rgba(0, 0, 0, 0.07); /* phone hero copy card */
  --shadow-faint: 0 0 7px rgba(0, 0, 0, 0.04); /* stage chip */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 3. TEXT STYLES (Figma text styles) ──
   Figma's letter spacing "1" is 1% = 0.01em. Headings have two "modes",
   like Figma variable modes: Mobile sizes (taken from the phone frame) by
   default, Desktop sizes (the Figma text styles) from 767px. Only these
   variables change between modes; the classes below never do.
   Body, Body Bold, Eyebrow and Caption are the same on every screen, and
   are set 1–2px larger than the Figma styles (13/11/10) for readability
   (decided 11/1: Body 15/24, Eyebrow 12/21, Caption 12/18). */
:root {
  /* Mobile */
  --type-h1-size: 27px;
  --type-h1-line: 36px;
  --type-h2-size: 23px;
  --type-h2-line: 36px;
  --type-lead-size: 17px;
  --type-lead-line: 24px;
}

@media (min-width: 767px) {
  :root {
    /* Desktop */
    --type-h1-size: 33px;
    --type-h1-line: 42px;
    --type-h2-size: 29px;
    --type-h2-line: 42px;
    --type-lead-size: 20px;
    --type-lead-line: 27px;
  }
}

.type-h1,
.type-lead,
.type-h2,
.type-h3,
.type-body,
.type-body-bold,
.type-eyebrow,
.type-caption {
  font-family: var(--font-body);
}

.type-h1 {
  font-size: var(--type-h1-size);
  font-weight: 400;
  line-height: var(--type-h1-line);
  letter-spacing: 0;
}

.type-h2 {
  font-size: var(--type-h2-size);
  font-weight: 400;
  line-height: var(--type-h2-line);
  letter-spacing: 0;
}

/* Not a Figma style yet: the intro line under a headline (hero subhead) */
.type-lead {
  font-size: var(--type-lead-size);
  font-weight: 400;
  line-height: var(--type-lead-line);
  letter-spacing: 0;
}

/* Figma "Pullout" (FAQ questions + answers) */
.type-pullout {
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0.01em;
}

.type-h3 {
  font-size: 28px;
  font-weight: 300;
  line-height: 34px;
  letter-spacing: 0;
}

.type-body,
.type-body-bold {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.01em;
}

.type-body-bold {
  font-weight: 500;
}

.type-eyebrow {
  font-size: 12px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.type-caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.01em;
}

/* ── PAGE ── */
.v3 {
  background: var(--background-light);
  /* Thinner, Figma-like text rendering on macOS; without it, light text on
     the dark hero looks a weight heavier */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* style.css gives every p a bottom margin; spacing here comes from gaps */
.v3-hero-copy p,
.v3 main p {
  margin-bottom: 0;
}

.v3 main ul {
  list-style: none;
}

/* Same content width as Figma: 836px of content inside the gutters */
.v3-container {
  width: 100%;
  max-width: calc(836px + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* ── BUTTONS ── */
.v3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.v3-btn:hover {
  opacity: 0.9;
}

/* Small pill: nav + unlock (Body Bold) */
.v3-btn-sm {
  gap: 10px;
  padding: var(--space-8) var(--space-16);
}

/* Big CTA: no Figma text style (Medium 14/22, uppercase, 3%) */
.v3-btn-cta {
  padding: var(--space-12) var(--space-24);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.v3-btn-dark {
  background: var(--background-medium-dark);
  color: var(--text-light);
}

.v3-btn img {
  display: block;
  flex: none;
}

/* ── HERO ──
   Phones: logo row on sand, a rounded photo card, and a white copy card
   pulled up over its bottom. 767px+: full-bleed photo, copy on the left. */
.v3-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 41px;
}

.v3-logo {
  display: block;
  width: 80px;
  height: auto;
}

.v3-logo-light {
  display: none;
}

.v3-hero {
  padding-top: var(--space-32);
}

.v3-hero-photo {
  position: relative;
  height: 450px;
  margin: var(--space-16) var(--page-gutter) 0;
  border-radius: var(--radius-16);
  overflow: hidden;
  background: var(--background-darkest);
}

/* Phones: the portrait photo fills the card, anchored to its bottom (her) */
.v3-hero-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.v3-hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  /* pulled up to overlap the bottom of the photo card */
  margin: -189px var(--space-16) 0;
  padding: var(--space-32) var(--space-16);
  border-radius: var(--radius-16);
  background: color-mix(in srgb, var(--background-surface) 95%, transparent);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.v3-hero-copy h1 {
  color: var(--text-dark);
  text-wrap: balance;
}

.v3-hero-sub {
  color: var(--text-medium);
  text-wrap: balance;
}

/* Animated overlay (kyha-ov): centered at the top of the photo card */
.v3-hero .kyha-ov {
  --kyha-ov-width: min(340px, 100%);
  --kyha-ov-x: 50%;
  --kyha-ov-right: auto;
  --kyha-ov-y: var(--space-24);
  transform: translateX(-50%);
}

/* The handoff places the ring, chat and plan card right of center; here
   every scene is centered in its 340-unit box, like the symptom pills. */
.v3-hero .kyha-ov .cycle {
  left: calc(var(--u) * 105);
}

.v3-hero .kyha-ov .chat {
  left: calc(var(--u) * 57.5);
}

.v3-hero .kyha-ov .plan {
  left: calc(var(--u) * 86);
}

/* ── STORE LOCKUP ──
   Phones: rating over the badges, centered. 767px+: one row. */
.v3-stores {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16) var(--page-gutter) 10px;
}

.v3-rating {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-dark);
  text-decoration: none;
  white-space: nowrap;
}

.v3-stars {
  display: flex;
  gap: 6px;
}

.v3-stars img,
.v3-badges img {
  display: block;
}

.v3-badges {
  display: flex;
  gap: var(--space-16);
}

.v3-badges a {
  transition: opacity 0.2s;
}

.v3-badges a:hover,
.v3-rating:hover {
  opacity: 0.8;
}

@media (min-width: 767px) {
  .v3-hero {
    position: relative;
    height: 450px;
    padding: var(--space-32) 0 0;
    overflow: hidden;
    background: var(--background-darkest);
  }

  .v3-hero-photo {
    position: static;
    height: auto;
    margin: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
  }

  /* Figma: the 1280 × 714 photo sits 174px above the hero top */
  .v3-hero-img img {
    object-position: 50% 66%;
  }

  .v3-nav,
  .v3-hero-copy {
    position: relative;
    z-index: 3;
  }

  .v3-logo {
    width: 99px;
  }

  .v3-logo-dark {
    display: none;
  }

  .v3-logo-light {
    display: block;
  }

  /* On the photo the nav + hero buttons flip to white */
  .v3-hero .v3-btn-dark {
    background: var(--background-surface);
    color: var(--text-brand);
  }

  .v3-hero-copy {
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    height: 367px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: left;
  }

  .v3-hero-copy h1 {
    max-width: 443px;
    color: var(--text-light);
    text-wrap: wrap;
  }

  /* 24px between the copy and the button (10px between headline and sub) */
  .v3-hero-copy .v3-btn-cta {
    margin-top: 14px;
  }

  .v3-hero-sub {
    max-width: 405px;
    color: var(--text-light);
    text-wrap: wrap;
  }

  .v3-stores {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-24);
    padding: 10px var(--page-gutter);
  }

  /* Figma (1280 wide) places the plan card at x 890, top 155 at 340px;
     shown ~18% larger, centered where the plan card's center was */
  .v3-hero .kyha-ov {
    --kyha-ov-width: 400px;
    --kyha-ov-x: auto;
    --kyha-ov-right: max(16px, calc(50% - 512px));
    --kyha-ov-y: 128px;
    transform: none;
  }
}

/* ── SCROLL FADE ──
   Cards ease up into place as they scroll in (web.js adds .visible). Each
   card animates on its own as it arrives; where cards sit side by side,
   the section staggers them with --fade-delay (set per card in the HTML)
   only at the widths where they share a row. */
.v3 .fade-in-on-scroll {
  transform: translateY(var(--space-24));
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.v3 .fade-in-on-scroll.visible {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .v3 .fade-in-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── GLASS ──
   Figma's "Glass" effect (frost 4, light -45deg, depth 20) has no CSS
   equivalent; this recreates what shows: the frosted blur behind, a rim of
   light brightest top-left with a softer catch bottom-right, and a faint
   inner glow. Needs position (relative/absolute) on the element. The SVG
   blob in the report card carries the same look inside its file. */
.v3-glass {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.18);
}

.v3-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.2) 38%,
    rgba(255, 255, 255, 0.15) 62%,
    rgba(255, 255, 255, 0.75) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── SECTION TITLE ── */
.v3-section-title {
  color: var(--text-dark);
  text-align: center;
  text-wrap: balance;
}

/* ── CARD ──
   Shared by every card: a centered eyebrow label on top. */
.v3-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24);
  border-radius: var(--radius-16);
  overflow: hidden;
}

.v3-card-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-dark);
  text-align: center;
}

.v3-card-head .type-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-brand);
}

.v3-card-head img {
  display: block;
  flex: none;
}

/* Light inset panel inside a sand card */
.v3-card-inset {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  border-radius: var(--radius-8);
  background: var(--background-light);
  color: var(--text-medium);
  text-align: center;
}

/* ── ABOUT ──
   Pitch + CTA, then three steps. Phones: steps stacked (326 wide).
   960px+ (Figma 1280): steps in one row, 32px apart, 991 wide (a little
   past the 960 column, as in Figma). */
.v3-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  max-width: calc(991px + 2 * var(--page-gutter));
  margin: 0 auto;
  /* Figma phone frame: 32 above, 24 below (+ the plan's 24) */
  padding: var(--space-32) var(--page-gutter) var(--space-24);
}

.v3-about-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

/* Figma breaks it after "health"; plain wrapping at this width gives the
   same two lines (balance would break after "and") */
.v3-about-head .type-h2 {
  max-width: 730px;
  text-wrap: wrap;
}

.v3-about-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-24); /* Figma 23 */
  width: 100%;
  max-width: 326px;
}

.v3-about-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-brand);
}

.v3-about-steps img {
  display: block;
  flex: none;
}

/* ── PLAN ──
   "An answer first…" cards. Phones: one stacked column (Figma 326 wide);
   the rows/columns dissolve and --order sorts the cards: meet, check,
   chat, stage, insights, script, report. 960px+ (Figma 1280): a top row
   (meet 363 + check), then two columns (471 + 473, 16px apart). */
.v3-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  max-width: calc(960px + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: var(--space-24) var(--page-gutter) var(--space-40);
}

.v3-plan-grid,
.v3-plan-row,
.v3-plan-col,
.v3-plan-pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}

.v3-plan-grid {
  max-width: 476px;
}

.v3-plan-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.v3-plan-sub {
  display: none;
  color: var(--text-medium);
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 959px) {
  .v3-plan-row,
  .v3-plan-col,
  .v3-plan-pair {
    display: contents;
  }

  .v3-plan-grid .v3-card {
    order: var(--order, 0);
  }
}

/* Meet Kyha: sand card, the app's Home screen in a phone outline,
   cropped by a light panel */
/* Phones: the panel is 283 wide in a 326 card (Figma), so the card's
   sides are tighter than the 960px+ 40 */
.v3-card-meet {
  gap: var(--space-8);
  padding: var(--space-24) var(--space-16);
  background: var(--background-primary);
}

.v3-meet-screen {
  display: flex;
  justify-content: center;
  align-self: center;
  width: 100%;
  max-width: 283px;
  height: 288px;
  padding-top: var(--space-16);
  border-radius: var(--radius-8);
  background: var(--background-light);
  overflow: hidden;
}

.v3-meet-screen img {
  display: block;
  flex: none;
  width: 163px;
  height: 352px;
  border: 3px solid var(--strokes-dark);
  border-radius: 30px;
  object-fit: cover;
}

/* Symptom check: dark card, photo at 60%, centered chat + chips */
.v3-card-check {
  align-items: center;
  justify-content: center;
  min-height: 365px;
  /* Figma phone frame: 16px sides, which keeps the chips at 3 + 3 */
  padding-inline: var(--space-16);
  background: var(--background-darkest);
}

/* Same crop as Figma: the 761 × 425 photo, 76px left and 41px up */
.v3-card-check-bg img {
  position: absolute;
  top: -41px;
  left: -76px;
  width: 761px;
  max-width: none;
  height: 425px;
  object-fit: cover;
  opacity: 0.6;
}

.v3-card-check .v3-card-head {
  color: var(--text-light);
}

.v3-card-check .v3-card-head .type-eyebrow {
  color: var(--text-mint);
}

.v3-chat-bubble {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 308px;
  padding: var(--space-16);
  border-radius: var(--radius-16) var(--radius-16) 0 var(--radius-16);
  background: color-mix(in srgb, var(--background-surface) 40%, transparent);
}

.v3-chat-bubble img {
  flex: none;
}

/* No Figma text style (Figma 12/18, +2 like Body); Figma colors it
   Background/Darkest */
.v3-chat-bubble p {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.001em;
  color: var(--background-darkest);
}

.v3-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  /* Figma wraps the six chips 3 + 3 */
  max-width: 290px;
}

.v3-chips li {
  padding: 6px var(--space-12);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--background-surface) 90%, transparent);
  color: var(--text-dark);
  white-space: nowrap;
}

.v3-chips .is-selected {
  background: var(--background-brand);
  color: var(--actions-tertiary-normal);
}

/* Personalized chat: dark card, a short thread (Caption, Figma 11/16)
   and the "added to your plan" snackbar */
.v3-card-chat {
  align-items: center;
  gap: var(--space-16);
  background: var(--background-medium);
}

.v3-card-chat .v3-card-head .type-eyebrow {
  color: var(--actions-tertiary-normal);
}

.v3-chat-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.v3-chat-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
}

.v3-chat-row img,
.v3-chat-saving img {
  display: block;
  flex: none;
}

.v3-chat-row.is-user {
  justify-content: flex-end;
}

.v3-chat-row.is-kyha {
  max-width: 356px;
}

/* style.css sets a size on every p */
.v3-chat-thread p {
  font-size: inherit;
  line-height: inherit;
}

.v3-chat-msg {
  min-width: 0;
  padding: var(--space-16);
  border-radius: var(--radius-16);
}

/* Figma: 230 on phones, 262 at 960px+ */
.is-user .v3-chat-msg {
  max-width: 230px;
  background: var(--background-dark);
  color: var(--text-light);
}

.is-kyha .v3-chat-msg {
  flex: 1;
  background: var(--background-surface-2);
  color: var(--text-dark);
}

.v3-chat-saving {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: var(--space-24);
  color: var(--text-light);
}

.v3-snackbar {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  max-width: 358px;
  padding: 7px var(--space-12);
  border-radius: var(--radius-8);
  background: var(--background-brand);
  color: var(--actions-tertiary-normal);
}

.v3-snackbar img {
  display: block;
  flex: none;
}

/* Appointment script: first sentence readable, the rest blurred behind
   an unlock button; the whole block fades out toward the bottom */
.v3-card-script,
.v3-card-sand {
  background: var(--background-primary);
}

/* No Figma text style (Rozha One 20/23, -2%) */
.v3-script {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  font-family: "Rozha One", serif;
  font-size: 20px;
  line-height: 23px;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  text-align: center;
  /* mask: only alpha matters, #000 = fully shown */
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 10%, transparent 92%);
}

/* style.css sets a font and size on every p */
.v3-script p {
  font-family: inherit;
  font-size: inherit;
}

.v3-script-wrap {
  position: relative;
}

.v3-script-locked {
  filter: blur(5px);
  user-select: none;
}

/* Outside .v3-script so the fade mask doesn't fade it; centered over the
   blurred lines */
.v3-btn-unlock {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/* Stage + insights: sand cards, centered headers (like the other cards),
   a lighter inset */
.v3-card-sand {
  gap: var(--space-16);
  padding: var(--space-24) var(--space-16);
}

.v3-stage-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-16);
  border-radius: var(--radius-16);
  background: linear-gradient(85deg, var(--mint-100) 14%, var(--sand-200) 49%, var(--mint-500) 184%);
  box-shadow: var(--shadow-faint);
}

.v3-stage-name {
  color: var(--text-brand);
}

.v3-pattern {
  gap: var(--space-4);
  /* Figma: 28px above the ring */
  padding: 28px var(--space-16);
}

.v3-pattern .type-caption {
  margin-top: 1px;
}

.v3-cycle-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: url("/assets/images/Cycle_Ring.svg") center / contain no-repeat;
}

/* Living report: lavender gradient, blob stat + summary rows */
.v3-card-report {
  flex: 1;
  background: linear-gradient(to bottom, var(--lavender-200), var(--lavender-600));
}

.v3-card-report .v3-card-head .type-eyebrow {
  color: var(--text-ovulation);
}

.v3-report {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.v3-report-blob {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 185px;
  height: 179px;
  /* lifts the stat a little above the blob's center, as in Figma */
  padding-bottom: var(--space-12);
  background: url("/assets/images/Report_Blob.svg") center / 100% 100% no-repeat;
  color: var(--text-dark);
  text-align: center;
}

.v3-report-blob .type-h3 {
  display: block;
}

.v3-report-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.v3-report-rows li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8);
  border-radius: var(--radius-8);
  background: var(--lavender-200);
  color: var(--text-dark);
}

.v3-report-rows img {
  display: block;
  flex: none;
}

@media (min-width: 767px) {
  .v3-plan {
    padding: var(--space-48) var(--page-gutter) var(--space-40);
  }

  .v3-plan-sub {
    display: block;
  }

  .v3-about {
    padding: var(--space-48) var(--page-gutter) 0;
  }
}

@media (min-width: 960px) {
  .v3-about-steps {
    flex-direction: row;
    gap: var(--space-32);
    max-width: none;
  }

  /* Top-aligned in the row so the steps line up when they wrap to
     different line counts; the 24px icon sits on the first 24px line */
  .v3-about-steps {
    align-items: flex-start;
  }

  .v3-about-steps li {
    flex: 1;
    align-items: flex-start;
    min-width: 0;
  }

  .v3-plan .fade-in-on-scroll {
    transition-delay: var(--fade-delay, 0ms);
  }

  .v3-plan-grid {
    gap: var(--space-16);
    max-width: 960px;
  }

  .v3-plan-row {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-16);
  }

  .v3-plan-col {
    gap: var(--space-16);
  }

  .v3-plan-row > .v3-card {
    flex: 1;
    min-width: 0;
  }

  .v3-plan-row > .v3-card-meet {
    flex: none;
    width: 363px;
  }

  .v3-plan-col:first-child {
    flex: none;
    width: 471px;
  }

  .v3-plan-col:last-child {
    flex: 1;
    min-width: 0;
  }

  .v3-card-chat {
    padding-inline: var(--space-32);
  }

  .v3-card-meet {
    padding-inline: var(--space-40);
  }

  .is-user .v3-chat-msg {
    max-width: 262px;
  }

  .v3-card-script {
    flex: 1;
  }

  .v3-plan-pair {
    flex-direction: row;
  }

  .v3-plan-pair .v3-card {
    flex: 1;
    min-width: 0;
  }

  .v3-report {
    flex-direction: row;
    gap: var(--space-24);
  }

  .v3-report-blob {
    width: 205px;
    height: 200px;
  }

  .v3-report-rows {
    flex: 1;
    gap: var(--space-12);
  }
}

/* ── ADVISORY BOARD ──
   Photo cards. Phones: one column in row order (Figma 326 wide, 325
   photos). 767px+: two compact 284px columns with 300px photos, centered,
   the right one dropped 40px (Figma 1280). */
.v3-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  /* 40 top: it follows the testimonials' sand band */
  padding: var(--space-40) var(--page-gutter);
}

.v3-board-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  max-width: 354px;
}

/* Phones: the columns dissolve so the cards can reorder across them */
.v3-board-col {
  display: contents;
}

.v3-advisor {
  order: var(--order);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-16);
  overflow: hidden;
  background: var(--background-surface);
}

.v3-advisor-photo img {
  display: block;
  width: 100%;
  height: 325px;
  object-fit: cover;
  background: var(--background-secondary);
}

.v3-advisor-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16);
  text-align: center;
}

.v3-advisor-info h3 {
  color: var(--text-dark);
}

.v3-advisor-info p {
  color: var(--text-medium);
}

@media (min-width: 767px) {
  .v3-board .fade-in-on-scroll {
    transition-delay: var(--fade-delay, 0ms);
  }

  .v3-board-grid {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-24);
    max-width: calc(2 * 284px + var(--space-24));
  }

  .v3-advisor-photo img {
    height: 300px;
  }

  .v3-board-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-24);
    min-width: 0;
  }

  .v3-board-col + .v3-board-col {
    padding-top: var(--space-40);
  }
}

/* ── TEAM ──
   Founders card on a full-width Background/Primary band. Phones (Figma
   390): 24px gutters, photos stacked, copy below. 767px+: photos side by
   side. 960px+: copy beside the photos (Figma 1280). */
.v3-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-40) var(--space-24);
  background: var(--background-primary);
}

.v3-team-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
  max-width: 960px;
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-16);
  background: var(--background-surface);
}

.v3-team-photos {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.v3-team-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 288 / 300;
  border-radius: var(--radius-8);
  object-fit: cover;
}

/* Under the photos: centered, 16px to the quote. Beside them (960px+):
   left-aligned, 32px. */
.v3-team-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-16);
  color: var(--text-dark);
  text-align: center;
}

.v3-team-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  color: var(--text-brand);
}

/* No Figma text style (Rozha One 28/30, 1%) */
.v3-team-quote blockquote p {
  font-family: "Rozha One", serif;
  font-size: 28px;
  line-height: 30px;
  letter-spacing: 0.01em;
}

@media (min-width: 767px) {
  .v3-team {
    padding: var(--space-40) var(--page-gutter);
  }

  .v3-team-photos {
    flex-direction: row;
    justify-content: center;
  }

  .v3-team-photo {
    flex: 0 1 288px;
  }
}

@media (min-width: 960px) {
  .v3 .v3-team .fade-in-on-scroll {
    transition-delay: var(--fade-delay, 0ms);
  }

  .v3-team-card {
    flex-direction: row;
    align-items: stretch;
  }

  .v3-team-photos {
    flex: none;
  }

  .v3-team-photo {
    width: 288px;
  }

  .v3-team-copy {
    flex: 1;
    min-width: 0;
    gap: var(--space-32);
    text-align: left;
  }
}

/* ── TESTIMONIALS ──
   Under 960px (Figma phone frame): the heading + phone pin near the top of
   the viewport (sticky) and the see-through cards scroll up over the phone,
   then over the heading; the group lets go when the last card passes.
   960px+ (Figma 1280): heading on top, two card columns (the right one
   dropped 40px) beside the phone, all solid. Full-width Background/
   Primary band; cards are Background/Light around a Surface panel. */
.v3-testi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-40) var(--space-24);
  background: var(--background-primary);
}

.v3-testi-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
}

.v3-testi-pin {
  position: sticky;
  top: var(--space-24);
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.v3-testi-phone img {
  display: block;
  width: 288px;
  height: auto;
}

/* Figma: the first card starts 340px down the phone, covering its bottom */
.v3-testi-cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  margin-top: calc(340px - 483px);
}

.v3-testi-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.v3-testi-card {
  padding: var(--space-16);
  border-radius: var(--radius-16);
  background: color-mix(in srgb, var(--background-light) 72%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.v3-testi-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-16);
  border-radius: var(--radius-8);
  background: color-mix(in srgb, var(--background-surface) 84%, transparent);
}

.v3-testi-inner blockquote {
  color: var(--text-dark);
}

.v3-testi-inner figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-brand);
}

.v3-testi-inner figcaption img {
  display: block;
  flex: none;
}

@media (min-width: 767px) {
  .v3-testi {
    padding: var(--space-40) var(--page-gutter);
  }
}

@media (min-width: 960px) {
  .v3 .v3-testi .fade-in-on-scroll {
    transition-delay: var(--fade-delay, 0ms);
  }

  /* Heading across the top; cards (593 wide) left, phone right */
  .v3-testi-stage {
    display: grid;
    grid-template-columns: minmax(0, 593px) 288px;
    justify-content: space-between;
    align-items: start;
    gap: var(--space-24);
    max-width: 960px;
  }

  .v3-testi-pin {
    display: contents;
  }

  .v3-testi-pin .v3-section-title {
    grid-column: 1 / -1;
  }

  .v3-testi-phone {
    grid-column: 2;
    grid-row: 2;
    margin-top: 30px;
  }

  .v3-testi-cards {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    gap: var(--space-16);
    margin-top: 0;
  }

  .v3-testi-col {
    flex: 1;
    min-width: 0;
    gap: var(--space-24);
  }

  .v3-testi-col + .v3-testi-col {
    gap: var(--space-16);
    padding-top: var(--space-40);
  }

  .v3-testi-card {
    background: var(--background-light);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .v3-testi-inner {
    background: var(--background-surface);
  }
}

/* Brand button (Background/Brand + Text/Light) */
.v3-btn-brand {
  background: var(--background-brand);
  color: var(--text-light);
}

/* ── SECURITY ──
   Trust points + CTA on a full-width Background/Light band. Phones
   (Figma 390): points stacked and centered 32px apart, button full width.
   767px+ (Figma 1280): points in one row 64px apart, button its own size. */
.v3-security {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  /* No bottom padding: pricing's 40 top is the whole gap (same background) */
  padding: var(--space-40) var(--space-24) 0;
  background: var(--background-light);
}

.v3-security-points {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.v3-security-points li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-brand);
}

.v3-security-points img {
  display: block;
  flex: none;
}

.v3-security .v3-btn {
  width: 100%;
  max-width: 342px;
}

@media (min-width: 767px) {
  .v3 .v3-security .fade-in-on-scroll {
    transition-delay: var(--fade-delay, 0ms);
  }

  .v3-security {
    padding: var(--space-40) var(--page-gutter) 0;
  }

  .v3-security-points {
    flex-direction: row;
    gap: 64px;
  }

  .v3-security .v3-btn {
    width: auto;
  }
}

/* Light button (Background/Surface + Text/Brand), for dark cards */
.v3-btn-light {
  background: var(--background-surface);
  color: var(--text-brand);
}

/* Hidden visually, still read by screen readers */
.v3-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── PRICING ──
   Dark membership card with the plan switch, beside a list of what's
   included. Phones (Figma 390): joined into one card, dark on top, sand
   below. 960px+ (Figma 1280): two cards side by side, equal widths. */
.v3-pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-40) var(--space-24);
}

.v3-pricing-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 472px;
}

.v3-pricing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-16) var(--radius-16) 0 0;
  background: var(--background-medium);
}

.v3-pricing-label {
  color: var(--text-light);
}

.v3-pricing-graph img {
  display: block;
  width: 340px;
  max-width: 100%;
  height: auto;
}

.v3-pricing-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-24) 0;
}

/* Segmented control: a dark track with a darker thumb that slides under
   the selected option */
.v3-segmented {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-pill);
  background: var(--background-dark);
}

.v3-segmented-thumb {
  position: absolute;
  inset: 0 50% 0 0;
  border-radius: var(--radius-pill);
  background: var(--background-medium-dark);
  transition: transform 0.35s var(--ease-out);
}

[data-plan="monthly"] .v3-segmented-thumb {
  transform: translateX(100%);
}

.v3-segmented button {
  position: relative;
  padding: var(--space-12) var(--space-24);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-soft);
  cursor: pointer;
}

.v3-segmented button:focus-visible {
  outline: 2px solid var(--actions-tertiary-normal);
  outline-offset: 2px;
}

.v3-price {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The badge collapses (height + fade) when Monthly is picked, so the
   price glides up instead of jumping */
.v3-price-badge-wrap {
  display: grid;
  grid-template-rows: 1fr;
}

[data-plan="monthly"] .v3-price-badge-wrap {
  grid-template-rows: 0fr;
  opacity: 0;
}

.v3-price-badge {
  min-height: 0;
  overflow: hidden;
  justify-self: center;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--background-dark);
  color: var(--text-light);
}

[data-plan="monthly"] .v3-price-badge {
  padding-block: 0;
}

.v3-price-badge-wrap,
.v3-price-badge {
  transition-property: grid-template-rows, opacity, padding;
  transition-duration: 0.35s;
  transition-timing-function: var(--ease-out);
}

/* H1 style; the phone frame keeps the desktop 33/42 for the price */
.v3-price-amount {
  font-size: 33px;
  line-height: 42px;
  color: var(--actions-tertiary-normal);
  transition:
    opacity 0.16s var(--ease-out),
    transform 0.16s var(--ease-out);
}

.v3-price-amount.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}

.v3-pricing-features {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: var(--space-24);
  border-radius: 0 0 var(--radius-16) var(--radius-16);
  background: var(--background-primary);
}

.v3-pricing-features li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-dark);
}

.v3-pricing-features img {
  display: block;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .v3-segmented-thumb,
  .v3-price-badge-wrap,
  .v3-price-badge,
  .v3-price-amount {
    transition: none;
  }
}

/* Joined card on phones: the sand half fades in without sliding, so no
   gap opens under the dark half */
@media (max-width: 959px) {
  .v3 .v3-pricing-features.fade-in-on-scroll {
    transform: none;
  }
}

@media (min-width: 767px) {
  .v3-pricing {
    padding: var(--space-40) var(--page-gutter);
  }
}

@media (min-width: 960px) {
  .v3 .v3-pricing .fade-in-on-scroll {
    transition-delay: var(--fade-delay, 0ms);
  }

  .v3-pricing-grid {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-16);
    max-width: 960px;
  }

  .v3-pricing-card,
  .v3-pricing-features {
    flex: 1;
    min-width: 0;
    border-radius: var(--radius-16);
  }
}

/* ── FAQ ──
   Questions with a thin rule under each (none under the last); the plus
   turns into a minus when open. Figma 1280: a 732-wide column. */
.v3-faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding: 0 var(--space-24) var(--space-40);
}

.v3-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  max-width: 732px;
}

.v3-faq-item {
  padding-bottom: var(--space-16);
  border-bottom: 0.5px solid var(--strokes-medium);
}

.v3-faq-item:last-child {
  border-bottom: 0;
}

.v3-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  color: var(--text-dark);
  cursor: pointer;
  list-style: none;
}

/* Safari's own disclosure triangle */
.v3-faq-item summary::-webkit-details-marker {
  display: none;
}

.v3-faq-item summary:focus-visible {
  outline: 2px solid var(--actions-primary-normal);
  outline-offset: 4px;
  border-radius: var(--radius-8);
}

.v3-faq-item p {
  padding-top: var(--space-8);
  color: var(--text-medium);
}

.v3-faq-item p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Figma's Plus / Minus icons (rounded ends, a gap in the right arm) */
.v3-faq-icon {
  flex: none;
  width: 16px;
  height: 16px;
  background: url("/assets/images/Icon_Plus.svg") center / contain no-repeat;
}

.v3-faq-item[open] .v3-faq-icon {
  background-image: url("/assets/images/Icon_Minus.svg");
}

/* Smooth open/close where the browser supports animating <details>
   (Chrome 131+); elsewhere it just opens */
@supports (interpolate-size: allow-keywords) {
  .v3-faq-item {
    interpolate-size: allow-keywords;
  }

  .v3-faq-item::details-content {
    height: 0;
    overflow: hidden;
    transition:
      height 0.35s var(--ease-out),
      content-visibility 0.35s allow-discrete;
  }

  .v3-faq-item[open]::details-content {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v3-faq-item::details-content {
    transition: none;
  }
}

@media (min-width: 767px) {
  .v3-faq {
    padding: 0 var(--page-gutter) var(--space-40);
  }
}

/* ── LEARN ──
   Article cards on a full-width sand band: the photo fills the card, a
   frosted white label sits at the bottom. Filled in by the script in
   index.html from /learn/latest.json. */
.v3-learn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-40) 0;
  background: var(--background-primary);
}

.v3-learn[hidden] {
  display: none;
}

.v3-learn .v3-section-title {
  padding: 0 var(--space-24);
}

/* Phones: one row you swipe, each card most of the screen wide, with
   the next one peeking in */
.v3-learn-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 280px);
  gap: var(--space-16);
  width: 100%;
  padding: 0 var(--space-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--space-24);
  scrollbar-width: none;
}

.v3-learn-list::-webkit-scrollbar {
  display: none;
}

.v3-learn-card {
  scroll-snap-align: start;
}

.v3-learn-card a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 326px;
  padding: var(--space-24) var(--space-16) var(--space-32);
  border-radius: var(--radius-16);
  overflow: hidden;
  /* shows when an article has no photo */
  background: var(--background-brand);
  text-decoration: none;
}

.v3-learn-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.v3-learn-card a:hover img {
  transform: scale(1.04);
}

.v3-learn-card a:focus-visible {
  outline: 2px solid var(--actions-primary-normal);
  outline-offset: 3px;
}

.v3-learn-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16);
  border-radius: var(--radius-8);
  background: color-mix(in srgb, var(--background-surface) 90%, transparent);
  text-align: center;
}

.v3-learn-text .type-pullout {
  color: var(--text-dark);
}

.v3-learn-text .type-caption {
  color: var(--text-brand);
}

@media (prefers-reduced-motion: reduce) {
  .v3-learn-card img {
    transition: none;
  }
}

@media (min-width: 767px) {
  .v3-learn-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    max-width: calc(960px + 2 * var(--page-gutter));
    padding: 0 var(--page-gutter);
    overflow: visible;
  }
}

@media (min-width: 960px) {
  .v3-learn-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── FOOTER ──
   Dark band: logo + email sign-up, three link columns, a rule, then the
   disclaimer and legal links. Phones: everything stacks. 960px+ (Figma
   1280): one row, 48px between groups. */
.v3 {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .v3 {
    scroll-behavior: auto;
  }
}

.v3-footer {
  padding: var(--space-40) var(--space-24);
  background: var(--background-medium);
  color: var(--text-light);
}

.v3-footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  max-width: 960px;
  margin: 0 auto;
}

.v3-footer-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding-bottom: var(--space-32);
  border-bottom: 0.5px solid var(--strokes-medium-dark);
}

.v3-footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.v3-footer-brand > img {
  display: block;
}

/* Sign-up, then the store badges (on phones web.js shows only the
   visitor's platform, as in the store lockup) */
.v3-footer-get {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.v3-footer-badges {
  display: flex;
  gap: var(--space-16);
}

.v3-footer-badges img {
  display: block;
}

.v3-footer-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
}

.v3-footer-form label {
  color: var(--text-soft);
}

.v3-footer-field {
  display: flex;
  gap: var(--space-8);
}

.v3-footer-field input {
  flex: 1;
  min-width: 0;
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius-8);
  background: var(--background-surface);
  color: var(--text-dark);
}

.v3-footer-field input::placeholder {
  color: var(--text-medium-light);
}

.v3-footer-field button {
  flex: none;
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius-8);
  background: var(--background-mint);
  color: var(--text-brand);
  cursor: pointer;
}

.v3-footer-field input:focus-visible,
.v3-footer-field button:focus-visible,
.v3-footer a:focus-visible {
  outline: 2px solid var(--actions-tertiary-normal);
  outline-offset: 2px;
}

.v3-footer .signup-success {
  color: var(--text-soft);
}

.v3-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-32) var(--space-48);
}

.v3-footer-links h2 {
  margin: 0 0 var(--space-16);
  color: var(--text-soft);
}

.v3-footer-links ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-footer-links a {
  color: var(--text-light);
  text-decoration: none;
}

.v3-footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.v3-footer .v3-footer-social {
  flex-direction: row;
  gap: var(--space-8);
}

.v3-footer-social img {
  display: block;
}

.v3-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  color: var(--text-medium-light);
}

.v3-footer-bottom p {
  font-size: inherit;
  line-height: inherit;
}

.v3-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.v3-footer-legal a {
  color: inherit;
  text-decoration: none;
}

.v3-footer-legal a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 767px) {
  .v3-footer {
    padding: var(--space-40) var(--page-gutter);
  }
}

@media (min-width: 960px) {
  .v3-footer-top {
    flex-direction: row;
    gap: var(--space-48);
  }

  .v3-footer-brand {
    justify-content: space-between;
    gap: var(--space-24);
  }

  .v3-footer-field input {
    flex: none;
    width: 289px;
  }

  .v3-footer-links {
    flex-wrap: nowrap;
  }

  .v3-footer-links > div {
    flex: none;
    white-space: nowrap;
  }

  .v3-footer-bottom {
    flex-direction: row;
    gap: var(--space-32);
  }

  .v3-footer-bottom p:first-child {
    flex: 1;
  }

  .v3-footer-legal {
    flex: none;
  }
}