/* The Aurek website (rollout 15, WEBSITE.md): /home, /pricing, /welcome, /help, /press, /community-guidelines.
   Rollout 18 look (R19-WEB): the app's design system (DESIGN.md — Calm Coach) on a product site. The tokens below mirror
   :root in src/styles.css one for one (warm sand / ivory in light, warm charcoal in dark, the gold accent, Inter, the
   one radius scale, pill buttons) — keep them in step when the app's tokens change (scripts/site-tests.ts checks the
   core ones). Rules from DESIGN.md: gold only for the one primary button per area, selection (the picked plan, focus)
   and the hero metric (the sample readiness ring); no gradients, no glows, no colored shadows; no card in a card;
   sentence case; one line + the number, longer explanations behind a small "More" pill (<details class="lr-why">) or
   on the Help page. Light by default, dark from the system setting. No inline styles or scripts (CSP). Bump ?v= in
   every page when this file changes (cached for a year). */
:root {
  color-scheme: light dark;
  /* = src/styles.css :root (light) */
  --bg: #f4eee6; --card: #fffcf8; --card2: #f4ede4; --surface-3: #ebe2d6;
  --ink: #2a241f; --sub: #675d54; --faint: #6c6157;
  --accent: #eaa50c; --accent-ink: #7a5005; --on-accent: #2b1c04;
  --accent-soft: color-mix(in srgb, var(--accent) 17%, var(--card));
  --good: #4d6e49; --good-ink: #44633f; --good-soft: #e3eadb; --bad: #c8382c; --bad-ink: #a92a20;
  --line: #ece3d8; --line-2: #ddd1c3; --track: #ece3d7;
  --hairline: rgba(80, 55, 30, 0.06); --fill: rgba(90, 62, 30, 0.075); --fill-2: rgba(90, 62, 30, 0.13);
  --sel: var(--ink); --on-sel: #fffcf8;
  --focus: color-mix(in srgb, var(--accent) 70%, var(--ink));
  --shadow-1: 0 1px 2px rgba(80, 55, 30, 0.06), 0 8px 24px rgba(80, 55, 30, 0.06);
  --shadow-2: 0 1px 2px rgba(80, 55, 30, 0.08), 0 6px 18px rgba(80, 55, 30, 0.09);
  /* website only */
  --top: rgba(244, 238, 230, 0.84);
  --panel: var(--card2);
  --band: #2a241f; --on-band: #f4eee6; --band-sub: #c9beb2;
  --device: #1d1a17; --device-edge: rgba(42, 36, 31, 0.1);
  --shadow-device: 0 2px 4px rgba(80, 55, 30, 0.08), 0 36px 70px -28px rgba(80, 55, 30, 0.42);
  /* = src/styles.css type, space, radius, controls, motion */
  --body: 'Inter', -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --r-xs: 8px; --r-sm: 12px; --r-ctl: 16px; --r-md: 20px; --r-lg: 26px; --r-xl: 32px; --r-pill: 999px;
  --btn-h: 54px; --btn-h-sm: 44px; --tap: 44px;
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 1160px; --gutter: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* = src/styles.css :root (dark) */
    --bg: #151311; --card: #211e1b; --card2: #2b2723; --surface-3: #34302b;
    --ink: #f4eee6; --sub: #bcb1a5; --faint: #a69b8f;
    --accent: #f7b928; --accent-ink: #f6c25a; --on-accent: #2b1c04;
    --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--card));
    --good: #a3c19c; --good-ink: #afcca8; --good-soft: #26302a; --bad: #ff7b6b; --bad-ink: #ff8d7f;
    --line: #34302b; --line-2: #46403a; --track: #38322c;
    --hairline: rgba(255, 240, 220, 0.05); --fill: rgba(255, 240, 220, 0.07); --fill-2: rgba(255, 240, 220, 0.12);
    --on-sel: #151311;
    --focus: var(--accent);
    --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --shadow-2: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 14px rgba(0, 0, 0, 0.25);
    --top: rgba(21, 19, 17, 0.82);
    --panel: #1b1916;
    --band: #211e1b; --on-band: #f4eee6; --band-sub: #bcb1a5;
    --device: #0d0c0b; --device-edge: rgba(255, 240, 220, 0.13);
    --shadow-device: 0 30px 70px -24px rgba(0, 0, 0, 0.75);
  }
}
@media (min-width: 400px) { :root { --gutter: 20px; } }
@media (min-width: 860px) { :root { --gutter: 32px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--body); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(32px, 6.4vw, 54px); letter-spacing: -0.04em; line-height: 1.04; }
h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
.lr-skip { position: absolute; left: -999px; top: 8px; z-index: 10; background: var(--card); color: var(--ink); padding: 10px 14px; border-radius: var(--r-sm); }
.lr-skip:focus { left: 8px; }
.lr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lr-svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Pricing on/off (public/www.js): trial buttons or the waitlist; nothing jumps while it's being checked. */
html:not(.mode-waitlist) [data-when="waitlist"] { display: none !important; }
.mode-waitlist [data-when="trial"] { display: none !important; }
.mode-pending [data-when] { visibility: hidden; }
.has-plan [data-hide-with-plan] { display: none !important; }
.known .lr-nav .lr-btn-sm { display: none !important; }

