/* Public site. Hand-written, no build step, mobile first (min-width only).
   Tokens live in tokens.css (loaded first); this file only uses them.
   Spec: research/UI-REDESIGN-V2.md (brand, pages) on top of the structure
   rules of research/UI-DESIGN-BRIEF.md. Layer order is declared in tokens.css. */

/* ===================== reset ===================== */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
}

/* ===================== base ===================== */
@layer base {
html { scroll-padding-top: calc(var(--h-header) + var(--h-tabs) + var(--sp-2)); }
html:has(.cta-bar) { scroll-padding-bottom: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--background); color: var(--foreground);
  font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-base); font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) { body { font-size: 1.0625rem; } }
h1, h2, h3 { color: var(--foreground); text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: var(--text-h1); line-height: 1.08; }
h2 { font-size: var(--text-h2); line-height: 1.15; }
h3 { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 600; letter-spacing: -.005em; }
p { text-wrap: pretty; }
a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
strong, b { font-weight: 600; }
code, kbd { font-family: inherit; }
table, .num, time { font-variant-numeric: tabular-nums; }
::placeholder { color: var(--subtle-foreground); opacity: 1; }
::selection { background: var(--lilac); color: var(--foreground); }

/* form controls (public size; the dashboard sets --h-control smaller) */
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="range"]), select, textarea {
  width: 100%; min-height: var(--h-control); padding: 0 var(--sp-3);
  font-size: 1rem; line-height: 1.5; color: var(--foreground);
  background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs); appearance: none;
}
textarea { padding: var(--sp-2) var(--sp-3); min-height: 6rem; resize: vertical; }
select {
  padding-right: var(--sp-10); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237c78a6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-3) center;
}
input:hover:not(:focus, [type="checkbox"], [type="radio"]), select:hover, textarea:hover { border-color: var(--muted-foreground); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 28%, transparent);
}
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
[aria-invalid="true"] { border-color: var(--bad-solid) !important; }
input[type="checkbox"], input[type="radio"] {
  appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; cursor: pointer;
  border: 1px solid var(--input); border-radius: 6px; background: var(--card);
  display: inline-grid; place-content: center;
}
input[type="radio"] { border-radius: var(--radius-full); }
input[type="checkbox"]::before { content: ""; width: 12px; height: 12px; transform: scale(0);
  background: var(--primary-foreground); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); transform: scale(0); background: var(--primary-foreground); }
input:checked { background: var(--primary); border-color: var(--primary); }
input:checked::before { transform: scale(1); }
input[type="file"] { font-size: var(--text-sm); max-width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  input, select, textarea { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
}
}

/* ===================== components ===================== */
@layer components {
/* icons: one line set, 1.75 stroke, round caps */
.i { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i.flip { transform: rotate(180deg); }
.i-lg { width: 1.25rem; height: 1.25rem; }

/* icon tile: a 40px tinted rounded square that introduces a feature */
.itile { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--primary); }
.itile .i { width: 1.25rem; height: 1.25rem; }
[data-tone="sun"] > .itile, .itile[data-tone="sun"] { background: var(--sun-soft); color: var(--sun-deep); }
[data-tone="peach"] > .itile, .itile[data-tone="peach"] { background: var(--peach-soft); color: var(--peach-deep); }
[data-tone="mint"] > .itile, .itile[data-tone="mint"] { background: var(--mint-soft); color: var(--mint-deep); }
[data-tone="sky"] > .itile, .itile[data-tone="sky"] { background: var(--sky-soft); color: var(--sky-deep); }
[data-tone="lilac"] > .itile, .itile[data-tone="lilac"] { background: var(--lilac-soft); color: var(--lilac-deep); }

/* ---- buttons: pill primary/secondary, 44px ---- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--h-control); padding: 0 var(--sp-5); border: 1px solid transparent; border-radius: var(--radius-full);
  background: var(--primary); color: var(--primary-foreground);
  font-size: 1rem; line-height: 1.25; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--primary-hover); color: var(--primary-foreground); }
.btn:active { transform: translateY(1px); }
.btn[data-variant="outline"] { background: var(--card); color: var(--foreground); border-color: var(--border); box-shadow: var(--shadow-xs); }
.btn[data-variant="outline"]:hover { border-color: var(--input); background: var(--card); }
.btn[data-variant="soft"], .btn[data-variant="secondary"] { background: var(--brand-soft); color: var(--primary); }
.btn[data-variant="soft"]:hover, .btn[data-variant="secondary"]:hover { background: color-mix(in oklab, var(--brand-soft) 80%, var(--primary)); }
.btn[data-variant="ghost"] { background: transparent; color: var(--foreground); font-weight: 500; }
.btn[data-variant="ghost"]:hover { background: var(--muted); }
.btn[data-variant="link"], .btn[data-variant="link"][data-size] { background: none; color: var(--primary); padding: 0; min-height: 0; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.btn[data-variant="link"]:hover { text-decoration-thickness: 2px; }
.btn[data-variant="destructive"] { background: var(--destructive); color: var(--destructive-foreground); }
.btn[data-variant="destructive"]:hover { background: color-mix(in oklab, var(--destructive) 88%, var(--foreground)); }
.btn[data-size="sm"] { min-height: var(--h-control-sm); padding: 0 var(--sp-4); font-size: var(--text-sm); }
.btn[data-size="lg"] { min-height: var(--h-control-lg); padding: 0 var(--sp-6); font-size: var(--text-lg); }
.btn[data-size="icon"] { width: var(--h-control); padding: 0; }
.btn[data-size="sm"]::after { content: ""; position: absolute; inset: -4px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn[aria-busy="true"] { color: transparent; }
.btn[aria-busy="true"]::before { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--primary-foreground); border-right-color: transparent; border-radius: var(--radius-full); animation: spin .7s linear infinite; }
.btn[hidden] { display: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- fields, segmented control, chips ---- */
.field { display: grid; gap: var(--sp-1_5); min-width: 0; }
.field > label, .field > legend { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--foreground); }
.field > legend { margin-bottom: var(--sp-1_5); }
.hint { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted-foreground); }
.check-row { display: flex; gap: var(--sp-3); align-items: flex-start; min-height: var(--h-control); padding: var(--sp-2) 0; cursor: pointer; color: var(--foreground); }
.money { position: relative; display: block; }
.money > span { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--muted-foreground); }
.money input { padding-left: var(--sp-6); }
.inline-field { display: flex; gap: var(--sp-2); }
.inline-field input { flex: 1; min-width: 0; }

