/* Roo: Hair Loss Coach — the website's one stylesheet.
   The app's look (DesignSystem/Theme.swift, 2026-11-06): white pages with softly tinted, thinly edged cards, navy words,
   one blue family (the light brand blue fills buttons with navy words; its deep step is for links, outlines and
   progress), and Roo's coral for Roo alone. In the dark appearance every token takes the app's evening, Deep ocean.
   The home page is a light sky, one heavy line and a real screen in a phone, then big rounded panels (see "Home");
   the document pages keep a band of the painted moon scene at their top. Cards rise in as they scroll into view
   (site.js; nothing moves with Reduce Motion).
   Plus Jakarta Sans is served from this site (no requests to Google), so the site sets no cookies and calls no one. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* Titles are New York, Apple's own serif, as in the app (the owner's pick, 2026-11-11): the first two heading levels
   only. It can't be served from a site, so the page asks for the system's serif (`ui-serif`, New York on iPhone, iPad
   and Mac), with Georgia wherever there's none. */

:root {
  color-scheme: light dark;
  --page: #FFFFFF;
  --card: #F3F7FC;
  --card-edge: #E0E8F1;
  --raised: #FFFFFF;
  --calm: #EEF5FC;
  --ink: #17203D;
  --ink-soft: #58627E;
  --line: #E3EAF2;
  /* The brand's light blue fills buttons, chips and your own chat bubbles, with navy words; its deep step is for words,
     links, outlines and progress, which the light blue is too pale for. */
  --blue: #A6D7FA;
  --blue-press: #7DB7E0;
  --on-blue: #17203D;
  --link: #2A6797;
  --ring: #64A9DF;
  --sage: #0EA85A;
  --sun: #F5B000;
  --alert: #D93B30;
  --coral: #FF7A59;
  --butter: #FDE5B2;
  --periwinkle: #D6EBFB;
  --pink: #F8D9E3;
  --mint: #D2EDDF;
  --lilac: #DEDDFA;
  --peach: #FFE3D1;
  --neutral: #EEF1F6;
  --track: #D6EBFB;
  --row-edge: #A6D7FA;
  --bubble: #FFFFFF;
  --night: #163049;
  /* The moon scene's black sky, behind the hero and the document pages' headers. */
  --space: #02050C;
  --band: url("scene-wide-day.webp");
  --shadow-rgb: 23 32 61;
  --shadow-soft: 0 10px 30px -12px rgb(var(--shadow-rgb) / 0.16);
  --shadow-float: 0 18px 50px -18px rgb(var(--shadow-rgb) / 0.32);
  --badge-fill: #000000;
  --badge-edge: #A6A6A6;

  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Headings, big numbers and buttons. The text face for now: one place to set a display face later. */
  --display: var(--font);
  --title: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --r-card: 20px;
  --r-tile: 16px;
  --r-row: 14px;
  --r-button: 14px;
  --gutter: clamp(16px, 5vw, 32px);
  --header-h: 72px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0A1724;
    --card: #11233A;
    --card-edge: #1F3650;
    --raised: #163049;
    --calm: #0C1B2D;
    --ink: #EEF5FB;
    --ink-soft: #9DB4CA;
    --line: #27405C;
    --blue: #A6D7FA;
    --blue-press: #7DB7E0;
    --on-blue: #0A1724;
    --link: #A6D7FA;
    --sage: #2FD27D;
    --sun: #FFC83D;
    --alert: #FF6B5E;
    --butter: rgb(255 255 255 / 0.12);
    --periwinkle: rgb(255 255 255 / 0.12);
    --pink: rgb(255 255 255 / 0.12);
    --mint: rgb(255 255 255 / 0.12);
    --lilac: rgb(255 255 255 / 0.12);
    --peach: rgb(255 255 255 / 0.12);
    --neutral: #1D3A58;
    --track: #1D3A58;
    --row-edge: #1F3D5E;
    --bubble: #163049;
    --band: url("scene-wide-night.webp");
    --shadow-soft: 0 10px 30px -12px rgb(0 0 0 / 0.5);
    --shadow-float: 0 18px 50px -18px rgb(0 0 0 / 0.7);
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--ink); }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink); }
h1 { font-family: var(--title); font-weight: 700; font-size: clamp(38px, 7.4vw, 66px); line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-family: var(--title); font-weight: 700; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
ul, ol { margin: 0; padding: 0; }
strong, b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--track); color: var(--ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--blue); color: var(--on-blue); font-weight: 700;
  padding: 12px 18px; border-radius: var(--r-button); text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--on-blue); }

.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.section { padding-block: clamp(64px, 9vw, 112px); }
.section + .section { padding-top: 0; }
.section-head { display: grid; gap: 14px; max-width: 680px; margin-bottom: clamp(32px, 4.5vw, 48px); }
.section-head p { color: var(--ink-soft); font-size: 18px; }
.section-head.centred { margin-inline: auto; text-align: center; justify-items: center; }

/* A small label over a heading: the app's chip. Premium is never a colour (butter means pills), so its badge is the
   paywall's neutral grey. */
.chip {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  height: 32px; padding: 0 14px; border-radius: 999px;
  background: var(--calm); color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: 0;
}
.chip svg { width: 16px; height: 16px; }
.badge-premium {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--line); color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap;
}

/* ---------- Header: a floating white pill, like the app's tab bar ---------- */

