:root {
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #eeeeee;
  color: #1c1c1c;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #1c1c1c;
    color: #e0e0e0;
  }
}

.topbar {
  padding: 1.25rem 1rem 0.75rem;
  text-align: center;
}
.topbar h1 {
  margin: 0;
  font-size: 1.4rem;
}
.logo-link {
  display: inline-block;
  line-height: 0;
}
/* The logo images have a solid background baked in (not transparent —
   they're flat exports, not PNGs with alpha) matching the brand's exact
   dark/light tones. .topbar has no background of its own, so it just
   shows body's — which uses those exact same tones (see body, above) —
   letting the logo blend in with no visible box around it. */
.logo {
  height: 42px;
  width: auto;
  display: block;
}
.logo-dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  .logo-light {
    display: none;
  }
  .logo-dark {
    display: block;
  }
}
.subtitle {
  margin: 0.25rem 0 0;
  opacity: 0.65;
  font-size: 0.85rem;
}

.category-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.5rem 1rem 0;
}
.category-btn {
  flex: 1 1 160px;
  max-width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-radius: 0.65rem;
  border: 1px solid #d4d4d4;
  background: white;
  color: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.category-btn.active {
  border-color: #b45309;
  background: #b45309;
  color: white;
}
/* Each plain-link category button gets its own accent — distinct from
   the green used for active filter toggles elsewhere, and distinct
   from each other, so they read as deliberate separate destinations
   rather than interchangeable chips. */
.category-btn-financing {
  border-color: #0d9488;
  background: rgba(13, 148, 136, 0.08);
  color: #0f766e;
}
.category-btn-financing:hover {
  background: rgba(13, 148, 136, 0.16);
}
.category-btn-dealers {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}
.category-btn-dealers:hover {
  background: rgba(37, 99, 235, 0.16);
}
@media (prefers-color-scheme: dark) {
  .category-btn {
    background: #262626;
    border-color: #3d3d3d;
  }
  .category-btn-financing {
    color: #2dd4bf;
    background: rgba(13, 148, 136, 0.15);
  }
  .category-btn-financing:hover {
    background: rgba(13, 148, 136, 0.22);
  }
  .category-btn-dealers {
    color: #60a5fa;
    background: rgba(37, 99, 235, 0.18);
  }
  .category-btn-dealers:hover {
    background: rgba(37, 99, 235, 0.26);
  }
}

/* Outer wrapper just supplies edge spacing on narrow screens — the
   actual card styling/centering lives on .hero-search below, so the
   two concerns (viewport-edge padding vs. card appearance + max-width)
   don't fight each other. */
.hero-search-wrap {
  padding: 0.75rem 1rem;
}
/* The AutoTempest-style primary search card: Make/Model, Location, and
   a free-text keyword search — deliberately just those, with
   everything else one tap away in .advanced-panel below, rather than
   every filter competing for attention in the first thing a visitor
   sees. */
.hero-search {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.25rem;
  border-radius: 1rem;
  background: white;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
@media (prefers-color-scheme: dark) {
  .hero-search {
    background: #262626;
    border-color: #3d3d3d;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  }
}
.hero-search input {
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #d4d4d4;
  font-size: 1rem;
  width: 100%;
  min-width: 0;
  background: white;
  color: inherit;
}
@media (prefers-color-scheme: dark) {
  .hero-search input {
    background: #1c1c1c;
    border-color: #3d3d3d;
  }
}
.hero-row {
  display: flex;
  gap: 0.6rem;
}
/* One rule handles both shapes: a single-field row's only child grows
   to fill it; a two-field row (the structured Makes & Models / Location
   row) splits it evenly. */
.hero-row > * {
  flex: 1 1 0;
  min-width: 0;
}
/* Wraps a field with a small static label above it (Makes & Models,
   Location) — static rather than placeholder-only, so it's still clear
   what a field is *after* you've typed something and the placeholder
   has disappeared. */
.hero-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.hero-field-label {
  padding-left: 0.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.6;
}
/* The structured row (Makes & Models / Location + Search) has one
   exception — the button should size to its own content, not stretch
   to an equal third-share like the two fields beside it. */
.hero-row-structured > .search-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .hero-row {
    flex-wrap: wrap;
  }
  .hero-row > * {
    flex: 1 1 100%;
  }
  /* On mobile the Search button becomes its own full-width row too,
     same as the fields above it — bigger tap target, no odd narrow
     button left dangling after three stacked fields. Needs to be
     restated here since the desktop rule above is otherwise more
     specific and would win even inside this media query. */
  .hero-row-structured > .search-btn {
    flex: 1 1 100%;
  }
}
/* Mirrors AutoTempest's divider between the structured search and the
   free-text "search by description" alternative below it. */
.hero-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  opacity: 0.55;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.hero-divider span:not(.hero-divider-text) {
  flex: 1 1 auto;
  height: 1px;
  background: #d4d4d4;
}
@media (prefers-color-scheme: dark) {
  .hero-divider span:not(.hero-divider-text) {
    background: #3d3d3d;
  }
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.2rem;
}
.advanced-panel {
  margin-top: 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #d4d4d4;
}
@media (prefers-color-scheme: dark) {
  .advanced-panel {
    border-top-color: #3d3d3d;
  }
}

/* Grid rather than flex-wrap: with flex, a plain single-line <input>
   sharing a wrapped row with a taller .range-group (a labeled box with
   two stacked inputs) would stretch to match its height by default —
   every other field on that row ends up an odd, inconsistent height
   depending on what it happened to wrap next to. Grid's
   align-items:start keeps each field at its own natural height, and
   same-width auto-fill columns line everything up into clean rows
   instead of a ragged wrap. */
.filters-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
  align-items: start;
  width: 100%;
}

/* filter-combobox's own root element — a plain positioning wrapper so
   its suggestion list can float below the input without affecting the
   grid layout it sits in. */
.combobox {
  position: relative;
  width: 100%;
}
.combobox-list {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: white;
  border: 1px solid #d4d4d4;
  border-radius: 0.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.combobox-list li {
  padding: 0.65rem 0.75rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.92rem;
}
.combobox-list li.highlighted,
.combobox-list li:hover {
  background: rgba(180, 83, 9, 0.12);
}
@media (prefers-color-scheme: dark) {
  .combobox-list {
    background: #262626;
    border-color: #3d3d3d;
  }
  .combobox-list li.highlighted,
  .combobox-list li:hover {
    background: rgba(180, 83, 9, 0.25);
  }
}

/* Toggle for the secondary (less-used) filter row. Text-button styling
   — it should read as "reveal more options", not compete visually with
   the Search/Reset actions above it. */
.more-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 0.85rem;
  cursor: pointer;
}
.more-toggle:hover {
  opacity: 1;
}
.more-toggle-arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}
.more-toggle-arrow.open {
  transform: rotate(180deg);
}
.more-badge {
  background: #b45309;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
}