/* segmented / chip group on radio inputs: pills */
.seg { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.seg label { position: relative; flex: 1 0 auto; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: var(--h-control); min-width: var(--h-control); padding: 0 var(--sp-3); border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--card); font-size: var(--text-sm); font-weight: 600; color: var(--foreground); }
.seg label:hover span { border-color: var(--input); }
.seg input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.seg input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }

/* filter chips: pills, checked = primary with a check */
.toggle { position: relative; display: inline-flex; }
.toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.toggle > input + span, a.toggle {
  display: inline-flex; align-items: center; gap: var(--sp-1_5); min-height: var(--h-control-sm); padding: 0 var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--card); color: var(--foreground);
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap; text-decoration: none;
}
a.toggle::after { content: ""; position: absolute; inset: -4px 0; }
.toggle .c { margin-left: auto; padding-left: var(--sp-2); color: var(--muted-foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
.toggle input:checked + span, a.toggle[aria-current] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.toggle input:checked + span .c, a.toggle[aria-current] .c { color: inherit; }
.toggle input:checked + span::before, a.toggle[aria-current]::before {
  content: ""; width: .75rem; height: .75rem; background: currentColor;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.toggle input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.toggle:hover > span, a.toggle:hover { border-color: var(--input); }
a.toggle[aria-current]:hover { background: var(--primary-hover); }

/* ---- sheet (filters, menu) ---- */
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--h-control-lg); }
.sheet-title, .brand-name { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 600; }
.sheet-grab { display: none; }
.sheet-foot { display: none; }

/* ---- badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 24px; padding: 0 var(--sp-2_5, 10px);
  border: 1px solid transparent; border-radius: var(--radius-full); background: var(--neutral-soft); color: var(--neutral-ink);
  font-size: var(--text-label); line-height: var(--leading-label); font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.badge[data-variant="outline"] { background: var(--card); border-color: var(--border); color: var(--foreground); }
.badge[data-variant="ok"] { background: var(--ok-soft); color: var(--ok-ink); }
.badge[data-variant="warn"] { background: var(--warn-soft); color: var(--warn-ink); }
.badge[data-variant="bad"] { background: var(--bad-soft); color: var(--bad-ink); }
.badge[data-variant="info"] { background: var(--info-soft); color: var(--info-ink); }
.badge[data-variant="brand"] { background: var(--brand-soft); color: var(--primary); }
.badge .i { width: 12px; height: 12px; }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--sp-1_5); border-radius: var(--radius-full);
  background: var(--primary); color: var(--primary-foreground); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- cards ---- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--sp-5); }
@media (min-width: 640px) { .card { padding: var(--sp-6); } }
.lift { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .lift { transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
  .lift:hover { transform: translateY(-2px); }
}
.lift:hover { box-shadow: var(--shadow-md); border-color: transparent; }

/* ---- callout and alert ---- */
.facet-intro { margin-top: var(--sp-4); }
.callout, .facet-intro { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); background: var(--brand-soft); color: var(--foreground); max-width: var(--measure); }
.callout > * + * { margin-top: var(--sp-2); }
.callout[data-variant="warn"] { background: var(--warn-soft); color: var(--warn-ink); }
.alert { padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--border); border-radius: var(--radius-sm); background: var(--muted); color: var(--foreground); }
.alert[data-variant="bad"] { background: var(--bad-soft); border-left-color: var(--bad-solid); color: var(--bad-ink); }
.alert[data-variant="ok"] { background: var(--ok-soft); border-left-color: var(--ok-solid); color: var(--ok-ink); }
.alert[data-variant="warn"] { background: var(--warn-soft); border-left-color: var(--warn-solid); color: var(--warn-ink); }
.alert a { color: inherit; }

/* ---- 44px hit areas for small inline action links, same look ---- */
.crumbs a, .asof a, .section-note a, .hit { position: relative; }
.crumbs a::after, .asof a::after, .section-note a::after, .hit::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }

/* ---- unknown value: designed, never "No" ---- */
.np { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 500; color: var(--subtle-foreground); }

/* ---- tables ---- */
.table { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); -webkit-overflow-scrolling: touch; }
.table table { width: 100%; font-size: var(--text-sm); line-height: var(--leading-sm); }
.table th, .table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table thead th { height: 44px; padding-block: var(--sp-2); background: var(--sunken); font-weight: 600; color: var(--muted-foreground); }
.table tbody th { font-weight: 600; white-space: normal; min-width: 9rem; max-width: 18rem; }
.table tbody th a { text-decoration: none; color: var(--foreground); }
.table tbody th a:hover { text-decoration: underline; color: var(--primary); }
.table th:first-child, .table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--border); }
.table thead th:first-child { background: var(--sunken); }
.table .num { text-align: right; }
.table tr.is-this > * { background: var(--brand-soft); }
.table tr.is-this > :first-child { box-shadow: inset 3px 0 0 var(--brand), 1px 0 0 var(--border); }
.cell-sub { display: block; margin-top: var(--sp-0_5); font-size: var(--text-sm); font-weight: 400; color: var(--muted-foreground); }
@media (min-width: 640px) { .table tbody th { min-width: 11rem; } }
@media (max-width: 559px) {
  .table:not(:has(.fees)) { -webkit-mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent); }
  .table:has(.fees) { overflow: visible; }
  table.fees thead { display: none; }
  table.fees tr { display: block; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
  table.fees tbody tr:last-child { border-bottom: 0; }
  table.fees th, table.fees td { position: static; display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) var(--sp-4); border: 0; box-shadow: none; background: none; }
  table.fees tbody th { max-width: none; padding-top: var(--sp-2); }
  table.fees td::before { content: attr(data-label); font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); }
}

