/* ela — the app's own design system, ported.
   Colours are lifted exactly from ElaColor.swift. The display face is
   Fraunces, with its SOFT axis up. The app's own face is Didot, and
   Bodoni Moda matched it closely — but a Didone's hairlines thin out to
   nothing at display size, and the headlines were hard to read. Fraunces
   keeps the editorial feel with an even stroke, which is the trade worth
   making on a page someone is skimming. Body text uses
   the system stack so it renders in SF Pro on the devices most readers
   are holding, which is what the app itself uses. */

:root {
  --wine:        #8A1F3E;
  --wine-deep:   #6E162F;
  --ink:         #26151A;
  --ink-soft:    #6B5055;
  --ink-faint:   #9A8085;
  --canvas:      #F7E9E1;
  --surface:     #FBF2ED;
  --surface-deep:#F2DED4;
  --hairline:    rgba(138, 31, 62, 0.12);

  /* The four cycle-phase gradients, lifted from CyclePhase.palette.
     The app already carries this much colour; the site was the only
     place pretending ela is beige. */
  --peach:       #FFC79C;   /* follicular top  */
  --coral:       #EE8A6E;   /* follicular mid  */
  --lilac:       #E2C0E8;   /* ovulatory top   */
  --mauve:       #BC89CC;   /* ovulatory mid   */
  --rose:        #ECA3AD;   /* luteal top      */
  --rose-deep:   #C8637A;   /* luteal mid      */
  --shadow:      rgba(138, 31, 62, 0.08);

  --display: "Fraunces", "Georgia", serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;

  --measure: 1140px;
  --gutter: clamp(20px, 5vw, 40px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* `height: auto` is load-bearing: the screenshots carry width/height
   attributes, and without it they render at their literal pixel height
   while the width shrinks — a 760x1652 image drawn 469px wide and 1652
   tall, which stretched the hero to twice the viewport. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--wine); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 720px; }

/* ---------- Type ---------- */

h1, h2, h3, .display {
  font-family: var(--display);
  /* 400 in Fraunces carries what 600 had to in Bodoni. SOFT rounds the
     terminals off; WONK stays at 0, because its angled serifs read as a
     quirk rather than as calm. */
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 0;
  font-optical-sizing: auto;
  letter-spacing: -0.012em;
  line-height: 1.08;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 4.3rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.12; margin-bottom: 18px; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; }

p { margin: 0 0 1.1em; }
.lede { font-size: clamp(1.1rem, 1.9vw, 1.35rem); color: var(--ink-soft); line-height: 1.55; }
.soft { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.small { font-size: 0.86rem; line-height: 1.55; }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin: 0 0 14px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--wine); color: var(--canvas);
  padding: 17px 30px; border-radius: 100px;
  font-weight: 600; font-size: 1rem; letter-spacing: 0.01em;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--wine-deep); text-decoration: none; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--wine); border: 1px solid var(--hairline); }
.btn.ghost:hover { background: var(--surface); transform: none; }

/* ---------- Header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 233, 225, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.site-head img { height: 26px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; font-size: 0.93rem; }
.nav a { color: var(--ink-soft); }
.nav a:hover { color: var(--wine); text-decoration: none; }
@media (max-width: 720px) { .nav .hide-sm { display: none; } }

/* ---------- Hero ---------- */

.hero { padding: clamp(60px, 9vw, 110px) 0 clamp(50px, 7vw, 80px); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 72px); align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero .lede { max-width: 30ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
.phone {
  /* The screenshots are 760x1652. Unconstrained they make the hero row
     taller than the viewport and push the headline off the fold. */
  max-width: 360px; width: 100%; margin-left: auto; margin-right: auto;
  border-radius: 38px; overflow: hidden;
  box-shadow: 0 30px 70px -20px var(--shadow), 0 2px 10px rgba(38,21,26,.06);
  border: 1px solid var(--hairline);
  background: var(--canvas);
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero .lede { max-width: none; }
  .phone { max-width: 310px; margin: 10px auto 0; }
}

/* ---------- Sections ---------- */

section { padding: clamp(64px, 8.5vw, 118px) 0; }
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px); align-items: center;
}
.split.flip > div:first-child { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.flip > div:first-child { order: 0; }
}

.section-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 54px); }
.section-head h2 { margin-bottom: 16px; }