.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); padding-top: 10px; pointer-events: none; }
.site-header .wrap { pointer-events: none; }
.nav {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* Its corners follow the Get the app button inside it (14 px, 6 px in), so the bar and the button are one shape
     (the owner, 2026-11-13: the pill-shaped bar didn't fit the button). */
  height: 52px; padding: 0 6px 0 8px; border-radius: calc(var(--r-button) + 6px);
  background: var(--bubble); box-shadow: 0 8px 28px -10px rgb(var(--shadow-rgb) / 0.28), 0 0 0 1px rgb(var(--shadow-rgb) / 0.04);
}
@media (prefers-color-scheme: dark) { .nav { box-shadow: 0 8px 28px -10px rgb(5 12 51 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.08); } }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; border-radius: 999px; padding-right: 6px; }
.brand:hover { color: var(--ink); }
/* The name says what it is: "Roo" with "Hair Loss Coach" under it. */
.brand-name { display: grid; line-height: 1.05; }
.brand-name small { font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-soft); }
.brand picture, .brand img { width: 38px; height: 38px; border-radius: 11px; }
/* The app icon is white by day, so it gets a hairline edge on the white bar. */
.brand img { box-shadow: 0 0 0 1px rgb(var(--shadow-rgb) / 0.10); }
@media (prefers-color-scheme: dark) { .brand img { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12); } }
.nav-links { display: none; gap: 4px; list-style: none; }
.nav-links a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 650; }
.nav-links a:hover { color: var(--ink); background: var(--calm); }
.nav-end { display: flex; align-items: center; gap: 6px; }
/* Two classes, so the general .btn rule further down (54 px tall, raised) can't override the nav's smaller button. */
.nav .btn-nav { height: 40px; padding: 0 16px; font-size: 15px; box-shadow: none; }
.nav .btn-nav:active { transform: scale(0.97); box-shadow: none; }
.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: var(--r-button);
  display: grid; place-items: center; background: var(--calm); color: var(--ink);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 20px; height: 20px; }
.menu[open] summary { background: var(--track); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(260px, calc(100vw - 2 * var(--gutter)));
  background: var(--bubble); border-radius: var(--r-tile); padding: 8px;
  box-shadow: 0 18px 50px -12px rgb(var(--shadow-rgb) / 0.35), 0 0 0 1px rgb(var(--shadow-rgb) / 0.05);
  list-style: none; display: grid; gap: 2px;
}
.menu-panel a { display: block; padding: 12px 14px; border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 650; }
.menu-panel a:hover { background: var(--calm); }
@media (min-width: 880px) {
  .nav { padding: 0 6px 0 8px; }
  .nav-links { display: flex; }
  .menu { display: none; }
}
@media (max-width: 359px) { .nav .btn-nav { display: none; } }

