/* ═══════════════════════════════════════════════════════════════
   Flare — Linking people to support · public, person-facing site
   Plain semantic HTML + CSS only. No JS, no external resources.
   Mobile-first. WCAG 2.1 AA. Logical properties for RTL-readiness.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Flare brand (navy + orange, from the logo) ──────────────────
     The legacy --teal*/--terra* token NAMES are kept but REMAPPED to the
     new palette, so the whole app re-skins through the variables. New
     glossy components use the semantic --navy*/--accent* names below. */
  --navy: #16294C;  --navy-700: #1E3666;  --navy-300: #5B6B8C;
  --accent: #EE7A1E;  --accent-lite: #F4A63A;  --accent-deep: #C65A12;  --accent-deeper: #A8470C;
  --accent-050: #FDEFD9;  --accent-100: #FAD9AE;
  --cream: #FBF6EE;  --cream-2: #F4ECE0;
  --flare-glow: linear-gradient(180deg, var(--accent-lite) 0%, var(--accent) 52%, var(--accent-deep) 100%);

  /* Brand (legacy names → navy) */
  --teal:      #16294C;
  --teal-700:  #1E3666;
  --teal-800:  #16294C;
  --teal-900:  #0F1E3A;   /* crisis bar */
  --teal-050:  #E9EEF7;
  --teal-100:  #D5E0F0;
  --teal-line: #C7D3E8;
  --brand-dark: #16294C;

  /* Warm accent (legacy names → orange; primary "I need help" action) */
  --terra:     #EE7A1E;
  --terra-700: #A8470C;   /* deep enough for orange TEXT on cream/white (AA ≥4.5:1) */
  --terra-050: #FDEFD9;
  --terra-100: #FAD9AE;

  /* Status — never colour-alone; always paired with icon + text */
  --green:     #1F7A52;
  --green-700: #196844;
  --green-050: #E6F3EC;
  --green-100: #BFE0CD;
  --amber:     #8A6A1C;
  --amber-700: #6F5414;
  --amber-050: #F7EFD8;
  --amber-100: #E6D5A6;
  --red:       #b23128;
  --red-700:   #94271f;
  --red-050:   #fbe9e7;
  --red-100:   #f3cdc8;

  /* Match-quality aliases (results pills) */
  --strong: #1F7A52;  --strong-050: #E6F3EC;  --strong-line: #BFE0CD;
  --good:   #1E3666;  --good-050:   #E9EEF7;  --good-line:   #C7D3E8;
  --possible: #8A6A1C;  --possible-050: #F7EFD8;  --possible-line: #E6D5A6;

  /* Neutrals — warm cream surfaces */
  --bg:        #FBF6EE;
  --bg-sunk:   #F0E8DA;
  --surface:   #FFFFFF;
  --surface-2: #F7F1E7;
  --ink:       #16294C;
  --ink-2:     #45506B;   /* AA on white/cream */
  --ink-3:     #5E6880;   /* AA (≥4.5:1) for small text on cream + surface-2 */
  --line:      #E7DECF;
  --line-2:    #D8CCB6;

  --r-card: 16px;
  --r-md:   12px;
  --r-sm:   9px;
  --r-btn:  16px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(22,41,76,.06), 0 1px 1px rgba(22,41,76,.05);
  --sh-2: 0 2px 10px rgba(22,41,76,.07), 0 10px 30px rgba(22,41,76,.09);
  --sh-3: 0 10px 30px rgba(22,41,76,.13);
  --sh-orange: 0 8px 22px rgba(213,104,24,.30), 0 2px 6px rgba(168,71,12,.22);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Noto Sans Arabic", sans-serif;

  --maxw: 460px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-sunk);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 750; letter-spacing: -0.02em; line-height: 1.18; text-wrap: balance; }
h1 { font-size: 29px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--teal-800); }
ul { margin: 0; padding: 0; }
li { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 17px; }
img, svg { display: block; }

/* ── Accessibility ─────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}
.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-link {
  position: absolute; inset-inline-start: 8px; inset-block-start: -100px;
  z-index: 200; background: var(--teal-900); color: #fff; padding: 12px 18px;
  border-radius: var(--r-sm); font-weight: 700; text-decoration: none;
  transition: inset-block-start .15s ease;
}
.skip-link:focus { inset-block-start: 8px; }

/* ── Alerts ───────────────────────────────────────────────────────────────────
   RESTORED 2026-08-03. `.alert` was defined only in styles.css — the pre-redesign stylesheet that
   NO shipped page loads — and in admin-hub.css. So on the client every one of these rendered as an
   unstyled div, including the two that matter most:

     crisisCard()      "Help available right now" — the national crisis lines
     mountNoCoverage() shown to someone escaping violence when no verified service is reachable

   Both live, both looking like plain text, invisible to every test. Found while chasing a stray box
   on the membership form.

   Written in the CLIENT's tokens rather than ported from styles.css, so these match the current
   design system instead of reintroducing the old palette. --red is used for danger because that IS
   the client's danger colour; the Open Now work's argument against red is about *availability*
   states, not about genuine alerts, and this is the latter. */
.alert {
  border-radius: var(--r-md); padding: 14px 16px; border: 1.5px solid; margin-bottom: 14px;
  background: var(--surface-2); border-color: var(--line-2);
}
.alert h2, .alert h3 { margin-top: 0; }
.alert--danger { background: var(--red-050); border-color: var(--red-100); }
.alert--warn   { background: var(--amber-050); border-color: var(--amber-100); }
.alert--ok     { background: var(--green-050); border-color: var(--green-100); }
.alert--info   { background: var(--teal-050); border-color: var(--teal-100); }
/* Crisis blocks carry more weight than an ordinary alert: this is the one on screen when someone
   is in danger, so it gets a heavier border and a left rule that survives being skim-read. */
.alert--crisis { border-width: 2px; border-inline-start-width: 5px; }
.alert--crisis .btn-row { margin-top: 10px; }
.alert .list { margin: 8px 0 0; }

/* ── App shell (mobile phone column centred on canvas) ──────────
   Renamed .app → .shell so it does NOT collide with our inner #app
   view container (set to class "app fade-in" by HL.ui.mount). */
.shell {
  max-width: var(--maxw);
  margin-inline: auto;
  min-height: 100vh;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(31,42,43,.05), 0 24px 60px rgba(14,58,64,.10);
}

/* HL.ui.mount() sets class="fade-in" on #app on EVERY view mount, and this rule did not come
   across when client.css replaced styles.css — so the transition has been silently dead on the
   client app ever since, while the JS kept asking for it. Restored verbatim from styles.css,
   reduced-motion guard included. Found by burning down the check:css-names baseline, where it had
   been sitting as one of 386 entries: exactly the real breakage the noise was hiding. */
