/**
 * BK ClinicQ — public landing page (`/`).
 *
 * The marketing front door: hero, the "one queue, four doors" diagram, tabbed product
 * mock-ups (patient PWA, clinic dashboard, waiting-room board, USSD + WhatsApp), the
 * feature scope, the positioning table, delivery, and the closing call to action. It is
 * the web version of `docs/DEMO/index.html`, rendered with the product's own design
 * tokens instead of the walkthrough's stand-alone palette.
 *
 * Since the front-door restyle it also dresses `/features`, `/privacy` and `/terms`, which
 * share this page's header and footer (`web/partials/lp_header.html` / `lp_footer.html`) and
 * add the sub-page head and long-form document blocks near the end of this file.
 *
 * Loaded *after* `site.css`, which owns the tokens, the reset and the shared shell. Every
 * class here is prefixed `lp-` so nothing in this file can reach a page that does not opt
 * into it, and nothing shared can be broken by editing it. Colours are `var(--token)`
 * only, so light and dark flip with the rest of the app (Issue 97).
 *
 * No inline styles: CSP is `style-src 'self' 'nonce-…'`, and a nonce never covers a
 * `style="…"` attribute — see `src/core/security_headers.py`.
 */

/* ── Landing-only tokens ──────────────────────────────────────
   Four things the shared token set has no opinion about: the display board's own dark
   palette (it is a TV in a waiting room, dark in both themes), the private-sector accent
   that distinguishes a private clinic from a public one, the terminal green the USSD
   transcript is read in, and a mono stack for ticket numbers. */
:root {
  --lp-max: 71rem;                  /* 1136px content column */
  --lp-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --lp-private: #7e22ce;
  --lp-private-soft: #f3e8ff;
  --lp-board-bg: #07171c;
  --lp-board-line: #12303a;
  --lp-board-ink: #eafcfc;
  --lp-board-dim: #7fb9c4;
  --lp-board-row: #0b2229;
  --lp-board-accent: #69d5d5;
  --lp-wa-paper: #e7ded4;
  --lp-wa-them: #ffffff;
  --lp-wa-me: #d9fdd3;
  --lp-wa-ink: #0b1417;
  --lp-term-bg: #0d1117;
  --lp-term-line: #26313d;
  --lp-term-ink: #c9e8c9;
  --lp-term-in: #7dd3fc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lp-private: #c4a6f5;
    --lp-private-soft: #2a1b3d;
    --lp-wa-paper: #12211c;
    --lp-wa-them: #1f2c33;
    --lp-wa-me: #005c4b;
    --lp-wa-ink: #eaf2f4;
  }
}
:root[data-theme="dark"] {
  --lp-private: #c4a6f5;
  --lp-private-soft: #2a1b3d;
  --lp-wa-paper: #12211c;
  --lp-wa-them: #1f2c33;
  --lp-wa-me: #005c4b;
  --lp-wa-ink: #eaf2f4;
}

/* ── Page frame ───────────────────────────────────────────── */

.lp-wrap {
  width: 100%;
  max-width: var(--lp-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lp-main { flex: 1; }

.lp-section { padding: clamp(3rem, 7vw, 4.75rem) 0; border-top: 1px solid var(--line); }
.lp-section:first-child { border-top: 0; }

.lp-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: .75rem;
}
.lp-title { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.15rem); font-weight: 600; letter-spacing: -.025em; }
.lp-sub { margin-top: .75rem; max-width: 62ch; color: var(--muted); }

.lp-group {
  margin: 2.75rem 0 1rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Header ───────────────────────────────────────────────── */

/* Sticky, translucent, and hairline-separated only once the page has scrolled, so the hero
   starts flush against the top of the window. `landing.js` toggles `is-stuck`. */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lp-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 12px rgba(26, 30, 36, .05); }

.lp-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 3.75rem;
}

.lp-logo { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; letter-spacing: -.02em; }
.lp-logo-mark {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), var(--brand-hover));
  color: var(--on-brand);
  box-shadow: var(--shadow-icon);
}
.lp-logo-mark svg { width: 1.05rem; height: 1.05rem; }