/* ---------- Buttons: the app's, 14-point corners; the main one raised on a darker lower edge, like .chunky ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 26px; border-radius: var(--r-button); border: 0; cursor: pointer;
  font: 750 17px/1 var(--display); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn-primary { background: var(--blue); color: var(--on-blue); box-shadow: 0 4px 0 var(--blue-press); }
.btn-primary:hover { color: var(--on-blue); background: #B6DFFB; }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--blue-press); }
.btn-soft { background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--card-edge); }
.btn-soft:hover { color: var(--ink); background: var(--calm); }
.btn-soft:active { transform: scale(0.98); }
.btn svg { width: 20px; height: 20px; }

/* The App Store badge. A placeholder until the app is live: swap for Apple's official badge then (README). */
.store-badge {
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px;
  border-radius: 14px; background: var(--badge-fill); color: #FFFFFF; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--badge-edge); transition: transform 0.15s ease;
}
.store-badge:hover { color: #FFFFFF; }
.store-badge:active { transform: scale(0.98); }
.store-badge svg { width: 24px; height: 28px; flex: none; }
.store-badge span { display: grid; line-height: 1.05; text-align: left; }
.store-badge small { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.store-badge strong { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Home (2026-11-10): a sky, one line and the app itself ----------
   The owner's direction: bold and simple, in the spirit of thebrainrotapp.com. One heavy line under a light sky, the
   App Store badge, a real screen in a phone (assets/app-*.webp, tools/make_website_pictures.py), then big rounded
   panels with Roo, the five monsters, the places a streak unlocks and three sourced facts. Pricing, privacy and the
   questions follow as before. Nothing here is drawn in HTML to imitate the app: the phone shows the app. */

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.home { --sky-top: #9AD4FF; --sky-mid: #CBEAFF; --panel-top: #A6D7FA; --panel-end: #DCEFFD; --ground: #BDE5CD; --ground-end: #A3D6B9; --frame: #0E1630; }
@media (prefers-color-scheme: dark) {
  .home { --sky-top: #0B2238; --sky-mid: #102C45; --panel-top: #163049; --panel-end: #0F2338; --ground: #1F4A3A; --ground-end: #183B2E; --frame: #04090F; }
}

/* The sky runs up behind the floating header. */
.sky {
  margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + clamp(36px, 7vw, 76px));
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 44%, var(--page) 100%);
  /* Clipped at the sides only (the floating notes may drift past them): clipped all round, the window's shadow was
     cut off in a straight line at the section's foot (the owner, 2026-11-13). */
  padding-bottom: clamp(20px, 3vw, 36px); text-align: center; overflow-x: clip; overflow-y: visible;
}
/* Two lines on every screen: "Fix your hair loss," and "with a plan" (the owner, 2026-11-13). The first line needs
   about 8.2 times the font size in width, so the size follows the screen (10.6vw) and the line never breaks inside. */
.sky h1 { font-size: clamp(30px, 10.6vw, 96px); line-height: 1; letter-spacing: -0.025em; max-width: 9.6em; margin-inline: auto; }
.sky h1 .nowrap { white-space: nowrap; }
.sky .lede { margin: clamp(16px, 2.4vw, 24px) auto 0; max-width: 26em; font-size: clamp(18px, 2.3vw, 22px); line-height: 1.4; font-weight: 550; color: var(--ink); opacity: 0.8; text-wrap: balance; }
.sky-actions { display: flex; justify-content: center; margin-top: clamp(22px, 3vw, 30px); }
.sky .hint { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--ink); opacity: 0.66; }
/* What Roo is, said before the headline. */
.sky .kicker {
  display: inline-block; margin-bottom: clamp(14px, 2vw, 20px); padding: 7px 14px; border-radius: 999px;
  background: rgb(255 255 255 / 0.6); box-shadow: inset 0 0 0 1px rgb(var(--shadow-rgb) / 0.07);
  font-size: 14px; font-weight: 800; letter-spacing: 0.01em; color: var(--ink);
}
@media (prefers-color-scheme: dark) { .sky .kicker { background: rgb(255 255 255 / 0.1); } }

/* The window onto Roo's world: the app's own painting, Roo on his rock (wide screens), and the phone rising from
   its foot, with two notes floating beside it. */
.window {
  position: relative; overflow: hidden; margin: clamp(30px, 5vw, 52px) auto 0; width: min(100%, 1160px);
  aspect-ratio: 1651 / 953; min-height: 470px; border-radius: clamp(26px, 4vw, 48px);
  background: #429CBE; box-shadow: 0 44px 90px -54px rgb(var(--shadow-rgb) / 0.6);
}
@media (prefers-color-scheme: dark) { .window:not([data-time="morning"]) { background: #053366; } }
.window .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 34% 100%; }
/* Morning and evening, as on Today in the app: the evening painting and screen lie over the morning ones and fade in.
   Evening is the start in the dark appearance; the switch above the window (shown when the script runs) sets it. */
.window .night { opacity: 0; transition: opacity 0.7s ease; }
.window .phone .night { position: absolute; left: 9px; top: 9px; width: calc(100% - 18px); }
.window[data-time="evening"] .night { opacity: 1; }
.window[data-time="evening"] { background: #053366; }
@media (prefers-color-scheme: dark) { .window:not([data-time="morning"]) .night { opacity: 1; } }
.daynight {
  display: none; margin: clamp(22px, 3.4vw, 34px) auto 0; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 0.55);
  box-shadow: inset 0 0 0 1px rgb(var(--shadow-rgb) / 0.06);
}
.js .daynight { display: inline-flex; }
@media (prefers-color-scheme: dark) { .daynight { background: rgb(255 255 255 / 0.1); } }
.daynight button {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: var(--ink); font: 700 15px/1 var(--font); opacity: 0.72; transition: background-color 0.2s ease, opacity 0.2s ease;
}
.daynight button[aria-pressed="true"] { background: var(--raised); color: var(--link); opacity: 1; box-shadow: 0 2px 8px -3px rgb(var(--shadow-rgb) / 0.3); }
.daynight svg { width: 17px; height: 17px; }
.daynight .sun { color: var(--sun); }
.daynight + .window { margin-top: 14px; }
.phone {
  position: relative; width: min(300px, 62vw); margin-inline: auto; padding: 9px; border-radius: 52px; background: var(--frame);
  box-shadow: 0 36px 80px -34px rgb(var(--shadow-rgb) / 0.6), inset 0 0 0 1.5px rgb(255 255 255 / 0.14);
}
.phone picture, .phone img { display: block; width: 100%; border-radius: 43px; }
.window .phone { position: absolute; left: 50%; top: 13%; margin: 0; transform: translateX(-50%); }
.window-roo { display: none; position: absolute; left: 19%; top: 71%; width: 15%; transform: translate(-50%, -88%); }
.window-roo img { width: 100%; }
.window-roo .bubble {
  position: absolute; left: 50%; bottom: 100%; width: max-content; max-width: 236px; margin-bottom: 14px; transform: translateX(-44%);
  text-align: left; font-size: 15px; line-height: 1.38; box-shadow: var(--shadow-soft);
  /* White with navy words by day and at night, as Roo's bubble is in the app (the owner, 2026-11-11). */
  background: #FFFFFF; color: #17203D;
}
.window-roo .bubble::before { left: 44%; bottom: -7px; box-shadow: none; }
.float {
  display: none; position: absolute; z-index: 2; width: 244px; padding: 14px 16px 15px; border-radius: 22px; text-align: left;
  background: var(--raised); color: var(--ink); font-size: 15px; line-height: 1.35; font-weight: 550;
  box-shadow: var(--shadow-float); transform: translate3d(0, calc(var(--py, 0) * 1px), 0);
}
@media (min-width: 1000px) { .float, .window-roo { display: block; } }
.float.one { right: 3.6%; top: 12%; }
.float.two { right: 2.4%; top: 44%; }
/* The plan note: the treatments' own pictures, a name and how often, as Your plan lists them in the app. */
.float.plan-note ul { list-style: none; display: grid; gap: 9px; margin: 2px 0 0; padding: 0; }
.float.plan-note li { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; }
.float.plan-note li img { grid-row: span 2; width: 34px; height: 34px; object-fit: contain; }
.float.plan-note li b { font-size: 15px; line-height: 1.2; }
.float.plan-note li span { font-size: 13px; line-height: 1.25; color: var(--ink-soft); font-weight: 600; }
.float .who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.float .who img { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 1px rgb(var(--shadow-rgb) / 0.1); }
.float .who svg { width: 18px; height: 18px; }
.float .who span { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 650; }
.float b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }

.promise-strip { padding-top: clamp(8px, 2vw, 20px); }

/* Home's headings are bigger, centred and a touch heavier than the font's boldest (a hairline of their own colour). */
.home h1, .home h2, .story-steps h3 { -webkit-text-stroke: 0.012em currentColor; }
.home .section-head h2 { font-size: clamp(32px, 5.2vw, 58px); line-height: 1.06; letter-spacing: -0.02em; }
.home .section-head.centred { max-width: 760px; }
.home .section-head.centred p { max-width: 34em; }
.home .faq { margin-inline: auto; }
.home .privacy-more { justify-content: center; }
.home .faq + p { text-align: center; }

/* The story: the phone stays where it is while the steps scroll past, and its screen changes with them. On phones it
   sticks under the header and the steps pass beneath it; on wide screens it sits beside them. */
.story-grid { display: grid; }
.story-stage { position: sticky; top: var(--header-h); z-index: 2; height: 46vh; min-height: 300px; background: var(--page); }
/* The phone is cut off at the stage's foot and fades into the page there; the steps slip out of sight under a soft edge. */
.story-stage .clip { position: relative; height: 100%; padding-top: 12px; overflow: hidden; }
.story-stage .clip::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(transparent, var(--page)); }
.story-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 30px; background: linear-gradient(var(--page), transparent); pointer-events: none; }
.story-stage .phone { width: min(250px, 62vw); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.14); }
.story-stage .phone img { transition: opacity 0.45s ease; }
.story-stage .phone img + img { position: absolute; left: 9px; top: 9px; width: calc(100% - 18px); opacity: 0; z-index: 1; }
/* Each step keeps the screens before it shown underneath, so a new screen fades in over one that stays whole (going
   back, the top one fades away over it). Fading one out while the next faded in let the first screen show through
   half way (the owner, 2026-11-13: step 2 to step 3 "is not good"). `.phone` in each, so these always outweigh the
   hiding rule above. */
