/*
  Design tokens below are pulled directly from the Figma file (Period
  Calendar Landing Page, fileKey 4upT2leu4kY737VXkY2jZb) via its color and
  type-style variables — not invented. Sections are being rebuilt one at a
  time against that design; the mobile-first breakpoints and header/
  mobile-nav/accordion mechanics ported from BST (see ../../../CLAUDE.md)
  stay until each section they serve is itself rebuilt from the design.
*/

@font-face {
  font-family: 'Fixel Display';
  src: url('/static/fonts/FixelDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fixel Display';
  src: url('/static/fonts/FixelDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fixel Display';
  src: url('/static/fonts/FixelDisplay-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fixel Display';
  src: url('/static/fonts/FixelDisplay-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Fixel Display';
  src: url('/static/fonts/FixelDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Content colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-soft-pink: #ffd2ee;
  --color-berry: #cc0580;
  --color-deep-berry: #79004b;
  --color-plum: #4b0430;

  /* Light theme text */
  --color-text-primary: #222222;
  --color-text-secondary: #555555;
  --color-text-tertiary: #888888;
  --color-text-quaternary: #bdbdbd;

  /* Light theme backgrounds / strokes */
  --color-bg-floor-1: #ffffff;
  --color-bg-floor-2: #ffffff;
  --color-bg-floor-2-5: #fcfcfc;
  --color-bg-grey: #f6f6f6;
  --color-bg-blush: #ffe9f7;
  --color-bg-soft-lilac: #f6e6ff;
  --color-stroke: #ececec;
  --color-primary: #be2a5e;

  /* Legacy aliases — still read by sections not yet rebuilt from Figma */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-tinted: #faf3f2;
  --color-text: #241a22;
  --color-text-muted: #6b5a63;
  --color-primary-dark: #6c2c54;
  --color-border: #ece1e6;

  --font-display: 'Fixel Display', Georgia, serif;
  --font-body: 'Fixel Display', system-ui, -apple-system, Segoe UI, sans-serif;
  --container-width: 1120px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Reserves the footer's own height at the end of the scrollable page,
     MINUS 300px — see the "footer reveal" note on .site-footer below.
     That 300px is deliberately NOT reserved, so .home-faq's bottom
     ends up overlapping
     the footer's own top 300px instead of sitting flush with it, hiding
     that stretch of empty top-padding behind .home-faq's opaque body —
     visible only through its rounded corners. var(--footer-height) is set
     from the footer's real rendered height by initFooterReveal (main.js). */
  padding-bottom: calc(var(--footer-height, 0px) - 300px);
}

body.mobile-menu-open {
  overflow: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--color-primary); }

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 64px 0;
}

.section--tinted {
  background: var(--color-surface-tinted);
}

.section-heading {
  max-width: 640px;
  margin-bottom: 32px;
}

.section-heading--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-note {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.5em;
}

.page-lead {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

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

/* ------------------------------------------------------------ reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

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

/* ------------------------------------------------------------------- header */
/* Figma: node 135:6880 "Header" — full-width white bar, 72px tall, px-40
   py-12 (same at 1440 and 1920). Slides out of view while scrolling down
   and back in as soon as the visitor scrolls up (initHeaderState, main.js
   toggles .is-hidden). */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--color-white);
  /* Figma: 1px bottom stroke, black 7%, inside — inset shadow keeps the
     bar at exactly 72px instead of adding a border pixel. */
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.07);
  transition: transform 0.3s ease;
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

/* Keyboard users tabbing into a hidden header must be able to see it. */
.site-header.is-hidden:focus-within {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* The header overlays page content (fixed, out of flow) so it can float on
   top of the home hero photo per the Figma design. Pages without a tall
   hero need a compensating top offset so their content doesn't start
   underneath the pill — a stopgap until those pages get their own Figma
   designs and real spacing. */
main {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  padding-top: 112px;
}

@media (min-width: 1100px) {
  main {
    padding-top: 72px;
  }
}

/* .site-footer is position:fixed, so it always renders behind main at the
   SAME viewport-relative band (the bottom footerHeight px of the viewport)
   no matter what's scrolled into view — not just at the true end of the
   page. Every section's rounded-bottom-corner reveal (hero-section,
   .proof-section, .home-faq) sweeps through that exact band at some point
   during its scroll animation, so if main were simply transparent there,
   each of them would briefly reveal the FOOTER's background instead of the
   plain page background. Keep main opaque (var(--color-bg), set above)
   everywhere EXCEPT its own last 180px (.home-faq's own max corner radius)
   — that's the one spot where main being opaque would itself be the bug,
   since .home-faq's own background is the same white, making its curve
   invisible. The gradient layer re-establishes the opaque fill up to that
   point; the image layer is what shows through once the gradient turns
   transparent. */
body.page-home main {
  /* background-color must be cleared too: `main` above sets it via the
     background shorthand, and it would paint solid white under the
     gradient's transparent stop — covering .home-faq's rounded corners. */
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--color-bg) calc(100% - 180px), transparent calc(100% - 180px));
  background-position: top left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* No copy of the footer photo lives inside main: .home-faq's rounded
   corners always fall within the fixed footer's own box (its bottom never
   rises more than footerHeight - 300px above the viewport bottom, and the
   corners are at most 180px tall), so the transparent corners show
   .site-footer__bg itself — one image, one crop, no seam. */

body.page-home main {
  padding-top: 0;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 72px;
  padding: 12px 40px;
}

/* Figma: node 204:42166 "Header" — drawn at 1920 with the same px-40 as
   1440, so no wider-screen padding override any more. */

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.brand__logo {
  height: 24px;
  width: 24px;
}

.brand__name {
  /* Figma 204:42166: the wordmark is Nunito Bold, not Fixel (layout.mjs
     loads it subset to these letters). */
  font-family: 'Nunito', var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.54px;
  color: var(--color-deep-berry);
  white-space: nowrap;
}

.desktop-nav {
  display: none;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.nav-link {
  padding: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.nav-link.is-active,
.nav-link:hover {
  opacity: 0.7;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 100px;
  background: var(--color-deep-berry);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

.header-cta--desktop {
  display: none;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
}

/* Below 360 the logo, "Get the app" and the burger don't all fit in one
   row — drop the wordmark, keep the icon. */
@media (max-width: 359px) {
  .brand__name {
    display: none;
  }
}

/* Figma 410:14734: on desktop the "Logo 3" instance is scaled to 220x33.6
   (x1.4 of the 24px icon / 18px wordmark component). */
@media (min-width: 1100px) {
  .brand {
    gap: 8px;
  }

  .brand__logo {
    width: 34px;
    height: 34px;
  }

  .brand__name {
    font-size: 25px;
    letter-spacing: -0.75px;
  }
}

/* Burger while closed, cross while open (initMenu toggles aria-expanded). */
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open,
.menu-toggle[aria-expanded="false"] .menu-toggle__icon--close {
  display: none !important;
}

/* Compact menu: a white sheet filling the screen under the header — big
   left-aligned links (Mobile/Subhead 1), and a full-width "Get the app"
   pinned to the bottom above a hairline (reference: ISO Meet menu). */
.mobile-nav {
  position: fixed;
  inset: 0;
  top: 72px;
  z-index: 39;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.mobile-nav.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mobile-nav__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 40px 16px;
  overflow-y: auto;
}

.mobile-nav .nav-link {
  padding: 12px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.24px;
  color: var(--color-text-primary);
}

.mobile-nav .nav-link:hover,
.mobile-nav .nav-link:focus-visible {
  opacity: 1;
  color: var(--color-berry);
}

.mobile-nav__footer {
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.07);
}

.mobile-nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 14px 24px;
  border-radius: 100px;
  background: var(--color-deep-berry);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav.is-open {
    transition: none;
  }
}
@media (min-width: 1100px) {
  .desktop-nav,
  .header-cta--desktop {
    display: flex;
  }
  .menu-toggle,
  .mobile-nav {
    display: none;
  }
}

/* --------------------------------------------------------------------- hero */
/* Figma: node 1:42093 "Hero Section", 1440 frame. Built desktop-only for
   now — mobile/tablet breakpoints land once those Figma sizes exist. */
.hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  /* Figma: flat corners at rest (node 27:67099) that round to 180px once
     scrolled to (node 1:42093) — not a static value. main.js's
     initHeroCornerScroll() drives this custom property from scroll
     position; the 180px here is only the reduced-motion/no-JS fallback. */
  --hero-corner-radius: 0px;
  border-bottom-left-radius: var(--hero-corner-radius);
  border-bottom-right-radius: var(--hero-corner-radius);
  /* Figma: node 231:14680 — a fixed 1440x1100 frame, not content-hugging —
     the photo keeps showing below the buttons until the frame's own edge,
     not just until the text block ends. */
  height: 1100px;
  padding: 160px 0 200px;
  color: var(--color-white);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .hero-section {
    --hero-corner-radius: 180px;
  }
}

/* Figma: node 135:11586, 1920 frame — same 1100px stage and 160px top
   padding as 1440; only the photo box and corner radius differ. */
@media (min-width: 1920px) {
  @media (prefers-reduced-motion: reduce) {
    .hero-section {
      --hero-corner-radius: 200px;
    }
  }
}

/* The photo sits in an exact Figma box per breakpoint (a bigger zoom than
   plain object-fit:cover against the section would pick), with a centered
   FILL inside it — Figma's identity image transform. The box's aspect
   matches the photo's own (2400x2016), so nothing is cropped inside it.
   Figma: 1440 node 259:18022 (-15.9/-110.7, 1521.8x1278.3). Media-query
   overrides are declared after this base rule so the cascade picks them. */
.hero-section__bg {
  position: absolute;
  top: -110.7px;
  left: -15.9px;
  width: 1521.8px;
  max-width: none;
  height: 1278.3px;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: -1;
}

/* Between the frames the photo box is interpolated (same calc pattern as
   the NARROW DESKTOP block), so it always spans the full width — a fixed
   Figma box would leave a white strip on the right of e.g. a 1688 screen.
   1440 -> 1920: Figma 135:11587 (-11/-241, 2070x1341). */
@media (min-width: 1441px) and (max-width: 1919px) {
  .hero-section__bg {
    top: calc(-110.7px - (100vw - 1440px) * 0.2715);
    left: calc(-15.9px + (100vw - 1440px) * 0.0102);
    width: calc(1521.8px + (100vw - 1440px) * 1.1421);
    height: calc(1278.3px + (100vw - 1440px) * 0.1306);
  }
}

/* 1920 -> 2560: Figma 256:16257 — the stage grows 1100 -> 1280 and the box
   moves to 0/-371.4, 2571x1656.7 (centered FILL). */
@media (min-width: 1920px) and (max-width: 2559px) {
  .hero-section {
    height: calc(1100px + (100vw - 1920px) * 0.2813);
  }

  .hero-section__bg {
    top: calc(-241px - (100vw - 1920px) * 0.2038);
    left: calc(-11px + (100vw - 1920px) * 0.0172);
    width: calc(2070px + (100vw - 1920px) * 0.7828);
    height: calc(1341px + (100vw - 1920px) * 0.4933);
  }
}

/* 2560 and wider: the 2560 box, grown with the viewport so it never stops
   short of the right edge. */
@media (min-width: 2560px) {
  .hero-section {
    height: 1280px;
  }

  .hero-section__bg {
    top: -371.4px;
    left: 0;
    width: max(2571px, 100.43vw);
    height: max(1656.7px, 64.71vw);
  }
}

.hero-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1440px;
  padding: 0 80px;
}

.hero-section__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.hero-section__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-soft-pink);
}

.hero-section__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 90px;
  line-height: 1;
  letter-spacing: -3.6px;
}

.hero-section__title-line {
  width: 100%;
}

/* Figma: node 23:18099 / motion node 23:12114 — a relay of words, each sliding up through this
   clipped slot and handing off to the next. Figma has four words on one 80s timeline (ten passes of
   an 8s relay); the CMS may hold 2 to 8 (`hero.rotatingWords`), so the relay is written once for
   any count: every word gets a 2s turn — 0.4s sliding in (ease-in-out), 1.6s still, then 0.4s
   sliding out while the next one slides in — and the loop is 2s per word. The slot carries the
   number of words (--n, and the class picking its keyframes below), each word its place (--i),
   which starts it 2s after the one before. With four words this is Figma's timeline exactly.

   All words share one grid cell, so the slot hugs the WIDEST word (e.g.
   "perimenopause") instead of the first title line — absolutely
   positioned words contributed no width, so long words overflowed the
   slot, fell back to left-aligned and got cut off. Clipping is vertical
   only (clip-path with a huge horizontal inset) — that's all the relay
   needs, words slide up/down through the slot. */
.hero-section__cycling {
  display: grid;
  justify-items: center;
  height: 102px;
  min-width: 100%;
  clip-path: inset(0 -100vw);
}

.hero-section__cycling-word {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 90px;
  line-height: 1;
  letter-spacing: -3.6px;
  text-align: center;
  white-space: nowrap;
  /* Hidden below the slot until its turn; --n and --i are set by the page (home-sections.mjs). */
  translate: 0 150px;
  animation-duration: calc(var(--n) * 2s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i) * 2s - var(--n) * 2s);
}

