/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --color-bg:         #f4f6f9;
  --color-surface:    #ffffff;
  --color-border:     #dde1e9;
  --color-primary:    #1a56db;
  --color-primary-h:  #1648c0;
  --color-text:       #111827;
  --color-muted:      #6b7280;
  --color-hit:        #dc2626;
  --color-hit-bg:     #fef2f2;
  --color-danger-h:   #b91c1c;
  /* Darkened from the original #d97706/#16a34a - those computed to ~3.1:1
     against their light backgrounds, below the 4.5:1 WCAG AA threshold for
     normal-weight/small text (these badges are 12px bold, which doesn't
     qualify for the "large text" 3:1 exception). These compute to ~6.8:1. */
  /* Yellow is the highest-luminance hue, so darkening it enough for 4.5:1
     text contrast against a pale background always reads as brown/olive,
     not yellow - the opposite problem of the original too-light #d97706.
     Instead of colored text on a pale tint (the pattern hit/clear use),
     "possible" uses a solid vivid-yellow fill with dark ink text - the same
     treatment caution signage and warning badges/chips use everywhere,
     since it's the only way to be both unambiguously yellow and readable. */
  --color-possible:    #eab308;
  --color-possible-bg: #eab308;
  --color-possible-ink:#422006;
  --color-clear:      #166534;
  --color-clear-bg:   #f0fdf4;
  --radius:           8px;
  --shadow:           0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

a { color: var(--color-primary); }

.container { max-width: 1000px; margin: 0 auto; padding: 0 1.25rem; }

/* ── Header ── */
/* Pinned to the top of the viewport so the page's title stays in view on
   long pages - search history, the alerts list and the terms/privacy copy
   all run well past one screen. The background is already opaque, which
   sticky positioning requires since the page scrolls underneath it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-primary);
  color: #fff;
  padding: 1rem 0;
}
.site-header h1 { font-size: 1.6rem; font-weight: 700; }
.site-header .subtitle { font-size: .9rem; opacity: .85; margin-top: .2rem; }
.site-header .cache-notice { font-size: .78rem; opacity: .7; margin-top: .35rem; font-style: italic; }

/* Header + filter links stay pinned while the alerts list scrolls beneath
   them - both need an opaque background since content scrolls underneath. */
.alerts-sticky-top { position: sticky; top: 0; z-index: 20; }
/* This wrapper does the pinning for both bars, so the header inside it must
   not also stick: nesting the two would pin the header within an already-
   pinned box, and the --header-offset the script measures off this wrapper
   would no longer describe where the toolbar actually sits. */
.alerts-sticky-top .site-header { position: static; }
.alerts-toolbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  padding: .75rem 0;
}
.alerts-toolbar p { margin-bottom: 0; }
.alerts-toolbar p + p { margin-top: .5rem; }

/* Column headings stay visible while the alert rows scroll beneath them.
   top is set via JS (--header-offset, in review-alerts.php's script) to the
   sticky top bar's actual height, since it varies with which links render -
   without that offset this row would sit at the very top of the viewport,
   overlapping the sticky bar above it instead of sitting just below it. */
.alerts-main-table thead th {
  position: sticky;
  top: var(--header-offset, 0px);
  background: var(--color-surface);
  z-index: 15;
}

/* position: sticky computes its offset relative to the nearest ancestor
   that establishes a scroll container - and .table-wrap's overflow-x: auto
   makes the browser resolve overflow-y to auto too (per the CSS Overflow
   spec's "mixed visible/non-visible" rule), turning .table-wrap itself into
   that scroll container instead of the page. Since .table-wrap never
   actually scrolls internally, the sticky header ends up pinned to a
   meaningless offset partway down the table instead of the page top.
   Overriding back to fully visible (both axes - overflow-y: visible alone
   gets silently re-resolved to auto by the browser, so both must be unset)
   restores the header's stickiness relative to the page, at the cost of
   this table no longer scrolling horizontally on narrow viewports. */