.story-grid:is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .phone .s2,
.story-grid:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .phone .s3,
.story-grid:is([data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .phone .s4,
.story-grid:is([data-step="5"], [data-step="6"], [data-step="7"]) .phone .s5,
.story-grid:is([data-step="6"], [data-step="7"]) .phone .s6,
.story-grid[data-step="7"] .phone .s7 { opacity: 1; }
/* Each app screen that has an evening look in the app has its twin (`.n`, the same step class) right after it, shown
   only in the evening look: the site's Morning | Evening switch turns the dark rules on and off (site.js). The
   results and the monsters' sheets stay light, as they are in the app at night. */
.story-stage .phone img.n { visibility: hidden; }
/* In the evening look the daytime twin (`.d`) is hidden outright: fading in beneath its night twin while both were
   half see-through, it showed the bright daytime screen for a moment at every step (the owner, 2026-11-13: day 1 to
   day 3 "flashes rather than just changing the image"). */
@media (prefers-color-scheme: dark) { .story-stage .phone img.n { visibility: visible; } .story-stage .phone img.d { visibility: hidden; } }
/* The monsters' sheets are all in the phone and fade over each other (swapping one picture's address made the phone
   blink while the next loaded). Laziness is the one underneath. */
.story-grid[data-step="4"][data-monster="doubt"] .m-doubt, .story-grid[data-step="4"][data-monster="impatience"] .m-impatience,
.story-grid[data-step="4"][data-monster="frustration"] .m-frustration, .story-grid[data-step="4"][data-monster="hopelessness"] .m-hopelessness { opacity: 1; }
.story-stage .phone img.m { transition-duration: 0.28s; }
.story-steps { display: grid; list-style: none; }
.story-steps > li { display: grid; align-content: center; justify-items: center; gap: 14px; min-height: 62vh; padding-block: 5vh; text-align: center; }
.story-steps .when { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--blue); color: var(--on-blue); font-size: 14px; font-weight: 800; }
.story-steps h3 { max-width: 11em; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.02; letter-spacing: -0.04em; }
.story-steps > li > p:not(.when) { max-width: 25em; font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--ink-soft); }
.monster-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; }
.monster-row li { width: 62px; }
.monster-row button {
  display: grid; justify-items: center; gap: 2px; width: 100%; padding: 4px 0 6px; border: 0; border-radius: 16px; cursor: pointer;
  background: none; color: var(--ink-soft); font: 700 11px/1.2 var(--font); white-space: nowrap; transition: background-color 0.2s ease, transform 0.2s ease;
}
.monster-row button:hover { transform: translateY(-2px); }
.monster-row button[aria-pressed="true"] { background: var(--calm); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--card-edge); }
.monster-row img { width: 54px; height: 54px; }
.story-steps > li > p.whisper {
  padding: 14px 18px; border-radius: var(--r-tile); background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge);
  font-size: 16px; font-weight: 700; color: var(--ink); text-align: left;
}
.whisper span { display: block; margin-bottom: 4px; font-weight: 550; color: var(--ink-soft); }
.story-steps > li > p.whisper { width: 100%; max-width: 25em; min-height: 5.4em; }
.story-steps .tap-hint { font-size: 14px; font-weight: 650; color: var(--ink-soft); }
@media (min-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 88px); align-items: start; }
  .story-stage { top: calc(var(--header-h) + 20px); height: min(670px, calc(100vh - var(--header-h) - 40px)); background: none; }
  .story-stage::after, .story-stage .clip::after { display: none; }
  .story-stage .clip { padding-top: 0; overflow: visible; display: grid; justify-items: end; align-content: start; }
  /* The whole phone shows, so it's as wide as the screen's height allows. */
  .story-stage .phone { width: min(300px, calc((100vh - var(--header-h) - 60px) / 2.24)); margin: 0; }
  .story-steps > li { justify-items: start; min-height: 78vh; padding-block: 0; text-align: left; }
  .monster-row { justify-content: flex-start; gap: 12px; }
  .monster-row li { width: 76px; }
  .monster-row button { font-size: 12px; }
  .monster-row img { width: 64px; height: 64px; }
}

