/* Redesigned home (en, ru). Builds on site.css: same lime button, glass and phone frame.
   Phase colours are the app's (PhaseLook.swift: glowStyle, ink, orb). Accent words: serif italic with the logo's gradient. */
@font-face { font-family: ElluSerif; src: url(/fonts/cormorant-italic-latin.woff2) format("woff2"); font-style: italic; font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: ElluSerif; src: url(/fonts/cormorant-italic-cyrillic.woff2) format("woff2"); font-style: italic; font-weight: 500; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

.v2 {
  --rose: #F48FB8; --violet: #B43BF0; --logo: linear-gradient(100deg, #F78FBF 0%, #D46BDD 55%, #B43BF0 100%);
  --lav: #E6DDF7; --blush2: #FBD9E4;
  --serif: ElluSerif, "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
.v2 .ambient { background:
  radial-gradient(60vmax 50vmax at 4% 2%, var(--peach), transparent 68%),
  radial-gradient(60vmax 56vmax at 102% 30%, var(--lav), transparent 68%),
  radial-gradient(52vmax 46vmax at 2% 98%, var(--blush2), transparent 68%); }
[data-theme="dark"] .v2 .ambient { background: none; }


/* Accent words */
.v2 em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; padding: 0 .04em .06em 0;
  background: var(--logo); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Tight headings: lines sit close, the serif accent doesn't push its line down */
.v2 h2 { line-height: .94; }
.v2 h1 em, .v2 h2 em { font-size: 1.12em; line-height: .8; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--edge); font-size: 14px; color: var(--soft); margin-bottom: 22px; }
.eyebrow::before { content: ""; width: 9px; height: 11px; background: url(/img/logo-drop.png) center / contain no-repeat; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
li.reveal:nth-child(2) { transition-delay: .08s; } li.reveal:nth-child(3) { transition-delay: .16s; } li.reveal:nth-child(4) { transition-delay: .24s; }


/* ---------- Hero: one bright gradient shape holds everything: the copy, the woman, the phone ---------- */
.vh { --pad: clamp(24px, 5vw, 84px); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px);
  min-height: max(calc(100vh - 96px), 660px); margin: 14px var(--bleed) 0; padding: clamp(36px, 6vh, 80px) var(--pad) 0; border-radius: clamp(28px, 4vw, 56px); color: #1E0E22;
  background: radial-gradient(60% 70% at 12% 18%, #FFD3B8, transparent 62%), radial-gradient(55% 60% at 88% 12%, #E2B4FF, transparent 62%), radial-gradient(70% 80% at 72% 100%, #FF8DBE, transparent 66%), linear-gradient(120deg, #FFB3A2, #F79AC6 46%, #C6A0F6);
  box-shadow: 0 40px 90px -40px rgba(200, 80, 150, .55); }
/* soft light drifting over the gradient */
.vh::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; opacity: .55;
  background: radial-gradient(30% 30% at 30% 40%, rgba(255, 255, 255, .85), transparent 70%), radial-gradient(26% 26% at 70% 60%, rgba(255, 240, 200, .6), transparent 70%);
  animation: vh-light 18s ease-in-out infinite alternate; }
@keyframes vh-light { to { transform: translate(8%, -6%) rotate(8deg); } }
.vh-copy { align-self: center; position: relative; z-index: 2; padding-bottom: clamp(36px, 6vh, 80px); }
.vh h1 { font-size: clamp(48px, 6.4vw, 104px); line-height: .9; letter-spacing: -.05em; margin-bottom: 24px; text-wrap: balance; }
.vh h1 em { background: linear-gradient(100deg, #8A1FB8, #5E1AA8); -webkit-background-clip: text; background-clip: text; }
.vh .lead { margin-bottom: 30px; max-width: 30em; color: rgba(30, 14, 34, .8); }
.vh .fine { margin-top: 12px; color: rgba(30, 14, 34, .7); }
.vh .eyebrow { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); color: rgba(30, 14, 34, .78); }
.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; }
.trust li { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; }
.trust li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%23151716' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px; }
/* the woman stands on the shape's bottom edge, flush with its right side; the phone beside her */
.vh-art { position: relative; z-index: 1; align-self: stretch; min-height: 520px; }
.vh-girl { position: absolute; right: calc(var(--pad) * -1); bottom: 0; height: 96%; width: auto; max-width: none; animation: rise 1.4s var(--ease) both; }
/* a big phone with a thin bezel; its lower part runs past the shape's bottom edge */
.vh-phone { position: absolute; z-index: 2; left: 0; bottom: clamp(-90px, -5vw, -32px); width: clamp(240px, 22vw, 340px); padding: .8%; border-radius: 12.4% / 5.8%; box-shadow: 0 40px 70px -16px rgba(90, 20, 70, .5), 0 0 0 1px rgba(255, 255, 255, .3); animation: phoneIn 1.2s .35s var(--ease) both; }
/* The copy comes in one piece after another: up out of a soft blur; the accent words slide in on their own. */
.vh .reveal { transform: translateY(32px); filter: blur(10px); transition: opacity 1s var(--ease), transform 1.2s var(--ease), filter 1s var(--ease); }
.vh .reveal.in { transform: none; filter: none; }
.vh .eyebrow.reveal { transition-delay: .1s; }
.vh h1.reveal { transition-delay: .22s; }
.vh .lead.reveal { transition-delay: .5s; }
.vh .vh-copy > div.reveal { transition-delay: .66s; }
.vh .trust.reveal { transition-delay: .82s; }
.vh h1 em { display: inline-block; }
.vh h1.reveal em { opacity: 0; }
.vh h1.reveal.in em { animation: em-in 1.3s .62s var(--ease) both; }
@keyframes em-in { from { opacity: 0; transform: translateX(-26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.vh .reveal.in .store { animation: pop-in .9s .72s var(--ease) both, pill-sheen 6s 1.6s cubic-bezier(.5, 0, .3, 1) infinite; }
.vh .reveal.in .store + .store { animation-delay: .84s, 2.1s; }
.vh .trust.in li { animation: pop-in .8s var(--ease) both; }
.vh .trust.in li:nth-child(1) { animation-delay: .9s; } .vh .trust.in li:nth-child(2) { animation-delay: 1s; } .vh .trust.in li:nth-child(3) { animation-delay: 1.1s; }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .vh .reveal { filter: none; } .vh h1.reveal em { opacity: 1; animation: none; } .vh .reveal.in .store, .vh .trust.in li { animation: none; } }
/* the phone plays a recording of the app (scripts/hero-video) */
.vh-phone video { display: block; width: 100%; aspect-ratio: 540 / 1174; object-fit: cover; border-radius: 11.8% / 5.4%; background: #F6E6EC; }
@keyframes rise { from { opacity: 0; transform: translateY(40px) scale(.97); } }
@keyframes phoneIn { from { opacity: 0; transform: translateY(46px); } }
@keyframes float { 50% { translate: 0 -12px; } }
@keyframes breathe { to { transform: scale(1.05); } }

/* ---------- Intro: centred ---------- */
.v2 section.intro, .v2 section.life, .v2 section.now { padding: clamp(80px, 11vw, 160px) var(--gut) 0; }
.intro { text-align: center; }
.intro .sec-head { max-width: 860px; margin: 0 auto clamp(28px, 4vw, 56px); }
.intro .label { justify-content: center; }
.intro .lead { margin-left: auto; margin-right: auto; }
.intro-row { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin: 0 auto; }
.intro-row li:nth-child(1) { margin-top: 64px; } .intro-row li:nth-child(2) { margin-top: 0; } .intro-row li:nth-child(3) { margin-top: 64px; }
/* Hover a phone: its caption comes up in a frosted shape with a blinking dot of its own colour */
.tip-fig { position: relative; outline: none; cursor: default; }
.tip { position: absolute; z-index: 2; left: -8%; right: -8%; bottom: 9%; padding: 16px 18px 17px; border-radius: 22px; text-align: left;
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .75); box-shadow: 0 24px 50px -20px rgba(120, 60, 110, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  opacity: 0; transform: translateY(18px) scale(.96); filter: blur(6px); transition: opacity .45s var(--ease), transform .7s var(--ease), filter .5s var(--ease); pointer-events: none; }
.tip-fig:hover .tip, .tip-fig:focus-visible .tip { opacity: 1; transform: none; filter: none; }
.tip h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 5px; }
.tip p { font-size: 14px; line-height: 1.42; color: var(--ink); opacity: .78; }
.blink { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--tip); box-shadow: 0 0 10px var(--tip); animation: blink 1.4s ease-in-out infinite; }
.blink::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--tip); animation: blink-ring 1.4s ease-out infinite; }
@keyframes blink { 50% { opacity: .45; } }
@keyframes blink-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
[data-theme="dark"] .tip { background: rgba(28, 24, 32, .55); border-color: rgba(255, 255, 255, .14); }
@media (hover: none) {
  .tip { position: relative; left: auto; right: auto; bottom: auto; margin: -64px 6% 0; opacity: 1; transform: none; filter: none; }
}

