/* perigirlies landing.
   ONE locked light theme: blush ground, heat coral accent, plum ink. No dark mode,
   no section that inverts, no theme flip anywhere on the page.
   Type: Nunito does display and body (rounded terminals carry the warmth); the system
   serif appears in italic only, and only for her voice (the wordmark's "girlies",
   the bubble thread's closing line, the demo quote).
   Shape rule, followed everywhere: interactive controls are full pills,
   cards are 26px, small tiles and inputs are 18px.
   Motion is gated behind html.motion-ok and collapses under prefers-reduced-motion;
   the page is fully readable with landing.js absent. */

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--sans);
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  font-kerning: normal;
  overflow-x: hidden;
}

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 48px); }
.narrow { max-width: 720px; }

h1, h2 { text-wrap: balance; font-weight: 800; letter-spacing: -0.03em; }
h1 { font-size: clamp(2.9rem, 7.6vw, 5.1rem); line-height: 1.02; }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.75rem); line-height: 1.1; }

p { text-wrap: pretty; }
.fine { font-size: 0.8rem; color: var(--muted); line-height: 1.6; }

::selection { background: var(--blush-deep); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--flash-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- topbar ---------- */

/* The bar itself is full-bleed so the blur reaches the viewport edges, but its
   contents ride the same .wrap rail as every section below. Anything else and the
   wordmark floats ~380px outboard of the headline on a wide screen. */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: 64px;
  /* A fading scrim, not a band. A flat wash cut a visible seam across the heat bloom,
     and a transparent bar is illegible on menopause-rating-scale.html, which does not
     load landing.js and so never receives .scrolled. The gradient keeps the wordmark
     readable over anything scrolling beneath it without drawing an edge. */
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--paper) 90%, transparent) 0%,
    color-mix(in oklab, var(--paper) 72%, transparent) 58%,
    transparent 100%
  );
  /* span the border row too, and never tile: the default padding-box origin sizes the
     gradient to 63px and repeats its lightest stop into the 1px border, drawing a
     bright hairline right where the seam is supposed to disappear. */
  background-origin: border-box;
  background-repeat: no-repeat;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-ui) ease, background var(--dur-ui) ease;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}
.topbar.scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--paper); }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar.scrolled { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.heat { width: 17px; height: 19px; color: var(--flash); align-self: center; flex: none; }

/* ---------- buttons & links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  padding: 15px 32px;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-tap) var(--ease-spring),
              background var(--dur-ui) ease,
              box-shadow var(--dur-ui) ease;
}
/* coral fill with plum-black label: 5.6:1, well clear of AA.
   White on this coral would be 3.2:1 and is why it is not used. */
.btn-flash {
  background: var(--flash);
  color: var(--ink);
  box-shadow: 0 2px 0 var(--flash-deep), 0 10px 26px rgba(176, 58, 30, 0.24);
}
.btn-small { font-size: 0.92rem; padding: 11px 22px; }
.btn-big { font-size: 1.16rem; padding: 19px 44px; }
@media (hover: hover) and (pointer: fine) {
  .btn-flash:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--flash-deep), 0 16px 34px rgba(176, 58, 30, 0.3);
  }
}
.btn-flash:active { transform: translateY(1px); box-shadow: 0 0 0 var(--flash-deep), 0 6px 16px rgba(176, 58, 30, 0.2); }