/* The design's four colours, in turn. */
.hero-section__cycling-word:nth-child(4n + 1) { color: #ffc8ea; }
.hero-section__cycling-word:nth-child(4n + 2) { color: #dcc8ff; }
.hero-section__cycling-word:nth-child(4n + 3) { color: #ecffc8; }
.hero-section__cycling-word:nth-child(4n + 4) { color: #baf8ff; }

/* One set of keyframes per number of words (cms-content.mjs allows 2 to 8): a word's turn is the first
   2s of the loop — still until 1.6s, out by 2s, back in during the loop's last 0.4s. */
.hero-section__cycling--2 .hero-section__cycling-word { animation-name: hero-cycle-2; }
.hero-section__cycling--3 .hero-section__cycling-word { animation-name: hero-cycle-3; }
.hero-section__cycling--4 .hero-section__cycling-word { animation-name: hero-cycle-4; }
.hero-section__cycling--5 .hero-section__cycling-word { animation-name: hero-cycle-5; }
.hero-section__cycling--6 .hero-section__cycling-word { animation-name: hero-cycle-6; }
.hero-section__cycling--7 .hero-section__cycling-word { animation-name: hero-cycle-7; }
.hero-section__cycling--8 .hero-section__cycling-word { animation-name: hero-cycle-8; }

@keyframes hero-cycle-2 {
  0% { translate: 0px 0px; }
  40% { animation-timing-function: ease-in-out; translate: 0px 0px; }
  50% { animation-timing-function: step-end; translate: 0px -150px; }
  90% { animation-timing-function: ease-in-out; translate: 0px 150px; }
  100% { translate: 0px 0px; }
}

@keyframes hero-cycle-3 {
  0% { translate: 0px 0px; }
  26.6667% { animation-timing-function: ease-in-out; translate: 0px 0px; }
  33.3333% { animation-timing-function: step-end; translate: 0px -150px; }
  93.3333% { animation-timing-function: ease-in-out; translate: 0px 150px; }
  100% { translate: 0px 0px; }
}

@keyframes hero-cycle-4 {
  0% { translate: 0px 0px; }
  20% { animation-timing-function: ease-in-out; translate: 0px 0px; }
  25% { animation-timing-function: step-end; translate: 0px -150px; }
  95% { animation-timing-function: ease-in-out; translate: 0px 150px; }
  100% { translate: 0px 0px; }
}

@keyframes hero-cycle-5 {
  0% { translate: 0px 0px; }
  16% { animation-timing-function: ease-in-out; translate: 0px 0px; }
  20% { animation-timing-function: step-end; translate: 0px -150px; }
  96% { animation-timing-function: ease-in-out; translate: 0px 150px; }
  100% { translate: 0px 0px; }
}

@keyframes hero-cycle-6 {
  0% { translate: 0px 0px; }
  13.3333% { animation-timing-function: ease-in-out; translate: 0px 0px; }
  16.6667% { animation-timing-function: step-end; translate: 0px -150px; }
  96.6667% { animation-timing-function: ease-in-out; translate: 0px 150px; }
  100% { translate: 0px 0px; }
}

@keyframes hero-cycle-7 {
  0% { translate: 0px 0px; }
  11.4286% { animation-timing-function: ease-in-out; translate: 0px 0px; }
  14.2857% { animation-timing-function: step-end; translate: 0px -150px; }
  97.1429% { animation-timing-function: ease-in-out; translate: 0px 150px; }
  100% { translate: 0px 0px; }
}

@keyframes hero-cycle-8 {
  0% { translate: 0px 0px; }
  10% { animation-timing-function: ease-in-out; translate: 0px 0px; }
  12.5% { animation-timing-function: step-end; translate: 0px -150px; }
  97.5% { animation-timing-function: ease-in-out; translate: 0px 150px; }
  100% { translate: 0px 0px; }
}

@media (prefers-reduced-motion: reduce) {
  /* As specific as the per-count rules above, and after them: no animation-name survives. */
  .hero-section__cycling .hero-section__cycling-word {
    animation: none;
  }
  .hero-section__cycling-word:first-child {
    translate: 0 0;
  }
}

.hero-section__buttons {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.hero-section__buttons .store-badges {
  gap: 16px;
  margin-top: 0;
}

/* On the hero photo the badges keep the design's look (Figma: a 180x52 white outline, no fill), drawn
   with live text and vector logos instead of the old pictures of the artwork, Google Play first as
   in the design (renderStoreButtons('google')). The kickers are cased as the stores' own badges: "Download on the", "GET IT ON". */
.hero-section__buttons .store-badge {
  gap: 10px;
  min-width: 180px;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--color-white);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.hero-section__buttons .store-badge:hover {
  border-color: var(--color-white);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.hero-section__buttons .store-badge__logo {
  width: 28px;
  height: 28px;
}

.hero-section__buttons .store-badge__text {
  gap: 0;
}

.hero-section__buttons .store-badge__kicker {
  color: var(--color-white);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: none;
}

.hero-section__buttons .store-badge--google .store-badge__kicker {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-section__buttons .store-badge__title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------- stats section */
/* Figma: node 1:42332 "Statistics Section". Numbers count up on scroll-into-
   view — see data-count-* attrs here and initStatsCounters() in main.js. */
.stats-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 100px;
  padding: 60px 80px;
  background: var(--color-bg);
}

.stats-section__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stats-section__item--wide {
  width: 166px;
}

.stats-section__number-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin: 0;
}

.stats-section__number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 60px;
  line-height: 1;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.stats-section__number-icon {
  width: 29px;
  height: 37.217px;
}

.stats-section__label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
}

.stats-section__label-icon {
  width: 24px;
  height: 24px;
}

.stats-section__label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* ----------------------------------------------------------- description pin */
/* Figma: node 1:42365 "Description Section". initDescriptionPin() in main.js
   gives this wrapper an explicit scroll height (100vh + a share per word) so
   .description-pin__sticky stays pinned for exactly as long as it takes to
   darken every word, then releases to normal scroll. */
.description-pin {
  position: relative;
}

.description-pin__sticky {
  position: sticky;
  top: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 100px 240px;
  text-align: center;
  background: var(--color-bg);
}

.description-pin__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.description-pin__text {
  margin: 0;
  max-width: 1030px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.4;
  letter-spacing: -0.44px;
}

.description-pin__word {
  color: rgba(0, 0, 0, var(--word-opacity, 0.3));
}

@media (prefers-reduced-motion: reduce) {
  .description-pin {
    height: auto !important;
  }

  .description-pin__sticky {
    position: static;
    min-height: 0;
  }

  .description-pin__word {
    --word-opacity: 1;
  }
}

/* --------------------------------------------------------- features bento */
/* Figma: node 1:42368 "Features Section". Six bespoke cards — some are
   recreated as real markup (fertility graph), some use a flattened
   screenshot of a decorative/non-interactive mockup (phone screen,
   hormones chart, symptom-tag cloud) per figma-design-to-code guidance. */
.features-bento {
  padding-top: 100px;
  background: var(--color-bg);
}

.features-bento__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 100px 100px;
  text-align: center;
}

.features-bento__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.features-bento__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 74px;
  line-height: 1.1;
  letter-spacing: -2.96px;
  color: var(--color-text-primary);
}

.features-bento__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* 96px gutters at 1440 (1248 of content); the content never grows past
     Figma's 1280px (1920/2560 frames) and is centered beyond that, so on a
     1440-1919 screen the cards don't stretch edge to edge. */
  padding: 0 max(96px, calc((100% - 1280px) / 2));
}

.features-bento__row {
  display: flex;
  gap: 24px;
}

/* Two-up rows fill the grid's width: at 1440 the Figma widths add up to
   exactly 1248; once the grid is 1280 wide the extra 32px goes to the
   cards that Figma's 1920 frame widens (fertility/pregnancy 612 -> 628,
   symptoms 596 -> 628; perimenopause stays 628). */
.bento-card--fertility,
.bento-card--pregnancy,
.bento-card--symptoms {
  flex-grow: 1;
}

.bento-card {
  position: relative;
  display: flex;
  border-radius: 40px;
  overflow: hidden;
}

.bento-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.bento-card__text,
.bento-card__copy,
.bento-card__partner-logos,
.bento-card__media {
  position: relative;
  z-index: 1;
}

.bento-card__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 60px 60px 40px;
  text-align: center;
}

.bento-card__text--center {
  /* 800px content width + this element's own 60px/60px horizontal padding
     (border-box) = 920px outer width. */
  width: 920px;
  /* .bento-card--partner already puts 40px of flex gap between the partner
     logos and this element — .bento-card__text's own 60px padding-top
     would stack on top of that (100px total) instead of the 40px Figma
     actually specs between the icons and the title. */
  padding-top: 0;
  align-items: stretch;
  text-align: center;
}

.bento-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -0.88px;
}

.bento-card__body {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
}

.bento-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  padding: 14px 24px;
  border-radius: 100px;
  background: var(--color-deep-berry);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.bento-card__media {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.bento-card__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card 1 — Track your cycle */
.bento-card--track-cycle {
  align-items: center;
  width: 100%;
  height: 600px;
  background: var(--color-bg-grey);
}

.bento-card--track-cycle .bento-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  width: 601px;
  flex-shrink: 0;
  padding: 60px 100px;
  color: var(--color-text-primary);
  text-align: left;
}

.bento-card--track-cycle .bento-card__text {
  padding: 0;
  text-align: left;
}

.bento-card--track-cycle .bento-card__media {
  height: 602px;
}

/* Figma: node 212:49080 "Image Container", 679x599 right of the copy.
   Positions below are Figma's, relative to this container. The card is
   1248 wide at 1440 (Figma's frame is 1280), so the container's right 32px
   are clipped by the card — the phone and hand end at x=502, well inside. */
.bento-card--track-cycle .bento-card__media--phone {
  position: relative;
  flex: 0 0 679px;
  align-self: flex-start;
  height: 599px;
  margin-top: 0.5px;
}

.track-phone__screen {
  position: absolute;
  top: 44.42px;
  left: 214.59px;
  width: 224px;
  height: 494px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-white);
}

/* Starts 15px down inside the screen (under the status bar). Moved by
   track-phone-scroll once the card is in view — see initTrackCycleScroll. */
.track-phone__feed {
  position: absolute;
  top: 15px;
  left: 0;
  width: 223.56px;
  height: auto;
  max-width: none;
}

.track-phone__status {
  position: absolute;
  top: 0;
  left: 0;
  width: 224px;
  height: auto;
}

/* Includes the raised "+" button and its shadow, so it starts 23.75px
   above the nav bar's own top edge (Figma render bounds). */
.track-phone__nav {
  position: absolute;
  top: 435.71px;
  left: 0;
  width: 224px;
  height: auto;
}

/* Hand + phone bezel; the phone screen is transparent, so the app screen
   underneath shows through. Scoped under the media block so it beats the
   generic `.bento-card__media > img` (100% x 100%, object-fit) rule. */
.bento-card__media--phone > .track-phone__hand {
  position: absolute;
  top: 32.04px;
  left: 11.14px;
  width: 491.15px;
  height: auto;
  max-width: none;
  pointer-events: none;
}

/* Figma motion on 212:49089: wait 0.5s, scroll up 420px (1.67s), hold
   0.5s, settle back to -180px (1.58s). Looped on request so it reads like
   a screen recording: after the Figma part it holds 1s at -180, eases
   back to the top (1.2s) and starts over — 6.45s per pass. */
.bento-card__media--phone.is-playing .track-phone__feed {
  animation: track-phone-scroll 6.45s linear infinite;
}

@keyframes track-phone-scroll {
  0% { translate: 0 0; }
  7.752% { translate: 0 0; animation-timing-function: ease-in-out; }
  33.592% { translate: 0 -420px; }
  41.344% { translate: 0 -420px; animation-timing-function: ease-in-out; }
  65.891% { translate: 0 -180px; }
  81.395% { translate: 0 -180px; animation-timing-function: ease-in-out; }
  100% { translate: 0 0; }
}

/* Reduced motion: skip the scroll, jump straight to the resting frame. */
@media (prefers-reduced-motion: reduce) {
  .bento-card__media--phone.is-playing .track-phone__feed {
    animation: none;
    translate: 0 -180px;
  }
}

/* Card 2 — Understand your fertility */
.bento-card--fertility {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 612px;
  height: 700px;
  background: var(--color-bg-blush);
  color: var(--color-plum);
}

.bento-card__media--fertility-graph {
  position: relative;
  width: 100%;
  height: 398px;
  flex: none;
}

.fertility-graph__curve,
.fertility-graph__today-line,
.fertility-graph__dot,
.fertility-graph__dot-today {
  position: absolute;
}

.fertility-graph__dates {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--color-plum);
}

.fertility-graph__dates span {
  position: absolute;
  top: 339px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.fertility-graph__pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--color-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--color-plum);
  white-space: nowrap;
}

/* Figma motion on 215:9571: the pill pops out of the ovulation line once the
   card is scrolled into view (initFertilityPill, main.js). Figma's
   translate/scale pairs all share one fixed point, 241px x 64px from the
   pill's top-left — the bottom edge, right where the vertical line meets
   it — so it's a plain scale around that origin. 1.3s total: hidden for
   0.25s, then overshoot 1.12 -> 0.96 -> 1.025 -> 1. JS only adds
   .is-pending when it's running, so without JS the pill just shows. */
.bento-card__media--fertility-graph.is-pending .fertility-graph__pill {
  opacity: 0;
  scale: 0.01;
}

.bento-card__media--fertility-graph.is-playing .fertility-graph__pill {
  transform-origin: 241px 64px;
  animation: fertility-pill-pop 1.3s linear both;
}