@media (prefers-reduced-motion: no-preference) {
  .fade-in { animation: fade .25s ease both; }
  @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ── 1 · Crisis bar (always on, calm not alarming) ─────────── */
.crisisbar {
  /* z-index ABOVE the modal + backdrop (300/320) ON PURPOSE. Quick Exit lives in this bar, and a
     phone has no Esc key — so when a modal is open the bar must stay on top and clickable, or a
     person being watched cannot leave the page. (security review 2026-08-06, P4: elementFromPoint
     over the button returned the modal before this.) */
  position: sticky; top: 0; z-index: 400;
  background: var(--teal-900); color: #eaf3f3;
  padding: 8px max(12px, env(safe-area-inset-left)) 8px;
}
.crisisbar-inner {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
}
.crisisbar .lead {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: #fff;
}
.crisisbar .nums { display: flex; flex-wrap: wrap; gap: 4px 6px; flex: 1; min-width: 160px; }
.callchip {
  display: inline-flex; align-items: center; gap: 6px;
  color: #eaf3f3; text-decoration: none; font-weight: 700; font-size: 13px;
  padding: 6px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  white-space: nowrap; min-height: 32px;
}
.callchip:hover { background: rgba(255,255,255,.18); }
.callchip strong { font-variant-numeric: tabular-nums; color: #fff; }
/* Gel-glass treatment (design: "Gel-Glass Buttons"): a top shine window + bevel
   over the AA-tuned base colour. Text/icons stay white, so the white sheen never
   hurts legibility (white-on-red ≈ 4.9:1, white-on-green ≈ 5.1:1 — still AA). */
.callchip.urgent, .callchip.more { position: relative; isolation: isolate; border-color: transparent; color: #fff; }
.callchip.urgent::before, .callchip.more::before {
  content: ""; position: absolute; left: 7%; right: 7%; top: 2px; height: 46%;
  border-radius: var(--r-pill); pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.04));
}
.callchip.urgent {   /* emergency red — Call 000 */
  background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.20) 100%), #c62828;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 1px rgba(0,0,0,.22), 0 1px 1px rgba(140,20,20,.42), 0 3px 9px rgba(198,40,40,.42);
}
.callchip.more {   /* green — supportive helplines */
  background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.20) 100%), #2e7d32;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 1px rgba(0,0,0,.22), 0 1px 1px rgba(20,80,30,.42), 0 3px 9px rgba(46,125,50,.4);
}
.callchip.urgent:hover, .callchip.more:hover { filter: brightness(1.06) saturate(1.04); }
.callchip.urgent:active, .callchip.more:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.15); }

/* Crisis "More help" dropdown — collapses the secondary lines so the bar stays
   Call 000 + More help at every width (CD header pass). Esc still quick-exits
   (a <details> doesn't close on Esc), preserving the DFV bail-fast behaviour. */
