/* Ember website V3: shared design system.
   Built to team/design-spec.md (tokens §2, components §3, motion §4).
   Pages compose these classes. Page-only styles go in assets/pages/<page>.css,
   loaded after this file. Don't add page one-offs here.

   Contents
   1  Tokens and fallback font
   2  Base and accessibility
   3  Type scale
   4  Layout: container, sections, splits, center heads
   5  Review strip, skip link, nav
   6  Buttons, links, store badges
   7  Objects: phone, UI crop, floating card, annotation, marker, report paper,
      lobby card, QR tile, glow, chips
   8  Cards: card, tour card, tile, totals tile, row label
   9  Plus: status pill, pressure chart, pattern card, Brief card,
      pricing card, free/Plus lists
   10 FAQ
   11 Privacy strip, closing
   12 Steps list, routing list
   13 Forms (styles the live /assets/web-form.* contract)
   14 Legal document layout
   15 Utility card layout
   16 Footer
   17 Phone download bar
   18 Motion, reduced motion, print
   Round 3 (Oct 15, evening)
   19 Section kickers and color keys (.kicker, .k-*, .tint)
   20 Reveal and draw-once motion ([data-reveal], [data-reveal-group], [data-draw])
   21 Ember Brief card (.brief), matching src/plus/brief/BriefView + BriefLine
   22 Scroll orb ([data-orb-path], drawn by v3.js) */

/* ── 1 Tokens ───────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --bg: #0a0a0a;
  --surface: #121110;
  --raised: #1a1917;
  --hair: rgba(232, 230, 227, .08);
  --hair-2: rgba(232, 230, 227, .14);
  --hair-3: rgba(232, 230, 227, .24);

  --ink-hi: #e8e6e3;
  --ink: #d8c8b0;
  --ink-mut: #8a847b;
  --ink-dim: #6e685f; /* decoration only, never text */

  --ember: #ecaa68;
  --ember-deep: #c96a3a;
  --ember-tint: rgba(236, 170, 104, .12);
  --ember-edge: rgba(236, 170, 104, .30);
  --btn: #ddcfba;
  --btn-ink: #14110d;
  --btn-hover: #e8dcc8;

  --mig: #9b7acc;
  --head: #4a8abf;
  --sym: #9a948a;
  --clear: #a8c4d4;
  --period: #cc7fa3;
  --impact: #c48a4a;
  --teal: #8fb8a8;     /* app softTeal: the Brief "Fewer" pill */
  --green: #7fb08c;    /* reductions in chart notes */

  /* the app's Plus feature colors (src/theme/tokens.ts PlusFeatureColors) */
  --patterns: #e6b85c;
  --weather: #f39a63;
  --health: #e48ead;
  --backup: #74c497;
  --exp: #54ccc5;
  --routines: #79a9f3;
  --sleep: #b9b5ed;

  --ok: #8fc29e;
  --err: #ef8f86;

  --paper: #f6f2ea;
  --paper-ink: #1c1915;

  --serif: "Source Serif 4", "Source Serif Fallback", Georgia, "Iowan Old Style", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --maxw: 1180px;
  --gutter: 16px;
  --radius-card: 20px;
  --radius-ui: 20px;
  --radius-field: 12px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);

  /* spacing (phone values; larger below) */
  --sec-y: 64px;
  --strip-y: 48px;
  --h2-lead: 16px;
  --lead-cta: 24px;
  --stack-gap: 32px;
  --card-pad: 22px;
  --grid-gap: 12px;
  --obj-cap: 12px;
  --nav-h: 56px;
}
@media (min-width: 400px) { :root { --gutter: 20px; } }
@media (min-width: 600px) {
  :root {
    --gutter: 32px; --radius-card: 24px;
    --sec-y: 96px; --h2-lead: 20px; --lead-cta: 32px; --stack-gap: 48px;
    --card-pad: 24px; --grid-gap: 16px; --nav-h: 64px;
  }
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; --sec-y: 128px; --strip-y: 64px; --card-pad: 28px; --grid-gap: 20px; --obj-cap: 16px; }
}

/* Source Serif 4, self-hosted (fonts/, SIL OFL in fonts/OFL.txt): Google
   Fonts' variable files, opsz 8–60 and weight 300–600. Serving them from this
   origin drops a render-blocking third-party stylesheet and two connections.
   Every page preloads the latin file. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/source-serif-4-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/source-serif-4-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Georgia, scaled to Source Serif 4's display widths, so the H1 keeps its line
   breaks while the web font loads (measured: Source Serif is ~92% of Georgia's
   width at 56–80px). */
@font-face {
  font-family: "Source Serif Fallback";
  src: local("Georgia");
  size-adjust: 92%;
  ascent-override: 113%;
  descent-override: 37%;
  line-gap-override: 0%;
}