@keyframes fertility-pill-pop {
  0% { opacity: 0; scale: 0.01; }
  19.23% { opacity: 0; scale: 0.01; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  26.15% { opacity: 1; }
  50% { scale: 1.12; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  67.69% { scale: 0.96; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  82.31% { scale: 1.025; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  100% { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bento-card__media--fertility-graph.is-pending .fertility-graph__pill,
  .bento-card__media--fertility-graph.is-playing .fertility-graph__pill {
    opacity: 1;
    scale: 1;
    animation: none;
  }
}

.fertility-graph__pill-icon {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.fertility-graph__pill-icon-ring {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 30px;
  height: 30px;
}

.fertility-graph__pill-icon-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  animation: bento-pulse-dot 1.25s ease-in-out infinite;
}

@keyframes bento-pulse-dot {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.28;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fertility-graph__pill-icon-pulse {
    animation: none;
  }
}

/* Card 3 — Follow your pregnancy */
.bento-card--pregnancy {
  flex-direction: column;
  align-items: flex-start;
  width: 612px;
  height: 700px;
  background: var(--color-bg-grey);
  color: var(--color-white);
}

/* Card 4 — Navigate perimenopause */
.bento-card--perimenopause {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  width: 628px;
  height: 700px;
  background: var(--color-deep-berry);
  color: var(--color-white);
}

.bento-card--perimenopause .bento-card__text {
  padding: 60px;
}

.bento-card--perimenopause .bento-card__media {
  width: 100%;
}

/* Figma: node 1:42555 "Image Container" — a 723.845px-wide chart bleeding
   past the 628px card (left:48, top:-24), clipped by the card's own
   overflow. Wave art and baseline are the real exported assets; the "Today"
   marker is recreated as plain CSS (dashed line + pill) rather than the
   rotated/container-query SVG trick Figma used for the same visual. */
.bento-card__media--hormones {
  position: relative;
  overflow: hidden;
}

.hormones-chart {
  position: absolute;
  left: 48px;
  top: -24px;
  width: 723.845px;
  height: 252px;
}

.hormones-chart__wave,
.hormones-chart__baseline {
  position: absolute;
  display: block;
}

.hormones-chart__today-line {
  position: absolute;
  left: 104px;
  top: 38px;
  height: 205px;
  border-left: 3px dashed #94336f;
}

.hormones-chart__today-pill {
  position: absolute;
  left: 56px;
  top: 35px;
  width: 97px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 62.942px;
  background: #94336f;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.24px;
  color: var(--color-white);
  white-space: nowrap;
}

/* Card 5 — Spot patterns in your symptoms */
.bento-card--symptoms {
  flex-direction: column;
  align-items: center;
  width: 596px;
  height: 700px;
  background: var(--color-bg-soft-lilac);
  color: var(--color-plum);
}

.bento-card__media--symptoms {
  /* Figma: "Image Container" (366px, flush to the card's own bottom edge)
     with "Tags Container" sitting 81px down from ITS top — not flush, and
     not the text block's own padding-bottom. flex:1 fills the remaining
     366px after the 334px text block above, robust to small text-height
     drift instead of hardcoding 366. */
  flex: 1;
  width: 100%;
  padding-top: 81px;
}

/* Figma: node 1:42574 tag rows. Each row fast-slides right-to-left and
   stops — not a loop. Start/finish positions are node 35:68747 (start) /
   36:70200 (finish, revised)'s own `left` values; initSymptomMarquee
   (main.js) sets --finish-delta once the card is fully in view, and the
   CSS transition below does the rest. Different per-row distance
   (560/500/691px) over the same duration is what gives each row its own
   speed. */
.symptoms-marquee {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  overflow: hidden;
}

.symptom-marquee {
  position: relative;
  height: 56px;
  width: 100%;
  overflow: hidden;
}

.symptom-marquee__track {
  position: absolute;
  top: 0;
  display: flex;
  gap: 12px;
  width: max-content;
  transform: translateX(0);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.symptom-marquee__track.is-playing {
  transform: translateX(var(--finish-delta));
}

.symptom-tag {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 4px 16px 4px 4px;
  border-radius: 80px;
  background: var(--color-white);
  white-space: nowrap;
}

.symptom-tag__icon {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}

.symptom-tag__icon-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.symptom-tag__icon-layer {
  position: absolute;
}

.symptom-tag__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.24px;
  color: var(--color-plum);
}

@media (prefers-reduced-motion: reduce) {
  .symptom-marquee__track {
    transition: none;
  }
}

/* Card 6 — Share with your partner */
.bento-card--partner {
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  height: 668px;
  padding: 100px 60px 60px;
  background: #185f8c;
  color: var(--color-white);
}

.bento-card__partner-logos {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bento-card__partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 16.8px;
  overflow: hidden;
}

.bento-card__partner-logo-app {
  display: block;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
}

.bento-card__partner-logo--partner {
  background: rgba(58, 41, 70, 0.12);
  border: 1.079px solid rgba(58, 41, 70, 0.04);
  border-radius: 19.564px;
}

/* Figma 1920 (34:67228) and 2560 (256:16306): the grid is 1280 wide,
   centered — handled by .features-bento__grid's max() padding and the
   flex-grow above (fertility/pregnancy/symptoms 628, perimenopause 628). */

/* ---------------------------------------------------------------- CTA buttons */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}

.cta--primary {
  background: var(--color-primary);
  color: #fff;
}

.cta--primary:hover {
  background: var(--color-primary-dark);
}

.cta--ghost {
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

/* --------------------------------------------------------- who is it for */
/* Figma: node 1:42685 "Who is it for Section" — photo pills wrapping into
   centered rows (3/3/2 at 1440), not the old icon/title/body card grid. */
.who-is-it-for {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 200px 100px;
  background: var(--color-bg);
}

.who-is-it-for__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 823px;
  text-align: center;
}

.who-is-it-for__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.who-is-it-for__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 74px;
  line-height: 1.1;
  letter-spacing: -2.96px;
  color: var(--color-text-primary);
}

.who-is-it-for__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

/* Figma: node 102:50213, 1920 frame — "Tags Container" is a fixed 1280px
   box (not just this section's usual 100px side padding, which would
   leave 1720px here), and that width is what actually drives WHERE
   flex-wrap breaks each row — a wider box lets more tags share a row
   than Figma's 3/3/2 groups, not just a wider gap around the same rows. */
@media (min-width: 1920px) {
  .who-is-it-for__tags {
    max-width: 1280px;
  }
}
.who-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 20px 4px 4px;
  border-radius: 81px;
  background: var(--color-bg-grey);
}

.who-tag__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.who-tag__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.24px;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* ------------------------------------------------------------ proof section */
/* Figma: node 1:42778 "Proof Section". Avatar stack fans out on scroll-into-
   full-view (initProofAvatars, main.js); reviews are a horizontal snap
   scroller with dot pagination reflecting scroll progress. */
.proof-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  padding: 200px 0;
  background: var(--color-bg-blush);
  overflow: hidden;
  /* Figma: node 47:76165 — bottom corners rounded to 180px once the section
     has scrolled through, same scroll-driven mechanism as .hero-section
     (initProofSectionCornerScroll, main.js); 0 here is only the
     reduced-motion/no-JS fallback. */
  --proof-corner-radius: 0px;
  border-bottom-left-radius: var(--proof-corner-radius);
  border-bottom-right-radius: var(--proof-corner-radius);
}

@media (prefers-reduced-motion: reduce) {
  .proof-section {
    --proof-corner-radius: 180px;
  }
}

.proof-section__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0 100px;
}

.proof-section__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.proof-section__heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.proof-section__heading p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 74px;
  line-height: 1.1;
  letter-spacing: -2.96px;
  color: var(--color-text-primary);
  text-align: center;
}

.proof-section__stat-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

.proof-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  isolation: isolate;
  overflow: hidden;
  border-radius: 77px;
}

.proof-avatar {
  position: relative;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 100px;
  border: 4px solid var(--color-bg-blush);
  overflow: hidden;
  margin-right: -68px;
  transition: margin-right 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.proof-avatars.is-playing .proof-avatar {
  margin-right: -20px;
}

.proof-avatar--last {
  margin-right: 0 !important;
}

.proof-avatar__img {
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  max-width: none;
  height: calc(100% + 8px);
  object-fit: cover;
}

.proof-avatar__img--flush {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .proof-avatar {
    margin-right: -20px;
    transition: none;
  }
}

.proof-section__reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.proof-reviews-track {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  padding: 0 100px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 100px;
  scroll-padding-right: 100px;
  scrollbar-width: none;
  cursor: grab;
}

.proof-reviews-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* Figma: node 102:50253, 1920 frame — the scrollable viewport stays a fixed
   1440px window (same as the 1440 build, just centered instead of flush),
   not a window that keeps growing with the section — so this is 240px
   padding (centering 1440 in 1920), not a proportional bump from 100px. */
@media (min-width: 1920px) {
  .proof-reviews-track {
    padding: 0 240px;
    scroll-padding-left: 240px;
    scroll-padding-right: 240px;
  }
}

.proof-reviews-track::-webkit-scrollbar {
  display: none;
}

.review-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  flex-shrink: 0;
  width: 360px;
  padding: 24px;
  border-radius: 24px;
  background: var(--color-white);
  border: 1px solid rgba(75, 4, 48, 0.03);
  scroll-snap-align: start;
}

.review-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-card__stars {
  display: flex;
  gap: 3px;
  align-items: center;
}

.review-card__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-card__avatar-img,
.review-card__avatar-initial {
  width: 32px;
  height: 32px;
  border-radius: 48px;
  flex-shrink: 0;
}

.review-card__avatar-img {
  object-fit: cover;
}

.review-card__avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-white);
}

.review-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.proof-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.proof-pagination__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: var(--color-berry);
  opacity: 0.2;
  cursor: pointer;
  transition: width 0.25s ease, opacity 0.25s ease;
}

.proof-pagination__dot.is-active {
  width: 24px;
  opacity: 1;
}

/* ------------------------------------------------------------ privacy section */
/* Figma: node 1:42961 "Privacy Section". The lock graphic is a looping video
   fill in Figma (node 1:42963) — rendered here as a static poster image
   until a real exported video file replaces it. */
.privacy-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  /* Figma only sets top padding here (pt-200) — the frame hugs its own
     content with no bottom padding, so stacking this against the next
     section's own pt-200 gives the real 200px gap, not 400px. */
  padding: 200px 100px 0;
  background: var(--color-bg);
}

.privacy-section__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.privacy-section__video {
  width: 234px;
  height: 234px;
}

.privacy-section__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* decorative — never a tap target */
}

/* iOS draws a big Play button over autoplay video it won't start (Low Power
   Mode). Hide it — the poster shows instead, and initAutoplayVideos starts
   the loop on the first touch anywhere on the page. */
.privacy-section__video video::-webkit-media-controls-start-playback-button,
.privacy-section__video video::-webkit-media-controls,
.privacy-section__video video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

.privacy-section__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 800px;
}

.privacy-section__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.privacy-section__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 74px;
  line-height: 1.1;
  letter-spacing: -2.96px;
  color: var(--color-text-primary);
  text-align: center;
}

.privacy-section__lead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-text-primary);
  text-align: center;
}

.privacy-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 960px;
}

.privacy-cards__row {
  display: flex;
  gap: 20px;
}

.privacy-card {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  gap: 16px;
  padding: 24px;
  border-radius: 24px;
  background: var(--color-bg-grey);
}

/* Figma: node 102:50437, 1920 frame — cards stop flex-filling the 960px
   row and become a fixed 284px each instead (row hugs its own content,
   892px, rather than stretching edge to edge). Centered either way via
   .privacy-section's align-items:center, so only these two rules change. */
@media (min-width: 1920px) {
  .privacy-cards {
    width: auto;
  }

  .privacy-card {
    flex: none;
    width: 284px;
  }
}

.privacy-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 44px;
}

.privacy-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.24px;
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------ pricing section */
/* Figma: node 1:43025 "Pricing Section". */
.pricing-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  /* Figma only sets top padding here too (pt-200, hug-contents, same as
     .privacy-section above) — the next section's own pt-200 is what
     supplies the visible gap, not a bottom padding on this one. */
  padding: 200px 0 0;
  background: var(--color-bg);
}

.pricing-section__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0 100px;
}

.pricing-section__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.pricing-section__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 74px;
  line-height: 1.1;
  letter-spacing: -2.96px;
  color: var(--color-text-primary);
  text-align: center;
}

.pricing-cards {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  /* A 960px pair of cards, centered, at every desktop width (1100: inset
     70px; 1440: 240px; 1920: 480px; 2560: 800px — all the same 960). */
  padding: 0 max(48px, calc((100% - 960px) / 2));
}

/* Figma: node 102:50501, 1920 frame — padding and card gap both grow here
   (240→480, 20→24), not just the usual 240px "center a 1440 block"
   pattern — the two cards end up ~468px each either way (960px content
   area at both breakpoints), so this is a deliberate pair of new numbers,
   not a proportional scale. */
@media (min-width: 1920px) {
  .pricing-cards {
    gap: 24px;
  }
}


.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1 0 0;
  min-width: 0;
  padding: 32px 24px 24px;
}

.pricing-card--free {
  background: var(--color-bg-grey);
  border-radius: 24px;
}

.pricing-card--premium {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: #79004b url('/static/images/home/pricing/premium-bg.jpg') center / cover no-repeat;
}

.pricing-card--premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 0;
}

.pricing-card--premium > * {
  position: relative;
  z-index: 1;
}

.pricing-card__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pricing-card__kicker {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.pricing-card--premium .pricing-card__kicker {
  color: #ffd2ee;
}

.pricing-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.4;
  letter-spacing: -0.44px;
  color: var(--color-text-primary);
}

.pricing-card--premium .pricing-card__name {
  color: var(--color-white);
}

.pricing-card__description {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.pricing-card--premium .pricing-card__description {
  color: var(--color-white);
}

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 0 0;
}

.pricing-card__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.pricing-card--premium .pricing-card__feature {
  color: var(--color-white);
}

.pricing-card__feature img {
  flex-shrink: 0;
}

.pricing-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 100px;
  background: var(--color-deep-berry);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-white);
  text-decoration: none;
}

.pricing-card--premium .pricing-card__cta {
  background: var(--color-bg-blush);
  color: var(--color-deep-berry);
}