.lines { position: relative; display: inline-flex; }
.lines-trigger { list-style: none; cursor: pointer; }
.lines-trigger::-webkit-details-marker { display: none; }
.lines-trigger::marker { content: ""; }
.lines-trigger .lines-caret { width: 15px; height: 15px; opacity: .85; transition: transform .18s ease; }
.lines[open] .lines-trigger .lines-caret { transform: rotate(90deg); }
[dir="rtl"] .lines[open] .lines-trigger .lines-caret { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .lines-trigger .lines-caret { transition: none; } }
.lines-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0;
  width: min(280px, calc(100vw - 24px));
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--teal-line); border-radius: var(--r-md);
  box-shadow: var(--sh-3); padding: 6px; z-index: 130;
}
.lines-menu :focus-visible { outline-color: var(--teal); }
.lmi {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-decoration: none; color: var(--ink);
  padding: 10px 12px; border-radius: var(--r-sm); min-height: 46px;
  background: none; border: none; font: inherit; text-align: start; cursor: pointer;
}
.lmi:hover { background: var(--teal-050); }
.lmi-name { font-weight: 800; font-size: 14.5px; color: var(--teal-800); }
.lmi-num { font-weight: 700; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lmi-all { justify-content: flex-start; gap: 8px; color: var(--teal-800); font-weight: 800; font-size: 13.5px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; }
.lmi-all svg { width: 16px; height: 16px; flex: none; color: var(--teal); }
.quick-exit {
  display: inline-flex; align-items: center; gap: 7px; margin-inline-start: auto;
  background: #fff; color: var(--teal-900); text-decoration: none;
  font-weight: 800; font-size: 14px; padding: 9px 15px; border-radius: var(--r-pill);
  min-height: 40px; box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.quick-exit:hover { background: #f1f7f7; }
.quick-exit .esc {
  font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px;
  background: var(--bg-sunk); color: var(--ink-2); letter-spacing: .02em;
}
/* Mobile: stop the helpline chips from stacking raggedly beside the label.
   Row 1 = "In immediate danger?" + Quick exit (top-right, always reachable);
   row 2 = the call chips in a tidy left-aligned wrapping row. */
@media (max-width: 719px) {
  .crisisbar .nums { flex: 1 0 100%; min-width: 0; order: 2; }
  .crisisbar .quick-exit { order: 1; }
}

/* ── 2 · Language / interpreter bar ────────────────────────── */
.langbar {
  /* Not sticky: it would slide under the (sticky) crisis bar on scroll anyway, and
     the language/interpreter control is set-once — only the crisis bar + Quick exit
     need to stay pinned. */
  position: static;
  background: var(--teal-050); border-bottom: 1px solid var(--teal-line);
}
.langbar-inner {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 12px;
}
/* ── Flare brand lockup (shared design system — CD) ─────── */
.brand {
  --brand-mark-size: 44px;   /* 40–48 headers · 32 sidebar · 56 sign-in */
  --brand-name-size: 21px;   /* wordmark ≈ mark × 0.47 */
  --brand-gap: 12px;
  --brand-ink: #1f2937;      /* AA on white & #E9EEF7 */
  display: inline-flex; align-items: center; gap: var(--brand-gap);
  text-decoration: none; color: var(--brand-ink);
  border-radius: 12px; padding: 4px; margin: -4px;   /* hit-area + focus room */
  -webkit-tap-highlight-color: transparent;
}
.brand-mark { width: var(--brand-mark-size); height: var(--brand-mark-size); flex: none; display: block; transition: transform .18s ease; }
.brand-name { font: 800 var(--brand-name-size)/1 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: -.02em; white-space: nowrap; color: inherit; }
.brand .for { align-self: center; font: 800 11px/1 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: .045em; text-transform: uppercase; color: #16294C; background: #E9EEF7; border: 1px solid #C7D3E8; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand-text .name { font: 800 18px/1 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: -.02em; color: var(--brand-ink); }
.brand-text .sub { font: 650 12px/1 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: .02em; color: #16294C; }
.brand.is-sidebar { --brand-mark-size: 32px; }
.brand.is-signin { --brand-mark-size: 56px; --brand-name-size: 26px; }
.brand.is-signin .brand-text .name { font-size: 24px; }
.brand.is-signin .brand-text .sub { font-size: 14px; }
.brand:hover .brand-name, .brand:hover .brand-text .name { color: #16294C; }
.brand:hover .brand-mark { transform: scale(1.04); }
.brand:focus-visible { outline: 3px solid #16294C; outline-offset: 2px; }
.brand.on-dark { --brand-ink: #eaf3f3; }
.brand.on-dark .for { color: #eaf3f3; background: rgba(255,255,255,.12); border-color: rgba(234,243,243,.4); }
.brand.on-dark .brand-text .sub { color: #bfe0e0; }
.brand.on-dark:hover .brand-name, .brand.on-dark:hover .brand-text .name { color: #fff; }
.brand.on-dark:focus-visible { outline-color: #bfe0e0; }
@media (prefers-reduced-motion: reduce) { .brand-mark { transition: none; } .brand:hover .brand-mark { transform: none; } }
@media (max-width: 480px) { .brand .brand-name, .brand .for, .brand .brand-text { display: none; } }
/* keep the lockup left, language + interpreter right, in the client header row */
.langbar .brand { margin-inline-end: auto; }
.lang-select {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 13.5px; color: var(--teal-800);
}
.lang-select select {
  appearance: none; -webkit-appearance: none;
  background: #fff; border: 1px solid var(--teal-line); color: var(--teal-800);
  font-weight: 700; padding: 7px 30px 7px 11px; border-radius: var(--r-sm);
  min-height: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134950' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
[dir="rtl"] .lang-select select { background-position: left 9px center; padding: 7px 11px 7px 30px; }
.interp {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-2); font-weight: 600;
}
.interp a { color: var(--teal-800); font-weight: 800; text-decoration: none; white-space: nowrap; }
.interp a:hover { text-decoration: underline; }

/* ── Screen routing ─────────────────────────────────────────────
   The standalone design used CSS :target routing (.screen hidden unless
   targeted). In the wired SPA the router renders exactly ONE screen into
   #app, so the design's hide-by-default is removed — a rendered .screen
   is always visible. (Hash routing is handled by HL.app, not CSS.) */
.screen { display: block; scroll-margin-top: 8px; }

.wrap { padding: 18px 16px 30px; }
.stack > * + * { margin-top: 14px; }
.stack-lg > * + * { margin-top: 20px; }
.section-gap { margin-top: 26px; }

/* Back link row */
.topnav {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px 4px;
}
/* Founder feedback 2026-07-19: "very unobvious and unintuitive — I'm an advanced power user and
 * often can't find it straight away." Three things compounded:
 *   1. no affordance — no border or background, so it rendered as body text, not a control;
 *   2. --ink-2 deliberately muted it, so it receded further;
 *   3. it sits directly beneath a langbar of BORDERED PILLS, so the eye reads those as "the
 *      controls" and skips a bare text link underneath them.
 * Fix is (3)-led: give it the same pill vocabulary as the controls above it, so it joins that
 * visual group instead of disappearing under it. Styling only — all three topnav implementations
 * (views-user.js, legal.js, terms.js) share this class, so one rule fixes every screen and no
 * new i18n strings are introduced. */
.backlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none;
  padding: 0 16px; min-height: 44px;
  background: var(--surface);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
  transition: background .15s ease, border-color .15s ease;
}
.backlink:hover { background: var(--surface-2); border-color: var(--ink-2); }
.backlink:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
[dir="rtl"] .backlink svg { transform: scaleX(-1); }

/* ── Smart-search fold (browse page) ───────────────────────────
   Collapsed: one slim row in the card vocabulary, sitting under the keyword search.
   Open: the shared smartSearchPanel card renders inside. The chevron flips as the
   only state cue — no colour change, so it stays quiet next to the primary search. */
.smart-fold { border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); }
.smart-fold-s {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; min-height: 48px;
  font-weight: 700; font-size: 15px; color: var(--ink-2);
  cursor: pointer; list-style: none; border-radius: var(--r-md);
}
.smart-fold-s::-webkit-details-marker { display: none; }
.smart-fold-s:hover { background: var(--surface-2); }
.smart-fold-s:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.smart-fold-s > span { flex: 1; }
.smart-fold-s .chev { transition: transform .15s ease; }
.smart-fold[open] > .smart-fold-s .chev { transform: rotate(90deg); }
.smart-fold-body { padding: 0 12px 12px; }
.smart-fold-body > .card { border: none; box-shadow: none; padding: 4px 4px 0; }
/* The shared panel's own heading would repeat the summary line sitting directly above it. */
.smart-fold-body > .card > h2 { display: none; }
@media (prefers-reduced-motion: reduce) { .smart-fold-s .chev { transition: none; } }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1.5px solid transparent; border-radius: var(--r-md);
  font-weight: 750; font-size: 17px; letter-spacing: -0.01em;
  padding: 0 20px; min-height: 52px; text-decoration: none; text-align: center;
  transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
/* Busy/disabled (e.g. "Finding services…" while the note is read) — also blocks double-taps. */
.btn[aria-disabled="true"] { opacity: .65; cursor: progress; pointer-events: none; }
.btn-block { display: flex; width: 100%; }
.btn-lg { min-height: 58px; font-size: 18px; }
.btn-primary { background: var(--terra); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--terra-700); }
.btn-teal { background: var(--teal); color: #fff; box-shadow: var(--sh-1); }
.btn-teal:hover { background: var(--teal-700); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-quiet { background: transparent; color: var(--ink-2); min-height: 48px; }
.btn-quiet:hover { background: rgba(31,42,43,.05); }
/* greyed/disabled flare on a directory listing — not on Flare yet */
.btn-greyed { background: var(--bg-sunk); color: var(--ink-3); border-color: var(--line-2); cursor: not-allowed; font-weight: 750; }
.btn-greyed:hover { background: var(--bg-sunk); }
.btn-greyed svg { opacity: .65; }
.btn-danger { background: var(--red-050); color: var(--red-700); border-color: var(--red-100); }
.btn-danger:hover { background: var(--red-100); }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--sh-1);
}
.card-pad { padding: 18px; }
.eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ── Pills / status (icon + text + dot — never colour alone) ── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 750; line-height: 1.1; white-space: nowrap;
}
.pill svg { width: 15px; height: 15px; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pill-green { background: var(--green-050); color: var(--green-700); }
.pill-amber { background: var(--amber-050); color: var(--amber-700); }
.pill-red   { background: var(--red-050);   color: var(--red-700); }
.pill-teal  { background: var(--teal-050);  color: var(--teal-800); }
.pill-grey  { background: var(--bg-sunk);   color: var(--ink-2); }
.dot-green { background: var(--green); } .dot-amber { background: var(--amber); }
.dot-red { background: var(--red); } .dot-teal { background: var(--teal); }

/* ── Text helpers ──────────────────────────────────────────── */
.t-sec { color: var(--ink-2); }
.t-muted { color: var(--ink-3); }
.t-sm { font-size: 14.5px; }
.lede { font-size: 18px; color: var(--ink-2); line-height: 1.55; }
.num { font-variant-numeric: tabular-nums; }
.divider { height: 1px; background: var(--line); border: 0; margin: 16px 0; }

/* ── Icon helpers ──────────────────────────────────────────── */
.ic { width: 24px; height: 24px; flex: none; }
.ic-sm { width: 18px; height: 18px; }
.ic-lg { width: 28px; height: 28px; }
.iconwrap {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.iw-teal { background: var(--teal-050); color: var(--teal); }
.iw-terra { background: var(--terra-050); color: var(--terra-700); }
.iw-green { background: var(--green-050); color: var(--green-700); }

/* ── HERO ──────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 30px 18px 26px; }
.hero-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.hero-inner { position: relative; z-index: 1; }
.hero h1 { font-size: 31px; }
.hero .lede { margin-top: 10px; max-width: 22ch; }

/* ── Big choice cards (Home) ───────────────────────────────── */
.choice {
  display: flex; align-items: center; gap: 15px;
  width: 100%; text-align: start; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-card); padding: 18px; box-shadow: var(--sh-1);
  transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.choice:hover { box-shadow: var(--sh-2); }
.choice:active { transform: translateY(1px); }
.choice.primary { border-color: var(--terra-100); background: linear-gradient(180deg,#fff, var(--terra-050)); }
.choice .ctext { flex: 1; min-width: 0; }
.choice .ctitle { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.choice .csub { display: block; color: var(--ink-2); font-size: 15px; margin-top: 3px; }
.choice .chev { color: var(--ink-3); flex: none; }
[dir="rtl"] .choice .chev { transform: scaleX(-1); }

/* ── "In a hurry" panel ────────────────────────────────────── */
.hurry {
  background: var(--teal-800); color: #eaf3f3; border-radius: var(--r-card);
  padding: 18px; box-shadow: var(--sh-2);
}
.hurry h2 { color: #fff; font-size: 19px; }
.hurry-grid { display: grid; gap: 9px; margin-top: 13px; }
.hurry-call {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md); padding: 13px 14px; color: #fff; min-height: 56px;
}
.hurry-call:hover { background: rgba(255,255,255,.15); }
.hurry-call .hc-name { font-weight: 800; font-size: 16px; }
.hurry-call .hc-sub { font-size: 13px; color: #cfe3e3; }
.hurry-call .hc-num { margin-inline-start: auto; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 16px; }

/* ── How it works (3 steps) ────────────────────────────────── */
.steps { display: grid; gap: 12px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step-n {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--teal-050); color: var(--teal-800);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; border: 1px solid var(--teal-line);
}
.step h3 { font-size: 16.5px; }
.step p { font-size: 15px; color: var(--ink-2); margin-top: 2px; }

/* ── Progress (questionnaire) ──────────────────────────────── */
.progress-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.progress-head .pct { font-size: 14px; font-weight: 800; color: var(--teal-800); }
.progress-track { height: 8px; border-radius: 999px; background: var(--bg-sunk); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: var(--teal); transition: width .3s ease; }

/* ── Option list (big tap targets) ─────────────────────────── */
.optlist { display: grid; gap: 11px; }
.opt {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: start; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-2);
  border-radius: var(--r-md); padding: 15px 16px; min-height: 64px;
  transition: border-color .12s ease, background .12s ease;
}
.opt:hover { border-color: var(--teal); background: var(--teal-050); }
.opt .opt-ic { color: var(--teal); flex: none; }
.opt .opt-t { flex: 1; font-weight: 700; font-size: 16.5px; }
.opt .opt-sub { display: block; font-weight: 500; font-size: 13.5px; color: var(--ink-3); margin-top: 1px; }
.opt .chev { color: var(--ink-3); flex: none; }
[dir="rtl"] .opt .chev { transform: scaleX(-1); }
.opt.danger:hover { border-color: var(--red); background: var(--red-050); }
.opt.danger .opt-ic { color: var(--red-700); }
/* selected state for tap-to-select / toggle rows (step 3 "I'm…", pet/ATSI/LGBTQIA+) */
.opt.opt-selected { border-color: var(--teal); background: var(--teal-050); box-shadow: inset 0 0 0 1px var(--teal); }
.opt.opt-selected .chev { color: var(--teal); }

/* ── Form fields ───────────────────────────────────────────── */
.field { display: block; }
.field > .label { display: block; font-weight: 750; font-size: 16px; margin-bottom: 6px; }
.field .hint { font-size: 13.5px; color: var(--ink-3); margin-bottom: 8px; }
.field .optional { font-weight: 600; color: var(--ink-3); font-size: 13.5px; }
.input, .textarea, .select-box {
  width: 100%; background: var(--surface); border: 1.5px solid var(--line-2);
  border-radius: var(--r-md); padding: 13px 14px; color: var(--ink);
  min-height: 52px; line-height: 1.4;
}
.textarea { min-height: 110px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .textarea:focus, .select-box:focus { border-color: var(--teal); outline: 3px solid var(--teal-050); outline-offset: 0; }
.charhint { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

/* postcode -> suburb picker (live via /api/suburbs, bundled fallback) */
.suburbfield input {
  width: 100%; background: var(--surface); border: 1.5px solid var(--line-2);
  border-radius: var(--r-md); padding: 13px 14px; color: var(--ink);
  min-height: 52px; line-height: 1.4;
}
.suburbfield input::placeholder { color: var(--ink-3); }
.suburbfield input:focus, .suburbfield select:focus {
  border-color: var(--teal); outline: 3px solid var(--teal-050); outline-offset: 0;
}
.suburbfield select {
  width: 100%; background: var(--surface); border: 1.5px solid var(--line-2);
  border-radius: var(--r-md); padding: 13px 14px; color: var(--ink);
  min-height: 52px; margin-top: 4px;
}
.suburbfield__sub { margin-top: 8px; }
.suburbfield__sub .small { font-size: 13.5px; }
.suburbfield__sub .muted { color: var(--ink-3); }

/* chip choice group (CSS radio) */
.chipset { display: flex; flex-wrap: wrap; gap: 9px; }
.chip-radio { position: absolute; opacity: 0; pointer-events: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 15px; border-radius: var(--r-pill); min-height: 48px;
  border: 1.5px solid var(--line-2); background: var(--surface);
  font-weight: 700; font-size: 15px; color: var(--ink-2); cursor: pointer;
}
.chip:hover { border-color: var(--teal); }
.chip-radio:checked + .chip { border-color: var(--teal); background: var(--teal-050); color: var(--teal-800); }
.chip-radio:focus-visible + .chip { outline: 3px solid var(--teal); outline-offset: 2px; }
.chip svg { color: var(--teal); }

/* ── Danger banner ─────────────────────────────────────────── */
.danger-banner {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--amber-050); border: 1.5px solid var(--amber-100);
  border-radius: var(--r-card); padding: 15px 16px;
}
.danger-banner .db-ic { color: var(--amber-700); flex: none; margin-top: 1px; }
.danger-banner h3 { font-size: 16px; color: var(--amber-700); }
.danger-banner p { font-size: 14.5px; color: var(--ink-2); margin-top: 3px; }
.danger-banner .db-calls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.db-call {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  background: #fff; border: 1.5px solid var(--amber-100); color: var(--amber-700);
  font-weight: 800; padding: 8px 13px; border-radius: var(--r-pill); min-height: 42px; font-size: 14.5px;
}
.db-call:hover { background: var(--amber-050); }

/* Trusted-lines strip: styled by results-redesign.css (.rp-lines/.helpline/.hl-*) since
   the Phase B pass (2026-07-18) — the interim 07-17 styles were superseded and removed. */

/* Verified trust row on directory cards (2026-07-18) */
.m-verifrow { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.m-verifrow .v-ago { font-size: 13px; color: var(--ink-3); }
.m-verifrow .v-ch { color: var(--teal-800); opacity: .75; }

/* Wizard follow-up questions + distance slider (Phase C, 2026-07-18) */
.fu-card { border-color: var(--teal-100); background: var(--teal-050); }
.fu-intro { display: flex; align-items: flex-start; gap: 7px; }
.fu-q { margin-top: 4px; }
.fu-label { font-weight: 700; font-size: 14.5px; color: var(--ink); margin-bottom: 7px; }
.fu-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fu-chip {
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-2);
  font-size: 14px; font-weight: 600; padding: 8px 13px; border-radius: var(--r-pill);
  min-height: 40px; cursor: pointer;
}
.fu-chip:hover { border-color: var(--teal); }
.fu-chip.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.fu-chip:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.dist-val { color: var(--teal-800); font-size: 15px; }
.dist-range { width: 100%; margin-top: 10px; accent-color: var(--teal); min-height: 32px; }

/* ── Match card ────────────────────────────────────────────── */
.match { padding: 18px; display: flex; flex-direction: column; height: 100%;   /* column: content grows, actions pin to base */
  position: relative; isolation: isolate;
  animation: surface .5s cubic-bezier(.22,.61,.36,1) both; }
/* subtle gloss sheen + gentle entrance as the contact card surfaces (CD: Flare App) */
.match::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 26%),
              radial-gradient(120% 80% at 0% 0%, rgba(244,166,58,.07), transparent 60%); }
.match > * { position: relative; z-index: 1; }
.results-grid .match:nth-child(2) { animation-delay: .07s; }
.results-grid .match:nth-child(3) { animation-delay: .14s; }
.results-grid .match:nth-child(4) { animation-delay: .21s; }
.results-grid .match:nth-child(5) { animation-delay: .28s; }
@keyframes surface { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .match { animation: none; } }
/* light-sweep flourish — a soft diagonal highlight rides across once as each card surfaces (CD: Flare App) */
.match .sweep { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: inherit; }
.match .sweep::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -60%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg); opacity: 0; }
.results-grid .match .sweep::after { animation: sweep 1.1s ease .30s 1; }
.results-grid .match:nth-child(2) .sweep::after { animation-delay: .38s; }
.results-grid .match:nth-child(3) .sweep::after { animation-delay: .46s; }
.results-grid .match:nth-child(4) .sweep::after { animation-delay: .54s; }
.results-grid .match:nth-child(5) .sweep::after { animation-delay: .62s; }
@keyframes sweep { 0% { left: -60%; opacity: 0; } 12% { opacity: 1; } 60%, 100% { left: 120%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .match .sweep { display: none; } }
.match-head { display: flex; align-items: flex-start; gap: 12px; }
.match-head > .m-headmain { flex: 1; min-width: 0; }   /* long names wrap, don't overflow */
.match-head .pill { flex: none; }
.match-head .m-name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; overflow-wrap: anywhere; }
.match-head .m-meta { font-size: 14px; color: var(--ink-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.match-head .m-meta svg { flex: none; }
.match-head .m-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
/* "why this match" reasons on a directory card */
.m-reasons { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 11px; }
.m-reason { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 650; color: var(--teal-800); }
.m-reason svg { width: 14px; height: 14px; flex: none; color: var(--teal); }
.why {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 13px;
  background: var(--teal-050); border-radius: var(--r-md); padding: 12px 13px;
}
.why svg { color: var(--teal); flex: none; margin-top: 1px; }
.why p { font-size: 14.5px; color: var(--teal-800); }
.why strong { font-weight: 800; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.tag { font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--bg-sunk); padding: 5px 11px; border-radius: var(--r-pill); }

/* ── Multi-need (Layout B) ── "You asked for" chips + per-card ✓/✗ coverage strip.
   Honest: every item is icon + text label, never colour-alone; a miss is calm grey, not red. */
.asked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.asked .a-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.asked .need-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--teal-050); border: 1px solid var(--teal-line); color: var(--teal-800); font-size: 13.5px; font-weight: 700; padding: 6px 12px; border-radius: var(--r-pill); }
.asked .need-chip svg { width: 15px; height: 15px; color: var(--teal); flex: none; }

.covstrip { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.cs-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 11px 5px 7px; border-radius: var(--r-pill); }
.cs-item .cs-badge { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cs-item .ic-cs { width: 13px; height: 13px; }
.cs-item.yes { background: var(--green-050); color: var(--green-700); }
.cs-item.yes .cs-badge { background: var(--green-100); }
.cs-item.no { background: var(--bg-sunk); color: var(--ink-3); }
.cs-item.no .cs-badge { background: #e3dccd; }
/* one-line description on a registered-charity card */
.m-desc { font-size: 14.5px; color: var(--ink-2); margin-top: 11px; line-height: 1.5; }
/* actions pinned to the card base so rows line up across the grid */
.match .stack { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 16px; }
.match .stack > * + * { margin-top: 0; }   /* override the global .stack spacing; gap handles it */
.match .stack .btn { min-height: 48px; font-size: 15.5px; }
/* "phone being confirmed" — reads as a control, isn't focusable */
.m-pending { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--r-md); background: var(--surface-2); border: 1.5px dashed var(--line-2); color: var(--ink-3); font-weight: 700; font-size: 14.5px; }
.m-pending svg { width: 17px; height: 17px; flex: none; }
/* registered-charity directory section header */
.charity-head { margin: 4px 0 18px; padding-top: 6px; }
.charity-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-800); background: var(--teal-050); border: 1px solid var(--teal-line); padding: 6px 11px; border-radius: var(--r-pill); }
.charity-eyebrow svg { width: 15px; height: 15px; color: var(--teal); flex: none; }
.charity-title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--teal-900); margin: 13px 0 0; }
.charity-intro { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin: 7px 0 0; max-width: 62ch; }
@media (max-width: 719px) { .charity-title { font-size: 19px; } .charity-intro { font-size: 14.5px; } }

/* ── Burn-time bar (serious) ───────────────────────────────── */
.flarecard { padding: 18px; border: 1.5px solid var(--terra-100); }
.burn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.burn-time { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.burn-time .unit { font-size: 15px; font-weight: 700; color: var(--ink-3); }
.burn-track {
  position: relative; height: 12px; border-radius: 999px; margin-top: 12px;
  background: var(--bg-sunk); overflow: hidden;
  border: 1px solid var(--line-2);
}
.burn-fill {
  height: 100%; border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal) 55%, var(--amber) 100%);
}
.burn-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.livedot { width: 9px; height: 9px; border-radius: 50%; background: var(--terra); flex: none; box-shadow: 0 0 0 4px var(--terra-050); }
@media (prefers-reduced-motion: no-preference) {
  .livedot { animation: pulse 2.4s ease-in-out infinite; }
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px var(--terra-050); } 50% { box-shadow: 0 0 0 6px rgba(194,87,26,.10); } }

/* ── Offer / thread rows ───────────────────────────────────── */
.offer { display: flex; gap: 13px; align-items: flex-start; padding: 15px; }
.offer .o-name { font-weight: 800; font-size: 16px; }
.offer .o-msg { font-size: 14.5px; color: var(--ink-2); margin-top: 3px; }
.thread { display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.bubble.them { background: var(--surface-2); border: 1px solid var(--line); border-end-start-radius: 5px; align-self: flex-start; }
.bubble.me { background: var(--teal); color: #fff; border-end-end-radius: 5px; align-self: flex-end; }
.bubble .who { font-size: 12px; font-weight: 800; color: var(--ink-3); margin-bottom: 3px; }

/* ── Switch (CSS checkbox) ─────────────────────────────────── */
.switchrow { display: flex; align-items: center; gap: 14px; }
.switchrow .sr-text { flex: 1; min-width: 0; }
.switchrow .sr-title { font-weight: 750; font-size: 16px; }
.switchrow .sr-sub { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.switch { position: relative; flex: none; width: 56px; height: 32px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0; background: var(--line-2); border-radius: 999px;
  transition: background .18s ease;
}
.switch .knob {
  position: absolute; top: 3px; inset-inline-start: 3px; width: 26px; height: 26px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s ease;
}
.switch input:checked ~ .track { background: var(--teal); }
.switch input:checked ~ .knob { transform: translateX(24px); }
[dir="rtl"] .switch input:checked ~ .knob { transform: translateX(-24px); }
.switch input:focus-visible ~ .track { outline: 3px solid var(--teal); outline-offset: 2px; }

/* ── Privacy area rows ─────────────────────────────────────── */
.privacy-card { background: var(--surface-2); }
.code-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.5px dashed var(--line-2); border-radius: var(--r-md); padding: 14px;
}
.code-row .code { font-size: 22px; font-weight: 800; letter-spacing: .18em; font-variant-numeric: tabular-nums; color: var(--teal-800); }
.list-action {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: start;
  background: none; border: 0; border-top: 1px solid var(--line); padding: 16px 2px; min-height: 60px; color: var(--ink);
}
.list-action:first-of-type { border-top: 0; }
.list-action:hover { background: rgba(31,42,43,.03); }
.list-action .la-t { flex: 1; font-weight: 700; font-size: 16px; }
.list-action .la-sub { display: block; font-weight: 500; font-size: 13.5px; color: var(--ink-3); margin-top: 1px; }
.list-action.danger .la-t { color: var(--red-700); }
.list-action.danger svg { color: var(--red-700); }

/* ── Browse list ───────────────────────────────────────────── */
.svc { display: flex; gap: 14px; align-items: flex-start; padding: 16px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-1); }
.svc:hover { background: var(--surface-2); border-color: var(--line-2); }
.svc .s-name { font-weight: 800; font-size: 16.5px; }
.svc .s-meta { font-size: 14px; color: var(--ink-3); margin-top: 2px; }
/* WRAP, don't scroll (2026-07-19). This was a hidden-scrollbar horizontal scroller — tolerable
 * with 7 chips, but when the set grew to the full 22 canonical categories it silently hid more
 * than half of them with no affordance that more existed (scrollbar hidden!). A wrapped cloud
 * costs ~3 rows on mobile and makes every category visible; a control nobody can see is a
 * category nobody can browse. */
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 4px; }
.filter-chip {
  white-space: nowrap; padding: 9px 15px; border-radius: var(--r-pill); min-height: 44px;
  border: 1.5px solid var(--line-2); background: var(--surface); font-weight: 700; font-size: 14.5px; color: var(--ink-2);
  display: inline-flex; align-items: center; cursor: pointer;
}
.filter-chip.on { border-color: var(--teal); background: var(--teal-050); color: var(--teal-800); }

/* ── Footer ────────────────────────────────────────────────── */
.footer { background: var(--surface-2); border-top: 1px solid var(--line); padding: 26px 16px 34px; margin-top: 8px; }
.footer-links a { font-weight: 700; font-size: 15px; color: var(--ink-2); text-decoration: none; padding: 4px 0; min-height: 36px; display: inline-flex; align-items: center; }
.footer-links a:hover { color: var(--teal-800); text-decoration: underline; }
/* Categorised columns: vertical link lists under small headings; stack on narrow screens. */
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; max-width: 760px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col-h { font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; gap: 20px; } }
.footer .fineprint { font-size: 13px; color: var(--ink-3); margin-top: 20px; line-height: 1.5; }

/* ── Prose (About / Privacy) ───────────────────────────────── */
.prose p { font-size: 16.5px; color: var(--ink-2); line-height: 1.6; }
.prose p + p { margin-top: 13px; }
.prose h2 { margin-top: 26px; }
.prose h2:first-child { margin-top: 0; }
.prose ul.bullets { margin-top: 10px; display: grid; gap: 9px; }
.prose ul.bullets li { display: flex; gap: 10px; font-size: 16px; color: var(--ink-2); }
.prose ul.bullets svg { color: var(--teal); flex: none; margin-top: 3px; }

/* Legal pages — bold-label bullet lists ("<strong>Label.</strong> description…").
   Real disc bullets that flow inline (overrides the global ul/li reset); NOT .bullets. */
.prose ul.legal-list { margin: 12px 0 0; padding-left: 22px; display: block; }
.prose ul.legal-list li { display: list-item; list-style: disc outside; margin-top: 10px; font-size: 16px; color: var(--ink-2); line-height: 1.6; }
.prose ul.legal-list li::marker { color: var(--teal); }

/* Card-collection helpers: a vertical stack on mobile, a grid on desktop. */
.results-grid > * + * { margin-top: 16px; }
.svc-list { display: grid; gap: 12px; }

/* ── Responsive: fill the screen on tablet/desktop ───────────────────
   Matches the previous model's ~1080px layout. The frame + crisis/language
   bars widen to span the screen, and content collections lay out in grids so
   it never reads as a narrow "pamphlet". Reading- and form-heavy screens keep
   a comfortable measure, centred within the wide frame. */
@media (min-width: 720px) {
  :root { --maxw: 1080px; }

  .wrap { max-width: 760px; margin-inline: auto; padding: 28px 24px 48px; }
  .wrap.wrap--wide { max-width: 1080px; }

  .home-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .home-two > * { margin-top: 0 !important; }
  .hurry-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }   /* same-row cards equal height */
  .results-grid > * + * { margin-top: 0; }
  .svc-list { grid-template-columns: 1fr 1fr; }
}

/* ── Wired-app tweaks (not in the standalone design) ───────────────
   The static design used <a> for quick-exit / "More help"; in the app
   they're <button>s wired to JS (clear-storage exit, crisis modal), so
   reset the UA button border the design's classes don't expect.
   (.callchip already sets its own border, so it needs no reset.) */
button.quick-exit { border: 0; }

/* Demo-sandbox marker (only injected in demo mode by data-adapter.js): a slim
   full-width strip above the chrome so sample data is never mistaken for real. */
.demo-flag {
  background: var(--ink); color: #fff; text-align: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em; padding: 7px 12px;
}

/* WCAG AA fix: the design's terra .btn-primary (white on #c2571a) measures 4.49:1
   — a hair under the 4.5:1 minimum. Darken just this button's background to pass
   (~4.7:1); keeps the warm hue. (Hover stays the design's --terra-700.) */
.btn-primary { background: #bd5316; }

/* ── Shared-component compatibility ─────────────────────────────────
   HL.ui's modal + toast + crisis resources (shared with org/admin) use older
   utility/button classes. The org/admin portals style them via their own CSS;
   map them onto the new design here so they render correctly on the client.
   (This fixes the crisis "More help" modal, which otherwise dumped unstyled.) */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 300; padding: 18px;
  background: rgba(14, 58, 64, .45);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-card); box-shadow: var(--sh-3);
  max-width: 460px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 20px;
}
#toast-root {
  position: fixed; inset-block-end: 18px; inset-inline: 0; z-index: 320;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 14px; box-shadow: var(--sh-2); transition: opacity .3s;
  max-width: calc(100vw - 36px); pointer-events: auto;
}
.toast--ok { background: var(--green-700); }
.toast--danger { background: var(--red-700); }

.row { display: flex; gap: 10px; align-items: flex-start; }
.row.spread { justify-content: space-between; align-items: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.small { font-size: 13.5px; }
.muted { color: var(--ink-3); }

/* old (double-dash) button variants layered on the new .btn base */
.btn--sm { min-height: 38px; font-size: 13.5px; padding: 0 12px; border-radius: var(--r-sm); }
.btn--brand, .btn--primary { background: var(--teal); color: #fff; border-color: transparent; }
.btn--brand:hover, .btn--primary:hover { background: var(--teal-700); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--red-050); color: var(--red-700); border-color: var(--red-100); }

/* Crisis "More help" modal: make call buttons feel like buttons — uniform width,
   centred, never wrapping, tidily right-aligned. */
.modal .list { display: grid; gap: 14px; }
.modal .list li > .row.spread { gap: 14px; align-items: center; }
.modal .list .btn { min-width: 152px; justify-content: center; white-space: nowrap; flex: none; }

/* "I need help" urgency cue (eyebrow above the title on the primary choice). */
.choice .ctag {
  display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--terra-700); margin-bottom: 3px;
}
.choice.primary { border-color: var(--terra-100); background: linear-gradient(180deg, #fff, var(--terra-050)); }

/* Hero value line ("Free & confidential · …"). */
.hero-points { margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--teal-800); }

/* Draft-translation notice under the language bar (P3-b §21): shown only when a
   non-English draft language is active. Numbers stay correct; use 131 450. */
.langbar-draft {
  background: var(--amber-050); border-bottom: 1px solid var(--amber-100);
  color: var(--amber-700); font-size: 12.5px; font-weight: 600;
  padding: 7px 12px;
}
.langbar-draft-inner { max-width: var(--maxw); margin-inline: auto; }

/* ════════════ HOME (revised) — image hero + consolidated helplines ════════════
   Ported from the "Flare Home" CD design. Appended last so the revised
   .hero / .choice / .choice.primary override the earlier home rules. The old
   home classes (.home-two/.hurry/.hurry-call) are now unused. */
.hero { padding: 22px 16px 6px; }
.hero-grid { display: flex; flex-direction: column; gap: 18px; }
.hero-media { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--teal-050); box-shadow: var(--sh-1); border: 1px solid var(--line); }
.hero-media img { width: 100%; height: 200px; object-fit: cover; object-position: center 30%; }
.hero h1 { font-size: 31px; }
.hero .lede { margin-top: 11px; font-size: 17px; color: var(--ink-2); line-height: 1.55; max-width: 56ch; }
.hero .lede strong { color: var(--ink); font-weight: 750; }
.valueline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.value-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--teal-050); color: var(--teal-800); border: 1px solid var(--teal-line); font-size: 13.5px; font-weight: 700; padding: 7px 13px; border-radius: var(--r-pill); }
.value-pill svg { color: var(--teal); width: 16px; height: 16px; }