/* ---- kv rows (definition list) ---- */
.kv { border-top: 1px solid var(--border); }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); min-height: 48px; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.kv dt { color: var(--muted-foreground); }
.kv dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.kv > .total { border-top: 2px solid var(--foreground); }
.kv > .total dt, .kv > .total dd { color: var(--foreground); font-weight: 700; }

/* ---- row links ---- */
.rows { border-top: 1px solid var(--border); }
.rows > li { border-bottom: 1px solid var(--border); }
.rows a, .rows .row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 52px; padding: var(--sp-3) var(--sp-1); color: var(--foreground); text-decoration: none; border-radius: var(--radius-sm); }
.rows a:hover { background: var(--muted); }
.rows a:hover .row-t { color: var(--primary); }
.row-t { font-weight: 600; }
.row-x { display: block; margin-top: var(--sp-0_5); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 400; color: var(--muted-foreground); }
.row-n { flex: none; font-size: var(--text-sm); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.rows .i { color: var(--muted-foreground); }
.rows-cols { display: grid; column-gap: var(--sp-6); }
@media (min-width: 640px) { .rows-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rows-cols.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rows-cols.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- breadcrumb ---- */
.crumbs { padding-block: var(--sp-4) 0; }
.crumbs ol { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; white-space: nowrap; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted-foreground); }
.crumbs ol::-webkit-scrollbar { display: none; }
.crumbs li { flex: none; }
.crumbs li:last-child { flex: 0 1 auto; min-width: 4rem; overflow: hidden; text-overflow: ellipsis; }
.crumbs li.sep { color: var(--subtle-foreground); }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--muted-foreground); text-decoration: none; }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
.crumbs [aria-current] { color: var(--foreground); font-weight: 500; }

/* ---- FAQ ---- */
.faq { max-width: 52rem; display: grid; gap: var(--sp-2); }
.faq details { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.faq details[open] { border-color: var(--input); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 56px; padding: var(--sp-3) var(--sp-5); cursor: pointer; list-style: none; border-radius: var(--radius-lg); }
.faq summary:hover { color: var(--primary); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 1rem; line-height: 1.4; font-weight: 600; letter-spacing: 0; color: inherit; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--brand-soft) no-repeat center / 14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236a63e0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); }
.faq details[open] > summary::after { transform: rotate(180deg); }
.faq-a { padding: 0 var(--sp-5) var(--sp-5); color: var(--muted-foreground); }
.faq-a p { max-width: var(--measure); }
@media (prefers-reduced-motion: no-preference) { .faq summary::after { transition: transform var(--dur-fast) var(--ease-out); } }

/* ---- pager ---- */
.pager { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-8); }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--h-control); min-height: var(--h-control); padding: 0 var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--card); color: var(--foreground); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.pager a:hover { border-color: var(--primary); color: var(--primary); }
.pager .cur { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.pager .gap { border: 0; background: none; color: var(--muted-foreground); }

/* ---- stat tiles: coloured tiles with big display numerals ---- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.stat { padding: var(--sp-4); border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--border); min-width: 0; }
.stats > .stat:nth-child(4n+1) { background: var(--sky-soft); border-color: transparent; }
.stats > .stat:nth-child(4n+2) { background: var(--peach-soft); border-color: transparent; }
.stats > .stat:nth-child(4n+3) { background: var(--mint-soft); border-color: transparent; }
.stats > .stat:nth-child(4n+4) { background: var(--lilac-soft); border-color: transparent; }
.stats > .stat:nth-child(4n+1) .stat-v { color: var(--sky-deep); }
.stats > .stat:nth-child(4n+2) .stat-v { color: var(--peach-deep); }
.stats > .stat:nth-child(4n+3) .stat-v { color: var(--mint-deep); }
.stats > .stat:nth-child(4n+4) .stat-v { color: var(--lilac-deep); }
.stat-l { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--foreground); }
.stat-v { margin-top: var(--sp-1); font-family: var(--font-display); font-size: var(--text-stat); line-height: 1.05; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.stat-n { margin-top: var(--sp-1_5); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted-foreground); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } .stats[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stats[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { padding: var(--sp-5) var(--sp-6); } }

/* ---- covers (cover.go): palettes from tokens ---- */
.cv { width: 100%; height: 100%; --cv-bg: var(--pal0-bg); --cv-1: var(--pal0-1); --cv-2: var(--pal0-2); --cv-3: var(--pal0-3); --cv-4: var(--pal0-4); }
.cv[data-p="1"] { --cv-bg: var(--pal1-bg); --cv-1: var(--pal1-1); --cv-2: var(--pal1-2); --cv-3: var(--pal1-3); --cv-4: var(--pal1-4); }
.cv[data-p="2"] { --cv-bg: var(--pal2-bg); --cv-1: var(--pal2-1); --cv-2: var(--pal2-2); --cv-3: var(--pal2-3); --cv-4: var(--pal2-4); }
.cv[data-p="3"] { --cv-bg: var(--pal3-bg); --cv-1: var(--pal3-1); --cv-2: var(--pal3-2); --cv-3: var(--pal3-3); --cv-4: var(--pal3-4); }
.cv .z { fill: var(--cv-bg); } .cv .a { fill: var(--cv-1); } .cv .b { fill: var(--cv-2); } .cv .c { fill: var(--cv-3); stroke: var(--cv-3); } .cv .d { fill: var(--cv-4); }
.cv .c[fill="none"] { fill: none; }
.cover { position: relative; overflow: hidden; background: var(--muted); }
.cover > img { width: 100%; height: 100%; object-fit: cover; }

/* ---- decorative shapes behind heroes (aria-hidden svg) ---- */
.deco-box { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; border-radius: inherit; }
.deco { position: absolute; pointer-events: none; }
.deco .s1 { fill: var(--sun); } .deco .s2 { fill: var(--peach); } .deco .s3 { fill: var(--mint); } .deco .s4 { fill: var(--sky); } .deco .s5 { fill: var(--lilac); }
.deco .ln { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.deco-ha { right: -150px; top: -110px; width: 300px; }
.deco-hb { left: -90px; bottom: -90px; width: 180px; }
.deco-head { right: -110px; top: -90px; width: 230px; }
.deco-corner { right: -40px; bottom: -50px; width: 200px; }
.deco-small { right: -40px; top: -40px; width: 160px; }
@media (max-width: 899px) { .deco .ln { display: none; } }
@media (min-width: 900px) { .deco-ha { right: -60px; top: -80px; width: 420px; } .deco-hb { left: -70px; bottom: -60px; width: 220px; } .deco-head { right: -40px; top: -50px; width: 300px; } }

/* ---- empty states ---- */
.empty { display: grid; justify-items: start; gap: var(--sp-3); padding: var(--sp-6); border: 1px dashed var(--input); border-radius: var(--radius-xl); background: var(--card); }
.empty-art { width: 120px; height: 75px; border-radius: var(--radius-md); overflow: hidden; }
.empty h2, .empty h3 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; }
.empty p { color: var(--muted-foreground); max-width: 48ch; }
.msg-art { width: 160px; height: 100px; margin-bottom: var(--sp-6); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transform: rotate(-3deg); }
.band .bigsearch { box-shadow: var(--shadow-md); }

/* ---- htmx loading: a calm dim after 300ms, no shimmer ---- */
.htmx-request #results, #results.htmx-request, #calc-out.htmx-request, .htmx-request #calc-out { opacity: .55; transition: opacity var(--dur-fast) linear .3s; }
.skel { display: block; border-radius: var(--radius-sm); background: var(--muted); }
}