.ghost-link {
  font-weight: 700;
  color: var(--flash-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--blush-deep);
  padding-bottom: 2px;
  transition: border-color var(--dur-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .ghost-link:hover { border-bottom-color: var(--flash); }
}

/* ---------- hero: asymmetric split, the result card overlapping a warm bloom ---------- */

.hero {
  position: relative;
  padding: clamp(104px, 13vh, 128px) 0 clamp(56px, 8vh, 96px);
  overflow: clip;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
/* two soft blooms, the hot flash rendered as warmth rather than a dark glow */
.hero::before {
  width: 76vw; height: 76vw;
  right: -24vw; top: -32vw;
  background: radial-gradient(circle, color-mix(in oklab, var(--flash) 19%, transparent) 0%, transparent 66%);
}
.hero::after {
  width: 54vw; height: 54vw;
  left: -22vw; bottom: -27vw;
  background: radial-gradient(circle, color-mix(in oklab, var(--blush-deep) 62%, transparent) 0%, transparent 66%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 40%, 400px);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero h1 .line { display: inline-block; }
.lede {
  margin-top: 22px;
  font-size: clamp(1.08rem, 1.9vw, 1.26rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 25em;
  text-wrap: balance;
}
.cta-row { display: flex; align-items: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; }

/* hero entrance, once, gated */
.motion-ok .hero h1 .line,
.motion-ok .lede,
.motion-ok .cta-row,
.motion-ok .hero-card-seat {
  animation: rise var(--dur-reveal) var(--ease-out) both;
}
.motion-ok .hero h1 .line:nth-child(2) { animation-delay: 70ms; }
.motion-ok .lede { animation-delay: 150ms; }
.motion-ok .cta-row { animation-delay: 220ms; }
.motion-ok .hero-card-seat { animation-delay: 150ms; animation-duration: 760ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* the result card: the real product output, softened like a shared screenshot */
.hero-card-seat { justify-self: end; }
.mock-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px 26px 28px;
  width: min(400px, 100%);
}
.mock-chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flash-deep);
  background: var(--flash-soft);
  border-radius: var(--radius-pill);
  padding: 7px 15px;
}
.mock-verdict { font-size: 1.22rem; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; margin-top: 14px; }
.mock-dial-row { display: flex; align-items: center; gap: 20px; margin-top: 18px; }
.mock-dial { position: relative; width: 120px; height: 120px; flex: none; }
.mock-dial svg { transform: rotate(-90deg); }
.mock-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mock-num b { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.mock-num span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.mock-bench { font-size: 0.94rem; color: var(--muted); line-height: 1.45; }
.mock-bench b { color: var(--ink); font-weight: 800; }

.mock-bars { margin-top: 18px; display: grid; gap: 10px; }
.mock-bar { display: grid; grid-template-columns: 66px 1fr 26px; align-items: center; gap: 10px; }
.mock-bar span { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.mock-bar i { height: 9px; border-radius: var(--radius-pill); width: var(--w); }
.mock-bar b { font-size: 0.8rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- facts band ---------- */

.facts { background: var(--paper-2); border-block: 1px solid var(--line); }
.facts-inner {
  display: grid;
  justify-items: center;
  gap: clamp(20px, 3vh, 30px);
  padding-block: clamp(26px, 4vh, 38px);
}

/* the social-proof slot. Same shape as the avatar strips competitors run, but the
   circles are the four scored domains and the claim is the instrument's provenance,
   which a reader can check. No user count: there are no users yet, and a real one
   would need server-side tallying, which the privacy claim forbids. */
.proof-pill {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: var(--card);
  border-radius: var(--radius-pill);
  padding: 9px 22px 9px 11px;
  box-shadow: var(--shadow-sm);
  font-size: 0.93rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: left;
}
.proof-pill b { color: var(--ink); font-weight: 800; }
.domain-dots { display: inline-flex; flex: none; }
.domain-dots i {
  width: 27px; height: 27px;
  border-radius: 50%;
  border: 2.5px solid var(--card);
  margin-right: -10px;
}
.domain-dots i:nth-child(1) { background: var(--vaso); }
.domain-dots i:nth-child(2) { background: var(--psych); }
.domain-dots i:nth-child(3) { background: var(--phys); }
.domain-dots i:nth-child(4) { background: var(--sexual); margin-right: 0; }

.facts-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 52px);
}
.facts-grid p { font-size: 0.98rem; line-height: 1.55; color: var(--muted); }
.facts-grid b { color: var(--ink); font-weight: 800; }

/* ---------- recognition: the group chat, arriving one message at a time ---------- */

.recognize { padding: clamp(72px, 11vh, 132px) 0; }
.asks { text-align: center; margin-bottom: clamp(30px, 5vh, 48px); }

.feels { list-style: none; display: grid; gap: 12px; max-width: 620px; margin: 0 auto; }
.feels li {
  justify-self: start;
  max-width: min(88%, 30em);
  background: var(--card);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 8px;
  box-shadow: var(--shadow-sm);
  padding: 15px 22px;
  font-size: clamp(1.02rem, 2vw, 1.14rem);
  line-height: 1.45;
}
/* every third message answers from the other side, so the column reads as a conversation */
.feels li:nth-child(3n) {
  justify-self: end;
  background: var(--blush);
  border-radius: var(--radius-lg) var(--radius-lg) 8px var(--radius-lg);
}
.feels li:last-child {
  background: var(--flash-soft);
  border: 2px solid var(--blush-deep);
  font-weight: 700;
}

.turn {
  max-width: 620px;
  margin: clamp(30px, 5vh, 44px) auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.16rem, 2.4vw, 1.42rem);
  line-height: 1.5;
  text-align: center;
}
.turn a { color: var(--flash-deep); text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ---------- what you get: bento, the score cell demonstrates itself ---------- */

.what { padding: clamp(72px, 11vh, 132px) 0; background: var(--paper-2); border-block: 1px solid var(--line); }
.what-head { max-width: 24ch; }

.gets {
  list-style: none;
  margin-top: clamp(30px, 5vh, 48px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 14px;
}
.get {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
}
.get h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.02em; }
.get p { margin-top: 6px; font-size: 0.96rem; line-height: 1.55; color: var(--muted); }

/* the tall cell: the dial IS the score the copy describes, so the section stops
   saying the same thing twice and the right column stops running out of content */
.get-score {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  padding: 32px 30px 30px;
  background: linear-gradient(172deg, var(--flash-soft) 0%, var(--card) 54%);
}
.get-dial { position: relative; width: 180px; height: 180px; align-self: center; margin-bottom: 24px; }
.get-dial svg { transform: rotate(-90deg); }
.demo-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.demo-num b { font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.demo-num span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.demo-sentence {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
}
/* one tinted cell so the grid is not four white boxes */
.get-share {
  background: linear-gradient(150deg, var(--blush) 0%, var(--flash-soft) 100%);
  box-shadow: none;
}
.what > .wrap > .btn { margin-top: clamp(26px, 4vh, 38px); }

/* ---------- doctor: the sheet breaks out of the container to the right ---------- */

.doctor { padding: clamp(72px, 11vh, 132px) 0; overflow: clip; }
.doctor-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.doctor-copy p { margin-top: 16px; color: var(--muted); font-size: 1.02rem; }
.doctor-copy h2 + p { margin-top: 22px; }

.sheet-mock {
  order: 2;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 30px 24px;
  margin-right: clamp(-104px, -7vw, 0px);
}
.sheet-head { font-size: 1.04rem; font-weight: 800; letter-spacing: -0.015em; }
.sheet-mock table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.92rem; }
.sheet-mock td { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.sheet-mock td:last-child { text-align: right; color: var(--ink); }
.sheet-mock tr:last-child td { border-bottom: none; }
.sheet-mock b { font-weight: 800; color: var(--flash-deep); }
.sheet-foot { margin-top: 14px; font-size: 0.74rem; color: var(--faint); }

/* ---------- full-bleed still ---------- */

.still { border-block: 1px solid var(--line); line-height: 0; }
.still img {
  width: 100%;
  height: clamp(280px, 46vh, 520px);
  object-fit: cover;
  object-position: center 42%;
  display: block;
}

/* ---------- privacy: full-width statement on the blush band ---------- */

.privacy { padding: clamp(76px, 12vh, 140px) 0; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.privacy-lede { margin-top: 20px; font-size: clamp(1.04rem, 2vw, 1.18rem); color: var(--muted); max-width: 40em; }
.proof-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  margin: clamp(30px, 5vh, 44px) 0 26px;
}
.proof-row p {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
  box-shadow: var(--shadow-sm);
}
/* the load-bearing claim gets the tall tinted cell, so the grid is not three
   identical boxes and the three items fill exactly three cells */
.proof-row p:first-child {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 26px;
  font-size: 1.02rem;
  background: linear-gradient(152deg, var(--blush) 0%, var(--flash-soft) 100%);
  box-shadow: none;
}
.proof-row p:first-child b { font-size: 1.32rem; margin-bottom: 6px; letter-spacing: -0.02em; }
.proof-row b { display: block; color: var(--ink); font-weight: 800; margin-bottom: 3px; }

/* ---------- group chat: the share card as the artifact ---------- */

.chat { padding: clamp(72px, 11vh, 132px) 0; }
.chat-inner { text-align: center; }
.chat-lede { margin: 18px auto 0; color: var(--muted); max-width: 38em; }
.share-seat { display: inline-block; margin-top: clamp(32px, 5vh, 48px); }
/* solid coral with a plum-black label: 5.6:1, the same pairing as the CTA.
   A coral gradient here would drop white text to 3.2:1 at the light end. */
.share-mock {
  background: var(--flash);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 2px 0 rgba(255, 255, 255, 0.34);
  padding: 32px 44px 26px;
  width: min(320px, 82vw);
}
.share-brand { font-size: 1.06rem; font-weight: 800; }
.share-brand em { font-family: var(--serif); font-style: italic; font-weight: 500; }
.share-score { font-size: 6rem; line-height: 1; font-weight: 800; letter-spacing: -0.05em; margin-top: 8px; }
.share-sub { font-family: var(--serif); font-style: italic; font-size: 1.04rem; margin-top: 6px; }
.share-url { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 20px; }

/* ---------- faq ---------- */

.faq { padding: clamp(64px, 10vh, 120px) 0; background: var(--paper-2); border-block: 1px solid var(--line); }
.faq h2 { margin-bottom: clamp(24px, 4vh, 36px); }
.faq details {
  background: var(--card);
  border-radius: var(--radius);
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 54px 18px 22px;
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 22px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--flash-deep);
  border-bottom: 2.5px solid var(--flash-deep);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-ui) var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq .a { padding: 0 22px 20px; }
.faq .a p { color: var(--muted); font-size: 0.99rem; }

/* ---------- closer ---------- */

.closer { position: relative; padding: clamp(88px, 14vh, 160px) 0; overflow: clip; text-align: center; }
.closer::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 70vw; height: 70vw;
  max-width: 900px; max-height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in oklab, var(--flash) 20%, transparent) 0%, transparent 62%);
  pointer-events: none;
}
.closer-inner { position: relative; z-index: 1; }
.closer .btn { margin-top: clamp(26px, 4vh, 38px); }
.closer-fine { margin-top: 20px; font-size: 0.84rem; color: var(--muted); }

/* ---------- footer ---------- */

.footer { background: var(--paper-2); border-top: 1px solid var(--line); padding: clamp(36px, 6vh, 56px) 0 clamp(40px, 6vh, 60px); }
.footer-inner { display: grid; gap: 16px; }
.wordmark-foot { font-size: 1.16rem; font-weight: 800; letter-spacing: -0.025em; }
.wordmark-foot em { font-family: var(--serif); font-style: italic; font-weight: 500; }
.footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer nav a { font-size: 0.94rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.footer nav a:hover { color: var(--flash-deep); }
.footer .fine { max-width: 62em; }

/* ---------- scroll reveals ---------- */

.reveal { opacity: 1; }
.motion-ok .reveal {
  opacity: 0;
  transform: translateY(14px) scale(0.985);
}
.motion-ok .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease-out) var(--d, 0ms),
              transform 560ms var(--ease-spring) var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- mobile: every multi-column layout collapses explicitly ---------- */

@media (max-width: 900px) {
  .hero { padding-top: clamp(84px, 12vh, 92px); }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-card-seat { width: 100%; }
  .mock-card { width: 100%; }
  .gets { grid-template-columns: 1fr; }
  .get-score { grid-column: auto; grid-row: auto; }
  .doctor-grid { grid-template-columns: 1fr; gap: 34px; }
  .sheet-mock { margin-right: 0; }
  .proof-row { grid-template-columns: 1fr; }
  .proof-row p:first-child { grid-row: auto; padding: 20px 22px; }
}

@media (max-width: 640px) {
  body { font-size: 1.02rem; }
  .facts-grid { grid-template-columns: 1fr; gap: 16px; }
  .proof-pill { font-size: 0.86rem; padding-right: 18px; }
  .feels li { max-width: 94%; }
  .btn { width: auto; }
  .cta-row { gap: 18px; }
  .mock-dial-row { gap: 14px; }
  .mock-card { padding: 22px 20px 24px; }
  .sheet-mock { padding: 22px 20px 20px; }
  .share-mock { padding: 28px 32px 22px; }
  .share-score { font-size: 5rem; }
}