/* Landing page v3 (/v3/ preview): the page's own sections. Tokens, text
   styles, buttons, section titles, scroll fade, the Learn cards and the
   footer live in kyha.css, which loads first. */
/* ── 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);
  }

  /* The nav button is see-through (white at 70%, the photo blurred behind
     it), so at in-between widths, where it lands over her face, it
     doesn't block it out */
  .v3-nav .v3-btn-dark {
    background: color-mix(in srgb, var(--background-surface) 70%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .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;
  }
}

/* ── 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;
}

/* ── 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 + two CTAs (symptom check, download), then three points. Phones:
   stacked (326 wide). 960px+ (Figma 1280): one centered row, 32px apart. */
.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);
}

/* The two CTAs: stacked on phones, 12 apart, both as wide as the wider
   one (Figma 244); side by side 16 apart from 767px */
.v3-about-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Breaks after "body," (the <br>); each half wraps on its own on phones */
.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);
}

/* Figma Body here is 14/21 (the site's body is 15/24): at 15 "Connect
   your symptoms to your stage" wraps where Figma has one line */
.v3-about-steps .type-body {
  font-size: 14px;
  line-height: 21px;
}

.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 {
  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) {
  /* Figma 1280: 64 from the steps to "An answer first…" */
  .v3-plan {
    padding: 64px var(--page-gutter) var(--space-40);
  }

  /* Figma 1280: 48 from the CTAs to the steps */
  .v3-about {
    gap: var(--space-48);
    padding: var(--space-48) var(--page-gutter) 0;
  }

  .v3-about-ctas {
    flex-direction: row;
    gap: var(--space-16);
  }
}

@media (min-width: 960px) {
  /* Figma 1280: each point as wide as its text, the three centered in
     one row 16 apart */
  .v3-about-steps {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-16);
    max-width: none;
  }

  .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) */
/* ── 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 */
/* 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);
  }
}