.choices { padding: 20px 16px 6px; }
.choices-grid { display: grid; gap: 14px; }
.choice { display: flex; align-items: flex-start; gap: 15px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-card); padding: 20px; box-shadow: var(--sh-1); transition: box-shadow .15s ease, transform .08s ease; }
.choice:hover { box-shadow: var(--sh-2); }
.choice:active { transform: translateY(1px); }
.choice .ctext { flex: 1; min-width: 0; }
.choice .ctitle { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.choice .csub { display: block; font-size: 15px; margin-top: 6px; line-height: 1.45; }
.choice .chev { color: var(--ink-3); margin-top: 4px; flex: none; }
/* "I need help" — glossy orange flare button (CD: Flare App) */
.choice.primary { position: relative; isolation: isolate; overflow: hidden; border: 0; color: #fff;
  background: var(--flare-glow);
  box-shadow: var(--sh-orange), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -10px 22px rgba(150,60,8,.34); }
.choice.primary::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.06) 70%, transparent);
  border-radius: var(--r-card) var(--r-card) 60% 60% / var(--r-card) var(--r-card) 26px 26px; }
.choice.primary > * { position: relative; z-index: 1; }
.choice.primary .c-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 7px; text-shadow: 0 1px 2px rgba(120,50,6,.55); }
.choice.primary .c-eyebrow svg { width: 14px; height: 14px; }
.choice.primary .ctitle { text-shadow: 0 1px 2px rgba(120,50,6,.5), 0 1px 0 rgba(150,70,10,.4); }
.choice.primary .csub { color: rgba(255,255,255,.97); text-shadow: 0 1px 2px rgba(120,50,6,.6); }
.choice.primary .chev { color: #fff; opacity: .92; filter: drop-shadow(0 1px 1px rgba(120,50,6,.5)); }
.choice.primary:hover { transform: translateY(-1px); filter: saturate(1.05) brightness(1.02); box-shadow: 0 12px 28px rgba(213,104,24,.36), 0 3px 8px rgba(168,71,12,.26), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -10px 22px rgba(150,60,8,.34); }
.choice.primary:active { transform: translateY(1px) scale(.995); box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -6px 16px rgba(150,60,8,.4); }
.choice.primary:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.choice.org .ctitle { color: var(--teal-800); }
.choice.org .csub { color: var(--ink-2); }
/* Navy gel icon — quietly mirrors the orange primary's gloss so the pair reads as a set. */
.choice.org .iconwrap { position: relative; isolation: isolate; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.18) 100%), var(--teal);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 1px rgba(0,0,0,.2), 0 2px 6px rgba(42,74,134,.3); }
.choice.org .iconwrap::before { content: ""; position: absolute; left: 8%; right: 8%; top: 2px; height: 45%; pointer-events: none;
  border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.04)); }
