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

:root {
  --cream: #faf6f0;
  --cream-2: #f3ebe1;
  /* Contrast tokens. Every value here clears WCAG AA (4.5:1) for body text on
     --cream / --cream-2 / --white / --rose-tint, and for white on --rose (the
     CTA + sticky bar), because the audience is 45-54 and eyesight is exactly
     what this product is for. Do not "soften" these back without re-running
     tools/contrast_audit.py — 18 text elements failed AA at the old values. */
  --rose: #b04a50;          /* was #c2565a: white-on-rose 4.40 -> 5.33, rose-on-cream 4.05 -> 4.91 */
  --rose-deep: #a9444a;     /* 5.46 on white, 5.04 on cream, 4.65 on --rose-tint */
  --rose-soft: #ecd5d0;
  --rose-tint: #f7eae6;
  --plum: #3b2b35;
  --taupe: #6f5f66;         /* was #8b7b81: 3.72 -> 5.53 on cream, 5.99 on white */
  --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 1px 2px rgba(140, 54, 58, 0.24), 0 10px 22px -6px rgba(140, 54, 58, 0.34);
  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: 15px;
}

/* --- 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(160deg, #7b656e 0%, #3d2f37 24%, #1a1216 50%, #33262d 72%, #5c4850 100%);
  /* tight contact + warm ambient, not a neutral fog: on cream a plum-grey blur
     reads as a smudge, a warm one reads as a shadow. */
  box-shadow:
    0 2px 3px -1px rgba(59, 43, 53, 0.18),
    0 16px 28px -10px rgba(104, 62, 58, 0.28),
    0 36px 64px -22px rgba(104, 62, 58, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
/* 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: #776770; 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: #6f5f66;
  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;
  box-shadow: var(--shadow);
}

/* --- 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; max-width: 62ch; }

.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: inset 0 -1px 0 rgba(255, 255, 255, 0.20),
              0 -2px 6px rgba(104, 62, 58, 0.22),
              0 -16px 32px -8px rgba(104, 62, 58, 0.30);
  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: start; 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: 4px 0 0; }
  .landing .phone-cap { text-align: center; max-width: 268px; margin-left: auto; margin-right: auto; }

  /* 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; }
  /* the footer was reading as bolted on: no top rule, cramped above the links */
  .landing footer { margin-top: 58px; border-top: 1px solid var(--line); padding: 50px 0 76px; }
}

/* =========================================================================
   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); }


/* ---------- legal pages (privacy, terms) ---------- */
.legal { max-width: 660px; padding: 18px 0 40px; }
.legal h1 { font-size: clamp(32px, 8vw, 46px); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 10px; }
.legal h2 { font-size: 20px; font-weight: 600; margin: 30px 0 8px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.legal .lede { color: var(--taupe); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16.5px; margin-bottom: 6px; }
.legal p, .legal li { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; margin-bottom: 10px; }
.legal ul { padding-left: 20px; margin-bottom: 10px; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--rose); }
.legal a { color: var(--rose-deep); }
.legal-foot { margin-top: 34px; color: var(--taupe); font-size: 14.5px; }
footer .micro { display: inline-block; margin-top: 10px; color: var(--taupe); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; line-height: 1.5; max-width: 44ch; }
footer a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- what it is (the four plain answers) ---------- */
.whatis { padding-top: 6px; }
.whatis-list { margin-top: 18px; display: grid; gap: 12px; }
.whatis-list > div {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.whatis-list dt {
  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: 7px;
}
.whatis-list dd { font-size: 17px; line-height: 1.6; }
.whatis-list dd em { font-style: italic; }

.micro-legal { font-size: 13px; line-height: 1.55; color: var(--taupe); max-width: 46ch; margin: 14px auto 0; }
.micro-legal a { color: var(--rose-deep); text-decoration: underline; }


/* ---- install guide (install.js) -------------------------------------------
   Numbered steps because she is following along with the phone in her other
   hand. No emoji, no arrow characters: they render differently per platform or
   not at all. Inherits the existing card voice. */
.install-steps {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.62;
  color: #64545c;
  margin: 12px 0 4px;
  padding-left: 0;
  list-style: none;
  counter-reset: ins;
}
.install-steps li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 12px;
  counter-increment: ins;
}
.install-steps li::before {
  content: counter(ins);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rose-tint);
  color: var(--rose-deep);
  border: 1px solid var(--rose-soft);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
}
.install-steps li:last-child { margin-bottom: 6px; }
.install-steps b { color: var(--plum); font-weight: 600; }
#installCard .ghost-btn { margin-top: 4px; }
#installCard .link-btn { margin-top: 10px; }

/* ---------- commercial/content pages (/compare/*, /pricing, /flo-alternative …) ----------
   One buying decision per page, rendered from worker/src/pages/*.js by the content
   layer. Same cream/rose register as the landing page: sans body text for long-form
   reading at 45-54 sizes, serif reserved for headings. Every colour here is an
   existing AA token — re-run tools/contrast_audit.py before changing one. */