/* Buttons: pills. Primary = gold (one per area), secondary = soft neutral fill, links = ink. */
.lr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 0 28px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: 600 17px/1.1 var(--body); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: filter var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.lr-btn:hover { filter: brightness(1.05); }
.lr-btn:active { transform: scale(0.98); }
.lr-btn[disabled] { opacity: 0.6; cursor: default; }
.lr-btn-sm { min-height: var(--btn-h-sm); padding: 0 18px; font-size: 15px; }
.lr-btn-block { display: flex; width: 100%; }
.lr-more, .lr-cta-row .lr-link { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); color: var(--ink); font-weight: 600; text-decoration: none; }
.lr-more::after, .lr-cta-row .lr-link::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); margin-left: 8px; opacity: 0.6; }
.lr-more:hover, .lr-cta-row .lr-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Header: translucent sand with a hairline; the page you're on sits in a soft pill. */
.lr-top { position: sticky; top: 0; z-index: 5; background: var(--top); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--hairline); }
.lr-top-in { max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(8px, env(safe-area-inset-top)) var(--gutter) 8px; min-height: 64px; }
.lr-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: var(--tap); }
.lr-mark { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.lr-word { font-weight: 700; font-size: 19px; letter-spacing: -0.03em; }
.lr-nav { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.lr-nav a.lr-link { color: var(--ink); font-weight: 500; font-size: 15px; text-decoration: none; padding: 0 14px; min-height: var(--tap); display: inline-flex; align-items: center; border-radius: var(--r-pill); }
.lr-nav a.lr-link:hover { background: var(--fill); }
.lr-nav a.lr-link[aria-current="page"] { background: var(--fill); font-weight: 600; }
.lr-nav .lr-btn-sm { margin-left: 8px; }
.lr-short { display: none; }

/* A phone: the real screen (light or dark, <picture>) in a thin warm-black bezel. --dw sets the width. */
.lr-device { --dw: 300px; position: relative; width: var(--dw); flex: none; border-radius: calc(var(--dw) * 0.16); padding: calc(var(--dw) * 0.028); background: var(--device); box-shadow: 0 0 0 1px var(--device-edge), var(--shadow-device); }
.lr-device img { width: 100%; aspect-ratio: 600 / 1298; object-fit: cover; object-position: top; border-radius: calc(var(--dw) * 0.135); background: var(--card2); }

/* Hero: big headline, one gold button, the platforms; a panel with the phones rising out of it. */
.lr-hero-in { max-width: var(--wrap); margin: 0 auto; padding: 40px var(--gutter) 0; display: grid; gap: 40px; }
.lr-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--sub); font-weight: 600; font-size: 15px; margin-bottom: 18px; }
.lr-hero h1 { font-size: clamp(54px, 15.5vw, 112px); letter-spacing: -0.055em; line-height: 0.95; }
.lr-lede { margin-top: 22px; font-size: clamp(18px, 2.1vw, 21px); line-height: 1.45; color: var(--sub); max-width: 30ch; letter-spacing: -0.012em; }
.lr-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 30px; }
.lr-fine { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--sub); max-width: 50ch; }
.lr-platforms { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.lr-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 7px 18px 7px 14px; border-radius: var(--r-ctl); background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); color: var(--ink); line-height: 1.15; }
.lr-badge .lr-svg { width: 24px; height: 24px; stroke-width: 1.6; }
.lr-badge small { display: block; font-size: 11px; font-weight: 600; color: var(--sub); letter-spacing: 0.01em; }
.lr-badge b { display: block; font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
.lr-android { margin-top: 12px; font-size: 14px; color: var(--sub); max-width: 46ch; }
.lr-hero-media { position: relative; height: clamp(420px, 118vw, 540px); overflow: hidden; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--card); box-shadow: 0 0 0 1px var(--hairline); display: flex; justify-content: center; padding-top: 36px; }
.lr-hero-media .lr-device { --dw: min(300px, 74vw); }
.lr-hero-media .lr-device-2 { display: none; }
.lr-invite { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 16px var(--gutter) 0; padding: 12px 18px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--ink); font-weight: 600; text-align: center; }
@media (min-width: 1224px) { .lr-invite { margin-inline: auto; } }
.lr-invite[hidden] { display: none; }