.lp-nav-links { margin-left: auto; display: flex; gap: .25rem; }
.lp-nav-links a {
  padding: .45rem .7rem;
  border-radius: 999px;
  font-size: .9375rem;
  color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.lp-nav-links a:hover { background: var(--brand-soft); color: var(--brand-deep); }

.lp-nav-actions { display: flex; align-items: center; gap: .4rem; }

@media (max-width: 60rem) { .lp-nav-links { display: none; } .lp-nav-actions { margin-left: auto; } }

/* The actions never wrap a label. On a small phone (Find a clinic beside Sign in, Issues 200 and
   254) the buttons tighten and the brand keeps only its mark, so the bar stays one line at 320 px. */
.lp-logo span:last-child, .lp-nav-actions .lp-btn { white-space: nowrap; }
@media (max-width: 26rem) {
  .lp-nav { gap: .5rem; }
  .lp-nav-actions { gap: .3rem; }
  .lp-nav-actions .lp-btn-sm { padding: 0 .75rem; }
  .lp-logo span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Theme toggle — the same control the signed-in shell carries, so the choice a visitor
   makes on the landing page is the one they meet after signing in (`theme.js`). */
.lp-theme-toggle {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lp-theme-toggle:hover { background: var(--brand-soft); color: var(--brand-deep); }
.lp-theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.lp-theme-toggle .lp-icon-sun { display: none; }
:root[data-theme="dark"] .lp-theme-toggle .lp-icon-sun,
.lp-theme-toggle[aria-pressed="true"] .lp-icon-sun { display: block; }
:root[data-theme="dark"] .lp-theme-toggle .lp-icon-moon,
.lp-theme-toggle[aria-pressed="true"] .lp-icon-moon { display: none; }

/* ── Buttons ──────────────────────────────────────────────── */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: var(--tap);
  padding: 0 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.lp-btn:hover { background: var(--brand-hover); box-shadow: var(--shadow-icon); transform: translateY(-1px); }
.lp-btn svg { width: 1.05rem; height: 1.05rem; }

.lp-btn-sm { min-height: 2.35rem; padding: 0 1rem; font-size: .875rem; }

.lp-btn-quiet {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.lp-btn-quiet:hover { background: var(--surface); border-color: var(--brand); color: var(--brand-deep); box-shadow: none; }

/* ── Hero ─────────────────────────────────────────────────── */

.lp-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); }

.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (max-width: 62rem) { .lp-hero-grid { grid-template-columns: 1fr; } }

.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .8rem;
  border: 1px solid var(--brand-tint);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: .8125rem;
  font-weight: 500;
}
.lp-pill::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--brand);
}

.lp-hero h1 {
  margin-top: 1.25rem;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.08;
  max-width: 16ch;
}
.lp-hero h1 em { font-style: normal; color: var(--brand-deep); }

.lp-lede { margin-top: 1.15rem; max-width: 54ch; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); color: var(--muted); }
.lp-lede strong { color: var(--ink); font-weight: 600; }

.lp-hero-cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .6rem; }

.lp-stats {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
}
.lp-stat {
  padding: .95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.lp-stat b { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--brand-deep); }
.lp-stat span { font-size: .8125rem; line-height: 1.45; color: var(--muted); display: block; margin-top: .15rem; }

/* Hero montage: the ticket phone with a slice of the waiting-room board tucked into its
   lower-left corner — the two halves of the product in one glance. The board sits *behind*
   the phone and to its left, so the part that shows (the label and the number) is the part
   worth reading. Below 62rem the phone stands alone, centred. */
.lp-hero-art { position: relative; display: grid; justify-items: center; }
.lp-hero-art .lp-phone { position: relative; z-index: 2; margin: 0; }
.lp-hero-board {
  position: absolute;
  left: 0;
  bottom: -.75rem;
  z-index: 1;
  width: 15.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--lp-board-line);
  border-radius: 16px;
  background: var(--lp-board-bg);
  color: var(--lp-board-ink);
  box-shadow: var(--shadow);
}
.lp-hero-board .lp-lbl { font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lp-board-accent); font-weight: 600; }
.lp-hero-board b { display: block; font-family: var(--lp-mono); font-size: 2rem; line-height: 1.15; font-weight: 600; }
.lp-hero-board span.lp-room { font-size: .75rem; color: var(--lp-board-dim); }
@media (min-width: 62.01rem) { .lp-hero-art { justify-items: end; } }
@media (max-width: 62rem) { .lp-hero-board { display: none; } }