.landing .page-body { padding: 30px 0 8px; }
.landing .page-body h1 { font-size: clamp(30px, 7vw, 44px); line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.02em; font-weight: 500; }
.landing .page-body h2 { font-size: clamp(23px, 5.6vw, 30px); line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; margin: 40px 0 10px; }
.landing .page-body h3 { font-size: 19.5px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; margin: 26px 0 6px; }
.landing .page-body p,
.landing .page-body li {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16.5px; line-height: 1.68; color: var(--plum); margin-bottom: 14px;
  /* Long-form prose on a 390px screen leaves short final lines ("to diagnose
     anything."). Chrome/Safari balance the last line when asked; older engines
     ignore the property. Measured: roughly halves the orphan count. */
  text-wrap: pretty;
}
.landing .page-body .lead { font-size: 18.5px; line-height: 1.6; margin-bottom: 18px; }
.landing .page-body ul,
.landing .page-body ol { margin: 6px 0 18px 22px; display: grid; gap: 8px; }
.landing .page-body li { margin-bottom: 0; }
.landing .page-body strong { font-weight: 700; }
.landing .page-body a { color: var(--rose-deep); text-decoration: underline; text-underline-offset: 2px; }
.landing .page-body .src { font-size: 13.5px; line-height: 1.5; color: var(--taupe); margin: 10px 0 18px; }
.landing .page-body .callout {
  background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--rose);
  border-radius: 14px; padding: 16px 18px; margin: 22px 0; box-shadow: var(--shadow);
  font-size: 15.5px; line-height: 1.6;
}
/* comparison tables scroll rather than squeeze: mobile_audit.py fails any page with
   horizontal overflow, and these are read on a phone */
.landing .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 18px; }
.landing .cmp {
  width: 100%; border-collapse: collapse; background: var(--white);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 15.5px;
}
.landing .cmp th,
.landing .cmp td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--plum); }
.landing .cmp th { background: var(--rose-tint); color: var(--rose-deep); font-size: 12.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.landing .cmp tbody tr:last-child td { border-bottom: none; }
.landing .page-meta { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; color: var(--taupe); margin: 0 0 18px; }
.landing .page-body .faq-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.landing .page-body .faq-item:last-child { border-bottom: none; }
.landing .page-body .faq-item h3 { margin: 0 0 6px; font-size: 18px; }
.landing .page-body .faq-item p { margin-bottom: 0; }
.landing .page-nav { margin: 34px 0 0; }
.landing .page-nav .k { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 12px; }
@media (max-width: 430px) {
  .landing .cmp th,
  .landing .cmp td { padding: 10px 11px; font-size: 14.5px; }
  .landing .page-body p,
  .landing .page-body li { font-size: 16px; }
}
/* An auto-layout table sizes each column to its widest word, which lands ~406px for
   three columns and makes the table scroll sideways inside .cmp-wrap on a 390px phone.
   Fixed layout plus a breaking rule fits it without any sideways scroll, which matters
   for a reader in her fifties holding the phone in one hand. */
@media (max-width: 620px) {
  .landing .cmp { table-layout: fixed; }
  .landing .cmp th,
  .landing .cmp td { overflow-wrap: anywhere; }
}
/* The related-links rows are the page's main onward path: make the whole row a
   44px-tall tap target instead of a 19px inline link. */
.landing .page-nav .bens li > div > a { display: block; padding: 12px 0; }
.landing .page-nav .bens li { align-items: flex-start; }

/* ---------- the Monday report, shown as it arrives ----------
   Not a chart and not a mock dashboard: three lines in the exact shape the product
   sends, so the $49.99 is legible before signup. Type is set at body size because
   this is the first block a 45-54 reader is meant to actually read. */
.report-proof { padding-top: 4px; }
.report-proof .report {
  max-width: 620px; margin: 0 auto; text-align: left;
  background: var(--white); border: 1.5px solid var(--rose-soft);
  border-radius: var(--radius); padding: 24px 22px 22px;
  box-shadow: 0 18px 40px rgba(122, 74, 60, 0.08);
}
.report-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 14px; padding-bottom: 13px; margin-bottom: 16px;
  border-bottom: 1px solid var(--rose-soft);
}
.report-day { font-size: 20px; color: var(--plum); }
.report-sub {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rose-deep);
}
.report-line {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15.5px; line-height: 1.62; color: var(--taupe); margin: 0 0 13px;
}
.report-tip {
  color: var(--plum); background: var(--rose-tint); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 16px;
}
.report-note {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px; color: var(--taupe); margin: 0;
}
@media (min-width: 760px) {
  .report-proof .report { padding: 28px 30px 22px; }
  .report-line { font-size: 16.5px; }
}