/* AI Provider Directory: public site.
   Design spec: docs/design/directory-ux-ui-brief.md (with the agreed accessibility adjustments).
   Every text/background pair used for readable text meets WCAG AA (4.5:1). */

:root {
  --canvas: #F6F4EF;
  --surface: #FFFFFF;
  --surface-subtle: #EEEBE3;
  --ink: #171716;
  --ink-muted: #68675F;
  --ink-faint: #9A988F;          /* placeholders and disabled states only */
  --line: #DDD9CF;
  --accent: #B5533C;             /* brand terracotta (the favicon): large headings and decoration only */
  --link: #A3472F;               /* links and button fills, a darker brand terracotta: 4.7-6.0:1 */
  --link-hover: #7E3524;
  --accent-soft: #F6E2DA;
  --selection: #264653;
  --selection-soft: #DDE7E6;
  --success: #39764D;
  --warning-text: #8A5A0E;
  --warning-soft: #F6E7CC;
  --focus: #264653;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --radius: 10px;
  --gutter: 16px;
  --max: 1160px;
  --ease: 160ms ease;
}

:root:not([data-theme]) { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #151412; --surface: #1E1D1A; --surface-subtle: #26241F;
    --ink: #EDEBE5; --ink-muted: #A9A69C; --ink-faint: #77746B; --line: #33312B;
    --accent: #EE8A73; --link: #EE8A73; --link-hover: #F5AE9D; --accent-soft: #3A231D;
    --selection: #9CCBC6; --selection-soft: #20393A;
    --success: #7CC293; --warning-text: #E3AD55; --warning-soft: #3A2E17; --focus: #9CCBC6;
  }
}
:root[data-theme="dark"] {
  --canvas: #151412; --surface: #1E1D1A; --surface-subtle: #26241F;
  --ink: #EDEBE5; --ink-muted: #A9A69C; --ink-faint: #77746B; --line: #33312B;
  --accent: #EE8A73; --link: #EE8A73; --link-hover: #F5AE9D; --accent-soft: #3A231D;
  --selection: #9CCBC6; --selection-soft: #20393A;
  --success: #7CC293; --warning-text: #E3AD55; --warning-soft: #3A2E17; --focus: #9CCBC6;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/1.6 var(--font-sans); }
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h1.editorial, .editorial { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.muted { color: var(--ink-muted); }
.small { font-size: .875rem; }

/* Header and footer */
.site-header { border-bottom: 1px solid var(--line); background: var(--canvas); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none; }
.brand-mark { flex: none; display: block; }
.footer-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--font-serif); font-weight: 600; color: var(--ink); }
.site-nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--selection); }
.saved-count { display: inline-block; min-width: 1.4em; padding: 0 5px; border-radius: 99px; background: var(--selection-soft);
  color: var(--selection); font-size: .75rem; font-weight: 700; text-align: center; margin-left: 4px; }
.site-footer { border-top: 1px solid var(--line); margin-top: 72px; padding: 32px 0 48px; color: var(--ink-muted); font-size: .9rem; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }

/* Hero and search */
.hero { padding: 56px 0 32px; }
.hero p.lead { font-size: 1.15rem; color: var(--ink-muted); max-width: 44em; }
.search { display: flex; gap: 8px; max-width: 640px; margin-top: 20px; }
.search input { flex: 1; min-width: 0; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); }
.search input::placeholder { color: var(--ink-faint); }

/* Buttons */
.button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: 11px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: background var(--ease), color var(--ease), border-color var(--ease); }
.button:hover { border-color: var(--ink-muted); color: var(--ink); }
.button.primary { background: #A3472F; border-color: #A3472F; color: #fff; }
.button.primary:hover { background: #7E3524; border-color: #7E3524; color: #fff; }
.button.danger { color: var(--link); border-color: var(--link); background: transparent; }
.button.danger:hover { color: var(--link-hover); border-color: var(--link-hover); }

/* Browse tiles */
.section { margin-top: 48px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tile { display: block; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); transition: border-color var(--ease); }
.tile:hover { border-color: var(--ink-muted); color: var(--ink); }
.tile strong { display: block; }
.tile .count { color: var(--ink-muted); font-size: .9rem; }

/* Cards */
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 12px; flex-wrap: wrap; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--ease); height: 100%; }
.card:hover { border-color: var(--ink-muted); }
.card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.card-head { display: flex; gap: 12px; align-items: flex-start; }
.mono { flex: none; width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-subtle);
  color: var(--ink); font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.mono.large { width: 72px; height: 72px; font-size: 1.5rem; border-radius: 12px; }