/* ------------------------------------------------------------------ store badges */
/* Luli's store badges (sites/luli, .store-badge): live text and vector logos on a dark tile,
   sharp at any size. Solid and with a softer shadow than Luli's, whose page is dark: this is how
   /get-app/ shows them, on white. The hero restyles them as the design's white outline (above). */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  min-width: 200px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: #0d0b12;
  box-shadow: 0 12px 32px rgba(5, 3, 12, 0.28);
  color: var(--color-white);
  text-align: left;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.store-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 210, 238, 0.4);
  box-shadow: 0 16px 40px rgba(5, 3, 12, 0.36);
}

.store-badge__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
}

.store-badge__logo svg {
  width: 100%;
  height: 100%;
}

.store-badge__text {
  display: grid;
  gap: 2px;
}

.store-badge__kicker {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.store-badge__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
}

@media (prefers-reduced-motion: reduce) {
  .store-badge {
    transition: none;
  }
  .store-badge:hover {
    transform: none;
  }
}

/* ------------------------------------------------------------------------ FAQ */
.faq-container {
  max-width: 760px;
  margin: 0 auto;
}

.faq-group {
  margin-bottom: 24px;
}

.faq-group__title {
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 18px;
}

.faq-item summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  list-style: none;
  font-weight: 600;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item__q {
  margin: 0;
  font-size: 1rem;
}

.faq-item__chev {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.faq-item[open]:not(.is-closing) .faq-item__chev {
  transform: rotate(-135deg);
}

.faq-item__body {
  padding-bottom: 14px;
  color: var(--color-text-muted);
}

.faq-help {
  text-align: center;
  margin-top: 32px;
  padding: 28px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

/* ------------------------------------------------------------------ home faq */
/* Figma: node 48:76350 "Frequently asked questions". Reuses the shared
   .faq-item/.faq-item__body <details> elements (same data-faq-accordion
   single-open JS as /faq/) but overrides their look entirely here, scoped
   under .home-faq-accordion so the real /faq/ page is untouched. */
.home-faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200px 0;
  background: var(--color-bg);
  overflow: hidden;
  /* Last section before the footer — same scroll-driven bottom-corner
     rounding as .hero-section/.proof-section (initHomeFaqCornerScroll,
     main.js); 0 here is only the reduced-motion/no-JS fallback. */
  --home-faq-corner-radius: 0px;
  border-bottom-left-radius: var(--home-faq-corner-radius);
  border-bottom-right-radius: var(--home-faq-corner-radius);
}

@media (prefers-reduced-motion: reduce) {
  .home-faq {
    --home-faq-corner-radius: 180px;
  }
}

.home-faq__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0 100px 100px;
}

.home-faq__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.home-faq__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 74px;
  line-height: 1.1;
  letter-spacing: -2.96px;
  color: var(--color-text-primary);
  text-align: center;
}

.home-faq-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Figma: node 104:51595 — this stays a fixed 960px column at every
     width (not viewport-proportional padding), centered by .home-faq's
     own align-items:center. */
  max-width: 960px;
}

.home-faq-accordion .faq-item {
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 0;
}

/* No focus box after a mouse click (the black frame around a just-clicked
   question); keyboard focus still gets the browser's ring via
   :focus-visible. */
.faq-item summary:focus:not(:focus-visible) {
  outline: none;
}

.home-faq-accordion .home-faq-row__summary {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px 20px;
}

.home-faq-row__q {
  flex: 1 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.home-faq-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  background: var(--color-bg-blush);
  transition: transform 0.2s ease;
}

.home-faq-row[open]:not(.is-closing) .home-faq-row__icon {
  transform: rotate(45deg);
}

.home-faq-accordion .home-faq-row__body {
  margin: 0;
  padding: 0 48px 32px 20px;
  color: var(--color-text-primary);
}

.home-faq-accordion .home-faq-row__body p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
}

.home-faq-accordion .home-faq-row__body p + p {
  margin-top: 1em;
}

/* --------------------------------------------------------------------- blog */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.blog-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.blog-card__media,
.blog-card__media--placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-tinted);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 12px;
}

/* The 404 page's cards show the article's cover, cropped to the box. */
.blog-card__media:has(img) {
  padding: 0;
  overflow: hidden;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__body {
  padding: 18px;
}

.blog-card__meta {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.blog-card__more {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.88rem;
}

.blog-index-intro {
  max-width: 640px;
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------- article */
.content-hero {
  padding-bottom: 24px;
}

.breadcrumbs {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.breadcrumbs a {
  color: var(--color-text-muted);
}

.breadcrumbs__sep {
  margin: 0 6px;
}

.article__container {
  max-width: 760px;
  margin: 0 auto;
}

.article__body h2 {
  margin-top: 1.6em;
}

.article__body ul,
.article__body ol {
  padding-left: 1.2em;
}

.article__table-wrap {
  overflow-x: auto;
  margin: 1.5em 0;
}

.article__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.article__table th,
.article__table td {
  border: 1px solid var(--color-border);
  padding: 10px 12px;
  text-align: left;
}

.article__table thead th {
  background: var(--color-surface-tinted);
}

.article-toc {
  margin: 20px 0;
  padding: 16px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.article-toc__title {
  font-weight: 700;
  margin-bottom: 8px;
}

.article-toc ol {
  margin: 0;
  padding-left: 1.2em;
}

.article__hero--placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-tinted);
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  margin: 20px 0;
}

.article__cta {
  margin-top: 32px;
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--color-surface-tinted);
  text-align: center;
}

.article__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.share-btn-wrap {
  position: relative;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  font-size: 0.85rem;
}

.share-sheet {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 30px -18px rgba(36, 26, 34, 0.4);
  display: flex;
  flex-direction: column;
  min-width: 160px;
  z-index: 5;
}

.share-sheet__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: none;
  background: none;
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.85rem;
  cursor: pointer;
}

.share-sheet__item:hover {
  background: var(--color-surface-tinted);
}

.disclaimer-updated {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------- compare */
.section--article-body {
  padding-top: 24px;
}

/* --------------------------------------------------------------------- footer */
/* Figma: node 1:37419 "Footer Container". Physically sits fixed beneath the
   whole page — body's own padding-bottom (set above) reserves exactly this
   element's rendered height (initFooterReveal, main.js) so the page's real
   content scrolls fully over it (z-index) before this becomes visible, like
   https://www.opendue.com/. */
.site-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  /* Its own compositor layer: the page scrolls over a painted footer instead of repainting the
     blurred photo under the moving rounded corners on every frame. */
  will-change: transform;
  display: flex;
  flex-direction: column;
  color: var(--color-white);
}

/* Figma: node 61:2121 "image 3120" — a live blur (not a pre-flattened
   export), so object-fit:cover always crops against this element's REAL
   rendered size. A flattened/pre-cropped export only looks right at the
   exact aspect ratio it was flattened at — ours differs (the footer is
   wider/shorter than Figma's own reference frame), so it cropped wrong. */
.site-footer__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* The ONLY copy of the footer photo — also what .home-faq's transparent
   rounded corners reveal (see the note after body.page-home main). */
.site-footer__bg img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Scaled up past the box (clipped by .site-footer__bg's overflow:hidden)
     so the blur's soft, fading-to-nothing edge falls outside the visible
     area — flush at 100% it shows as a hard, barely-blurred ring right at
     the footer's own edges. */
  transform: scale(1.2);
  filter: blur(71.25px);
}

/* ---------------------------------------------------------------- app QR popup */
/* Every "Get the app" button ([data-app-qr-trigger]) opens this on desktop
   (initAppQrModal, main.js) — on an actual phone it redirects
   straight to the matching store instead. QR image itself: scripts/
   generate-app-qr.mjs, encoding /get-app/ (see get-app-sections.mjs). */
.app-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.app-qr-modal[hidden] {
  display: none;
}

.app-qr-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 16, 0.55);
}

/* Figma: node 150:8075 — 600 wide, white, radius 24, pt-32 pb-40, gap-16. */
.app-qr-modal__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 600px;
  max-width: 100%;
  padding: 32px 0 40px;
  border-radius: 24px;
  background: var(--color-white);
  text-align: center;
  color: var(--color-plum);
}

.app-qr-modal__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 0 24px;
}

.app-qr-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.8px;
}

.app-qr-modal__subtitle {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
}

.app-qr-modal__body {
  display: flex;
  flex-direction: column;
  width: 326px;
  max-width: 100%;
}

.app-qr-modal__qr {
  display: block;
  width: 326px;
  max-width: 100%;
  height: auto;
}

/* Figma: node 150:14177 — two joined pill halves (outer corners 100px,
   inner corners 4px), 4px apart, inset 16px from the QR's edges. */
.app-qr-modal__stores {
  display: flex;
  gap: 4px;
  padding: 0 16px;
}

.app-qr-modal__store {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 12px 24px;
  background: var(--color-plum);
}

.app-qr-modal__store--apple {
  border-radius: 100px 4px 4px 100px;
}

.app-qr-modal__store--google {
  border-radius: 4px 100px 100px 4px;
}

.app-qr-modal__store:hover {
  background: var(--color-deep-berry);
}

.app-qr-modal__store img {
  display: block;
  width: 25px;
  height: 25px;
}

/* --------------------------------------------------------------------- get-app */
/* Figma: no design for this one — it's a utility redirect page, not a
   marketing screen (see get-app-sections.mjs). Kept intentionally plain. */
.get-app-page {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-bg);
}

.get-app-page__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.get-app-page__logo {
  display: block;
  border-radius: 16px;
}

.get-app-page__status {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-text-muted);
}

.get-app-page__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.get-app-page__fallback[hidden] {
  display: none;
}

.get-app-page__fallback .store-badges {
  justify-content: center;
  margin-top: 0;
}

.get-app-page__fallback-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-text-primary);
}

.site-footer__bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

/* Figma: node 77:38464 "Footer" — Content sits 480px down from the
   footer's own top (not 180). 300px of that is meant to stay hidden behind
   .home-faq (see body's padding-bottom below), leaving only the last 180px
   — .home-faq's own max corner radius — visible as the gap its rounded
   corners reveal. */
.site-footer__content {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  padding: 480px 100px 0;
}

.site-footer__brand-qr {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Figma: "Logo Container" is 42px tall (logo itself 30, centered). */
  height: 42px;
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
}

.site-footer__qr {
  display: block;
  width: 239px;
  height: 239px;
  border-radius: 16px;
}

.site-footer__cols {
  display: flex;
  gap: 60px;
}

.site-footer__col-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.24px;
}

.site-footer__col-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.site-footer__col-links a {
  display: block;
  padding: 8px 0;
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Margin, not padding, on the sides: Figma's divider (Vector 799) is only
     as wide as the content column, not the full footer. */
  margin: 100px 100px 0;
  padding: 32px 0 120px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__bottom-right {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-footer__bottom-links {
  display: flex;
  gap: 24px;
}

.site-footer__bottom-links a,
.site-footer__copyright {
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
}

/* Figma: node 77:43130 / 52:81118 — px-12, gap-36 between 24px icons. */
.site-footer__social {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 12px;
}

.site-footer__social a {
  display: flex;
  color: var(--color-white);
}

.site-footer__social svg {
  width: 24px;
  height: 24px;
}

/* Figma: node 52:76452 "Footer" (1920) — content column is 1440 wide at
   x=240, its visible area starts 220px above the content (vs 180 at 1440;
   the same 300px stays hidden behind .home-faq, hence 520), and the bottom
   row sits 140px above the footer's bottom edge (vs 120). */
@media (min-width: 1920px) {
  .site-footer__content {
    padding: 520px 240px 0;
  }

  .site-footer__bottom {
    margin-left: 240px;
    margin-right: 240px;
    padding: 32px 0 140px;
  }
}

/* ---------------------------------------------------------------- download CTA */
/* Figma: node 1:43096 "CTA Section". */
.cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 200px 100px 100px;
  background: var(--color-bg);
}

.cta-section__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.cta-section__stars {
  position: relative;
  display: block;
  width: 288px;
  height: 74px;
}

.cta-star {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--star-w);
  height: var(--star-h);
  transform: translate(-50%, -50%);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-star img {
  display: block;
  width: 100%;
  height: 100%;
}

.cta-section.is-playing .cta-star {
  transform: translate(calc(-50% + var(--star-dx)), -50%);
}

@media (prefers-reduced-motion: reduce) {
  .cta-star {
    transform: translate(calc(-50% + var(--star-dx)), -50%);
    transition: none;
  }
}

.cta-section__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 74px;
  line-height: 1.1;
  letter-spacing: -2.96px;
  color: var(--color-text-primary);
  text-align: center;
}

.cta-section__body {
  margin: 0;
  max-width: 684px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-text-primary);
  text-align: center;
}

.cta-section__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  padding: 14px 24px;
  border-radius: 100px;
  background: var(--color-bg-blush);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-deep-berry);
  text-decoration: none;
}

/* ------------------------------------------------------------- blog teaser */
/* Figma: node 1:43098 "Blog Section". */
.blog-teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 140px 80px 140px;
  background: var(--color-bg);
}

.blog-teaser__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1440px;
  padding: 0 100px 100px;
}

.blog-teaser__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.blog-teaser__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 74px;
  line-height: 1.1;
  letter-spacing: -2.96px;
  color: var(--color-text-primary);
  text-align: center;
}

.blog-teaser__cards {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 1440px;
}

/* Figma: node 23:53913, 1920 frame — the 1440 container itself is already
   correct here (this max-width + .blog-teaser's own 80px padding already
   resolve to exactly 1440, centered, matching Figma's "Articles Container"
   at both breakpoints) — only the card gap changes, 20px to 32px. */
@media (min-width: 1920px) {
  .blog-teaser__cards {
    gap: 32px;
  }
}