/* The treatments with their evidence grades: the app's rendered pictures, a name and the letter. */
.treats-strip { padding-top: clamp(28px, 5vw, 56px); }
.treats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; }
@media (min-width: 640px) { .treats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .treats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } }
.treats li {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 18px 10px 16px; border-radius: var(--r-card);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); text-align: center;
}
.treats img { width: min(112px, 70%); height: auto; aspect-ratio: 1; object-fit: contain; }
.treats b { font-size: clamp(15px, 1.7vw, 17px); line-height: 1.2; }
.treats .grade {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--link); color: var(--page); font-size: 14px; font-weight: 800; line-height: 1;
}
.fine.centred { margin: 16px auto 0; max-width: 40em; text-align: center; font-size: 14px; color: var(--ink-soft); }

/* What Roo does, in the app's own illustrations (assets/ill): a picture, a title and one line each. */
.gets { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; }
@media (min-width: 900px) { .gets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.get { display: grid; gap: 8px; align-content: start; padding: clamp(14px, 2vw, 20px); border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); }
.get img { width: 100%; max-width: 220px; aspect-ratio: 1; object-fit: contain; margin: 0 auto 4px; }
.get h3 { font-size: clamp(17px, 2vw, 20px); line-height: 1.2; }
.get p { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.45; color: var(--ink-soft); }

/* The four places, each a wide painting with Roo on its rock (--rx and --ry are the rock's top, per painting). */
.worlds { display: grid; gap: 16px; list-style: none; }
@media (min-width: 760px) { .worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.world-card { position: relative; overflow: hidden; aspect-ratio: 1651 / 953; border-radius: clamp(22px, 3vw, 36px); background: var(--card); }
.world-card .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.world-card .roo { position: absolute; left: var(--rx); top: var(--ry); width: 17%; transform: translate(-50%, -86%); }
.world-card p {
  position: absolute; right: 12px; bottom: 12px; padding: 8px 14px 9px; border-radius: 16px;
  background: rgb(255 255 255 / 0.94); color: #17203D; font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; text-align: left;
}
.world-card small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0; color: #58627E; }
/* Not yet earned, as in the app's background picker (TodayBackgroundView): the painting paler and dimmed, the set's
   padlock on a white circle in the middle. One wash in the card's own colour lies over the painting and Roo together,
   so Roo sits behind it like the rest of the place and stays solid (faded on his own he was see-through; the owner,
   2026-11-13). The padlock and the label sit above the wash. */
.world-card.locked .art, .world-card.locked .roo { filter: saturate(0.35); }
.world-card.locked::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--card) 45%, transparent); }
.world-card.locked p { z-index: 1; }
.world-card .lock {
  z-index: 1;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
  width: clamp(52px, 7vw, 68px); aspect-ratio: 1; border-radius: 50%; background: #FFFFFF; color: #17203D;
}
.world-card .lock svg { width: 52%; height: 52%; }

/* Three numbers from published studies on a navy band, each with its source. */
.band {
  border-radius: clamp(28px, 4.4vw, 48px); padding: clamp(44px, 7vw, 88px) clamp(22px, 5vw, 64px);
  background: #17203D; color: #FFFFFF; text-align: center;
}
@media (prefers-color-scheme: dark) { .band { background: #11233A; box-shadow: inset 0 0 0 1px var(--card-edge); } }
.band h2 { color: #FFFFFF; font-size: clamp(34px, 5.6vw, 64px); line-height: 1.06; letter-spacing: -0.02em; }
.band .sub { margin: 14px auto 0; max-width: 32em; font-size: clamp(17px, 2vw, 20px); color: rgb(255 255 255 / 0.78); text-wrap: balance; }
.facts { display: grid; gap: 28px; margin-top: clamp(32px, 5vw, 60px); list-style: none; text-align: left; }
@media (min-width: 860px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; } }
.facts li { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 0.18); }
.facts .n { font: 800 clamp(42px, 5vw, 62px)/1 var(--display); letter-spacing: -0.05em; white-space: nowrap; color: #A6D7FA; }
.facts p { color: rgb(255 255 255 / 0.88); }
.facts .src { font-size: 13px; line-height: 1.4; }
.facts .src a { color: rgb(255 255 255 / 0.62); }
.facts .src a:hover { color: #FFFFFF; }

/* The close: the crystal cavern, Roo holding his heart on its rock. Below 900 px the painting is cut to the box's
   height and kept to its left, so the rock is always 16% of the painting's width in. */
.finale {
  position: relative; overflow: hidden; display: grid; align-content: start; justify-items: center; text-align: center;
  width: 100%; aspect-ratio: 1651 / 953; min-height: 520px; border-radius: clamp(28px, 4.4vw, 48px); background: #1A394A; color: #FFFFFF;
}
.finale .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 100%; }
.finale::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(6 18 28 / 0.78) 0%, rgb(6 18 28 / 0.3) 48%, transparent 72%); }
.finale-copy { position: relative; z-index: 1; padding: clamp(40px, 7vw, 84px) 20px 0; }
.finale h2 { color: #FFFFFF; font-size: clamp(38px, 6.6vw, 80px); line-height: 1.04; letter-spacing: -0.02em; }
.finale .sub { margin: 14px auto 0; max-width: 26em; font-size: clamp(17px, 2.1vw, 21px); font-weight: 550; color: rgb(255 255 255 / 0.88); text-wrap: balance; }
.finale .sky-actions { margin-top: 26px; }
.finale .roo { position: absolute; z-index: 1; left: 144px; top: 69%; width: 112px; transform: translate(-50%, -86%); }
@media (min-width: 900px) { .finale .roo { left: 16%; width: 15%; } }

/* ---------- Promise strip ---------- */

.promises { display: grid; gap: 12px; list-style: none; }
.promises li { display: flex; align-items: center; gap: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); border-radius: var(--r-tile); padding: 16px 18px; font-weight: 650; font-size: 16px; line-height: 1.35; }
@media (min-width: 760px) { .promises { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* An icon in a soft circle, as on the app's cards. */
.ic-circle { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--neutral); color: var(--ink); }
.ic-circle svg { width: 28px; height: 28px; }
.ic-circle.sage { background: var(--mint); }
.ic-circle.sun { background: var(--butter); }
.ic-circle.blue { background: var(--periwinkle); }
.ic-circle.lilac { background: var(--lilac); }
.ic-circle.pink { background: var(--pink); }

/* ---------- Shared pieces: Roo's speech bubble and the plain card (the document pages use them) ---------- */

.bubble {
  position: relative; background: var(--raised); color: var(--ink);
  border-radius: 18px; padding: 14px 18px; font-size: 17px; line-height: 1.4; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--card-edge); max-width: 420px;
}
.bubble::before {
  content: ""; position: absolute; left: -7px; bottom: 22px; width: 16px; height: 16px;
  background: inherit; border-radius: 3px; transform: rotate(45deg);
  box-shadow: -1px 1px 0 0 var(--card-edge);
}
.card { background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); border-radius: var(--r-card); padding: clamp(22px, 3vw, 28px); }

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