/* Sections */
.lr-section { max-width: var(--wrap); margin: 0 auto; padding: 96px var(--gutter) 0; }
.lr-head { max-width: 720px; margin-bottom: 40px; }
.lr-head-c { margin-inline: auto; text-align: center; }
.lr-head-c .lr-sub { margin-inline: auto; }
.lr-overline { color: var(--sub); font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.lr-sub { color: var(--sub); margin-top: 18px; max-width: 46ch; font-size: clamp(18px, 2vw, 20px); line-height: 1.45; letter-spacing: -0.012em; }

/* Feature rows: one line of copy beside real screens in a quiet panel (alternating sides on wide screens). */
.lr-rows { list-style: none; padding: 0; display: grid; gap: 20px; }
.lr-row { display: grid; background: var(--card); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 0 0 1px var(--hairline), var(--shadow-1); }
.lr-row-text { padding: 32px 24px 28px; align-self: center; }
.lr-row-text .lr-overline { margin-bottom: 10px; font-size: 14px; }
.lr-row-text h3 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; }
.lr-row-text > p:not(.lr-overline) { color: var(--sub); margin-top: 14px; font-size: 17px; line-height: 1.5; max-width: 36ch; }
.lr-row-media { position: relative; background: var(--panel); display: flex; justify-content: center; align-items: flex-start; gap: 20px; padding: 36px 20px 0; height: 400px; overflow: hidden; }
.lr-row-media .lr-device { --dw: 252px; }
.lr-row-media .lr-device + .lr-device { display: none; }

/* "More" disclosure: the app's "Why?" pill (soft gold surface) that opens a short explanation. */
.lr-why { margin-top: 20px; }
.lr-why summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--ink); font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; user-select: none; }
.lr-why summary::-webkit-details-marker { display: none; }
.lr-why summary::before { content: 'i'; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid currentColor; font: 700 11px/1 var(--body); }
.lr-why summary::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 4px; opacity: 0.6; transition: transform var(--dur-2) var(--ease-out); }
.lr-why[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.lr-why-body { margin-top: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--fill); color: var(--sub); font-size: 15px; line-height: 1.55; max-width: 46ch; }
.lr-why-body p + p { margin-top: 8px; }

/* Small tiles under the rows */
.lr-tiles { list-style: none; padding: 0; display: grid; gap: 20px; margin-top: 20px; }
.lr-tile { background: var(--card); border-radius: var(--r-lg); padding: 28px 24px; box-shadow: 0 0 0 1px var(--hairline), var(--shadow-1); }
.lr-tile h3 { font-size: 21px; font-weight: 650; letter-spacing: -0.025em; margin-top: 20px; }
.lr-tile p { color: var(--sub); margin-top: 8px; font-size: 16px; }
.lr-tile .lr-more { margin-top: 6px; }
.lr-ico { flex: none; width: 52px; height: 52px; border-radius: var(--r-ctl); display: flex; align-items: center; justify-content: center; background: var(--fill); color: var(--ink); }
.lr-ico-gold { background: var(--accent-soft); color: var(--accent-ink); }
.lr-ico .lr-svg { width: 24px; height: 24px; }
.lr-shotnote { margin-top: 18px; font-size: 13px; color: var(--faint); text-align: center; }

