/* Card layout (D-31, relaxes D-23 and D-26): white header with the company name in the store red; a dark rounded
   hero card; a very light grey page with white rounded cards (12px), 24-32px apart; solid rounded buttons (8px);
   small tinted tags; one card per brand with a light block per promotion.
   Still not allowed: gradients, glow, large shadows, emoji, marketing copy.
   One font, sizes 32 / 24 / 20 / 16 / 14. One red (--red) for the company name and the amounts.
   All text colors reach WCAG AA (4.5:1) on the background they sit on, in light and dark mode. */
:root {
  --page: #f1f2f4;            /* very light grey page */
  --surface: #ffffff;         /* cards */
  --block: #f4f5f7;           /* one promotion inside a brand card */
  --ink: #1a1d23;
  --muted: #555b66;           /* 6.0:1 on block */
  --line: #e2e5ea;
  --red: #c43a2b;             /* company name and amounts: 5.3:1 on white, 4.8:1 on block */
  --solid: #16213a;           /* dark navy: hero card, picked brand, Details, call buttons */
  --on-solid: #ffffff;
  --hero-ink: #ffffff;
  --hero-muted: #c8cfdc;      /* 10.3:1 on navy */
  --notice-bg: #24314f;       /* notice panel inside the hero card */
  --notice-line: #3d4d73;
  --tag-instant-bg: #e2f1e7; --tag-instant: #17532d;
  --tag-claim-bg: #e3ebf7;   --tag-claim: #1d4479;
  --tag-soon-bg: #fbe9c8;    --tag-soon: #6a3f00;
  --control-bg: #ffffff;
  --link: #1d4479;
  --amount-col: 192px;        /* "Up to $5,368" at 28px bold fits on one line */
  --label-col: 144px;
  --r-card: 12px;
  --r-btn: 8px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0f1115;
    --surface: #181b21;
    --block: #22262e;
    --ink: #eceef2;
    --muted: #a9b0bc;         /* 6.9:1 on block */
    --line: #2f343d;
    --red: #ff8a7a;           /* lighter red for dark mode: 6.6:1 on block, 7.5:1 on surface */
    --solid: #e6e9ef;         /* picked brand, Details, call buttons: light solid with dark text */
    --on-solid: #12151b;
    --hero-bg: #1a2744;
    --hero-line: #2f3f63;
    --hero-ink: #ffffff;
    --hero-muted: #c8cfdc;
    --notice-bg: #24345a;
    --notice-line: #3d5080;
    --tag-instant-bg: #193a26; --tag-instant: #9be0b2;
    --tag-claim-bg: #1b2d4a;   --tag-claim: #a9c8f4;
    --tag-soon-bg: #3f2e10;    --tag-soon: #f3cf86;
    --control-bg: #12151b;
    --link: #a9c8f4;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; line-height: 1.25; }
p, ul, ol, dl, dd { margin: 0; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* White rounded cards on the grey page. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }

/* Solid and bordered buttons, 8px corners. */
.toggle, .call, .brand-btn[aria-pressed="true"], #brand-clear {
  background: var(--solid); color: var(--on-solid); border: 1px solid var(--solid);
}