.blog-teaser-card {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.blog-teaser-card__image {
  display: block;
  width: 100%;
  height: 297px;
  margin-bottom: 32px;
  border-radius: 24px;
  overflow: hidden;
}

.blog-teaser-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-teaser-card__meta {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.blog-teaser-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

/* ----------------------------------------------------------------- error page */
.error-page__actions {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.error-page__links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.error-page__support {
  text-align: center;
  margin-top: 24px;
  color: var(--color-text-muted);
}

/* ==========================================================================
   COMPACT (<= 1099px): MOBILE + TABLET — Figma 280:45530 "393 - Home"
   and 328:5564 "768 -Home". One chapter, section by section in page
   order, so it overrides the desktop (1440-first) rules above at equal
   specificity. Breakpoints: <768 mobile, 768-1099 tablet, 1100+ desktop
   (1440 design, made fluid down to 1100 per Figma 414:21840), 1920, 2560. Tablet is the
   mobile chapter below plus the TABLET block at the very end, which only
   overrides what the 768 frame lays out differently; every layout is fluid
   within its range (no fixed page widths), so resizing never jumps except
   at the two breakpoints themselves.
   ========================================================================== */

/* Desktop never shows the hero's mobile-only "Get the app" button. */
.hero-section__cta {
  display: none;
}

/* Compact-only footer bits (Figma 337:6650, 356:7262) — desktop hides them. */
.site-footer__brand-logo--mobile,
.site-footer__cta,
.site-footer__touch {
  display: none;
}

/* Who-is-it-for tags with a shorter phone label (labelMobile in
   landing.yaml): full text from 768 up, short text on phones. */
.who-tag__label--short {
  display: none;
}

@media (max-width: 767px) {
  .who-tag__label--full {
    display: none;
  }

  .who-tag__label--short {
    display: inline;
  }
}

/* Mobile-only manual line breaks in headings (mobileBreaks(), home-sections). */
.br-mobile {
  display: none;
}

@media (max-width: 1099px) {
  .br-mobile {
    display: inline;
  }
}

@media (max-width: 1099px) {
  /* Figma text styles "Mobile/*" — referenced by name below. */
  :root {
    --m-h1: 600 46px/1 var(--font-display);           /* Mobile/H1 Semibold, ls -4% */
    --m-h2: 600 44px/1.1 var(--font-display);          /* Mobile/H2 Semibold, ls -4% */
    --m-h3: 600 40px/1 var(--font-display);            /* Mobile/H3 Semibold */
    --m-h4: 600 26px/1.2 var(--font-display);          /* Mobile/H4 Semibold, ls -2% */
    --m-subhead-1: 600 24px/1.4 var(--font-display);   /* Mobile/Subhead 1 Semibold, ls -1% */
    --m-subhead-2: 500 18px/1 var(--font-display);     /* Mobile/Subhead 2 Medium, ls -1% */
    --m-subhead-3: 600 18px/1 var(--font-display);     /* Mobile/Subhead 3 Semibold, ls -1% */
    --m-subhead-4: 600 16px/1.2 var(--font-display);   /* Mobile/Subhead 4 Semibold */
    --m-body-2: 400 18px/1.5 var(--font-display);      /* Mobile/Body Text 2 Regular */
    --m-body-3: 500 16px/1.5 var(--font-display);      /* Mobile/Body text 3 Medium */
    --m-body-4: 400 16px/1.5 var(--font-display);      /* Mobile/Body Text 4 Regular */
    --m-caption-1: 600 13px/21px var(--font-display);  /* Mobile/Caption 1 Semibold, ls 1.5px */
  }

  /* ------------------------------- header (Figma 366:9334 / 414:20878) */
  /* Logo left; a small "Get the app" pill and the plain burger icon right,
     8px apart. Padding 8 / 8 / 8 / 16. */
  .site-header {
    background: var(--color-white);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .site-header__inner {
    gap: 8px;
    height: 60px;
    padding: 8px 8px 8px 16px;
  }

  .brand {
    margin-right: auto;
  }

  .brand__logo {
    width: 30px;
    height: 30px;
  }

  .header-cta--desktop {
    display: inline-flex;
    padding: 10px 16px;
    font: 600 14px/1.25 var(--font-display); /* Desktop/Button text 2 */
  }

  .menu-toggle {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 100px;
    background: none;
  }

  .menu-toggle img {
    display: block;
    width: 24px;
    height: 24px;
  }

  .mobile-nav {
    top: 60px;
  }

  /* On mobile the hero starts BELOW the 60px header (Figma: content frame
     at y=114, header 54-114), not under it like on desktop — so the home
     page gets the same offset as every other page. */
  main,
  body.page-home main {
    padding-top: 60px;
  }

  /* -------------------------------------------------- hero (Figma 281:4670) */
  .hero-section {
    height: 520px;
    padding: 60px 0 200px;
  }

  /* Up to 393 the <source> is Figma's own 393x520 crop of "image 555 -2"
     (587x569 at -75/-40) — just fill the box. */
  .hero-section__bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
  }

  .hero-section__inner {
    gap: 20px;
    padding: 0 16px;
  }

  .hero-section__copy {
    gap: 12px;
  }

  .hero-section__eyebrow {
    font: var(--m-caption-1);
    letter-spacing: 1.5px;
  }

  .hero-section__title {
    gap: 0;
    font: var(--m-h1);
    letter-spacing: -1.84px;
  }

  .hero-section__cycling {
    height: 51px;
  }

  .hero-section__cycling-word {
    font-size: 46px;
    letter-spacing: -1.84px;
  }

  .hero-section__buttons {
    display: none;
  }

  /* Figma 281:4745: 200x48 blush pill, deep-berry label. */
  .hero-section__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 48px;
    padding: 12px 24px;
    border-radius: 100px;
    background: var(--color-bg-blush);
    color: var(--color-deep-berry);
    font: 600 16px/1.5 var(--font-display);
    text-decoration: none;
  }

  /* ---------------------------------------------- stats (Figma 281:4775) */
  /* 2x2: installs + years on top, the two store ratings below (markup
     order is installs, Google Play, App Store, years). */
  .stats-section {
    display: grid;
    grid-template-columns: repeat(2, 160px);
    justify-content: center;
    justify-items: center;
    gap: 48px 0;
    padding: 32px 16px;
  }

  .stats-section__item:nth-child(1) { order: 1; }
  .stats-section__item:nth-child(4) { order: 2; }
  .stats-section__item:nth-child(2) { order: 3; }
  .stats-section__item:nth-child(3) { order: 4; }

  .stats-section__item--wide {
    width: auto;
  }

  .stats-section__number-row {
    gap: 2px;
    align-items: center;
  }

  .stats-section__number {
    font: var(--m-h3);
  }

  .stats-section__number-icon {
    width: 20px;
    height: 24px;
  }

  .stats-section__label {
    font: var(--m-body-2);
  }

  .stats-section__label-icon {
    width: 20px;
    height: 20px;
  }

  /* -------------------------------- description pin (Figma 284:7511) */
  /* Not pinned on mobile — initDescriptionPin() darkens the words as the
     section scrolls past at its natural height (no 100vh white space). */
  .description-pin__sticky {
    position: static;
    min-height: 0;
    gap: 16px;
    padding: 120px 16px;
  }

  .description-pin__eyebrow {
    font: var(--m-caption-1);
    letter-spacing: 1.5px;
  }

  .description-pin__text {
    font: var(--m-subhead-1);
    letter-spacing: -0.24px;
  }

  /* --------------------------------------- features bento (Figma 286:9325) */
  /* One column of 361px cards (16px gutters, 12px apart). The illustrations
     keep their desktop markup/coordinates and are scaled as a whole with
     Figma's own factors (phone x0.737, fertility graph x0.637, hormones
     x0.822) — each sits absolutely under its card's text block. */
  .features-bento {
    padding-top: 0;
  }

  .features-bento__title {
    gap: 12px;
    padding: 0 16px 48px;
  }

  .features-bento__eyebrow {
    font: var(--m-caption-1);
    letter-spacing: 1.5px;
  }

  .features-bento__heading {
    font: var(--m-h2);
    letter-spacing: -1.76px;
  }

  .features-bento__grid,
  .features-bento__row {
    flex-direction: column;
    gap: 12px;
  }

  .features-bento__grid {
    padding: 0 16px;
  }

  .bento-card {
    width: 100%;
    border-radius: 32px;
  }

  .bento-card__text,
  .bento-card__text--center {
    width: 100%;
    gap: 12px;
    padding: 32px 24px;
    text-align: center;
  }

  .bento-card__title {
    font: var(--m-h4);
    letter-spacing: -0.52px;
  }

  .bento-card__body {
    font: var(--m-body-2);
  }

  /* Card 1 — Track your cycle: text block on top, phone below. */
  .bento-card--track-cycle {
    flex-direction: column;
    align-items: stretch;
    height: 697px;
  }

  .bento-card--track-cycle .bento-card__copy {
    width: 100%;
    align-items: center;
    gap: 24px;
    padding: 32px 24px;
    text-align: center;
  }

  .bento-card--track-cycle .bento-card__text {
    padding: 0;
    text-align: center;
  }

  .bento-card__cta {
    width: 240px;
  }

  .bento-card--track-cycle .bento-card__media--phone {
    position: absolute;
    top: 264px;
    /* Figma's 361px card, centered in whatever width the card has. */
    left: calc(50% - 180.5px);
    width: 679px;
    height: 599px;
    margin: 0;
    overflow: visible;
    transform: translate(-52px, -9.7px) scale(0.7366);
    transform-origin: 0 0;
  }

  /* Card 2 — fertility graph. */
  .bento-card--fertility {
    justify-content: flex-start;
    height: 460px;
  }

  .bento-card__media--fertility-graph {
    position: absolute;
    top: 189px;
    left: 0;
    width: 628px;
    transform: translate(-37px, 4px) scale(0.6373);
    transform-origin: 0 0;
  }

  /* Card 3 — pregnancy photo; Figma pins the 411x470 photo to the top-left. */
  .bento-card--pregnancy {
    align-items: stretch;
    height: 460px;
  }

  .bento-card--pregnancy .bento-card__bg {
    object-position: left top;
  }

  /* Card 4 — perimenopause hormones chart. */
  .bento-card--perimenopause {
    justify-content: flex-start;
    gap: 0;
    height: 460px;
    padding-top: 7px;
  }

  .bento-card--perimenopause .bento-card__text {
    padding: 32px 24px;
  }

  .bento-card--perimenopause .bento-card__media {
    position: absolute;
    top: 195px;
    left: 0;
    height: 259px;
  }

  .hormones-chart {
    left: -26px;
    top: -9px;
    transform: scale(0.822);
    transform-origin: 0 0;
  }

  /* Figma 286:9657: the mobile "Today" pill is its own smaller size
     (60x23, 13px Medium), not the desktop pill scaled down. Values here are
     in the chart's own (pre-scale) units, i.e. Figma's / 0.822, centered on
     the dashed line at x=104. */
  .hormones-chart__today-pill {
    left: 67.5px;
    top: 37.8px;
    width: 73px;
    height: 27.9px;
    font-size: 15.8px;
    letter-spacing: -0.16px;
  }

  /* Card 5 — symptom tags: 44px tags, 40px icons, 18px labels, rows 8px apart. */
  .bento-card--symptoms {
    height: 460px;
  }

  .bento-card--symptoms .bento-card__text {
    gap: 20px;
  }

  .bento-card__media--symptoms {
    flex: none;
    height: 233px;
    padding-top: 28px;
    justify-content: flex-start;
  }

  .symptoms-marquee {
    gap: 8px;
  }

  .symptom-marquee {
    height: 44px;
  }

  .symptom-marquee__track {
    gap: 8px;
  }

  .symptom-tag {
    gap: 12px;
    padding: 2px 12px 2px 2px;
  }

  .symptom-tag__icon {
    width: 40px;
    height: 40px;
  }

  .symptom-tag__label {
    font: var(--m-subhead-2);
    letter-spacing: -0.18px;
  }

  /* Card 6 — partner: the mobile <source> is Figma's rotated photo
     pre-rendered at exactly the card's 361x480 crop — just fill the card. */
  .bento-card--partner {
    justify-content: flex-start;
    gap: 28px;
    height: 480px;
    padding: 40px 24px 32px;
    background-color: #185f8c;
  }

  .bento-card--partner .bento-card__bg {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
  }

  .bento-card--partner .bento-card__text--center {
    padding: 0;
  }

  .bento-card__partner-logo,
  .bento-card__partner-logo-app {
    width: 62px;
    height: 62px;
    border-radius: 14.8px;
  }

  .bento-card__partner-logo img {
    width: 62px;
    height: 62px;
  }

  .bento-card__partner-link {
    width: 24px;
    height: 24px;
  }

  /* Shared section-heading pattern below: Caption 1 eyebrow + H2 title. */
  .who-is-it-for__eyebrow,
  .proof-section__eyebrow,
  .privacy-section__eyebrow,
  .pricing-section__eyebrow {
    font: var(--m-caption-1);
    letter-spacing: 1.5px;
  }

  .who-is-it-for__heading,
  .privacy-section__heading,
  .pricing-section__heading {
    font: var(--m-h2);
    letter-spacing: -1.76px;
  }

  /* ------------------------------------- who is it for (Figma 290:10520) */
  /* One tag per row, centered, 12px apart; 44px tags with 40px avatars. */
  .who-is-it-for {
    gap: 40px;
    padding: 80px 16px;
  }

  .who-is-it-for__title {
    gap: 12px;
  }

  .who-is-it-for__tags {
    position: relative; /* offsetParent for initWhoTagsScroll's maths */
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* initWhoTagsScroll (main.js) pins the section inside .who-pin (height
     and sticky top set inline) and scrubs each tag up from the container's
     bottom edge; this overrides the generic .reveal fade. */
  .who-pin.is-pinned {
    position: relative;
  }

  .who-pin.is-pinned .who-is-it-for {
    position: sticky;
  }

  .who-is-it-for__tags.is-scroll-linked .who-tag.reveal {
    opacity: var(--tag-o, 0);
    transform: translateY(var(--tag-y, 0px));
    transition: none;
  }

  /* max-width + wrapping label: the longest tag is 348px, which only just
     fits 393 — on a 360 phone it would poke 3px past the edge. */
  .who-tag {
    max-width: 100%;
    gap: 8px;
    padding: 2px 12px 2px 2px;
  }

  .who-tag__label {
    white-space: normal;
  }

  .who-tag__avatar {
    width: 40px;
    height: 40px;
  }

  .who-tag__label {
    font: var(--m-subhead-2);
    letter-spacing: -0.18px;
  }

  /* ------------------------------------------- proof (Figma 305:11479) */
  .proof-section {
    gap: 40px;
    padding: 80px 0;
  }

  .proof-section__title {
    gap: 12px;
    padding: 0 16px;
  }

  .proof-section__heading {
    gap: 0;
  }

  .proof-section__heading p {
    font: var(--m-h2);
    letter-spacing: -1.76px;
  }

  /* "30M+ [avatars]" on one line, "women" drops to its own line. */
  .proof-section__stat-row {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .proof-section__stat-row > span:last-child {
    flex-basis: 100%;
  }

  .proof-avatars {
    height: 40px;
  }

  /* Same stack-unfold animation as desktop (margin-right), at Figma's
     mobile size: 40px avatars overlapping by 10px once unfolded. */
  .proof-avatar {
    width: 40px;
    height: 40px;
    border-width: 3px;
    margin-right: -40px;
  }

  .proof-avatars.is-playing .proof-avatar {
    margin-right: -10px;
  }

  .proof-avatar__img {
    top: -3px;
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
  }

  .proof-avatar__img--flush {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .proof-reviews-track {
    gap: 12px;
    padding: 0 16px;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
  }

  .review-card {
    width: 340px;
    gap: 20px;
    padding: 20px;
    border-radius: 32px;
  }

  .review-card__text {
    font: var(--m-body-4);
  }

  .review-card__name {
    font: var(--m-subhead-4);
  }

  /* ----------------------------------------- privacy (Figma 305:11663) */
  .privacy-section {
    gap: 40px;
    padding: 80px 16px 0;
  }

  .privacy-section__intro {
    gap: 20px;
  }

  /* Figma 305:11665 */
  .privacy-section__video {
    width: 164px;
    height: 164px;
  }

  .privacy-section__title {
    width: 100%;
    gap: 20px;
  }

  .privacy-section__lead {
    font: var(--m-body-2);
  }

  /* 2x3 grid: the desktop rows of three are flattened into one grid. */
  .privacy-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
  }

  .privacy-cards__row {
    display: contents;
  }

  .privacy-card {
    gap: 16px;
    padding: 16px;
    border-radius: 24px;
  }

  .privacy-card__title {
    font: var(--m-subhead-3);
    letter-spacing: -0.18px;
  }

  /* ----------------------------------------- pricing (Figma 305:11729) */
  .pricing-section {
    gap: 40px;
    padding: 100px 0 0;
  }

  .pricing-section__title {
    gap: 16px;
    padding: 0 16px;
  }

  .pricing-cards {
    flex-direction: column;
    gap: 20px;
    padding: 0 16px;
  }

  /* flex:none — desktop's flex:1 0 0 would collapse a column-stacked card
     with overflow:hidden (premium) to zero height. */
  .pricing-card {
    flex: none;
    gap: 32px;
    padding: 32px 24px 20px;
    border-radius: 32px;
  }

  .pricing-card--premium {
    gap: 40px;
  }

  .pricing-card__header {
    gap: 12px;
  }

  .pricing-card__kicker {
    font: var(--m-caption-1);
    letter-spacing: 1.5px;
  }

  /* Figma 305:11765: plan name is Mobile/H3 (40/1), not the section H2,
     and its description sits just 2px under it (header gap is 12). */
  .pricing-card__name {
    font: var(--m-h3);
    letter-spacing: 0;
  }

  /* Figma 305:11764: 4px between title and description (header gap 12 − 8). */
  .pricing-card__description {
    margin-top: -8px;
  }

  .pricing-card__description,
  .pricing-card__feature {
    font: 500 18px/1.5 var(--font-display);
  }

  .pricing-card__features {
    flex: none;
    gap: 12px;
  }

  .cta-section__eyebrow,
  .blog-teaser__eyebrow,
  .home-faq__eyebrow {
    font: var(--m-caption-1);
    letter-spacing: 1.5px;
  }

  .cta-section__heading,
  .blog-teaser__heading,
  .home-faq__heading {
    font: var(--m-h2);
    letter-spacing: -1.76px;
  }

  /* ------------------------------------- 700K+ CTA (Figma 305:11803) */
  .cta-section {
    gap: 12px;
    padding: 100px 16px 0;
  }

  /* Figma 305:11808: mobile stars are 36/48/60/48/36 node boxes laid edge
     to edge in a 228px row; the visible star is ~0.81 x 0.77 of the node
     box (same ratio as desktop). The sizes live as inline custom properties
     on each star, hence !important here. */
  .cta-section__stars {
    width: 228px;
    margin-bottom: 4px;
  }

  .cta-star:nth-child(1),
  .cta-star:nth-child(5) {
    --star-w: 29px !important;
    --star-h: 28px !important;
  }

  .cta-star:nth-child(2),
  .cta-star:nth-child(4) {
    --star-w: 39px !important;
    --star-h: 37px !important;
  }

  .cta-star:nth-child(3) {
    --star-w: 49px !important;
    --star-h: 46px !important;
  }

  .cta-star:nth-child(1) { --star-dx: -96px !important; }
  .cta-star:nth-child(2) { --star-dx: -54px !important; }
  .cta-star:nth-child(4) { --star-dx: 54px !important; }
  .cta-star:nth-child(5) { --star-dx: 96px !important; }

  .cta-section__body {
    font: var(--m-body-2);
  }

  .cta-section__button {
    margin-top: 28px;
  }

  /* ----------------------------------------- blog (Figma 305:11823) */
  .blog-teaser {
    padding: 100px 16px 0;
  }

  .blog-teaser__title {
    gap: 16px;
    padding: 0 0 40px;
  }

  .blog-teaser__cards {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .blog-teaser-card__image {
    height: 240px;
    margin-bottom: 12px;
  }

  .blog-teaser-card__meta {
    margin-bottom: 8px;
    padding: 0 16px 0 4px;
    font: var(--m-caption-1);
    letter-spacing: 1.5px;
  }

  .blog-teaser-card__title {
    padding: 0 16px 0 4px;
    font: var(--m-body-2);
  }

  /* ------------------------------------------ FAQ (Figma 305:11950) */
  .home-faq {
    padding: 100px 0;
  }

  .home-faq__title {
    gap: 12px;
    padding: 0 16px 40px;
  }

  .home-faq-accordion {
    padding: 0 16px;
  }

  .home-faq-accordion .home-faq-row__summary {
    gap: 32px;
    padding: 32px 8px;
  }

  .home-faq-row__q {
    font: 500 18px/1.5 var(--font-display);
  }

  .home-faq-accordion .home-faq-row__body {
    padding: 0 48px 32px 8px;
  }

  /* -------------------------------------------- footer (Figma 337:6648) */
  /* The desktop footer is fixed under the page and revealed as the page
     scrolls off it — that only works when the footer fits the viewport.
     On a phone it's taller than the screen, so here it's an ordinary block
     after the page, tucked 100px under .home-faq exactly as in Figma (the
     page content overlaps the footer container by 100px), so .home-faq's
     rounded corners show the footer's photo through them. */
  /* initFooterCanvasTint (main.js): the canvas under Safari's bottom bar /
     overscroll matches the footer photo's bottom edge instead of white. */
  html.footer-in-view {
    background-color: #c47994;
  }

  body {
    padding-bottom: 0;
  }

  .site-footer {
    position: relative;
    bottom: auto;
    margin-top: -100px;
  }

  /* Same blurred photo as desktop (Figma "image 3120": FILL, layer blur
     142.5 = CSS 71.25px, 20% black overlay), placed at Figma's own mobile
     rect relative to the footer container. */
  .site-footer__bg img {
    top: -1678px;
    left: -1455px;
    width: 2633px;
    max-width: none;
    height: 3626px;
    object-fit: cover;
    transform: none;
  }

  /* Content starts 100px below the footer frame, which itself starts at
     the 100px overlap line. */
  .site-footer__content {
    flex-direction: column;
    gap: 60px;
    padding: 200px 16px 0;
  }

  .site-footer__brand-qr {
    align-items: center;
    gap: 24px;
  }

  .site-footer__brand {
    /* Figma 337:6729: 40px icon, gap 10, 6px vertical padding → 52 tall. */
    gap: 10px;
    height: 52px;
    font-family: 'Nunito', var(--font-display);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.72px;
  }

  .site-footer__brand-logo {
    display: none;
  }

  .site-footer__brand-logo--mobile {
    display: block;
    width: 40px;
    height: 40px;
  }

  .site-footer__qr {
    display: none;
  }

  .site-footer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    padding: 14px 24px;
    border-radius: 100px;
    background: var(--color-bg-blush);
    color: var(--color-deep-berry);
    font: 600 16px/1.5 var(--font-display);
    text-decoration: none;
  }

  /* 2x2: Product + Learn, Company + Legal. */
  .site-footer__cols {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 60px;
  }

  .site-footer__col-title {
    margin-bottom: 12px;
    font: var(--m-subhead-3);
    letter-spacing: -0.18px;
  }

  .site-footer__col-links a {
    font: var(--m-subhead-4);
  }

  /* Bottom (Figma "Frame 2147237094", gap 48): divider, then "Get in
     touch" + icons, then copyright + links — all centered. The desktop
     right-hand group is dissolved so its pieces can be reordered around
     the copyright. */
  .site-footer__bottom {
    flex-direction: column;
    gap: 0;
    margin: 48px 16px 0;
    padding: 48px 0 100px;
    text-align: center;
  }

  .site-footer__bottom-right {
    display: contents;
  }

  .site-footer__touch {
    display: block;
    order: 1;
    margin: 0 0 16px;
    color: var(--color-white);
    font: var(--m-subhead-4); /* Figma 341:6748 */
  }

  .site-footer__social {
    order: 2;
    gap: 24px;
    padding: 0;
  }

  .site-footer__social a {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
  }

  .site-footer__copyright {
    order: 3;
    margin-top: 48px;
  }

  .site-footer__bottom-links {
    order: 4;
    margin-top: 16px;
  }
}

/* ==========================================================================
   NARROW DESKTOP (1100-1439) — Figma 414:21840 "1100 - Home" at 1100 and
   the 1440 design at 1440, interpolated in between. Same desktop layout and
   type; what changes is the gutters (48px at 1100 vs 80-100 at 1440) and a
   few fixed-geometry pieces. Every value below is
     calc(<1100 value> + (100vw - 1100px) * <slope>)
   with slope = (1440 value - 1100 value) / 340, so it equals Figma exactly
   at both frames and moves continuously between them — nothing jumps when
   the viewport crosses 1440.
   ========================================================================== */
@media (min-width: 1100px) and (max-width: 1439px) {
  /* Hero: 1025 -> 1100 tall; photo box 1337x1123 -> 1521.8x1278.3. */
  .hero-section {
    height: calc(1025px + (100vw - 1100px) * 0.2206);
  }

  .hero-section__bg {
    width: calc(1337px + (100vw - 1100px) * 0.5435);
    /* Figma's 1100 box stops 13px short of the 1025px stage — never let
       it end above the hero's bottom edge. */
    height: max(calc(1123px + (100vw - 1100px) * 0.4568), calc(100% + 111px));
  }

  /* Stats: side padding 48 -> 80. */
  .stats-section {
    padding: 60px calc(48px + (100vw - 1100px) * 0.0941);
  }

  /* Description: 960px text column at 1100 (side padding 48 -> 240). */
  .description-pin__sticky {
    padding: 100px calc(48px + (100vw - 1100px) * 0.5647);
  }

  /* Features: title 48 -> 100, grid 48 -> 96. */
  .features-bento__title {
    padding: 0 calc(48px + (100vw - 1100px) * 0.1529) 100px;
  }

  .features-bento__grid {
    padding: 0 calc(48px + (100vw - 1100px) * 0.1412);
  }

  /* Card 1 (414:26581): copy 484 -> 601 wide, padding 60 -> 100; the
     phone/hand group sits 50px further left at 1100 (Figma image
     container at -38.9 vs 11.1 for the hand). */
  .bento-card--track-cycle .bento-card__copy {
    width: calc(484px + (100vw - 1100px) * 0.3441);
    padding: 60px calc(60px + (100vw - 1100px) * 0.1176);
  }

  .bento-card--track-cycle .bento-card__media--phone {
    flex: 1 0 0;
    min-width: 0;
    margin-left: calc(-50px + (100vw - 1100px) * 0.1471);
  }

  /* Card 2 (414:26728): at a 490px card Figma slides the whole graph
     ~98px left rather than shrinking it — i.e. 0.8px per px of card width
     lost (--cw = card width, initBentoCardWidths in main.js). */
  .bento-card__media--fertility-graph {
    width: 612px; /* the box it's drawn for (it clips its own overflow) */
    align-self: flex-start; /* not centred in the narrower card */
    transform: translateX(calc((var(--cw, 612) - 612) * 0.8px));
  }

  /* Card 4 (414:26755): chart left 48 at 628px -> 18 at 490px. */
  .hormones-chart {
    left: calc(48px + (var(--cw, 628) - 628) * 0.2174px);
  }

  .bento-card__text--center {
    max-width: 100%;
  }

  /* Who is it for: side padding 48 -> 100. */
  .who-is-it-for {
    padding: 200px calc(48px + (100vw - 1100px) * 0.1529);
  }

  /* Proof: title and reviews track 48 -> 100. */
  .proof-section__title {
    padding: 0 calc(48px + (100vw - 1100px) * 0.1529);
  }

  .proof-reviews-track {
    padding: 0 calc(48px + (100vw - 1100px) * 0.1529);
    scroll-padding-left: calc(48px + (100vw - 1100px) * 0.1529);
    scroll-padding-right: calc(48px + (100vw - 1100px) * 0.1529);
  }

  /* Privacy: 48 -> 100. */
  .privacy-section {
    padding: 200px calc(48px + (100vw - 1100px) * 0.1529) 0;
  }

  /* The lead runs the full content width here (two lines, Figma 414:27117),
     not the 800px title column. */
  .privacy-section__title {
    width: 100%;
  }

  /* Blog: 48 -> 80. */
  .blog-teaser {
    padding-left: calc(48px + (100vw - 1100px) * 0.0941);
    padding-right: calc(48px + (100vw - 1100px) * 0.0941);
  }

  /* FAQ list: 860 -> 960 wide. */
  .home-faq-accordion {
    max-width: calc(860px + (100vw - 1100px) * 0.2941);
  }

  /* Footer: 48 -> 100. */
  .site-footer__content {
    padding-left: calc(48px + (100vw - 1100px) * 0.1529);
    padding-right: calc(48px + (100vw - 1100px) * 0.1529);
  }

  .site-footer__bottom {
    margin-left: calc(48px + (100vw - 1100px) * 0.1529);
    margin-right: calc(48px + (100vw - 1100px) * 0.1529);
  }
}
/* ==========================================================================
   TABLET (768-1099) — Figma 414:20047 "768 -Home" at 768 and 414:52791
   (the 1000 frame) at 1000. Builds on the compact (mobile) chapter above;
   only what the tablet frames lay out differently. Values that differ
   between the two frames are interpolated the same way as on desktop:
     calc(<768 value> + (100vw - 768px) * <slope>),
   slope = (1000 value - 768 value) / 232 — exact at both frames, smooth in
   between, and simply continuing the same line up to 1099.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1099px) {

  /* --------------------------------------------- hero (328:5624, 414:52858) */
  /* 550 -> 582 tall; photo box full width, 96.745% of it tall (the photo's
     own aspect), top -137 -> -283. */
  .hero-section {
    height: calc(550px + (100vw - 768px) * 0.1379);
  }

  .hero-section__bg {
    top: calc(-137px - (100vw - 768px) * 0.6293);
    height: 96.745vw;
    object-position: 50% 0;
  }

  .hero-section__inner {
    gap: 24px;
  }

  /* --------------------------------------------- stats (Figma 328:5635) */
  /* One row: installs, years, Google Play, App Store (same at 768 and 1000). */
  .stats-section {
    grid-template-columns: 140px 140px 160px 160px;
    gap: 0;
    padding: 32px 48px;
  }

  /* Section spacing: 120px at 768 -> 160px at 1000 (slope 0.1724). */

  /* -------------------------------- description (414:20159, 414:52903) */
  .description-pin__sticky {
    padding: calc(120px + (100vw - 768px) * 0.1724) 32px;
  }

  .description-pin__text {
    max-width: 520px;
  }

  /* --------------------------------------- features bento (329:8089) */
  .features-bento__title {
    padding: 0 48px 48px;
  }

  .features-bento__grid {
    padding: 0 calc(32px + (100vw - 768px) * 0.069);
  }

  .features-bento__row {
    flex-direction: row;
  }

  /* Two-up cards stay 460 tall at every tablet width (both frames). */
  .features-bento__row > .bento-card {
    flex: 1 1 0;
    min-width: 0;
    height: 460px;
  }

  /* Card 1: copy left, hand + phone right — the desktop composition at
     Figma's 0.6728 scale (phone screen 224 -> 150.7px). Copy 370 -> 417
     wide, padding 32 -> 60; phone group left 329.5 -> 447.5, top
     7.4 -> 14.4. */
  .bento-card--track-cycle {
    flex-direction: row;
    align-items: center;
    height: 450px;
    border-radius: 40px;
  }

  .bento-card--track-cycle .bento-card__copy {
    width: calc(370px + (100vw - 768px) * 0.2026);
    flex: none;
    align-items: flex-start;
    gap: 36px;
    padding: 60px calc(32px + (100vw - 768px) * 0.1207);
    text-align: left;
  }

  .bento-card--track-cycle .bento-card__text {
    gap: 20px;
    text-align: left;
  }

  .bento-card__cta {
    width: 220px;
  }

  .bento-card--track-cycle .bento-card__media--phone {
    top: calc(7.44px + (100vw - 768px) * 0.03);
    left: calc(329.5px + (100vw - 768px) * 0.5086);
    transform: scale(0.6728);
  }

  /* Card 2: mobile graph geometry anchored bottom-left. At a 346px card
     it's x0.6373 shifted -37px; at 446px (1000 frame) x0.695 at +7px —
     interpolated on the card's own width (--cw, initBentoCardWidths). */
  .bento-card__media--fertility-graph {
    top: auto;
    bottom: 13.4px;
    transform:
      translateX(calc(-37px + (var(--cw, 346) - 346) * 0.44px))
      scale(calc(0.6373 + (var(--cw, 346) - 346) * 0.000578));
    transform-origin: 0 100%;
  }

  /* Card 4: chart keeps its mobile size/offsets (-26/-9.5, x0.822); its
     259px container sits 9px past the card's bottom at 768 and 20px above
     it at 1000. */
  .bento-card--perimenopause .bento-card__media {
    top: auto;
    bottom: calc(-9px + (100vw - 768px) * 0.125);
    width: 100%;
    height: 259px;
  }

  /* Card 5: tags 28px under the text at 768, 68px at 1000. */
  .bento-card__media--symptoms {
    flex: 1;
    height: auto;
    padding-top: calc(28px + (100vw - 768px) * 0.1724);
  }

  /* Card 6 (329:8536): 450 tall, 540px text column. */
  .bento-card--partner {
    height: 450px;
    padding: 40px 32px 32px;
  }

  .bento-card--partner .bento-card__text--center {
    width: 100%;
    max-width: 540px;
  }

  /* ------------------------------------- who is it for (328:5981) */
  /* Tags wrap into centered rows (two per row at 768, three at 1000). */
  .who-is-it-for {
    padding: calc(120px + (100vw - 768px) * 0.1724) 32px;
  }

  .who-is-it-for__tags {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .who-tag__label {
    white-space: nowrap;
  }

  /* ------------------------------------------- proof (328:6018) */
  /* "30M+ [avatars] women" back on one line. */
  .proof-section {
    padding: calc(120px + (100vw - 768px) * 0.1724) 0;
  }

  .proof-section__title {
    padding: 0 calc(32px + (100vw - 768px) * 0.069);
  }

  .proof-section__stat-row {
    flex-wrap: nowrap;
  }

  .proof-section__stat-row > span:last-child {
    flex-basis: auto;
  }

  .proof-reviews-track {
    padding: 0 32px;
    scroll-padding-left: 32px;
    scroll-padding-right: 32px;
  }

  /* ----------------------------------------- privacy (328:6201) */
  .privacy-section {
    padding: calc(120px + (100vw - 768px) * 0.1724) calc(32px + (100vw - 768px) * 0.069) 0;
  }

  .privacy-section__video {
    width: 200px;
    height: 200px;
  }

  /* 3x2; Figma's second row is Discreet reminders, Local storage,
     Fingerprint lock, so Fingerprint (4th in the data) moves last. */
  .privacy-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .privacy-cards__row:nth-child(2) .privacy-card:first-child {
    order: 1;
  }

  /* ----------------------------------------- pricing (328:6266) */
  .pricing-section {
    padding-top: calc(120px + (100vw - 768px) * 0.1724);
  }

  .pricing-section__title {
    padding: 0 calc(32px + (100vw - 768px) * 0.069);
  }

  .pricing-cards {
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    padding: 0 calc(32px + (100vw - 768px) * 0.069);
  }

  /* Figma 328:6275: plan name and its description are 2px apart here
     (header gap 12 - 10). */
  .pricing-card__description {
    margin-top: -10px;
  }

  .pricing-card {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Push both buttons to the bottom of the equal-height cards. */
  .pricing-card__features {
    flex: 1 1 auto;
  }

  /* ------------------------------------- 700K+ CTA (328:6326) */
  /* Tablet keeps the larger 40/52/64 star boxes in a 248px row. */
  .cta-section__stars {
    width: 248px;
  }

  .cta-star:nth-child(1),
  .cta-star:nth-child(5) {
    --star-w: 32px !important;
    --star-h: 31px !important;
  }

  .cta-star:nth-child(2),
  .cta-star:nth-child(4) {
    --star-w: 42px !important;
    --star-h: 40px !important;
  }

  .cta-star:nth-child(3) {
    --star-w: 52px !important;
    --star-h: 49px !important;
  }

  .cta-star:nth-child(1) { --star-dx: -104px !important; }
  .cta-star:nth-child(2) { --star-dx: -58px !important; }
  .cta-star:nth-child(4) { --star-dx: 58px !important; }
  .cta-star:nth-child(5) { --star-dx: 104px !important; }

  .cta-section {
    padding-top: calc(120px + (100vw - 768px) * 0.1724);
  }

  /* Figma's text column here is 520px wide. */
  .cta-section__body {
    max-width: 520px;
  }

  /* ----------------------------------------- blog (328:6341) */
  .blog-teaser {
    padding: calc(120px + (100vw - 768px) * 0.1724) 32px 0;
  }

  .blog-teaser-card__image {
    height: 400px;
  }

  /* ------------------------------------------ FAQ (328:6367) */
  .home-faq {
    padding: calc(120px + (100vw - 768px) * 0.1724) 0;
  }

  .home-faq__title {
    padding: 0 32px 40px;
  }

  .home-faq-accordion {
    padding: 0 32px;
  }

  /* -------------------------------------------- footer (328:5565) */
  /* The page overlaps the footer container by 420px at 768 and 289px at
     1000; footer content starts 120px below that line. Side padding
     32 -> 48. Photo rect -1265/-1177, 2368x3260 (same in both frames). */
  .site-footer {
    margin-top: calc(-420px + (100vw - 768px) * 0.5647);
  }

  .site-footer__bg img {
    top: -1177px;
    left: -1265px;
    width: 2368px;
    height: 3260px;
  }

  .site-footer__content {
    padding: calc(540px - (100vw - 768px) * 0.5647) calc(32px + (100vw - 768px) * 0.069) 0;
  }

  /* Logo left, 240px "Get the app" right. */
  .site-footer__brand-qr {
    flex-direction: row;
    justify-content: space-between;
  }

  .site-footer__cta {
    width: 240px;
  }

  /* All four link columns in one row. */
  .site-footer__cols {
    display: flex;
    justify-content: space-between;
    gap: 60px;
  }

  .site-footer__bottom {
    margin: 48px calc(32px + (100vw - 768px) * 0.069) 0;
    padding: 48px 0 120px;
  }

  .site-footer__touch {
    font: 600 14px/1.25 var(--font-display); /* Desktop/Button text 2 */
  }
}
/* ==========================================================================
   LARGE PHONES (394-767) — hero photo. Instead of stretching the 393 crop
   with object-fit:cover (which zooms in as the screen widens and pushes the
   faces up under the "Get the app" button), use the full photo and slide
   its box from the 393 frame (587x569 at -75/-40) to the 768 frame
   (full width at 0/-137), with the stage growing 520 -> 550. The heads stay
   just below the button at every width. Same calc pattern as TABLET:
   slope = (768 value - 393 value) / 375.
   ========================================================================== */
@media (min-width: 394px) and (max-width: 767px) {
  .hero-section {
    height: calc(520px + (100vw - 393px) * 0.08);
  }

  .hero-section__bg {
    top: calc(-40px - (100vw - 393px) * 0.2587);
    left: calc(-74.9px + (100vw - 393px) * 0.1997);
    width: calc(587.4px + (100vw - 393px) * 0.4816);
    height: auto;
    aspect-ratio: 2400 / 2324;
    object-fit: cover;
  }
}
/* ==========================================================================
   BLOG INDEX (/blog/) — Figma 407:7639 "1920 - Blog". Only the 1920 frame
   exists; the other widths follow the homepage's rules: content 1440 wide
   and centered from 1920 up (240px gutters), 96px gutters at 1440, 48px at
   1100 (interpolated), 32-48px on tablet, 16px on phones. Featured article
   photo-left/text-right on desktop, stacked below 1100; the grid is 3 / 2 /
   1 columns on desktop / tablet / phone.
   ========================================================================== */
.nav-link.is-active {
  opacity: 1;
  color: var(--color-berry);
}

main.blog-page {
  --blog-pad: max(96px, calc((100% - 1440px) / 2));
  /* Figma: hero content 200px from the top of the page (the fixed 72px
     header overlays it); 180px under the grid before the rounded edge. */
  padding: 200px 0 180px;
  border-bottom-left-radius: var(--home-faq-corner-radius, 0px);
  border-bottom-right-radius: var(--home-faq-corner-radius, 0px);
  background: var(--color-bg);
}

.blog-page__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 var(--blog-pad) 100px;
  text-align: center;
}

.blog-page__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.blog-page__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 74px;
  line-height: 1.1;
  letter-spacing: -2.96px;
  color: var(--color-text-primary);
}

/* Featured article (407:7656): 686x468 photo (r32) + text column with
   60px left padding, vertically centered. */
.blog-featured {
  display: flex;
  gap: 20px;
  margin: 0 var(--blog-pad) 60px;
  color: inherit;
  text-decoration: none;
}

.blog-featured__image {
  display: block;
  flex: 0 0 47.64%; /* 686 / 1440 */
  aspect-ratio: 686 / 468;
  border-radius: 32px;
  overflow: hidden;
}

.blog-featured__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-featured__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  min-width: 0;
  padding-left: 60px;
}

.blog-featured__meta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.blog-featured__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -0.88px;
  color: var(--color-text-primary);
}

.blog-featured__excerpt {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.blog-featured:hover .blog-featured__title,
.blog-page .blog-teaser-card:hover .blog-teaser-card__title {
  color: var(--color-deep-berry);
}

/* Grid (407:7668): three 464px cards, 24px apart, rows 60px apart. Cards
   reuse the homepage teaser card; image 464x297 (r24), caption 12px above
   the title. */
.blog-page__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px 24px;
  padding: 0 var(--blog-pad);
}

.blog-page .blog-teaser-card__image {
  height: auto;
  aspect-ratio: 464 / 297;
}

.blog-page .blog-teaser-card__meta {
  margin-bottom: 12px;
}

/* Narrow desktop: gutters 48 (1100) -> 96 (1440), as on the homepage. */
@media (min-width: 1100px) and (max-width: 1439px) {
  main.blog-page {
    --blog-pad: calc(48px + (100vw - 1100px) * 0.1412);
  }

  /* The text column is ~470px at 1100: featured title 36 -> 44, excerpt
     20 -> 24 between 1100 and 1440. */
  .blog-featured__title {
    font-size: calc(36px + (100vw - 1100px) * 0.0235);
  }

  .blog-featured__excerpt {
    font-size: calc(20px + (100vw - 1100px) * 0.0118);
  }
}

/* Tablet + phones: compact type (Mobile/* styles), featured article
   stacked, 60px rounded bottom like the homepage FAQ. */
@media (max-width: 1099px) {
  main.blog-page {
    --blog-pad: 32px;
    /* 60px header + the tablet section spacing (120 -> 160). */
    padding: calc(180px + (100vw - 768px) * 0.1724) 0 120px;
    border-bottom-left-radius: var(--home-faq-corner-radius, 0px);
    border-bottom-right-radius: var(--home-faq-corner-radius, 0px);
  }

  .blog-page__hero {
    gap: 12px;
    padding-bottom: 40px;
  }

  .blog-page__eyebrow {
    font: var(--m-caption-1);
    letter-spacing: 1.5px;
  }

  .blog-page__title {
    font: var(--m-h2);
    letter-spacing: -1.76px;
  }

  .blog-featured {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
  }

  .blog-featured__image {
    flex: none;
    aspect-ratio: 704 / 400;
    border-radius: 24px;
  }

  .blog-featured__text {
    gap: 12px;
    padding: 0 16px 0 4px;
  }

  .blog-featured__meta {
    font: var(--m-caption-1);
    letter-spacing: 1.5px;
  }

  .blog-featured__title {
    font: var(--m-h4);
    letter-spacing: -0.52px;
  }

  .blog-featured__excerpt {
    font: var(--m-body-2);
  }

  .blog-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 16px;
  }

  .blog-page .blog-teaser-card__image {
    margin-bottom: 12px;
  }

  .blog-page .blog-teaser-card__meta {
    margin-bottom: 8px;
  }
}