/* How readiness works: three short steps beside a sample readiness card (the app's ring + "Why 86?" meters). */
.lr-how { display: grid; gap: 20px; align-items: start; }
.lr-flow { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: f; }
.lr-flow li { counter-increment: f; position: relative; padding: 22px 0 22px 60px; }
.lr-flow li + li { border-top: 1px solid var(--line); }
.lr-flow li::before { content: counter(f); position: absolute; left: 0; top: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--fill); color: var(--ink); font: 650 16px/40px var(--body); text-align: center; font-variant-numeric: tabular-nums; }
.lr-flow h3 { font-size: 20px; }
.lr-flow p { color: var(--sub); font-size: 16px; margin-top: 6px; max-width: 44ch; }
.lr-score { margin: 0; background: var(--card); border-radius: var(--r-lg); padding: 24px; box-shadow: 0 0 0 1px var(--hairline), var(--shadow-1); }
.lr-score-top { display: flex; align-items: center; gap: 20px; }
.lr-ring { position: relative; width: 120px; height: 120px; flex: none; }
.lr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lr-ring circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.lr-ring .t { stroke: var(--track); }
.lr-ring .v { stroke: var(--accent); stroke-dasharray: 280 326; }
.lr-ring b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 40px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.lr-ring b small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--sub); margin-top: 4px; }
.lr-score-title { font-size: 21px; font-weight: 650; letter-spacing: -0.025em; }
.lr-score-why { color: var(--sub); font-size: 15px; margin-top: 4px; }
.lr-score-label { display: inline-flex; margin-top: 22px; color: var(--sub); font-size: 13px; font-weight: 600; }
.lr-inputs { list-style: none; padding: 0; margin-top: 6px; display: grid; gap: 0; }
.lr-inputs li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.lr-inputs li:first-child { border-top: 0; }
.lr-inputs span { color: var(--sub); font-weight: 400; font-variant-numeric: tabular-nums; }
.lr-inputs i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.lr-inputs i::after { content: ''; display: block; height: 100%; width: var(--w, 50%); background: var(--ink); border-radius: 3px; }
.lr-inputs .w90 { --w: 90%; } .lr-inputs .w85 { --w: 85%; } .lr-inputs .w80 { --w: 80%; } .lr-inputs .w75 { --w: 75%; } .lr-inputs .w70 { --w: 70%; }
.lr-note { margin-top: 24px; font-size: 13px; color: var(--faint); max-width: 70ch; }

/* Who it's for */
.lr-who { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lr-who li { background: var(--card); border-radius: var(--r-lg); padding: 22px 20px; box-shadow: 0 0 0 1px var(--hairline), var(--shadow-1); }
.lr-who b { display: block; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.lr-who span { display: block; color: var(--sub); font-size: 15px; margin-top: 6px; }

/* Pricing: two plan cards (yearly picked and marked), one gold button under them. */
.lr-pricing { max-width: 780px; margin: 0 auto; }
.lr-pricing fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.lr-pricing legend { font-weight: 600; font-size: 15px; color: var(--sub); margin-bottom: 14px; padding: 0; }
.lr-plan { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name radio" "price price" "sub sub"; align-items: center; gap: 0 12px; padding: 24px; border-radius: var(--r-lg); background: var(--card); cursor: pointer; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); transition: box-shadow var(--dur-2) var(--ease-out); }
.lr-plan:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2); }
.lr-plan input { position: absolute; opacity: 0; pointer-events: none; }
.lr-plan-main { display: contents; }
.lr-plan-name { grid-area: name; font-weight: 650; font-size: 18px; letter-spacing: -0.015em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lr-radio { grid-area: radio; justify-self: end; flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); transition: box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out); }
.lr-plan input:checked ~ .lr-radio { background: var(--accent); box-shadow: inset 0 0 0 7px var(--accent), inset 0 0 0 26px var(--card); }
.lr-plan:has(input:checked) { box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); }
.lr-plan input:focus-visible ~ .lr-radio { outline: 2px solid var(--focus); outline-offset: 3px; }
.lr-plan-sub { grid-area: sub; color: var(--sub); font-size: 14px; margin-top: 4px; }
.lr-price { grid-area: price; white-space: nowrap; margin-top: 18px; }
.lr-price b { font-size: 44px; font-weight: 650; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; line-height: 1; }
.lr-price span { color: var(--sub); font-size: 16px; font-weight: 500; margin-left: 3px; }
.lr-save { white-space: nowrap; padding: 4px 10px; border-radius: var(--r-pill); background: var(--sel); color: var(--on-sel); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.lr-plan-box { background: var(--card); border-radius: var(--r-lg); padding: 24px; margin-top: 12px; box-shadow: 0 0 0 1px var(--hairline), var(--shadow-1); }
.lr-plan-box .lr-fine { margin-top: 14px; }
.lr-ticks { padding: 0; list-style: none; display: grid; gap: 10px 28px; margin-top: 22px; }
.lr-ticks li { padding-left: 28px; position: relative; color: var(--sub); font-size: 15px; }
.lr-ticks li::before, .lr-incl li::before { content: ''; position: absolute; left: 3px; top: 6px; width: 11px; height: 6px; border-left: 2px solid var(--good); border-bottom: 2px solid var(--good); transform: rotate(-45deg); }
.lr-field { display: grid; gap: 8px; }
.lr-field label { font-weight: 600; font-size: 15px; }
.lr-field input { min-height: var(--btn-h); padding: 0 18px; border-radius: var(--r-ctl); border: 0; background: var(--fill); box-shadow: inset 0 0 0 1px transparent; color: var(--ink); font: 16px var(--body); width: 100%; }
.lr-field input::placeholder { color: var(--faint); }
.lr-field input:focus { box-shadow: inset 0 0 0 2px var(--accent); outline: none; }
.lr-field + .lr-btn { margin-top: 14px; }
.lr-msg { margin-top: 12px; font-weight: 600; min-height: 1.5em; }
.lr-msg:empty { min-height: 0; margin-top: 0; }
.lr-msg.ok { color: var(--good-ink); }
.lr-msg.bad { color: var(--bad-ink); }
.lr-status { margin-bottom: 20px; padding: 24px; border-radius: var(--r-lg); background: var(--card); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-1); }
.lr-status[hidden] { display: none; }
.lr-status h3 { margin-bottom: 4px; }
.lr-status p { color: var(--sub); }
.lr-status .lr-cta-row { margin-top: 18px; }
.lr-pricing > .lr-fine { text-align: center; margin: 18px auto 0; }