.pricing-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 940px) { .pricing-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; } }
.compare { background: var(--raised); border-radius: var(--r-card); box-shadow: inset 0 0 0 1.5px var(--line); padding: 6px 16px 4px; overflow: hidden; }
.compare table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare caption { text-align: left; padding: 14px 4px 6px; font-weight: 800; font-size: 17px; }
.compare th, .compare td { padding: 12px 4px; border-top: 1px solid var(--line); vertical-align: middle; }
.compare thead th { border-top: 0; font-size: 13px; font-weight: 800; color: var(--ink-soft); padding-block: 8px 10px; }
.compare thead th:first-child { text-align: left; }
.compare tbody th { text-align: left; font-weight: 650; line-height: 1.35; }
.compare tbody th small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
.compare .col { width: 82px; text-align: center; }
@media (min-width: 480px) { .compare .col { width: 96px; } }
@media (min-width: 1100px) { .compare .col { width: 112px; } }
.compare .col-premium-head span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--line); color: var(--ink); }
.compare td { text-align: center; font-weight: 650; color: var(--ink-soft); font-size: 13.5px; line-height: 1.25; }
.compare td.p { color: var(--ink); font-weight: 800; }
.compare td svg { width: 24px; height: 24px; margin-inline: auto; color: var(--ink-soft); }
.compare td.p svg { color: var(--ink); }
/* Under Premium's tick, small and in brackets: how much or from when, as on the app's paywall. */
.compare td small { display: block; margin-top: 2px; font-size: 12px; font-weight: 650; color: var(--ink-soft); }
.compare td .no { display: block; width: 12px; height: 2.5px; border-radius: 2px; background: var(--line); margin-inline: auto; }
.compare-foot { padding: 12px 4px 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.plans { display: grid; gap: 14px; }
.plan { position: relative; display: grid; gap: 4px; background: var(--raised); border-radius: var(--r-tile); padding: 20px 22px; box-shadow: inset 0 0 0 1.5px var(--line); }
.plan.picked { box-shadow: inset 0 0 0 2px var(--link); background: var(--calm); }
.plan .name { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.plan .price { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.plan .price small { font-size: 16px; font-weight: 650; color: var(--ink-soft); letter-spacing: 0; }
.plan .per { font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.plan-premium-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.plan-premium-head img { width: 76px; flex: none; }
.plan-premium-head h3 { font-size: 26px; }
.plan-premium-head p { color: var(--ink-soft); font-size: 16px; }
.trial { display: flex; gap: 10px; align-items: flex-start; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); border-radius: var(--r-tile); padding: 16px 18px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.trial svg { width: 20px; height: 20px; flex: none; color: var(--sage); margin-top: 1px; }
.fine { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

/* ---------- Privacy ---------- */

.privacy-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .privacy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.privacy-card { display: grid; gap: 12px; align-content: start; }
.privacy-card p, .privacy-card li { color: var(--ink-soft); font-size: 16px; }
.privacy-card ul { list-style: none; display: grid; gap: 8px; }
.privacy-card li { display: flex; gap: 10px; align-items: flex-start; }
.privacy-card li svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--sage); }
.privacy-more { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }

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

.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); border-radius: var(--r-row); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px 18px 22px; font-weight: 700; font-size: 17px; line-height: 1.35; border-radius: var(--r-row);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358627E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 0.2s ease;
}
@media (prefers-color-scheme: dark) {
  .faq summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3BFE6' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); }
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 22px 20px; color: var(--ink-soft); font-size: 16px; display: grid; gap: 10px; }

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

.site-footer { padding-block: 56px 48px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } }
.footer-grid h2 { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: 0; margin-bottom: 10px; }
.footer-links { list-style: none; display: grid; gap: 8px; }
.footer-links a { color: var(--ink); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--link); text-decoration: underline; }
.footer-about { display: grid; gap: 12px; }
.footer-about .brand { font-size: 18px; }
.disclaimer { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 14px; line-height: 1.6; }
.disclaimer strong { color: var(--ink); }

/* ---------- Document pages: privacy, support, clinics, the guides ---------- */