/* ===================== patterns ===================== */
@layer patterns {
/* ---- header ---- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--background); border-bottom: 1px solid var(--border); }
.site-header-in { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--h-header); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--h-control); margin-right: auto; min-width: 0;
  color: var(--foreground); text-decoration: none; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; }
.brand-mark { flex: none; width: 32px; height: 32px; color: var(--on-brand); }
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark .cup { stroke: var(--brand); }
.brand-mark .dot { fill: var(--sun-solid); stroke: none; }
/* the dot hops into the cup once on load and again on hover */
@media (prefers-reduced-motion: no-preference) {
  .brand-mark .dot { transform-box: fill-box; transform-origin: center; animation: brand-hop .9s .4s cubic-bezier(.3, 0, .2, 1) both; }
  .brand:hover .brand-mark .dot { animation: brand-hop2 .6s cubic-bezier(.3, 0, .2, 1); }
  @keyframes brand-hop { 0% { transform: translateY(-9px); opacity: 0; } 45% { transform: translateY(1px) scale(1.08, .9); opacity: 1; } 70% { transform: translateY(-3px); } 100% { transform: none; } }
  @keyframes brand-hop2 { 0%, 100% { transform: none; } 40% { transform: translateY(-5px); } 70% { transform: translateY(1px) scale(1.08, .9); } }
}
.hsearch { display: none; position: relative; flex: 1 1 24rem; max-width: 28rem; }
.hsearch > .i { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; z-index: 1; }
.hsearch input { min-height: 44px; padding-left: var(--sp-10); padding-right: var(--sp-10); border-radius: var(--radius-full); border-color: var(--border); background: var(--muted); box-shadow: none; font-size: var(--text-sm); }
.hsearch input:focus-visible { background: var(--card); }
.kbd { position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 var(--sp-1);
  border: 1px solid var(--border); border-radius: 6px; background: var(--card); font-size: var(--text-xs); color: var(--muted-foreground); pointer-events: none; }
.hsearch:focus-within .kbd { display: none; }
.hnav { display: none; }
.hnav a { display: inline-flex; align-items: center; min-height: var(--h-control); padding: 0 var(--sp-3); border-radius: var(--radius-full); text-decoration: none; font-size: .9375rem; font-weight: 600; color: var(--muted-foreground); }
.hnav a:hover { color: var(--foreground); background: var(--muted); }
.hnav a[aria-current] { color: var(--primary); background: var(--brand-soft); }
.hclaim { display: none; }
.hactions { display: flex; align-items: center; gap: var(--sp-1); }
.theme-dark { display: none; }
:root[data-theme="dark"] .theme-dark { display: block; }
:root[data-theme="dark"] .theme-light { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-dark { display: block; } :root:not([data-theme="light"]) .theme-light { display: none; } }
@media (min-width: 900px) {
  .site-header-in { gap: var(--sp-4); }
  .brand { margin-right: 0; flex: none; }
  .hsearch { display: block; min-width: 10rem; }
  .hsearch-m, .hsaved { display: none; }
  .hnav { display: flex; gap: var(--sp-1); margin-left: auto; }
  .hclaim { display: inline-flex; }
  .menu { display: none; }
}
.no-hsearch .hnav { margin-left: auto; }
.hnav a { white-space: nowrap; }
/* the header is at most --container wide, so from 1280px up it never grows:
   "Claim your nursery" stays in the menu and behind "For nurseries", which
   leaves the search box room for its placeholder and the area/AI switch */
@media (min-width: 900px) { .hnav a[href="/claim/"] { display: none; } }
@media (min-width: 900px) and (max-width: 1279px) { .hnav a[href="/calculators"] { display: none; } }
@media (min-width: 900px) and (max-width: 1099px) { .hnav a[href="/guides"] { display: none; } }

/* mobile menu: a right sheet from a <details>, works without JS */
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(21rem, 88vw); padding: var(--sp-4) var(--gutter) var(--sp-8);
  background: var(--popover); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow-y: auto; }
.menu[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 40; background: rgb(15 14 26 / .45); cursor: default; }
.menu-panel .rows a { min-height: 52px; }
.menu-cta { margin-top: var(--sp-6); display: grid; gap: var(--sp-2); }
@media (prefers-reduced-motion: no-preference) { .menu[open] .menu-panel { animation: slide-in var(--dur-med) var(--ease-out); } }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }

/* ---- combobox suggestion panel (app.js) ---- */
.combo { position: relative; }
.combo > .i { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); width: 1.125rem; height: 1.125rem; color: var(--muted-foreground); pointer-events: none; z-index: 1; }
.combo > input { padding-left: var(--sp-10); }
.sugg { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 8px); max-height: min(28rem, 70dvh); overflow-y: auto; padding: var(--sp-2);
  background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); text-align: left; }
.sugg[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .sugg { animation: pop-in var(--dur-med) var(--ease-out); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.99); } }
.sugg-h { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--text-label); font-weight: 600; color: var(--muted-foreground); }
.sugg-o { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: var(--sp-1_5) var(--sp-3); border-radius: var(--radius-md); cursor: pointer; color: var(--foreground); }
.sugg-o[aria-selected="true"], .sugg-o:hover { background: var(--brand-soft); }
.sugg-o .itile { width: 36px; height: 36px; border-radius: 10px; }
.sugg-o .itile .i { width: 1.125rem; height: 1.125rem; }
.sugg-t { display: block; font-weight: 600; line-height: 1.3; }
.sugg-t mark { background: none; color: var(--primary); font-weight: 700; }
.sugg-s { display: block; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted-foreground); }
.sugg-o > span:nth-child(2) { min-width: 0; flex: 1; }
.sugg-o > span:nth-child(2) > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- page heads and tinted bands (every page opens with colour) ---- */
.band { position: relative; z-index: 2; isolation: isolate; background: var(--lilac-soft); }
.band[data-tone="sun"] { background: var(--sun-soft); }
.band[data-tone="peach"] { background: var(--peach-soft); }
.band[data-tone="mint"] { background: var(--mint-soft); }
.band[data-tone="sky"] { background: var(--sky-soft); }
.band[data-tone="brand"] { background: var(--brand-soft); }
.band > .wrap { position: relative; z-index: 1; }
.band:focus-within, .hero:focus-within { z-index: 30; }
.band + .wrap { padding-top: var(--sp-8); }
.band .deco { opacity: .9; }
.band[data-tone="sun"] .deco .s1, .band[data-tone="peach"] .deco .s1 { fill: var(--lilac); }
.band[data-tone="peach"] .deco .s2 { fill: var(--sky); }
.band[data-tone="mint"] .deco .s1 { fill: var(--coral); }
.band[data-tone="sky"] .deco .s2 { fill: var(--mint); }
.band .stats > .stat { background: var(--card); border-color: transparent; box-shadow: var(--shadow-xs); }
body:has(main > .band:first-child) .crumbs, body:has(main > .hero:first-child) .crumbs, body:has(main > article:first-child > .band:first-child) .crumbs { --cb: var(--lilac-soft); background: var(--cb); box-shadow: 0 0 0 100vmax var(--cb); clip-path: inset(0 -100vmax); }
body:has(main > .band[data-tone="brand"]:first-child) .crumbs { --cb: var(--brand-soft); }
body:has(main > .band[data-tone="peach"]:first-child) .crumbs, body:has(main > article:first-child > .band[data-tone="peach"]:first-child) .crumbs { --cb: var(--peach-soft); }
body:has(main > .band[data-tone="mint"]:first-child) .crumbs { --cb: var(--mint-soft); }
body:has(main > .band[data-tone="sky"]:first-child) .crumbs { --cb: var(--sky-soft); }
body:has(main > .band[data-tone="sun"]:first-child) .crumbs { --cb: var(--sun-soft); }
.page-head { padding-block: var(--sp-8) var(--sp-10); }
.page-head h1 { max-width: 22ch; }
.page-meta { margin-top: var(--sp-3); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--muted-foreground); }
.lead { margin-top: var(--sp-3); max-width: var(--measure); font-size: var(--text-lg); line-height: 1.6; color: var(--muted-foreground); }
.asof { margin-top: var(--sp-3); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--subtle-foreground); }
.asof a, .muted a, .subtle a { color: inherit; }
.muted { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted-foreground); }
.subtle { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--subtle-foreground); }
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(44rem + 2 * var(--gutter)); }
.head-grid { display: grid; gap: var(--sp-6); align-items: center; }
.head-art { display: none; }
.head-chart { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-md); }
@media (min-width: 900px) {
  .page-head { padding-block: var(--sp-12) var(--sp-12); }
  .head-grid { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-12); }
  .head-art { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); transform: rotate(2deg); }
}

/* sections */
.section { margin-top: var(--section-gap); }
.section:first-child { margin-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-5); }
.section-head > .ttl { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.section > h3, .sub { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--text-lg); line-height: var(--leading-lg); }
.section-note { margin-top: var(--sp-3); }
.ext { display: inline-flex; align-items: center; gap: var(--sp-1_5); min-height: var(--h-control); font-size: var(--text-sm); font-weight: 600; }
.panel { padding: var(--sp-5); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.panel > .section-head h2, .panel h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
@media (min-width: 640px) { .panel { padding: var(--sp-8); } }
.block { padding-block: var(--sp-12); }
.block[data-tone] { background: var(--lilac-soft); }
.block[data-tone="sky"] { background: var(--sky-soft); }
.block[data-tone="mint"] { background: var(--mint-soft); }
.block[data-tone="peach"] { background: var(--peach-soft); }
.block[data-tone="sun"] { background: var(--sun-soft); }
@media (min-width: 768px) { .block { padding-block: var(--sp-16); } }
.rounded-block { border-radius: var(--radius-2xl); }

/* ---- Ofsted B: report card, six areas, no overall grade ---- */
.rcard { border-top: 6px solid var(--g-mid); }
.rc-nohead { display: inline-flex; margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); background: var(--muted); font-size: var(--text-sm); font-weight: 600; color: var(--muted-foreground); }
.rc-safe { margin-top: var(--sp-3); }
.rc-rows { margin-top: var(--sp-4); border-top: 1px solid var(--border); }
.rc-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: 48px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.rc-rows .g { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: 600; text-align: right; }
.dots { display: inline-flex; gap: 4px; }
.dots span { width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--g-empty); }
.dots[data-tone="5"] .on, .dots[data-tone="4"] .on { background: var(--g-top); }
.dots[data-tone="3"] .on { background: var(--foreground); }
.dots[data-tone="2"] .on { background: var(--g-low); }
.dots[data-tone="1"] .on { background: var(--g-bad); }
.rc-legend { margin-top: var(--sp-4); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted-foreground); }
@media (max-width: 479px) { .rc-rows li { grid-template-columns: minmax(0, 1fr); } .rc-rows .g { text-align: left; } }

