@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root {
  --bgDeep: #0A0610;
  --screen: #130C1A;
  --surface: #1E1228;
  --surfaceAlt: #261634;
  --border: #3A2A45;
  --ink: #F5EEF9;
  --inkSoft: #B9A8C6;
  --inkFaint: #7C6B8A;
  --estrogen: #E040A0;
  --balance: #EF9F27;
  --vitality: #3DD68C;
  --gradient: linear-gradient(to right, #E040A0, #B44BC8, #6C4BD6);
  --gradient-vert: linear-gradient(to bottom, #E040A0, #B44BC8, #6C4BD6);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, p, figure, ol, ul, dl, dd, dt {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bgDeep);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .price {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: 2.5rem; letter-spacing: -0.02em; }
h2 { font-size: 2rem; letter-spacing: -0.01em; }
h3 { font-size: 1.5rem; }

a {
  color: inherit;
  text-decoration: none;
}

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

.wrap {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 480px) {
  .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 760px) {
  .wrap {
    max-width: 1188px;
  }
}

section {
  padding: 64px 0;
}

@media (min-width: 760px) {
  section {
    padding: 96px 0;
  }
}

section:nth-of-type(odd) { background-color: var(--bgDeep); }
section:nth-of-type(even) { background-color: var(--screen); }
.page-foot { background-color: var(--bgDeep); }
.legal-strip { background-color: var(--screen); }

/* Nav */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(10, 6, 16, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-nav::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient);
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
}

.wordmark-mark {
  width: 24px;
  height: 24px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 0.875rem;
  font-weight: 500;
}

.nav-links a:not(.btn) {
  display: none;
  color: var(--inkSoft);
  transition: color 0.2s;
}

.nav-links a:not(.btn):hover {
  color: var(--ink);
}

@media (min-width: 760px) {
  .nav-links a:not(.btn) {
    display: block;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--gradient);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}

.btn:hover { opacity: 0.9; }
.btn:active { transform: scale(0.98); }

.btn.ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
}

.btn.ghost:hover {
  background: rgba(255, 255, 255, 0.05);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* Hero */
.hero {
  padding-bottom: 0;
}

.hero-copy {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.hero-copy .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-copy .pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--estrogen);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero-copy h1 {
  margin: 24px 0 16px;
}

.hero-copy h1 em {
  font-style: normal;
  color: transparent;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-copy .lede {
  font-size: 1.125rem;
  color: var(--inkSoft);
  margin-bottom: 32px;
}

.hero-copy .cta-row {
  margin-top: 32px;
}

.hero-copy .micro {
  margin-top: 16px;
  font-size: 0.75rem;
  color: var(--inkSoft);
}

/* Stage */
.stage {
  width: 100%;
  margin-top: 48px;
}

.stage-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 16px;
  gap: 16px;
}

.stage-track::-webkit-scrollbar {
  display: none;
}

.slide-wrap {
  flex: 0 0 auto;
  width: 78vw;
  scroll-snap-align: center;
}

@media (min-width: 760px) {
  .stage-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0 24px;
    max-width: 1188px;
    margin: 0 auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .slide-wrap {
    width: auto;
  }
}

.slider {
  position: relative;
  aspect-ratio: 1 / 1.242;
  border-radius: 24px;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  background: var(--surface);
}

.slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.slider .before {
  z-index: 1;
}

.slider .after {
  z-index: 2;
  clip-path: inset(0 0 0 50%);
  transition: clip-path 0.05s linear;
}

.slider .handle {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--ink);
  transform: translateX(-50%);
  pointer-events: none;
  transition: left 0.05s linear;
}

.slider .handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.slider .label {
  position: absolute;
  z-index: 3;
  top: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 6, 16, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
}

.slider .label.l { left: 16px; }
.slider .label.r { right: 16px; }

.slide-wrap figcaption {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--inkSoft);
  text-align: center;
}

.disclosure {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--inkSoft);
  font-size: 0.875rem;
  text-align: center;
  padding: 16px 24px;
  border-radius: 12px;
  max-width: 60ch;
  margin: 48px auto 0;
}

/* Sections Global */
.section-head {
  position: relative;
  padding-left: 20px;
  margin-bottom: 48px;
  text-align: left;
}