/* A band of the moon scene at the top, its horizon low, with a curve at the bottom like the home page's hero. */
.doc-hero {
  position: relative; isolation: isolate;
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + 40px) 0 clamp(64px, 9vw, 96px);
  /* Most of it sky, so the words sit on black; the horizon and the ground at the foot of the band. */
  background: var(--band) center 36% / cover no-repeat, var(--space);
  color: #FFFFFF;
  clip-path: ellipse(150% 100% at 50% 0%);
  margin-bottom: 28px;
}
.doc-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgb(2 5 12 / 0.55), rgb(2 5 12 / 0.15) 70%, transparent); }
.doc-hero .wrap { display: grid; gap: 14px; max-width: 820px; }
.doc-hero h1 { font-size: clamp(36px, 6.4vw, 56px); color: #FFFFFF; }
.doc-hero p, .doc-hero .byline { color: rgb(255 255 255 / 0.85); font-weight: 600; }
.doc-hero .greeting { display: flex; align-items: center; gap: 12px; }
.doc-hero .greeting .roo { width: 86px; flex: none; }
.doc-hero .greeting .bubble { background: #FFFFFF; color: #17203D; box-shadow: none; }
.doc-hero .greeting .bubble::before { top: 50%; bottom: auto; margin-top: -8px; box-shadow: none; }
.doc-hero .crumbs a { color: #FFFFFF; }
.doc-hero .crumbs a:hover { color: #FFFFFF; }
.doc-hero .draft-note { color: #17203D; background: #FFFFFF; }
.doc { max-width: 820px; }
.doc h2 { font-size: clamp(24px, 3.4vw, 30px); margin: 44px 0 12px; scroll-margin-top: calc(var(--header-h) + 16px); }
.doc h3 { margin: 26px 0 8px; }
.doc p, .doc li { color: var(--ink); }
.doc p + p { margin-top: 14px; }
.doc .muted { color: var(--ink-soft); }
.doc ul.list { padding-left: 22px; display: grid; gap: 6px; margin-top: 10px; }
.tldr { background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); border-radius: var(--r-card); padding: 22px 24px; display: grid; gap: 10px; }
.tldr h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; }
.tldr ul { list-style: none; display: grid; gap: 10px; }
.tldr li { display: flex; gap: 12px; align-items: flex-start; }
.tldr li svg { width: 20px; height: 20px; flex: none; color: var(--sage); margin-top: 3px; }
.table-wrap { overflow-x: auto; border-radius: var(--r-tile); box-shadow: inset 0 0 0 1.5px var(--line); background: var(--raised); margin-top: 14px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 13px 16px; border-top: 1px solid var(--line); }
.table-wrap tr:first-child th, .table-wrap tr:first-child td { border-top: 0; }
.table-wrap th { font-weight: 800; font-size: 14px; color: var(--ink-soft); background: var(--card); }
/* On phones each row of a table becomes a small card, each cell under its column's name. */
@media (max-width: 600px) {
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap tr.head { display: none; }
  .table-wrap tr { padding: 14px 16px 12px; border-top: 1px solid var(--line); }
  .table-wrap tr.head + tr { border-top: 0; }
  .table-wrap td { border: 0; padding: 0 0 8px; }
  .table-wrap td:first-child { font-weight: 700; }
  .table-wrap td::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); margin-bottom: 1px; }
}
.toc { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 8px; }
.toc a { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 650; }
.toc a:hover { background: var(--calm); }
.email {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); text-decoration: none;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge); border-radius: 999px; padding: 10px 18px 10px 12px; user-select: all;
}
.email:hover { color: var(--link); }
.email svg { width: 22px; height: 22px; color: var(--link); }
.help-grid { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 720px) { .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.help-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-content: start; }
.help-card > .ic-circle { grid-column: 1; }
.help-card > h3 { grid-column: 2; align-self: center; margin: 0; }
.help-card > :not(.ic-circle):not(h3) { grid-column: 1 / -1; }
.help-card p + p { margin-top: 0; }
.help-card p, .help-card li { color: var(--ink-soft); font-size: 16px; }
.help-card ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.callout-safety { display: flex; gap: 14px; align-items: flex-start; border-radius: var(--r-tile); padding: 18px 20px; background: rgb(217 59 48 / 0.08); box-shadow: inset 0 0 0 1.5px rgb(217 59 48 / 0.25); margin-top: 18px; }
.callout-safety svg { width: 24px; height: 24px; color: var(--alert); flex: none; margin-top: 2px; }
.callout-safety p { color: var(--ink); }

/* ---------- 404: lost on the moon ---------- */