/* ── Doors diagram ────────────────────────────────────────── */

.lp-doors {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (max-width: 58rem) { .lp-doors { grid-template-columns: 1fr; gap: .75rem; } }

.lp-door-list { display: grid; gap: .55rem; }
.lp-door {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: .875rem;
  font-weight: 500;
  transition: border-color .15s ease, transform .15s ease;
}
.lp-door:hover { border-color: var(--brand); transform: translateX(2px); }
.lp-door i { font-style: normal; font-size: 1.1rem; width: 1.6rem; text-align: center; flex: none; }
.lp-door em { display: block; font-style: normal; font-size: .78125rem; font-weight: 400; color: var(--muted); }

.lp-engine {
  min-width: 13rem;
  padding: 1.5rem 1.35rem;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--brand), var(--brand-hover));
  color: var(--on-brand);
  text-align: center;
  box-shadow: var(--shadow);
}
.lp-engine b { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.lp-engine span { display: block; margin-top: .5rem; font-size: .78125rem; line-height: 1.5; opacity: .88; }
.lp-engine .lp-engine-no { font-family: var(--lp-mono); font-size: 2.25rem; font-weight: 600; margin-top: .75rem; letter-spacing: .01em; opacity: 1; }

/* ── Tabs ─────────────────────────────────────────────────── */

.lp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  width: fit-content;
  max-width: 100%;
  margin: 1.75rem 0 1.25rem;
  padding: .3rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
}
.lp-tab {
  border: 0;
  border-radius: 10px;
  padding: .5rem .9rem;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.lp-tab:hover { color: var(--ink); }
.lp-tab[aria-selected="true"] { background: var(--surface); color: var(--brand-deep); box-shadow: 0 1px 2px rgba(26, 30, 36, .08); }

.lp-panel[hidden] { display: none; }
.lp-panel-note { max-width: 62ch; margin-bottom: 1.35rem; color: var(--muted); font-size: .9375rem; }
.lp-panel-note strong { color: var(--ink); font-weight: 600; }

.lp-stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
  gap: 1.5rem;
  align-items: start;
}

/* ── Phone mock-up ────────────────────────────────────────── */

.lp-phone {
  width: 100%;
  max-width: 20.5rem;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.lp-phone-bar { height: 1.6rem; display: grid; place-items: center; background: var(--bg-soft); }
.lp-phone-bar::after { content: ""; width: 4.25rem; height: .3rem; border-radius: 999px; background: var(--line); }
.lp-screen { padding: 1rem; }

.lp-app-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .85rem; }
.lp-app-head b { font-size: .9375rem; font-weight: 600; }

.lp-seg { display: flex; gap: .1rem; padding: .18rem; border-radius: 9px; background: var(--bg-soft); font-size: .6875rem; font-weight: 500; }
.lp-seg span { padding: .28rem .5rem; border-radius: 6px; color: var(--muted); }
.lp-seg span.is-on { background: var(--surface); color: var(--brand-deep); box-shadow: 0 1px 2px rgba(26, 30, 36, .08); }

.lp-clinic {
  display: flex;
  gap: .65rem;
  padding: .7rem;
  margin-bottom: .5rem;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--surface);
}
.lp-clinic .lp-dot { width: .5rem; height: .5rem; margin-top: .4rem; border-radius: 50%; flex: none; background: var(--brand); }
.lp-clinic .lp-dot.is-private { background: var(--lp-private); }
.lp-clinic b { display: block; font-size: .84375rem; font-weight: 600; }
.lp-clinic small { display: block; font-size: .71875rem; color: var(--muted); }
.lp-clinic .lp-meta { margin-left: auto; text-align: right; white-space: nowrap; }
.lp-clinic .lp-meta b { font-size: .9375rem; }
.lp-clinic .lp-meta small { font-size: .6875rem; }