/* ---------- Cards ---------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border-radius: 22px; padding: 28px;
  box-shadow: 0 10px 26px -18px var(--shadow);
}
.card h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }

.photo-card {
  position: relative; border-radius: 22px; overflow: hidden;
  min-height: 300px; display: flex; align-items: flex-end;
  box-shadow: 0 16px 40px -22px var(--shadow);
}
.photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-card .veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(26,14,18,.06) 0%, rgba(26,14,18,.46) 38%,
    rgba(26,14,18,.86) 72%, rgba(26,14,18,.95) 100%);
}
.photo-card .body { position: relative; padding: 26px; color: #fff; }
.photo-card h3 { color: #fff; margin-bottom: 7px; }
.photo-card p { color: rgba(255,255,255,.84); margin: 0; font-size: 0.95rem; }

/* ---------- Quote / statement ---------- */

.statement {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.8vw, 2.7rem);
  line-height: 1.18; letter-spacing: -0.015em;
  /* No measure cap: both uses sit inside `.narrow`, which already sets
     one, and a cap here fought the line breaks the copy asks for. */
  margin: 0 auto;
}

/* ---------- Pricing ---------- */

.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 760px; }
@media (max-width: 720px) { .price-grid { grid-template-columns: 1fr; } }
.price {
  background: var(--surface); border-radius: 22px; padding: 30px;
  border: 1px solid transparent;
}
.price.feature { border-color: var(--wine); }
.price .amount { font-family: var(--display); font-size: 2.5rem; line-height: 1; }
.price .per { color: var(--ink-faint); font-size: 0.95rem; }
.badge {
  display: inline-block; background: var(--wine); color: var(--canvas);
  font-size: 0.68rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; padding: 5px 10px; border-radius: 100px; margin-bottom: 12px;
}

/* ---------- Lists ---------- */

.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li {
  padding: 13px 0 13px 30px; position: relative;
  border-bottom: 1px solid var(--hairline); color: var(--ink-soft);
}
.ticks li:last-child { border-bottom: 0; }
.ticks li strong { color: var(--ink); font-weight: 600; }
.ticks li::before {
  content: ""; position: absolute; left: 4px; top: 21px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--wine);
}

/* ---------- FAQ ---------- */

details {
  border-bottom: 1px solid var(--hairline); padding: 22px 0;
}
details summary {
  cursor: pointer; list-style: none; font-weight: 600;
  font-size: 1.07rem; display: flex; justify-content: space-between; gap: 20px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--wine); font-weight: 400; font-size: 1.4rem; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { margin: 14px 0 0; color: var(--ink-soft); max-width: 68ch; }

/* ---------- Footer ---------- */

.site-foot {
  border-top: 1px solid var(--hairline);
  padding: 54px 0 46px; color: var(--ink-faint); font-size: 0.9rem;
}
.foot-grid { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a { color: var(--ink-soft); }
.site-foot img { height: 22px; width: auto; margin-bottom: 12px; opacity: .85; }

/* ---------- Legal pages ---------- */

.legal { padding: clamp(44px, 6vw, 76px) 0 90px; }
.legal h1 { margin-bottom: 10px; }
.legal h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 46px 0 14px; }
.legal h3 { font-size: 1.1rem; margin: 28px 0 8px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 9px; }
.legal .updated { color: var(--ink-faint); font-size: .92rem; margin-bottom: 34px; }
.legal strong { color: var(--ink); }
.callout {
  background: var(--surface); border-radius: 18px;
  padding: 22px 24px; margin: 26px 0;
}
.callout p:last-child { margin-bottom: 0; }
.toc { background: var(--surface); border-radius: 18px; padding: 22px 26px; margin-bottom: 36px; }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 6px; }

/* ---------- Multi-page nav ---------- */

.nav a.on { color: var(--wine); font-weight: 600; }
@media (max-width: 900px) { .nav { gap: 18px; font-size: 0.88rem; } }
@media (max-width: 640px) {
  .site-head .wrap { height: auto; padding-top: 14px; padding-bottom: 14px;
                     flex-direction: column; gap: 12px; }
  .nav { flex-wrap: wrap; justify-content: center; gap: 16px; }
}

/* ---------- Page header ---------- */

.page-head { padding: clamp(52px, 7vw, 92px) 0 clamp(30px, 4vw, 46px); }
.page-head h1 { margin-bottom: 18px; max-width: 16ch; }
.page-head .lede { max-width: 56ch; }