.iw-terra-on { background: rgba(255,255,255,.20); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(120,50,6,.3); }

.helplines { padding: 22px 16px; scroll-margin-top: 96px; }
.helplines-panel { background: var(--teal-800); color: #eaf3f3; border-radius: var(--r-card); padding: 22px 20px; box-shadow: var(--sh-2); }
.helplines-panel .hp-head { display: flex; align-items: center; gap: 11px; }
.helplines-panel .hp-head .iconwrap { background: rgba(255,255,255,.12); color: #fff; width: 46px; height: 46px; }
.helplines-panel h2 { color: #fff; font-size: 21px; }
.helplines-panel .hp-intro { font-size: 14.5px; color: #cfe3e3; margin-top: 9px; }
.helpline-grid { display: grid; gap: 9px; margin-top: 16px; }
.helpline { display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-md); padding: 12px 13px; }
.helpline .hl-ic { color: #bcd9d9; flex: none; }
.helpline .hl-text { flex: 1; min-width: 0; }
.helpline .hl-name { font-weight: 800; font-size: 15.5px; color: #fff; }
.helpline .hl-sub { font-size: 12.5px; color: #cfe3e3; line-height: 1.4; margin-top: 2px; }
.callbtn { flex: none; width: 178px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: var(--teal-900); text-decoration: none; font-weight: 800; font-size: 14.5px; white-space: nowrap; font-variant-numeric: tabular-nums; padding: 0 14px; min-height: 46px; border-radius: var(--r-sm); border: 1.5px solid #fff; }
.callbtn:hover { background: #eaf3f3; }
.callbtn svg { width: 17px; height: 17px; flex: none; }
.callbtn.emergency { background: var(--red); border-color: var(--red); color: #fff; }
.callbtn.emergency:hover { background: var(--red-700); }
.callbtn.link { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.callbtn.link:hover { background: rgba(255,255,255,.14); }

.how { padding: 6px 16px 10px; }
.how-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-1); padding: 22px 20px; }
.how .step-n { width: 38px; height: 38px; border-radius: 50%; background: var(--teal-050); color: var(--teal-800); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; border: 1px solid var(--teal-line); flex: none; }

/* Returning? Resume with a code (home) */
/* ── Logo band + resume disclosure (home top) ── */
.logoband { background: var(--surface); border-block-end: 1px solid var(--line); }
.logoband-inner { max-width: var(--maxw); margin-inline: auto; padding: 14px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.logoband .brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { height: 64px; width: auto; display: block; }
@media (min-width: 720px) { .brand-logo { height: 88px; } }

.resume { position: relative; margin-inline-start: auto; }
.resume-summary {
  display: inline-flex; align-items: center; gap: 8px; list-style: none;
  font-size: 13.5px; font-weight: 700; color: var(--teal-800);
  padding: 9px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--surface);
  cursor: pointer; min-height: 40px; user-select: none; white-space: nowrap;
}
.resume-summary::-webkit-details-marker { display: none; }
.resume-summary::marker { content: ""; }
.resume-summary:hover { background: var(--teal-050); border-color: var(--teal-line); }
.resume-summary .rs-pre { color: var(--ink-3); font-weight: 600; }
.resume-summary .rs-flare { color: var(--terra); width: 16px; height: 16px; flex: none; }
.resume-summary .rs-caret { width: 15px; height: 15px; color: var(--ink-3); transition: transform .18s ease; }
.resume[open] .resume-summary .rs-caret { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .resume-summary .rs-caret { transition: none; } }
.resume-body {
  position: absolute; inset-inline-end: 0; top: calc(100% + 10px);
  width: min(340px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--sh-3); padding: 16px; z-index: 95;
}
.resume-body h3 { font-size: 15.5px; color: var(--ink); }
.resume-body .rb-intro { font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.resume-saved {
  display: flex; align-items: center; gap: 10px; margin-top: 13px;
  background: var(--teal-050); border: 1px solid var(--teal-line);
  border-radius: var(--r-md); padding: 10px 11px;
}
.rs-info { flex: 1; min-width: 0; }
.rs-label { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.rs-code { font-family: var(--mono, ui-monospace, monospace); font-size: 16px; font-weight: 800; letter-spacing: .03em; color: var(--teal-800); margin-top: 2px; display: block; }
.rs-copy {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--teal-800); border: 1.5px solid var(--teal-line);
  font-weight: 800; font-size: 13px; padding: 8px 12px; border-radius: var(--r-sm);
  min-height: 38px; cursor: pointer;
}
.rs-copy:hover { background: #fff; border-color: var(--teal); }
.rs-copy.ok { background: var(--green); border-color: var(--green); color: #fff; }
.rs-copy svg { width: 14px; height: 14px; }
.resume-form { display: flex; gap: 8px; margin-top: 12px; }
.resume-input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 13px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--ink); background: var(--surface);
  letter-spacing: .02em; text-transform: uppercase;
}
.resume-input::placeholder { color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.resume-input:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.resume-go {
  flex: none; background: var(--teal-800); color: #fff; border: none;
  font-weight: 800; font-size: 14.5px; padding: 0 16px; min-height: 44px;
  border-radius: var(--r-sm); cursor: pointer;
}
.resume-go:hover { background: var(--teal-700); }
.resume-help { font-size: 12px; color: var(--ink-3); margin-top: 11px; line-height: 1.45; }

/* desktop: use the width */
@media (min-width: 760px) {
  .choices-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .choice.primary { align-items: center; }
  .helpline-grid { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
}
@media (min-width: 1040px) {
  .hero { padding-block: 36px 14px; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
  .hero-copy { order: 1; } .hero-media { order: 2; }
  .hero-media img { height: 360px; }
  .hero h1 { font-size: 42px; }
  .hero .lede { font-size: 19px; margin-top: 16px; }
}


/* ── Needs grid (step 2 of the find wizard) — 2026-08-09 ───────────────────────
   Replaces the vertical list with illustrated cards. Sizing was measured inside the real chrome:
   the crisis bar, back link, progress and heading take 347px of an 800px phone, so a two-column
   card with a subtitle put only FOUR of twelve on screen — fewer than the list it replaced. Three
   columns without the subtitle puts all twelve there. Desktop keeps three columns and the subtitle
   (the wrap caps at 760px, so four would be cramped, not roomier).
   The illustration tones are duplicated from the sprite's gradients; they live here so a theme
   change moves both together. */
:root{
  --i-navy:#2C4675; --i-sand:#EFDCBE; --i-terra:#D0703C; --i-sage:#8AA893;
  --i-sky:#8CA6C9;  --i-warm:#E8A05C;
  --i-navy-lt:#4A679B; --i-sand-lt:#FBF0DE; --i-terra-lt:#E8945F; --i-sage-lt:#A9C4B0;
  --i-sky-lt:#AEC3DD;  --i-warm-lt:#F6C089;
}
.optlist--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.optlist--grid .opt-card {
  flex-direction: column; align-items: center; text-align: center; gap: 7px;
  padding: 12px 8px 11px; position: relative; min-height: 0;
  box-shadow: 0 1px 2px rgba(22,41,76,.06), 0 6px 14px -6px rgba(22,41,76,.14);
}
.opt-card .opt-ill { width: 40px; height: 40px; flex: none;
  /* The symbols' outline shapes are fill="currentColor" — see the note in index.html for why they
     cannot be var(). This is where that colour comes from. */
  color: var(--i-navy);
  filter: drop-shadow(0 2px 1.5px rgba(22,41,76,.16)); }
.opt-card .opt-t { font-size: 13px; font-weight: 700; line-height: 1.25; }
/* 8.07:1 on white and 13px+: the earlier 4.55:1 at 11.5px passed AA by a whisker and was still
   hard to read — reported by a reader wearing glasses, in good light. */
.opt-card .opt-sub { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  line-height: 1.4; margin-top: 3px; }
.opt-card .opt-tick { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--terra); display: none;
  align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(238,122,30,.45); }
.opt-card .opt-tick::after { content: ''; width: 5px; height: 9px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px); }
/* Selection carries three signals — border, fill and tick — so it never rests on colour alone. */
.opt-card.opt-selected { border-color: var(--terra); border-width: 2px;
  background: color-mix(in srgb, var(--terra) 7%, #fff);
  box-shadow: inset 0 2px 6px rgba(22,41,76,.10); }
.opt-card.opt-selected .opt-tick { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .opt-card { transition: border-color .12s, background .12s, box-shadow .13s ease; }
}
/* Narrow phones: the subtitle is the price of seeing all twelve without scrolling. Remove this
   block to get two roomy columns with subtitles back (and 4-of-12 above the fold). */
@media (max-width: 520px) {
  .optlist--grid { gap: 8px; }
  .optlist--grid .opt-card { padding: 10px 5px 9px; gap: 5px; }
  .opt-card .opt-ill { width: 34px; height: 34px; }
  .opt-card .opt-t { font-size: 11.5px; }
  .opt-card .opt-sub { display: none; }
}
@media (min-width: 720px) {
  .optlist--grid { gap: 12px; }
  .optlist--grid .opt-card { padding: 15px 11px 14px; gap: 9px; }
  .opt-card .opt-ill { width: 52px; height: 52px; }
  .opt-card .opt-t { font-size: 14px; }
}