.lp-badge {
  display: inline-block;
  margin-top: .25rem;
  padding: .1rem .4rem;
  border-radius: 5px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.lp-badge.is-private { background: var(--lp-private-soft); color: var(--lp-private); }
.lp-badge.is-warn { background: var(--warn-bg); color: var(--warn-ink); }
.lp-badge.is-live { background: var(--brand-tint); color: var(--brand-deep); }

/* Ticket card — the number is the whole point, so it is the largest thing on the screen. */
.lp-ticket { padding: 1.35rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-soft); text-align: center; }
.lp-ticket .lp-lbl { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lp-ticket .lp-no { font-family: var(--lp-mono); font-size: 3rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--brand-deep); }
.lp-ticket .lp-pos { margin-top: .25rem; font-size: .875rem; color: var(--muted); }
.lp-ticket .lp-pos b { color: var(--ink); }
.lp-ticket .lp-eta { margin-top: .85rem; padding: .5rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: .8125rem; font-weight: 600; }

.lp-steps { margin-top: .85rem; display: grid; gap: .45rem; }
.lp-step { display: flex; align-items: center; gap: .55rem; font-size: .78125rem; color: var(--muted); }
.lp-step .lp-tick {
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  border: 2px solid var(--line);
  border-radius: 50%;
  font-size: .5625rem;
}
.lp-step.is-done .lp-tick { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.lp-step.is-now { color: var(--ink); font-weight: 600; }
.lp-step.is-now .lp-tick { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }

/* ── Dashboard mock-up ────────────────────────────────────── */

.lp-laptop { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.lp-chrome {
  display: flex;
  align-items: center;
  gap: .35rem;
  height: 2.15rem;
  padding: 0 .8rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.lp-chrome i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--line); }
.lp-chrome span { margin-left: .6rem; font-family: var(--lp-mono); font-size: .6875rem; color: var(--muted); }

.lp-dash { padding: 1rem; }
.lp-dash-top { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: .9rem; }
.lp-dash-top b { font-size: .9375rem; font-weight: 600; }
.lp-dash-top .lp-badge { margin-top: 0; margin-left: auto; }

.lp-live { display: inline-flex; align-items: center; gap: .4rem; font-size: .71875rem; font-weight: 600; color: var(--brand-deep); }
.lp-live .lp-blip { width: .45rem; height: .45rem; border-radius: 50%; background: var(--brand); animation: lp-blip 1.6s infinite; }
@keyframes lp-blip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.lp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem; margin-bottom: .9rem; }
.lp-kpi { padding: .6rem .7rem; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg-soft); }
.lp-kpi b { display: block; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.lp-kpi span { font-size: .6875rem; color: var(--muted); }

.lp-qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .65rem; }
.lp-qcard { padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.lp-qcard.is-alert { border-color: var(--warn-ink); background: var(--warn-bg); }
.lp-qcard h4 { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-size: .84375rem; font-weight: 600; }
.lp-qcard h4 .lp-badge { margin-top: 0; }
.lp-qcard .lp-big { font-family: var(--lp-mono); font-size: 1.75rem; font-weight: 600; margin: .25rem 0 0; }
.lp-qcard small { display: block; font-size: .71875rem; color: var(--muted); }
/* The dashboard card's controls are a picture of the real thing, not the real thing:
   they render as spans, so nothing here is focusable or activatable. */
.lp-qcard .lp-btn { width: 100%; margin-top: .6rem; min-height: 2.35rem; font-size: .8125rem; cursor: default; }
.lp-qcard .lp-btn:hover { transform: none; box-shadow: none; }
.lp-qcard .lp-btn-quiet:hover { border-color: var(--line); color: var(--ink); }
.lp-qcard .lp-btn-quiet { margin-top: .35rem; min-height: 2rem; font-size: .75rem; }

/* ── Waiting-room board ───────────────────────────────────── */

/* Deliberately dark in both themes: it is a TV across a waiting room, read at 6 metres. */
.lp-board {
  padding: 1.35rem;
  border: 1px solid var(--lp-board-line);
  border-radius: 14px;
  background: var(--lp-board-bg);
  color: var(--lp-board-ink);
  box-shadow: var(--shadow);
}
.lp-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #16414d;
}
.lp-board-head b { font-size: 1.0625rem; font-weight: 600; letter-spacing: .02em; }
.lp-board-head span { font-family: var(--lp-mono); font-size: .9375rem; color: var(--lp-board-accent); }