/* ── 2 Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(236, 170, 104, .28); color: var(--ink-hi); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.desktop-only { display: none; }
@media (min-width: 1024px) { .desktop-only { display: revert; } .phone-only { display: none !important; } }
@media (max-width: 599px) { .hide-phone { display: none !important; } }

/* ── 3 Type ─────────────────────────────────────────────── */
.t-hero, .t-display, .t-h2, .t-h2-close, .t-legal-h1, .t-h3, .t-num {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  color: var(--ink-hi);
}
.t-hero { font-size: 44px; line-height: 1.02; letter-spacing: -.015em; }
.t-display { font-size: 40px; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.t-h2 { font-size: 34px; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.t-h2-close { font-size: 38px; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.t-legal-h1 { font-size: 36px; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.t-h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.t-num { font-size: 32px; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.t-lead { font-size: 18px; line-height: 1.5; color: var(--ink); max-width: 30em; text-wrap: pretty; }
.t-body { font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 40em; text-wrap: pretty; }
.t-label { font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--ink-hi); }
.t-small { font-size: 14px; line-height: 1.45; color: var(--ink-mut); text-wrap: pretty; }
.t-line { font-size: 15px; line-height: 1.5; color: var(--ink); }
@media (min-width: 600px) {
  .t-hero { font-size: 62px; letter-spacing: -.025em; }
  .t-display { font-size: 52px; }
  .t-h2 { font-size: 44px; }
  .t-h2-close { font-size: 50px; }
  .t-legal-h1 { font-size: 44px; }
  .t-h3 { font-size: 24px; }
  .t-num { font-size: 36px; }
  .t-lead { font-size: 19px; }
}
@media (min-width: 1024px) {
  .t-hero { font-size: 80px; }
  .t-display { font-size: 64px; }
  .t-h2 { font-size: 56px; }
  .t-h2-close { font-size: 64px; }
  .t-legal-h1 { font-size: 52px; }
  .t-h3 { font-size: 26px; }
  .t-num { font-size: 40px; }
  .t-lead { font-size: 20px; }
}
/* the one sentence-case label a page may carry (providers hero, /send/) */
.label { display: block; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--ember); }
.label--mut { color: var(--ink-mut); font-weight: 500; }

/* ── 4 Layout ───────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sec { position: relative; padding-block: var(--sec-y); overflow-x: clip; }
.sec--band { background: var(--surface); }
.sec--compact { padding-block: var(--strip-y); }
.sec--tight-top { padding-top: 0; }
/* two plain sections in a row: trim the second one's top so the gap reads as one space */
@media (min-width: 1024px) { .sec:not(.sec--band) + .sec:not(.sec--band):not(.sec--tight-top) { padding-top: 96px; } }
/* The phone download bar hides once #get (the closing) reaches the screen and
   stays hidden through the footer, so no extra bottom padding is needed. */

/* Splits: copy first in the DOM (it stacks above the object on phone and tablet). */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack-gap); align-items: center; }
.split-copy, .split-object { min-width: 0; }
.split-object { position: relative; }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .split > .split-copy { grid-column: 1 / span 5; grid-row: 1; min-width: 460px; }
  .split > .split-object { grid-column: 7 / span 6; grid-row: 1; }
  /* mirrored: object left (cols 1–6), copy right (cols 8–12) */
  .split--mirror > .split-object { grid-column: 1 / span 6; }
  .split--mirror > .split-copy { grid-column: 8 / span 5; min-width: 0; }
  /* wide object (cols 1–7) for the report */
  .split--wide > .split-object { grid-column: 1 / span 7; }
  .split--wide > .split-copy { grid-column: 8 / span 5; padding-left: 24px; min-width: 0; }
}
/* .split--keep stays two-column from 900px (home classifier, Plus hero) */
@media (min-width: 900px) and (max-width: 1023px) {
  .split--keep { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .split--keep > .split-copy { grid-column: 1 / span 6; grid-row: 1; }
  .split--keep > .split-object { grid-column: 7 / span 6; grid-row: 1; }
  .split--keep.split--mirror > .split-object { grid-column: 1 / span 7; }
  .split--keep.split--mirror > .split-copy { grid-column: 8 / span 5; }
}
.split-copy > * + * { margin-top: var(--h2-lead); }
.split-copy > .t-lead + *, .split-copy > .t-body + * { margin-top: var(--lead-cta); }
.split-copy > .t-small + .t-small { margin-top: 8px; }

.center-head { max-width: 760px; margin-inline: auto; text-align: center; }
.center-head > * + * { margin-top: var(--h2-lead); }
.center-head .t-lead { margin-inline: auto; }
.center-head + * { margin-top: var(--stack-gap); }
/* Split and FAQ sections lift their kicker and title into a .center-head
   above the columns, so every section title on a page takes one alignment:
     <div class="wrap split-head"><div class="center-head" data-reveal>kicker + h2</div></div>
     <div class="wrap split …"> or <div class="wrap faq"> */
.split-head + :is(.split, .faq) { margin-top: var(--stack-gap); }
.split-head + .split .split-copy > :first-child { margin-top: 0; }
@media (min-width: 1024px) { .split-head + .faq > .faq-list { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 760px; } }
@media (max-width: 599px) {
  /* one flow on phones: title to the next visible line at the usual step */
  .split-head + .split { margin-top: var(--h2-lead); }
  .split-head + .split .split-copy > .hide-phone:first-child + * { margin-top: 0; }
}

.stack > * + * { margin-top: var(--h2-lead); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center { text-align: center; }
.center .actions, .center .badges { justify-content: center; }

/* ── 5 Review strip, skip link, nav ─────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--btn); color: var(--btn-ink);
  padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none;
}
.skip:focus { left: 12px; }

.draft-strip {
  min-height: 32px; padding: 6px var(--gutter);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 6px;
  background: var(--surface); border-bottom: 1px solid var(--hair);
  font-size: 13px; line-height: 1.5; color: var(--ink-mut); text-align: center;
}
.draft-strip a { color: var(--ink); text-decoration: none; }
.draft-strip a:hover { color: var(--ink-hi); text-decoration: underline; text-underline-offset: 3px; }

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 10, 10, .72);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-std);
}
.nav.is-scrolled { border-bottom-color: var(--hair); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--nav-h); }
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--ink-hi); text-decoration: none;
  font: 400 21px/1 var(--serif); letter-spacing: -.01em; font-optical-sizing: auto;
  min-height: 44px; border-radius: 10px;
}
.brand img { width: 30px; height: 30px; }
.nav-links { display: flex; align-items: center; gap: 4px; min-width: 0; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  font-size: 15px; font-weight: 500; border-radius: 999px;
  transition: color 160ms var(--ease-std), background-color 160ms var(--ease-std);
}
.nav-link:hover { color: var(--ink-hi); background: var(--raised); }
.nav-link[aria-current="page"] { color: var(--ink-hi); }
.nav-links .btn { margin-left: 8px; }
/* Small phones. Measured: the clinician nav ("For patients" + "Add your clinic")
   needs this spacing up to 429px (402 and 414px phones), and every nav needs
   the tighter step below 370px. Below 360px the wordmark drops and the orb
   stays (the link keeps aria-label "Ember home"), so a 320px phone keeps the
   whole pill inside the gutter. */
@media (max-width: 429px) {
  .nav-inner { gap: 8px; }
  .nav .brand { gap: 8px; }
  .nav-link { padding: 0 6px; }
  .nav-links .btn { margin-left: 0; padding: 0 14px; }
}
@media (max-width: 369px) {
  .nav-link { padding: 0 2px; }
  .nav-links .btn { padding: 0 10px; }
}
@media (max-width: 359px) {
  .nav .brand { font-size: 0; gap: 0; }
}
/* utility pages: centered logo, no links */
.nav--center { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav--center .nav-inner { justify-content: center; }

/* ── 6 Buttons, links, badges ───────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--btn); color: var(--btn-ink);
  font: 600 16px/1.1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--ease-std), border-color 160ms var(--ease-std), transform 120ms var(--ease-std);
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: scale(.98); }
.btn--lg { min-height: 52px; }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn--ghost { background: transparent; color: var(--ink-hi); box-shadow: inset 0 0 0 1px var(--hair-2); }
.btn--ghost:hover { background: var(--raised); box-shadow: inset 0 0 0 1px var(--hair-3); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* the nav pill keeps a 44px hit area around its 40px face */
.nav .btn--sm { position: relative; }
.nav .btn--sm::after { content: ""; position: absolute; inset: -2px 0; }

/* text link with a trailing chevron: <a class="tlink" href="…">Clinical references</a> */
.tlink {
  display: inline-flex; align-items: baseline; gap: 4px;
  color: var(--ink-hi); text-decoration: none; font-size: 16px; font-weight: 500;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.tlink::after { content: "›"; color: var(--ink-mut); font-weight: 400; transition: transform 160ms var(--ease-std); }
.tlink:hover { text-decoration: underline; }
.tlink--sm { font-size: 15px; }
/* standalone text links get a 44px-tall hit area; inline ones in a sentence don't */
.tlink { position: relative; }
.tlink::before { content: ""; position: absolute; inset: -9px -6px; }
/* inline link inside running text */
.ilink, .prose a, .t-body a, .t-lead a, .t-small a, .t-line a {
  color: var(--ink-hi); text-decoration: underline; text-decoration-color: var(--hair-3);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-color 160ms var(--ease-std);
}
.ilink:hover, .prose a:hover, .t-body a:hover, .t-lead a:hover, .t-small a:hover, .t-line a:hover { text-decoration-color: var(--ember); }
.t-line .tlink, .t-small .tlink { display: inline; text-decoration: none; position: static; }
.t-line .tlink::before, .t-small .tlink::before { content: none; }
.t-line .tlink::after, .t-small .tlink::after { margin-left: 4px; }
.t-line .tlink:hover { text-decoration: underline; }

/* Store badges. Author Apple first; v3.js puts Google Play first on Android. */
.badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.badges > a { display: block; flex: none; border-radius: 8px; transition: transform 120ms var(--ease-std); }
.badges > a:active { transform: scale(.98); }
.badge-apple img { height: 40px; width: auto; }
.badge-play { height: 40px; overflow: hidden; display: grid; place-items: center; }
.badge-play img { height: 59px; width: auto; max-width: none; margin: -9.5px -8px; }
.badge-play .nobadge-text { display: none; }
.badge-play.nobadge { overflow: visible; }
.badge-play.nobadge img { display: none; }
.badge-play.nobadge .nobadge-text {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--ink-hi); font: 600 15px/1 var(--sans);
}
@media (min-width: 600px) {
  .badge-apple img { height: 44px; }
  .badge-play, .badge-play.nobadge .nobadge-text { height: 44px; }
  .badge-play img { height: 65px; margin: -10.5px -9px; }
}
.badge-lines { display: grid; gap: 4px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.badges + .badge-lines { margin-top: 16px; }

/* ── 7 Objects ──────────────────────────────────────────── */
/* Phone frame (home hero only). Width set with --pw. */
.phone {
  --pw: 252px;
  width: var(--pw); max-width: 100%;
  padding: calc(var(--pw) * .032);
  border-radius: calc(var(--pw) * .135);
  background: #0d0d0d;
  border: 1px solid var(--hair-2);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(232, 230, 227, .06);
}
.phone img { width: 100%; aspect-ratio: 760 / 1650; object-fit: cover; border-radius: calc(var(--pw) * .105); background: var(--bg); }
@media (min-width: 600px) { .phone { --pw: 280px; } }
@media (min-width: 1024px) { .phone { --pw: 300px; } }

/* Frameless crop of real app UI */
.ui-crop { border-radius: var(--radius-ui); border: 1px solid var(--hair); background: #0d0d0d; overflow: hidden; }
.ui-crop img { width: 100%; }
.fade-b { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.fade-t { -webkit-mask-image: linear-gradient(to top, #000 78%, transparent); mask-image: linear-gradient(to top, #000 78%, transparent); }
.fade-r { -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent); }

/* Floating UI card (notification, nudge, pattern, Brief, lobby): real app strings only */
.float-card {
  max-width: 320px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(26, 25, 23, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--hair-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  text-align: left;
}
.fc-head { display: flex; align-items: center; gap: 10px; }
.fc-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--bg); flex: none; }
.fc-meta { display: flex; justify-content: space-between; gap: 8px; flex: 1; font-size: 14px; line-height: 1.3; color: var(--ink-mut); }
.fc-title { display: block; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--ink-hi); }
.fc-body { font-size: 14px; line-height: 1.45; color: var(--ink); }
.fc-head + .fc-title, .fc-head + .fc-body { margin-top: 8px; }
.fc-title + .fc-body { margin-top: 2px; }
/* notification layout: icon left, text right */
.float-card--notif { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; align-items: start; }
.float-card--notif .fc-icon { grid-row: 1 / span 3; }
.float-card--notif .fc-title, .float-card--notif .fc-body { margin-top: 0; }

/* Annotation tag with a Headrest leader. Desktop only (≥1024).
   <div class="annot annot--left" style="--leader:72px; top:…; right:…">
     <span class="annot-label">Today</span><span class="annot-value">…</span><span class="annot-sub">…</span></div>
   --leader sets the line length; the dot sits on the object end. */
.annot { position: absolute; z-index: 3; display: none; gap: 4px; pointer-events: none; text-align: left; }
@media (min-width: 1024px) { .annot { display: grid; } }
.annot-label { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-mut); }
.annot-value { font: 400 26px/1.05 var(--serif); color: var(--ink-hi); letter-spacing: -.01em; font-optical-sizing: auto; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.annot-sub { font-size: 14px; line-height: 1.3; color: var(--ink-mut); }
.annot::after, .annot::before { content: ""; position: absolute; top: calc(50% - .5px); }
.annot::after { height: 1px; width: var(--leader, 72px); background: var(--hair-3); }
.annot::before { width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: rgba(232, 230, 227, .6); }
.annot--left { text-align: right; justify-items: end; }
.annot--left::after { left: calc(100% + 16px); }
.annot--left::before { left: calc(100% + 16px + var(--leader, 72px)); }
.annot--right::after { right: calc(100% + 16px); }
.annot--right::before { right: calc(100% + 16px + var(--leader, 72px)); }
.annot--top::after, .annot--top::before { top: auto; bottom: -12px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c, var(--ink-mut)); }
.dot--mig { --c: var(--mig); } .dot--head { --c: var(--head); } .dot--sym { --c: var(--sym); } .dot--clear { --c: var(--clear); } .dot--period { --c: var(--period); }

/* Numbered report marker (providers). Position with inline left/top %. */
.marker {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 10, 10, .8); border: 1px solid var(--ember-edge);
  color: var(--ember); font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums;
}
.marker--inline { position: static; margin: 0; flex: none; }
.marker-legend { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
@media (min-width: 600px) { .marker-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .marker-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.marker-legend li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; align-items: start; align-content: start; }
.marker-legend .marker { grid-row: 1 / span 2; }
.marker-legend b { font-size: 15px; font-weight: 600; color: var(--ink-hi); line-height: 24px; }
.marker-legend span { font-size: 14px; line-height: 1.45; color: var(--ink-mut); }

/* Report paper: the real sample report, dimmed cream */
.report { position: relative; }
.report-paper {
  display: block; position: relative;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  background: var(--paper);
}
.report-paper img { width: 100%; filter: brightness(.9) sepia(.06); }
.report-paper--flat img { filter: brightness(.92); }
@media (min-width: 1024px) { .report-paper--tilt { transform: rotate(-2deg); } }
.report-cap { margin-top: var(--obj-cap); text-align: center; }

/* Lobby QR card (paper). Payload https://embertracker.app/ (assets/qr-home.svg). */
.lobby-card {
  width: 180px; padding: 14px 14px 12px;
  border-radius: 16px; background: var(--paper); color: var(--paper-ink);
  display: grid; justify-items: center; gap: 6px; text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  filter: brightness(.92);
}
.lobby-card--sm { width: 160px; }
.lobby-top { display: inline-flex; align-items: center; gap: 6px; font: 400 16px/1 var(--serif); color: var(--paper-ink); }
.lobby-top img { width: 20px; height: 20px; }
.lobby-title { font: 600 14px/1.25 var(--sans); }
.lobby-card .qr { width: 100%; }
.lobby-hint { font-size: 14px; line-height: 1.25; color: #5b5246; }

/* QR tile (desktop only): <div class="qr-tile desktop-only"><img src="…/qr-home.svg" …><p class="t-small">…</p></div> */
.qr-tile { align-items: center; gap: 16px; margin-inline: auto; width: max-content; max-width: 100%; text-align: left; }
@media (min-width: 1024px) { .qr-tile.desktop-only { display: flex; } }
.qr-tile .qr-face { width: 96px; height: 96px; padding: 6px; border-radius: 14px; background: var(--paper); filter: brightness(.92); flex: none; }
.qr-tile .qr-face img { width: 100%; height: 100%; }
/* the caption holds one line, so the tile and caption center as one group */
.qr-tile .t-small { white-space: nowrap; }

/* Atmosphere: one soft glow per viewport, behind an object. */
.glow {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; width: 120%; aspect-ratio: 1.3; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--glow, rgba(236, 170, 104, .18)), transparent);
  opacity: var(--glow-o, 1);
}
.glow--violet { --glow: rgba(155, 122, 204, .10); }
.has-glow { position: relative; isolation: isolate; }
.has-glow > :not(.glow) { position: relative; z-index: 1; }

/* Chips (classifier, chip rows) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--raised); border: 1px solid var(--hair); color: var(--ink);
  font: 500 15px/1.1 var(--sans); text-decoration: none; cursor: pointer; appearance: none;
  transition: background-color 160ms var(--ease-std), border-color 160ms var(--ease-std), color 160ms var(--ease-std);
}
.chip:hover { border-color: var(--hair-3); }
.chip[aria-pressed="true"] { background: rgba(236, 170, 104, .14); border-color: var(--ember-edge); color: var(--ink-hi); }
.chip--sm { min-height: 36px; padding: 0 14px; font-size: 14px; position: relative; }
/* the face stays 36px; the hit area reaches 44px */
.chip--sm::before { content: ""; position: absolute; inset: -4px 0; }
@media (min-width: 1024px) { .chip { min-height: 40px; } }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 599px) {
  .chip-row--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .chip-row--scroll::-webkit-scrollbar { display: none; }
  .chip-row--scroll > * { flex: none; }
}

/* ── 8 Cards ────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-card); padding: var(--card-pad); min-width: 0; }
.card--bg { background: var(--bg); }
.card--link { display: block; text-decoration: none; color: inherit; transition: border-color 160ms var(--ease-std); }
.card--link:hover { border-color: var(--hair-3); }
.card > * + * { margin-top: 8px; }
.card .actions { margin-top: 20px; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 4-up only from 1200: below that the cards would be ~220px and their titles wrap to 3 lines */
@media (min-width: 1200px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 767px) { .grid-2--stack-sm { grid-template-columns: minmax(0, 1fr); } }

/* Tour card: H3 + caption on top, the object anchored to the bottom edge. */
.tour-card {
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-card);
  padding: var(--card-pad) var(--card-pad) 0;
}
.tour-card .t-h3 + .tour-cap { margin-top: 8px; }
.tour-cap { font-size: 15px; line-height: 1.45; color: var(--ink-mut); max-width: 28em; }
.tour-cap b { font-weight: 600; color: var(--ink-hi); }
.tour-obj { position: relative; margin-top: 24px; flex: 1 0 220px; display: flex; align-items: flex-end; justify-content: center; margin-inline: calc(var(--card-pad) * -1); }
@media (min-width: 600px) { .tour-card { min-height: 440px; } .tour-obj { flex-basis: 240px; } }
@media (min-width: 1024px) { .tour-card { min-height: 460px; } }
@media (min-width: 1024px) { .tour-card--wide { min-height: 420px; } }

/* Plus tile: same anatomy, 400px desktop */
.tile-card {
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-card);
  padding: var(--card-pad) var(--card-pad) 0;
}
@media (min-width: 600px) { .tile-card { min-height: 360px; } }
@media (min-width: 1024px) { .tile-card { min-height: 400px; } }
.tile-card .t-h3 + .tour-cap { margin-top: 8px; }

/* Totals tile: label with a day-color dot, then the number */
.totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.total { background: var(--surface); border: 1px solid var(--hair); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 96px; }
.sec--band .total { background: var(--bg); }
.total-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-mut); line-height: 1.3; }
@media (min-width: 1024px) { .total { min-height: 140px; } .totals { gap: 20px; } }

/* One centered example label under a row of mockups */
.row-label { margin-top: var(--obj-cap); text-align: center; font-size: 14px; color: var(--ink-mut); }
.caption { margin-top: var(--obj-cap); font-size: 14px; line-height: 1.45; color: var(--ink-mut); text-align: center; text-wrap: pretty; }
.caption + .caption { margin-top: 4px; }

/* ── 9 Ember Plus pieces ────────────────────────────────── */
/* Coming-soon pill. One per page. At launch set <body class="plus-live">. */
.status-soon {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  font: 600 14px/1 var(--sans); color: var(--ember); background: var(--ember-tint);
  border: 1px solid var(--ember-edge); white-space: nowrap;
}
.plus-live .status-soon { display: none; }
[data-plus-live] { display: none; }
.plus-live [data-plus-live] { display: revert; }
.plus-live [data-plus-soon] { display: none; }

/* Pressure chart (SVG inside), with the real notification floating over it */
.pressure { position: relative; width: 100%; }
.pressure svg { width: 100%; height: auto; overflow: visible; }
.pressure .float-card { position: absolute; right: 0; bottom: 0; width: min(92%, 320px); }

/* Pattern card and Brief card: real app strings, mark data-copylint="app" */
.app-card { width: min(100%, 320px); padding: 16px 18px; border-radius: 18px; background: var(--raised); border: 1px solid var(--hair-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); text-align: left; }
.app-card-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-mut); line-height: 1.3; }
.app-card-label img { width: 20px; height: 20px; }
.app-card-text { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-hi); }
.app-card-headline { margin-top: 10px; font: 400 22px/1.2 var(--serif); color: var(--ink-hi); letter-spacing: -.01em; font-optical-sizing: auto; text-wrap: pretty; }
/* Brief mini chart: <div class="hbars" aria-hidden="true"><span><i>11</i><b style="--v:1"></b></span><span><i>9</i><b style="--v:.818"></b></span></div> */
.hbars { display: grid; gap: 8px; margin-top: 16px; }
.hbars span { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 10px; }
.hbars i { font: 600 14px/1 var(--sans); font-style: normal; color: var(--ink-mut); font-variant-numeric: tabular-nums; text-align: right; }
.hbars b { display: block; height: 8px; width: calc(var(--v) * 100%); border-radius: 4px; background: var(--mig); opacity: .4; }
.hbars span:last-child i { color: var(--ink-hi); }
.hbars span:last-child b { opacity: 1; }

/* Pricing card */
.pricing-card { max-width: 640px; margin-inline: auto; }
.price-tiles { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
@media (min-width: 400px) { .price-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price-tile { background: var(--raised); border: 1px solid var(--hair); border-radius: 16px; padding: 20px; }
.price-tile--featured { border-color: var(--ember-edge); }
.price-tile .t-label { color: var(--ink-mut); font-weight: 600; font-size: 14px; }
.price-tile .t-num { margin-top: 10px; display: block; }
.price-per { font-size: 15px; color: var(--ink); }
.price-note { margin-top: 4px; font-size: 14px; color: var(--ink-mut); }

/* Free and Plus lists */
.plan-lists { max-width: 960px; margin-inline: auto; display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .plan-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.check-list { margin-top: 12px; }
.check-list li {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 0;
  font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink-hi);
  border-bottom: 1px solid var(--hair);
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: ""; width: 16px; height: 16px; flex: none; background: var(--check, var(--ink));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.check-list--ember li::before { --check: var(--ember); }
.check-list li small { font-size: 14px; font-weight: 400; color: var(--ink-mut); }
@media (min-width: 1024px) { .check-list li { min-height: 44px; } }

/* ── 10 FAQ ─────────────────────────────────────────────── */
/* <section class="sec"><div class="wrap faq"><h2 class="t-h2 faq-title">…</h2>
     <div class="faq-list"><details name="faq-home" open><summary>Q</summary><div class="faq-a"><p>A</p></div></details>…</div></div></section> */
.faq { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .faq { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .faq-title { grid-column: 1 / span 5; align-self: start; }
  .faq-list { grid-column: 6 / span 7; max-width: 680px; }
}
.faq-list { border-top: 1px solid var(--hair); }
.faq-list details { border-bottom: 1px solid var(--hair); }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 20px 0;
  font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ink-hi);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; width: 18px; height: 18px; flex: none; background: var(--ink-mut);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M9 3v12M3 9h12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M9 3v12M3 9h12'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 160ms var(--ease-std);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:focus-visible { outline-offset: 4px; border-radius: 4px; }
.faq-a { padding-bottom: 24px; max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--ink); }
.faq-a > * + * { margin-top: 12px; }

/* ── 11 Privacy strip, closing ──────────────────────────── */
.strip {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center;
  border: 1px solid var(--hair); border-radius: 24px; padding: 24px;
}
.strip-icon { width: 40px; height: 40px; color: var(--ember); }
.strip-icon svg { width: 40px; height: 40px; }
.strip-title { font: 400 26px/1.15 var(--serif); color: var(--ink-hi); letter-spacing: -.01em; font-optical-sizing: auto; text-wrap: balance; }
.strip-text { margin-top: 6px; font-size: 17px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
@media (min-width: 768px) {
  .strip { grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; padding: 32px; }
}
/* Privacy band (round 3 rule: every privacy strip carries the green "Privacy"
   kicker, <p class="kicker k-backup">Privacy</p> before .strip-title). The lock
   takes the kicker's green and the kicker sits 8px above the title. Below
   768px the lock shrinks to the kicker's size and takes the place of its dot,
   so kicker, title, sentence and link share one left edge (the lock is drawn
   from x 9 of its 40-unit box; the negative margin puts the drawn edge, not
   the box, on that line). Same as home.css #privacy, for every page. */
.strip:has(.kicker.k-backup) .strip-icon { color: var(--backup); }
.strip .kicker + .strip-title { margin-top: 8px; }
@media (max-width: 767px) {
  .strip:has(> div > .kicker) { grid-template-columns: auto minmax(0, 1fr); gap: 0 4px; align-items: center; }
  .strip:has(> div > .kicker) > div { display: contents; }
  .strip:has(> div > .kicker) .strip-icon, .strip:has(> div > .kicker) .strip-icon svg { width: 26px; height: 26px; }
  .strip:has(> div > .kicker) .strip-icon { grid-column: 1; grid-row: 1; margin: -4px 0 -4px calc(26px * -9 / 40); }
  .strip:has(> div > .kicker) .kicker { grid-column: 2; grid-row: 1; }
  .strip:has(> div > .kicker) .kicker::before { content: none; }
  .strip:has(> div > .kicker) :is(.strip-title, .strip-text), .strip:has(> div > .kicker) > .tlink { grid-column: 1 / -1; }
  .strip:has(> div > .kicker) .kicker + .strip-title { margin-top: 12px; }
  .strip:has(> div > .kicker) > .tlink { justify-self: start; margin-top: 16px; }
}

.close { text-align: center; }
.close-orb { width: 112px; height: auto; margin: 0 auto -8px; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent); }
@media (min-width: 600px) { .close-orb { width: 180px; } }
@media (min-width: 1024px) { .close-orb { width: 240px; } }
.close-orb--mark { width: 64px; margin-bottom: 24px; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }
.close .t-lead { margin: var(--h2-lead) auto 0; }
.close .badges { justify-content: center; margin-top: var(--lead-cta); }
.close .t-h2-close + .badges { margin-top: var(--lead-cta); }
.close-after { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.close .qr-tile { margin-top: 32px; }

/* ── 12 Steps list, routing list ────────────────────────── */
.steps { counter-reset: step; display: grid; gap: 16px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--ink); }
.steps li::before {
  content: counter(step); width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--raised);
  font: 600 14px/1 var(--sans); color: var(--ink-hi); font-variant-numeric: tabular-nums; margin-top: -1px;
}
.steps li b { color: var(--ink-hi); font-weight: 600; }

.route-list { border-top: 1px solid var(--hair); }
.route-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.route-list .t-label { font-size: 15px; }
.route-list .tlink { font-size: 14px; }

/* ── 13 Forms ───────────────────────────────────────────── */
/* Load order on form pages: /assets/web-form.css?v=1, then v3.css, then
   /assets/web-form.js?v=2 (defer). Markup contract: inventory §2.1. */
.form-card {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 24px;
  padding: 22px; max-width: 560px; width: 100%; position: relative;
}
@media (min-width: 600px) { .form-card { padding: 32px; } }
.form-row { display: grid; gap: 8px; margin: 0 0 20px; }
.form-label { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); margin: 0; letter-spacing: 0; }
.form-help { font-size: 14px; line-height: 1.45; color: var(--ink-mut); margin-top: -4px; }
.form-card .input, .form-card .textarea, .form-card input[type="text"], .form-card input[type="email"], .form-card input:not([type]), .form-card textarea {
  width: 100%; min-height: 52px; padding: 0 16px;
  font: 400 16px/1.4 var(--sans); color: var(--ink-hi); caret-color: var(--ember);
  background: var(--bg); border: 1px solid var(--hair-2); border-radius: var(--radius-field);
  outline: none; appearance: none;
  transition: border-color 160ms var(--ease-std), box-shadow 160ms var(--ease-std);
}
.form-card textarea, .form-card .textarea { min-height: 160px; padding: 14px 16px; resize: vertical; display: block; }
.form-card .input::placeholder, .form-card textarea::placeholder, .form-card input::placeholder { color: var(--ink-dim); }
.form-card .input:hover, .form-card textarea:hover, .form-card input:hover { border-color: var(--hair-3); }
.form-card .input:focus, .form-card textarea:focus, .form-card input:focus,
.form-card .input:focus-visible, .form-card textarea:focus-visible, .form-card input:focus-visible {
  border-color: var(--ember); box-shadow: 0 0 0 3px rgba(236, 170, 104, .25); outline: none;
}
.form-card .input:user-invalid, .form-card textarea:user-invalid, .form-card input:user-invalid {
  border-color: var(--err); box-shadow: 0 0 0 3px rgba(239, 143, 134, .22);
}
.form-card input:disabled, .form-card textarea:disabled { opacity: .6; }
.form-check {
  display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 4px 0; margin: 4px 0 20px;
  font-size: 15px; line-height: 1.5; color: var(--ink); cursor: pointer;
}
.form-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; padding: 0; min-height: 0;
  border-radius: 6px; border: 1px solid var(--hair-3); background: var(--bg); cursor: pointer;
  display: grid; place-items: center; transition: background-color 160ms var(--ease-std), border-color 160ms var(--ease-std);
}
.form-check input[type="checkbox"]::after {
  content: ""; width: 14px; height: 14px; background: var(--btn-ink); opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-check input[type="checkbox"]:checked { background: var(--btn); border-color: var(--btn); }
.form-check input[type="checkbox"]:checked::after { opacity: 1; }
.form-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; box-shadow: none; }
.form-check input[type="checkbox"]:user-invalid { border-color: var(--err); }
.form-check span { padding-top: 0; }
.form-note, .form-next { font-size: 14px; line-height: 1.5; color: var(--ink-mut); margin: 16px 0 0; }
.form-note { margin: 0 0 20px; }
.form-note a, .form-next a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-3); text-underline-offset: 3px; }
.form-note a:hover, .form-next a:hover { text-decoration-color: var(--ember); }
.form-card .form-submit {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--btn); color: var(--btn-ink); font: 600 16px/1.1 var(--sans); cursor: pointer;
  transition: background-color 160ms var(--ease-std), transform 120ms var(--ease-std), opacity 160ms var(--ease-std);
}
@media (min-width: 600px) { .form-card .form-submit { width: auto; } }
.form-card .form-submit:hover { background: var(--btn-hover); }
.form-card .form-submit:active { transform: scale(.98); }
.form-card .form-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.form-card .form-submit:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.form-status { margin: 16px 0 0; font-size: 16px; line-height: 1.45; }
.form-status:focus, .form-status:focus-visible { outline: none; }
.form-status--ok, .form-status--err {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 16px; border-radius: 14px; color: var(--ink-hi);
}
.form-status--ok { background: rgba(143, 194, 158, .08); border: 1px solid rgba(143, 194, 158, .25); }
.form-status--err { background: rgba(239, 143, 134, .08); border: 1px solid rgba(239, 143, 134, .25); }
.form-status--ok:focus-visible { border-color: rgba(143, 194, 158, .5); }
.form-status--err:focus-visible { border-color: rgba(239, 143, 134, .5); }
.form-status--ok::before, .form-status--err::before { content: ""; width: 20px; height: 20px; margin-top: 1px; }
.form-status--ok::before {
  background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8.25'/%3E%3Cpath d='M6.2 10.4l2.5 2.4 5-5.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8.25'/%3E%3Cpath d='M6.2 10.4l2.5 2.4 5-5.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-status--err::before {
  background: var(--err);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='8.25'/%3E%3Cpath d='M10 5.8v5.2M10 14.1v.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='8.25'/%3E%3Cpath d='M10 5.8v5.2M10 14.1v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-card:has(.form-status--ok) { padding-top: 48px; }
.form-card:has(.form-status--ok) .form-status { margin-top: 0; }
.form-card noscript p { margin-top: 16px; font-size: 14px; color: var(--ink-mut); }
.form-card noscript a { color: var(--ink-hi); }
.form-after { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-mut); }

/* form page template: copy left (cols 1–5), form right (cols 7–12) */
.form-layout { display: grid; gap: var(--stack-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .form-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .form-layout > .form-copy { grid-column: 1 / span 5; }
  .form-layout > .form-side { grid-column: 7 / span 6; }
}
.form-copy > * + * { margin-top: var(--h2-lead); }
.form-copy > .t-lead + * { margin-top: var(--lead-cta); }

/* ── 14 Legal document layout ───────────────────────────── */
/* <main class="legal"><div class="wrap legal-grid"><aside class="legal-rail"><nav class="toc" data-toc>…</nav></aside>
     <article class="legal-doc"><header class="legal-head">…</header><details class="toc-mobile">…</details><div class="prose">…</div></article></div></main> */
.legal { padding-block: 48px var(--sec-y); }
@media (min-width: 1024px) { .legal { padding-top: 64px; } }
.legal-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.legal-doc { max-width: 40em; width: 100%; margin-inline: auto; min-width: 0; }
.legal-rail { display: none; }
@media (min-width: 1180px) {
  .legal-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
  .legal-rail { display: block; }
  .legal-doc { margin-inline: 0 auto; }
  .toc-mobile { display: none; }
}
.legal-kicker { font-size: 14px; color: var(--ink-mut); margin-bottom: 12px; }
.legal-updated { margin-top: 12px; font-size: 14px; color: var(--ink-mut); }
.legal-callout {
  margin-top: 32px; padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--hair); border-left: 2px solid var(--ember);
  border-radius: 0 16px 16px 0; font-size: 17px; line-height: 1.6; color: var(--ink);
}
.legal-callout strong, .legal-callout b { color: var(--ink-hi); font-weight: 600; }
.toc { position: sticky; top: 96px; }
.toc-title { font-size: 14px; font-weight: 600; color: var(--ink-mut); margin-bottom: 8px; }
.toc ol, .toc-mobile ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: 6px 0; font-size: 14px; line-height: 1.4; color: var(--ink-mut); text-decoration: none; transition: color 160ms var(--ease-std); }
.toc a:hover, .toc a.is-current { color: var(--ink-hi); }
.toc-mobile { margin-top: 24px; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); }
.toc-mobile summary { list-style: none; cursor: pointer; min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 15px; font-weight: 600; color: var(--ink-hi); }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::after {
  content: ""; width: 12px; height: 12px; flex: none; background: var(--ink-mut);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.25L6 7.75l3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.25L6 7.75l3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 160ms var(--ease-std);
}
.toc-mobile[open] summary::after { transform: rotate(180deg); }
.toc-mobile ol { padding: 0 20px 16px; }
.toc-mobile a { display: flex; gap: 10px; min-height: 44px; align-items: center; font-size: 15px; color: var(--ink); text-decoration: none; }
.toc-mobile a:hover { color: var(--ink-hi); }

.prose { font-size: 17px; line-height: 1.65; color: var(--ink); margin-top: 40px; }
.prose > * + * { margin-top: 16px; }
.prose h2 { font: 400 22px/1.2 var(--serif); color: var(--ink-hi); letter-spacing: -.01em; margin-top: 56px; margin-bottom: 12px; scroll-margin-top: 16px; text-wrap: balance; font-optical-sizing: auto; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--ink-hi); margin-top: 32px; margin-bottom: 8px; scroll-margin-top: 16px; }
.prose h2 + *, .prose h3 + * { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--ink-mut); }
.prose strong, .prose b { color: var(--ink-hi); font-weight: 600; }
.prose code, .code-chip { font: 400 15px/1.4 var(--mono); color: var(--ink-hi); background: var(--raised); border: 1px solid var(--hair); border-radius: 6px; padding: 1px 6px; }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin-block: 40px; }
.prose [id] { scroll-margin-top: 16px; }
@media (min-width: 600px) { .prose h2 { font-size: 24px; } }
@media (min-width: 1024px) { .prose h2 { font-size: 26px; } }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hair); border-radius: 12px; }
.prose table, .table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.prose th { font-size: 14px; font-weight: 600; color: var(--ink-mut); }
.prose tr:last-child td { border-bottom: 0; }
/* references: hanging indent, citation text byte-exact */
.citations { list-style: none; padding: 0 !important; }
.citations li { font-size: 16px; line-height: 1.55; padding-left: 2em; text-indent: -2em; }
.citations li + li { margin-top: 12px; }

/* ── 15 Utility card layout (send, clinic, get, 404, stubs, beta) ── */
.util { position: relative; min-height: calc(100svh - 32px); display: flex; flex-direction: column; align-items: center; padding: 32px var(--gutter) 48px; }
.util .brand { margin-bottom: 48px; }
.util-main { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* ≥768: the logo stays in the flow 32px under the strip and the card centers in
   the space below it (a pinned logo overlapped tall cards such as the clinic QR) */
@media (min-width: 768px) {
  .util { justify-content: flex-start; }
  .util .brand { margin-bottom: 0; }
  .util-main { flex: 1; padding-block: 32px 0; }
}
.util-card {
  width: 100%; max-width: 440px; text-align: center;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 28px; padding: 28px;
  display: grid; justify-items: center; gap: 16px;
}
@media (min-width: 600px) { .util-card { padding: 40px; } }
.util-orb { width: 120px; height: 120px; }
.util-card .t-h2 { font-size: 34px; }
@media (min-width: 600px) { .util-card .t-h2 { font-size: 40px; } }
/* a kicker in the card sits 10px above its heading (the card's 16px gap − 6),
   not 28px (16px gap + the usual 12px kicker step) */
.util-card .kicker { margin-top: -4px; }
.util-card .kicker + :is(h1, h2, .t-h2) { margin-top: -6px; }
.util-card .btn { width: 100%; min-height: 52px; }
.util-card .badges { justify-content: center; }
.util-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.util-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--ink-hi); text-decoration: underline; text-decoration-color: var(--hair-3); text-underline-offset: 3px; }
.util-links a:hover { text-decoration-color: var(--ember); }
.util-qr { width: 200px; padding: 12px; background: var(--paper); border-radius: 16px; }
.util-qr img, .util-qr svg { width: 100%; height: auto; }

/* ── 16 Footer ──────────────────────────────────────────── */
/* One centered composition (round 3): brand and tagline, then every footer
   link in one centered row, then a hairline, the disclaimer and the © line,
   all inside the page's content column (.wrap: 170–1270 at 1440). Same markup
   on every page.
   The twelve links flow as one inline list with one even gap: the groups and
   their lists are inline, so links wrap one at a time, never group by group,
   and text-wrap: balance evens out the rows (two rows of six from 1024px,
   three at 768, five at 375; no link alone on a row). The gap is a margin on each item; the list's negative margin cancels
   it at the row ends, so every row centers exactly. Font size 0 on the list
   removes the source whitespace between items (it stays a wrap point).
   The group labels ("Ember", "Learn", "Clinicians", "Legal") stay for screen readers. */
.foot { padding-block: 56px 40px; text-align: center; }
.foot-top { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.foot-id { display: flex; flex-direction: column; align-items: center; }
.foot-id .brand { min-height: 44px; }
.foot-tagline { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--ink-mut); text-wrap: balance; }
.foot-groups {
  --foot-gap: 22px;
  align-self: stretch; margin-inline: calc(var(--foot-gap) / -2);
  font-size: 0; line-height: 0; text-align: center; text-wrap: balance;
}
.foot-group, .foot-group ul, .foot-group li { display: inline; }
.foot-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; font-size: 14px; line-height: 1; }
.foot-group ul { list-style: none; padding: 0; margin: 0; }
.foot-group li { margin-inline: calc(var(--foot-gap) / 2); }
.foot-group a {
  display: inline-flex; vertical-align: top; align-items: center; min-height: 44px; white-space: nowrap;
  font-size: 15px; line-height: 1.3; color: var(--ink); text-decoration: none; transition: color 160ms var(--ease-std);
}
.foot-group a:hover { color: var(--ink-hi); text-decoration: underline; text-decoration-color: var(--hair-3); text-underline-offset: 4px; }
.foot-group a[aria-current="page"] { color: var(--ink-hi); }
.foot-bottom { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hair); display: grid; gap: 6px; justify-items: center; }
.foot-disclaimer { font-size: 14px; line-height: 1.5; color: var(--ink-mut); max-width: 72em; text-wrap: balance; }
.foot-legal { font-size: 14px; color: var(--ink-mut); }
@media (max-width: 599px) {
  .foot { padding-block: 48px 36px; }
  .foot-groups { --foot-gap: 18px; }
}
/* ≥1024: 14px links and a 20px gap; the twelve links balance into two rows */
@media (min-width: 1024px) {
  .foot-groups { --foot-gap: 20px; }
  .foot-group a { font-size: 14px; }
}