/* Header: white band, company name in red on the left, the two show rooms in two columns on the right. */
.head-band { padding: 24px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
/* Company name sized to balance the two show-room columns; centered on them vertically (align-items above). */
.head-band .store-name { font-size: 38px; font-weight: 700; line-height: 1.15; color: var(--red); white-space: nowrap; }
.head-band .stores { display: grid; grid-template-columns: repeat(2, auto); gap: 0 40px; font-size: 14px; }
.head-band .store-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.store a { color: var(--ink); }
.call-buttons { display: none; }

/* Hero: a dark rounded card with the campaign, the intro and the Important notice. */
.hero {
  margin-top: 24px; padding: 32px; border-radius: var(--r-card);
  background: var(--hero-bg, var(--solid)); color: var(--hero-ink); border: 1px solid var(--hero-line, var(--solid));
}
.head-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
h1 { font-size: 32px; font-weight: 700; }
.updated { font-size: 14px; color: var(--hero-muted); }
.intro { margin-top: 8px; max-width: 720px; color: var(--hero-muted); }
/* Header notice: always shown in full, never collapsed. Only "Important:" is bold. */
.notice { margin-top: 24px; padding: 16px; border-radius: var(--r-btn); background: var(--notice-bg); border: 1px solid var(--notice-line); color: var(--hero-ink); }
.notice strong { font-weight: 700; }

@media (max-width: 719px) {
  .head-band { padding: 16px 0; }
  .contact { display: block; }
  /* One line on every phone: scales with the screen width, 26px at 390px and above. */
  .head-band .store-name { font-size: clamp(18px, 6.6vw, 26px); }
  /* Phones: only the company name and one Call button per show room (48px high). Full details are in the footer. */
  .head-band .stores { display: none; }
  .call-buttons { display: grid; gap: 8px; margin-top: 16px; }
  .call { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 16px; border-radius: var(--r-btn); font-weight: 700; text-decoration: none; }
  .hero { margin-top: 16px; padding: 24px 16px; }
  h1 { font-size: 24px; }
}

/* Brand buttons in their own card: a wrapping row on desktop, a 3-column grid on phones. */
main.wrap { display: grid; gap: 24px; padding-top: 24px; }
.brand-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-btn, #brand-clear {
  font-size: 14px; line-height: 20px; padding: 10px 16px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-btn); cursor: pointer;
}
.brand-btn[aria-pressed="true"], #brand-clear { font-weight: 700; }
.brand-chosen { display: none; }
@media (max-width: 719px) {
  main.wrap { gap: 16px; padding-top: 16px; }
  .card { padding: 16px; }
  .brand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-btn { padding: 10px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brands.has-choice .brand-grid { display: none; }
  .brands.has-choice .brand-chosen { display: block; }
}

/* Search and the extra filters: one card. */
.filters { display: grid; gap: 8px; }
.filters input[type="search"], .filters select {
  width: 100%; background: var(--control-bg);
  border: 1px solid var(--line); border-radius: var(--r-btn); padding: 10px 12px;
}
.more-filters summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 8px 0 0; }
.more-body { display: grid; gap: 8px; padding-top: 8px; }
.f-select { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.f-select select { font-size: 16px; color: var(--ink); }
.f-check { display: flex; align-items: center; gap: 8px; }
.f-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--solid); }
@media (min-width: 720px) {
  .more-body { grid-template-columns: repeat(2, minmax(0, 240px)) auto; align-items: end; }
}
.count, .hint { font-size: 14px; color: var(--muted); margin-bottom: -8px; }
.count:empty { display: none; }