.lp-now {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: linear-gradient(100deg, #0d5f5f, #0b3f47);
}
.lp-now .lp-lbl { font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #8fe3e3; }
.lp-now .lp-n { font-family: var(--lp-mono); font-size: clamp(2.25rem, 6vw, 3.5rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.lp-now .lp-rm { margin-left: auto; text-align: right; }
.lp-now .lp-rm b { display: block; font-size: 1.375rem; font-weight: 600; }
.lp-now .lp-rm span { font-size: .75rem; color: #8fe3e3; }
.lp-now.is-flash { animation: lp-flash .9s ease; }
@keyframes lp-flash {
  0% { transform: scale(1.015); box-shadow: 0 0 0 0 rgba(90, 214, 214, .55); }
  100% { transform: scale(1); box-shadow: 0 0 0 1.35rem rgba(90, 214, 214, 0); }
}

.lp-upnext { display: grid; gap: .45rem; }
.lp-upnext .lp-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem 1rem;
  border-radius: 9px;
  background: var(--lp-board-row);
  font-family: var(--lp-mono);
  font-size: 1.0625rem;
}
.lp-upnext .lp-row span:last-child { margin-left: auto; font-family: var(--font); font-size: .78125rem; color: var(--lp-board-dim); }

.lp-board-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .9rem;
  font-size: .71875rem;
  color: #5d97a3;
}
.lp-board-foot b { color: var(--lp-board-dim); }

/* ── USSD + WhatsApp ──────────────────────────────────────── */

.lp-channel-title { margin-bottom: .65rem; font-size: .875rem; font-weight: 600; }
.lp-channel-title code { font-family: var(--lp-mono); color: var(--brand-deep); }

.lp-ussd {
  padding: 1.1rem;
  border: 1px solid var(--lp-term-line);
  border-radius: 12px;
  background: var(--lp-term-bg);
  color: var(--lp-term-ink);
  font-family: var(--lp-mono);
  font-size: .8125rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-x: auto;
}
.lp-ussd .lp-in { color: var(--lp-term-in); }

.lp-wa { display: grid; gap: .55rem; padding: .9rem; border-radius: 14px; background: var(--lp-wa-paper); }
.lp-bub { max-width: 84%; padding: .55rem .75rem; border-radius: 12px; font-size: .8125rem; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.lp-bub.is-them { background: var(--lp-wa-them); color: var(--lp-wa-ink); border-top-left-radius: 3px; }
.lp-bub.is-me { margin-left: auto; background: var(--lp-wa-me); color: var(--lp-wa-ink); border-top-right-radius: 3px; }
.lp-wa-btns { display: grid; gap: .3rem; margin-top: .45rem; }
.lp-wa-btns b {
  display: block;
  padding: .4rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--brand-deep);
  font-size: .78125rem;
  font-weight: 500;
  text-align: center;
}

/* ── Feature grid ─────────────────────────────────────────── */

.lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: .9rem; }
.lp-f {
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lp-f:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); }
.lp-f .lp-ic {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: .7rem;
  border-radius: 10px;
  background: var(--brand-soft);
  font-size: 1.1rem;
}
.lp-f b { display: block; margin-bottom: .3rem; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.lp-f p { font-size: .84375rem; color: var(--muted); }

/* ── Positioning table ────────────────────────────────────── */

.lp-table-scroll { margin-top: 1.75rem; overflow-x: auto; }
.lp-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  font-size: .875rem;
}
.lp-table th, .lp-table td { padding: .75rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.lp-table th { background: var(--bg-soft); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lp-table tr:last-child td { border-bottom: 0; }
.lp-table .lp-mine { background: var(--brand-soft); }
.lp-table .lp-mine strong { color: var(--brand-deep); }

.lp-callout {
  margin-top: 1.75rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--warn-ink);
  border-radius: 12px;
  background: var(--warn-bg);
  font-size: .9375rem;
}
.lp-callout b { color: var(--warn-ink); }
.lp-callout.is-brand { border-color: var(--brand-tint); background: var(--brand-soft); }
.lp-callout.is-brand b { color: var(--brand-deep); }
.lp-callout code { font-family: var(--lp-mono); font-size: .875em; }
.lp-callout a { color: var(--brand-deep); font-weight: 500; }
.lp-callout a:hover { text-decoration: underline; }

/* ── Roadmap ──────────────────────────────────────────────── */

.lp-road { display: grid; gap: .45rem; margin-top: 1.75rem; }
.lp-ms {
  display: grid;
  grid-template-columns: 3.1rem 1fr auto;
  gap: .9rem;
  align-items: center;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.lp-ms .lp-id {
  padding: .3rem 0;
  border-radius: 7px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-family: var(--lp-mono);
  font-size: .8125rem;
  font-weight: 600;
  text-align: center;
}
.lp-ms b { display: block; font-size: .875rem; font-weight: 600; }
.lp-ms small { font-size: .75rem; color: var(--muted); }
.lp-ms .lp-sp { font-family: var(--lp-mono); font-size: .71875rem; color: var(--muted); text-align: right; white-space: nowrap; }
.lp-ms.is-critical { border-color: color-mix(in srgb, var(--danger-ink) 40%, var(--line)); }
.lp-ms.is-critical .lp-id { background: var(--danger-soft); color: var(--danger-ink); }
.lp-ms.is-release { border-color: var(--brand); background: var(--brand-soft); }
.lp-ms.is-release .lp-id { background: var(--brand); color: var(--on-brand); }
.lp-ms.is-release .lp-sp { color: var(--brand-deep); font-weight: 600; }
@media (max-width: 34rem) {
  .lp-ms { grid-template-columns: 2.75rem 1fr; }
  .lp-ms .lp-sp { grid-column: 2; text-align: left; }
}

/* ── Lanes (the team) ─────────────────────────────────────── */

.lp-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin-top: 1.75rem; }
.lp-lane { padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.lp-lane .lp-who {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: .55rem;
  border-radius: 8px;
  background: var(--brand-tint);
  color: var(--brand-deep);
  font-size: .8125rem;
  font-weight: 600;
}
.lp-lane b { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 600; }
.lp-lane ul { display: grid; gap: .2rem; font-size: .78125rem; color: var(--muted); }
.lp-lane li { padding-left: .8rem; position: relative; }
.lp-lane li::before { content: "·"; position: absolute; left: .15rem; color: var(--brand); }

/* ── Closing call to action ───────────────────────────────── */

.lp-final {
  margin: clamp(3rem, 7vw, 4.75rem) 0;
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: 24px;
  background: linear-gradient(140deg, var(--brand), var(--brand-hover));
  color: var(--on-brand);
  text-align: center;
}
.lp-final h2 { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem); font-weight: 600; letter-spacing: -.025em; }
.lp-final p { margin: .75rem auto 0; max-width: 46ch; opacity: .9; }
.lp-final-cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.lp-final .lp-btn { background: var(--surface); color: var(--brand-deep); border-color: transparent; }
.lp-final .lp-btn:hover { background: var(--surface); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.lp-final .lp-btn-ghost { background: transparent; color: var(--on-brand); border-color: color-mix(in srgb, var(--on-brand) 45%, transparent); }
.lp-final .lp-btn-ghost:hover { background: color-mix(in srgb, var(--on-brand) 12%, transparent); box-shadow: none; }

/* ── Footer ───────────────────────────────────────────────── */

.lp-footer { border-top: 1px solid var(--line); background: var(--bg-soft); padding: 2.5rem 0 3rem; font-size: .875rem; color: var(--muted); }
.lp-footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.75rem; }
.lp-footer h3 { margin-bottom: .6rem; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.lp-footer nav { display: grid; gap: .35rem; }
.lp-footer nav a { color: var(--muted); }
.lp-footer nav a:hover { color: var(--brand-deep); text-decoration: underline; }
.lp-footer-about { max-width: 34ch; }
.lp-footer-about .lp-logo { margin-bottom: .6rem; color: var(--ink); }
.lp-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
}

/* On a phone the about text takes the full width, logo beside it, and the link columns pair up
   under it: Product beside For patients, Project beside Legal. Four stacked lists were most of a
   640 px screen; two rows of two keep the whole footer under 60 % of it (Issue 254). Each link
   keeps a 24 px row, the WCAG 2.2 target size, and the two legal lines run on as one paragraph. */
@media (max-width: 40rem) {
  .lp-footer { padding: .875rem 0 1rem; }
  .lp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem 1.25rem; }
  .lp-footer-about { display: flex; align-items: flex-start; gap: .75rem; grid-column: 1 / -1; max-width: none; }
  .lp-footer-about .lp-logo { flex: none; margin-bottom: 0; }
  .lp-footer-about p { font-size: .8125rem; line-height: 1.45; }
  .lp-footer h3 { margin-bottom: .25rem; line-height: 1rem; }
  .lp-footer nav { gap: 0; }
  .lp-footer nav a { line-height: 1.5rem; }
  .lp-footer-legal { display: block; margin-top: .75rem; padding-top: .6rem; font-size: .75rem; line-height: 1.4; }
  .lp-footer-legal > span + span::before { content: "· "; }
}

/* ── Sub-page head ────────────────────────────────────────────
   The opening block on `/features`, `/privacy` and `/terms`. Those pages have no hero and no
   mock-ups, so this is what carries the landing page's voice onto them: the same eyebrow,
   the same display title, the same muted lede, over the same off-white ground. */

.lp-page-head { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 3vw, 2rem); }
.lp-page-head h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.1;
  max-width: 18ch;
}
.lp-page-head .lp-lede { max-width: 58ch; }