/* Compound selector (higher specificity than plain .table-wrap) so this
   wins regardless of source order in the stylesheet - .table-wrap's own
   overflow-x: auto appears later in this file and would otherwise win the
   cascade for that property despite this rule, silently re-trapping the
   sticky header (this happened - the fix looked correct at first paint,
   then "reverted" as the broken mid-table stickiness took over on scroll). */
.table-wrap.alerts-main-table-wrap { overflow: visible; }

/* Leaves room above an alert (its own height plus the sticky column
   headings') when scrolled to via #alert-<id> - e.g. after Update - so the
   two sticky layers above don't end up covering the row that was just
   updated. Also set via JS (--scroll-offset) for the same reason as above. */
.alert-group { scroll-margin-top: var(--scroll-offset, 0px); }

/* ── Account bar ── */
.account-bar {
  background: #eef2ff;
  color: var(--color-text);
  font-size: .85rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.account-bar a { font-weight: 600; }

/* ── Main layout ── */
main { padding: 2rem 0 3rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Card ── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

/* ── Tab group: zero gap so tabs touch the panel ── */
.tab-group { display: flex; flex-direction: column; }

/* ── Tabs ── */
.tabs { display: flex; gap: .5rem; }
.tab {
  padding: .55rem 1.1rem;
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid transparent;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tab.active {
  color: var(--color-primary);
  border-color: var(--color-border);
  border-bottom-color: var(--color-surface);
  position: relative;
  bottom: -1px;
  z-index: 1;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Controls ── */
.controls { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 5px; }

.control-label {
  display: block;
  font-weight: 600;
  font-size: .875rem;
  margin-bottom: .5rem;
  color: var(--color-text);
}

/* Algorithm chips */
.chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: .75rem;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  cursor: pointer;
}

/* Dual slider */
.slider-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-bottom: .6rem;
  font-size: .8rem;
  color: var(--color-text);
}
.legend-item { display: flex; align-items: center; gap: .35rem; }
.legend-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.swatch-clear    { background: var(--color-clear); }
.swatch-possible { background: var(--color-possible); }
.swatch-hit      { background: var(--color-hit); }

.dual-slider-wrap {
  position: relative;
  height: 36px;
  max-width: 400px;
  display: flex;
  align-items: center;
}
.slider-colored-track {
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 0;
}
.range-input {
  position: absolute;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
  height: 36px;
  margin: 0;
  z-index: 1;
}
.range-input:focus { outline: none; }
.range-input::-webkit-slider-runnable-track { background: transparent; }
.range-input::-moz-range-track { background: transparent; height: 6px; }

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.range-input::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  cursor: pointer;
  pointer-events: auto;
}
#band-slider::-webkit-slider-thumb      { background: var(--color-possible); }
#band-slider::-moz-range-thumb          { background: var(--color-possible); }
#threshold-slider::-webkit-slider-thumb { background: var(--color-hit); }
#threshold-slider::-moz-range-thumb     { background: var(--color-hit); }

.threshold-labels {
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  font-size: .75rem;
  color: var(--color-muted);
  margin-top: .25rem;
}

/* ── Forms ── */
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .4rem;
}
.field input[type="text"],
.field input[type="password"],
.field input[type="email"] {
  width: 100%;
  max-width: 480px;
  padding: .6rem .875rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  outline: none;
  transition: border-color .15s;
}
.field input[type="text"]:focus,
.field input[type="password"]:focus,
.field input[type="email"]:focus { border-color: var(--color-primary); }

.btn-primary {
  display: inline-block;
  padding: .6rem 1.4rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-h); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }

.btn-danger {
  display: inline-block;
  padding: .6rem 1.4rem;
  background: var(--color-hit);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.btn-danger:hover:not(:disabled) { background: var(--color-danger-h); }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; }

/* ── Drop zone ── */
.drop-zone {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: .65rem 1rem;
  cursor: pointer;
  text-align: center;
  color: var(--color-muted);
  transition: border-color .15s, background .15s;
  margin-bottom: 1rem;
}
.drop-zone:hover,
.drop-zone.drag-over { border-color: var(--color-primary); background: #eff4ff; }
.drop-zone.has-file { border-style: solid; border-color: var(--color-primary); }
.drop-zone.locked { opacity: .5; cursor: not-allowed; pointer-events: none; }

.upload-icon { width: 1.25rem; height: 1.25rem; fill: currentColor; flex-shrink: 0; }
.drop-label { font-size: .9rem; }
.file-selected { font-size: .875rem; color: var(--color-primary); font-weight: 500; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.help-text { font-size: .875rem; color: var(--color-muted); margin-bottom: 1rem; }

/* ── Status bar ── */
.status-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .875rem 1.25rem;
  font-weight: 500;
  color: var(--color-muted);
}
.status-error {
  border-color: var(--color-hit);
  background: var(--color-hit-bg);
  color: var(--color-hit);
}

.spinner {
  width: 1.25rem; height: 1.25rem;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Results ── */
#results-section {}

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .875rem;
}
.results-header h2 { font-size: 1.1rem; font-weight: 700; }
.results-count {
  font-size: .85rem;
  font-weight: 400;
  color: var(--color-muted);
  margin-left: .4rem;
}

.download-group { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--color-muted); }
.btn-download {
  padding: .35rem .8rem;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius);
  color: var(--color-primary);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.btn-download:hover { background: var(--color-primary); color: #fff; }

/* Table */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--color-border); }
#results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  background: var(--color-surface);
}
#results-table th {
  text-align: left;
  padding: .65rem 1rem;
  background: #f8f9fb;
  border-bottom: 1px solid var(--color-border);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
  white-space: nowrap;
}
#results-table td {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
#results-table tbody tr:last-child td { border-bottom: none; }
#results-table tbody tr:hover { background: #fafbfd; }

.history-table { width: 100%; border-collapse: collapse; }
.history-table th {
  text-align: left;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-muted);
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--color-border);
}
.history-table td { padding: .6rem .9rem; border-bottom: 1px solid var(--color-border); font-size: .9rem; }
.history-table tbody tr:last-child td { border-bottom: none; }
.history-table tbody tr { transition: background-color .15s ease; }
.history-table tbody tr:hover { background: #fafbfd; }
.history-table a { margin-right: .75rem; }

/* An alert's main row and its detail row (history + note) below it read as
   one block - no divider between them - so the divider between one alert's
   block and the next only appears once, under the detail row. */
.history-table > tbody > tr.alert-row > td { border-bottom: none; }
.history-table > tbody > tr.alert-detail-row > td { border-bottom: 2px solid var(--color-border); }

/* Each alert's row and its note row below it are grouped into their own
   <tbody> (tables allow more than one) specifically so hovering either one
   highlights both together, instead of only whichever row the mouse is
   actually over. */
.history-table tbody.alert-group:hover td { background: #fafbfd; }

.alert-detail-row.collapsed { display: none; }
.alert-row { cursor: pointer; }

/* Disposition status cues (review-alerts.php and history.php): a red X for
   a confirmed true match, a green check for a false positive, and a yellow
   square for an escalation, so a reviewer can spot each row's outcome
   without reading the Status cell. Class suffixes match the alerts.status
   enum values verbatim. */
.status-icon { font-weight: 700; font-size: 1rem; line-height: 1; }
td > .status-icon { margin-left: .4rem; }
.status-icon-true_match     { color: var(--color-hit); }
.status-icon-false_positive { color: var(--color-clear); }
/* A search run that flagged nothing gets a double check - the negative
   letter-spacing tightens the pair so it reads as one mark rather than two
   separate icons. */
.status-icon-no_hits        { color: var(--color-clear); letter-spacing: -.15em; }
.status-icon-escalated      { color: var(--color-possible); }
/* "Still being reviewed" is the absence of an outcome, so it is deliberately
   monochrome - it reads as unfinished next to the four colour-coded verdicts
   rather than competing with them for attention. */
.status-icon-incomplete     { color: var(--color-text); }

/* Legend decoding the Review column's marks (history.php), sitting above the
   table. Wraps to as many lines as it needs on narrow screens. */
.review-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.25rem;
  margin: 0 0 .75rem;
  padding: 0;
  list-style: none;
  font-size: .85rem;
  color: var(--color-muted);
}
.review-legend li { display: flex; align-items: center; gap: .35rem; }
.review-legend .status-icon { font-size: .95rem; }
.review-legend-title { font-weight: 600; color: var(--color-text); }

.status-filters { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* Search History date-range filter (history.php). Wraps on narrow screens
   rather than pushing the table into a horizontal scroll. */
.history-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: 1rem;
}
.history-filter input[type="date"],
.history-filter select {
  padding: .4rem .6rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  color: inherit;
  background: var(--color-surface);
}
.history-filter input[type="date"]:focus,
.history-filter select:focus { outline: none; border-color: var(--color-primary); }
.range-note { margin: -.5rem 0 1rem; color: var(--color-muted); font-size: .9rem; }

/* Export controls and background exports list (export-panel.php), under the
   date filter on history.php and admin-company-history.php. The buttons
   borrow .btn-download's outline look, which was written for links, so the
   button defaults it doesn't cover are reset here. */
.export-panel { margin-bottom: 1.25rem; }
.export-form button.btn-download { background: transparent; font-family: inherit; cursor: pointer; }
.export-form button.btn-download:hover { background: var(--color-primary); color: #fff; }
.export-heading { display: flex; align-items: baseline; gap: .75rem; font-size: 1.1rem; margin: 1rem 0 .5rem; }
.export-refresh { font-size: .85rem; font-weight: 400; }

/* The run picker on export.php: every run in the range, so the list is
   capped by height rather than by row count - "select every run" has to mean
   all of them, which means none may be left off the page. The heading row
   stays put while the list scrolls, so the select-all box is always in reach. */
.export-runs { margin-bottom: 1rem; }
.export-runs-note { margin: 0 0 .5rem; }
.export-runs-wrap { max-height: 22rem; overflow-y: auto; }
.export-runs-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface);
}
.export-run-tick { width: 1px; padding-right: 0; }
.export-run-tick input { display: block; cursor: pointer; }
/* The date cell labels its row's tick box, so it should read as a target
   rather than as plain text. */
.export-runs-table td label { cursor: pointer; }

.alert-notes-table { margin-bottom: .6rem; font-size: .85rem; }
.disposition-form { margin-top: .6rem; text-align: right; }
.note-textarea {
  width: 100%;
  padding: .6rem .875rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  outline: none;
  resize: vertical;
  transition: border-color .15s;
}
.note-textarea:focus { border-color: var(--color-primary); }
.field-error {
  color: var(--color-hit);
  font-size: .8rem;
  margin-top: .35rem;
  text-align: left;
}

/* ── Contact form ──
   The fields had no styling at all, so they rendered at the browser's default
   ~20-character width inside a 1000px card. They now fill the form's width and
   share the same border/focus treatment as every other input on the site. */
.contact-form { max-width: 640px; }
.contact-form p { margin-bottom: 1.1rem; }
.contact-form label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .35rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  display: block;
  width: 100%;
  padding: .6rem .875rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  color: inherit;
  background: var(--color-surface);
  outline: none;
  transition: border-color .15s;
}
.contact-form textarea { resize: vertical; min-height: 11rem; }
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus { border-color: var(--color-primary); }
.contact-form .field-error { display: block; }
/* The honeypot is positioned off-screen by .hp-field; this keeps the rules
   above from reserving layout space for it. */
.contact-form .hp-field { margin: 0; }

/* Contact-form honeypot — hidden from humans, present for bots. Uses
   positioning instead of display:none so unsophisticated bots still see
   a fillable field. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Verdict badges */
.badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.badge-hit      { background: var(--color-hit-bg);      color: var(--color-hit); }
.badge-possible { background: var(--color-possible-bg); color: var(--color-possible-ink); }
.badge-clear    { background: var(--color-clear-bg);    color: var(--color-clear); }


/* ── Responsive ── */
@media (max-width: 600px) {
  .results-header { flex-direction: column; align-items: flex-start; }
}