.lost {
  min-height: 100vh; min-height: 100dvh; display: grid; justify-items: center; align-content: start; text-align: center;
  padding-top: 14vh !important;
  padding: 48px var(--gutter); color: #FFFFFF;
  background: var(--band) center 70% / cover no-repeat, var(--space);
}
.lost h1 { color: #FFFFFF; }
.lost p { font-weight: 600; color: rgb(255 255 255 / 0.85); }
.lost .inner { display: grid; gap: 18px; justify-items: center; max-width: 520px; }
.lost img { width: 160px; }

/* The invite and buddy pages (invite/, buddy/): the code from the link, big, once the script has read it. */
.invite { padding-top: 8vh !important; }
/* Their words sit on a dark panel, so they read over the moon's bright ground as well as its sky. */
.invite .inner { padding: 28px clamp(18px, 4vw, 32px) 30px; border-radius: 28px; background: rgb(2 5 12 / 0.68); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.invite .with-code { display: none; gap: 10px; justify-items: center; }
.has-code .invite .with-code { display: grid; }
.has-code .invite .without-code { display: none; }
.invite .code {
  font-size: clamp(36px, 11vw, 52px); font-weight: 800; letter-spacing: 0.14em; line-height: 1.1; color: #FFFFFF;
  padding: 10px 22px; border-radius: 18px; background: rgb(255 255 255 / 0.12); user-select: all; -webkit-user-select: all;
}
.invite .steps { display: grid; gap: 8px; margin: 0; padding-left: 1.3em; text-align: left; font-weight: 600; color: rgb(255 255 255 / 0.85); }

/* ---------- Motion ---------- */

/* Cards rise into place as they scroll in (only when the script runs, so the page reads without it). */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Guides: articles and their index (blog/) ---------- */

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; font-size: 14px; font-weight: 650; }
.crumbs a { color: var(--ink); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li + li::before { content: "›"; margin-right: 6px; opacity: 0.6; }
.byline { font-size: 14px; font-weight: 600; color: var(--ink); }
.draft-note {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 6px;
  background: var(--bubble); border: 2px dashed var(--link); border-radius: var(--r-tile); padding: 14px 16px;
  font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.45;
}
.draft-note strong { color: var(--link); }
.article { max-width: none; }
.doc-hero.wide .wrap { max-width: 1160px; }
.doc-hero.wide p { max-width: 640px; }
.article > p, .article > ul, .article > ol { margin-top: 14px; }
.article h2 { font-size: clamp(24px, 3.4vw, 30px); margin: 44px 0 12px; scroll-margin-top: calc(var(--header-h) + 16px); }
.article h3 { margin: 26px 0 6px; font-size: 19px; }
.article ul.list, .article ol.list { padding-left: 22px; display: grid; gap: 8px; }
.article li::marker { color: var(--ink-soft); }
.article a { font-weight: 600; }
.answer-box { background: var(--calm); box-shadow: inset 0 0 0 1px var(--card-edge); border-radius: var(--r-tile); padding: 20px 22px; display: grid; gap: 8px; }
.answer-box .label { font-size: 14px; font-weight: 800; color: var(--link); }
.answer-box p { font-size: 18px; font-weight: 550; line-height: 1.55; }
.article .table-wrap { margin-top: 16px; }
.article .table-wrap th[scope="row"] { background: transparent; color: var(--ink); font-size: 15px; font-weight: 700; }
@media (max-width: 600px) {
  .article .table-wrap th[scope="row"] { display: block; padding: 0 0 8px; border-top: 0; font-size: 16px; font-weight: 800; }
  .article .table-wrap td:first-of-type { font-weight: 450; }
}
.article .faq { margin-top: 16px; }
.sources { padding-left: 22px; display: grid; gap: 10px; font-size: 15px; color: var(--ink-soft); line-height: 1.5; margin-top: 12px; }
.sources li { scroll-margin-top: calc(var(--header-h) + 16px); }
.sources li:target { color: var(--ink); }
.sources a { word-break: break-word; }
.article-note { margin-top: 28px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.app-card { display: grid; gap: 16px; align-items: center; margin-top: 40px; }
.app-card img { width: 96px; }
.app-card h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 22px; }
.app-card p { color: var(--ink-soft); font-size: 16px; margin-top: 6px; }
@media (min-width: 640px) { .app-card { grid-template-columns: auto minmax(0, 1fr) auto; } }
.post-grid { display: grid; gap: 16px; list-style: none; }
@media (min-width: 680px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .post-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: grid; gap: 8px; align-content: start; height: 100%; color: var(--ink); text-decoration: none; transition: transform 0.15s ease; }
.post-card:hover { color: var(--ink); transform: translateY(-2px); }
.post-card:active { transform: scale(0.99); }
.post-card .kicker { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 800; color: var(--link); }
.post-card h3 { font-size: 19px; }
.post-card p { color: var(--ink-soft); font-size: 15.5px; }
.post-card .meta { font-size: 13px; font-weight: 650; color: var(--ink-soft); margin-top: 2px; }
.related { margin-top: 48px; }
.related h2 { margin: 0 0 16px; }
/* What tools/build_blog.py adds beyond the first guides: a note box, quotes, pictures, code and a post's topics. */
.answer-box.note { margin-top: 18px; }
.answer-box.note p { font-size: 16.5px; font-weight: 500; }
.article blockquote { margin: 18px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--line); color: var(--ink-soft); display: grid; gap: 10px; }
.article code { font-size: 0.92em; padding: 1px 6px; border-radius: 6px; background: var(--calm); }
.post-figure { margin: 22px 0 0; display: grid; gap: 8px; }
.post-figure img { max-width: 100%; height: auto; border-radius: var(--r-tile); }
.post-figure figcaption { font-size: 14px; color: var(--ink-soft); }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.post-tags .chip { text-decoration: none; }
.post-tags .chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--link); }

/* For clinics: the sign-up form ---------------------------------------------------------------------------------- */
.clinic-price { margin-top: 22px; font-size: 20px; font-weight: 800; color: var(--ink); }
.clinic-form { display: grid; gap: 18px; margin-top: 20px; }
.clinic-form .field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.clinic-form .field-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.clinic-form label, .clinic-form legend { font-weight: 700; color: var(--ink); }
.clinic-form legend { padding: 0; margin-bottom: 8px; }
.clinic-form .optional { font-weight: 500; color: var(--ink-soft); }
.clinic-form input[type="text"], .clinic-form input[type="email"], .clinic-form input[type="url"], .clinic-form select,
.clinic-form textarea {
  font: inherit; font-size: 17px; color: var(--ink); background: var(--raised); width: 100%; min-height: 50px;
  border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.clinic-form textarea { min-height: 96px; resize: vertical; }
.clinic-form :is(input, select, textarea):focus-visible { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--track); }
.clinic-form .choice { display: flex; align-items: center; gap: 10px; font-weight: 600; min-height: 44px; }
.clinic-form .choice input { width: 20px; height: 20px; accent-color: var(--link); }
.clinic-form .choice[hidden] { display: none; }
.clinic-form .small-print { font-size: 14px; }
.clinic-form .btn { justify-self: start; }
.clinic-form .form-status:empty { display: none; }
.clinic-form .form-status { color: var(--ink); font-weight: 600; }
.clinic-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.clinic-done { margin-top: 20px; display: grid; gap: 12px; }
.clinic-done h3 { margin: 0; }
.clinic-form[hidden], .clinic-done[hidden] { display: none; }