/* ---- bar charts (chart.go) and big figures ---- */
.bars { display: grid; gap: var(--sp-3); }
.bar-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); }
.bl { font-weight: 600; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.bt { height: 16px; border-radius: var(--radius-full); background: var(--muted); overflow: hidden; }
.bt span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.bar-row.alt .bt span { background: var(--coral); }
.band .bt { background: color-mix(in oklab, var(--foreground) 10%, transparent); }
.figure { font-family: var(--font-display); font-size: var(--text-stat); line-height: 1.05; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.figure .unit { display: block; margin-top: var(--sp-1); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--muted-foreground); }

/* ---- map ---- */
.map { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sky-soft); border-radius: var(--radius-xl); }
.map-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--sp-3); color: var(--sky-deep); }
.map-fallback::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: repeating-linear-gradient(0deg, transparent 0 39px, var(--sky) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, var(--sky) 39px 40px); }
.map-fallback > * { position: relative; }
.map-fallback > .i { width: 1.75rem; height: 1.75rem; }
.map-live .map-fallback, [data-map-state="ready"] .map-fallback { display: none; }
.map-live { background: var(--map-land); }
:root[data-theme="dark"] :is(.map canvas, .map-thumb img) { filter: brightness(.82) contrast(1.05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.map canvas, .map-thumb img) { filter: brightness(.82) contrast(1.05); } }
.map .maplibregl-cooperative-gesture-screen:not(.maplibregl-show) { display: none; }
.map-dot { display: block; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--primary); border: 3px solid var(--card); box-shadow: var(--shadow-md); }
.map-dot-main { width: 34px; height: 34px; background: var(--brand); border-color: var(--sun); }
a.map-dot:hover, a.map-dot:focus-visible { transform: scale(1.15); background: var(--coral); }
.map .maplibregl-ctrl-attrib { font-size: var(--text-xs); }

/* ---- grade mix bar ---- */
.mix { display: flex; gap: 3px; height: 12px; margin: var(--sp-3) 0; overflow: hidden; border-radius: var(--radius-full); background: var(--g-empty); }
.mix span, .dot { background: var(--g-mid); }
.mix [data-tone="5"], .dot[data-tone="5"] { background: var(--g-top); }
.mix [data-tone="4"], .dot[data-tone="4"] { background: var(--g-good); }
.mix [data-tone="2"], .dot[data-tone="2"] { background: var(--g-low); }
.mix [data-tone="1"], .dot[data-tone="1"] { background: var(--g-bad); }
.dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; }
.mix-legend li { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.mix-legend .row-n { margin-left: auto; }

/* ---- area links: chips with counts, nearby cards, A-Z columns (browse.go) ---- */
.chiplinks { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chiplinks a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--radius-full); background: var(--card); border: 1px solid var(--border); color: var(--foreground); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.chiplinks a:hover, .chiplinks a[aria-current] { border-color: var(--primary); color: var(--primary); }
.chiplinks .row-n { font-weight: 500; }
.area-links { display: grid; gap: var(--sp-8); }
.alinks-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-3); }
.alinks-head h2 { font-size: var(--text-xl); line-height: var(--leading-xl); }
.alinks-head .ext { min-height: 32px; }
.more-links { margin-top: var(--sp-2); }
.more-links > summary { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--text-sm); font-weight: 600; color: var(--primary); cursor: pointer; list-style: none; }
.more-links > summary::-webkit-details-marker { display: none; }
.more-links > summary:hover { text-decoration: underline; }
.more-links .mo, .more-links[open] .mc { display: none; }
.more-links[open] .mo { display: inline; }
.more-links[open] > summary { margin-bottom: var(--sp-2); }
.acmini { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: var(--sp-3); }
.acmini a { display: grid; gap: var(--sp-0_5); height: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); color: var(--foreground); text-decoration: none; }
.acmini a:hover { border-color: var(--primary); }
.acmini a:hover b { color: var(--primary); }
.acmini span { font-size: var(--text-sm); color: var(--muted-foreground); }
.alist { columns: 2 11rem; column-gap: var(--sp-6); }
.alist li { break-inside: avoid; }
.alist a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); min-height: 40px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); color: var(--foreground); font-weight: 600; text-decoration: none; }
.alist a:hover { color: var(--primary); }
.alist .row-n { font-weight: 400; }
.near-up { margin-top: var(--sp-6); }
.report { padding-block: var(--sp-8) var(--sp-4); }
.steps { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); counter-reset: st; }
.steps li { position: relative; padding-left: var(--sp-10); counter-increment: st; }
.steps li::before { content: counter(st); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--primary); font-size: var(--text-sm); font-weight: 700; }
.report-cta { margin-top: var(--sp-8); }
.report-cta .btn { max-width: 100%; overflow-wrap: anywhere; }
.report-notes { display: grid; gap: var(--sp-3); margin-top: var(--sp-8); color: var(--muted-foreground); }
@media (min-width: 768px) { .alist { columns: 3; } }
@media (min-width: 1024px) { .alist { columns: 4; } }