/* FAQ: one grouped card, rows split by hairlines. */
.lr-faq { display: grid; gap: 32px; }
.lr-qs { background: var(--card); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-1); overflow: hidden; }
.lr-q { padding: 0 22px; margin: 0; }
.lr-q + .lr-q { border-top: 1px solid var(--line); }
.lr-q summary { cursor: pointer; font-weight: 600; font-size: 16px; padding: 16px 0; list-style: none; display: flex; gap: 16px; min-height: 60px; align-items: center; }
.lr-q summary::-webkit-details-marker { display: none; }
.lr-q summary::after { content: ''; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--sub); border-bottom: 2px solid var(--sub); transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.lr-q[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.lr-q p { padding: 0 0 18px; color: var(--sub); max-width: 64ch; }
.lr-q p + p { margin-top: -6px; }

/* Closing call to action: a warm charcoal band. */
.lr-end { max-width: var(--wrap); margin: 112px auto 0; padding: 0 var(--gutter); }
.lr-end-in { background: var(--band); color: var(--on-band); border-radius: var(--r-xl); padding: 64px 24px; text-align: center; box-shadow: var(--shadow-1); }
.lr-end h2 { font-size: clamp(36px, 7vw, 64px); }
.lr-end .lr-sub { margin-inline: auto; color: var(--band-sub); text-wrap: balance; }
.lr-end .lr-cta-row { justify-content: center; }
.lr-end .lr-fine { margin-inline: auto; color: var(--band-sub); }

/* Content pages (pricing, help, press, guidelines, welcome) */
.lr-doc { max-width: 800px; margin: 0 auto; padding: 64px var(--gutter) 0; }
.lr-doc h1 { font-size: clamp(44px, 10vw, 72px); letter-spacing: -0.05em; line-height: 1; margin-bottom: 18px; }
.lr-doc h2 { font-size: clamp(24px, 4vw, 30px); letter-spacing: -0.03em; line-height: 1.2; margin: 56px 0 16px; scroll-margin-top: 88px; }
.lr-doc p, .lr-doc li { color: var(--sub); }
.lr-doc li strong, .lr-doc p strong { color: var(--ink); font-weight: 600; }
.lr-doc p + p { margin-top: 12px; }
.lr-doc ul, .lr-doc ol { padding-left: 22px; display: grid; gap: 10px; margin-top: 8px; }
.lr-doc li::marker { color: var(--faint); }
.lr-doc .lr-lead { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; color: var(--sub); letter-spacing: -0.012em; max-width: 52ch; }
.lr-doc > .lr-fine { margin-top: 18px; }
.lr-doc-c { text-align: center; }
.lr-doc-c .lr-lead { max-width: 44ch; margin-inline: auto; }
.lr-doc-wide { max-width: 1000px; }
.lr-card { background: var(--card); border-radius: var(--r-lg); padding: 8px 24px; margin-top: 32px; box-shadow: 0 0 0 1px var(--hairline), var(--shadow-1); }
.lr-card h2 { margin-top: 0; }
.lr-chips { list-style: none; padding: 0 !important; display: flex !important; flex-wrap: wrap; gap: 8px !important; margin-top: 28px !important; }
.lr-chips a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; border-radius: var(--r-pill); background: var(--fill); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.lr-chips a:hover { background: var(--fill-2); }
.lr-facts { display: grid; gap: 0; margin: 0; }
.lr-facts div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 16px 0; }
.lr-facts div + div { border-top: 1px solid var(--line); }
.lr-facts dt { font-weight: 600; color: var(--ink); }
.lr-facts dd { margin: 0; color: var(--sub); }
.lr-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.lr-assets a { display: grid; gap: 12px; justify-items: center; align-content: center; padding: 20px 12px 16px; border-radius: var(--r-lg); background: var(--card); text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; text-align: center; box-shadow: 0 0 0 1px var(--hairline), var(--shadow-1); }
.lr-assets a:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2); }
.lr-assets img { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; object-position: top; }
.lr-assets .lr-asset-wide img { width: 100%; height: auto; aspect-ratio: 1200 / 630; border-radius: var(--r-sm); }
.lr-assets small { display: block; color: var(--sub); font-weight: 500; font-size: 13px; }
.lr-shots { list-style: none; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px !important; margin-top: 16px !important; }
.lr-shots a { display: grid; gap: 10px; justify-items: center; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.lr-shots .lr-device { --dw: 100%; width: 100%; border-radius: 13% / 6%; padding: 3.5%; }
.lr-shots .lr-device img { border-radius: 10% / 4.6%; }
.lr-shots a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.lr-incl { list-style: none; padding: 0 !important; display: grid; gap: 14px 32px !important; margin-top: 16px; }
.lr-incl li { position: relative; padding-left: 30px; color: var(--ink); }
.lr-done { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 4px; }
.lr-done svg { width: 64px; height: 64px; flex: none; color: var(--good); }
.lr-done svg path { stroke: var(--card); }
.lr-plans { margin-top: 40px; }
.lr-steps { list-style: none; padding: 0 !important; display: grid; gap: 0 !important; counter-reset: s; margin-top: 36px !important; background: var(--card); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-1); }
.lr-steps li { counter-increment: s; position: relative; padding: 26px 24px 26px 80px; color: var(--ink); }
.lr-steps li + li { border-top: 1px solid var(--line); }
.lr-steps li strong { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; }
.lr-steps li::before { content: counter(s); position: absolute; left: 24px; top: 22px; width: 40px; height: 40px; border-radius: 50%; background: var(--fill); color: var(--ink); font: 650 16px/40px var(--body); text-align: center; }
.lr-steps li p { color: var(--sub); margin-top: 6px; }
.lr-steps .lr-cta-row { margin-top: 18px; }
.lr-store-slot { margin-top: 18px; }
.lr-store-soon { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 14px; line-height: 1.3; border-radius: var(--r-ctl); background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--ink); font-weight: 600; font-size: 15px; }
.lr-store-soon::before { content: ''; flex: none; width: 14px; height: 22px; border: 1.8px solid currentColor; border-radius: 4px; }
.lr-store { display: inline-flex; align-items: center; min-height: var(--btn-h); padding: 0 24px; border-radius: var(--r-ctl); background: #000; color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 0 0 1px var(--device-edge); }

/* Instagram / TikTok */
.lr-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lr-social a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: var(--tap); min-height: var(--tap); border-radius: var(--r-pill); background: var(--fill); color: var(--ink); text-decoration: none; padding: 0; }
.lr-social a:hover { background: var(--fill-2); }
.lr-social svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.lr-social-wide a { padding: 0 18px 0 14px; font-size: 15px; font-weight: 600; }