/* One card per brand; inside it one light block per promotion, 16px apart. Brand cards 32px apart. */
.list { display: grid; gap: 32px; }
.group { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.group[hidden] { display: none; }
.brand { font-size: 24px; font-weight: 700; }
.xref { font-size: 14px; color: var(--muted); }
.item { background: var(--block); border-radius: var(--r-btn); padding: 24px; }
.item[hidden], .xref[hidden] { display: none; }
@media (max-width: 719px) {
  .list { gap: 24px; }
  .group { padding: 16px; gap: 12px; }
  .brand { font-size: 20px; }
  .item { padding: 16px; }
}

/* One promotion: summary rows, details on request (they open inside the same block). */
.item-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.col-amount { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.amount { font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--red); }
/* Tinted tags: how you get it, and Ending soon. 6px corners, not pills. */
.tag, .how-get { display: inline-block; font-size: 14px; line-height: 20px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.tag { background: var(--tag-soon-bg); color: var(--tag-soon); }
.how-get.instant { background: var(--tag-instant-bg); color: var(--tag-instant); }
.how-get.claim { background: var(--tag-claim-bg); color: var(--tag-claim); }
.col-main { min-width: 0; display: grid; gap: 8px; }
.col-main > * { min-width: 0; }
.title { font-size: 20px; font-weight: 600; }
.summary { color: var(--muted); max-width: 720px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; font-size: 14px; }
.meta > span + span:not(:nth-child(2))::before { content: "·"; margin-right: 8px; color: var(--muted); }
.meta > .how-get { margin-right: 4px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.toggle, .downloads a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: var(--r-btn);
  font-size: 14px; font-weight: 600; line-height: 20px; text-decoration: none; cursor: pointer;
}
.toggle::after { content: "\25B8"; margin-left: 8px; }
.toggle[aria-expanded="true"]::after { content: "\25BE"; }
.downloads { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.downloads a { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.downloads a:hover { border-color: var(--muted); }
.downloads a::before { content: "\2193"; margin-right: 8px; }
/* "See the official terms for full details." right under the buttons; hidden if an item has no downloads. */
.official-note { font-size: 14px; color: var(--muted); }
.actions:not(:has(.downloads a)) + .official-note { display: none; }
.details { display: grid; gap: 16px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (min-width: 720px) {
  .item-grid { grid-template-columns: var(--amount-col) minmax(0, 1fr); gap: 0 24px; }
  .col-amount { display: block; }
  .col-amount .tag { margin-top: 8px; }
  /* Inside Details, tiers, dates and claim facts share one value edge. */
  .details .rows, .details .tiers { grid-template-columns: 288px minmax(0, 1fr); max-width: none; }
}
@media (max-width: 719px) {
  .toggle, .downloads a { min-height: 48px; }
}

/* Label/value rows: tiers, other dates, claim facts. Labels in a fixed column so values line up. */
.rows { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); gap: 0 16px; }
.rows:empty { display: none; }
.rows dt { color: var(--muted); }
.rows dd { min-width: 0; }
.tiers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 560px; gap: 8px 16px; }
.tiers dt { color: var(--ink); }

.block h4 { font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.steps, .conditions, .translation-lines { padding-left: 24px; }
.steps li + li, .conditions li + li, .translation-lines li + li { margin-top: 8px; }
.how .note { margin-bottom: 8px; }
.claim-link { margin-top: 8px; }
.claim-link:empty { display: none; }
.claim-link a + a { margin-left: 16px; }
.claim-facts { margin-top: 8px; font-size: 14px; }
.ext::after { content: " \2197"; font-size: 14px; }

details summary { cursor: pointer; }
.translation-lines { margin-top: 8px; font-size: 14px; color: var(--muted); }
.models summary { font-weight: 600; }
.models .note { margin-top: 8px; font-size: 14px; color: var(--muted); }
.model-group { margin-top: 16px; }
.model-group h5 { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.model-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 0 16px; font-size: 14px; }
.model-list li { overflow-wrap: anywhere; }
.model-list li.hit { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.model-list .amt { color: var(--muted); margin-left: 8px; }

.empty { color: var(--muted); padding: 32px 0; }

/* Footer: one card with both show rooms and the website, one card with the Disclaimer. */
.page-foot { display: grid; gap: 24px; margin-top: 32px; padding-bottom: 48px; }
.foot-contact .store-name { font-size: 20px; font-weight: 700; color: var(--red); margin-bottom: 16px; }
.foot-contact .stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.foot-contact .store-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.foot-contact .tel { display: inline-block; line-height: 32px; }
.foot-contact .website { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.foot-contact .website a { color: var(--link); }
/* Wide screens: the header already shows both show rooms in full, so the footer card is one line, the company
   name and the website. The breakpoint is the header's (719/720px): at every width each show room's address,
   phones and email are visible in the header or the footer (tools/lib/contact-visibility.mjs checks this). */
@media (min-width: 720px) {
  .foot-contact { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
  .foot-contact .stores { display: none; }
  .foot-contact .store-name { margin-bottom: 0; }
  .foot-contact .website { margin-top: 0; padding-top: 0; border-top: 0; }
}
.page-foot .note-head { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
/* Disclaimer: full ink color (not muted) so it reads as part of the page, not fine print. */
.disclaimer { max-width: 720px; display: grid; gap: 8px; }
.disclaimer ul { padding-left: 24px; margin: 0; display: grid; gap: 8px; }
.listing-note { max-width: 720px; color: var(--muted); font-size: 14px; margin-top: 16px; }
@media (max-width: 719px) {
  .page-foot { gap: 16px; margin-top: 24px; }
  .foot-contact .stores { grid-template-columns: 1fr; gap: 24px; }
  .foot-contact .tel { font-size: 20px; line-height: 48px; }
  .foot-contact .mail { display: inline-block; line-height: 48px; }
}