/* ---- footer: dark ink band ---- */
.site-footer { margin-top: var(--sp-16); padding: var(--sp-12) 0 var(--sp-10); background: var(--ink-band); color: var(--ink-band-fg); }
.site-footer a { color: var(--ink-band-fg); }
.footer-grid { display: grid; gap: var(--sp-8); }
.footer-brand { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.footer-brand .brand-mark { width: 32px; height: 32px; }
.footer-about { margin-top: var(--sp-3); max-width: 36ch; color: var(--ink-band-muted); font-size: var(--text-sm); }
.footer-h { font-size: var(--text-sm); font-weight: 700; color: var(--ink-band-fg); margin-bottom: var(--sp-2); }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); }
.footer-links a { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--text-sm); color: var(--ink-band-muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink-band-fg); text-decoration: underline; }
.footer-legal { margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid var(--ink-band-line); max-width: none; font-size: var(--text-sm); color: var(--ink-band-muted); }
.footer-legal a { color: inherit; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 15rem minmax(0, 1fr); } .footer-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } .footer-links a { min-height: 32px; } }

.skip { position: absolute; left: var(--sp-2); top: -4rem; z-index: 100; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); }
.skip:focus { top: var(--sp-2); }

/* sign-in modal (app.js, [data-signin]): a bottom sheet on phones, a centred card from 640px */
.signin { width: 100%; max-width: 100%; max-height: calc(100dvh - var(--sp-8)); margin: auto 0 0; padding: 0; border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--card); color: var(--foreground); box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain; outline: none; }
.signin::backdrop { background: rgb(15 14 26 / .5); }
.signin-in { position: relative; display: grid; gap: var(--sp-4); padding: var(--sp-6) max(var(--gutter), var(--sp-5)) calc(var(--sp-6) + env(safe-area-inset-bottom)); }
.signin-x { position: absolute; top: var(--sp-3); right: var(--sp-3); color: var(--muted-foreground); }
.signin-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--lilac-soft); color: var(--lilac-deep); }
.signin-mark .i { width: 1.5rem; height: 1.5rem; }
.signin h2 { font-size: var(--text-2xl); line-height: var(--leading-2xl); padding-right: var(--sp-10); outline: none; }
.signin [data-signin-step] { display: grid; gap: var(--sp-4); }
.signin [data-signin-step][hidden] { display: none; }
.signin-lead { color: var(--muted-foreground); }
.signin-lead.signin-parent { color: var(--foreground); font-weight: 600; }
.signin-nursery { padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.signin-lead strong { color: var(--foreground); overflow-wrap: anywhere; }
.signin-form { display: grid; gap: var(--sp-3); }
.signin-form input { min-height: var(--h-control-lg); }
.signin-form .btn { min-height: var(--h-control-lg); width: 100%; }
.signin-err:empty, .signin-status:empty { display: none; }
.signin-err { margin-top: calc(-1 * var(--sp-1)); font-size: var(--text-sm); color: var(--bad-ink); }
.signin-status { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); background: var(--muted); font-size: var(--text-sm); }
.signin-status[data-variant="bad"] { background: var(--bad-soft); color: var(--bad-ink); }
.signin-acts { display: grid; gap: var(--sp-2); }
.signin-small { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--subtle-foreground); }
.signin-small a { color: inherit; }
@media (min-width: 640px) {
  .signin { width: min(28rem, calc(100% - 2 * var(--gutter))); margin: auto; border-radius: var(--radius-xl); }
  .signin-in { padding: var(--sp-10) var(--sp-8) var(--sp-8); }
  .signin-acts { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .signin[open] { animation: sheet-up var(--dur-slow) var(--ease-out); }
  .signin[open]::backdrop { animation: fade-in var(--dur-med) linear; }
  @media (min-width: 640px) { .signin[open] { animation: pop-in var(--dur-med) var(--ease-out); } }
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
html:has(.signin[open]) { overflow: hidden; }

/* saved heart + the toast that confirms it */
[data-saved] { color: var(--bad-solid); }
[data-saved] .i { fill: currentColor; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-3);
  width: max-content; max-width: calc(100% - 2 * var(--gutter)); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-full); background: var(--ink-band); color: var(--ink-band-fg); box-shadow: var(--shadow-lg); font-size: var(--text-sm); }
.toast a { color: inherit; font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .toast { animation: fade-in var(--dur-med) linear; } }
/* compare tray (shortlist.js): shows once a nursery is ticked to compare */
.cmp-tray { position: fixed; z-index: 55; left: 50%; bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-2); max-width: calc(100vw - var(--sp-8)); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--card); box-shadow: var(--shadow-lg); }
.cmp-tray[hidden] { display: none; }
.cmp-tray-t { margin: 0; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) { :root:has(body.has-tray) { --nf-bottom: 64px; } } /* chat launcher above the tray (w.js) */
body.has-tray .toast { bottom: calc(var(--sp-20, 5rem) + env(safe-area-inset-bottom)); }
.hnav .count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; margin-left: var(--sp-1); padding: 0 var(--sp-1); border-radius: var(--radius-full); background: var(--primary); color: var(--primary-foreground); font-size: .75rem; }
.hnav .count[hidden], .hsaved .count[hidden] { display: none; }
/* phones: the shortlist ("Saved") stays in the header, outside the menu (CTO plan item 3) */
.hsaved { gap: var(--sp-1); padding-inline: var(--sp-2); font-weight: 600; }
.hsaved .count { min-width: 1.25rem; height: 1.25rem; padding: 0 var(--sp-1); background: var(--primary); color: var(--primary-foreground); font-size: .75rem; }
.hnav a .i { width: 1rem; height: 1rem; vertical-align: -3px; margin-right: var(--sp-1); }
}