/* Groups a pair of min/max range inputs (Price, Year, Mileage) under
   one label — reads as one cohesive "Price"/"Year"/"Mileage" control
   instead of two anonymous number boxes floating among the other
   filter dropdowns. Spans the full grid row on its own since it's a
   visibly different shape (a labeled, bordered box) than the
   single-line filter-comboboxes it sits among. */
.range-group {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #d4d4d4;
  border-radius: 0.65rem;
}
.range-group-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.6;
}
.range-group-inputs {
  display: flex;
  gap: 0.5rem;
}
.range-group-inputs input {
  flex: 1 1 140px;
  width: auto;
}
@media (prefers-color-scheme: dark) {
  .range-group {
    border-color: #3d3d3d;
  }
}

/* Reused wherever a value can be sorted ascending/descending — Price
   and Year in the primary search bar, Mileage inside its .range-group
   in Advanced. */
.sort-toggle {
  display: flex;
  gap: 0.35rem;
}
.sort-toggle button {
  flex: 1 1 0;
  padding: 0.45rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid #d4d4d4;
  background: white;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.sort-toggle button.active {
  border-color: #b45309;
  background: #b45309;
  color: white;
}
@media (prefers-color-scheme: dark) {
  .sort-toggle button {
    background: #262626;
    border-color: #3d3d3d;
  }
}
/* The primary bar's Price/Year sort row: two labeled sort-toggle groups
   side by side on desktop, stacked on mobile like the structured row. */
.hero-sort-row {
  align-items: flex-start;
}
.sort-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.search-btn {
  flex: 0 0 auto;
  padding: 0.55rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid #b45309;
  background: #b45309;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.search-btn:hover {
  background: #92400e;
}

.reset-btn {
  flex: 0 0 auto;
  padding: 0.55rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #d4d4d4;
  background: transparent;
  color: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.reset-btn:hover {
  background: #e0e0e0;
}
@media (prefers-color-scheme: dark) {
  .reset-btn {
    border-color: #3d3d3d;
  }
  .reset-btn:hover {
    background: #262626;
  }
}

.state-msg {
  text-align: center;
  padding: 2rem 1rem;
  opacity: 0.7;
}
.state-msg.error {
  color: #dc2626;
  opacity: 1;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0.25rem 1rem 2rem;
}
@media (min-width: 560px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Clears space for the fixed compare bar so it doesn't cover the last row. */
.grid.has-compare-bar {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

.card {
  display: block;
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
@media (prefers-color-scheme: dark) {
  .card {
    background: #262626;
  }
}

.card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #e0e0e0;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(28, 28, 28, 0.75);
  color: white;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* .badge is a <button> here (see index.html), not a <span> — nested
   inside the card's outer <a>, since a real nested <a> isn't valid
   HTML — so it needs a button reset on top of the shared badge look. */
.badge-dealer {
  border: none;
  font: inherit;
  cursor: pointer;
}
.badge-dealer:hover {
  background: rgba(180, 83, 9, 0.85);
}

.card-body {
  padding: 0.75rem 1rem 1rem;
}
.card-body h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  line-height: 1.3;
}
.price {
  margin: 0 0 0.15rem;
  /* No color at all now — plain text color (inherited: dark ink in
     light mode, off-white in dark mode), same as everything else on
     the card. Weight carries the emphasis instead: 800 vs. the title's
     browser-default bold (~700) and the meta/location text's normal
     (400), so price still reads as the standout line without needing
     its own color. */
  font-weight: 800;
}
.price-approx {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.65;
}
.meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  padding: 0;
  font-size: 0.78rem;
  opacity: 0.85;
}
.meta li {
  background: #eeeeee;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
}
@media (prefers-color-scheme: dark) {
  .meta li {
    background: #3d3d3d;
  }
}
/* "Incoming" is the one status worth flagging (see NOTABLE_STATUSES in
   app.js) — amber rather than the plain neutral tag color so it reads
   as a heads-up, not just another spec. ".meta li.meta-status" (not
   just ".meta-status") so this outranks ".meta li" on specificity
   without needing !important. */
.meta li.meta-status {
  background: rgba(13, 148, 136, 0.15);
  color: #0f766e;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .meta li.meta-status {
    background: rgba(13, 148, 136, 0.25);
    color: #2dd4bf;
  }
}
.location {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.6;
}

.compare-toggle {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid #d4d4d4;
  background: transparent;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.compare-toggle.active {
  border-color: #b45309;
  background: rgba(180, 83, 9, 0.12);
  color: #b45309;
}
.compare-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
  .compare-toggle {
    border-color: #3d3d3d;
  }
  .compare-toggle.active {
    /* #b45309 only manages 3:1 against this card's dark background —
       fine for the border, not for text this size. Lighter amber here
       reads clearly (6.25:1) without changing the border/background,
       which don't have the same contrast requirement. */
    color: #e8940f;
  }
}

/* Sticky bar: floats above everything once >=1 car is picked to
   compare. Padding-bottom leaves room for the iOS home-indicator strip
   on notched phones so the Clear/Compare buttons stay tappable. */
.compare-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  background: white;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  flex-wrap: wrap;
}
@media (prefers-color-scheme: dark) {
  .compare-bar {
    background: #262626;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
  }
}
.compare-bar-items {
  display: flex;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}
.compare-bar-item {
  position: relative;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #e0e0e0;
}
.compare-bar-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.compare-bar-remove {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: none;
  background: #dc2626;
  color: white;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}
.compare-bar-actions {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.compare-bar-clear {
  padding: 0.5rem 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid #d4d4d4;
  background: transparent;
  color: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.compare-bar-view {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #b45309;
  background: #b45309;
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.compare-bar-view:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
  .compare-bar-clear {
    border-color: #3d3d3d;
  }
}

/* Full comparison table. */
.compare-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 28, 28, 0.6);
  padding: 1rem;
}
.compare-modal {
  background: white;
  border-radius: 0.75rem;
  max-width: 100%;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .compare-modal {
    background: #262626;
  }
}
.compare-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e0e0e0;
}
@media (prefers-color-scheme: dark) {
  .compare-modal-header {
    border-bottom-color: #3d3d3d;
  }
}
.compare-modal-header h2 {
  margin: 0;
  font-size: 1.05rem;
}
.compare-close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}