/* ---------- Feature rows ---------- */

.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px);
       align-items: center; padding: clamp(40px, 5vw, 64px) 0; }
.row + .row { border-top: 1px solid var(--hairline); }
.row.flip > div:first-child { order: 2; }
@media (max-width: 860px) {
  .row { grid-template-columns: 1fr; }
  .row.flip > div:first-child { order: 0; }
}
.row h3 { margin-bottom: 12px; }
.row p:last-child { margin-bottom: 0; }

/* ---------- Comparison ---------- */

.compare { width: 100%; border-collapse: collapse; margin-top: 10px; }
.compare th, .compare td { text-align: left; padding: 15px 14px;
                           border-bottom: 1px solid var(--hairline); font-size: 0.97rem; }
.compare th { font-weight: 600; font-size: 0.78rem; letter-spacing: .1em;
              text-transform: uppercase; color: var(--ink-faint); }
.compare td:first-child { color: var(--ink); font-weight: 500; }
.compare td { color: var(--ink-soft); }
.yes { color: var(--wine); font-weight: 700; }
.no  { color: var(--ink-faint); }

/* ---------- Steps ---------- */

.steps { counter-reset: step; display: grid; gap: 18px; }
.step { position: relative; padding-left: 56px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 2px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-deep); color: var(--wine);
  font-family: var(--display); font-size: 1.05rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { font-size: 1.12rem; margin-bottom: 5px; }
.step p { color: var(--ink-soft); margin: 0; }

/* ---------- CTA band ---------- */

.band {
  background:
    radial-gradient(52% 74% at 12% 10%, rgba(238,138,110,.30), transparent 66%),
    radial-gradient(48% 70% at 88% 90%, rgba(200, 99,122,.26), transparent 68%),
    var(--surface-deep);
}
.band .wrap { padding-top: clamp(50px,6vw,78px); padding-bottom: clamp(50px,6vw,78px); }


/* ---------- Restraint ----------
   The page had grown a grid of seventeen screenshots, a pill filter and
   a comparison table. All of it worked and none of it was calm. What
   follows is what replaced it: three quiet columns, a softer band, and
   a link style that doesn't shout. */

/* A band that reads as a pause rather than a panel. */
.quiet-band {
  background:
    radial-gradient(60% 70% at 18% 0%,  rgba(255,199,156,.26), transparent 62%),
    radial-gradient(54% 66% at 86% 96%, rgba(226,192,232,.26), transparent 64%),
    var(--surface);
}

/* Three columns of plain text. No boxes, no shadows — a hairline is
   enough to say "these belong together". */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 5vw, 64px); }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; gap: 44px; } }
/* Flex, so the three links sit on one line however long the copy runs. */
.trio > div { padding-top: 26px; border-top: 2px solid var(--hairline);
              display: flex; flex-direction: column; }
/* One phase colour each, in cycle order, so the three rules read as a
   sequence rather than as decoration. */
.trio > div:nth-child(1) { border-top-color: var(--coral); }
.trio > div:nth-child(2) { border-top-color: var(--mauve); }
.trio > div:nth-child(3) { border-top-color: var(--rose-deep); }
.trio > div > .quiet { margin-top: auto; align-self: flex-start; }
.trio h3 { font-size: 1.32rem; margin-bottom: 14px; }
.trio p { color: var(--ink-soft); margin-bottom: 18px; }

/* An underlined-on-hover text link, for places a button would be loud. */
.quiet {
  font-size: 0.97rem; font-weight: 500; color: var(--wine);
  text-decoration: none; border-bottom: 1px solid transparent;
  padding-bottom: 2px; transition: border-color .16s ease;
}
.quiet:hover { text-decoration: none; border-bottom-color: var(--wine); }

/* The hero's second action is a link now, not a second button. */
.hero-cta { gap: 26px; }


/* ---------- The App Store badge ----------
   Apple's own artwork, downloaded from their badge resources. Their
   guidelines don't allow a redrawn one, so this file is not to be
   edited — only swapped for another of Apple's. */
.store { display: inline-block; line-height: 0; transition: opacity .16s ease; }
.store:hover { opacity: .82; text-decoration: none; }
.store img { height: 51px; width: auto; }
@media (max-width: 600px) { .store img { height: 46px; } }