/* The last-reviewed stamp on the legal pages: deliberately plain, so a stale date is obvious. */
.lp-updated {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .8125rem;
  color: var(--muted);
}

/* An "Internal" chip beside a section eyebrow, so an operator can see at a glance that the
   section below is one a signed-out visitor is not served (see `web/index.html`). */
.lp-eyebrow-tag {
  display: inline-block;
  margin-left: .35rem;
  padding: .1rem .45rem;
  border-radius: 5px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: .6875rem;
  letter-spacing: .08em;
}

/* ── Long-form document ───────────────────────────────────────
   `/privacy` and `/terms`: a table of contents that sticks beside the text on a wide screen and
   sits above it on a narrow one, and prose sized for reading rather than scanning. */

.lp-doc-grid {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
  padding-bottom: clamp(3rem, 7vw, 4.75rem);
}
/* `minmax(0, 1fr)`, not `1fr`: a bare `1fr` never shrinks below its widest table, and `/privacy`
   scrolled sideways to 720 px on a phone. The tables scroll inside their own box instead. */
@media (max-width: 60rem) { .lp-doc-grid { grid-template-columns: minmax(0, 1fr); } }

.lp-toc { position: sticky; top: 4.75rem; }
@media (max-width: 60rem) { .lp-toc { position: static; } }
.lp-toc h2 {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .6rem;
}
.lp-toc nav { display: grid; gap: .1rem; }
.lp-toc a {
  padding: .35rem .6rem;
  border-radius: 8px;
  font-size: .84375rem;
  color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.lp-toc a:hover { background: var(--brand-soft); color: var(--brand-deep); }

.lp-doc { max-width: 64ch; }
/* `scroll-margin-top` clears the sticky header when a contents link jumps here. */
.lp-doc section { margin-top: 2.5rem; scroll-margin-top: 5rem; }
.lp-doc section:first-child { margin-top: 0; }
.lp-doc h2 {
  /* A section that carries several headings, like the clinic form, needs the gap here; a section
     with one heading already gets it from `.lp-doc section`, so that first heading gives it back. */
  margin-top: 2.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.lp-doc section > h2:first-child { margin-top: 0; }
.lp-doc h3 { margin-top: 1.6rem; font-size: 1rem; font-weight: 600; }
.lp-doc p { margin-top: .9rem; color: var(--muted); }
.lp-doc p strong, .lp-doc li strong { color: var(--ink); font-weight: 600; }
.lp-doc ul, .lp-doc ol { margin-top: .9rem; padding-left: 1.35rem; color: var(--muted); }
.lp-doc ul { list-style: disc; }
.lp-doc ol { list-style: decimal; }
.lp-doc li { margin-top: .45rem; }
.lp-doc li::marker { color: var(--brand); }
.lp-doc a { color: var(--brand-deep); font-weight: 500; }
.lp-doc a:hover { text-decoration: underline; }
.lp-doc code { font-family: var(--lp-mono); font-size: .875em; }
.lp-doc .lp-table-scroll { margin-top: 1.1rem; }
.lp-doc .lp-callout { margin-top: 1.25rem; }

/* Contact / responsible-party blocks: a label above each value, not a wall of prose. */
.lp-defs {
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: .875rem;
}
.lp-defs dt { font-weight: 600; }
.lp-defs dd { color: var(--muted); }
.lp-defs dd + dt { margin-top: .65rem; }

/* The one callout variant the legal pages need that the landing page does not: a refusal, not a
   caveat — "this is not an emergency service". */
.lp-callout.is-danger { border-color: color-mix(in srgb, var(--danger-ink) 45%, var(--line)); background: var(--danger-soft); }
.lp-callout.is-danger b { color: var(--danger-ink); }

/* ── Reveal on scroll ─────────────────────────────────────── */

/* Opt-in: `landing.js` adds `lp-reveal` at runtime, and reveals everything at or above the
   fold in the same pass — so a visitor with JavaScript off, a crawler, or a browser that
   never renders the page sees every section at full opacity rather than a blank page. */
.lp-reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.lp-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-reveal { opacity: 1; transform: none; transition: none; }
  .lp-live .lp-blip, .lp-now.is-flash { animation: none; }
  .lp-btn:hover, .lp-f:hover, .lp-door:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Front-door forms (Issue 29)

   The clinic-registration form is the first form on the front door: everything else out here is
   reading material, so there were no field styles at all. These are deliberately plain and wide,
   because the person filling this in is typing an address off a sign and is quite possibly doing
   it on a phone in a corridor. Same tokens as the rest of landing.css, so it needs no new colours.
   ───────────────────────────────────────────────────────────────────────────── */
.lp-field { margin-top: 1.15rem; }
.lp-field label {
  display: block; margin-bottom: .35rem;
  font-size: .9rem; font-weight: 600; color: var(--ink);
}
.lp-field input,
.lp-field select,
.lp-field textarea {
  width: 100%; min-height: 2.75rem;
  padding: .55rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 1rem;   /* 1rem: iOS zooms a smaller field on focus */
}
.lp-field input:focus,
.lp-field select:focus,
.lp-field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring);
}
/* `:user-invalid`, not `:invalid`: an empty required field is invalid from the moment the page
   loads, and must not be painted red before the person has had a chance to fill it in. */