.section-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-vert);
}

.section-head h2 {
  margin-bottom: 12px;
  color: var(--ink);
}

.section-head p {
  font-size: 1.125rem;
  color: var(--inkSoft);
  max-width: 62ch;
}

/* Manifesto */
.manifesto .statement {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink);
  position: relative;
  padding-left: 20px;
  margin-bottom: 24px;
}

@media (min-width: 760px) {
  .manifesto .statement {
    font-size: 2rem;
  }
}

.manifesto .statement::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-vert);
}

.manifesto p:not(.statement) {
  color: var(--inkSoft);
  max-width: 62ch;
}

/* Timeline */
.timeline {
  list-style: none;
}

.tstep {
  position: relative;
  padding-left: 56px;
  padding-bottom: 32px;
}

@media (min-width: 760px) {
  .tstep {
    padding-bottom: 48px;
  }
}

.tstep:last-child {
  padding-bottom: 0;
}

.tstep:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.tnum {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surfaceAlt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 0.875rem;
  z-index: 1;
}

.tstep h3 {
  margin-bottom: 8px;
  color: var(--ink);
}

.tstep p {
  color: var(--inkSoft);
}

/* Rings */
.ring-rows {
  display: flex;
  flex-direction: column;
}

.ring-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}

.ring-row:first-child {
  padding-top: 0;
}

.ring-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media (min-width: 760px) {
  .ring-row {
    grid-template-columns: 300px 1fr;
    gap: 48px;
    align-items: flex-start;
  }
}

.ring-id {
  display: flex;
  flex-direction: column;
}

.ring-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-bottom: 16px;
}

.ring-id h3 {
  margin-bottom: 4px;
  color: var(--ink);
}

.ring-sub {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ring-row[data-ring="estrogen"] .ring-dot { background: var(--estrogen); }
.ring-row[data-ring="estrogen"] .ring-sub { color: var(--estrogen); }
.ring-row[data-ring="balance"] .ring-dot { background: var(--balance); }
.ring-row[data-ring="balance"] .ring-sub { color: var(--balance); }
.ring-row[data-ring="vitality"] .ring-dot { background: var(--vitality); }
.ring-row[data-ring="vitality"] .ring-sub { color: var(--vitality); }

.ring-body {
  color: var(--inkSoft);
}

/* Features */
.feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 760px) {
  .feature-list {
    grid-template-columns: 1fr 1fr;
    gap: 32px 48px;
  }
}

.feature dt {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.feature dd {
  color: var(--inkSoft);
}

/* Goals */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
}

.chip {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--inkSoft);
}

.chip strong {
  color: var(--ink);
  font-weight: 600;
}

/* Pricing */
.plan-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.plan {
  padding: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.plan:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

@media (min-width: 760px) {
  .plan-panel {
    flex-direction: row;
  }
  .plan {
    flex: 1;
    padding: 48px;
  }
  .plan:not(:last-child) {
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
}

.plan.best {
  background: var(--surfaceAlt);
}

.plan.best::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient);
}

.plan-id h3 {
  margin-bottom: 4px;
  color: var(--ink);
}

.plan .tagline {
  font-size: 0.875rem;
  color: var(--inkSoft);
  margin-bottom: 16px;
}

.plan .trial {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--vitality);
  font-weight: 500;
  margin-bottom: 24px;
}

.plan .price {
  font-size: 2.5rem;
  margin-bottom: 24px;
  color: var(--ink);
}

.plan .price small {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--inkSoft);
}

.plan ul {
  list-style: none;
  margin-bottom: 32px;
  flex-grow: 1;
}

.plan ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  color: var(--inkSoft);
}

.plan ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ink);
  font-weight: 600;
}

.plan .btn {
  width: 100%;
}

.fineprint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--inkSoft);
  max-width: 600px;
  margin: 32px auto 0;
}

.fineprint a {
  text-decoration: underline;
  color: var(--ink);
}

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

details.q {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

details.q summary {
  list-style: none;
  padding: 24px;
  padding-right: 56px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  position: relative;
}

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

details.q summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--estrogen);
  font-weight: 400;
  transition: transform 0.2s ease;
}

