/* Luma — premium women's health. Warm cream/rose, soft serif, generous whitespace. */

:root {
  --cream: #faf6f0;
  --cream-2: #f3ebe1;
  --rose: #c2565a;
  --rose-deep: #a9444a;
  --rose-soft: #ecd5d0;
  --rose-tint: #f7eae6;
  --plum: #3b2b35;
  --taupe: #8b7b81;
  --line: #e8ddd4;
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(194, 86, 90, 0.08);
  --radius: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  background: var(--cream);
  color: var(--plum);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
}

body.sans { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.wrap { max-width: 560px; margin: 0 auto; padding: 0 22px; }
.wrap-wide { max-width: 980px; margin: 0 auto; padding: 0 22px; }

/* ---------- landing ---------- */
.topbar { padding: 22px 0 6px; display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--plum); text-decoration: none; }
.logo span { color: var(--rose); }

.hero { padding: 44px 0 30px; text-align: center; }
.hero h1 {
  font-size: clamp(38px, 9.4vw, 52px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.hero h1 em { font-style: italic; color: var(--rose); }
.hero p.sub { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 17.5px; line-height: 1.65; color: var(--taupe); max-width: 440px; margin: 0 auto 30px; }

.feel-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.chip { background: var(--rose-tint); color: var(--rose-deep); border: 1px solid var(--rose-soft); padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 500; }

.cta-btn {
  display: block; width: 100%; max-width: 420px; margin: 0 auto;
  background: var(--rose); color: #fff; border: none; border-radius: 999px;
  padding: 17px 28px; font-size: 17.5px; font-weight: 600; cursor: pointer;
  font-family: "Fraunces", Georgia, serif; letter-spacing: 0.01em;
  box-shadow: 0 12px 26px rgba(194, 86, 90, 0.28);
  transition: transform 0.15s ease, background 0.15s ease; text-decoration: none; text-align: center;
}
.cta-btn:active { transform: scale(0.985); }
.cta-btn.ghost { background: transparent; color: var(--rose-deep); border: 1.5px solid var(--rose-soft); box-shadow: none; }
.cta-btn.small { padding: 13px 22px; font-size: 16px; display: inline-block; width: auto; }

.subline { text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; color: var(--taupe); margin-top: 14px; }

/* sections */
.section { padding: 56px 0 20px; }
.section h2 { font-size: clamp(27px, 6.5vw, 34px); font-weight: 500; letter-spacing: -0.015em; text-align: center; margin-bottom: 8px; }
.section .lede { text-align: center; color: var(--taupe); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; margin-bottom: 34px; }

.cards { display: grid; gap: 16px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); }
.card .k { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose); font-weight: 700; margin-bottom: 8px; }
.card h3 { font-size: 21px; font-weight: 500; margin-bottom: 10px; }
.card p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15.5px; color: #64545c; }

.price-card { text-align: center; padding: 34px 26px; border: 1.5px solid var(--rose-soft); background: linear-gradient(180deg, #fff 0%, var(--rose-tint) 100%); }
.price-card .amt { font-size: 44px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 2px; }
.price-card .per { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--taupe); font-size: 14px; }
.price-card ul { list-style: none; margin: 22px 0 26px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; color: #5c4a53; text-align: left; display: inline-block; }
.price-card li { padding: 5px 0; }
.price-card li::before { content: "✓  "; color: var(--rose); font-weight: 700; }

.faq { max-width: 560px; margin: 26px auto 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 15px 2px; }
.faq summary { font-weight: 600; font-size: 16.5px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::after { content: "+"; color: var(--rose); font-size: 20px; }
.faq details[open] summary::after { content: "–"; }
.faq p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; color: var(--taupe); padding: 10px 2px 6px; }

footer { padding: 50px 0 80px; text-align: center; color: var(--taupe); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13.5px; }
footer .logo { font-size: 22px; display: block; margin-bottom: 6px; }

/* ---------- app ---------- */
.app-head { position: sticky; top: 0; z-index: 20; background: rgba(250, 246, 240, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.app-head .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
.app-head .logo { font-size: 21px; display: inline-flex; align-items: center; min-height: 44px; }
.trial-pill { display: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; background: var(--rose-tint); color: var(--rose-deep); border: 1px solid var(--rose-soft); padding: 5px 12px; border-radius: 999px; font-weight: 600; }

.app-main { padding: 26px 22px 120px; max-width: 560px; margin: 0 auto; }

.screen { display: none; }
.screen.active { display: block; }

.screen h2 { font-size: 26px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 6px; }
.screen .hint { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--taupe); font-size: 15px; margin-bottom: 22px; }

/* check-in rows */
.log-row { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 14px; margin-bottom: 12px; }
.log-row .q { font-weight: 600; font-size: 17px; margin-bottom: 10px; }
.scale { display: flex; gap: 6px; }
.scale button {
  flex: 1; height: 46px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--cream); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px; font-weight: 600; color: var(--taupe); cursor: pointer; transition: all 0.12s ease;
}
.scale button.sel { background: var(--rose); border-color: var(--rose); color: #fff; box-shadow: 0 4px 12px rgba(194, 86, 90, 0.3); }
.scale .lab { font-size: 10.5px; padding-top: 6px; display: flex; justify-content: space-between; color: var(--taupe); font-weight: 500; }

.input, textarea.input {
  width: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px;
  background: var(--white); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; color: var(--plum); outline: none;
}
.input:focus { border-color: var(--rose); }

.big-btn {
  display: block; width: 100%; background: var(--rose); color: #fff; border: none;
  border-radius: 999px; padding: 16px; font-size: 17px; font-weight: 600; cursor: pointer;
  font-family: "Fraunces", Georgia, serif; margin-top: 18px; box-shadow: 0 10px 22px rgba(194, 86, 90, 0.25);
}
.big-btn:disabled { opacity: 0.45; box-shadow: none; }
.big-btn.ghost { background: transparent; color: var(--rose-deep); border: 1.5px solid var(--rose-soft); box-shadow: none; }

/* onboarding quiz */
.quiz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.tile {
  border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 14px; text-align: center;
  background: var(--white); cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14.5px; font-weight: 600; color: var(--plum); transition: all 0.12s ease;
}
.tile .ic { font-size: 22px; display: block; margin-bottom: 6px; }
.tile.sel { border-color: var(--rose); background: var(--rose-tint); color: var(--rose-deep); }

/* ask */
.ask-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.ask-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ask-suggest button { background: var(--rose-tint); border: 1px solid var(--rose-soft); color: var(--rose-deep); border-radius: 999px; padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.answer { background: var(--rose-tint); border: 1px solid var(--rose-soft); border-radius: var(--radius); padding: 20px; white-space: pre-line; font-size: 16px; line-height: 1.7; }
.answer .q-recap { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; color: var(--taupe); font-style: italic; margin-bottom: 10px; }

/* report */
.report-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 14px; }
.report-card .line { font-size: 16.5px; line-height: 1.65; margin-bottom: 10px; }
.report-card .line:last-child { margin-bottom: 0; }
.metric-bar { margin-top: 18px; }
.metric-bar .m { display: flex; justify-content: space-between; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13.5px; margin-bottom: 5px; color: #5c4a53; }
.bar { height: 8px; background: var(--cream-2); border-radius: 99px; overflow: hidden; margin-bottom: 12px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--rose-soft), var(--rose)); border-radius: 99px; }

/* doctor kit */
.kit { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 14px; }
.kit h4 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.kit pre { white-space: pre-wrap; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; background: var(--cream-2); border-radius: 12px; padding: 14px; margin-top: 10px; line-height: 1.6; }
.kit ol { margin: 8px 0 0 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; }
.kit li { padding: 3px 0; }

/* bottom nav */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
}
.tabbar .wrap { display: flex; max-width: 560px; }
.tabbar button {
  flex: 1; background: none; border: none; padding: 8px 4px; cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 11px; font-weight: 600;
  color: var(--taupe); display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: 14px;
}
.tabbar button .ic { font-size: 21px; line-height: 1; }
.tabbar button.on { color: var(--rose-deep); background: var(--rose-tint); }

/* paywall */
.paywall { text-align: center; padding: 30px 0; }
.paywall h2 { font-size: 30px; }
.paywall .amt { font-size: 40px; font-weight: 600; margin: 14px 0 2px; }
.paywall .per { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--taupe); font-size: 14px; }
.paywall ul { list-style: none; margin: 22px auto 8px; text-align: left; display: inline-block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; }
.paywall li { padding: 4px 0; }
.paywall li::before { content: "✓  "; color: var(--rose); font-weight: 700; }

.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--plum); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: all 0.25s ease; z-index: 50; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.spin { width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: sp 0.7s linear infinite; display: inline-block; vertical-align: -4px; }
@keyframes sp { to { transform: rotate(360deg); } }

.ok-fade { animation: okf 1.2s ease; }
@keyframes okf { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

@media (min-width: 760px) {
  .cards { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; }
  .hero h1 { font-size: 60px; }
  body { font-size: 18px; }
}

/* ---- habit: streak, reminder/install cards ---- */
.streak {
  display: inline-block; margin: 0 0 16px; padding: 6px 14px;
  background: var(--rose-tint); border: 1px solid var(--rose-soft); border-radius: 999px;
  color: var(--rose-deep); font-size: 14px; font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.card.soft {
  margin-top: 22px; padding: 20px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.card-h { font-size: 19px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
.card-p { font-size: 15px; color: var(--taupe); margin-bottom: 14px; line-height: 1.55; }

.ghost-btn {
  display: inline-block; width: 100%; padding: 13px 18px; border-radius: 999px; cursor: pointer;
  background: var(--rose-tint); color: var(--rose-deep); border: 1px solid var(--rose-soft);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px; font-weight: 600; transition: all 0.18s ease;
}
.ghost-btn:active { transform: scale(0.985); }

.link-btn {
  display: block; width: 100%; margin-top: 10px; padding: 6px; background: none; border: none;
  color: var(--taupe); font-size: 14px; cursor: pointer; text-decoration: underline;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- three-step: how it starts ---- */
.steps { margin: 28px auto 0; max-width: 640px; display: grid; gap: 14px; }
.step {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
  box-shadow: var(--shadow); font-size: 15px; color: var(--taupe); line-height: 1.55;
}
.step strong { color: var(--plum); font-weight: 600; }
.step .n {
  flex: 0 0 26px; height: 26px; width: 26px; border-radius: 999px;
  background: var(--rose-tint); color: var(--rose-deep); border: 1px solid var(--rose-soft);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- soft upgrade card (after the aha moment) ---- */
.upgrade {
  margin-top: 22px; padding: 22px; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--rose-tint), var(--white));
  border: 1px solid var(--rose-soft); box-shadow: var(--shadow);
}
.upgrade h3 { font-size: 20px; margin-bottom: 8px; letter-spacing: -0.01em; }
.upgrade p { font-size: 15px; color: var(--taupe); margin-bottom: 16px; line-height: 1.55; }


/* =========================================================================
   LANDING PAGE — mobile-first conversion surface
   Namespaced under .landing so the app screens are untouched.
   Rules: one action, short lines, big tap targets, no orphan words.
   ========================================================================= */

.landing { font-size: 16.5px; line-height: 1.55; }
.landing main { display: block; }

/* --- top bar (scrolls away; the sticky action takes over below) --- */
.landing .topbar { padding: 16px 0 2px; }
.landing .topbar .cta-btn.small { display: none; }

/* --- hero --- */
.landing .hero { padding: 22px 0 18px; }
.landing .eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rose-deep); font-weight: 800; margin-bottom: 12px;
}
.landing .hero h1 {
  font-size: clamp(33px, 8.6vw, 46px); line-height: 1.06; font-weight: 500;
  letter-spacing: -0.02em; margin-bottom: 14px; text-wrap: balance;
}
.landing .hero .sub {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16.5px; line-height: 1.55; color: #5f4d56;
  max-width: 33ch; margin: 0 auto 22px; text-wrap: pretty;
}
.landing .cta-btn {
  min-height: 56px; display: flex; align-items: center; justify-content: center;
  font-size: 17.5px; padding: 16px 24px;
}
.landing .micro {
  text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px; color: #6f5f66; margin-top: 11px;
}

/* --- real app UI as the proof surface --- */
/* ---------------------------------------------------------------------------
   The product shot: a real iPhone, not a rounded rectangle.
   Competitors (Flo, Balance) all show a recognisable device, because the frame
   is what makes it read as "an app you install" rather than "a website".
   Dimensions follow the iPhone 15 Pro (393x852pt), so the proportions are right.
   --------------------------------------------------------------------------- */
.landing .phone {
  position: relative; width: 268px; margin: 30px auto 0;
  aspect-ratio: 393 / 852;
  padding: 11px; border-radius: 46px;
  background: linear-gradient(152deg, #7a6770 0%, #33262e 22%, #191216 52%, #46353d 100%);
  box-shadow: 0 26px 54px rgba(59, 43, 53, 0.30), 0 3px 10px rgba(59, 43, 53, 0.16),
              inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}
/* titanium side buttons */
.landing .phone::before,
.landing .phone::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #8b7880, #3a2c34);
}
.landing .phone::before { left: -3px; top: 104px; height: 26px; box-shadow: 0 40px 0 #6d5b63, 0 78px 0 #6d5b63; }
.landing .phone::after { right: -3px; top: 132px; height: 62px; }

.phone-screen {
  position: relative; height: 100%; border-radius: 36px; overflow: hidden;
  background: var(--cream); display: flex; flex-direction: column;
}
/* Dynamic Island */
.ph-island {
  position: absolute; z-index: 3; top: 9px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 20px; background: #0b0809; border-radius: 999px;
}
.ph-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 4px; color: var(--plum);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
}
.ph-icons { display: flex; align-items: center; gap: 4px; }

.ph-body { flex: 1; display: flex; flex-direction: column; padding: 4px 13px 0; text-align: left; }
.ph-home {
  width: 88px; height: 4px; border-radius: 999px; background: #cbbec3;
  margin: 5px auto 6px; flex: none;
}

.ph-tabs {
  margin-top: auto; display: flex; justify-content: space-between;
  padding: 9px 8px 5px; border-top: 1px solid var(--line);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ph-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 8.5px; font-weight: 600; color: #9c8a92; flex: 1;
}
.ph-tab.on { color: var(--rose-deep); }

.ph-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.ph-brand { font-size: 15px; font-weight: 600; color: var(--plum); }
.ph-brand span { color: var(--rose); }
.ph-streak {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10px; font-weight: 700; background: var(--rose-tint); color: var(--rose-deep);
  border: 1px solid var(--rose-soft); padding: 3px 8px; border-radius: 999px;
}
.ph-title { font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.ph-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px 10px; margin-bottom: 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12.5px; color: var(--plum);
}
.dots { display: flex; gap: 4px; }
.dots i { width: 12px; height: 12px; border-radius: 999px; background: var(--cream-2); border: 1px solid var(--line); display: block; }
.dots i.on { background: var(--rose); border-color: var(--rose); }
.ph-btn {
  background: var(--rose); color: #fff; border-radius: 999px; text-align: center;
  padding: 10px; margin: 10px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px; font-weight: 700;
}
.ph-card {
  background: var(--rose-tint); border: 1px solid var(--rose-soft); border-radius: 12px;
  padding: 10px 11px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11.5px; line-height: 1.5; color: #5c4a53;
}
.ph-k { display: block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose); font-weight: 800; margin-bottom: 3px; }

.phone-cap {
  text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12.5px; color: #6f5f66; margin-top: 13px;
}

/* --- her words, one glance, swipeable --- */
.landing .quotes { margin-top: 32px; padding: 20px 0 18px; background: var(--cream-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.q-label {
  text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: #7d6b73;
  font-weight: 800; margin-bottom: 12px;
}
.q-strip {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 22px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.q-strip::-webkit-scrollbar { display: none; }
.q {
  flex: 0 0 auto; max-width: 74vw; scroll-snap-align: center; margin: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 13px 16px; font-size: 15.5px; font-style: italic; color: var(--plum); line-height: 1.45;
}

/* --- sections --- */
.landing .section { padding: 38px 0 6px; }
.landing .section.tight { padding-top: 28px; }
.landing .section h2 {
  font-size: clamp(25px, 6.4vw, 32px); line-height: 1.12; font-weight: 500;
  letter-spacing: -0.015em; margin-bottom: 10px; text-wrap: balance;
}
.landing .section .lede {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15.5px; color: #5f4d56; max-width: 35ch; margin: 0 auto 22px; text-wrap: pretty;
}

/* --- three benefits, scannable --- */
.landing .bens { list-style: none; display: grid; gap: 12px; }
.landing .bens li {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: 15px 16px; box-shadow: var(--shadow);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.5; color: #5c4a53;
}
.landing .bens .ic {
  flex: 0 0 34px; height: 34px; border-radius: 11px; background: var(--rose-tint);
  display: grid; place-items: center; font-size: 17px; line-height: 1;
}
.landing .bens strong { color: var(--plum); font-weight: 700; }

/* --- three steps --- */
.steps3 { list-style: none; display: grid; gap: 0; margin-top: 4px; }
.steps3.card-soft {
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: 4px 16px; box-shadow: var(--shadow);
}
.steps3.card-soft li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.steps3.card-soft li:last-child { border-bottom: none; }
.steps3 li {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.5; color: #5c4a53;
}
.steps3 .n {
  flex: 0 0 28px; height: 28px; border-radius: 999px;
  background: var(--rose-tint); color: var(--rose-deep); border: 1px solid var(--rose-soft);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.steps3 strong { color: var(--plum); font-weight: 700; }

/* --- price --- */
.landing .price-card { padding: 26px 20px; }
.landing .price-card .amt { font-size: 42px; margin: 4px 0 2px; }
.landing .price-card .amt span { font-size: 16px; color: var(--taupe); }
.landing .price-card ul { display: block; margin: 18px 0 20px; font-size: 14.5px; }
.landing .price-card li { padding: 5px 0; }
.landing .price-card .micro { margin-top: 12px; }

/* --- faq --- */
.landing .faq { margin-top: 6px; }
.landing .faq summary { font-size: 16px; gap: 12px; min-height: 46px; align-items: center; }
.landing .faq p { color: #5f4d56; }

.landing footer { padding: 38px 0 104px; }
.landing footer a { color: var(--rose-deep); display: inline-block; padding: 13px 4px; min-height: 44px; }
.landing .logo { min-height: 44px; display: inline-flex; align-items: center; }

/* --- the one action, always a thumb away --- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--rose); color: #fff; text-decoration: none;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  font-family: "Fraunces", Georgia, serif; font-size: 17px; font-weight: 600;
  box-shadow: 0 -8px 24px rgba(59, 43, 53, 0.16);
  transform: translateY(115%); transition: transform 0.25s ease;
}
.sticky-cta.on { transform: translateY(0); }
.sticky-cta .sc-sub {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11.5px; font-weight: 500; opacity: 0.92; margin-top: 2px;
}

@media (min-width: 760px) {
  .sticky-cta { display: none; }
  .landing .topbar .cta-btn.small { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 18px; font-size: 14.5px; }
  .landing .hero { padding-top: 40px; }
  .landing .hero h1 { font-size: 58px; }
  .landing .hero .sub { font-size: 19px; max-width: 40ch; }
  .landing .phone { width: 300px; }
  .landing .bens { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; }
  .landing .bens li { flex-direction: column; gap: 10px; }
  .landing .section .lede { font-size: 17px; max-width: 46ch; }
}

/* the two objections that actually stop payment, answered where she decides */
.landing .micro-privacy { margin-top: 6px; color: var(--rose-deep); font-weight: 600; }

/* the dot: the one thing she cannot get from any other peri tracker */
.dot-card { background: var(--rose-tint); border: 1px solid var(--rose-soft); }
.dot-card .dot-k { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 7px; }
.dot-card .dot-h { font-family: "Fraunces", Georgia, serif; font-size: 20px; line-height: 1.25; color: var(--plum); margin-bottom: 8px; }
.dot-card .line { font-size: 15px; line-height: 1.55; color: #5c4a53; }
.dot-card .dot-n { margin-top: 8px; font-size: 13px; color: var(--rose-deep); }

/* cancelling is easy to find and easy to do. That is the point. */
.link-quiet { color: var(--taupe); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.link-quiet:active { color: var(--rose-deep); }

/* =========================================================================
   DESKTOP — a real layout, not a phone column centred on a wide screen.
   The mobile block above stays the source of truth below 900px.
   ========================================================================= */
@media (min-width: 900px) {
  .landing .wrap { max-width: 1080px; }

  /* anchor the header: logo and action were floating at opposite ends of a
     borderless bar with nothing connecting them */
  .landing .topbar {
    padding: 20px 0 18px;
    border-bottom: 1px solid var(--line);
  }

  /* hero: copy left, phone right, so the mockup is grounded rather than floating.
     The phone is deliberately smaller here than on mobile: at 320px a 393:852
     device renders 693px tall, which forces the whole hero to that height and
     leaves the copy stranded in a column of empty cream. */
  .landing .hero {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: 52px; align-items: center; text-align: left; padding: 58px 0 54px;
  }
  .landing .hero-copy { text-align: left; }
  .landing .hero h1 { font-size: clamp(48px, 4.2vw, 60px); line-height: 1.04; }
  .landing .hero .sub { font-size: 19px; max-width: 44ch; margin: 0 0 28px; text-align: left; }
  .landing .hero .eyebrow { margin-bottom: 12px; }
  .landing .hero .cta-btn { width: auto; min-width: 300px; display: inline-flex; }
  .landing .hero .micro { text-align: left; }
  .landing .hero-visual { display: flex; flex-direction: column; align-items: center; }
  .landing .phone { width: 268px; margin: 0; }
  .landing .phone-cap { text-align: center; }

  /* quotes: one calm row instead of a horizontal scroll strip */
  .landing .quotes { padding: 30px 0; margin-top: 40px; }
  .landing .q-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    overflow: visible; padding: 0 22px; max-width: 900px; margin: 0 auto;
  }
  .landing .q { max-width: none; }

  /* sections breathe; prose stays at a readable measure */
  .landing .section { padding: 68px 0 8px; }
  .landing .section h2 { font-size: 40px; }
  .landing .section .lede { font-size: 17px; max-width: 48ch; }

  /* four benefits across, so the cards are not miniature */
  .landing .bens { grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: none; }
  .landing .bens li { flex-direction: column; align-items: flex-start; gap: 13px; padding: 22px 20px; }
  .landing .bens .ic { width: 42px; height: 42px; font-size: 20px; }

  /* three steps across */
  .landing .steps3.card-soft {
    grid-template-columns: repeat(3, 1fr); max-width: none;
    padding: 8px 26px; gap: 0;
  }
  .landing .steps3.card-soft li { border-bottom: none; padding: 22px 0; }
  .landing .steps3.card-soft li + li {
    border-left: 1px solid var(--line); padding-left: 26px; margin-left: 6px;
  }

  /* price: two columns, so the decision block is not timid */
  .landing .price-card {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
    max-width: 900px; margin: 0 auto; padding: 38px 44px; text-align: left;
  }
  .landing .price-card .amt { font-size: 54px; }
  .landing .price-card ul { margin: 0 0 22px; }
  .landing .price-card .cta-btn { width: 100%; }
  .landing .price-card .micro { text-align: left; }

  /* FAQ matches the price card's width so the page has one rhythm */
  .landing .faq { max-width: 900px; }
  .landing .faq summary { font-size: 17px; }
}

/* =========================================================================
   APP SCREENS ON DESKTOP
   A mobile-first app opened on a laptop should read as an app panel, not as a
   phone column stranded in empty space. Widen the column, define its edges,
   and float the tab bar so it stops looking like a full-width mobile bar.
   ========================================================================= */
@media (min-width: 900px) {
  .app-head { border-bottom: 1px solid var(--line); }
  .app-head .wrap { max-width: 680px; }
  .app-main { max-width: 680px; padding: 34px 34px 150px; }
  /* give the app a defined panel so it does not float on empty background */
  .app-main {
    background: var(--white); border: 1px solid var(--line); border-radius: 24px;
    box-shadow: 0 12px 40px rgba(59, 43, 53, 0.07); margin-top: 26px;
  }

  .tabbar { justify-content: center; }
  .tabbar .wrap {
    max-width: 680px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    padding-left: 10px; padding-right: 10px;
  }
  .tabbar button { font-size: 12.5px; }
  .log-row { padding: 20px 20px 16px; }
  .scale button { height: 48px; font-size: 15px; }
  .report-card { padding: 24px 26px; }
  .screen h2 { font-size: 32px; }
}

/* flat inline SVG icons: inherit colour, scale with the container */
.i { width: 1em; height: 1em; display: block; }
.tile .ic { color: var(--rose-deep); }
.tile .ic .i { width: 26px; height: 26px; }
.tabbar button .ic { display: flex; justify-content: center; }
.tabbar button .ic .i { width: 22px; height: 22px; }
.landing .bens .ic { color: var(--rose-deep); }
.landing .bens .ic .i { width: 21px; height: 21px; }
@media (min-width: 900px) { .landing .bens .ic .i { width: 24px; height: 24px; } }

/* =========================================================================
   PUBLIC ANSWER PAGES (content layer)
   Long-form reading: a comfortable measure, roomier than the landing page.
   ========================================================================= */
.answer-body p {
  font-size: 17px; line-height: 1.72; color: #5c4a53;
  max-width: 64ch; margin: 0 0 18px; text-wrap: pretty;
}
.answer-body p:first-child { font-size: 19px; color: var(--plum); }
.answer-body strong { color: var(--plum); }
@media (min-width: 900px) {
  .answer-body p { font-size: 18px; line-height: 1.75; }
  .answer-body p:first-child { font-size: 21px; }
}
/* related-answer links should read as links, not as feature cards */
.answer-body + .card, .section .bens a { text-decoration: none; }
.section .bens a:hover strong { color: var(--rose-deep); }