.card h3 { margin: 0; font-size: 1.05rem; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }   /* whole card clickable */
.card h3 a:focus-visible { outline: none; }
.card .summary { color: var(--ink-muted); margin: 0; font-size: .95rem; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; color: var(--ink-muted); margin: 0; padding: 0; list-style: none; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tag { font-size: .8rem; padding: 2px 9px; border-radius: 6px; background: var(--surface-subtle); color: var(--ink); }
.badge { display: inline-block; font-size: .78rem; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  background: var(--selection-soft); color: var(--selection); }
.badge.warn { background: var(--warning-soft); color: var(--warning-text); }
.save { position: relative; z-index: 1; margin-left: auto; flex: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--ink-muted); cursor: pointer; display: grid; place-items: center; transition: color var(--ease), border-color var(--ease); }
.save:hover { border-color: var(--line); color: var(--ink); }
.save[aria-pressed="true"] { color: var(--selection); }
.save svg { width: 20px; height: 20px; }

/* Light/dark toggle: shows the moon in light mode and the sun in dark mode */
.theme-toggle { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color var(--ease); }
.theme-toggle:hover { border-color: var(--ink-muted); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}
.no-js .theme-toggle { display: none; }
.save[aria-pressed="true"] svg path { fill: currentColor; }
.no-js .save { display: none; }

/* Card layouts. Gallery: screenshot-led, details over the image on hover/focus (or first tap on touch).
   List: comparison cards without images. Same markup for both. */
.card .shot, .card .open-link { display: none; }
.card-more { display: flex; flex-direction: column; gap: 10px; }
.cards.gallery { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.cards.gallery .card { padding: 0; gap: 0; overflow: hidden; }
.cards.gallery .shot { display: block; aspect-ratio: 16 / 10; background: var(--surface-subtle); overflow: hidden;
  border-bottom: 1px solid var(--line); }
.cards.gallery .shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 200ms ease; }
.cards.gallery .card:hover .shot img { transform: scale(1.02); }
.shot-mono { height: 100%; display: grid; place-items: center; font: 700 2.2rem/1 var(--font-serif); color: var(--ink-muted); }
.cards.gallery .card-head { padding: 12px 14px 14px; align-items: center; }
.cards.gallery .card-head .mono { display: none; }
.cards.gallery .card-more { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 10; z-index: 2;
  display: flex; flex-direction: column; gap: 8px; padding: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--surface) 95%, transparent); border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(6px); transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; }
.cards.gallery .card-more a, .cards.gallery .card-more button { pointer-events: auto; }
.cards.gallery .card:hover .card-more, .cards.gallery .card:focus-within .card-more,
.cards.gallery .card.revealed .card-more { opacity: 1; transform: none; }
.cards.gallery .card-more .summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cards.gallery .open-link { margin-top: auto; align-self: flex-start; padding: 7px 14px; }
@media (hover: none) { .cards.gallery .card.revealed .open-link { display: inline-flex; } }
.cards.gallery .save { z-index: 3; }
.card-title { min-width: 0; }
.card-title h3 { overflow: hidden; text-overflow: ellipsis; }

.bar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.view-toggle button { font: inherit; font-size: .85rem; padding: 6px 12px; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--selection-soft); color: var(--selection); font-weight: 600; }
.no-js .view-toggle { display: none; }

.profile-shot { margin: 0; flex: 0 1 360px; }
.profile-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.profile-shot figcaption { margin-top: 6px; }

/* Breadcrumbs */
.crumbs { font-size: .9rem; margin: 20px 0 0; color: var(--ink-muted); }
.crumbs a { color: var(--ink-muted); }

/* Listing detail */
.profile-head { display: flex; gap: 20px; align-items: flex-start; padding: 32px 0 8px; flex-wrap: wrap; }
.profile-head .intro { flex: 1; min-width: 260px; }
.profile-head .lead { font-size: 1.1rem; color: var(--ink-muted); max-width: 42em; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; margin-top: 24px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
/* Label above value: the sidebar is narrow, and a long label beside its value squeezed the value column. */
dl.keyfacts { margin: 0; font-size: .95rem; }
dl.keyfacts dt { color: var(--ink-muted); font-size: .85rem; }
dl.keyfacts dd { margin: 2px 0 12px; }
dl.keyfacts dd:last-child { margin-bottom: 0; }
.evidence { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.evidence li { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table.sources { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.sources th, table.sources td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.sources th { color: var(--ink-muted); font-weight: 600; }
.notice { padding: 14px 16px; border-radius: var(--radius); background: var(--surface-subtle); font-size: .95rem; }

/* Forms */
.form { display: grid; gap: 14px; max-width: 560px; }
.form label { font-weight: 600; display: block; margin-bottom: 4px; }
.form input, .form select, .form textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink); }
.form textarea { min-height: 120px; }
.form .hint { font-size: .85rem; color: var(--ink-muted); font-weight: 400; }
.prose { max-width: 42em; }
.prose h2 { margin-top: 1.6em; }

/* Search page */
.search-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 8px; }
.filters { position: sticky; top: 12px; display: grid; gap: 14px; }
.filters .near .button { width: 100%; justify-content: center; }
.filter-group { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 12px 0 4px; }
.filter-group legend { font-weight: 700; font-size: .9rem; padding: 0; margin-bottom: 6px; }
.filter-option { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 3px 0; font-size: .93rem; }
.filter-option input { width: 18px; height: 18px; accent-color: var(--selection); margin: 0; }
.filter-option .n { color: var(--ink-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chip-button { font: inherit; font-size: .85rem; cursor: pointer; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--selection);
  background: var(--selection-soft); color: var(--selection); transition: background var(--ease); }
.chip-button:hover { background: var(--surface); }
.link-button { font: inherit; font-size: .85rem; background: none; border: 0; color: var(--link); text-decoration: underline; cursor: pointer; padding: 4px; }
.chip-plain { cursor: pointer; border: 1px solid var(--line); font: inherit; font-size: .85rem; }
.results-bar select { font: inherit; font-size: .9rem; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); margin-left: 6px; }
@media (min-width: 861px) { .filter-toggle { display: none; } }
@media (max-width: 860px) { .filter-panel:not(.open) { display: none; } }

@media (max-width: 860px) {
  .search-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .profile-grid { grid-template-columns: 1fr; }
  .site-nav { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.plain-list { list-style: none; padding: 0; margin: 0 0 12px; }
.plain-list li { padding: 6px 0; }
.form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0; }
.form legend { font-weight: 600; padding: 0 6px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; }
.checks label { font-weight: 400; display: flex; gap: 8px; align-items: baseline; }

/* "List your business": the call to action for businesses (buyers' search stays the page's main job). */
.site-nav a.nav-cta { border: 1.5px solid var(--link); color: var(--link); border-radius: 999px; padding: 5px 14px;
  font-weight: 600; transition: background var(--ease), color var(--ease); }
.site-nav a.nav-cta:hover, .site-nav a.nav-cta[aria-current="page"] { background: var(--link); color: var(--surface);
  border-bottom-color: var(--link); }
.cta-line { margin: 32px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-muted); }

/* Home page: needs in the buyer's words, then location, then the call to action for businesses. */
.icon { display: block; flex: none; }
.need-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.need-tile { display: flex; gap: 14px; align-items: flex-start; height: 100%; box-sizing: border-box; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink);
  text-decoration: none; transition: border-color var(--ease), transform var(--ease); }
.need-tile:hover { border-color: var(--link); transform: translateY(-1px); }
.need-tile strong { display: block; font-size: 1.02rem; line-height: 1.35; }
.need-example { display: block; margin-top: 4px; font-size: .88rem; color: var(--ink-muted); line-height: 1.45; }
.need-text { flex: 1; min-width: 0; }
.need-count { flex: none; font-size: .8rem; color: var(--ink-muted); background: var(--surface-subtle); border-radius: 999px;
  padding: 2px 9px; margin-top: 2px; }
.need-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--link); }
.local-panel { background: var(--surface-subtle); border-radius: var(--radius); padding: 20px 24px; margin: 36px 0; }
.local-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.local-head h2 { margin: 0; font-size: 1.15rem; }
.local-head .button .icon { margin-right: 2px; }
.region-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.region-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .93rem; }
.region-chip span { color: var(--ink-muted); font-size: .85rem; }
.region-chip:hover { border-color: var(--link); }
.cta-band { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: center;
  border: 1.5px solid var(--link); border-radius: var(--radius); padding: 24px 28px; margin: 36px 0 40px; background: var(--surface); }
.cta-band h2 { margin: 0 0 12px; font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); }
.ticks .icon { color: var(--success); margin-top: 2px; }
.cta-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; }
.cta-actions .button { justify-content: center; font-size: 1.05rem; padding: 12px 20px; }
@media (max-width: 960px) { .need-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .need-tiles { grid-template-columns: minmax(0, 1fr); }
  .cta-band { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .local-panel { padding: 18px; }
}

/* Owner statistics */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 12px; }
.stat-row > div { display: flex; flex-direction: column; gap: 2px; }
.stat-number { font-family: var(--font-serif); font-size: 2rem; font-weight: 600; line-height: 1.1; }
.trend { width: 100%; height: 70px; background: var(--surface-subtle); border-radius: 8px; }
.trend polyline { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.trend-views { stroke: var(--link); }
.trend-clicks { stroke: var(--selection); }
.stat-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; }
.stat-groups h3 { margin: 12px 0 8px; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bars li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 3em; gap: 8px; align-items: center; font-size: .88rem; }
.bar { height: 8px; background: var(--surface-subtle); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--link); border-radius: 999px; }
.bar-value { text-align: right; color: var(--ink-muted); }
.key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; }
.key-views { background: var(--link); }
.key-clicks { background: var(--selection); }
.case-block { display: grid; gap: 8px; padding: 12px; margin-bottom: 10px; border: 1px dashed var(--line); border-radius: var(--radius); }
.case-block .link-button { justify-self: start; }

/* Sponsored placements: labelled and kept apart from the organic results. */
.sponsored-block { margin: 8px 0 28px; padding: 14px 16px 6px; border: 1px dashed var(--line); border-radius: var(--radius); }
.sponsored-block h2 { margin: 0 0 10px; }
li.sponsored .card { position: relative; }
li.sponsored .card::before { content: "Sponsored"; position: absolute; top: 10px; left: 10px; z-index: 2; font-size: .75rem;
  font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--ink-muted); border: 1px solid var(--line); }
.upgrade { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 14px 0;
  border-bottom: 1px solid var(--line); }
.sponsor-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 6px 0;
  border-top: 1px dashed var(--line); }
@media (max-width: 640px) { .upgrade { grid-template-columns: minmax(0, 1fr); } }

/* Enhanced extras */
.mono.logo { background: var(--surface); border: 1px solid var(--line); padding: 4px; overflow: hidden; }
.mono.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.team { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.team li { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.case-image { max-width: 100%; height: auto; margin-top: 8px; border-radius: 8px; border: 1px solid var(--line); }
.extras.locked { opacity: .6; }
.logo-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.logo-row img { border: 1px solid var(--line); border-radius: 8px; object-fit: contain; background: var(--surface); }
.person-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; }
.form .label { display: block; font-weight: 600; margin-bottom: 6px; }
.case-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
@media (max-width: 640px) { .case-pair { grid-template-columns: minmax(0, 1fr); } }
.profile-facts, .case-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 6px 0 0; }
.profile-facts dt, .case-facts dt { color: var(--ink-muted); }
.profile-facts dd, .case-facts dd { margin: 0; }
@media (max-width: 640px) { .profile-facts, .case-facts { grid-template-columns: minmax(0, 1fr); } .profile-facts dd, .case-facts dd { margin-bottom: 6px; } }

/* Saved: side-by-side comparison (scrolls sideways on small screens; the first column stays put). */
.compare-wrap { overflow-x: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.compare { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .92rem; }
table.compare th, table.compare td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.compare thead th { background: var(--surface-subtle); }
table.compare th[scope="row"] { position: sticky; left: 0; background: var(--surface); color: var(--ink-muted); font-weight: 600; min-width: 140px; }
table.compare td { min-width: 180px; }
.inbox li { padding: 10px 0; border-top: 1px solid var(--line); white-space: pre-line; }

/* Home banner: a workshop scene, one image per theme (sunlit for light, evening for dark), across the page behind
   the headline, with open wall space on the left for the text. The picture is always drawn exactly as wide as the
   page (never zoomed or cropped); where the text needs more height it continues in the scene's colour and fades into
   the page. Light is the default; dark follows the device setting or the theme switch, like the rest of the site. */
.hero-banner { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1971 / 647;
  box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 32px 0 116px;
  --banner: var(--banner-light); --banner-sm: var(--banner-light-small); --hb-base: #E8D8C3;
  --hb-ink: #171716; --hb-muted: #3D3A33; --hb-shadow: 0 1px 14px rgba(246,240,230,.75);
  --hb-wash: linear-gradient(to right, rgba(246,240,230,.55) 0%, rgba(246,240,230,.22) 42%, rgba(246,240,230,0) 62%);
  --hb-field: rgba(255,255,255,.88); --hb-field-ink: #171716; --hb-field-line: rgba(23,23,22,.22);
  --hb-placeholder: rgba(23,23,22,.55);
  color: var(--hb-ink); background: var(--hb-base); }
.hero-banner::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--banner) center top / 100% auto no-repeat; }
.hero-banner::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--hb-wash), linear-gradient(to bottom, transparent 72%, var(--canvas) 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-banner {
    --banner: var(--banner-dark); --banner-sm: var(--banner-dark-small); --hb-base: #1C140D;
    --hb-ink: #F4EEE6; --hb-muted: rgba(244,238,230,.86); --hb-shadow: 0 2px 18px rgba(0,0,0,.5);
    --hb-wash: linear-gradient(to right, rgba(12,9,6,.5) 0%, rgba(12,9,6,.18) 45%, rgba(12,9,6,0) 65%);
    --hb-field: rgba(15,12,9,.62); --hb-field-ink: #F4EEE6; --hb-field-line: rgba(244,238,230,.28);
    --hb-placeholder: rgba(244,238,230,.6); }
}
:root[data-theme="dark"] .hero-banner {
  --banner: var(--banner-dark); --banner-sm: var(--banner-dark-small); --hb-base: #1C140D;
  --hb-ink: #F4EEE6; --hb-muted: rgba(244,238,230,.86); --hb-shadow: 0 2px 18px rgba(0,0,0,.5);
  --hb-wash: linear-gradient(to right, rgba(12,9,6,.5) 0%, rgba(12,9,6,.18) 45%, rgba(12,9,6,0) 65%);
  --hb-field: rgba(15,12,9,.62); --hb-field-ink: #F4EEE6; --hb-field-line: rgba(244,238,230,.28);
  --hb-placeholder: rgba(244,238,230,.6); }
.hero-banner .hero { padding: 0 var(--gutter); width: 100%; box-sizing: border-box; }
.hero-banner h1 { color: var(--hb-ink); text-shadow: var(--hb-shadow); margin-bottom: .3em; max-width: 13em; }
.hero-banner p.lead { color: var(--hb-muted); text-shadow: var(--hb-shadow); margin-bottom: 0; max-width: 34em; }
.hero-banner .search { margin-top: 16px; }
.hero-banner .search input { background: var(--hb-field); color: var(--hb-field-ink); border-color: var(--hb-field-line);
  backdrop-filter: blur(4px); }
.hero-banner .search input::placeholder { color: var(--hb-placeholder); }
/* The first section rides up over the bottom of the banner: its heading on the image, the first row of cards
   straddling the fade (as in the design mockup). */
.hero-banner + .wrap > .section:first-child { position: relative; z-index: 1; margin-top: -92px; }
.hero-banner + .wrap > .section:first-child .section-head h2 { color: var(--hb-ink); text-shadow: var(--hb-shadow); }
.hero-banner + .wrap > .section:first-child .section-head a { color: var(--hb-ink); }
.hero-banner + .wrap > .section:first-child .need-tile { box-shadow: 0 10px 30px rgba(0,0,0,.2); }
@media (max-width: 760px) {
  .hero-banner { padding: 40px 0 104px; }
  .hero-banner::before { background-image: var(--banner-sm); background-size: cover; background-position: 70% top; }
  .hero-banner::after { background: linear-gradient(color-mix(in srgb, var(--hb-base) 70%, transparent),
                                                    color-mix(in srgb, var(--hb-base) 70%, transparent)),
                                    linear-gradient(to bottom, transparent 72%, var(--canvas) 100%); }
  .hero-banner + .wrap > .section:first-child { margin-top: -84px; }
}
/* Country picker (several live countries; AIDIR-20). */
.country-choices { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.country-switch { margin-bottom: 12px; }