.lp-field input:user-invalid { border-color: var(--danger-ink); }
.lp-hint { margin-top: .35rem; font-size: .85rem; color: var(--muted); }
.lp-mono { font-family: var(--lp-mono); font-size: .9em; }

/* ── Sign-in pages (Issue 231) ────────────────────────────────────────────────
   `/signin`, `/signup`, `/forgot-password`, `/reset-password`. One narrow card on the front
   door's own background, with the header and footer around it, because these are pages now and a
   page that hides the way back is a trap. Field styles are the ones above; only the card, the
   messages and the link row are new.
   ───────────────────────────────────────────────────────────────────────────── */
.lp-auth-wrap { max-width: 27rem; padding-top: 3rem; padding-bottom: 4rem; }
.lp-auth-card {
  padding: 1.9rem 1.7rem 2rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.lp-auth-card h1 { font-size: 1.45rem; line-height: 1.25; margin: 0; }
.lp-auth-lede { margin: .7rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.lp-auth-note { margin: 0 0 .4rem; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.lp-auth-card form { margin-top: 1.1rem; }
.lp-auth-btn { width: 100%; margin-top: 1.25rem; }
.lp-auth-btn + .lp-auth-btn { margin-top: .6rem; }

/* One message slot per form, empty until there is something to say, so nothing moves on load. */
.lp-auth-msg {
  margin: .9rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--danger-ink);
}
.lp-auth-msg:empty { display: none; }
.lp-auth-msg.is-ok { color: var(--brand-deep); }

/* Server-rendered, so it is there before any script runs: why a redirect sent you here. */
.lp-auth-notice {
  margin: 1rem 0 0; padding: .65rem .8rem;
  border-left: 3px solid var(--brand);
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: .9rem; line-height: 1.5;
}

.lp-auth-links {
  display: flex; flex-wrap: wrap; gap: .25rem 1.25rem;
  margin: 1.25rem 0 0; font-size: .9rem;
}
/* `display: flex` above beats the browser's rule for `[hidden]`, so the code step's "hide these"
   has to be said in the same language it is being argued with. */
.lp-auth-links[hidden] { display: none; }
.lp-auth-links a { color: var(--brand-deep); text-decoration: none; font-weight: 600; }
.lp-auth-links a:hover { text-decoration: underline; }

@media (max-width: 30rem) {
  .lp-auth-wrap { padding-top: 1.75rem; }
  .lp-auth-card { padding: 1.4rem 1.15rem 1.6rem; }
}