@media (max-width: 767px) {
  main.blog-page {
    --blog-pad: 16px;
    padding: 160px 0 100px; /* 60px header + 100 */
  }

  .blog-featured {
    margin-bottom: 32px;
  }

  .blog-featured__image {
    aspect-ratio: 361 / 240;
  }

  .blog-page__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}
/* ==========================================================================
   BLOG ARTICLE (/blog/<slug>/) — Figma 419:10197 "1920 - Article". One
   700px reading column, centered at every width; the "get the app"
   call-out hangs 160px out to the left of it on desktop. Below 1100 the
   type switches to the Mobile/* sizes and the gutters to 32 / 16px.
   ========================================================================== */
/* Reading progress (419:10199): a 4px soft-pink track under the header with
   a berry fill (width set by initArticleProgress, main.js). Follows the
   header up when it slides away on scroll. */
.article-progress {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 38;
  padding: 16px 12px;
  background: var(--color-white);
  /* A transform, not `top`: moving it costs no layout, so it slides with the header smoothly. */
  transition: transform 0.3s ease;
  will-change: transform;
}

.site-header.is-hidden ~ .article-progress {
  transform: translateY(-72px);
}

.article-progress::before,
.article-progress__bar {
  display: block;
  height: 4px;
}

.article-progress::before {
  content: '';
  background: #ffd2ee;
}