/* ---------- Pain → relief (scroll-driven, --p from 0 to 1) ---------- */
.pain { --p: 0; position: relative; height: 290vh; margin-top: clamp(80px, 10vw, 140px); }
.pain-stick { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 56px); padding: 76px var(--gut) 0; overflow: hidden; }
.pain-stick::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: clamp(28px, 4vw, 52px); margin: 0 var(--bleed);
  background: radial-gradient(70% 80% at 30% 50%, #F6CDD4, #EFBAC4 60%, #E8AEBB);
  opacity: calc(1 - var(--k)); transition: opacity .2s linear; }
.pain-stick::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: clamp(28px, 4vw, 52px); margin: 0 var(--bleed);
  background: radial-gradient(70% 80% at 30% 50%, #FFE6D8, #FBD3D4 60%, #F2CBE3);
  opacity: var(--k); }
.pain { --k: clamp(0, calc((var(--p) - .38) / .22), 1); --a: clamp(0, calc(1 - (var(--p) - .28) / .14), 1); --b: clamp(0, calc((var(--p) - .52) / .14), 1); }
/* The woman stands on the bottom edge of the card, cut just below the waist. */
.pain-art { position: relative; justify-self: center; align-self: end; height: min(calc(100vh - 86px), 960px); aspect-ratio: 650 / 910; }
.pain-art .girl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 24px 40px rgba(110, 30, 50, .16)); }
.pain-art .calm { opacity: var(--k); }
.pain-art .girl:not(.calm) { opacity: calc(1 - var(--k)); }
.spot { position: absolute; z-index: 2; opacity: var(--a); transform: scale(calc(.85 + .15 * var(--a))); }
.spot i { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, #FF5A3C 30%, rgba(232, 72, 52, .55) 55%, transparent 72%); animation: throb 1.6s ease-in-out infinite; }
.spot i::after { content: ""; position: absolute; inset: -16px; border-radius: 50%; border: 1.5px solid rgba(255, 90, 60, .55); animation: ring 1.6s ease-out infinite; }
.spot span { position: absolute; top: -20px; white-space: nowrap; padding: 9px 14px; border-radius: 16px; font-size: 13px; line-height: 1.25; color: #3A1210;
  background: rgba(255, 255, 255, .3); border: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 10px 30px rgba(110, 30, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); text-shadow: 0 1px 1px rgba(255, 255, 255, .35); }
.spot span b { display: block; font-weight: 600; }
.spot-head { left: 45%; top: 11%; } .spot-head span { right: 30px; }
.spot-mood { left: 62%; top: 33%; } .spot-mood span { left: 30px; }
.spot-belly { left: 43%; top: 70%; } .spot-belly span { right: 30px; }
.spot-back { left: 66%; top: 58%; } .spot-back span { left: 30px; }
.spot-belly i, .spot-back i { animation-delay: .4s; } .spot-belly i::after, .spot-back i::after { animation-delay: .4s; }
@keyframes throb { 50% { transform: scale(1.25); } }
@keyframes ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.pain-copy { position: relative; min-height: 480px; margin-right: clamp(0px, 4vw, 80px); }
.pc { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.pc-in { width: fit-content; max-width: 100%; }
.pc-in > h2, .pc-in > .lead { contain: inline-size; }
.pc-b h2 em { display: block; width: fit-content; }
.pc h2 { font-size: clamp(38px, 5vw, 76px); }
.pc-a { opacity: var(--a); transform: translateY(calc((1 - var(--a)) * -40px)); color: #3A1210; }
.pc-a .lead, .pc-a .label { color: rgba(58, 18, 16, .72); }
.pc-a em { background: linear-gradient(100deg, #8E1F14, #C2342A 60%, #9B1F4A); -webkit-background-clip: text; background-clip: text; }
.pc-a .label i { background: #FF5A3C; box-shadow: 0 0 8px #FF5A3C; }
.pc-b { opacity: var(--b); transform: translateY(calc((1 - var(--b)) * 40px)); pointer-events: none; }
/* the relief card stays light in both themes, so its text stays dark */
.pc-b { color: #151716; }
.pc-b .lead { color: rgba(21, 23, 22, .82); }
.pc-b em { background: linear-gradient(100deg, #E8664A, #D46BDD 60%, #B43BF0); -webkit-background-clip: text; background-clip: text; }
.pain-hint { margin-top: 26px; color: rgba(58, 18, 16, .6); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chips li { padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .7); border: 1px solid #fff; font-size: 15px; font-weight: 500; color: #151716; box-shadow: 0 8px 24px rgba(200, 110, 120, .14); }
.chips li::before { content: "✓"; margin-right: 8px; color: #2A7A4E; font-weight: 700; }

/* ---------- The drop over the sky, and the four phases ---------- */
.drops { --d: 0; --lap: clamp(96px, 9vw, 130px); padding: clamp(40px, 6vw, 80px) 0 0; }
.drops-sky { position: relative; margin: 0 var(--bleed); height: min(100vh, 980px); min-height: 600px; border-radius: clamp(28px, 4vw, 52px); overflow: hidden; }
.drops-sky > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - .12 * var(--d))); }
.drops-sky::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(250, 225, 240, .55), transparent 45%); }
/* The whole drop fits between the top edge and the cards; JS shakes it like water (--sx, --sy, --sk, --mx). */
.drop { position: absolute; z-index: 1; left: 57%; top: 4%; height: 90%; aspect-ratio: 676 / 824; transform: translateX(-50%) scale(calc(1.08 - .08 * var(--d))); transform-origin: 50% 0; animation: float 7s ease-in-out infinite; }
.drop img { display: block; width: 100%; height: 100%; transform-origin: 50% 78%; cursor: pointer;
  transform: translate(var(--mx, 0px), calc((1 - var(--d)) * 46px)) skewX(var(--sk, 0deg)) scale(var(--sx, 1), var(--sy, 1));
  filter: drop-shadow(0 34px 50px rgba(150, 60, 170, .3)); -webkit-user-drag: none; user-select: none; }
.drops-head { position: absolute; z-index: 2; left: clamp(24px, 6vw, 96px); top: clamp(36px, 7vw, 100px); max-width: min(480px, 34%); color: #2E1238; }
.drops-head h2 { font-size: clamp(40px, 5.6vw, 88px); }
.drops-head .lead { color: rgba(46, 18, 56, .78); }
.drops-head .label { color: rgba(46, 18, 56, .6); }
.phase-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); margin: calc(var(--lap) * -1) calc(var(--bleed) + clamp(24px, 6vw, 96px)) 0; }
.ph { position: relative; overflow: hidden; padding: clamp(16px, 1.6vw, 24px); min-height: 226px; border-radius: 26px; color: var(--ink2); border: 1px solid rgba(255, 255, 255, .7);
  background: radial-gradient(120% 90% at 100% 0%, var(--g1), transparent 58%), radial-gradient(110% 90% at 0% 100%, var(--g3), transparent 60%), var(--base);
  box-shadow: 0 30px 60px -20px var(--sh); }
.ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: overlay; background: radial-gradient(circle, #fff .6px, transparent 1px) 0 0 / 5px 5px; }
.ph-period { --base: #FFE0D6; --g1: #E8664A; --g3: #FFD3C4; --ink2: #4A1A14; --sh: rgba(216, 88, 74, .55); --o1: #FFD3C4; --o2: #F0907A; --o3: #B8483A; }
.ph-follicular { --base: #E4F7E0; --g1: #3FAE6A; --g3: #DDF5D8; --ink2: #123A2B; --sh: rgba(63, 174, 106, .5); --o1: #E6F7A8; --o2: #9BDD72; --o3: #3F8F66; }
.ph-ovulation { --base: #FBD3DF; --g1: #F26A3C; --g3: #F8C6D7; --ink2: #3A1730; --sh: rgba(226, 85, 122, .5); --o1: #FFE3A8; --o2: #FF9A6A; --o3: #E0566F; }
.ph-luteal { --base: #EAE5FF; --g1: #6E5BE0; --g3: #E3DCFF; --ink2: #241D5C; --sh: rgba(110, 91, 224, .5); --o1: #E3DCFF; --o2: #A897F2; --o3: #5F52C4; }
/* The app's PhaseOrb: a glowing ball that breathes, rings spread from it and fade (CyclePhasesView.swift). */
.orb { position: relative; display: block; width: 52px; height: 52px; margin: 12px 0 46px 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 6%, var(--o1) 24%, var(--o2) 56%, var(--o3) 96%);
  box-shadow: 0 0 22px var(--o2), inset -5px -7px 14px rgba(0, 0, 0, .1); animation: breath 1.57s ease-in-out infinite alternate; }
.orb::before, .orb::after, .orb b { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--o3); opacity: 0; animation: spread 3s linear infinite; }
.orb::after { animation-delay: -1s; } .orb b { animation-delay: -2s; }
@keyframes breath { from { transform: scale(.96); } to { transform: scale(1.04); } }
@keyframes spread { from { transform: scale(1); opacity: .55; } to { transform: scale(2); opacity: 0; } }
.ph-days { font: 400 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
.ph h3 { font-size: clamp(20px, 1.7vw, 25px); font-weight: 500; letter-spacing: -.02em; margin-bottom: 8px; }
.ph p:last-child { font-size: 14px; line-height: 1.42; opacity: .85; }
.drops-note { padding: 16px var(--gut) 0; }

/* ---------- Every day with Ellu: a pinned photo, the steps change under the quote, the phone follows ---------- */
.life .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.life-scroll { position: relative; height: calc(100vh + 4 * 70vh); margin: 0 calc(var(--bleed) - var(--gut)); }
.life-stage { --copy: min(23vw, 400px); --left: clamp(24px, 4.5vw, 80px); position: sticky; top: 80px; height: calc(100vh - 96px); min-height: 520px; border-radius: clamp(28px, 4vw, 52px); overflow: hidden; color: #fff; }
.life-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 35%; }
.life-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(48, 16, 40, .62), rgba(48, 16, 40, .4) 30%, rgba(48, 16, 40, 0) 50%); }
.life-copy { position: absolute; z-index: 2; left: var(--left); top: clamp(28px, 7%, 72px); bottom: clamp(28px, 7%, 72px); width: var(--copy); display: flex; flex-direction: column; }
.life-quote { width: min(37vw, 600px); font-size: clamp(40px, 4.8vw, 82px); font-weight: 300; line-height: .94; letter-spacing: -.04em; }
.life-quote em { display: block; line-height: .9; width: fit-content; background: linear-gradient(100deg, #fff, #FFD9EE); -webkit-background-clip: text; background-clip: text; }
.life-steps { position: relative; flex: 1; margin: clamp(20px, 5vh, 56px) 0 clamp(18px, 3vh, 30px); }
.life-steps li { position: absolute; inset: auto 0 0; opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .8s var(--ease); pointer-events: none; }
.life-steps li.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
.life-n { display: block; font: 400 13px/1 var(--mono); letter-spacing: .14em; color: var(--violet); margin-bottom: 14px; }
.life-stage .life-n { color: #FFD3EC; }
.life-steps h3 { font-size: clamp(24px, 2.3vw, 36px); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; margin-bottom: 12px; }
.life-steps p { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; color: rgba(255, 255, 255, .86); }
.life-dots { display: flex; gap: 8px; }
.life-dots i { width: 18px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .35); transition: width .5s var(--ease), background .5s; }
.life-dots i.on { width: 44px; background: #fff; }
.life-phone { position: absolute; z-index: 2; left: max(45.5%, calc(var(--left) + var(--copy) + 24px)); top: 50%; height: min(76%, 640px); aspect-ratio: 1206 / 2582; translate: 0 -50%; padding: 0; box-shadow: 0 40px 80px -20px rgba(30, 10, 25, .6), 0 0 0 1px rgba(255, 255, 255, .2); }
/* The new screen fades in over the old one at the same size; the old one leaves once covered: no dark flash */
.life-phone img { position: absolute; left: 1.4%; top: .654%; width: 97.2%; border-radius: 12% / 5.7%; opacity: 0; transition: opacity .5s ease .6s; }
.life-phone img.on { z-index: 1; opacity: 1; transition: opacity .8s ease; }
.life-list { display: none; }
.life-list li { padding: 30px 0; }
.life-list h3 { font-size: clamp(28px, 7vw, 40px); font-weight: 300; line-height: 1.06; letter-spacing: -.035em; margin-bottom: 12px; }
.life-list p { font-size: 17px; line-height: 1.5; color: var(--soft); }
.life-inline { width: min(62vw, 280px); margin-top: 24px; }

/* ---------- Privacy: soft, not dark ---------- */
.v2-promise { position: relative; overflow: hidden; margin-top: clamp(80px, 10vw, 140px); color: #2A1430; background: radial-gradient(80% 120% at 100% 0%, #F3D2F2, transparent 60%), radial-gradient(70% 100% at 0% 100%, #FFE0D6, transparent 60%), #F8ECF3; }
.v2-promise .label { color: rgba(42, 20, 48, .6); }
.v2-promise .promise-c { color: rgba(42, 20, 48, .7); }
.v2-promise .promise-c { margin-top: 26px; }
/* The policy link: a frosted pill with an arrow in the logo gradient that slides on hover */
.v2-promise .promise-c a { display: inline-flex; align-items: center; gap: 12px; padding: 7px 7px 7px 20px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #2A1430; text-decoration: none;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 12px 30px -14px rgba(150, 60, 160, .45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background .35s ease, box-shadow .35s ease, transform .35s var(--ease); }
.v2-promise .promise-c a::after { content: ""; width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M12 17h10m-4-4.5L22.5 17 18 21.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 34px no-repeat, var(--logo);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.v2-promise .promise-c a:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(150, 60, 160, .55); }
.v2-promise .promise-c a:hover::after { transform: translateX(4px) rotate(-45deg); }
.v2-promise .promise-c a:focus-visible { outline: 2px solid #7A2FA8; outline-offset: 3px; }
.promise-drop { position: absolute; right: clamp(16px, 6vw, 110px); bottom: clamp(20px, 4vw, 64px); width: clamp(110px, 15vw, 230px); opacity: .9; animation: float 8s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(180, 60, 200, .3)); }
.v2-promise .promise-a, .v2-promise .promise-b { position: relative; max-width: 18em; }
.v2-promise .promise-b { max-width: 38em; }
.promise-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.promise-points li { padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .7); border: 1px solid #fff; font-size: 15px; font-weight: 500; }
[data-theme="dark"] .v2-promise { color: var(--ink); background: radial-gradient(80% 120% at 100% 0%, #3A1E45, transparent 60%), radial-gradient(70% 100% at 0% 100%, #3D2420, transparent 60%), #1C1620; }
[data-theme="dark"] .v2-promise .label, [data-theme="dark"] .v2-promise .promise-c { color: var(--soft); }
[data-theme="dark"] .v2-promise .promise-c a { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
[data-theme="dark"] .v2-promise .promise-c a:hover { background: rgba(255, 255, 255, .14); }
[data-theme="dark"] .promise-points li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); }

/* ---------- Phase widgets: light on the light theme, lit from inside on the dark one ---------- */
.now { position: relative; }
.now .sec-head { max-width: 860px; margin-bottom: clamp(28px, 4vw, 52px); }
.widgets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); padding: clamp(14px, 1.6vw, 22px); border-radius: clamp(30px, 4vw, 48px);
  background: rgba(255, 255, 255, .5); border: 1px solid var(--edge); box-shadow: 0 30px 70px -30px rgba(120, 60, 110, .25); }
.w { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-height: clamp(320px, 30vw, 410px); padding: 22px; border-radius: 28px; border: 1px solid rgba(21, 23, 22, .06); color: #151716; font: inherit; cursor: pointer;
  background: #FCFAFB; transition: transform .5s var(--ease), border-color 1.6s ease, box-shadow 1.6s ease; }
.w::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -30%; width: 140%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; opacity: .3; transform: scale(.6);
  background: radial-gradient(circle, var(--c1) 0%, var(--c2) 28%, var(--c3) 48%, transparent 70%); transition: opacity 2s ease, transform 2.4s var(--ease); }
.w::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .25; background: radial-gradient(circle, rgba(255, 255, 255, .9) .6px, transparent 1px) 0 0 / 6px 6px; mix-blend-mode: overlay; }
.w:hover { transform: translateY(-4px); }
.w.on { border-color: var(--c3); box-shadow: 0 24px 50px -24px var(--c3); }
.w.on::before { opacity: .85; transform: scale(1); animation: bloom 5s ease-in-out infinite alternate; }
.w:hover::before { opacity: .6; transform: scale(.85); }
.w.on:hover::before { opacity: .85; transform: scale(1); }
.w-period { --c1: #FFD3C4; --c2: #F0907A; --c3: #E8664A; --l1: #FFB59E; --l2: #E8664A; }
.w-follicular { --c1: #DDF5D8; --c2: #7FE08A; --c3: #3FAE6A; --l1: #B8EE8A; --l2: #3FAE6A; }
.w-ovulation { --c1: #F8C6D7; --c2: #F08FB0; --c3: #F26A3C; --l1: #FFB37A; --l2: #E0566F; }
.w-luteal { --c1: #E3DCFF; --c2: #8E7BEF; --c3: #6E5BE0; --l1: #C9BEFF; --l2: #6E5BE0; }
@keyframes bloom { to { transform: scale(1.12) translateY(-4%); } }
.w-top { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 8px; font: 400 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(21, 23, 22, .62); }
.w-now { padding: 5px 9px; border-radius: 999px; background: #151716; color: #fff; letter-spacing: .06em; font-weight: 600; }
.w-main { display: grid; width: 100%; margin-top: auto; }
.w-count, .w-main .w-orb { grid-area: 1 / 1; transition: opacity 1.4s ease, transform 1.8s var(--ease); }
.w-count { display: flex; flex-direction: column; align-self: end; }
.w.on .w-count { opacity: 0; transform: translateY(14px); }
.w:not(.on) .w-orb { opacity: 0; transform: scale(.6); }
.w:not(.on) .w-now { opacity: 0; transform: scale(.8); }
.w-now { transition: opacity 1.2s ease, transform 1.4s var(--ease); }
.w-big { margin-top: auto; font-size: clamp(64px, 7vw, 112px); font-weight: 200; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.w-cap { font-size: 15px; color: rgba(21, 23, 22, .7); margin-top: 4px; }
.w-line { margin-top: 14px; font-size: 14px; line-height: 1.4; color: rgba(21, 23, 22, .72); max-height: 0; opacity: 0; transition: max-height 1.4s var(--ease), opacity 1.2s ease; }
.w.on .w-line, .w:hover .w-line, .w:focus-visible .w-line { max-height: 5em; opacity: 1; }
/* Today: the home-screen ball, glass with water that waves, bubbles and a light running round the rim. */
.w-orb { position: relative; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-self: center; align-self: end; width: min(82%, 220px); aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 22px 44px -14px rgba(40, 50, 45, .35); }
.w-orb canvas { animation: swell 6s ease-in-out infinite; }
.w-orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.w-orb::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; background: conic-gradient(transparent 0 78%, rgba(255, 255, 255, .95) 97%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spin 9s linear infinite; }
.w-orb-n { position: relative; font-size: clamp(56px, 5.4vw, 84px); font-weight: 200; line-height: .95; letter-spacing: -.05em; color: #151716; font-variant-numeric: tabular-nums; }
.w-orb-l { position: relative; margin-top: 6px; font: 400 11px/1 var(--mono); letter-spacing: .16em; color: rgba(21, 23, 22, .62); }
@keyframes swell { 50% { transform: scale(1.012); } }
@keyframes spin { to { transform: rotate(1turn); } }

[data-theme="dark"] .widgets { background: #0E0C12; border-color: transparent; box-shadow: none; }
[data-theme="dark"] .w { background: #17141C; border-color: rgba(255, 255, 255, .08); color: #fff; }
[data-theme="dark"] .w::before { opacity: .35; }
[data-theme="dark"] .w::after { opacity: .2; }
[data-theme="dark"] .w.on { border-color: var(--c3); box-shadow: none; }
[data-theme="dark"] .w.on::before, [data-theme="dark"] .w.on:hover::before { opacity: 1; }
[data-theme="dark"] .w:hover::before { opacity: .75; }
[data-theme="dark"] .w-top { color: rgba(255, 255, 255, .8); }
[data-theme="dark"] .w-now { background: #fff; color: #123A2B; }
[data-theme="dark"] .w-big { text-shadow: 0 4px 30px rgba(0, 0, 0, .25); }
[data-theme="dark"] .w-cap { color: rgba(255, 255, 255, .85); }
[data-theme="dark"] .w-line { color: rgba(255, 255, 255, .78); }

/* the remaining original sections keep their look */
.v2 section.ages, .v2 section.free, .v2 section.faq { padding-top: clamp(80px, 11vw, 160px); }


.v2 .last h2 { line-height: .92; }

/* ---------- Headings outside the coloured blocks are centred ---------- */
.v2 main > section > .sec-head { text-align: center; margin-left: auto; margin-right: auto; max-width: 900px; }
.v2 main > section > .sec-head .label { justify-content: center; }
.v2 main > section > .sec-head .lead { margin-left: auto; margin-right: auto; }
.v2 .drops-note { text-align: center; }

/* ---------- Setup: three cards ---------- */
.ages-cards .sec-head { margin-bottom: clamp(28px, 4vw, 52px); }
.setup-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); align-items: stretch; }
.setup-card { position: relative; display: flex; flex-direction: column; padding: clamp(18px, 2vw, 26px); border-radius: clamp(26px, 2.6vw, 36px); }
.ages-cards .agebox { position: relative; top: auto; text-align: center; }
.ages-cards .age-num { font-size: clamp(76px, 6.6vw, 108px); }
.ages-cards .round { width: 48px; height: 48px; }
.ages-cards .age-unit { margin: 4px 0 14px; }
.ages-cards .age-track { height: 36px; }
.ages-cards #age-options { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ages-cards .opt:last-child { margin-bottom: 0; }
.ages-cards .age-note { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--edge); font-size: 15px; line-height: 1.45; text-align: left; min-height: 5.8em; }
.ages-cards .agelist .agebox-q { margin: 2px 0 12px; text-align: center; }
.ages-cards .opt { padding: 12px 14px; }
.ages-cards .opt strong { font-size: 16px; }
.ages-cards .age-more { margin: 10px 2px 0; font-size: 14px; line-height: 1.45; }
/* The next questions, over water filled to 70% like the app's ball */
.setup-next { overflow: hidden; isolation: isolate; align-items: center; justify-content: center; text-align: center; background: var(--card); border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: 0 30px 60px -30px rgba(200, 90, 150, .45); }
.setup-next canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.setup-next p { position: relative; max-width: 18em; font-size: clamp(19px, 1.6vw, 24px); font-weight: 400; line-height: 1.35; letter-spacing: -.01em; color: #2E1238; text-wrap: balance; text-shadow: 0 1px 12px rgba(255, 240, 245, .55); }
[data-theme="dark"] .setup-next p { color: #fff; text-shadow: 0 2px 16px rgba(60, 10, 50, .5); }
/* Next questions: a small kicker, the three questions large and bold, a quiet note */
.next-in { position: relative; width: 100%; max-width: 330px; text-align: left; color: #2E1238; }
.setup-next .next-k { font: 500 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(46, 18, 56, .62); text-shadow: none; margin-bottom: 16px; }
.next-list { display: grid; gap: 12px; }
.next-list li { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; font-size: clamp(20px, 1.75vw, 26px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.next-list span { font: 500 12px/1 var(--mono); letter-spacing: .06em; opacity: .55; }
.setup-next .next-note { margin-top: 18px; font-size: 15px; font-weight: 400; line-height: 1.4; color: rgba(46, 18, 56, .78); text-shadow: none; }
[data-theme="dark"] .next-in, [data-theme="dark"] .setup-next .next-k, [data-theme="dark"] .setup-next .next-note { color: #fff; }
@media (max-width: 980px) {
  .vh { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .vh-copy { padding-bottom: 0; }
  .vh-art { min-height: 0; height: min(118vw, 600px); margin-top: 8px; }
  .vh-phone { width: clamp(170px, 44vw, 260px); left: 0; bottom: clamp(-70px, -10vw, -30px); }
  .setup-cards { grid-template-columns: minmax(0, 1fr); }
  .setup-card { min-height: 0; }
  .setup-next { min-height: 300px; }
  .ages-cards .age-note { min-height: 0; }
}

/* ---------- Tablets and phones ---------- */
@media (max-width: 980px) {
  .intro-row { max-width: none; }
  .intro-row li { margin-top: 0 !important; }
  .pain { height: 260vh; }
  .pain-stick { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; align-content: stretch; gap: 10px; padding: 70px var(--gut) 28px; }
  .pain-art { order: -1; align-self: end; height: min(52vh, 480px); margin: 0; }
  .pain-art .girl { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  .spot span { font-size: 11px; padding: 6px 9px; }
  .pain-copy { min-height: 250px; }
  .pc { justify-content: flex-start; }
  .pc h2 { font-size: clamp(30px, 8vw, 44px); margin-bottom: 10px; }
  .pc .lead { font-size: 16px; }
  .pain-hint { display: none; }
  .chips { margin-top: 14px; gap: 6px; } .chips li { font-size: 13px; padding: 7px 12px; }
  .drops { --lap: 64px; }
  .drops-sky { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .drops-head { order: -1; position: relative; left: auto; top: auto; max-width: none; padding: 36px clamp(22px, 6vw, 40px) 0; }
  .drop { position: relative; left: auto; top: auto; transform: none; align-self: center; width: min(62vw, 330px); height: auto; margin: 24px 0 calc(var(--lap) + 26px); }
  .drops-sky::after { background: linear-gradient(rgba(250, 225, 240, .55), transparent 45%); }
  .phase-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph { min-height: 210px; } .orb { margin-bottom: 36px; width: 48px; height: 48px; }
  .life-scroll { height: auto; margin: 0 calc(var(--bleed) - var(--gut)); }
  .life-stage { position: relative; top: 0; height: min(72vh, 560px); min-height: 380px; }
  .life-stage > img { object-position: 72% 40%; }
  .life-stage::after { background: linear-gradient(rgba(48, 16, 40, .55), rgba(48, 16, 40, 0) 55%); }
  .life-copy { right: var(--left); width: auto; bottom: auto; }
  .life-steps, .life-dots, .life-phone { display: none; }
  .life-list { display: block; padding-top: 16px; }
  .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w { min-height: 250px; padding: 18px; }
  .w-line { display: none; }
  .w-top { flex-wrap: wrap; letter-spacing: .06em; }
  .w-orb { width: 92%; }
  .w-orb-n { font-size: 48px; }
  .w-orb-l { font-size: 9px; letter-spacing: .1em; }
}
@media (max-width: 480px) {
  .vh h1 { font-size: clamp(42px, 12vw, 56px); }
  .phase-cards { grid-template-columns: minmax(0, 1fr); }
  .spot span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .vh::before, .vh-girl, .vh-phone, .orb, .orb::before, .orb::after, .orb b, .drop, .promise-drop, .spot i, .w.on::before, .w-orb canvas, .w-orb::after, .blink, .blink::after { animation: none !important; }
}