/* ===================== pages ===================== */
@layer pages {
/* popular areas: cover cards, a scroller on phones */
.area-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 70%); gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); scrollbar-width: thin; }
.area-cards > li { scroll-snap-align: start; }
@media (min-width: 640px) { .area-cards { grid-auto-columns: minmax(13rem, 40%); } }
@media (min-width: 1024px) { .area-cards { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }
.acard { display: block; overflow: hidden; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--border); color: var(--foreground); text-decoration: none; }
.acard .cover { aspect-ratio: 16 / 9; }
.acard-t { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.acard-t b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.acard-t span { font-size: var(--text-sm); color: var(--muted-foreground); white-space: nowrap; }
.acard:hover b { color: var(--primary); }

/* tool cards and guide cards */
.tcards { display: grid; gap: var(--sp-3); }
.tcard { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); border-radius: var(--radius-xl); background: var(--card); color: var(--foreground); text-decoration: none; border: 1px solid transparent; }
.tcard b { display: block; font-weight: 700; }
.tcard span span { display: block; margin-top: var(--sp-1); font-size: var(--text-sm); color: var(--muted-foreground); }
.tcard:hover b { color: var(--primary); }
@media (min-width: 768px) { .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tcards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tcards.c4 .tcard { flex-direction: column; } }
.gcards { display: grid; gap: var(--sp-4); }
.gcard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--border); color: var(--foreground); text-decoration: none; }
.gcard .cover { aspect-ratio: 16 / 9; }
.gcard div + div { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.gcard b { display: block; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.25; font-weight: 600; }
.gcard p { margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--muted-foreground); }
.gcard:hover b { color: var(--primary); }
@media (min-width: 768px) { .gcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.explain { display: grid; gap: var(--sp-6); }
.explain p { max-width: var(--measure); color: var(--muted-foreground); }
@media (min-width: 768px) { .explain { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--sp-12); } }

/* plain big search (search page, 404) */
.bigsearch { position: relative; display: grid; gap: var(--sp-2); max-width: 40rem; margin-top: var(--sp-6); padding: var(--sp-2); background: var(--card); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); }
.bigsearch > .combo > .i, .bigsearch > .i { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: var(--muted-foreground); pointer-events: none; z-index: 1; }
.bigsearch input { min-height: var(--h-control-lg); padding-left: var(--sp-12); font-size: var(--text-lg); border: 0; box-shadow: none; background: transparent; border-radius: var(--radius-lg); }
.bigsearch input:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); }
.bigsearch .btn { min-height: var(--h-control-lg); }
@media (min-width: 640px) { .bigsearch { grid-template-columns: minmax(0, 1fr) auto; } .bigsearch .btn { padding: 0 var(--sp-8); } }

/* "Use my location" (home, search) */
.geo { display: inline-flex; align-items: center; gap: var(--sp-1_5); min-height: 40px; padding: 0 var(--sp-2); border: 0; border-radius: var(--radius-full); background: none; color: var(--primary); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.geo:hover { background: var(--brand-soft); }

/* ---- standalone enquiry page ---- */
.nf-page-main { max-width: calc(36rem + 2 * var(--gutter)); padding-block: var(--sp-8) var(--sp-16); }
body.nf-page, body.nf-page .site-header { background: var(--sky-soft); }
body.nf-page .site-header { border-bottom-color: transparent; }
.nf-page .nf-page-card { padding: var(--sp-6); border-radius: var(--radius-2xl); background: var(--card); box-shadow: var(--shadow-lg); }
.nf-page-main h1 { font-size: var(--text-h2); margin: var(--sp-2) 0; }
}

/* ===================== utilities ===================== */
@layer utilities {
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.full { width: 100%; }
.flow > * + * { margin-top: var(--sp-4); }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
[hidden] { display: none !important; }
}

@media print {
.site-header, .map, .site-footer, .crumbs, .skip, .no-print, .tool-form, .tool-summary, .deco { display: none !important; }
body { background: none; color: black; font-size: 11pt; }
.band, .block, .hero { background: none !important; }
.page-head { padding-block: 0 8pt; }
.page-head h1 { font-size: 18pt; line-height: 1.2; }
.checklist { grid-template-columns: 1fr 1fr; gap: 12pt; }
.check-group { break-inside: avoid; border: 0; padding: 0; }
.checks-print li { padding: 3pt 0; }
a { color: black; text-decoration: none; }
details > * { display: block; }
.notes .lines { height: 14rem; }
}
/* AI search (/ask): the box on the home hero and the /ask page, and the
   header's Area | Ask AI switch. */
@layer components {
.askbox { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius-xl); }
.askbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-soft); }
.askbox-spark { align-self: start; margin-top: 14px; width: 1.25rem; height: 1.25rem; color: var(--primary); }
.askbox textarea { min-height: 52px; max-height: 180px; padding: 13px 0; border: 0; background: transparent; box-shadow: none; resize: none; font-size: 1.0625rem; line-height: 1.45; }
.askbox textarea:focus-visible { outline: none; box-shadow: none; }
.askbox .btn { min-height: 48px; padding-inline: var(--sp-5); }
.askbox-count { grid-column: 2; font-size: var(--text-xs); color: var(--muted-foreground); }
.askbox-count[data-low="1"] { color: var(--bad-ink); font-weight: 600; }
}
/* the header switch sits over .hsearch, which lives in the patterns layer */
@layer patterns {
.hmode { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: inline-flex; padding: 2px; border-radius: var(--radius-full); background: var(--card); border: 1px solid var(--border); }
.hmode button { display: inline-flex; align-items: center; gap: 3px; min-height: 30px; min-width: 32px; justify-content: center; padding: 0 var(--sp-2); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--muted-foreground); font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.hmode button .i { width: .875rem; height: .875rem; }
.hmode button[aria-pressed="true"] { background: var(--brand-soft); color: var(--primary); }
.hmode button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.hsearch:has(.hmode:not([hidden])) input { padding-right: 5.75rem; }
.hsearch:has(.hmode:not([hidden])) .kbd { display: none; }
.hsearch[data-mode="ai"] > .i { color: var(--primary); }
}

/* Share (partials "sharemenu", listings, shortlist, compare): a menu of plain
   links without JS; parent.js opens the phone's share sheet instead */
.share { position: relative; }
.share > summary { list-style: none; cursor: pointer; }
.share > summary::-webkit-details-marker { display: none; }
.share-pop { position: absolute; z-index: 25; top: calc(100% + var(--sp-1)); left: 0; display: grid; min-width: 12rem; padding: var(--sp-1);
  background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.share-it { display: flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3); border: 0; border-radius: var(--radius-md); background: none;
  color: var(--foreground); font: inherit; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.share-it:hover { background: var(--muted); }
.share-it[hidden] { display: none; }

.share > summary { gap: var(--sp-2); }
.cmp-share, .sl-share { margin-top: var(--sp-3); }