.article-progress__bar {
  position: absolute;
  top: 16px;
  left: 12px;
  /* Full width, scaled by the reading progress: a transform is composited, a changing width
     re-lays out the bar on every frame of scrolling. */
  width: calc(100% - 24px);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  will-change: transform;
  background: var(--color-berry);
}

main.article-page {
  /* 72px header + 36px progress bar. */
  padding: 108px 0 180px;
  border-bottom-left-radius: var(--home-faq-corner-radius, 0px);
  border-bottom-right-radius: var(--home-faq-corner-radius, 0px);
  background: var(--color-bg);
}

/* Breadcrumbs (419:10202): Home > Blog > title, 14px Semibold. */
.article-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 40px 60px 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.25;
}

.article-breadcrumbs a {
  flex-shrink: 0;
  color: var(--color-berry);
  text-decoration: none;
}

.article-breadcrumbs__sep {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath opacity='.6' d='M6.03 12.71l-.77-.77L9.2 8 5.26 4.06l.77-.77L10.74 8z' fill='%23020202'/%3E%3C/svg%3E");
}

.article-breadcrumbs__current {
  min-width: 0;
  overflow: hidden;
  color: #020202;
  opacity: 0.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Main container (419:10210): 120px top, column 700 centered. */
.article-body {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding-top: 120px;
  color: #020202;
}

.article-body__header {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.article-body__meta {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-berry);
}

.article-body__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -0.88px;
  color: #020202;
}