/* Footer: brand + socials, links in columns, the fine print. */
.lr-foot { margin: 112px 0 0; padding: 56px var(--gutter) max(32px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); font-size: 14px; color: var(--sub); }
.lr-foot-in, .lr-foot-legal { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin-inline: auto; }
.lr-foot-in { display: grid; gap: 36px; }
.lr-foot .lr-brand { color: var(--ink); padding: 0; }
.lr-foot-brand p { margin-top: 6px; color: var(--sub); }
.lr-foot-brand .lr-mark { width: 28px; height: 28px; border-radius: 8px; }
.lr-foot-brand .lr-word { font-size: 17px; }
.lr-foot nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.lr-foot-col:last-child { grid-column: 1 / -1; }
.lr-foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.lr-foot-h { color: var(--ink); font-weight: 650; margin-bottom: 6px; }
.lr-foot-col a { color: var(--sub); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; padding: 6px 0; }
.lr-foot-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lr-foot-legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 13px; color: var(--faint); }

@media (min-width: 640px) {
  .lr-pricing fieldset { grid-template-columns: 1fr 1fr; }
  .lr-tiles { grid-template-columns: repeat(3, 1fr); }
  .lr-ticks { grid-template-columns: 1fr 1fr; }
  .lr-incl { grid-template-columns: 1fr 1fr; }
  .lr-assets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lr-assets .lr-asset-wide { grid-column: span 2; }
  .lr-foot nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lr-foot-col:last-child { grid-column: auto; }
  .lr-row-media .lr-device + .lr-device { display: block; }
  .lr-row-media .lr-device { --dw: 230px; }
  .lr-row-media .lr-device + .lr-device { margin-top: 40px; }
}
@media (min-width: 860px) {
  .lr-hero-in { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: end; padding-top: 80px; gap: 40px; }
  .lr-hero-copy { padding-bottom: 96px; }
  .lr-hero-media { height: 640px; padding-top: 56px; gap: 0; }
  .lr-hero-media .lr-device { --dw: 300px; z-index: 1; }
  .lr-hero h1 { font-size: clamp(64px, 8.6vw, 112px); }
  .lr-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); min-height: 520px; }
  .lr-row-text { padding: 56px 48px 56px 56px; }
  .lr-row-media { height: 520px; padding: 56px 32px 0; gap: 24px; }
  .lr-row-media .lr-device { --dw: 260px; }
  .lr-row:nth-child(even) .lr-row-text { order: 2; padding: 56px 56px 56px 48px; }
  .lr-how { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .lr-score { padding: 32px; }
  .lr-who { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .lr-faq { grid-template-columns: 0.75fr 1.25fr; gap: 64px; align-items: start; }
  .lr-faq .lr-head { margin-bottom: 0; position: sticky; top: 104px; }
  .lr-foot-in { grid-template-columns: 1fr 2fr; }
  .lr-section { padding-top: 136px; }
  .lr-end { margin-top: 136px; }
  .lr-end-in { padding: 96px 40px; }
  .lr-doc { padding-top: 88px; }
}
@media (min-width: 1100px) {
  .lr-row-media .lr-device { --dw: 270px; }
  .lr-hero-media .lr-device-2 { display: block; --dw: 250px; z-index: 0; margin: 96px 0 0 -40px; }
}
@media (max-width: 480px) {
  .lr-nav a.lr-hide-sm { display: none; }
  .lr-long { display: none; }
  .lr-short { display: inline; }
  .lr-flow li { padding-left: 56px; }
  .lr-steps li { padding: 22px 20px 22px 70px; }
  .lr-steps li::before { left: 18px; top: 20px; }
  .lr-score { padding: 20px; }
  .lr-ring { width: 104px; height: 104px; }
  .lr-ring b { font-size: 34px; }
  .lr-plan { padding: 20px; }
  .lr-price b { font-size: 38px; }
  .lr-plan-box { padding: 20px; }
  .lr-q { padding: 0 18px; }
  .lr-end-in { padding: 52px 20px; }
  .lr-facts div { grid-template-columns: 6.5em 1fr; }
  .lr-card { padding: 4px 20px; }
  .lr-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 350px) {
  .lr-top-in { gap: 6px; }
  .lr-brand { gap: 7px; }
  .lr-mark { width: 28px; height: 28px; }
  .lr-word { font-size: 17px; }
  .lr-nav a.lr-link { padding: 0 8px; }
  .lr-nav .lr-btn-sm { padding: 0 12px; margin-left: 2px; }
  .lr-facts div { grid-template-columns: 1fr; gap: 2px; }
  .lr-who { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }