/* Qera: the public site and the patient pages. One stylesheet, no inline styles or scripts (the CSP allows self only).
   Tokens: primitive -> semantic -> component, from tokens-B.json (Signal palette, approved 2026-10-10).
   Mobile first. Breakpoints: 560, 900, 1000, 1100, 1280.
   Loud brand, quiet result: Signal Jade is a field you stand on (hero, bands, primary buttons) with white text on it.
   GREEN, AMBER and RED appear only where they mean a result, always with their word and the pip-in-ring, never as
   decoration, and never inside a jade field. RED fills only the emergency call buttons. No orange anywhere.
   Nothing here depends on styles.css, which serves the partner and admin consoles. */

/* Outfit (Rodrigo Fuenzalida, SIL OFL 1.1, /public/fonts/Outfit-OFL.txt): headlines, buttons and numbers.
   Figtree (Erik Kennedy, SIL OFL 1.1, /public/fonts/Figtree-OFL.txt): everything people read. Self-hosted. */
@font-face { font-family: "Outfit"; src: url("/public/fonts/outfit-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/public/fonts/outfit-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/public/fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/public/fonts/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/public/fonts/figtree-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* ---- Primitives: the approved palette. Contrast is WCAG 2.1, text on background. ---- */
  --jade: #00845E;          /* Signal Jade: brand field, primary buttons. White on it 4.71:1 */
  --jade-deep: #00654B;     /* hover and pressed; the green allowed as small text. 7.09:1 on white */
  --jade-bright: #13BF8A;   /* Night Ink grounds, and the logo's plus. Never under white text (2.37:1) */
  --jade-tint: #DDF7EC;     /* quiet panels, the family's chat bubbles */
  --night-ink: #0A2530;     /* all text, the dark button, dark panels. 15.91:1 on white */
  --mist: #F2F6F6;          /* page */
  --white: #FFFFFF;         /* cards and result cards */
  --slate: #4D6670;         /* secondary text. 6.09:1 on white, 5.59:1 on Mist */
  --line: #D5E0E2;          /* hairlines and card borders, never the only edge of a control */

  /* Triage: results only. pip = the dot in the ring, ink = the word, tint = the chip behind it. */
  --green-pip: #4C9A2A; --green-ink: #2E7D1F; --green-tint: #ECF6E4;
  --amber-pip: #F2B705; --amber-ink: #7A5200; --amber-tint: #FFF4D3;
  --red-pip: #D92D20; --red-ink: #B42318; --red-tint: #FDECEC;
  --red-call: #C8281F;      /* the emergency call button: white on it 5.56:1 */
  --red-call-press: #A11F18;

  /* Supporting shades */
  --night-ink-2: #143846;   /* a panel inside a Night Ink panel; the dark button's hover */
  --on-ink-soft: #B7C8CD;   /* secondary text on Night Ink, 9.6:1 */
  --sunk: #E7EEEF;          /* a quiet panel on white or Mist */
  --sunk-deep: #DCE6E8;
  --field-edge: #6E858D;    /* input edges: 3.9:1 on white, 3.6:1 on Mist (WCAG 1.4.11) */
  --chat-wall: #EFEAE2;     /* the WhatsApp wall in the mockups */
  --read-tick: #2C8FC4;     /* WhatsApp's blue read ticks, decorative */
  --error-ink: #8E1B12;     /* form errors: 8.3:1 on the error tint. Never the RED fill */
  --error-tint: #FBEDEB;

  /* ---- Semantic ---- */
  --bg: var(--mist);
  --surface: var(--white);
  --surface-sunk: var(--sunk);
  --text: var(--night-ink);
  --text-soft: var(--slate);
  --text-muted: var(--slate);
  --primary: var(--jade);
  --primary-hover: var(--jade-deep);
  --on-primary: var(--white);
  --link: var(--jade-deep);
  --focus: var(--night-ink);
  --focus-on-dark: var(--white);
  --bubble-out: var(--jade-tint);

  /* ---- Type ---- */
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-label: 0.75rem;                                        /* 12, bold, upper case */
  --fs-xs: 0.8125rem;                                         /* 13 */
  --fs-sm: 0.9375rem;                                         /* 15 */
  --fs-base: 1.0625rem;                                       /* 17 */
  --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem);    /* 18 -> 21 */
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);           /* 20 -> 24 */
  --fs-h2: clamp(2.125rem, 1.35rem + 2.9vw, 3.5rem);          /* 34 -> 56 */
  --fs-h1: clamp(2.5rem, 1.45rem + 3.9vw, 4.5rem);            /* 40 -> 72 */
  --fs-hero: clamp(3.25rem, 1.2rem + 5.8vw, 6.25rem);         /* 52 -> 100 */
  --fs-num: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);             /* 36 -> 48 */

  /* ---- Space (4-based) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section: clamp(64px, 8vw, 120px);
  --gutter: 20px;
  --target: 44px;

  /* ---- Shape and depth: flat by default, shadows only on things that float. ---- */
  --r-xs: 8px; --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px;
  --float: 0 24px 48px -18px rgba(10, 37, 48, 0.4);
  --phone-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
  --bubble-shadow: 0 1px 1px rgba(10, 37, 48, 0.1);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms;
  --t-scene: 300ms;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; accent-color: var(--primary); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-base)/1.55 var(--font-body); overflow-x: hidden; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--night-ink); }
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
button { font: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; text-wrap: balance; color: inherit; }
h1, h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; }
h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }
:where(h1) { font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.03em; }
:where(h2) { font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem); line-height: 1.1; }
strong, b { font-weight: 700; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--sunk); padding: 0.1em 0.4em; border-radius: 6px; word-break: break-all; }
::selection { background: var(--jade-tint); color: var(--night-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.site-footer :focus-visible, .clinic-card :focus-visible, .pet-note :focus-visible, .legal-aside :focus-visible { outline-color: var(--focus-on-dark); }

.wrap { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; display: inline-flex; align-items: center; min-height: var(--target); background: var(--night-ink); color: var(--white); padding: 0 18px; border-radius: var(--r-pill); font-weight: 700; }
.skip:focus { top: 12px; color: var(--white); }

/* The pip-in-ring: how a triage level is drawn, always beside its word. --pip is the level's colour, --gap the
   colour of the ground it sits on; both inherit, so a chip sets them once for its pip. */
.pip, .badge::before, .tile .tag i, .emo, .dot, .levels-mini i, .doc-level::before, .free-red i, .heal .trend i {
  display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--pip, var(--slate)); background: var(--pip, var(--slate)); box-shadow: inset 0 0 0 2px var(--gap, var(--white));
}

/* ------------------------------------------------------------------ */
/* Page column. Each child of <main> sits in a centred column; a child  */
/* with .bleed spans the width and lays itself out.                     */
/* ------------------------------------------------------------------ */
.site-main { --measure: 760px; }
.site-main.is-wide { --measure: 1200px; }
.site-main > :not(.bleed) { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }
.site-main > :not(.bleed):first-child { margin-top: clamp(32px, 5vw, 56px); }
.site-main > h1 { margin-bottom: 20px; }
.site-main > .section:not(.bleed) { padding-block: 0; margin-block: 32px; }
.site-main > .section:not(.bleed) > h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); margin-bottom: 16px; }

/* ------------------------------------------------------------------ */
/* Buttons: pills, Outfit 700. Jade on light grounds, Night Ink on jade. */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--r-pill);
  font: 700 1.0625rem/1.2 var(--font-display); letter-spacing: -0.005em; text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-lg { min-height: 60px; padding: 0 30px; font-size: 1.1875rem; }
.btn-lg svg { width: 22px; height: 22px; }
/* The one main action on a page. .btn-primary is the same button under the name the shared views use. */
.btn-cta, .btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-cta:hover, .btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn-cta:active, .btn-primary:active { background: var(--night-ink); }
/* Night Ink: the second solid button on light grounds, and the main one on jade. */
.btn-dark { background: var(--night-ink); color: var(--white); }
.btn-dark:hover { background: var(--night-ink-2); color: var(--white); }
/* Outline in white on jade. */
.btn-quiet { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px var(--white); }
.btn-quiet:hover { background: var(--white); color: var(--night-ink); }
/* Outline in ink on light grounds. */
.btn-ghost { background: transparent; color: var(--night-ink); box-shadow: inset 0 0 0 2px var(--night-ink); }
.btn-ghost:hover { background: var(--night-ink); color: var(--white); }
/* Destructive, never RED triage: the form-error family. */
.btn-danger { background: var(--error-tint); color: var(--error-ink); box-shadow: inset 0 0 0 2px var(--error-ink); }
.btn-danger:hover { background: #F6DCD8; color: var(--error-ink); }
.btn-small { min-height: var(--target); padding: 0 18px; font-size: var(--fs-sm); }
.btn-block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { background: var(--line); color: var(--slate); box-shadow: none; cursor: not-allowed; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target); font-weight: 700; text-decoration: none; }
.text-link svg { width: 20px; height: 20px; transition: transform var(--t-fast) var(--ease); }
.text-link:hover svg { transform: translateX(3px); }
button.link { display: inline-flex; align-items: center; min-height: var(--target); background: none; border: 0; padding: 0; color: var(--link); font: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.link-target { display: inline-flex; align-items: center; min-height: var(--target); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.actions form { margin: 0; }

/* ------------------------------------------------------------------ */
/* Header: Mist with the ink lockup, or Signal Jade with the white one  */
/* on the pages that open on a jade band. Sections move into the menu   */
/* under 900 px; My cases stays in the bar.                            */
/* ------------------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(242, 246, 246, 0.94); backdrop-filter: saturate(1.4) blur(10px); box-shadow: 0 1px 0 var(--line); }
.site-header.on-jade { background: var(--jade); backdrop-filter: none; box-shadow: none; color: var(--white); }
.header-inner { position: relative; display: flex; align-items: center; gap: 8px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; min-height: var(--target); margin-right: auto; }
.brand img { width: 110px; height: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 14px; border-radius: var(--r-pill); color: inherit; font: 700 1rem/1.2 var(--font-body); text-decoration: none; }
.nav a:hover { color: inherit; text-decoration: underline; text-underline-offset: 0.25em; }
.nav a.nav-section { display: none; }
.nav a.nav-cases { padding: 0 16px; box-shadow: inset 0 0 0 2px currentColor; }
.nav a.nav-cases:hover { text-decoration: none; background: var(--night-ink); color: var(--white); box-shadow: inset 0 0 0 2px var(--night-ink); }
.nav a.nav-cases svg { width: 18px; height: 18px; margin-right: 8px; }
.nav a[aria-current] { background: var(--night-ink); color: var(--white); box-shadow: inset 0 0 0 2px var(--night-ink); }
.on-jade .nav a.nav-cases:hover, .on-jade .nav a[aria-current] { background: var(--white); color: var(--night-ink); box-shadow: inset 0 0 0 2px var(--white); }
.signout { display: none; margin: 0; }
.nav-signout { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: inherit; font: 700 1rem/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.nav-signout:hover { background: rgba(10, 37, 48, 0.08); }
.on-jade .nav-signout:hover { background: rgba(255, 255, 255, 0.14); }

/* The phone menu: a native disclosure, so it works without JavaScript. public/app.js closes it after a tap. */
.menu { position: static; }
.menu > summary {
  list-style: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px currentColor; cursor: pointer; transition: background-color var(--t-fast) var(--ease);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 22px; height: 22px; }
.menu > summary .menu-shut, .menu[open] > summary .menu-open { display: none; }
.menu[open] > summary .menu-shut { display: block; }
.menu > summary:hover { background: rgba(10, 37, 48, 0.08); }
.on-jade .menu > summary:hover { background: rgba(255, 255, 255, 0.14); }
.menu-panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; width: min(100%, 300px); padding: 8px; border-radius: var(--r-md); background: var(--white); color: var(--night-ink); box-shadow: var(--float), 0 0 0 1px var(--line); }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel li + li { border-top: 1px solid var(--line); }
.menu-panel a { display: flex; align-items: center; min-height: 52px; padding: 0 14px; border-radius: var(--r-sm); color: var(--night-ink); font: 700 1.0625rem/1.2 var(--font-body); text-decoration: none; }
.menu-panel a:hover { background: var(--mist); color: var(--night-ink); }
.menu-panel .menu-signout { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.menu-panel .nav-signout { width: 100%; min-height: 52px; justify-content: flex-start; padding: 0 14px; border-radius: var(--r-sm); }
.menu-panel .nav-signout:hover { background: var(--mist); }

/* ------------------------------------------------------------------ */
/* Hero: the brand at full volume. Jade field, white Outfit headline,   */
/* the Night Ink pill, and the phone with the sample result.            */
/* ------------------------------------------------------------------ */
.hero {
  position: relative; isolation: isolate;
  overflow: hidden; overflow: clip; /* clip, not hidden: a jump to #demo must scroll the page, never the hero */
  background: var(--jade); color: var(--white);
}
/* The Q's ring, very faint, behind the phone. */
.hero::before { content: ""; position: absolute; z-index: -1; width: 620px; height: 620px; left: 20%; bottom: -260px; border-radius: 50%; border: 90px solid rgba(255, 255, 255, 0.07); }
.hero-panel { position: relative; width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; padding-top: 20px; }
.hero-copy { position: relative; max-width: 41rem; }
.status-chip {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  padding: 9px 18px 9px 10px; border-radius: var(--r-pill); background: var(--night-ink); color: var(--white);
  font: 700 0.9375rem/1.2 var(--font-body);
}
.status-chip .pulse { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--jade-bright); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14); flex: none; }
.status-chip .pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--jade-bright); opacity: 0; animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.hero h1 { font-size: min(var(--fs-hero), 15vw); line-height: 0.97; letter-spacing: -0.035em; margin-bottom: 24px; color: var(--white); text-wrap: balance; }
.hero .lead { font-size: var(--fs-lead); line-height: 1.52; color: var(--white); margin-bottom: 30px; max-width: 36rem; }
/* One sentence per line, the second free to wrap. */
.hero h1 .line { display: block; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-row .btn { flex: 1 1 100%; }
.hero .btn-cta { background: var(--night-ink); color: var(--white); }
.hero .btn-cta:hover { background: var(--night-ink-2); color: var(--white); }
.cta-note { margin: 16px 0 0; font-size: var(--fs-sm); color: var(--white); }
.cta-note strong { letter-spacing: 0.02em; }
.hero-facts { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 26px 0 0; padding: 0; font-weight: 700; color: var(--white); }
.hero-facts li { display: inline-flex; align-items: center; gap: 10px; }
.tick-disc { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--white); color: var(--jade); flex: none; }
.tick-disc svg { width: 15px; height: 15px; }

/* Demo: a fieldset holds the legend, the three radios and the stage, so the legend names the group
   and the radios stay siblings of .stage for the CSS-only switch. */
.demo { position: relative; margin: 44px 0 0; padding: 0; border: 0; min-width: 0; min-inline-size: 0; }
.demo-legend { display: block; width: 100%; padding: 0; margin: 0 0 10px; text-align: center; font: 700 var(--fs-sm)/1.3 var(--font-body); color: var(--white); }
.demo-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.stage { display: grid; justify-items: center; }
/* The colour switch: a Night Ink strip; each word carries its pip, the chosen one turns white. */
.flip-track { position: relative; width: min(100%, 360px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 5px; border-radius: var(--r-pill); background: var(--night-ink); container-type: inline-size; }
.flip-track label {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding-inline: 4px; border-radius: var(--r-pill); cursor: pointer;
  font: 700 0.9375rem/1 var(--font-body); letter-spacing: 0.06em; color: var(--white);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.flip-track label:hover { background: var(--night-ink-2); }
.flip-track { --gap: var(--night-ink); }
/* A narrow strip (a 320 px phone with large text): the words keep their room, the pips step aside. The words
   and the selected fill still say which colour is which. em here is the strip's own font size, so this follows
   the text size, not just the screen. */
@container (max-width: 14.5em) {
  .flip-track label { gap: 6px; letter-spacing: 0.02em; font-size: 0.8125rem; }
  .flip-track .dot { display: none; }
}
.dot-green, .emo-green, .levels-mini .dot-green, .badge-green, .tag-green { --pip: var(--green-pip); }
.dot-amber, .emo-amber, .levels-mini .dot-amber, .badge-amber, .tag-amber { --pip: var(--amber-pip); }
.dot-red, .emo-red, .levels-mini .dot-red, .badge-red, .tag-red { --pip: var(--red-pip); }
#demo-green:checked ~ .stage label[for="demo-green"],
#demo-amber:checked ~ .stage label[for="demo-amber"],
#demo-red:checked ~ .stage label[for="demo-red"] { background: var(--white); color: var(--night-ink); }
#demo-green:checked ~ .stage label[for="demo-green"],
#demo-amber:checked ~ .stage label[for="demo-amber"],
#demo-red:checked ~ .stage label[for="demo-red"] { --gap: var(--white); }
#demo-green:focus-visible ~ .stage label[for="demo-green"],
#demo-amber:focus-visible ~ .stage label[for="demo-amber"],
#demo-red:focus-visible ~ .stage label[for="demo-red"] { outline: 3px solid var(--white); outline-offset: 3px; }
/* "See a sample result" lands here: the strip glows twice so the eye finds it even when it's already on screen. */
.demo:target .flip-track, .demo.is-called .flip-track { animation: call 1.3s var(--ease) 2; }
@keyframes call { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); } 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
.flip-note { margin: 10px 0 18px; font-size: var(--fs-xs); color: var(--white); text-align: center; }

.device { position: relative; width: min(100%, 330px); }
/* The plus from the logo, in Jade Bright, half behind the phone: two bars, each half as thick as it is long. */
.device { --plus: 132px; --plus-x: -58px; --plus-y: 60px; }
.device::before, .device::after { content: ""; position: absolute; z-index: -1; background: var(--jade-bright); border-radius: calc(var(--plus) / 9); }
.device::before { right: calc(var(--plus-x) + var(--plus) / 4); top: var(--plus-y); width: calc(var(--plus) / 2); height: var(--plus); }
.device::after { right: var(--plus-x); top: calc(var(--plus-y) + var(--plus) / 4); width: var(--plus); height: calc(var(--plus) / 2); }
.phone {
  --chat-fs: 1rem;          /* results are at least 16 px and follow the browser text size */
  position: relative; width: 100%;
  border-radius: 52px 52px 0 0; padding: 12px 12px 0; background: #101412;
  box-shadow: var(--phone-shadow);
}
.screen { position: relative; overflow: hidden; border-radius: 40px 40px 0 0; background: var(--chat-wall); display: flex; flex-direction: column; }
.statusbar { position: relative; display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 6px 24px 0 28px; background: var(--white); color: #111B21; font: 700 14px/1 var(--font-body); flex: none; }
.statusbar .island { position: absolute; left: 50%; top: 10px; width: 84px; height: 24px; transform: translateX(-50%); border-radius: 20px; background: #101412; }
.statusbar .bars { display: flex; gap: 5px; align-items: center; }
.statusbar .bars i { display: block; width: 16px; height: 9px; border-radius: 2px; background: #111B21; }
.statusbar .bars i:first-child { width: 14px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px 10px; background: var(--white); color: #111B21; border-bottom: 1px solid #E4E1DA; flex: none; }
.chat-head .back { width: 18px; height: 18px; }
.chat-head img { width: 38px; height: 38px; border-radius: 50%; }
.chat-head strong { display: block; font-size: 15px; line-height: 1.2; }
.chat-head small { display: block; font-size: 12.5px; color: #54656F; }
.chat { position: relative; display: grid; align-content: start; padding: 12px 10px; overflow: hidden; font-size: var(--chat-fs); line-height: 1.42; color: #111B21; }
.scene { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 8px; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease), visibility 0s linear var(--t-scene); }
#demo-green:checked ~ .stage .scene-green,
#demo-amber:checked ~ .stage .scene-amber,
#demo-red:checked ~ .stage .scene-red { visibility: visible; opacity: 1; transform: none; transition: opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease); }

/* Chat bubbles (also used in the steps, the day-3 card, /me, the case pages and the pay pages) */
.day-chip { align-self: center; justify-self: center; margin: 0; padding: 4px 10px; border-radius: 8px; background: var(--white); font: 700 11.5px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); box-shadow: var(--bubble-shadow); }
.msg { position: relative; max-width: 86%; padding: 7px 10px 6px; border-radius: 12px; box-shadow: var(--bubble-shadow); }
.msg p { margin: 0 0 0.45em; }
.msg p:last-of-type { margin-bottom: 0; }
.msg ol { margin: 0.2em 0 0.45em; padding-left: 1.25em; }
.msg ol li { margin: 0.1em 0; padding-left: 0.1em; }
.msg .meta { display: block; text-align: right; font-size: 11.5px; color: var(--slate); margin-top: 2px; line-height: 1; }
.msg .meta .ticks { color: var(--read-tick); margin-left: 3px; letter-spacing: -0.25em; }
.msg-in { align-self: flex-start; background: var(--white); border-top-left-radius: 4px; }
.msg-out { align-self: flex-end; background: var(--bubble-out); border-top-right-radius: 4px; }
.msg-photo { padding: 4px; max-width: 72%; }
.msg-photo img { width: 100%; height: auto; border-radius: 9px; aspect-ratio: 4 / 3; }
.msg-photo p { padding: 5px 6px 0; }
/* A result: calm. White bubble, one triage pip beside its words, numbered steps. */
.msg-result { padding: 10px 12px 7px; }
.msg-result .level { display: flex; align-items: flex-start; gap: 8px; font-weight: 700; font-size: 1.04em; line-height: 1.35; margin-bottom: 0.35em; }
.msg-result .level .emo { margin-top: 0.12em; }
.msg-result .label { font-weight: 700; }
.msg-doc { display: flex; align-items: center; gap: 10px; padding: 8px; }
.msg-doc .doc-icon { position: relative; width: 34px; height: 42px; border-radius: 4px; background: var(--jade-tint); flex: none; }
.msg-doc .doc-icon::after { content: "PDF"; position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 700; color: var(--jade-deep); }
.msg-doc strong { display: block; font-size: 0.95em; }
.msg-doc small { display: block; font-size: 12px; color: var(--slate); }
.replies { align-self: flex-start; width: 86%; display: grid; gap: 4px; margin-top: -4px; }
.replies span { display: block; text-align: center; padding: 8px; border-radius: 10px; background: var(--white); color: #00709F; font-weight: 700; font-size: 0.94em; box-shadow: var(--bubble-shadow); }
.replies.two { grid-template-columns: 1fr 1fr; }
.emo { width: 1em; height: 1em; border-width: 0.14em; box-shadow: inset 0 0 0 0.14em var(--gap, var(--white)); vertical-align: -0.14em; }
.composer { display: flex; align-items: center; gap: 8px; padding: 8px 10px 12px; background: var(--chat-wall); flex: none; }
.composer span { flex: 1; height: 38px; border-radius: 20px; background: var(--white); display: flex; align-items: center; padding: 0 14px; font-size: 13px; color: var(--slate); }
.composer i { width: 38px; height: 38px; border-radius: 50%; background: var(--jade); flex: none; display: grid; place-items: center; }
.composer i svg { width: 18px; height: 18px; color: var(--white); }

/* Margin notes: a timeline beside the phone (02:14, 02:15, day 3). 1280 px and up only. */
.notes { display: none; list-style: none; margin: 0; padding: 0; position: absolute; top: 0; left: calc(100% + 36px); width: 196px; height: 100%; }
.note { position: absolute; left: 0; right: 0; padding-top: 10px; border-top: 2px solid rgba(255, 255, 255, 0.4); font-size: var(--fs-sm); line-height: 1.45; color: var(--white); }
.note > b { display: block; font: 700 var(--fs-sm)/1.3 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; margin-bottom: 4px; }
.note-a { top: 150px; }
.note-b { top: 380px; }
.note-c { top: 500px; }
.nudge { margin-top: 10px; padding: 14px 16px 15px; border-radius: 22px; background: var(--white); color: var(--night-ink); box-shadow: var(--float); font-size: 14.5px; line-height: 1.42; transform: rotate(2deg); }
.nudge p { margin: 0; }
.nudge-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px !important; font-size: 13px; }
.nudge-head img { width: 22px; height: 22px; border-radius: 50%; }
.nudge .n-green, .nudge .n-amber, .nudge .n-red { display: none; }
#demo-green:checked ~ .stage .n-green, #demo-amber:checked ~ .stage .n-amber, #demo-red:checked ~ .stage .n-red { display: block; }

/* ------------------------------------------------------------------ */
/* Emergency strip and call buttons: calling is the RED instruction,   */
/* so the buttons are RED. components.emergencyCalls prints them.       */
/* ------------------------------------------------------------------ */
.sos { margin: 16px 8px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.sos-inner { display: grid; gap: 16px; padding: 20px 0; }
.sos-text { display: flex; gap: 12px; align-items: flex-start; }
.sos-text svg { width: 26px; height: 26px; flex: none; color: var(--red-ink); margin-top: 1px; }
.sos-text p { margin: 0; color: var(--text-soft); font-size: var(--fs-sm); line-height: 1.5; }
.sos-text strong { display: block; color: var(--night-ink); font: 700 1.125rem/1.3 var(--font-display); margin-bottom: 4px; }
.calls { display: grid; gap: 10px; }
.calls-label { margin: 0; font-weight: 700; }
.calls-none { margin: 0; font-weight: 700; }
.calls-else { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); }
.sos-calls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.call { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 6px 14px; border-radius: 16px; background: var(--red-call); color: var(--white); text-decoration: none; line-height: 1.1; transition: background-color var(--t-fast) var(--ease); }
.call:hover { background: var(--red-call-press); color: var(--white); }
.call:active { background: var(--red-call-press); }
.call svg { width: 22px; height: 22px; flex: none; }
.call > span { display: grid; }
.call b { font: 800 1.375rem/1.1 var(--font-display); letter-spacing: 0.01em; white-space: nowrap; }
.call small { font-size: var(--fs-xs); font-weight: 500; }
.call-sm { min-height: 52px; justify-content: flex-start; }
.call-sm b { font-size: 1.1875rem; }
/* Ten-digit lines (vets, poisons) are a little smaller and stack, so the numbers never clip. */
.sos-calls-long { grid-template-columns: 1fr; }
.call-long { justify-content: flex-start; }
.call-long b { font-size: 1.1875rem; letter-spacing: 0; }
.page-sos { margin-top: 24px; }

/* ------------------------------------------------------------------ */
/* Sections                                                            */
/* ------------------------------------------------------------------ */
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section-head { max-width: 48rem; margin-bottom: var(--s-7); }
.section-head.split { max-width: none; }
/* Every section opens with the parent's question as an outgoing WhatsApp bubble. */
.ask {
  display: inline-flex; align-items: flex-end; gap: 8px; margin: 0 0 18px;
  padding: 9px 14px; border-radius: 18px 18px 4px 18px;
  background: var(--jade-tint); color: var(--night-ink); font-weight: 700; font-size: var(--fs-sm);
}
.ask::after { content: "\2713\2713"; flex: none; color: var(--read-tick); font-size: 0.8em; letter-spacing: -0.3em; padding-right: 0.3em; line-height: 1.7; }
.section h2, .save h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 18px; color: var(--night-ink); }
.section-head p:not(.ask) { font-size: var(--fs-lead); color: var(--text-soft); margin: 0; max-width: 40rem; }

/* Card: the one surface for grouped content. Flat: a 1 px line, no shadow.
   components.card() prints a .card-head and a .card-body inside it. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; margin: 0 0 20px; }
.card-xl { border-radius: var(--r-xl); }
.card-sunk { background: var(--surface-sunk); border-color: transparent; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.card-head h2 { font: 700 var(--fs-h3)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--night-ink); }
.card-body > :last-child { margin-bottom: 0; }
.narrow { max-width: 30rem; margin-inline: auto; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 4px 20px; display: grid; background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 4px; padding: 20px 0; }
.step + .step { border-top: 1px solid var(--line); }
.step-num { grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--jade); color: var(--white); font: 800 1.125rem/1 var(--font-display); }
.step h3 { align-self: center; min-height: 40px; display: flex; align-items: center; }
.step p { grid-column: 2; margin: 0; color: var(--text-soft); }
.step-vis { display: none; }
.steps .step-vis { margin-top: 12px; border-radius: var(--r-md); background: var(--chat-wall); padding: 14px; gap: 6px; align-content: end; min-height: 132px; font-size: 13.5px; line-height: 1.35; }
.step-vis .msg { max-width: 92%; }
.step-vis .replies { width: 92%; margin-top: 0; }
.mini-photo { justify-self: end; width: 62%; padding: 3px; border-radius: 10px; background: var(--bubble-out); box-shadow: var(--bubble-shadow); }
.mini-photo img { border-radius: 8px; aspect-ratio: 4 / 3; width: 100%; height: auto; }
.who { display: flex; flex-wrap: wrap; gap: 6px; }
.who span { padding: 6px 12px; border-radius: var(--r-pill); background: var(--white); font-weight: 700; color: #00709F; box-shadow: var(--bubble-shadow); }
.who span.on { background: var(--night-ink); color: var(--white); }
.levels-mini { display: grid; gap: 6px; }
.levels-mini span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--white); font-weight: 700; box-shadow: var(--bubble-shadow); }

/* Triage tiles: white cards; the chip with the pip and the word carries the level. */
.tiles { display: grid; gap: 14px; }
.tile { position: relative; border-radius: var(--r-lg); padding: 24px 24px 28px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); }
.tile .tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 auto; padding: 6px 12px 6px 8px; border-radius: var(--r-pill); font: 700 var(--fs-xs)/1.2 var(--font-body); letter-spacing: 0.08em; }
.tile h3 { font: 800 clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem)/1.05 var(--font-display); letter-spacing: -0.025em; margin: 28px 0 10px; }
.tile p { margin: 0; color: var(--text-soft); }
.tile-green .tag { --pip: var(--green-pip); --gap: var(--green-tint); background: var(--green-tint); color: var(--green-ink); }
.tile-amber .tag { --pip: var(--amber-pip); --gap: var(--amber-tint); background: var(--amber-tint); color: var(--amber-ink); }
.tile-red .tag { --pip: var(--red-pip); --gap: var(--red-tint); background: var(--red-tint); color: var(--red-ink); }
.honest { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 18px 20px; border-radius: var(--r-md); background: var(--surface-sunk); color: var(--text-soft); font-size: var(--fs-sm); }
.honest svg { width: 22px; height: 22px; flex: none; color: var(--jade-deep); margin-top: 1px; }
.honest p { margin: 0; }
.honest strong { color: var(--night-ink); }

/* Day 3 tracker */
.track { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.track-card { background: var(--surface); border-radius: var(--r-lg); padding: 18px; border: 1px solid var(--line); }
.track-chat { background: var(--chat-wall); border-radius: var(--r-md); padding: 14px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.42; }
.track-chat .msg { max-width: 94%; }
.heal { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.heal li { display: grid; align-content: start; gap: 8px; }
.heal img { border-radius: 14px; aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; }
.heal b { display: block; font: 700 var(--fs-sm)/1.2 var(--font-display); }
/* A photo's triage level is always its word with the pip-in-ring in that level's colour. How it is changing
   ("Getting worse", "Healing") is a second, neutral line: it never borrows a triage colour. */
.heal .trend { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--slate); line-height: 1.3; }
.heal .trend i { width: 12px; height: 12px; }
.heal .trend-green { color: var(--green-ink); }
.heal .trend-green i { --pip: var(--green-pip); }
.heal .trend-amber { color: var(--amber-ink); }
.heal .trend-amber i { --pip: var(--amber-pip); }
.heal .trend-red { color: var(--red-ink); }
.heal .trend-red i { --pip: var(--red-pip); }
.heal .prog { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--slate); line-height: 1.3; }
.heal .prog-done { font-weight: 700; color: var(--jade-deep); }

/* Household */
.household { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.house-card { background: var(--surface); border-radius: var(--r-lg); padding: 22px; border: 1px solid var(--line); }
.house-card h3 { margin-bottom: 8px; }
.house-card > p { color: var(--text-soft); margin-bottom: 18px; }
.members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.members li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--mist); }
.members .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 1.05rem/1 var(--font-display); flex: none; }
.members .av svg { width: 24px; height: 24px; }
.who-name { min-width: 0; }
.members b { display: block; font-size: var(--fs-sm); line-height: 1.2; }
.members small { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; }
.av-1 { background: var(--jade); color: var(--white); }
.av-2 { background: var(--night-ink); color: var(--white); }
.av-3 { background: var(--jade-tint); color: var(--jade-deep); }
.av-pet { background: var(--sunk-deep); color: var(--night-ink); }
/* Triage badge: the one way a level appears as a label (household list, clinic portal, patient pages).
   components.levelBadge prints it. A tinted chip with the pip and the word; the colour is the level. */
.badge { --gap: var(--sunk); display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 10px 4px 6px; border-radius: var(--r-pill); font: 700 12px/1.3 var(--font-body); letter-spacing: 0.06em; white-space: nowrap; background: var(--sunk); color: var(--night-ink); vertical-align: 0.1em; }
.badge::before { content: ""; width: 12px; height: 12px; }
.badge-green { --gap: var(--green-tint); background: var(--green-tint); color: var(--green-ink); }
.badge-amber { --gap: var(--amber-tint); background: var(--amber-tint); color: var(--amber-ink); }
.badge-red { --gap: var(--red-tint); background: var(--red-tint); color: var(--red-ink); }
.members .badge { margin-left: auto; }
/* Pet advice: a Night Ink panel. Jade Bright is allowed here, on the dark. */
.pet-note { display: grid; gap: 14px; align-content: start; background: var(--night-ink); color: var(--white); border-radius: var(--r-lg); padding: 26px 24px; }
.pet-note svg.big { width: 44px; height: 44px; color: var(--jade-bright); }
.pet-note ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pet-note li { display: flex; gap: 10px; align-items: flex-start; color: var(--on-ink-soft); }
.pet-note li svg { width: 20px; height: 20px; color: var(--jade-bright); flex: none; margin-top: 3px; }

/* Brief */
.brief { display: grid; gap: 40px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.doc-stage { display: grid; place-items: center; padding: 24px 8px 28px; }
/* The price chip hangs off the document's corner, so the two move together at every width. */
.doc-wrap { position: relative; width: min(100%, 360px); }
.doc { position: relative; background: var(--white); border-radius: 16px; padding: 22px 20px; box-shadow: var(--float), 0 0 0 1px var(--line); transform: rotate(-1.5deg); font-size: 12px; line-height: 1.35; color: var(--night-ink); }
.doc-back { position: absolute; inset: 4% 2% 2% 6%; border-radius: 16px; background: var(--line); transform: rotate(3deg) translate(10px, 6px); }
.doc-top { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--night-ink); padding-bottom: 10px; margin-bottom: 12px; }
.doc-top img { width: 69px; height: auto; }
.doc-top span { text-align: right; font-size: 12px; line-height: 1.25; color: var(--slate); }
.doc-title { font: 800 18px/1.15 var(--font-display); letter-spacing: -0.01em; margin: 0 0 2px; }
.doc-level { --pip: var(--amber-pip); --gap: var(--amber-tint); display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 12px; padding: 3px 10px 3px 5px; border-radius: var(--r-pill); background: var(--amber-tint); color: var(--amber-ink); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; }
.doc-level::before { content: ""; width: 12px; height: 12px; }
.doc-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.doc-photos figure { margin: 0; }
.doc-photos img { border-radius: 6px; aspect-ratio: 4 / 3; width: 100%; height: auto; }
.doc-photos figcaption { font-size: 12px; color: var(--slate); margin-top: 3px; }
.doc dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12px; }
.doc dt { font-weight: 700; color: var(--slate); }
.doc dd { margin: 0; }
.doc .clin { margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.doc .lines { margin-top: 4px; display: grid; gap: 6px; }
.doc .lines i { display: block; height: 6px; border-radius: 4px; background: var(--sunk); }
.doc .lines i:nth-child(2) { width: 86%; }
.doc .lines i:nth-child(3) { width: 64%; }
.price-chip { position: absolute; z-index: 2; right: -6px; bottom: -22px; margin: 0; display: grid; justify-items: start; padding: 14px 18px 13px; border-radius: 22px; background: var(--night-ink); color: var(--white); box-shadow: var(--float); transform: rotate(3deg); }
.price-chip b { font: 800 2.25rem/1 var(--font-display); letter-spacing: -0.02em; }
.price-chip span { margin-top: 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--on-ink-soft); }
.brief-copy .points { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 12px; }
.brief-copy .points li { display: flex; gap: 12px; align-items: flex-start; }
.brief-copy .points svg { width: 22px; height: 22px; color: var(--jade); flex: none; margin-top: 2px; }
.free-red { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--night-ink); font-size: var(--fs-sm); }
.free-red i { --pip: var(--red-pip); }
.free-red p { margin: 0; }
.free-red strong { color: var(--red-ink); }

/* Pull quote */
.pull { padding: 8px 0 var(--section); text-align: center; }
.pull-quote { max-width: 15em; margin: 0 auto 16px; font: 800 clamp(2rem, 1.3rem + 2.8vw, 3.75rem)/1.02 var(--font-display); letter-spacing: -0.03em; color: var(--night-ink); text-wrap: balance; }
.pull-note { margin: 0; color: var(--text-soft); font-size: var(--fs-sm); }
.pull + .section { padding-top: 0; }

/* Clinics: a Night Ink panel for the covenant, a white card for partners. */
.clinics { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.clinic-card { position: relative; overflow: hidden; background: var(--night-ink); color: var(--white); border-radius: var(--r-xl); padding: 30px 24px; }
.clinic-card h2 { color: var(--white); }
.clinic-card p { color: var(--on-ink-soft); }
.clinic-card .ask { color: var(--night-ink); }
/* Side by side while each cap keeps 9rem; stacked when the text is large or the card narrow. */
.caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 10px; margin: 24px 0 8px; }
.cap { min-width: 0; background: var(--night-ink-2); border-radius: var(--r-md); padding: 16px 18px; }
.cap small { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jade-bright); }
.cap b { display: block; font: 800 var(--fs-num)/1.05 var(--font-display); letter-spacing: -0.02em; margin: 6px 0 2px; color: var(--white); }
.cap span { display: block; font-size: var(--fs-sm); color: var(--on-ink-soft); }
.clinic-card .fine { font-size: var(--fs-sm); margin: 12px 0 0; }
.partner-card { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border-radius: var(--r-xl); padding: 26px 24px; border: 1px solid var(--line); }
.partner-card .kicker { margin: 0; color: var(--jade-deep); }
.partner-card h3 { font: 800 clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
.partner-card p { color: var(--text-soft); margin: 0; }
.partner-card .btn { margin-top: auto; align-self: flex-start; }
.portal { display: grid; gap: 8px; margin: 6px 0 4px; padding: 12px; border-radius: var(--r-md); background: var(--mist); }
.portal-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.portal-row b { display: block; font-size: var(--fs-sm); line-height: 1.25; }
.portal-row small { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; }
/* Narrow (a small phone, or large text): the badge and Accept share the top line and the case reads under them. */
.portal { container-type: inline-size; }
@container (max-width: 22rem) {
  .portal-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .portal-row > .badge { justify-self: start; }
  .portal-row > span:not(.badge):not(.accept) { grid-column: 1 / -1; grid-row: 2; }
}
.accept { padding: 7px 14px; border-radius: var(--r-pill); background: var(--jade); color: var(--white); font: 700 var(--fs-xs)/1.2 var(--font-display); }

/* Privacy */
.facts { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; container: facts / inline-size; }
.fact { background: var(--surface); border-radius: var(--r-lg); padding: 22px 20px; border: 1px solid var(--line); display: grid; align-content: start; gap: 8px; }
.fact b { font: 800 clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem)/1 var(--font-display); letter-spacing: -0.025em; color: var(--jade); }
.fact h3 { font-size: 1.125rem; }
.fact p { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); }
.fact-aloe { position: relative; padding: 0; overflow: hidden; background: var(--jade-tint); border-color: transparent; min-height: 168px; }
.fact-aloe img { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: calc(100% - 6px); object-fit: contain; object-position: center bottom; }

/* FAQ as a conversation: the family's questions go out, Qera's answers come in. */
.faq-panel { max-width: 880px; margin: 0 auto; padding: 28px 16px 24px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.faq-panel .section-head { margin-bottom: var(--s-6); padding: 0 4px; }
.faq { display: grid; gap: 12px; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  min-height: 56px; padding: 12px 16px 12px 20px; border-radius: 22px 22px 6px 22px;
  background: var(--bubble-out); font-weight: 700; font-size: 1.0625rem; line-height: 1.35;
  margin-left: auto; width: fit-content; max-width: 92%; transition: background-color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex: none; color: var(--jade-deep); transition: transform .2s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq summary:hover { background: #CDEFE0; }
.faq .answer { margin-top: 10px; max-width: 92%; padding: 14px 18px; border-radius: 6px 22px 22px 22px; background: var(--mist); color: var(--text-soft); }
.faq .answer p:last-child { margin-bottom: 0; }
.faq .answer strong { color: var(--night-ink); }

/* Save the number: back on jade, with the contact card. */
.save { padding: 0 8px; }
.save-panel { display: grid; gap: 28px; align-items: center; background: var(--jade); color: var(--white); border-radius: var(--r-xl); padding: 36px 22px; }
.save h2 { color: var(--white); margin-bottom: 14px; }
.save-copy p { color: var(--white); font-size: var(--fs-lead); max-width: 34rem; margin: 0; }
.contact-card { justify-self: center; width: min(100%, 340px); display: grid; justify-items: center; background: var(--white); color: var(--night-ink); border-radius: var(--r-lg); padding: 28px 22px; text-align: center; box-shadow: var(--float); }
.contact-card img { width: 96px; height: 96px; border-radius: 50%; margin: 0 0 14px; }
.contact-card strong { display: block; font: 800 1.5rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.contact-card .num { display: block; margin: 4px 0 14px; color: var(--text-muted); font-size: var(--fs-sm); }
.soon-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--jade-tint); color: var(--jade-deep); font-weight: 700; font-size: var(--fs-sm); }
.soon-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--jade); }

/* Footer: a Night Ink panel with the dark lockup. */
.site-footer { margin: var(--section) 8px 8px; background: var(--night-ink); color: var(--on-ink-soft); border-radius: var(--r-xl); padding: 44px 0 28px; }
.foot-grid { display: grid; gap: 28px 20px; grid-template-columns: 1fr 1fr; }
.foot-brand, .foot-grid > .foot-call { grid-column: 1 / -1; }
.foot-brand img { width: 126px; height: auto; margin-bottom: 16px; }
.foot-brand p { font-size: var(--fs-sm); max-width: 24rem; margin: 0; }
.site-footer h2 { font: 700 var(--fs-label)/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--jade-bright); margin: 0 0 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-footer ul a { color: var(--white); text-decoration: none; display: inline-flex; min-height: var(--target); align-items: center; font-weight: 500; }
.site-footer ul a:hover { text-decoration: underline; color: var(--white); }
.site-footer .sos-calls { grid-template-columns: 1fr 1fr; max-width: 420px; }
.site-footer .sos-calls-long { grid-template-columns: 1fr; }
.foot-legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: var(--fs-xs); }
.foot-legal p { margin: 0; }
.foot-legal a { color: var(--white); }
.foot-legal a:hover { color: var(--white); }

/* ------------------------------------------------------------------ */
/* Sign-in page (/me): a jade band (the header sits on it), the white   */
/* form card rising into it, and what arrives on WhatsApp beside it.    */
/* ------------------------------------------------------------------ */
.signin-band { position: relative; overflow: hidden; isolation: isolate; padding: 24px 0 120px; background: var(--jade); color: var(--white); }
.signin-band::before { content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; right: -220px; top: -240px; border-radius: 50%; border: 80px solid rgba(255, 255, 255, 0.07); }
.signin-band .ask { color: var(--night-ink); }
.signin-band h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.03em; margin-bottom: 14px; color: var(--white); }
.signin-band p:not(.ask) { margin: 0; max-width: 36rem; font-size: var(--fs-lead); color: var(--white); }
.signin-body { position: relative; z-index: 2; margin-top: -88px; }
.signin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.form-card { background: var(--surface); border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--float); padding: 28px 20px; }
.form-card h2 { font: 700 var(--fs-h3)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--night-ink); margin: 0 0 18px; }
.form-card form { margin: 0; }
.soon-note { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; padding: 14px 16px; border-radius: 16px; background: var(--jade-tint); color: var(--night-ink); font-size: var(--fs-sm); line-height: 1.5; }
.soon-note svg { width: 22px; height: 22px; flex: none; color: var(--jade-deep); margin-top: 1px; }
.input-wrap { display: flex; align-items: stretch; min-height: 60px; border-radius: var(--r-sm); background: var(--white); box-shadow: inset 0 0 0 2px var(--field-edge); transition: box-shadow var(--t-fast) var(--ease); }
.input-wrap:focus-within { box-shadow: inset 0 0 0 3px var(--night-ink), 0 0 0 4px var(--jade-tint); }
.input-wrap .prefix { display: flex; align-items: center; padding: 0 12px 0 16px; border-right: 1.5px solid var(--line); }
.input-wrap .prefix svg { width: 22px; height: 22px; color: var(--jade-deep); }
.input-wrap input, .input-wrap input:focus-visible { flex: 1; width: 100%; min-width: 0; min-height: 0; border: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: transparent; box-shadow: none; padding: 0 16px; font: 700 1.25rem/1 var(--font-body); color: var(--night-ink); letter-spacing: 0.03em; }
/* The ring on .input-wrap is the focus indicator. The transparent outline turns visible in forced-colours mode. */
.input-wrap input:focus { outline: 2px solid transparent; outline-offset: 0; }
.input-code input { letter-spacing: 0.4em; text-align: center; font-size: 1.5rem; }
.lock-note { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 0; font-size: var(--fs-sm); color: var(--text-soft); }
.lock-note svg { width: 20px; height: 20px; flex: none; color: var(--jade-deep); margin-top: 1px; }
.after { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 8px; color: var(--text-soft); font-size: var(--fs-sm); }
.after p { margin: 0; }
.after strong { color: var(--night-ink); }
.after a { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 700; }
.signin-side { display: grid; gap: 14px; padding: 22px 18px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.signin-side h2 { font: 700 var(--fs-label)/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--jade-deep); margin: 0; }
.code-chat { background: var(--chat-wall); border-radius: var(--r-lg); padding: 14px 12px; display: grid; gap: 8px; color: var(--night-ink); font-size: 0.9375rem; line-height: 1.42; }
.code-chat .msg { max-width: 94%; }
/* Meta's authentication template: the code in bold at the start of the sentence, then a Copy code button under
   the bubble. The wording is fixed by WhatsApp, so the sample shows it as it will arrive. */
.code-chat .code { font: 800 1.25em/1.2 var(--font-display); letter-spacing: 0.04em; color: var(--night-ink); }
.code-chat .code-expiry { color: var(--slate); }
.code-chat .copy-chip { justify-self: start; width: 94%; margin: -4px 0 0; padding: 9px 8px; border-radius: 10px; background: var(--white); color: #00709F; font-weight: 700; text-align: center; box-shadow: var(--bubble-shadow); }
.inside { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.inside li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.45; }
.inside li b { display: block; color: var(--night-ink); font-size: var(--fs-base); }
.inside li svg { width: 22px; height: 22px; flex: none; color: var(--jade-deep); margin-top: 2px; }

/* ------------------------------------------------------------------ */
/* Forms: components.field() and hand-built fields share these          */
/* ------------------------------------------------------------------ */
.form { margin: 0; }
.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field label { font-weight: 700; font-size: 1.0625rem; }
.field .hint, .hint { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
:where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], select, textarea) {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: var(--r-sm);
  background: var(--white); color: var(--night-ink); font: 400 var(--fs-base)/1.4 var(--font-body);
  box-shadow: inset 0 0 0 2px var(--field-edge); transition: box-shadow var(--t-fast) var(--ease);
}
:where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], select, textarea):focus-visible { outline-offset: 2px; box-shadow: inset 0 0 0 2.5px var(--night-ink); }
:where(textarea) { min-height: 7rem; resize: vertical; }
:where(select) {
  -webkit-appearance: none; appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%230A2530' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
::placeholder { color: var(--text-muted); opacity: 1; }
/* Errors sit between the label and the field, in the form-error family (never the RED triage fill). */
.field .error, .field-error { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--error-tint); color: var(--error-ink); font-weight: 700; font-size: var(--fs-sm); line-height: 1.4; }
.field .error svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.field.has-error .input-wrap, .field.has-error > input, .field.has-error > select, .field.has-error > textarea,
[aria-invalid="true"] { box-shadow: inset 0 0 0 2.5px var(--error-ink); }
.field-check { margin: 0 0 12px; }
.field-check.has-error { padding-left: 12px; box-shadow: inset 3px 0 0 var(--error-ink); }
/* The whole label row is the target, so a 24 px box still gets a 44 px tap area. */
.check { display: flex; align-items: flex-start; gap: 12px; min-height: var(--target); padding: 10px 0; margin: 0; cursor: pointer; }
.check input { width: 1.5rem; height: 1.5rem; margin: 0; flex: none; accent-color: var(--jade); }
fieldset { min-width: 0; margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); }
legend { padding: 0 6px; font-weight: 700; }
.inline-form { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }

/* Flash messages: role="status" lines under the header or above a form. */
.flash { display: block; margin: 0 0 20px; padding: 14px 18px; border-radius: var(--r-md); background: var(--jade-tint); color: var(--night-ink); font-size: var(--fs-sm); line-height: 1.5; }
.flash > :last-child { margin-bottom: 0; }
.flash-ok { background: var(--jade-tint); box-shadow: inset 4px 0 0 var(--jade); }
.flash-warn { background: var(--sunk); box-shadow: inset 4px 0 0 var(--night-ink); }
.flash-danger { background: var(--error-tint); color: var(--error-ink); font-weight: 700; box-shadow: inset 4px 0 0 var(--error-ink); }
.site-main > .flash { margin-top: 24px; }
/* RED case banner on a patient's case: the instruction first, the numbers in RED buttons. */
.red-alert { background: var(--white); color: var(--night-ink); box-shadow: inset 0 0 0 1px var(--line); padding: 18px 20px; border-radius: var(--r-lg); font-size: var(--fs-base); }
.red-alert-lead { margin: 0 0 12px; }
.red-alert-lead strong { color: var(--red-ink); }

/* Pills: status words that aren't a triage level. */
.pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; line-height: 1.4; white-space: nowrap; background: var(--sunk); color: var(--slate); vertical-align: 0.1em; }
.pill-ok { background: var(--jade-tint); color: var(--jade-deep); }
.pill-warn { background: var(--night-ink); color: var(--white); }
.pill-danger { background: var(--error-tint); color: var(--error-ink); }
.pill-muted { background: var(--sunk); color: var(--slate); }

/* Countdown: role="timer"; the ticking digits are aria-hidden and a fixed "ends at 14:35" is read instead. */
.countdown, [data-countdown] { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--night-ink); }
.countdown.expired { color: var(--text-muted); }

/* Stats */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }
.stat-value { font: 800 var(--fs-num)/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--night-ink); font-variant-numeric: tabular-nums; }
.stat-label { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-muted); }
.stat-hint { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.stack > * + * { margin-top: 16px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

/* Tables: every cell carries its column label (components.table), so under 560 px of table width each row
   stacks into label and value pairs instead of scrolling sideways. */
.table-wrap { width: 100%; overflow-x: auto; margin: 0 0 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.table-stack { container-type: inline-size; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: var(--mist); color: var(--slate); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
@container (max-width: 559px) {
  .table-stack table, .table-stack tbody, .table-stack tr, .table-stack td { display: block; }
  .table-stack thead { display: none; }
  .table-stack tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack td { display: grid; grid-template-columns: 36% minmax(0, 1fr); column-gap: 12px; padding: 4px 0; border: 0; }
  .table-stack td::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); padding-top: 2px; }
  .table-stack td[data-label=""] { display: block; }
  .table-stack td[data-label=""]::before { content: none; }
}

/* Small text helpers the shared views use. */
.lead { font-size: var(--fs-lead); line-height: 1.52; color: var(--text-soft); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }
.kicker { margin: 0 0 12px; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jade-deep); }
.empty { margin: 0; padding: 18px 20px; border-radius: var(--r-md); background: var(--surface-sunk); color: var(--text-soft); text-align: center; }
.empty-lg { padding: 32px 24px; }
.empty-lg p { margin: 0 0 6px; }
.empty-lg p:last-child { margin: 0; }
.empty-lg strong { color: var(--night-ink); font: 700 var(--fs-h3)/1.2 var(--font-display); }
p.back { margin: 0 0 12px; }
p.back a { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 700; text-decoration: none; }
p.back a::before { content: "\2190\00a0"; content: "\2190\00a0" / ""; }
.plain-list { list-style: none; margin: 0 0 16px; padding: 0; }
.plain-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 0; }
.plain-list li:has(> a.link-target:only-child) { padding: 0; }

/* ------------------------------------------------------------------ */
/* Patient portal (signed in) and pay pages: patient.js, pay.js         */
/* A jade band carries the heading and the first cards rise into it,   */
/* as on the sign-in page. Bot replies are WhatsApp bubbles on the     */
/* chat wall. Mobile first; the desktop grid is at 900 px below.       */
/* ------------------------------------------------------------------ */
.portal-band { position: relative; overflow: hidden; isolation: isolate; margin: 4px 8px 0; padding: 28px 0 100px; border-radius: var(--r-lg); background: var(--jade); color: var(--white); }
.portal-band::before { content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; right: -220px; top: -240px; border-radius: 50%; border: 80px solid rgba(255, 255, 255, 0.07); }
.portal-band .ask { color: var(--night-ink); }
.portal-band h1 { max-width: 22ch; margin-bottom: 12px; font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.03em; color: var(--white); }
.portal-lead { max-width: 36rem; margin: 0; font-size: var(--fs-lead); line-height: 1.52; color: var(--white); }
.portal-band .flash { max-width: 40rem; margin: 20px 0 0; color: var(--night-ink); }
.portal-band p.back { margin: -6px 0 6px; }
.portal-band p.back a, .portal-band p.back a:hover { color: var(--white); }
.portal-band p.back a:hover { text-decoration: underline; }
.portal-body { position: relative; z-index: 2; margin-top: -68px; }
.portal-card { min-width: 0; padding: 22px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--float); }
.portal-card > h2, .cases-closed > h2, .side-card > h2, .delete-panel > h2, .brief-panel > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 var(--fs-h3)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--night-ink); }
.count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--r-pill); background: var(--jade-tint); color: var(--jade-deep); font-size: var(--fs-sm); }

/* Avatars: the person icon for "Me", an initial, or a paw. */
.av { display: grid; place-items: center; flex: none; border-radius: 50%; font-weight: 700; }
.av-me { background: var(--jade); color: var(--white); }
.av-person { background: var(--jade-tint); color: var(--jade-deep); }

/* Case list: open cases in a card, closed ones under it, the household and briefs beside them. */
.cases-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.cases-main, .cases-side { display: grid; gap: 16px; min-width: 0; }
.case-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.case-row { position: relative; padding: 14px 14px 14px 16px; border-radius: var(--r-md); background: var(--mist); transition: box-shadow var(--t-fast) var(--ease); }
.case-row:hover { box-shadow: inset 0 0 0 2px var(--night-ink); }
.case-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top go" "title go" "who go"; gap: 6px 12px; min-height: var(--target); color: var(--night-ink); text-decoration: none; }
.case-link:hover { color: var(--night-ink); }
/* The whole row is the tap target, not just the title. */
.case-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.case-top { grid-area: top; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.case-day { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--text-soft); }
.case-title { grid-area: title; font: 700 1.1875rem/1.25 var(--font-display); }
.case-link:hover .case-title { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
.case-who { grid-area: who; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-sm); color: var(--text-soft); }
.case-who .av { width: 28px; height: 28px; font-size: 0.8125rem; }
.case-who .av svg { width: 16px; height: 16px; }
.case-who .av-pet { background: var(--white); color: var(--night-ink); }
.case-go { grid-area: go; align-self: center; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--night-ink); border: 1px solid var(--line); }
.case-go svg { width: 20px; height: 20px; transition: transform var(--t-fast) var(--ease); }
.case-link:hover .case-go svg { transform: translateX(3px); }
.case-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.case-meta > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.case-meta dt { color: var(--text-muted); }
.case-meta dd { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-variant-numeric: lining-nums; }
.cases-closed > h2 { margin-top: 8px; padding: 0 4px; }
.cases-closed .case-row { background: var(--surface); border: 1px solid var(--line); }
/* Severity meter beside the number: decorative, the number is the information. Night Ink at every level: a triage
   colour never grows past a chip or a pip, and the badge beside the case already carries the level. */
.sev-meter { position: relative; flex: none; width: 48px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--sunk-deep); }
.sev-meter i { position: absolute; inset: 0 auto 0 0; width: calc(var(--sev, 0) * 10%); border-radius: inherit; background: var(--night-ink); }
.sev-m-1 { --sev: 1; } .sev-m-2 { --sev: 2; } .sev-m-3 { --sev: 3; } .sev-m-4 { --sev: 4; } .sev-m-5 { --sev: 5; }
.sev-m-6 { --sev: 6; } .sev-m-7 { --sev: 7; } .sev-m-8 { --sev: 8; } .sev-m-9 { --sev: 9; } .sev-m-10 { --sev: 10; }

/* No cases yet: the photo going out, then the one action. */
.cases-empty { display: grid; justify-items: start; gap: 4px; }
.cases-empty > h2 { margin-bottom: 4px; }
.cases-empty > p { max-width: 34rem; color: var(--text-soft); }
.empty-chat { justify-self: stretch; display: grid; gap: 8px; margin-bottom: 16px; padding: 14px; border-radius: var(--r-lg); background: var(--chat-wall); font-size: 13.5px; line-height: 1.35; }
.empty-chat .msg-out { justify-self: end; }
.empty-chat .msg-photo { width: min(62%, 220px); max-width: none; }

/* Household */
.house-panel .members { grid-template-columns: minmax(0, 1fr); }
.house-panel .members b { font-size: var(--fs-base); }
.av-me svg { width: 24px; height: 24px; }
.house-only { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--text-soft); }
.add-hint { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.75; color: var(--text-soft); }
/* What to type on WhatsApp, as a small outgoing bubble. */
.reply { display: inline-block; padding: 0 8px; border-radius: 8px 8px 2px 8px; background: var(--bubble-out); color: var(--night-ink); font-weight: 700; line-height: 1.6; white-space: nowrap; }

/* Briefs: PDF bubbles, like the brief in the chat. */
.side-card { min-width: 0; padding: 22px 18px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.side-empty { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); }
.doc-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.side-card .doc-list { margin-bottom: 0; }
.doc-link { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--mist); color: var(--night-ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--t-fast) var(--ease); }
.doc-link:hover { color: var(--night-ink); box-shadow: inset 0 0 0 2px var(--night-ink); }
.doc-link:hover strong { text-decoration: underline; text-underline-offset: 0.18em; }
.doc-icon { position: relative; flex: none; width: 34px; height: 42px; border-radius: 4px; background: var(--jade-tint); }
.doc-icon::after { content: "PDF"; position: absolute; left: 0; right: 0; bottom: 5px; font-size: 10px; font-weight: 700; text-align: center; color: var(--jade-deep); }
.doc-text { flex: 1; min-width: 0; }
.doc-text strong { display: block; font-size: var(--fs-sm); line-height: 1.3; }
.doc-text small { display: block; font-size: var(--fs-xs); line-height: 1.35; color: var(--text-muted); }
.doc-link > svg { flex: none; width: 22px; height: 22px; color: var(--jade-deep); }

/* Delete my data: quiet, at the end. The form-error family, never the RED triage fill. */
.delete-panel { min-width: 0; padding: 22px 18px; border: 1px solid var(--line); border-radius: var(--r-xl); }
.delete-panel > h2 svg { flex: none; width: 22px; height: 22px; color: var(--error-ink); }
.delete-panel > p { max-width: 40rem; font-size: var(--fs-sm); color: var(--text-soft); }
.delete-panel .field-check { margin-bottom: 16px; }

/* One case: the band names it, the RED card or the progress card rises into it. */
.case-kicker { margin: 0 0 8px; font: 700 var(--fs-lead)/1.3 var(--font-display); color: var(--white); }
.case-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 0; font-size: var(--fs-sm); color: var(--white); font-variant-numeric: lining-nums; }
.case-track { max-width: 40rem; margin: 8px 0 0; font-size: var(--fs-sm); color: var(--white); }
.case-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.case-side { display: grid; gap: 16px; min-width: 0; }
.case-side .honest { margin: 0; }

/* RED: the instruction and the numbers, once. The footer leaves its buttons out on this page.
   A wrapping row, not a two-column grid: the buttons sit beside the instruction only when the instruction keeps
   at least 18rem, and drop under it otherwise, so the text can never be squeezed under the buttons. */
.case-sos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 22px 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--float); }
.case-sos-text { flex: 1 1 18rem; min-width: min(100%, 16rem); display: flex; align-items: flex-start; gap: 12px; }
.case-sos .calls { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.case-sos-icon { flex: none; width: 28px; height: 28px; margin-top: 1px; color: var(--red-ink); }
.case-sos-text p { margin: 0; color: var(--text-soft); }
.case-sos-text strong { display: block; margin-bottom: 2px; font: 800 1.375rem/1.25 var(--font-display); color: var(--red-ink); }
.case-sos .calls-else { color: var(--text-muted); }

/* How it's changing: where it stands (the colour, in words, on white), the chart, then the day-3 tracker's strip. */
.case-now { display: grid; gap: 4px; margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.case-now .level { display: flex; align-items: flex-start; gap: 10px; font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--night-ink); }
.case-now .emo { margin-top: 0.2em; }
.case-now-sub { padding-left: 24px; font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: lining-nums; }
.sev-figure { margin: 0; }
.sev-chart { display: block; width: 100%; height: 210px; overflow: visible; }
.sev-grid { stroke: var(--line); }
.sev-label { fill: var(--slate); font-family: var(--font-body); font-size: 13px; font-variant-numeric: lining-nums; }
.sev-line { stroke: var(--night-ink); }
.sev-point { --pip: var(--slate); }
.sev-green { --pip: var(--green-pip); }
.sev-amber { --pip: var(--amber-pip); }
.sev-red { --pip: var(--red-pip); }
.sev-ring { fill: var(--white); stroke: var(--pip); }
.sev-dot { fill: var(--pip); }
.sev-figure figcaption { margin-top: 8px; font-size: var(--fs-sm); color: var(--text-muted); }
/* One photo: the score, big, over a scale. */
.sev-single { display: grid; gap: 12px; }
.sev-big { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.sev-big b { font: 800 var(--fs-num)/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--night-ink); }
.sev-big span { font-weight: 700; color: var(--text-muted); }
.sev-single .sev-meter { width: min(100%, 320px); height: 10px; border-radius: 5px; }
.sev-single figcaption { margin-top: 0; max-width: 34rem; }
.heal-case { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.heal-link { display: grid; align-content: start; gap: 8px; border-radius: 14px; color: var(--night-ink); text-decoration: none; }
.heal-link:hover { color: var(--night-ink); }
.heal-link:hover b { text-decoration: underline; text-underline-offset: 0.18em; }
.heal-link img { background: var(--sunk); }
.heal-cap { display: grid; gap: 2px; }
.heal-gone { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 6px; border-radius: 14px; background: var(--surface-sunk); font-size: var(--fs-xs); text-align: center; color: var(--text-muted); }

/* The conversation: each photo going out and Qera's reply, as on WhatsApp. */
.convo { list-style: none; margin: 0; padding: 16px 10px; display: grid; gap: 22px; border-radius: var(--r-lg); background: var(--chat-wall); font-size: 1rem; line-height: 1.45; color: var(--night-ink); }
.turn { display: flex; flex-direction: column; gap: 8px; min-width: 0; scroll-margin-top: 96px; }
.convo .day-chip { font-size: 12px; line-height: 1.3; }
/* A photo in the strip jumps here; its day chip lights up so the eye lands on it. */
.turn:target .day-chip { background: var(--night-ink); color: var(--white); }
.convo .msg { max-width: min(92%, 34rem); }
.convo .msg-photo { width: min(74%, 320px); max-width: none; margin: 0; }
.convo .msg-photo img { object-fit: cover; background: var(--sunk); }
.convo .msg-photo .meta { padding: 4px 6px 2px; }
.msg-gone { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.msg-result .label { margin: 0.7em 0 0.15em; font-weight: 700; }
.msg-result ul { margin: 0.2em 0 0.45em; padding-left: 1.25em; }
.msg-result ul li { margin: 0.1em 0; }
.msg-result .meta { margin-top: 6px; font-variant-numeric: lining-nums; }

/* The brief: the parent's question, the price as the one main action, PDF bubbles once made. */
.brief-panel { padding: 22px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.brief-panel .ask { margin-bottom: 14px; }
.brief-panel > p:not(.ask):not(.hint):not(.flash) { font-size: var(--fs-sm); color: var(--text-soft); }
.brief-panel .flash { margin: 0 0 14px; }
.brief-buy { margin: 4px 0 10px; }
.brief-panel .hint { margin: 0; }

/* Pay pages: the notice card with a mark, a WhatsApp bubble for the brief, one action. */
.notice-mark.notice-mark-quiet { background: var(--sunk); color: var(--slate); }
.notice-mark.notice-mark-red { background: var(--red-tint); color: var(--red-ink); }
.notice-mark.notice-mark-red svg { width: 30px; height: 30px; }
.pay-chat { display: grid; gap: 8px; margin: 0 0 18px; padding: 14px 12px; border-radius: var(--r-lg); background: var(--chat-wall); font-size: 14.5px; line-height: 1.42; color: var(--night-ink); }
.pay-chat .msg-doc, .pay-free .msg-doc { max-width: 100%; width: min(100%, 320px); }
.pay-ref { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.pay-ref code { white-space: nowrap; word-break: normal; }
.pay-notice .actions .btn svg { width: 20px; height: 20px; }
.notice-red .lead { color: var(--night-ink); }
.pay-free { display: grid; gap: 12px; justify-items: start; padding: 14px; border-radius: var(--r-lg); background: var(--surface-sunk); font-size: var(--fs-sm); color: var(--text-soft); }
.pay-free p { margin: 0; }
/* On a narrow phone the RED pages' two call buttons stack, so neither label wraps. */
@media (max-width: 419px) {
  .notice-red .sos-calls, .case-sos .sos-calls { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 559px) {
  .case-sos .calls { flex-basis: 100%; }
}
@media (min-width: 560px) {
  .heal-case { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .house-panel .members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-card, .side-card, .delete-panel, .case-sos, .brief-panel { padding: 26px 24px; }
}
@media (min-width: 900px) {
  .portal-band { margin: 8px 16px 0; padding: 44px 0 124px; border-radius: var(--r-xl); }
  .portal-body { margin-top: -84px; }
  .portal-card, .case-sos { padding: 32px; }
  .side-card, .delete-panel, .brief-panel { padding: 28px; }
  .cases-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "main side" "delete side"; grid-template-rows: auto 1fr; gap: 24px 28px; }
  .cases-main { grid-area: main; }
  .cases-side { grid-area: side; }
  .delete-panel { grid-area: delete; }
  .house-panel .members { grid-template-columns: minmax(0, 1fr); }
  .case-grid { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "progress side" "convo side"; grid-template-rows: auto 1fr; gap: 24px 28px; }
  .case-grid.has-sos { grid-template-areas: "sos side" "convo side" "progress side"; grid-template-rows: auto auto 1fr; }
  .case-sos { grid-area: sos; }
  .case-progress { grid-area: progress; }
  .case-convo { grid-area: convo; }
  .case-side { grid-area: side; position: sticky; top: 96px; }
  .convo { padding: 24px 22px; }
}
@media (min-width: 1100px) {
  .case-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px 40px; }
}
/* Short screens: the side column scrolls with the page instead of sticking. */
@media (max-height: 700px) {
  .case-side { position: static; }
}
@media (forced-colors: active) {
  .case-row, .doc-link, .portal-card, .brief-panel, .case-sos { border: 1px solid CanvasText; }
  .sev-meter { forced-color-adjust: none; }
}

/* ------------------------------------------------------------------ */
/* Notices: expired links, confirmations, 404 and error pages           */
/* ------------------------------------------------------------------ */
.notice { max-width: 40rem; margin-top: clamp(32px, 6vw, 72px); padding: 32px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.notice h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 14px; color: var(--night-ink); }
.notice .lead { margin-bottom: 16px; }
.notice > :last-child { margin-bottom: 0; }
.notice .calls { margin: 8px 0 20px; }
.notice-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 50%; background: var(--jade-tint); color: var(--jade-deep); }
.notice-mark svg { width: 28px; height: 28px; }
.notice .card-body > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Legal documents: terms, privacy notice, covenant                     */
/* ------------------------------------------------------------------ */
.legal { padding-top: clamp(32px, 6vw, 72px); }
.legal-head { max-width: 50rem; padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.legal-head h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.03em; margin-bottom: 18px; color: var(--night-ink); }
.legal-head .lead { max-width: 40rem; margin-bottom: 12px; }
.legal-meta { max-width: 40rem; margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.legal-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.toc { padding: 18px 18px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.toc h2 { margin: 0 0 10px; font: 700 var(--fs-label)/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--jade-deep); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.toc a { display: flex; align-items: center; min-height: var(--target); padding: 4px 0; color: var(--night-ink); font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.legal-body { max-width: 44rem; min-width: 0; }
.legal-sec + .legal-sec { margin-top: 44px; }
.legal-sec h2 { margin-bottom: 14px; font: 700 clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--night-ink); }
.legal-body p, .legal-body li { line-height: 1.7; }
.legal-body ul { margin: 0 0 1em; padding-left: 1.3em; }
.legal-body li + li { margin-top: 8px; }
.legal-body li::marker { color: var(--jade); }
.legal-body .table-wrap { margin: 20px 0 24px; }
/* The covenant's caps: a Night Ink card beside the text on a wide screen, above it on a phone. */
.legal-aside { order: -1; padding: 24px 22px; border-radius: var(--r-lg); background: var(--night-ink); color: var(--on-ink-soft); }
.legal-aside h2 { margin: 0 0 16px; font: 700 var(--fs-label)/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--jade-bright); }
.legal-aside p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; }
.legal-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 10px; margin: 0 0 18px; }
.legal-cap { padding: 18px; border-radius: var(--r-md); background: var(--night-ink-2); }
.legal-cap small { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-soft); }
.legal-cap b { display: block; margin: 6px 0 4px; font: 800 var(--fs-num)/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--white); }
.legal-cap span { display: block; font-size: var(--fs-sm); color: var(--on-ink-soft); line-height: 1.4; }

/* Prices, caps, times and counts read better with lining figures. Kept after the components because the `font`
   shorthand resets font-variant-numeric. */
h1, h2, .tile h3, .partner-card h3, .cap b, .fact b, .price-chip b, .doc-title, .pull-quote, .step-num, .code-chat .code, .legal-cap b, .stat-value, .call b { font-variant-numeric: lining-nums; }

/* ------------------------------------------------------------------ */
/* Breakpoints                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 559px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: baseline; }
  .fact b { grid-row: 1 / span 2; font-size: 1.75rem; }
  .fact-aloe { min-height: 120px; }
}
/* Too narrow for the big word beside the text (a small phone, or large text): it sits above the heading. */
@container facts (max-width: 22rem) {
  .fact { grid-template-columns: minmax(0, 1fr); }
  .fact b { grid-row: auto; }
}
/* The narrowest phones: the pill drops its icon and the lockup shrinks to 104 px (the logo rules allow 96), so
   the lockup, My cases and the menu share one row. */
@media (max-width: 389px) {
  .brand img { width: 104px; }
  .nav a.nav-cases svg { display: none; }
  .nav a.nav-cases { padding: 0 14px; }
}
@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .header-inner { gap: 6px; }
}
@media (min-width: 560px) {
  .cta-row .btn { flex: 0 0 auto; }
  .hero-facts { flex-direction: row; flex-wrap: wrap; gap: 12px 26px; }
  .members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .sos-calls { grid-template-columns: auto auto; justify-content: start; }
  .sos-calls-long { grid-template-columns: auto; }
  .call { min-width: 180px; }
  .site-footer .call { min-width: 0; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sign out moves out of the menu and into the bar. */
  .nav .signout { display: flex; }
  .menu-panel .menu-signout { display: none; }
  .doc-stage { padding: 30px 24px 34px; }
  .price-chip { right: -30px; }
}
@media (max-width: 899px) {
  .tiles { grid-template-columns: 1fr; }
  .brief-copy { order: -1; }
}
@media (min-width: 900px) {
  :root { --gutter: 32px; }
  .brand img { width: 126px; }
  .header-inner { min-height: 84px; gap: 12px; }
  .nav { gap: 8px; }
  .nav a.nav-section { display: inline-flex; }
  .menu { display: none; }
  .hero-panel { padding-top: 40px; }
  .sos { margin: 16px 16px 0; }
  .sos-inner { grid-template-columns: 1fr auto; align-items: center; gap: 40px; padding: 22px 8px; }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0; background: none; border: 0; border-radius: 0; }
  .step { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; row-gap: 10px; padding: 22px; background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line); }
  .step + .step { border-top: 1px solid var(--line); }
  .step-num { grid-row: auto; }
  .step h3 { min-height: 0; display: block; }
  .step p { grid-column: auto; }
  .steps .step-vis { display: grid; }
  .section-head.split { display: grid; grid-template-columns: 1.15fr 0.85fr; column-gap: 64px; align-items: end; }
  .section-head.split .ask { grid-column: 1; justify-self: start; }
  .section-head.split h2 { grid-column: 1; margin-bottom: 0; }
  .section-head.split > p:not(.ask) { grid-column: 2; grid-row: 2; padding-bottom: 6px; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tile { min-height: 300px; padding: 28px 28px 32px; }
  .tile h3 { margin-top: 44px; }
  .track { grid-template-columns: 0.95fr 1.05fr; align-items: center; gap: 56px; }
  .household { grid-template-columns: 1.45fr 1fr; }
  .brief { grid-template-columns: 1fr 1fr; gap: 64px; }
  .clinics { grid-template-columns: 1.5fr 1fr; }
  .clinic-card { padding: 48px 44px; }
  .partner-card { padding: 36px 32px; }
  .faq-panel { padding: 48px 56px 44px; }
  .save { padding: 0 16px; }
  .save-panel { grid-template-columns: 1.2fr 1fr; padding: 64px; }
  .site-footer { margin: var(--section) 16px 16px; padding: 56px 0 32px; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 32px; }
  .foot-brand, .foot-grid > .foot-call { grid-column: auto; }
  .site-footer .sos-calls { grid-template-columns: 1fr; max-width: 240px; }
  .signin-band { padding: 44px 0 140px; }
  .signin-body { margin-top: -104px; }
  .signin-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px; }
  .form-card { padding: 44px 48px 40px; }
  .signin-side { margin-top: -150px; padding: 28px; box-shadow: var(--float); }
  .page-sos { margin-top: 32px; }
  .card { padding: 32px; }
  .notice { padding: 48px 56px; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Long documents: the contents list becomes a sticky column beside the text. The covenant has no contents list;
   its caps sit in a sticky column on the right instead, so the page uses its width. */
@media (min-width: 1000px) {
  .legal-grid.has-toc { grid-template-columns: 250px minmax(0, 1fr); gap: 72px; align-items: start; }
  /* 8 px of padding keeps the links' focus rings inside the scrolling box. */
  .legal-grid.has-toc .toc { position: sticky; top: 100px; max-height: calc(100vh - 116px); overflow: auto; margin: -8px; padding: 8px; background: none; border: 0; border-radius: 0; }
  .legal-grid.has-toc .toc ol { grid-template-columns: 1fr; border-left: 2px solid var(--line); }
  .legal-grid.has-toc .toc a { margin-left: -2px; padding: 4px 14px; border-left: 2px solid transparent; color: var(--text-soft); font-weight: 500; }
  .legal-grid.has-toc .toc a:hover { border-left-color: var(--jade); color: var(--night-ink); text-decoration: none; }
  .legal-grid.has-aside { grid-template-columns: minmax(0, 1fr) 400px; gap: 72px; align-items: start; }
  .legal-grid.has-aside .legal-aside { order: 0; position: sticky; top: 108px; padding: 32px 30px; }
}
/* Hero goes side by side; the colour strip docks onto the phone. */
@media (min-width: 1100px) {
  .hero::before { left: 56%; bottom: auto; top: -180px; width: 1000px; height: 1000px; border-width: 140px; }
  .hero-panel { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: 100%; column-gap: 56px; height: 800px; padding-top: 36px; }
  .hero-copy { align-self: center; padding-bottom: 40px; }
  .demo { margin: 0; align-self: start; }
  .demo-legend { text-align: left; margin-bottom: 10px; }
  .stage { position: relative; }
  .flip-track { width: 100%; margin-bottom: 14px; }
  .flip-note { position: absolute; top: -34px; right: 0; margin: 0; line-height: 24px; }
  .device { width: 360px; }
  .device { --plus: 170px; --plus-x: -76px; --plus-y: -34px; }
  .phone { padding: 12px 12px 0; }
  /* The two hero buttons share one row in the copy column (568 px at 1280 and up). */
  .hero .cta-row .btn-cta { padding: 0 26px; }
  .hero .cta-row .btn-quiet { padding: 0 22px; }
}
@media (min-width: 1280px) {
  .hero-panel { grid-template-columns: minmax(0, 1fr) 592px; column-gap: 40px; }
  .hero h1 { font-size: min(var(--fs-hero), 5.75rem); }
  .demo { width: 360px; }
  .notes { display: block; }
  @media (prefers-reduced-motion: no-preference) { .note-c { animation: arrive 600ms var(--ease) 900ms both; } }
}
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } }

/* Short screens (landscape phones, 200% zoom): the header scrolls away instead of covering what has focus. */
@media (max-height: 520px) {
  .site-header { position: relative; }
  html { scroll-padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .status-chip .pulse::after { display: none; }
}
@media (forced-colors: active) {
  .btn, .call, .flip-track label, .tile, .faq summary, .badge, .pill, .menu > summary, .nav a.nav-cases { border: 2px solid ButtonText; }
  .input-wrap, :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) { border: 2px solid ButtonText; }
  #demo-green:checked ~ .stage label[for="demo-green"], #demo-amber:checked ~ .stage label[for="demo-amber"], #demo-red:checked ~ .stage label[for="demo-red"] { outline: 3px solid Highlight; }
  .pip, .dot, .tile .tag i, .emo, .badge::before, .levels-mini i, .doc-level::before, .free-red i { forced-color-adjust: none; }
  /* Icons that set their own jade colour keep it in forced colours; give them the system text colour. */
  .input-wrap .prefix svg, .lock-note svg, .inside li svg, .honest svg, .pet-note svg, .points svg, .soon-note svg { color: CanvasText; }
  .device::before, .device::after, .hero::before, .signin-band::before, .portal-band::before { display: none; }
}

@media print {
  .site-header, .site-footer, .sos, .skip, .actions, form, .toc, p.back, .menu { display: none !important; }
  body { background: #fff; }
  .card, .notice, .portal-card, .brief-panel, .case-sos { box-shadow: none; break-inside: avoid; }
  a { color: inherit; }
}