/* ── Footer ── */
.site-footer {
  margin-top: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: .5rem;
  font-size: .85rem;
}
.footer-nav a {
  color: var(--color-muted);
  text-decoration: none;
}
.footer-nav a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.footer-copyright {
  font-size: .8rem;
  color: var(--color-muted);
}

/* ── Static content pages (How to Use, Privacy, Terms, About, Contact) ── */
.content-page h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.5rem 0 .5rem;
}
.content-page h2:first-child { margin-top: 0; }
.content-page p { margin-bottom: .9rem; line-height: 1.6; }
.content-page ul { margin: 0 0 .9rem 1.25rem; }
.content-page li { margin-bottom: .4rem; }
.disclaimer-banner {
  background: var(--color-possible-bg);
  color: var(--color-possible-ink);
  border: 1px solid var(--color-possible-ink);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .875rem;
  margin-bottom: 1.25rem;
}
.disclaimer-banner--success {
  background: var(--color-clear-bg);
  color: var(--color-clear);
  border-color: var(--color-clear);
}
.disclaimer-banner a { color: inherit; text-decoration: underline; }

/* ── Pricing page ── */
/* The top margin is not decorative. The featured card's "Most Popular" badge
   is absolutely positioned above the card's own top edge, and scale(1.03)
   lifts that edge a few pixels further - together about 22px of the card
   sitting proud of the grid. main.container contributes no vertical padding
   (.container's "padding: 0 1.25rem" shorthand beats the main rule), so
   without this the badge starts above the sticky header's lower edge and the
   header, at z-index 30, paints over the top half of it. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.pricing-card { display: flex; flex-direction: column; text-align: center; }
.pricing-card h2 { font-size: 1.1rem; margin-bottom: .5rem; }
.pricing-price { font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; }
.pricing-price span { font-size: 1rem; font-weight: 400; color: var(--color-muted); }
.pricing-card ul { list-style: none; margin: 0 0 1.25rem; padding: 0; text-align: left; flex-grow: 1; }
.pricing-card li { margin-bottom: .5rem; padding-left: 1.25rem; position: relative; }
.pricing-card li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-clear); font-weight: 700; }
.pricing-card .btn-primary { text-align: center; }
.pricing-card .current-plan-badge {
  display: inline-block;
  /* Padding identical to .btn-primary, and the outline draws the edge
     without taking part in layout - .btn-primary has border: none, so a real
     border here would make this box taller and leave the signed-in user's
     own tier sitting above the buttons either side of it. (Compensating in
     the padding instead lands a pixel off, because a 1.5px border does not
     round the same way on both axes.) */
  padding: .6rem 1.4rem;
  background: var(--color-bg);
  color: var(--color-muted);
  outline: 1.5px solid var(--color-border);
  outline-offset: -1.5px;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
}
/* No scale() here on purpose. Scaling this card about its centre left its
   call-to-action 2.7px below the other three tiers' and rendered it 1.3px
   taller - the cards all lay out at the same height, so the buttons line up
   exactly until a transform moves one of them. The border, shadow and the
   "Most Popular" badge carry the emphasis instead.
   position: relative is what the badge positions against. */
/* The emphasis ring is a recoloured 1px border plus a 1px inset outline,
   rather than a 2px border. Outlines take no part in layout, so all four
   cards keep identical inner geometry and their buttons line up to the
   pixel; a 2px border here ate one more pixel top and bottom than the other
   cards' 1px, which lifted this card's button by 1px. The two rings meet
   edge to edge, so it still reads as one 2px ring. */
.pricing-card--featured {
  border-color: var(--color-primary);
  outline: 1px solid var(--color-primary);
  outline-offset: -1px;
  box-shadow: 0 4px 16px rgba(26, 86, 219, .15);
  position: relative;
}
.pricing-badge {
  position: absolute;
  top: -1.1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .25rem .75rem;
  border-radius: 999px;
  /* Absolutely positioned with left: 50% and no width, so shrink-to-fit only
     gets the space between the 50% mark and the card's right edge - about
     half the card. That is narrower than "Most Popular", so the pill wrapped
     to two lines and rendered as a lozenge. nowrap lets it size to its text,
     which translateX(-50%) then centres properly. */
  white-space: nowrap;
}