/* Body copy: Desktop/Body Text 2 (24/1.5); section headings Desktop/
   Subhead 3 (24/1 Semibold), 60px above and 32px below; paragraphs and
   lists 24px apart; images and the call-out 60px clear of their
   neighbours. */
.article-body__content {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
}

.article-body__content > * {
  margin: 0;
}

.article-body__content > * + * {
  margin-top: 24px;
}

.article-body__content h2,
.article-body__content h3 {
  margin-top: 60px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.24px;
  color: #020202;
}

.article-body__content h2 + *,
.article-body__content h3 + * {
  margin-top: 32px;
}

.article-body__content ul,
.article-body__content ol {
  padding-left: 36px;
}

.article-body__content a:not(.article__app-link) {
  font-weight: 600;
  color: #1064ff;
  text-decoration: underline;
}

.article__figure,
.article-callout,
.article__figure + *,
.article-callout + * {
  margin-top: 60px;
}

.article__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 4;
  object-fit: cover;
}

/* Call-out (419:10266): 860 wide (hangs 160px left of the column), 4px
   berry rule 32px in, text 48px after it. */
.article-callout {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-left: -160px;
  padding: 48px 32px 48px 84px;
}

.article-callout::before {
  content: '';
  position: absolute;
  top: 48px;
  bottom: 48px;
  left: 32px;
  width: 4px;
  background: var(--color-berry);
}

.article-callout__title {
  margin: 0;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.24px;
}

.article-callout__body {
  margin: 0;
}

.article-callout .article__app-link {
  margin-top: 8px;
}

.article__app-link {
  display: inline-block;
  padding: 8px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-berry);
  text-decoration: underline;
}

/* Share row (421:11148): hairline, then copy-link / Facebook / LinkedIn /
   Instagram, right-aligned, 44px round buttons 12px apart. */
.article-share {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
}

.article-share__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 100px;
  background: none;
  color: #000;
  cursor: pointer;
}

.article-share__btn:hover {
  background: var(--color-bg-grey);
}

.article-share__btn svg {
  width: 24px;
  height: 24px;
}

.article-share__btn.is-copied::after {
  content: attr(data-copied-label);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: #020202;
  color: var(--color-white);
  font: 600 13px/1.2 var(--font-display);
  white-space: nowrap;
}

/* Tablet + phones: Mobile/* type, gutters 32 -> 16, call-out inside the
   column, 60px rounded bottom. */
@media (max-width: 1099px) {
  .article-progress {
    top: 60px;
  }

  .site-header.is-hidden ~ .article-progress {
    transform: translateY(-60px);
  }

  main.article-page {
    padding: 96px 0 120px; /* 60px header + 36px progress bar */
    border-bottom-left-radius: var(--home-faq-corner-radius, 0px);
    border-bottom-right-radius: var(--home-faq-corner-radius, 0px);
  }

  .article-breadcrumbs {
    padding: 24px 32px 8px;
  }

  .article-body {
    gap: 48px;
    max-width: calc(700px + 64px);
    padding: 60px 32px 0;
  }

  .article-body__header {
    gap: 20px;
  }

  .article-body__meta {
    font: var(--m-caption-1);
    letter-spacing: 1.5px;
  }

  .article-body__title {
    font: 600 32px/1.2 var(--font-display);
    letter-spacing: -0.64px;
  }

  .article-body__content {
    font: var(--m-body-2);
  }

  .article-body__content > * + * {
    margin-top: 20px;
  }

  .article-body__content h2,
  .article-body__content h3 {
    margin-top: 48px;
    font: 600 20px/1.2 var(--font-display);
    letter-spacing: -0.2px;
  }

  .article-body__content h2 + *,
  .article-body__content h3 + * {
    margin-top: 20px;
  }

  .article-body__content ul,
  .article-body__content ol {
    padding-left: 28px;
  }

  .article__figure,
  .article-callout,
  .article__figure + *,
  .article-callout + * {
    margin-top: 48px;
  }

  .article-callout {
    gap: 16px;
    margin-left: 0;
    padding: 0 0 0 24px;
  }

  .article-callout::before {
    top: 0;
    bottom: 0;
    left: 0;
  }

  .article-callout__title {
    font-size: 20px;
    line-height: 1.2;
  }
}

@media (max-width: 767px) {
  .article-breadcrumbs {
    padding: 20px 16px 8px;
  }

  .article-body {
    padding: 40px 16px 0;
  }

  .article-body__title {
    font-size: 28px;
    letter-spacing: -0.56px;
  }
}
/* Blog + article: 32px side gutters on tablets and on large phones / small
   tablets (600-767) too — 16px is kept for real phone widths only. */
@media (min-width: 600px) and (max-width: 767px) {
  main.blog-page {
    --blog-pad: 32px;
  }

  .article-breadcrumbs {
    padding-left: 32px;
    padding-right: 32px;
  }

  .article-body {
    padding-left: 32px;
    padding-right: 32px;
  }
}
/* "See all FAQs" under the homepage FAQ list (Figma 436:10214): 200px
   deep-berry pill, 24px below the last row, centered. */
.home-faq__more {
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

.home-faq__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  padding: 12px 24px;
  border-radius: 100px;
  background: var(--color-deep-berry);
  color: var(--color-white);
  font: 600 16px/1.5 var(--font-display);
  text-decoration: none;
  white-space: nowrap;
}
/* ==========================================================================
   FAQ PAGE (/faq/) — Figma 437:25015 "1920 - FAQ". Breadcrumbs come from
   the article page, title from the blog page, rows
   from the homepage FAQ; bottom corners round on scroll like the homepage
   FAQ (initHomeFaqCornerScroll).
   ========================================================================== */
main.faq-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 0 180px; /* 72px header */
  border-bottom-left-radius: var(--home-faq-corner-radius, 0px);
  border-bottom-right-radius: var(--home-faq-corner-radius, 0px);
  background: var(--color-bg);
}

main.faq-page .article-breadcrumbs {
  align-self: stretch;
}

/* Title 60px under the breadcrumbs, list 100px under the title (Figma
   437:29859). */
.faq-page__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 100px 100px;
  text-align: center;
}

.faq-page__list .home-faq-row__q {
  margin: 0;
}

@media (max-width: 1099px) {
  main.faq-page {
    padding: 60px 0 120px;
  }

  .faq-page__hero {
    gap: 12px;
    padding: 40px 32px 60px;
  }
}

@media (max-width: 767px) {
  .faq-page__hero {
    padding: 32px 16px 40px;
  }
}
/* Footer, 640-767 (Figma 439:34722): already the tablet footer — logo and
   a 240px "Get the app" in one row, all four link columns in one row —
   at the 768 frame's values. Below 640 it stacks (mobile, 337:6648). */
@media (min-width: 640px) and (max-width: 767px) {
  .site-footer {
    margin-top: -420px;
  }

  .site-footer__bg img {
    top: -1177px;
    left: -1265px;
    width: 2368px;
    height: 3260px;
  }

  .site-footer__content {
    padding: 540px 32px 0;
  }

  .site-footer__brand-qr {
    flex-direction: row;
    justify-content: space-between;
  }

  .site-footer__cta {
    width: 240px;
  }

  .site-footer__cols {
    display: flex;
    justify-content: space-between;
    gap: 30px;
  }

  .site-footer__bottom {
    margin: 48px 32px 0;
    padding: 48px 0 120px;
  }

  .site-footer__touch {
    font: 600 14px/1.25 var(--font-display); /* Desktop/Button text 2 */
  }
}