details.q[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

details.q p {
  padding: 0 24px 24px;
  color: var(--inkSoft);
}

/* Closing */
.closing {
  text-align: center;
}

.closing h2 {
  margin-bottom: 16px;
  color: var(--ink);
}

.closing p {
  font-size: 1.125rem;
  color: var(--inkSoft);
  max-width: 60ch;
  margin: 0 auto;
}

.closing .cta-row {
  margin-top: 32px;
}

.closing .micro {
  margin-top: 16px;
  font-size: 0.75rem;
  color: var(--inkSoft);
}

/* Legal Strip */
.legal-strip {
  padding: 24px 0;
  text-align: center;
}

.legal-strip p {
  font-size: 0.75rem;
  color: var(--inkSoft);
}

/* Footer */
.page-foot {
  padding-bottom: 48px;
}

.page-foot .rule {
  height: 1px;
  background: var(--gradient);
  margin-bottom: 32px;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
}

.foot-links a {
  font-size: 0.875rem;
  color: var(--inkSoft);
  transition: color 0.2s;
}

.foot-links a:hover {
  color: var(--ink);
}

.foot-note {
  text-align: center;
  font-size: 0.75rem;
  color: var(--inkFaint);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .pip {
    animation: none;
  }
}

/* ---- Supplement: gaps in the generated sheet, kept separate so the body above
   stays diffable against LANDING_BRIEF.md that produced it. ---- */

/* `.eyebrow` was never styled, so it rendered as ordinary body text and the section
   heads lost their label. The accent rule lives on `.section-head::before`. */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--estrogen);
  margin-bottom: 10px;
}

/* inkFaint on the footer's `screen` background measures 3.95:1 — under AA, and this line
   carries the "not medical advice" wording, so it is the last text that may fade out. */
.foot-note {
  color: var(--inkSoft);
}

/* The generated `.ring-id` stacks the dot on its own line, which pushes the ring's name a
   line below the body text it belongs to and leaves the row reading as two unrelated
   columns. Put the dot on the name's line instead and the row scans left to right. */
.ring-id {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-content: start;
}

.ring-dot {
  margin-bottom: 0;
  align-self: center;
}

.ring-id h3,
.ring-sub {
  grid-column: 2;
}

@media (min-width: 760px) {
  .ring-row {
    grid-template-columns: 340px 1fr;
  }
  .ring-body {
    max-width: 58ch;
  }
}

/* The reduced-motion block stops `.pip`, but the pulse is declared on `.hero-copy .pip`,
   which out-specifies it — so the dot kept blinking for anyone who asked it not to. */
@media (prefers-reduced-motion: reduce) {
  .hero-copy .pip {
    animation: none;
  }
}

/* A swipe carousel and a drag slider both want the horizontal pan gesture, and the browser
   hands it to the scroller — on a phone the divider hardly moved while the strip slid under
   the finger. The sliders are the page, so the carousel loses: stack them instead.
   `pan-y` keeps vertical page scrolling working from anywhere on the image while reserving
   horizontal movement for the divider. */
.slider {
  touch-action: pan-y;
}

@media (max-width: 759.98px) {
  .stage-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .slide-wrap {
    width: auto;
    scroll-snap-align: none;
  }
}

/* Same lockup as the app's home header: rings, FemQ, then AI as a descriptor on
   the same baseline. The app sets 24/18/13 px, so the mark is 1.33x the
   wordmark and "AI" 0.72x it — kept as ratios so one font-size drives all three. */
.wordmark {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
}
.wordmark-mark {
  width: 1.33em;
  height: 1.33em;
  /* An img's baseline is its bottom edge, so baseline alignment leaves the
     ring's centre 0.665em above the baseline; dropping it by the difference to
     half Fraunces' 0.72em cap height puts the ring on the cap band's centre.
     `align-self: center` centred it on the flex line instead, which includes
     the Q's descender, and read as the wordmark sitting high. */
  align-self: baseline;
  position: relative;
  top: 0.305em;
}
.wordmark .name { line-height: 1.15; }
.wordmark .ai {
  font-family: var(--font-body);
  font-size: 0.72em;
  font-weight: 500;
  color: var(--inkSoft);
  line-height: 1.2;
}

.closing .slogan {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 600;
  color: var(--estrogen);
  margin-bottom: 8px;
}