/* The table itself scrolls horizontally on narrow screens — each car
   gets its own column, and the spec-label column stays pinned on the
   left via position:sticky so it's still readable mid-swipe. */
.compare-table-wrap {
  overflow: auto;
  padding: 0 1.25rem 1.25rem;
}
.compare-table {
  border-collapse: collapse;
  width: 100%;
}
.compare-table th,
.compare-table td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  font-size: 0.85rem;
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .compare-table th,
  .compare-table td {
    border-bottom-color: #3d3d3d;
  }
}
.compare-table th.spec-label {
  position: sticky;
  left: 0;
  z-index: 1;
  background: white;
  font-weight: 600;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .compare-table th.spec-label {
    background: #262626;
  }
}
.compare-table thead th {
  vertical-align: top;
  min-width: 160px;
}
.compare-table thead th img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.5rem;
  display: block;
  margin-bottom: 0.4rem;
}
.compare-title {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: normal;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.compare-remove-col {
  padding: 0.25rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid #d4d4d4;
  background: transparent;
  color: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .compare-remove-col {
    border-color: #3d3d3d;
  }
}
.compare-view-link {
  color: #b45309;
  font-weight: 600;
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  .compare-view-link {
    /* Same reasoning as .compare-toggle.active — #b45309 doesn't have
       enough contrast against this modal's dark background. */
    color: #e8940f;
  }
}

/* dealers.html — a directory of dealers, each linking to that dealer's
   full inventory on the main page via ?source=. */
.dealer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  padding: 0.5rem 1rem 2rem;
  max-width: 900px;
  margin: 0 auto;
}
.dealer-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  background: white;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dealer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.dealer-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: capitalize;
}
.dealer-card-count {
  font-size: 0.85rem;
  opacity: 0.65;
}
@media (prefers-color-scheme: dark) {
  .dealer-card {
    background: #262626;
    border-color: #3d3d3d;
  }
}

.dealers-back {
  text-align: center;
  padding: 0 1rem 2rem;
}
/* Shared by dealers.html's "back to listings" link and financing.html's
   — both sit directly on the page body background, not a card. */
.back-link {
  color: #b45309;
  font-weight: 600;
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  .back-link {
    /* Sits directly on the page body background (dark #1c1c1c) —
       same contrast fix as the other text-only amber usages. */
    color: #e8940f;
  }
}