/* ---------- A screenshot that dissolves ----------
   The frame, the border and the shadow all say "this is a photograph of
   a phone". Fading the bottom edge into the page says "this is the app",
   which is the quieter and the better claim. */
.phone.fade {
  border: 0; border-radius: 0; background: none; box-shadow: none;
  /* Fades at the top too. Unframed, the simulator's status bar and the
     cut edge of a half-scrolled sheet both look like mistakes; dissolved,
     they look like the screen continuing past the page. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 58%, transparent 97%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 58%, transparent 97%);
}


/* ---------- Colour, depth, and things at an angle ----------
   The page was correct and lifeless: one flat cream, one upright
   screenshot, nothing with a shadow. What follows is the warmth put
   back, using the app's own phase gradients rather than a palette
   invented for the web. */

/* A small wine button for the header. */
.nav a.btn { color: var(--canvas); }
.nav a.btn:hover { color: var(--canvas); }
.small-btn { padding: 10px 20px; font-size: 0.88rem; }
@media (max-width: 820px) { .nav .small-btn { display: none; } }

/* Tinted section labels. An uppercase grey eyebrow says "heading";
   a tinted pill says which part of the app you're looking at. */
.tag {
  display: inline-block; margin: 0 0 18px;
  padding: 7px 15px; border-radius: 100px;
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wine-deep);
}
.tag-peach { background: rgba(238, 138, 110, .22); }
.tag-rose  { background: rgba(200,  99, 122, .18); }
.tag-lilac { background: rgba(188, 137, 204, .22); }

/* ---------- The hero ---------- */

.hero { position: relative; overflow: hidden; }

/* Three soft blooms of phase colour behind everything. Large, low
   opacity and heavily blurred: this should read as light in the room,
   not as three circles. */
.hero .bloom {
  position: absolute; inset: -30% -15% auto -15%; height: 1150px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(42% 44% at 70% 26%, rgba(238,138,110,.42), transparent 68%),
    radial-gradient(36% 40% at 90% 58%, rgba(200, 99,122,.30), transparent 70%),
    radial-gradient(34% 38% at 46%  6%, rgba(226,192,232,.34), transparent 72%),
    radial-gradient(40% 36% at 12% 72%, rgba(255,199,156,.26), transparent 72%);
  filter: blur(10px);
}
.hero .wrap { position: relative; z-index: 1; }

/* Lifestyle photographs drifting at the edges of the composition.
   Decorative, aria-hidden, and gone the moment the viewport can't
   spare the room. */
.drift {
  position: absolute; z-index: 1; width: 152px; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: 20px;
  box-shadow: 0 26px 54px -24px rgba(94,16,40,.42);
  border: 3px solid rgba(255,255,255,.55);
}
.drift-l { left: 26px;  top: 210px; transform: rotate(-7deg); }
.drift-r { right: 26px; top: 452px; transform: rotate(6deg); }
/* 1140 of wrap + two 150px gutters. Below that they clip or collide. */
@media (max-width: 1460px) { .drift { display: none; } }

/* Two screens, overlapping, at an angle, dissolving at the bottom.
   The mask lives on the container so the children keep their shadows —
   a mask on the image itself would clip them away. */
.hero-art, .pair {
  position: relative; z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 68%, transparent 99%);
  /* A mask clips to its positioning area, and the default `repeat` tiles
     the gradient outside it instead of hiding what's there. Both are
     stated so a rotated corner can't drift into a second copy of it. */
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
}
.hero-art { min-height: 660px; }
.pair { min-height: 580px; }

.art {
  position: absolute; border-radius: 30px;
  box-shadow: 0 46px 90px -34px rgba(94,16,40,.52),
              0 6px 20px rgba(38,21,26,.07);
  border: 1px solid rgba(255,255,255,.55);
}
.art.front { width: 60%; left: 7%;  top: 0;    transform: rotate(-5deg); z-index: 2; }
.art.back  { width: 53%; right: 5%; top: 100px; transform: rotate(8deg);  z-index: 1; }
.pair .art.front { width: 62%; left: 5%; }
.pair .art.back  { width: 54%; right: 4%; top: 78px; }

@media (max-width: 860px) {
  /* Stacked, the tilt has nowhere to go and the two screens collide. */
  .hero-art, .pair { min-height: 0; margin-top: 18px; }
  .art { position: relative; transform: none; width: 74%; margin: 0 auto; }
  .art.back { display: none; }
  .hero .bloom { height: 760px; }
}