/* ── 17 Phone download bar (home only, <768px) ──────────── */
.getbar {
  position: fixed; z-index: 60;
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  height: 64px; padding: 0 12px 0 14px; border-radius: 20px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(18, 17, 16, .92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--hair-2);
  transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px)));
  visibility: hidden;
  transition: transform 220ms var(--ease), visibility 0s linear 220ms;
}
.getbar.is-shown { transform: none; visibility: visible; transition: transform 220ms var(--ease), visibility 0s; }
.getbar img { width: 36px; height: 36px; flex: none; }
.getbar-text { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.getbar-text b { font-size: 15px; font-weight: 600; color: var(--ink-hi); }
.getbar-text span { font-size: 14px; color: var(--ink-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) { .getbar { display: none; } }

/* ── 18 Motion, reduced motion, print ───────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 600ms var(--ease) both; }
}
@keyframes rise { from { opacity: 0; translate: 0 12px; } }
/* nothing on V3 hides content waiting for scroll */
.reveal { opacity: 1 !important; transform: none !important; }
/* providers engine demo (byte-locked block): its bounce arrow stops after 3 runs */
.engine-host .scenario-cue__arrow { animation-iteration-count: 3 !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  /* paper is white: the cream text tiers print dark, and kickers print black
     (their sky, green and pink keys are too light on white) */
  :root { color-scheme: light; --ink-hi: #000; --ink: #222; --ink-mut: #555; }
  .kicker { color: #000 !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .draft-strip, .nav, .foot, .getbar, .skip, .legal-rail, .toc-mobile, .no-print { display: none !important; }
  .t-legal-h1, .prose h2, .prose h3, .legal-updated, .legal-kicker, .prose, .legal-callout { color: #000 !important; }
  .prose strong, .prose b, .legal-callout strong, .legal-callout b, .legal-callout a, .prose code, .prose li::marker { color: #000 !important; }
  .prose code { background: none; border-color: #ccc; }
  .legal-callout { background: none; border-color: #999; }
  .prose a { color: #000; text-decoration: underline; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .prose th, .prose td { border-color: #ccc; }
  .legal { padding: 0; }
}

/* ══ Round 3 ═══════════════════════════════════════════════ */

/* ── 19 Section kickers and color keys ──────────────────── */
/* A short colored label above a section heading (1–3 words, sentence case,
   adds information, never repeats the H2). Color comes from a key class:
     <p class="kicker k-mig">Day types</p><h2 class="t-h2">…</h2>
   Keys set --k; any element can carry one (.tint uses it for text).
   Every key is ≥ 5:1 on --bg, --surface and --raised. */
.k-ember { --k: var(--ember); }
.k-mig { --k: var(--mig); }
.k-head { --k: var(--head); }
.k-sky { --k: var(--clear); }
.k-pink { --k: var(--period); }
.k-impact { --k: var(--impact); }
.k-teal { --k: var(--teal); }
.k-green { --k: var(--green); }
.k-patterns { --k: var(--patterns); }
.k-weather { --k: var(--weather); }
.k-health { --k: var(--health); }
.k-backup { --k: var(--backup); }
.k-exp { --k: var(--exp); }
.k-routines { --k: var(--routines); }
.k-sleep { --k: var(--sleep); }
.kicker {
  display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%;
  font: 600 14px/1.3 var(--sans); letter-spacing: 0; color: var(--k, var(--ember));
}
.kicker::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.kicker--plain::before { content: none; }
@media (min-width: 600px) { .kicker { font-size: 15px; } }
.center-head > .kicker, .center > .kicker, .close .kicker, .kicker--center { margin-inline: auto; }
/* The dot is a bullet, and a bullet only reads as one on a left edge: a
   centered kicker drops it (page heroes do the same in their page CSS). */
.center-head > .kicker::before, .center > .kicker::before, .close .kicker::before, .kicker--center::before { content: none; }
/* Phones: section heads start at the page gutter with their dot, like the
   split sections beside them, so every section on a page shares one left
   edge. Page heroes stay centered. */
@media (max-width: 599px) {
  .center-head, .center-head .t-lead, .center-head > .kicker { margin-inline: 0; }
  .center-head { text-align: left; }
  .center-head > .kicker::before { content: ""; }
}
/* kicker → heading is a tighter step than heading → lead */
.kicker + :is(h1, h2, h3, .t-hero, .t-display, .t-h2, .t-h2-close, .t-h3) { margin-top: 12px; }
.close .kicker + .t-h2-close { margin-top: 12px; }
/* FAQ: wrap kicker + title in .faq-head so the title column stays one grid item */
@media (min-width: 1024px) { .faq > .faq-head { grid-column: 1 / span 5; align-self: start; } }
/* colored text inside a heading or label: <span class="tint k-pink">period</span> */
.tint { color: var(--k, var(--ember)); }

/* ── 20 Reveal and draw-once motion ─────────────────────── */
/* Finite and vestibular-safe: each object rises 12px and fades in once, the
   first time it enters the screen (320ms ease-out); lines draw once.
   v3.js adds .js-motion to <html> only when it runs, IntersectionObserver
   exists and Reduce Motion is off, so without JS (or with Reduce Motion)
   everything is simply visible. Objects already on screen at load never hide.
     [data-reveal]          the element itself rises
     [data-reveal-group]    its direct children rise in turn (60ms apart, max 300ms)
     [data-draw]            inside it, .draw strokes draw (needs pathLength="1"),
                            .draw-fill fades in after 300ms, .draw-after after 450ms
   Don't put these on the providers engine demo, on .rise, or inside a hidden
   tab panel that you crossfade yourself. */
@keyframes v3-reveal { from { opacity: 0; translate: 0 12px; } }
@keyframes v3-draw { from { stroke-dashoffset: 1; } }
@keyframes v3-fade { from { opacity: 0; } }
.draw { stroke-dasharray: 1 1; }
.js-motion [data-reveal]:not(.is-in),
.js-motion [data-reveal-group]:not(.is-in) > * { opacity: 0; translate: 0 12px; }
.js-motion [data-draw]:not(.is-in) .draw { stroke-dashoffset: 1; }
.js-motion [data-draw]:not(.is-in) :is(.draw-fill, .draw-after) { opacity: 0; }
.is-anim[data-reveal], .is-anim[data-reveal-group] > * { animation: v3-reveal 320ms cubic-bezier(.22, .7, .2, 1) backwards; }
.is-anim[data-reveal-group] > :nth-child(2) { animation-delay: 60ms; }
.is-anim[data-reveal-group] > :nth-child(3) { animation-delay: 120ms; }
.is-anim[data-reveal-group] > :nth-child(4) { animation-delay: 180ms; }
.is-anim[data-reveal-group] > :nth-child(5) { animation-delay: 240ms; }
.is-anim[data-reveal-group] > :nth-child(n+6) { animation-delay: 300ms; }
.is-anim[data-draw] .draw { animation: v3-draw 500ms cubic-bezier(.33, 1, .68, 1) backwards; }
.is-anim[data-draw] .draw-fill { animation: v3-fade 380ms ease-out 300ms backwards; }
.is-anim[data-draw] .draw-after { animation: v3-fade 230ms ease-out 450ms backwards; }

/* ── 21 Ember Brief card ────────────────────────────────── */
/* Matches the app's Brief (src/plus/brief/BriefView.tsx, BriefLine.tsx,
   briefPresentation.ts): header, finding title + change pill, sentence, a
   zero-based two-point line (Treatment Story style) with the change in a
   chip, and the two date ranges underneath. Geometry is the app's (300px
   plot, points 54px in, 34px headroom, baseline at 88). The app's 12–13px
   pill, chip and date text are set at the site's 14px floor.
   Markup (copy as is; strings are real app output, so data-copylint="app"):

   <article class="brief" data-draw data-copylint="app" aria-label="Ember Brief">
     <div class="brief-head"><p class="brief-title">Ember Brief</p><p class="brief-date">Oct 14</p></div>
     <div class="brief-finding">
       <div class="brief-row">
         <div class="brief-text"><p class="brief-name">Migraine days</p>
           <p class="brief-sentence">9 in the last 30 days, down from 11 in the 30 days before.</p></div>
         <span class="brief-tab">Fewer</span>
       </div>
       <div class="brief-plot" role="img" aria-label="Migraine days: 11 from Aug 15 – Sep 13, then 9 from Sep 14 – Oct 13.">
         <svg viewBox="0 0 300 96" aria-hidden="true">
           <line class="brief-base" x1="14" y1="88" x2="286" y2="88"/>
           <path class="brief-area draw-fill" d="M54 88V34L246 43.8V88Z"/>
           <path class="brief-line draw" pathLength="1" d="M54 34L246 43.8"/>
           <circle class="brief-dot" cx="54" cy="34" r="5"/>
           <circle class="brief-dot brief-dot--end draw-after" cx="246" cy="43.8" r="6"/>
         </svg>
         <span class="brief-val" style="--y:34" aria-hidden="true">11 days</span>
         <span class="brief-val brief-val--recent draw-after" style="--y:43.8" aria-hidden="true">9 days</span>
         <span class="brief-chip draw-after" style="--y:38.9" aria-hidden="true">−2</span>
       </div>
       <div class="brief-pills" aria-hidden="true"><span class="brief-pill">Aug 15 – Sep 13</span><span class="brief-pill brief-pill--recent">Sep 14 – Oct 13</span></div>
     </div>
   </article>

   Other values: y = 88 − 54 × value ÷ max(earlier, recent); the chip's --y is
   the midpoint of the two. --brief-c sets the line color (default migraine);
   .brief-tab--more is the app's amber "More" pill. */
.brief {
  --brief-c: var(--mig);
  width: min(100%, 340px); padding: 16px 20px 18px; text-align: left;
  background: #151515; border: 1px solid rgba(217, 138, 72, .5); border-top-width: 2px; border-radius: 18px;
}
.brief-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.brief-title { font: 400 25px/32px var(--serif); color: var(--ink-hi); letter-spacing: -.005em; font-optical-sizing: auto; }
.brief-date { flex: none; font-size: 14px; line-height: 18px; color: var(--ink-mut); }
.brief-finding { padding-top: 16px; }
/* title + pill share the first row, the sentence runs full width under them
   (beside the pill, a card-width sentence wrapped to 3 short lines) */
.brief-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; }
.brief-text { display: contents; }
.brief-name { grid-column: 1; grid-row: 1; font: 600 17px/22px var(--sans); color: var(--ink-hi); }
.brief-sentence { grid-column: 1 / -1; grid-row: 2; font-size: 15px; line-height: 21px; color: var(--ink); text-wrap: pretty; }
.brief-tab {
  grid-column: 2; grid-row: 1; justify-self: end; padding: 3px 9px; border-radius: 8px;
  border: 1px solid rgba(143, 184, 168, .5); background: rgba(143, 184, 168, .1);
  font: 500 14px/16px var(--sans); color: var(--teal); white-space: nowrap;
}
.brief-tab--more { border-color: rgba(232, 165, 71, .5); background: rgba(232, 165, 71, .1); color: #e8a547; }
.brief-plot { position: relative; margin-top: 8px; aspect-ratio: 300 / 96; }
.brief-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.brief-base { stroke: #2a2a2a; stroke-width: 1; }
.brief-area { fill: var(--brief-c); fill-opacity: .1; }
.brief-line { fill: none; stroke: var(--brief-c); stroke-width: 3; stroke-linecap: round; }
.brief-dot { fill: var(--brief-c); stroke: #151515; stroke-width: 2; }
/* value labels: the app centers each in a 150px box clamped to the plot,
   which on a 300px plot is the left and right halves */
.brief-val {
  position: absolute; left: 0; width: 50%; bottom: calc((96 - var(--y)) / 96 * 100% + 9px);
  font-size: 14px; line-height: 18px; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums;
}
.brief-val--recent { left: auto; right: 0; bottom: calc((96 - var(--y)) / 96 * 100% + 10px); font-size: 15px; font-weight: 600; color: var(--ink-hi); }
.brief-chip {
  position: absolute; left: 50%; top: calc(var(--y) / 96 * 100% - 27px); translate: -50% 0;
  min-width: 40px; height: 22px; padding: 0 6px; border-radius: 11px;
  display: grid; place-items: center; background: #151515; border: 1px solid var(--brief-c);
  font: 600 14px/1 var(--sans); color: var(--brief-c); font-variant-numeric: tabular-nums;
}
.brief-pills { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.brief-pill {
  min-width: 108px; min-height: 26px; padding: 4px 10px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #2a2a2a; background: #1a1a1a;
  font-size: 14px; line-height: 16px; color: var(--ink-mut); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.brief-pill--recent { border-color: rgba(232, 230, 227, .15); color: var(--ink); }

/* ── 22 Scroll orb ──────────────────────────────────────── */
/* Drawn by v3.js on pages with [data-orb-path], Reduce Motion off, ≥1024px and
   only where the margin lane is ≥ 40px (data-orb-min-lane; 1260px+ today).
   .orb-trail is the path already traveled; .orb-dot is the ember. Both ignore
   the pointer and never affect layout. */
.orb-layer { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.orb-trail { fill: none; stroke: var(--ember); stroke-opacity: .18; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
/* [data-orb-mark] rings sit beside each section's kicker in its color;
   [data-orb-days] lays a month of day types along a crossing. Each lights
   once the orb has passed it: fill and opacity only, no movement. */
.orb-mark { fill: var(--bg); stroke: var(--k, var(--ember)); stroke-opacity: .5; stroke-width: 1.25; transition: fill 240ms var(--ease), stroke-opacity 240ms var(--ease); }
.orb-mark.is-lit { fill: var(--k, var(--ember)); stroke-opacity: 1; }
.orb-day { color: var(--sym); fill: var(--bg); stroke: currentColor; stroke-opacity: .45; stroke-width: 1.25; transition: fill 200ms var(--ease), stroke-opacity 200ms var(--ease), fill-opacity 200ms var(--ease); }
.orb-day--mig { color: var(--mig); }
.orb-day--head { color: var(--head); }
.orb-day--clear { color: var(--clear); stroke: none; fill: currentColor; fill-opacity: .25; }
.orb-day.is-lit { fill: currentColor; stroke-opacity: 1; }
.orb-day--clear.is-lit { fill-opacity: .7; }
.orb-debug-path { fill: none; stroke: #54ccc5; stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 4 4; }
.orb-debug-band { fill: rgba(84, 204, 197, .06); stroke: rgba(84, 204, 197, .35); stroke-width: 1; }
.orb-dot {
  position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #f8d9b0 0%, #f5c58e 28%, #ecaa68 62%, #c96a3a 100%);
  box-shadow: 0 0 10px 3px rgba(236, 170, 104, .38), 0 0 30px 10px rgba(201, 106, 58, .18);
  opacity: 0; will-change: transform, opacity;
}
.orb-on [data-orb-end] { transition: filter 600ms var(--ease); }
.orb-on [data-orb-end].is-orb-arrived { filter: brightness(1.1); }

@media print {
  .js-motion [data-reveal], .js-motion [data-reveal-group] > * { opacity: 1 !important; translate: none !important; }
  .js-motion [data-draw] :is(.draw, .draw-fill, .draw-after) { opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .orb-layer, .orb-dot { display: none !important; }
}

/* ── 23 Day classifier ("Try a day": home #classify, /migraine-day/) ── */
/* Markup and behavior: [data-try] in v3.js, which mirrors the app's
   classifyDay. Moved from pages/home.css when /migraine-day/ reused it. */
/* the approved rule line, set off with a migraine-purple rule */
.split-copy > .rule-line { margin-top: 24px; }
.rule-line { max-width: 30em; padding-left: 16px; border-left: 2px solid var(--mig); font-size: 16px; line-height: 1.5; color: var(--ink-hi); text-wrap: pretty; }
@media (min-width: 600px) { .rule-line { font-size: 17px; } }
.split-copy > .rule-line + .t-small { margin-top: 24px; }
.try { border: 1px solid var(--hair); border-radius: var(--radius-card); padding: var(--card-pad); display: grid; gap: 24px; }
.try-row { display: grid; gap: 12px; }
.try-label { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-mut); }
.try .chips { gap: 8px; }
.try-pain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.try-pain .chip { padding: 0 10px; }
/* Pain chips switch on the row's own width, not the screen's: four across
   with the dot beside "Moderate" needs ~445px, more than any phone gives.
   Below that, the app's own pain chips (dot above the word); 13px from
   ~360px phones; 2 × 2 under 275px. */
.try-row { container-type: inline-size; }
@container (max-width: 459px) {
  .try-pain { gap: 6px; }
  .try-pain .chip { flex-direction: column; gap: 6px; min-height: 56px; padding: 8px 2px; font-size: 14px; }
}
@container (max-width: 299px) {
  .try-pain { gap: 4px; }
  .try-pain .chip { font-size: 13px; }
}
@container (max-width: 274px) {
  .try-pain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .try-pain .chip { flex-direction: row; gap: 8px; min-height: 44px; padding: 0 10px; font-size: 15px; }
}
@media (max-width: 599px) { .try { gap: 16px; padding: 18px; } }
.pain-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.try-impact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.try-impact .chip { padding: 0 10px; }
.try-result {
  --rc: var(--mig);
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 16px;
  padding: 18px 20px 18px 24px;
  transition: border-color 200ms var(--ease-std);
}
.try-result::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rc); transition: background-color 200ms var(--ease-std); }
.try-title { display: flex; align-items: center; gap: 10px; font: 400 26px/1.15 var(--serif); color: var(--ink-hi); letter-spacing: -.01em; font-optical-sizing: auto; }
.try-rule { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-mut); }
.try-feats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.try-feats li { font-size: 14px; line-height: 1; color: var(--ink); background: var(--raised); border: 1px solid var(--hair); border-radius: 999px; padding: 7px 12px; }