/* ==========================================================================
   CouponUpdates - frontend stylesheet (v7)
   Mobile first. No frameworks, no external fonts, no network requests.

   Design notes
   ---------------------------------------------------------------------------
   Subject   A coupon site whose whole promise is "a person opened this and
             here is the date they checked it." So the page is built to read
             like a verification record, not a discount bin.

   Rhythm    The page alternates dark / paper / white / dark. The hero and the
             steps band are deep pine; browsing sits on paper; the footer
             closes dark again. That gives the page structure you can feel
             while scrolling, instead of one flat wash of cards.

   Motif     Perforation. The coupon is a real torn ticket - dashed seam,
             punched notches, a corner flag on the best offer - and the hero
             tears away from the page along the same scalloped edge.

   Colour    Pine carries structure and trust. Marigold appears on money and
             nothing else: a discount value, an offer count, a step number.
             Clay appears only on something expired or wrong.

   Depth     Borders, not shadows. Two things lift off the page: the coupon
             ticket and floating UI. Radius is a hierarchy, not a habit.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink */
  --ink:        #12291f;
  --ink-deep:   #0b1a14;
  --ink-body:   #2e3b33;
  --muted:      #647065;

  /* Paper & rules */
  --paper:      #eef2ea;
  --card:       #ffffff;
  --rule:       #d4dccf;
  --rule-soft:  #e6eae1;

  /* Pine - structure, trust, primary action */
  --pine:       #1e5c43;
  --pine-dark:  #16452f;
  --pine-tint:  #e2ede6;

  /* Marigold - money, and only money */
  --gold:       #b8700d;
  --gold-lift:  #e0a02f;
  --gold-deep:  #8c5208;
  --gold-tint:  #fbf0da;

  /* Clay - expired, invalid, error */
  --clay:       #9c3a2e;
  --clay-tint:  #fbe9e5;

  /* On dark surfaces */
  --on-ink:      #dfe8e1;
  --on-ink-soft: #9aab9f;

  /* Type */
  --sans:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
           "Liberation Mono", monospace;

  /* Spacing (4px base) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Shape - a hierarchy, deliberately not one value */
  --r-tile:   4px;
  --r-btn:    7px;
  --r-ticket: 12px;

  /* Lift - used sparingly */
  --lift-ticket: 0 1px 0 rgba(18, 41, 31, .04), 0 12px 28px -16px rgba(18, 41, 31, .34);
  --lift-pop:    0 16px 40px -12px rgba(18, 41, 31, .32);
  --lift-stub:   0 14px 30px -18px rgba(0, 0, 0, .7);

  /* The perforation motif */
  --perf-x: var(--rule);
  --perf-y: var(--rule);

  --container: 1200px;
  --header-h:  68px;
}


/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--ink);
  margin: 0 0 var(--s3);
  line-height: 1.16;
  text-wrap: balance;
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 1.45rem + 2.9vw, 3.4rem);
  letter-spacing: -0.018em;
}

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.55rem, 1.3rem + 1.15vw, 2.2rem);
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--sans);
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.002em;
}

h4 { font-size: 1rem; font-weight: 650; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--pine); text-decoration: none; }
a:hover { color: var(--pine-dark); }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

ul, ol { margin: 0 0 var(--s4); padding-left: 1.15em; }
li { margin-bottom: var(--s2); }

dl, dd { margin: 0; }

code, kbd { font-family: var(--mono); font-size: .92em; }

hr { border: 0; height: 1px; background: var(--perf-x); margin: var(--s6) 0; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 2px; }
.section--ink :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible { outline-color: var(--gold-lift); }

::selection { background: var(--gold-tint); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) { .container { padding-inline: 32px; } }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-btn);
  text-decoration: none;
  font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

.muted { color: var(--muted); }
.small { font-size: .875rem; }
.text-right { text-align: right; }

.ico {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
  vertical-align: -0.125em;
}


/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--rule);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 11px 20px;
  min-height: 44px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-btn);
  font-weight: 650;
  font-size: .96rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.btn:hover { color: var(--btn-fg); }

.btn--primary { --btn-bg: var(--pine); --btn-fg: #fff; --btn-bd: var(--pine); }
.btn--primary:hover { --btn-bg: var(--pine-dark); --btn-bd: var(--pine-dark); }

.btn--deal { --btn-bg: var(--gold-deep); --btn-fg: #fff; --btn-bd: var(--gold-deep); }
.btn--deal:hover { --btn-bg: #6f3f06; --btn-bd: #6f3f06; }

.btn--ghost { --btn-bg: var(--card); --btn-fg: var(--ink); --btn-bd: var(--rule); }
.btn--ghost:hover { --btn-bd: var(--pine); --btn-fg: var(--pine); }

.btn--copy {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: var(--ink);
  min-height: 42px;
}
.btn--copy:hover { --btn-bg: var(--ink-deep); --btn-bd: var(--ink-deep); }

.btn--muted {
  --btn-bg: var(--rule-soft);
  --btn-fg: var(--muted);
  --btn-bd: var(--rule-soft);
  cursor: default;
  font-weight: 600;
}

.btn--lg { padding: 14px 28px; min-height: 54px; font-size: 1.03rem; }
.btn--block { display: flex; width: 100%; }

/* Last characters of a code, peeking out of the reveal button. */
.btn__peek {
  padding-left: var(--s2);
  margin-left: var(--s1);
  border-left: 1px dashed rgba(255, 255, 255, .45);
  font-family: var(--mono);
  font-size: .82em;
  letter-spacing: .06em;
  opacity: .9;
}
.btn--ghost .btn__peek,
.btn--muted .btn__peek { border-left-color: var(--rule); }

.btn--copy.is-copied { --btn-bg: var(--pine); --btn-bd: var(--pine); }

.btn.is-loading { position: relative; pointer-events: none; color: transparent; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn--ghost.is-loading::after { border-color: var(--rule); border-top-color: var(--pine); }

@keyframes spin { to { transform: rotate(360deg); } }


/* --------------------------------------------------------------------------
   5. Tags & facts
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.tag--verified { background: var(--pine-tint); border-color: rgba(30, 92, 67, .26); color: var(--pine); }
.tag--best     { background: var(--gold-tint); border-color: rgba(184, 112, 13, .3); color: var(--gold-deep); }
.tag--draft    { background: var(--rule-soft); border-color: var(--rule); color: var(--muted); }

.fact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: .845rem;
  line-height: 1.4;
}
.fact--verified { color: var(--pine); font-weight: 650; }
.fact--warn { color: var(--clay); font-weight: 650; }


/* --------------------------------------------------------------------------
   6. Trust bar (thin strip above the header)
   -------------------------------------------------------------------------- */
.trust-bar {
  background: var(--ink-deep);
  color: var(--on-ink-soft);
  font-size: .8rem;
}

.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 36px;
  padding-block: 7px;
}

.trust-bar__claim {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  color: var(--on-ink);
}
.trust-bar__claim .ico {
  width: 15px; height: 15px;
  padding: 3px;
  background: var(--pine);
  border-radius: 50%;
  fill: #fff;
}

.trust-bar__aside { display: none; margin: 0; }

@media (min-width: 860px) { .trust-bar__aside { display: block; } }


/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s3);
  min-height: var(--header-h);
  padding-block: var(--s3);
}

/* --- Brand --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

/* The mark is a rounded tile carrying a refresh orbit closed by a tick: every
   offer is re-checked, then approved. Both colours resolve from theme tokens,
   so the one SVG follows a re-skin and works on the light header and the dark
   footer. Keep the hardcoded copy in assets/images/favicon.svg in step. */
.brand__mark {
  --mark-bg:     var(--pine);
  --mark-stroke: var(--card);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
}
.brand__mark svg { width: 100%; height: 100%; }
.brand__mark-bg { fill: var(--mark-bg); }
.brand__mark-orbit,
.brand__mark-arrow,
.brand__mark-check { stroke: var(--mark-stroke); }
.brand__logo-image { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }

.brand__text {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1;
}
.brand__coupon { color: var(--ink); }
.brand__tested { color: var(--pine); }

/* The footer is dark, but the tile carries its own background, so the mark
   keeps the header colours and only loses a little size. */
.brand--footer .brand__mark {
  width: 38px;
  height: 38px;
}
.brand--footer .brand__text { font-size: 1.28rem; }
.brand--footer .brand__coupon { color: #fff; }
.brand--footer .brand__tested { color: var(--gold-lift); }

/* --- Mobile toggle --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  cursor: pointer;
}

/* The bars carry the same accent as the brand mark and wordmark, so the three
   things sitting on the header bar read as one set. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 19px;
  height: 2px;
  background: var(--pine);
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Header search: the console, given real width --- */
.header-search {
  position: relative;
  display: flex;
  align-items: stretch;
  grid-column: 1 / -1;
  order: 3;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  transition: border-color .14s ease, box-shadow .14s ease;
}

.header-search__icon {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 17px;
  height: 17px;
  margin-top: -8px;
  fill: var(--muted);
  pointer-events: none;
}

.header-search input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px 11px 38px;
  background: none;
  border: 0;
  outline: none;
  font-size: .95rem;
}
.header-search input::placeholder { color: var(--muted); }

.header-search button {
  flex: none;
  padding: 0 18px;
  background: var(--pine);
  border: 0;
  border-radius: 0 6px 6px 0;
  color: #fff;
  font-size: .9rem;
  font-weight: 650;
  cursor: pointer;
}
.header-search button:hover { background: var(--pine-dark); }

.header-search:focus-within {
  border-color: var(--pine);
  box-shadow: 0 0 0 3px var(--pine-tint);
}

/* --- Nav --- */
.site-nav {
  display: none;
  grid-column: 1 / -1;
  order: 4;
}
.site-nav.is-open { display: block; }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--s2) 0 0;
  border-top: 1px solid var(--rule-soft);
}
.site-nav__list li { margin: 0; }

.site-nav__list > li > a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-body);
  font-weight: 600;
  text-decoration: none;
}
.site-nav__list > li > a:hover,
.site-nav__list > li > a[aria-current="page"] { color: var(--pine); }

@media (min-width: 1000px) {
  .site-header__inner {
    grid-template-columns: auto auto minmax(240px, 1fr);
    gap: var(--s5);
  }
  .nav-toggle { display: none; }

  .header-search { grid-column: 3; grid-row: 1; order: 0; width: 100%; min-width: 0; max-width: 460px; justify-self: end; }

  .site-nav {
    display: block;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    order: 0;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--s5);
    padding: 0;
    border: 0;
  }

  .site-nav__list > li > a {
    position: relative;
    padding: 4px 0;
    border: 0;
    font-size: .94rem;
    white-space: nowrap;
  }
  /* The current page is marked by a rule, not only a colour shift. */
  .site-nav__list > li > a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: var(--gold);
  }
}

/* --- Mega menu: every store page, one click from anywhere ---
   "Brands" is a link to the brand list and the chevron beside it is the menu
   button, so touch and keyboard users can still open the panel. On desktop
   with a mouse, hovering the item opens it as well (main.js). */
.site-nav__item--mega {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.site-nav__item--mega > .mega { grid-column: 1 / -1; }
.site-nav__item--mega.is-open > a { color: var(--pine); }

.mega-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-body);
  cursor: pointer;
}
.mega-toggle:hover { color: var(--pine); }
.mega-toggle:focus-visible {
  outline: 3px solid var(--pine-dark);
  outline-offset: -3px;
  border-radius: 8px;
}

.mega-toggle__chev {
  width: 0; height: 0;
  border-inline: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .18s ease;
}
.mega-toggle[aria-expanded="true"] { color: var(--pine); }
.mega-toggle[aria-expanded="true"] .mega-toggle__chev { transform: rotate(180deg); }

.mega { padding: var(--s3) 0 var(--s4); }

.mega__inner { padding-inline: 0; }

@media (min-width: 1000px) {
  /* Full-bleed panel anchored to the header, which is the positioned ancestor. */
  .mega {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    z-index: 90;
    padding: var(--s6) 0 var(--s5);
    background: var(--card);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--lift-pop);
    animation: megaDrop .16s ease-out;
  }

  @keyframes megaDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }

  .mega__inner { padding-inline: 32px; }

  .site-nav__item--mega {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .mega-toggle {
    width: 22px;
    height: 28px;
    border: 0;
  }
}

/* --- Search suggestions --- */
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 120;
  max-height: 400px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  box-shadow: var(--lift-pop);
}

.search-suggestions a {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-body);
  text-decoration: none;
}
.search-suggestions a:last-child { border-bottom: 0; }
.search-suggestions a:hover,
.search-suggestions a.is-active { background: var(--pine-tint); }

.search-suggestions img {
  width: 38px; height: 38px;
  flex: none;
  padding: 3px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-tile);
}

.search-suggestions span { display: flex; flex-direction: column; min-width: 0; }
.search-suggestions strong {
  font-size: .93rem;
  font-weight: 650;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggestions small { font-size: .79rem; color: var(--muted); }

.search-suggestions__all {
  justify-content: center;
  background: var(--paper);
  font-weight: 650;
  font-size: .88rem;
  color: var(--pine) !important;
}


/* --------------------------------------------------------------------------
   8. Hero
   Two columns: the search and its promises on the left, a real listing shown
   as a card on the right. The card is live data, so the type sizes have to
   survive a long code or a wide wordmark rather than one fixed mock-up.
   -------------------------------------------------------------------------- */
.savings-hero {
  padding: 34px 0 38px;
  background: #1f2937;
  color: #f5f5f0;
  border-bottom: 1px solid #475569;
}
.savings-hero__grid { display: grid; gap: 30px; align-items: center; }
.savings-hero__intro { min-width: 0; animation: savings-arrive .75s ease-out both; }

@keyframes savings-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .savings-hero__intro { animation: none; } }

.savings-hero__eyebrow {
  margin: 0 0 14px;
  color: #fb923c;
  font-size: .76rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.savings-hero h1 {
  margin: 0 0 16px;
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.35rem);
  font-weight: 850; line-height: 1.05; letter-spacing: -.045em;
}
.savings-hero h1 span { display: inline-block; color: #fb923c; }
.savings-hero__description {
  max-width: 52ch; margin: 0 0 22px;
  color: #cbd5e1; font-size: 1.02rem; line-height: 1.6;
}

/* --- Search --------------------------------------------------------------- */
.savings-hero__search {
  display: flex; gap: 8px;
  max-width: 560px; margin: 0 0 16px;
  padding: 7px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .9);
}
.savings-hero__search input {
  width: 100%; min-width: 0; flex: 1;
  padding: 12px 14px;
  border: 0; border-radius: 8px; background: #fff;
  color: #1f2937; font: inherit;
}
.savings-hero__search input::placeholder { color: #94a3b8; }
.savings-hero__search input:focus-visible { outline: 2px solid #c2410c; outline-offset: -2px; }
.savings-hero__search .btn { flex-shrink: 0; white-space: nowrap; border-radius: 8px; font-weight: 700; }

/* --- Popular chips -------------------------------------------------------- */
.savings-hero__popular {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 26px;
}
.savings-hero__popular-label { color: #cbd5e1; font-size: .88rem; font-weight: 700; }
.savings-hero__chip {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid #475569; border-radius: 999px;
  background: #273244;
  color: #e5e7eb; font-size: .84rem; font-weight: 600;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.savings-hero__chip:hover { background: #fb923c; border-color: #fb923c; color: #1f2937; }
.savings-hero__chip:focus-visible { outline: 3px solid #fdba74; outline-offset: 2px; }

/* --- The three promises --------------------------------------------------- */
.savings-hero__points {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin: 0; padding: 22px 0 0;
  border-top: 1px solid #3c4858;
  list-style: none;
}
.savings-hero__points li { display: flex; align-items: flex-start; gap: 12px; margin: 0; min-width: 0; }
.savings-hero__points strong { display: block; margin-bottom: 3px; color: #fff; font-size: .93rem; font-weight: 700; }
.savings-hero__points span:last-child { color: #a9b4c2; font-size: .82rem; line-height: 1.5; }
.savings-hero__ico {
  display: grid; place-items: center;
  flex: 0 0 38px; width: 38px; height: 38px;
  border: 1px solid #44526a; border-radius: 10px;
  background: #273244; color: #fb923c;
}
.savings-hero__ico svg { width: 19px; height: 19px; }

/* --- The card stage ------------------------------------------------------- */
.savings-hero__stage { position: relative; display: none; min-height: 290px; }
.savings-hero__logos {
  display: grid; grid-template-columns: repeat(2, 104px);
  gap: 14px;
  justify-content: end;
  padding: 6px 4px 0 0;
}
.savings-hero__logos > :nth-child(3) { grid-column: 2; }
.savings-hero__logo {
  display: grid; place-items: center;
  height: 64px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, .85);
}
.savings-hero__logo img { max-width: 100%; max-height: 34px; object-fit: contain; }

.savings-hero__deck {
  position: absolute; left: 0; top: 46px;
  width: min(252px, 78%);
  /* The deck is as tall as its tallest card, which is the only one in flow. */
  display: grid;
}
.savings-hero__card {
  grid-area: 1 / 1;
  display: grid; justify-items: start; align-content: start; gap: 2px;
  padding: 20px 22px 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .95);
  /* Inactive cards sit behind, slightly small and offset, and take no clicks. */
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(.94);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.savings-hero__card.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* The card leaving lifts away rather than dropping, so the two do not cross. */
.savings-hero__card.is-leaving {
  opacity: 0;
  transform: translate3d(0, -16px, 0) scale(.96);
}
.savings-hero__card-flag {
  position: absolute; top: -11px; right: 16px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #15803d;
  color: #fff; font-size: .68rem; font-weight: 750; letter-spacing: .04em;
}
.savings-hero__card-brand { display: block; margin-bottom: 8px; }
.savings-hero__card-brand img { max-height: 26px; max-width: 110px; object-fit: contain; }
.savings-hero__card-off {
  color: #1f2937;
  font-size: clamp(1.5rem, 1.2rem + .9vw, 1.9rem);
  font-weight: 850; letter-spacing: -.03em; line-height: 1.1;
  text-transform: uppercase;
}
.savings-hero__card-code { color: #475569; font-size: .95rem; }
.savings-hero__card-code strong { color: #1f2937; font-weight: 750; letter-spacing: .02em; }
.savings-hero__card-date { margin-top: 8px; color: #7c8798; font-size: .76rem; }

/* Two short strokes, the way the mock-up marks the card. */
.savings-hero__spark { position: absolute; border-radius: 2px; background: #fb923c; }
.savings-hero__spark--a { left: 8px;  top: 8px;   width: 26px; height: 3px; transform: rotate(-32deg); }
.savings-hero__spark--b { left: 20px; top: 34px;  width: 18px; height: 3px; transform: rotate(-70deg); }

/* --- Motion --------------------------------------------------------------
   Everything here is decoration on top of a stage that already reads
   correctly when still, so the whole block is dropped for reduced motion. */
.savings-hero__logo,
.savings-hero__deck { animation: hero-rise .7s cubic-bezier(.22, .61, .36, 1) both; }
.savings-hero__logo:nth-child(1) { animation-delay: .05s; }
.savings-hero__logo:nth-child(2) { animation-delay: .14s; }
.savings-hero__logo:nth-child(3) { animation-delay: .23s; }
.savings-hero__deck { animation-delay: .3s; }

@keyframes hero-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* A slow, unsynchronised drift. Different durations keep the three chips from
   moving as one block, which is what makes a float read as mechanical. */
.savings-hero__logo { will-change: transform; }
.savings-hero__logo:nth-child(1) { animation: hero-rise .7s cubic-bezier(.22,.61,.36,1) .05s both, hero-drift 7.5s ease-in-out .9s infinite; }
.savings-hero__logo:nth-child(2) { animation: hero-rise .7s cubic-bezier(.22,.61,.36,1) .14s both, hero-drift 9s   ease-in-out 1.4s infinite; }
.savings-hero__logo:nth-child(3) { animation: hero-rise .7s cubic-bezier(.22,.61,.36,1) .23s both, hero-drift 8.2s ease-in-out 1.1s infinite; }

@keyframes hero-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -7px, 0); }
}

.savings-hero__spark { animation: hero-spark 4.5s ease-in-out infinite; }
.savings-hero__spark--b { animation-delay: .6s; }
@keyframes hero-spark {
  0%, 100% { opacity: .35; transform: rotate(var(--rot, 0deg)) scaleX(.82); }
  50%      { opacity: 1;   transform: rotate(var(--rot, 0deg)) scaleX(1); }
}
.savings-hero__spark--a { --rot: -32deg; }
.savings-hero__spark--b { --rot: -70deg; }

/* The verified flag ticks once a cycle, in step with the card swap. */
.savings-hero__card.is-active .savings-hero__card-flag { animation: hero-flag 5s ease-in-out infinite; }
@keyframes hero-flag {
  0%, 84%, 100% { transform: none; }
  88%           { transform: translateY(-2px) scale(1.06); }
  94%           { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .savings-hero__logo,
  .savings-hero__deck,
  .savings-hero__spark,
  .savings-hero__card.is-active .savings-hero__card-flag { animation: none; }
  .savings-hero__card { transition: opacity .01s linear; transform: none; }
  .savings-hero__card.is-leaving { transform: none; }
}

@media (min-width: 900px) {
  .savings-hero { padding: 46px 0 50px; }
  .savings-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 46px; }
  .savings-hero__stage { display: block; }
}
@media (max-width: 899px) {
  .savings-hero__points { gap: 16px; }
}
@media (max-width: 699px) {
  .savings-hero { padding: 26px 0 30px; }
  .savings-hero__points { grid-template-columns: 1fr; gap: 14px; padding-top: 18px; }
  .savings-hero__description { margin-bottom: 18px; }
  .savings-hero__popular { margin-bottom: 20px; }
}
@media (max-width: 459px) {
  .savings-hero__search { flex-direction: column; }
  .savings-hero__search .btn { width: 100%; }
}
.hero {
  position: relative;
  padding: var(--s8) 0 var(--s9);
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
}

/* The tear: paper-coloured bites out of the hero's bottom edge. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 20px;
  background-image: none;
  background-size: 26px 20px;
  background-repeat: repeat-x;
  background-position: bottom center;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s7);
  align-items: center;
}

.hero__copy { max-width: 40rem; }

.hero h1 { color: #fff; margin-bottom: var(--s4); }

.hero__lead {
  max-width: 54ch;
  margin-bottom: var(--s6);
  font-size: 1.11rem;
  color: var(--on-ink);
}

.hero-search {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-width: 640px;
  margin-bottom: var(--s6);
  padding: var(--s3);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
}

.hero-search input {
  width: 100%;
  padding: 15px 18px;
  background: #fff;
  border: 0;
  border-radius: var(--r-btn);
  font-size: 1rem;
  outline: none;
  color: var(--ink);
}
.hero-search input::placeholder { color: var(--muted); }
.hero-search input:focus { box-shadow: 0 0 0 3px rgba(224, 160, 47, .5); }

@media (min-width: 620px) {
  .hero-search { flex-direction: row; align-items: center; }
  .hero-search input { flex: 1; }
  .hero-search .btn { flex: none; }
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero__proof li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--on-ink);
}

.hero__proof .ico {
  width: 20px; height: 20px;
  padding: 4px;
  flex: none;
  background: var(--gold);
  border-radius: 50%;
  fill: #fff;
}

/* --- The fanned deck of real store stubs --- */
.hero__deck {
  display: flex;
  gap: var(--s3);
  overflow-x: auto;
  padding-bottom: var(--s2);
  scrollbar-width: none;
}
.hero__deck::-webkit-scrollbar { display: none; }

.stub {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 0 0 auto;
  width: 232px;
  padding: var(--s3);
  background: var(--card);
  border-radius: var(--r-ticket);
  box-shadow: var(--lift-stub);
  text-decoration: none;
  color: var(--ink);
  transition: transform .2s ease;
}

.stub__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--r-tile);
}
.stub__logo img { width: 100%; height: 100%; padding: 5px; object-fit: contain; }

.stub__text { display: flex; flex-direction: column; min-width: 0; }

.stub__title {
  font-weight: 650;
  font-size: .93rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stub__meta { font-size: .8rem; color: var(--gold-deep); font-weight: 600; }

@media (min-width: 1040px) {
  .hero { padding-block: var(--s9) calc(var(--s9) + 20px); }
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: var(--s8); }

  /* The deck fans out: three stubs, stacked and tilted like real tickets. */
  .hero__deck {
    position: relative;
    display: block;
    height: 300px;
    overflow: visible;
  }

  .stub {
    position: absolute;
    width: 300px;
  }
  .stub--0 { top: 0;     left: 8px;  transform: rotate(-4deg); z-index: 3; }
  .stub--1 { top: 92px;  left: 42px; transform: rotate(2.5deg); z-index: 2; }
  .stub--2 { top: 184px; left: 12px; transform: rotate(-1.5deg); z-index: 1; }

  .stub:hover,
  .stub:focus-visible { transform: rotate(0deg) translateY(-4px); z-index: 4; }
}


/* --------------------------------------------------------------------------
   9. Sections & grids
   -------------------------------------------------------------------------- */
.section { padding: var(--s8) 0; }
.section--tight { padding: var(--s7) 0; }

.section--surface {
  background: var(--card);
  border-block: 1px solid var(--rule);
}

.section--ink {
  background: var(--ink);
  color: var(--on-ink);
}

@media (min-width: 768px) {
  .section { padding: var(--s9) 0; }
  .section--tight { padding: var(--s8) 0; }
}

.section-head { max-width: 62ch; margin-bottom: var(--s6); }
.section-head h2 { margin-bottom: var(--s3); }
.section-head p { margin: 0; color: var(--muted); }

.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  max-width: none;
}
.section-head--row > div { max-width: 56ch; }
.section-head--row .btn { flex: none; display: none; }

@media (min-width: 720px) { .section-head--row .btn { display: inline-flex; } }

.section-head--light h2 { color: #fff; }
.section-head--light p { color: var(--on-ink-soft); }

.grid { display: grid; gap: var(--s5); }

@media (min-width: 600px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}


/* --------------------------------------------------------------------------
   10. Trust cards, steps, reasons
   -------------------------------------------------------------------------- */
.trust-card { padding-top: var(--s5); border-top: 2px solid var(--ink); }
.trust-card h3 { margin-bottom: var(--s2); }
.trust-card p { margin: 0; font-size: .94rem; color: var(--muted); }

.trust-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--s3);
  background: var(--pine-tint);
  border-radius: var(--r-tile);
  color: var(--pine);
}
.trust-card__icon .ico { width: 17px; height: 17px; }

/* Steps genuinely are a sequence, so they are numbered. */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--s6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  position: relative;
  counter-increment: step;
  margin: 0;
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.step::before {
  content: counter(step);
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gold-lift);
}

.step h3 { margin-bottom: var(--s2); color: #fff; }
.step p { margin: 0; font-size: .95rem; color: var(--on-ink-soft); }

@media (min-width: 780px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }

/* Reasons: a ruled definition list, deliberately not more cards. */
.reasons {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.reason {
  display: grid;
  gap: var(--s1);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--rule);
}

.reason dt {
  font-weight: 650;
  font-size: 1.02rem;
  color: var(--ink);
}
.reason dd { color: var(--muted); font-size: .95rem; max-width: 68ch; }

@media (min-width: 760px) {
  .reason { grid-template-columns: minmax(200px, 1fr) 2fr; gap: var(--s5); align-items: baseline; }
}
@media (min-width: 1040px) {
  .reasons { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
  .reason { grid-template-columns: 1fr; gap: var(--s1); }
}


/* --------------------------------------------------------------------------
   11. Store cards - one whole card is one link
   -------------------------------------------------------------------------- */
.store-grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .store-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

.store-card { display: flex; }

.store-card__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  padding: var(--s4);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-tile);
  color: inherit;
  text-decoration: none;
  transition: border-color .14s ease, background-color .14s ease;
}
.store-card__link:hover {
  border-color: var(--pine);
  background: var(--card);
}

.store-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex: none;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-tile);
}
.store-card__media img { width: 100%; height: 100%; padding: 7px; object-fit: contain; }

.store-card__initials {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--pine);
}

.store-card__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.store-card__title {
  font-size: 1.01rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
}
.store-card__link:hover .store-card__title { color: var(--pine); }

.store-card__desc { font-size: .89rem; line-height: 1.5; color: var(--muted); }

.store-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: 3px;
}

.store-card__date { font-size: .78rem; color: var(--muted); }

/* The offer count is money, so it is marigold and set in the display face. */
.store-card__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 60px;
  padding: var(--s2) var(--s3);
  background: var(--gold-tint);
  border-radius: var(--r-tile);
  text-align: center;
}

.store-card__count-num {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gold-deep);
}
.store-card__count-label { font-size: .7rem; font-weight: 650; color: var(--gold-deep); }

/* Compact brand cards for narrow phones (320-359px). */
@media (max-width: 359px) {
  .store-card__link {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: var(--s3);
    padding: var(--s3);
  }
  .store-card__media {
    width: 52px;
    height: 52px;
  }
  .store-card__count {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 6px;
    min-width: 0;
    padding: 7px 10px;
    justify-self: stretch;
  }
  .store-card__count-num { font-size: 1.15rem; }
  .store-card__count-label { font-size: .75rem; }
  .store-card__desc { font-size: .84rem; }
}


/* --------------------------------------------------------------------------
   12. The coupon ticket - the one loud object on the site
   -------------------------------------------------------------------------- */
.coupon-list { display: grid; gap: var(--s5); }

.coupon {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-ticket);
  box-shadow: var(--lift-ticket);
}

/* Corner flag on the best offer */
.coupon__flag {
  position: absolute;
  top: -1px;
  right: var(--s5);
  z-index: 2;
  padding: 5px 11px 6px;
  background: var(--gold-deep);
  border-radius: 0 0 var(--r-tile) var(--r-tile);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1;
}

/* --- Stub: the saving --- */
.coupon__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--s5) var(--s4);
  background: var(--gold-tint);
  border-radius: var(--r-ticket) var(--r-ticket) 0 0;
  text-align: center;
}

/* The tear seam */
.coupon__rail::after {
  content: "";
  position: absolute;
  left: var(--s5); right: var(--s5); bottom: 0;
  height: 1px;
  background: var(--perf-x);
}

.coupon__discount {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.25rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--gold-deep);
  /* break-word, not anywhere: a space is used before a word is split,
     so a two-word badge never renders as "LISTE D CODE". */
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
  hyphens: none;
}

/* One badge size everywhere. These two classes exist only for a badge holding
   a word physically too wide for the stub, which cannot be broken or wrapped. */
.coupon__discount--long { font-size: clamp(1.15rem, .85rem + 1.25vw, 1.55rem); letter-spacing: -0.01em; }
.coupon__discount--xlong { font-size: clamp(1rem, .8rem + .8vw, 1.2rem); letter-spacing: 0; line-height: 1.15; }

.coupon__kind { font-size: .76rem; font-weight: 650; color: var(--gold-deep); }

/* --- Body: the evidence --- */
.coupon__main { padding: var(--s5) var(--s4); }

.coupon__head { margin-bottom: var(--s2); }

.coupon__title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 650;
  line-height: 1.32;
}

.coupon__desc {
  max-width: 68ch;
  margin: 0 0 var(--s3);
  font-size: .94rem;
  color: var(--muted);
}

.coupon__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.coupon__facts li { margin: 0; }

.coupon__terms { margin-top: var(--s3); }

.coupon__terms summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  list-style: none;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 650;
  color: var(--pine);
}
.coupon__terms summary::-webkit-details-marker { display: none; }
.coupon__terms summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-block: 4px solid transparent;
  transition: transform .15s ease;
}
.coupon__terms[open] summary::before { transform: rotate(90deg) translateX(1px); }

.coupon__terms p {
  margin: var(--s2) 0 0;
  padding: var(--s3);
  background: var(--paper);
  border-radius: var(--r-tile);
  font-size: .88rem;
  color: var(--muted);
}

/* --- End: the single action --- */
.coupon__action {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 0 var(--s4) var(--s5);
}

.coupon__code {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  animation: reveal .22s ease-out;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* The revealed code is a stamped field, not another button. */
.coupon__code-text {
  display: block;
  padding: 13px 10px;
  background: var(--paper);
  border: 1.5px dashed var(--pine);
  border-radius: var(--r-btn);
  font-family: var(--mono);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-align: center;
  word-break: break-all;
  color: var(--ink);
  user-select: all;
}

.coupon__store-link { text-align: center; font-size: .86rem; font-weight: 650; }

/* --- States --- */
.coupon.is-featured { border-color: var(--gold); }

.coupon.is-expired {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
.coupon.is-expired .coupon__rail { background: var(--rule-soft); }
.coupon.is-expired .coupon__discount,
.coupon.is-expired .coupon__kind,
.coupon.is-expired .coupon__title { color: var(--muted); }

@media (min-width: 800px) {
  .coupon { grid-template-columns: 172px minmax(0, 1fr) 224px; align-items: stretch; }

  .coupon__rail {
    padding: var(--s5) var(--s4);
    border-radius: var(--r-ticket) 0 0 var(--r-ticket);
  }

  /* Seam turns vertical, and the ticket gets punched at both ends. */
  .coupon__rail::after {
    left: auto;
    right: 0;
    top: var(--s5);
    bottom: var(--s5);
    width: 1px;
    height: auto;
    background: var(--perf-y);
  }

  .coupon::before,
  .coupon::after {
    content: "";
    position: absolute;
    left: 172px;
    z-index: 1;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 50%;
  }
  .coupon::before { top: -10px; }
  .coupon::after  { bottom: -10px; }

  .coupon.is-expired::before,
  .coupon.is-expired::after { border-style: dashed; }

  .coupon__main { padding: var(--s5); }

  .coupon__action {
    justify-content: center;
    padding: var(--s5) var(--s5) var(--s5) 0;
  }
}


/* --------------------------------------------------------------------------
   13. Store page head & filter bar
   -------------------------------------------------------------------------- */
.store-head {
  position: relative;
  padding: var(--s5) 0 var(--s7);
  background: var(--pine-tint);
  border-bottom: 1px solid var(--rule);
}

/* The same tear motif as the hero, at a smaller scale. */
.store-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 9px;
  background-image: none;
  background-size: 15px 9px;
  background-repeat: repeat-x;
  background-position: bottom center;
}

.store-head__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4) var(--s5);
  align-items: start;
}

.store-head__logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  flex: none;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.store-head__logo img { width: 100%; height: 100%; padding: 11px; object-fit: contain; }
.store-head__logo .store-card__initials { font-size: 1.8rem; }

/* A small seal on the corner of the logo - the one flourish on this page. */
.store-head__seal {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--pine);
  border: 2px solid var(--card);
  border-radius: 50%;
}
.store-head__seal .ico { width: 14px; height: 14px; fill: #fff; }

.store-head__text { min-width: 0; }
.store-head__text h1 { margin-bottom: var(--s3); }

.store-head__desc {
  max-width: 62ch;
  margin: 0 0 var(--s4);
  font-size: 1.02rem;
  color: var(--ink-body);
}

.store-head__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
}
.store-head__tags li { margin: 0; }

.store-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* A record strip, not decorative stat cards. */
.store-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: var(--s4);
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-tile);
  overflow: hidden;
}

.store-stats__item { padding: var(--s3) var(--s4); background: var(--card); }

.store-stats dt {
  margin-bottom: 2px;
  font-size: .75rem;
  font-weight: 650;
  color: var(--muted);
}
.store-stats dd {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
}
.store-stats__item:first-child dd { color: var(--gold-deep); }

@media (min-width: 760px) {
  .store-head { padding-bottom: var(--s8); }
  .store-head__inner { grid-template-columns: auto minmax(0, 1fr); gap: var(--s6); }
  .store-head__logo { width: 104px; height: 104px; }
  .store-stats { grid-template-columns: repeat(4, 1fr); margin-top: var(--s2); }
}

@media (min-width: 1060px) {
  .store-head__inner {
    grid-template-columns: auto minmax(0, 1fr) minmax(300px, auto);
    align-items: center;
  }
  .store-stats {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    margin-top: 0;
  }
}

/* --- Filter bar --- */
.coupon-bar {
  display: grid;
  gap: var(--s3);
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 2px solid var(--ink);
}

.coupon-bar__title { margin: 0; font-size: clamp(1.35rem, 1.2rem + .7vw, 1.7rem); }

.coupon-filter { display: flex; align-items: center; gap: var(--s3); }

.coupon-filter input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  font-size: .94rem;
  outline: none;
}
.coupon-filter input:focus { border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-tint); }

.coupon-filter__count { flex: none; font-size: .83rem; color: var(--muted); }

@media (min-width: 720px) {
  .coupon-bar {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--s5);
  }
  .coupon-filter { width: 380px; }
}


/* --------------------------------------------------------------------------
   14. Breadcrumb & simple page heads
   -------------------------------------------------------------------------- */
.breadcrumb { margin-bottom: var(--s4); }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .83rem;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  color: var(--muted);
}
.breadcrumb li + li::before { content: "/"; color: var(--rule); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--pine); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

.page-head {
  padding: var(--s6) 0 var(--s7);
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}
.page-head h1 { margin-bottom: var(--s3); }
.page-head p { max-width: 62ch; margin: 0; font-size: 1.03rem; color: var(--muted); }
.page-head__intro { color: var(--ink-body) !important; }

.page-search {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-width: 560px;
  margin-top: var(--s5);
}
.page-search input {
  width: 100%;
  padding: 13px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  font-size: 1rem;
  outline: none;
}
.page-search input:focus { border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-tint); }

@media (min-width: 560px) {
  .page-search { flex-direction: row; }
  .page-search input { flex: 1; }
  .page-search .btn { flex: none; }
}


/* --------------------------------------------------------------------------
   15. Two-column layout & sidebar
   -------------------------------------------------------------------------- */
.layout {
  display: grid;
  gap: var(--s7);
  padding-block: var(--s7);
  align-items: start;
}

.layout__main { min-width: 0; }

.sidebar { display: grid; gap: var(--s5); min-width: 0; }

/* Sidebar blocks are ruled, not carded - they must not compete with tickets. */
.side-box { padding-left: var(--s4); border-left: 2px solid var(--rule); }
.side-box--accent { border-left-color: var(--pine); }

.side-box h2 {
  margin-bottom: var(--s2);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0;
}

.side-box p, .side-box li { font-size: .91rem; color: var(--muted); }
.side-box ul { margin-bottom: 0; padding-left: 1.1em; }
.side-box li { margin-bottom: 7px; }
.side-box .btn { margin-top: var(--s2); }

.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 24px; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 12px;
  height: 2px;
  background: var(--pine);
}

.post-faqs { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--rule); }
.post-faqs > h2 { margin-bottom: var(--s5); }

@media (min-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s8); }
  .sidebar { position: sticky; top: calc(var(--header-h) + var(--s5)); }
}


/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq-layout { display: grid; gap: var(--s6); }
.faq-layout__head p { color: var(--muted); margin: 0; }

@media (min-width: 940px) {
  .faq-layout { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .faq-layout__head { position: sticky; top: calc(var(--header-h) + var(--s5)); }
}

.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
/* The heading exists for document structure; the button carries the styling. */
.faq-item > h3 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

.faq-item__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  width: 100%;
  padding: var(--s4) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}
.faq-item__q:hover { color: var(--pine); }

.faq-item__sign {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 5px;
}
.faq-item__sign::before,
.faq-item__sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--pine);
  transform: translate(-50%, -50%);
  transition: transform .18s ease, opacity .18s ease;
}
.faq-item__sign::before { width: 14px; height: 2px; }
.faq-item__sign::after  { width: 2px; height: 14px; }

.faq-item__q[aria-expanded="true"] .faq-item__sign::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.faq-item__a {
  max-width: 72ch;
  padding: 0 0 var(--s5);
  font-size: .96rem;
  color: var(--muted);
}
.faq-item__a p { margin-bottom: var(--s3); }


/* --------------------------------------------------------------------------
   17. Prose, legal pages, tables
   -------------------------------------------------------------------------- */
.prose {
  max-width: 72ch;
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid var(--rule);
}

.prose h2 { margin-top: var(--s6); }
.prose h3, .legal h3 { margin-top: var(--s5); font-size: 1.08rem; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li, .legal p, .legal li { font-size: 1rem; }
.prose ul, .prose ol, .legal ul, .legal ol { margin-bottom: var(--s4); }
.prose a, .legal a { font-weight: 600; }

.prose blockquote {
  margin: var(--s5) 0;
  padding: var(--s2) 0 var(--s2) var(--s4);
  border-left: 2px solid var(--gold);
  color: var(--ink-body);
}

/* Content tables. .legal is listed alongside .prose because the policy and
   editorial pages use it, and without it their tables render unstyled. */
.prose table,
.legal table,
.table {
  width: 100%;
  margin: var(--s5) 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  font-size: .94rem;
  line-height: 1.65;
}
.prose th, .prose td,
.legal th, .legal td,
.table th, .table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
/* The outer border already draws the last edge. */
.prose tr:last-child td,
.legal tr:last-child td,
.table tr:last-child td { border-bottom: 0; }

.prose th, .legal th, .table th {
  background: var(--paper);
  font-weight: 700;
  color: var(--ink);
  border-bottom-width: 2px;
}
/* The first column is a label, so it is kept legible and set apart rather than
   squeezed to whatever the prose column leaves over. */
.prose td:first-child,
.legal td:first-child,
.table td:first-child { min-width: 10rem; color: var(--ink); }

.prose tbody tr:nth-child(even),
.legal tbody tr:nth-child(even),
.table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper) 45%, transparent); }

@media (max-width: 640px) {
  .prose table, .legal table, .table { display: block; overflow-x: auto; font-size: .9rem; }
  .prose th, .prose td,
  .legal th, .legal td,
  .table th, .table td { padding: 11px 12px; }
  .prose td:first-child,
  .legal td:first-child,
  .table td:first-child { min-width: 8rem; }
}

.legal { max-width: 72ch; }
.legal h2 { margin-top: var(--s6); }

.legal > :first-child { margin-top: 0; }

.updated {
  display: inline-block;
  margin-bottom: var(--s5);
  font-size: .84rem;
  color: var(--muted);
}

.legal-note {
  margin-bottom: var(--s5);
  padding: var(--s4);
  background: var(--gold-tint);
  border-left: 2px solid var(--gold);
  font-size: .92rem;
  color: var(--ink-body);
}

.box {
  padding: var(--s4);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-tile);
}


/* --------------------------------------------------------------------------
   18. Forms & alerts
   -------------------------------------------------------------------------- */
.form-card {
  padding: var(--s5);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-tile);
}

@media (min-width: 640px) { .form-card { padding: var(--s6); } }

.field { margin-bottom: var(--s4); }

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: .89rem;
  font-weight: 650;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  font-size: .98rem;
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}

.field textarea { min-height: 150px; line-height: 1.6; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-tint); }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--clay); }
.field.has-error input:focus,
.field.has-error textarea:focus { box-shadow: 0 0 0 3px var(--clay-tint); }

.hint { display: block; margin-top: 6px; font-size: .83rem; color: var(--muted); }

.error-text {
  display: block;
  margin-top: 6px;
  font-size: .83rem;
  font-weight: 600;
  color: var(--clay);
}
.error-text:empty { display: none; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  margin-bottom: var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--rule-soft);
  border-left: 3px solid var(--rule);
  border-radius: var(--r-tile);
  font-size: .94rem;
  color: var(--ink-body);
}
.alert--ok    { background: var(--pine-tint); border-left-color: var(--pine); color: var(--pine); }
.alert--error { background: var(--clay-tint); border-left-color: var(--clay); color: var(--clay); }
.alert--info  { background: var(--gold-tint); border-left-color: var(--gold); color: var(--gold-deep); }


/* --------------------------------------------------------------------------
   19. Empty states, load more, pagination, toast
   -------------------------------------------------------------------------- */
.empty {
  padding: var(--s8) var(--s5);
  background: var(--card);
  border: 1px dashed var(--rule);
  border-radius: var(--r-tile);
  text-align: center;
}
.empty__title { margin-bottom: var(--s2); }
.empty__body {
  max-width: 46ch;
  margin: 0 auto var(--s5);
  font-size: .95rem;
  color: var(--muted);
}
.empty .btn { margin: 0 auto; }

.load-more-wrap { margin-top: var(--s6); text-align: center; }
.load-more-wrap .btn { min-width: 250px; }

.load-more-note {
  max-width: 52ch;
  margin: var(--s4) auto 0;
  font-size: .89rem;
  color: var(--muted);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s7);
  padding-top: var(--s5);
  list-style: none;
  border-top: 1px solid var(--rule);
}
.pagination li { margin: 0; }

.pagination a,
.pagination .is-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink-body);
  text-decoration: none;
}
.pagination a:hover { border-color: var(--pine); color: var(--pine); }
.pagination .is-current { background: var(--pine); border-color: var(--pine); color: #fff; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 300;
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 20px;
  background: var(--ink);
  border-radius: var(--r-btn);
  box-shadow: var(--lift-pop);
  font-size: .92rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }


/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  padding: var(--s8) 0 var(--s5);
  background: var(--ink);
  color: var(--on-ink-soft);
  font-size: .92rem;
}

.footer-lead {
  display: grid;
  gap: var(--s5);
  padding-bottom: var(--s7);
  margin-bottom: var(--s7);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.footer-lead__statement {
  max-width: 22ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.3rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: #fff;
}

.footer-lead .btn { justify-self: start; }

@media (min-width: 820px) {
  .footer-lead {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--s7);
  }
  .footer-lead__statement { max-width: 26ch; }
}

.footer-grid {
  display: grid;
  gap: var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.footer-brand { max-width: 42ch; }
.footer-brand .brand { margin-bottom: var(--s3); }
.footer-brand__text { margin: 0 0 var(--s4); font-size: .91rem; color: var(--on-ink-soft); }

.footer-brand__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-brand__links li { margin: 0; }
.footer-brand__links a {
  color: #fff;
  font-size: .87rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  padding-bottom: 1px;
}
.footer-brand__links a:hover { border-bottom-color: var(--gold-lift); color: var(--gold-lift); }

.footer-col__title {
  margin-bottom: var(--s3);
  font-family: var(--sans);
  font-size: .91rem;
  font-weight: 650;
  letter-spacing: 0;
  color: #fff;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a {
  display: block;
  color: var(--on-ink-soft);
  text-decoration: none;
  font-size: .89rem;
  line-height: 1.45;
}
.footer-col a:hover { color: #fff; }

.footer-col__more { color: var(--gold-lift) !important; font-weight: 650; }

.footer-bottom {
  display: grid;
  gap: 6px;
  padding-top: var(--s4);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .81rem;
  color: #74847a;
}
.footer-bottom p { margin: 0; }

@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s5); }
  .footer-brand { grid-column: 1 / -1; max-width: 52ch; }
}
@media (min-width: 940px) {
  .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s6); }
  .footer-brand { grid-column: auto; }
}
@media (min-width: 1000px) {
  .footer-grid { gap: var(--s7); }
  .footer-bottom { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--s5); }
  .footer-bottom p:last-child { text-align: right; }
}



/* --------------------------------------------------------------------------
   21. Release 5 interface enhancements
   -------------------------------------------------------------------------- */


/* Animated savings illustration on the right side of the homepage hero */
.hero__visual {
  position: relative;
  min-height: 350px;
  width: 100%;
  max-width: 490px;
  margin-inline: auto;
  isolation: isolate;
}
.hero-art {
  position: absolute;
  inset: 0 0 58px;
  min-height: 270px;
}
.hero-art__glow {
  position: absolute;
  width: 270px;
  height: 270px;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(224, 160, 47, .22);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 28px rgba(255,255,255,.018), 0 0 0 58px rgba(255,255,255,.012);
  animation: heroGlow 4.6s ease-in-out infinite;
}
.hero-art__ticket {
  position: absolute;
  left: 50%;
  top: 32px;
  z-index: 3;
  width: min(270px, 72vw);
  min-height: 166px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 14px;
  box-shadow: 0 28px 50px -28px rgba(0,0,0,.72);
  color: var(--ink);
  transform: translateX(-58%) rotate(-5deg);
  animation: heroTicketFloat 5s ease-in-out infinite;
}
.hero-art__ticket::before,
.hero-art__ticket::after {
  content: "";
  position: absolute;
  top: 54%;
  width: 22px;
  height: 22px;
  background: #173a2b;
  border-radius: 50%;
}
.hero-art__ticket::before { left: -12px; }
.hero-art__ticket::after { right: -12px; }
.hero-art__ticket-top {
  display: block;
  margin-bottom: 8px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pine);
}
.hero-art__ticket strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.15rem, 7vw, 3rem);
  line-height: .95;
  color: var(--gold-deep);
}
.hero-art__ticket-code {
  display: inline-flex;
  margin-top: 13px;
  padding: 5px 9px;
  background: var(--pine-tint);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--pine);
}
.hero-art__ticket-line {
  display: block;
  height: 1px;
  margin: 15px 0 9px;
  background: var(--rule);
}
.hero-art__ticket-meta {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted);
}
.hero-art__bag {
  position: absolute;
  right: 14%;
  top: 132px;
  z-index: 4;
  width: 96px;
  height: 105px;
  background: var(--gold-lift);
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 10px 10px 20px 20px;
  box-shadow: 0 22px 34px -22px rgba(0,0,0,.8);
  transform: rotate(7deg);
  animation: heroBagFloat 4.2s ease-in-out infinite .4s;
}
.hero-art__bag-handle {
  position: absolute;
  left: 24px;
  top: -27px;
  width: 48px;
  height: 39px;
  border: 7px solid var(--gold-lift);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
}
.hero-art__bag-check {
  position: absolute;
  left: 50%;
  top: 51%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
}
.hero-art__bag-check svg { width: 26px; height: 26px; }
.hero-art__bag-check path {
  fill: none;
  stroke: var(--pine);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-art__coin {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  background: var(--gold-lift);
  border: 2px solid rgba(255,255,255,.65);
  border-radius: 50%;
  box-shadow: 0 14px 28px -18px #000;
  color: var(--ink-deep);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 800;
}
.hero-art__coin--one { left: 8%; top: 31px; animation: heroCoinOne 3.8s ease-in-out infinite; }
.hero-art__coin--two { right: 4%; top: 52px; width: 34px; height: 34px; font-size: 1rem; animation: heroCoinTwo 3.4s ease-in-out infinite .5s; }
.hero-art__spark {
  position: absolute;
  z-index: 2;
  width: 13px;
  height: 13px;
  border-top: 2px solid var(--gold-lift);
  border-left: 2px solid var(--gold-lift);
  transform: rotate(45deg);
  opacity: .8;
}
.hero-art__spark--one { left: 8%; top: 170px; animation: heroSpark 2.8s ease-in-out infinite; }
.hero-art__spark--two { right: 8%; top: 218px; animation: heroSpark 3.2s ease-in-out infinite .8s; }

.hero__visual .hero__deck {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: flex;
  justify-content: center;
  gap: 8px;
  height: auto;
  padding: 0;
  overflow: visible;
}
.hero__visual .stub {
  position: relative;
  top: auto;
  left: auto;
  width: min(205px, 46%);
  padding: 9px;
  transform: none;
  box-shadow: 0 14px 28px -20px rgba(0,0,0,.78);
}
.hero__visual .stub--2 { display: none; }
.hero__visual .stub__logo { width: 38px; height: 38px; }
.hero__visual .stub__title { font-size: .82rem; }
.hero__visual .stub__meta { font-size: .72rem; }
.hero__visual .stub:hover,
.hero__visual .stub:focus-visible { transform: translateY(-4px); }

@keyframes heroGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(.97); opacity: .8; }
  50% { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
}
@keyframes heroTicketFloat {
  0%, 100% { transform: translateX(-58%) translateY(0) rotate(-5deg); }
  50% { transform: translateX(-58%) translateY(-9px) rotate(-2.5deg); }
}
@keyframes heroBagFloat {
  0%, 100% { transform: translateY(0) rotate(7deg); }
  50% { transform: translateY(-12px) rotate(4deg); }
}
@keyframes heroCoinOne {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-13px) rotate(8deg); }
}
@keyframes heroCoinTwo {
  0%, 100% { transform: translateY(0) rotate(7deg); }
  50% { transform: translateY(10px) rotate(-10deg); }
}
@keyframes heroSpark {
  0%, 100% { transform: rotate(45deg) scale(.72); opacity: .35; }
  50% { transform: rotate(45deg) scale(1.15); opacity: 1; }
}

@media (min-width: 1040px) {
  .hero__visual { min-height: 390px; max-width: 470px; }
  .hero-art { inset: 0 0 62px; }
  .hero-art__ticket { top: 52px; width: 290px; transform: translateX(-61%) rotate(-5deg); }
  .hero-art__bag { right: 9%; top: 159px; }
  .hero__visual .hero__deck { bottom: -2px; }
}

/* Polished information cards for the brand page sidebar */
.sidebar { gap: var(--s4); }
.side-box {
  position: relative;
  overflow: hidden;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-ticket);
  box-shadow: 0 12px 30px -28px rgba(18, 41, 31, .7);
}
.side-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--rule-soft);
}
.side-box--accent {
  border-color: rgba(30, 92, 67, .25);
  background: #fff;
}
.side-box--accent::before { background: var(--pine); }
.side-box--checklist::before { background: var(--gold); }
.side-box--website::before { background: var(--pine); }
.side-box--report::before { background: var(--muted); }
.side-box__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.side-box__head h2 { margin: 0; }
.side-box__eyebrow {
  display: block;
  margin-bottom: 2px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.side-box__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  background: var(--pine-tint);
  border-radius: 11px;
  color: var(--pine);
}
.side-box__icon--gold { background: var(--gold-tint); color: var(--gold-deep); }
.side-box__icon--soft { background: var(--rule-soft); color: var(--ink-body); }
.side-box__icon svg { width: 23px; height: 23px; }
.side-box__icon path,
.side-box__icon circle,
.side-box__icon rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.side-box p, .side-box li { font-size: .9rem; }
.side-box__text-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: .88rem;
  font-weight: 750;
  text-decoration: none;
}
.side-box__text-link span { transition: transform .15s ease; }
.side-box__text-link:hover span { transform: translateX(3px); }
.side-box .checklist { display: grid; gap: 10px; margin: 0; }
.side-box .checklist li {
  margin: 0;
  padding-left: 29px;
  color: var(--ink-body);
}
.side-box .checklist li::before {
  /* U+2713 check mark, written as a CSS escape so the file stays ASCII and
     no future re-save can mangle it into mojibake again. */
  content: "\2713";
  display: grid;
  place-items: center;
  top: .12em;
  width: 19px;
  height: 19px;
  background: var(--pine-tint);
  border-radius: 50%;
  color: var(--pine);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
}
.side-box__visit { margin-top: 2px !important; }

/* Animated coupon code reveal and copy interaction */
.coupon__action { position: relative; }
.coupon-reveal {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 50px;
  padding: 0;
  overflow: hidden;
  background: var(--pine);
  border: 1px solid var(--pine);
  border-radius: var(--r-btn);
  box-shadow: 0 10px 20px -16px rgba(18, 41, 31, .85);
  color: #fff;
  cursor: pointer;
  isolation: isolate;
}
.coupon-reveal:hover { background: var(--pine-dark); border-color: var(--pine-dark); }
.coupon-reveal__label {
  display: grid;
  place-items: center;
  flex: 1;
  padding: 12px 14px;
  font-weight: 750;
  z-index: 2;
}
.coupon-reveal__peek {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 58px;
  padding: 0 11px;
  background: #fff;
  border-left: 1px dashed rgba(30, 92, 67, .45);
  color: var(--pine);
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .05em;
  z-index: 2;
  transition: transform .22s ease;
}
.coupon-reveal__peek::before {
  content: "";
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  background: var(--card);
  border-radius: 50%;
  box-shadow: 0 50px 0 var(--card);
}
.coupon-reveal:hover .coupon-reveal__peek { transform: translateX(3px); }
.coupon-reveal__shine {
  position: absolute;
  inset: -100% auto -100% -42%;
  width: 28%;
  background: transparent;
  transform: rotate(17deg);
  transition: left .45s ease;
  z-index: 1;
}
.coupon-reveal:hover .coupon-reveal__shine { left: 118%; }

.coupon__code {
  gap: 10px;
  opacity: 0;
  transform: translateY(-7px) scale(.985);
  transform-origin: top center;
  transition: opacity .17s ease, transform .17s ease;
}
.coupon__code.is-visible {
  opacity: 1;
  transform: none;
  animation: couponCodeUnfold .32s cubic-bezier(.2,.8,.2,1);
}
.coupon__code-stage {
  position: relative;
  overflow: hidden;
  padding: 11px;
  background: #fff;
  border: 1px solid rgba(30, 92, 67, .28);
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}
.coupon__code-stage::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 7px;
  height: 1px;
  background: var(--rule);
}
.coupon__code-caption {
  display: block;
  margin-bottom: 4px;
  text-align: center;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.coupon__code-text {
  padding: 5px 6px 10px;
  background: transparent;
  border: 0;
  font-size: 1.12rem;
}
.coupon__code-stage.is-copied { animation: codeStamp .5s ease; }

.btn--copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: #fff;
  overflow: hidden;
}
.btn--copy:hover { background: #744306; border-color: #744306; color: #fff; }
.copy-btn__icon {
  position: relative;
  width: 19px;
  height: 19px;
  flex: none;
}
.copy-btn__icon svg {
  position: absolute;
  inset: 0;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .18s ease, transform .22s ease;
}
.copy-btn__check { opacity: 0; transform: scale(.45) rotate(-12deg); }
.btn--copy.is-copied {
  background: var(--pine);
  border-color: var(--pine);
  animation: copyButtonPop .34s ease;
}
.btn--copy.is-copied .copy-btn__copy { opacity: 0; transform: scale(.55) rotate(10deg); }
.btn--copy.is-copied .copy-btn__check { opacity: 1; transform: scale(1) rotate(0); }

@keyframes couponCodeUnfold {
  from { opacity: 0; transform: translateY(-9px) scaleY(.82); filter: blur(1px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes copyButtonPop {
  0% { transform: scale(1); }
  45% { transform: scale(.97); }
  75% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@keyframes codeStamp {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); }
  50% { box-shadow: inset 0 0 0 2px rgba(30,92,67,.4), 0 0 0 4px rgba(30,92,67,.08); }
}

@media (max-width: 459px) {
  .hero__visual { min-height: 330px; }
  .hero-art__ticket { left: 48%; }
  .hero-art__bag { right: 5%; transform: scale(.9) rotate(7deg); }
  .hero__visual .stub { width: 48%; }
  .hero__visual .stub__text { max-width: calc(100% - 44px); }
}

/* --------------------------------------------------------------------------
   21. Print - people print coupon pages. Make that work.
   -------------------------------------------------------------------------- */
@media print {
  .trust-bar, .site-header, .site-footer, .nav-toggle, .hero-search,
  .coupon-bar, .load-more-wrap, .sidebar, .toast, .skip-link { display: none !important; }

  body { background: #fff; font-size: 12pt; color: #000; }
  .layout { display: block; padding: 0; }
  .coupon { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .coupon::before, .coupon::after { display: none; }
  .coupon__code { display: flex !important; }
  .btn { display: none; }
}

/* ========================================================================== 
   CouponUpdates - Modern Retail Orange public theme (v7)
   Visual-only override. Existing public structure and functionality preserved.
   ========================================================================== */
@media screen {
  :root {
    --ink: #111827;
    --ink-deep: #1f2937;
    --ink-body: #374151;
    --muted: #667085;
    --paper: #fff7ed;
    --card: #ffffff;
    --rule: #eadfd6;
    --rule-soft: #f4ebe4;
    --pine: #f97316;
    --pine-dark: #ea580c;
    --pine-tint: #fff1e8;
    --gold: #fb923c;
    --gold-lift: #fdba74;
    --gold-deep: #c2410c;
    --gold-tint: #fff7ed;
    --clay: #b42318;
    --clay-tint: #fff1ef;
    --on-ink: #fff7ed;
    --on-ink-soft: #d8c8bd;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --serif: var(--sans);
    --r-tile: 10px;
    --r-btn: 10px;
    --r-ticket: 14px;
    --lift-ticket: 0 10px 30px -24px rgba(90, 44, 15, .35);
    --lift-pop: 0 22px 60px -26px rgba(62, 31, 14, .28);
    --lift-stub: 0 18px 38px -24px rgba(75, 33, 11, .45);
    --perf-x: var(--rule);
    --perf-y: var(--rule);
    --container: 1220px;
    --header-h: 72px;
  }

  html { background: #fff; }
  body {
    background: #fffaf7;
    color: var(--ink-body);
    font-size: 16px;
    line-height: 1.62;
  }
  h1, h2, h3, h4 { color: var(--ink); letter-spacing: -.025em; }
  h1 { font-weight: 800; }
  h2 { font-weight: 780; }
  h3 { font-weight: 720; }
  a { color: var(--pine-dark); }
  a:hover { color: #c2410c; }
  :focus-visible { outline-color: #f97316; outline-width: 3px; outline-offset: 3px; }
  ::selection { background: #fed7aa; color: #431407; }

  .btn {
    min-height: 44px;
    border-radius: 10px;
    font-weight: 750;
    letter-spacing: -.01em;
    box-shadow: none;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn--primary,
  .btn--deal {
    --btn-bg: #f97316;
    --btn-bd: #f97316;
    --btn-fg: #fff;
    background: #f97316;
    border-color: #ef650f;
    box-shadow: 0 10px 20px -15px rgba(234, 88, 12, .72);
  }
  .btn--primary:hover,
  .btn--deal:hover {
    --btn-bg: #ea580c;
    --btn-bd: #d94f08;
    background: #ea580c;
    box-shadow: 0 12px 24px -14px rgba(194, 65, 12, .7);
  }
  .btn--ghost {
    --btn-bg: #fff;
    --btn-fg: var(--ink);
    --btn-bd: #dfd4cb;
    background: #fff;
  }
  .btn--ghost:hover { --btn-bd: #f97316; --btn-fg: #c2410c; background: #fffaf7; }
  .btn--copy { background: #1c1917; border-color: #1c1917; color: #fff; }
  .btn--copy:hover { background: #2b2521; border-color: #2b2521; }
  .btn--copy.is-copied { background: #15803d; border-color: #15803d; }

  .tag {
    border-radius: 999px;
    border-color: #eadfd6;
    background: #fff;
    font-weight: 700;
  }
  .tag--verified { background: #ecfdf3; border-color: #bbf7d0; color: #16743a; }
  .tag--best { background: #fff1e6; border-color: #fdba74; color: #b93808; }
  .fact--verified { color: #168447; }

  .trust-bar {
    background: #1c1917;
    color: #d7cec7;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .trust-bar__claim { color: #fff8f2; }
  .trust-bar__claim .ico { background: #f97316; }

  .site-header {
    background: rgba(255,255,255,.97);
    border-bottom-color: #eee4dc;
    box-shadow: 0 6px 22px -20px rgba(71, 36, 17, .55);
    backdrop-filter: blur(12px);
  }
  .site-header__inner { gap: 14px; }

  .brand { gap: 9px; }
  /* Colour comes from the tokens at the top of this skin; the skin itself
     only adds the lift under the tile. */
  .brand__mark {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 7px 10px rgba(234, 88, 12, .18));
  }
  .brand__text {
    font-family: var(--sans);
    font-size: 1.28rem;
    font-weight: 850;
    letter-spacing: -.045em;
  }
  .brand__coupon { color: #1c1917; }
  .brand__tested { color: var(--pine); }
  .brand--footer .brand__coupon { color: #fff; }
  .brand--footer .brand__tested { color: var(--gold); }

  .nav-toggle { background: #fff; border-color: #eadfd6; border-radius: 10px; }
  .nav-toggle:hover { border-color: var(--pine); background: #fff8f2; }

  .header-search {
    background: #fffaf7;
    border-color: #e8ddd4;
    border-radius: 11px;
  }
  .header-search:focus-within { border-color: #fb923c; box-shadow: 0 0 0 4px rgba(249,115,22,.12); }
  .header-search button {
    background: #f97316;
    border-radius: 0 10px 10px 0;
    font-weight: 760;
  }
  .header-search button:hover { background: #df4d06; }
  .site-nav__list > li > a:hover,
  .site-nav__list > li > a[aria-current="page"],
  .mega-toggle:hover,
  .mega-toggle[aria-expanded="true"] { color: #d94f08; }
  .site-nav__list > li > a[aria-current="page"]::after { background: #f97316; border-radius: 4px; }

  .mega {
    background: #fff;
    border-color: #ede2d9;
  }
  .search-suggestions { border-color: #eadfd6; box-shadow: var(--lift-pop); border-radius: 12px; }
  .search-suggestions a:hover,
  .search-suggestions a.is-active { background: #fff5ec; }

  /* Branded hero: animated warm retail wallpaper, no ticket/perforation motif. */
  .hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #ea580c;
    border: 0;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('../images/hero-wallpaper.svg');
    background-size: 360px 240px;
    background-repeat: repeat;
    opacity: .8;
    animation: couponupdatesWallpaper 26s linear infinite;
  }
  .hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 520px;
    height: 520px;
    right: -120px;
    top: -210px;
    border-radius: 50%;
    background: transparent;
    animation: couponupdatesHalo 8s ease-in-out infinite;
  }
  @keyframes couponupdatesWallpaper {
    from { background-position: 0 0; }
    to { background-position: 360px 240px; }
  }
  @keyframes couponupdatesHalo {
    0%,100% { transform: scale(.94) translate3d(0,0,0); opacity: .62; }
    50% { transform: scale(1.06) translate3d(-20px,24px,0); opacity: 1; }
  }
  .hero__grid { position: relative; z-index: 1; }
  .hero h1 {
    font-family: var(--sans);
    font-weight: 850;
    font-size: clamp(2.35rem, 1.55rem + 3.4vw, 4.25rem);
    letter-spacing: -.055em;
    line-height: .98;
    color: #fff;
    max-width: 12ch;
    text-shadow: 0 2px 18px rgba(100,34,8,.12);
  }
  .hero__lead { color: rgba(255,255,255,.9); max-width: 62ch; font-size: 1.03rem; }
  .hero-search {
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 14px;
    box-shadow: 0 18px 44px -22px rgba(91,32,7,.6);
  }
  .hero-search input { border-radius: 10px; background: #fff; }
  .hero-search input:focus { box-shadow: inset 0 0 0 2px rgba(249,115,22,.18); }
  .hero-search .btn { border-radius: 10px; }
  .hero__proof li { color: #fff; }
  .hero__proof .ico { background: rgba(255,255,255,.18); fill: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }

  .hero__visual { min-height: 350px; }
  .hero-art { inset: 0 0 58px; }
  .hero-art__glow {
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255,255,255,.18);
    background: transparent;
    box-shadow: 0 0 0 34px rgba(255,255,255,.025), 0 0 0 68px rgba(255,255,255,.018);
  }
  .hero-art__ticket {
    width: min(286px, 74vw);
    min-height: 170px;
    padding: 23px 24px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.78);
    background: rgba(255,255,255,.97);
    box-shadow: 0 28px 60px -30px rgba(88,31,8,.72);
    transform: translateX(-58%) rotate(-2.2deg);
    animation: couponupdatesCardFloat 5s ease-in-out infinite;
  }
  .hero-art__ticket::before,
  .hero-art__ticket::after { display: none; }
  .hero-art__ticket-top { color: #c2410c; letter-spacing: .12em; }
  .hero-art__ticket strong {
    font-family: var(--sans);
    color: #1c1917;
    font-weight: 900;
    letter-spacing: -.06em;
  }
  .hero-art__ticket-code { background: #fff0e2; color: #c2410c; border-radius: 8px; }
  .hero-art__ticket-line { background: #f0e2d8; }
  .hero-art__ticket-meta { color: #746b63; }
  .hero-art__bag {
    right: 10%;
    top: 138px;
    width: 92px;
    height: 92px;
    border-radius: 24px;
    background: #1c1917;
    border: 1px solid rgba(255,255,255,.42);
    box-shadow: 0 24px 38px -24px rgba(71,24,5,.76);
    transform: rotate(6deg);
    animation: couponupdatesBadgeFloat 4.2s ease-in-out infinite .35s;
  }
  .hero-art__bag-handle { display: none; }
  .hero-art__bag-check { width: 52px; height: 52px; background: #fff; }
  .hero-art__bag-check path { stroke: #f97316; }
  .hero-art__coin {
    background: #fff;
    border-color: rgba(255,255,255,.75);
    color: #d94f08;
    font-family: var(--sans);
    box-shadow: 0 14px 30px -20px rgba(74,24,5,.7);
  }
  .hero-art__spark { border-color: #fff; opacity: .68; }
  @keyframes couponupdatesCardFloat {
    0%,100% { transform: translateX(-58%) translateY(0) rotate(-2.2deg); }
    50% { transform: translateX(-58%) translateY(-11px) rotate(.8deg); }
  }
  @keyframes couponupdatesBadgeFloat {
    0%,100% { transform: translateY(0) rotate(6deg); }
    50% { transform: translateY(-13px) rotate(1deg); }
  }
  .hero__visual .stub {
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 36px -24px rgba(78,28,7,.72);
  }
  .hero__visual .stub__meta { color: #c2410c; }

  .section { background: #fff; }
  .section--surface { background: #fff7f0; border-block: 1px solid #f3e6dc; }
  .section--ink {
    background: #1c1917;
    color: #f8eee7;
  }
  .section--ink .section-head--light p { color: #cdbdb2; }
  .section-head h2 { letter-spacing: -.04em; }

  .trust-card {
    padding: 22px;
    border: 1px solid #eadfd6;
    border-top: 3px solid #f97316;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px -30px rgba(68,31,12,.45);
  }
  .trust-card__icon { border-radius: 10px; background: #fff0e2; color: #d94f08; }
  .step { border-top-color: rgba(255,255,255,.14); }
  .step::before { color: #fb923c; font-family: var(--sans); font-weight: 850; }
  .reason { border-bottom-color: #eee3da; }

  .store-grid { gap: 16px; }
  .store-card__link {
    border-color: #4b5563;
    border-radius: 14px;
    background: #2d3745;
    box-shadow: 0 10px 26px -22px rgba(23,43,41,.4);
    transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease, background-color .17s ease;
  }
  .store-card__link:hover {
    transform: translateY(-2px);
    border-color: #fb923c;
    background: #374151;
    box-shadow: 0 18px 34px -26px rgba(23,43,41,.5);
  }
  .store-card__media { background: #fff3e6; border-color: #efd8c0; border-radius: 11px; }
  .store-card__initials { font-family: var(--sans); color: #d94f08; font-weight: 850; }
  .store-card__title { color: #fffaf3; }
  .store-card__desc { color: #e5e7eb; }
  .store-card__date { color: #cbd5e1; }
  .store-card__link:hover .store-card__title { color: #fdba74; }
  .store-card__link:focus-visible { outline: 3px solid #c2410c; outline-offset: 4px; }
  .store-card .tag--verified { background: #374151; color: #f3f4f6; border-color: #6b7280; }
  .store-card__count { background: #fdba74; border-radius: 10px; }
  .store-card__count-num { font-family: var(--sans); font-weight: 850; color: #652b0d; }
  .store-card__count-label { color: #652b0d; }

  /* Coupon cards become compact retail result cards instead of torn tickets. */
  .coupon-list { gap: 16px; }
  .coupon {
    overflow: visible;
    grid-template-columns: 1fr;
    border: 1px solid #e8ddd5;
    border-radius: 14px;
    box-shadow: 0 12px 30px -28px rgba(69,32,14,.52);
    background: #fff;
  }
  .coupon::before,
  .coupon::after { display: none !important; }
  .coupon__flag {
    top: 12px;
    right: 12px;
    padding: 6px 10px;
    background: #1c1917;
    border-radius: 999px;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .coupon__rail {
    align-items: flex-start;
    text-align: left;
    padding: 18px 18px 14px;
    background: #fff5ec;
    border-radius: 13px 13px 0 0;
    border-bottom: 1px solid #f1e1d5;
  }
  .coupon__rail::after { display: none; }
  .coupon__discount {
    font-family: var(--sans);
    color: #d94f08;
    font-weight: 900;
    font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem);
    letter-spacing: -.05em;
  }
  .coupon__discount--long { font-size: clamp(1.1rem, .9rem + .8vw, 1.35rem); letter-spacing: -.02em; }
  .coupon__discount--xlong { font-size: clamp(.95rem, .85rem + .5vw, 1.1rem); letter-spacing: 0; line-height: 1.15; }
  .coupon__kind {
    color: #8f4b22;
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .coupon__main { padding: 18px; }
  .coupon__title { font-size: 1.08rem; font-weight: 780; }
  .coupon__desc { color: #6f665f; }
  .coupon__facts { gap: 7px 14px; }
  .coupon__terms summary { color: #c2410c; }
  .coupon__terms p { background: #fff9f5; border: 1px solid #f1e5dc; border-radius: 10px; }
  .coupon__action { padding: 0 18px 18px; }
  .coupon.is-featured { border-color: #fb923c; box-shadow: 0 16px 36px -28px rgba(234,88,12,.48); }
  .coupon.is-expired { border-style: solid; background: #faf8f7; opacity: .76; }
  .coupon.is-expired .coupon__rail { background: #f4f1ef; }

  .coupon-reveal {
    min-height: 48px;
    background: #f97316;
    border-color: #ee5b0b;
    border-radius: 10px;
    box-shadow: 0 10px 20px -16px rgba(194,65,12,.66);
  }
  .coupon-reveal:hover { background: #ea580c; border-color: #d94f08; }
  .coupon-reveal__peek {
    background: rgba(255,255,255,.98);
    border-left: 1px solid rgba(194,65,12,.18);
    color: #c2410c;
  }
  .coupon-reveal__peek::before { display: none; }
  .coupon__code-stage {
    background: #fff8f2;
    border-color: #fed7aa;
    border-radius: 10px;
    box-shadow: none;
  }
  .coupon__code-stage::after { background: #f4d5bf; }
  .coupon__code-text { color: #1c1917; }
  .coupon__store-link { color: #c2410c; }

  .page-head {
    background: #fff6ee;
    border-bottom: 1px solid #f0e3da;
  }
  .page-head h1 { font-family: var(--sans); font-weight: 850; letter-spacing: -.05em; }
  .breadcrumb { color: #7a6e65; }
  .page-search { border-radius: 12px; }

  .store-head {
    background: #fff6ee;
    border-bottom: 1px solid #f0e3da;
  }
  .store-head__logo {
    background: #fff;
    border-color: #eadfd6;
    border-radius: 16px;
    box-shadow: 0 14px 34px -28px rgba(91,40,15,.48);
  }
  .store-head__seal { background: #f97316; color: #fff; }
  .store-head__text h1 { font-family: var(--sans); font-weight: 850; letter-spacing: -.05em; }
  .store-stats {
    background: #fff;
    border: 1px solid #e9ded6;
    border-radius: 14px;
    box-shadow: 0 12px 30px -28px rgba(69,32,14,.45);
  }
  .store-stats__item { border-color: #eee3da; }
  .store-stats dd { color: #c2410c; font-family: var(--sans); font-weight: 850; }
  .coupon-bar { border-bottom-color: #e9ded6; }
  .coupon-filter input { border-color: #e5d8ce; background: #fff; border-radius: 10px; }
  .coupon-filter input:focus { border-color: #fb923c; box-shadow: 0 0 0 4px rgba(249,115,22,.1); }

  .side-box {
    border-color: #e9ded6;
    border-radius: 14px;
    box-shadow: 0 12px 30px -28px rgba(72,32,12,.42);
  }
  .side-box::before { width: 3px; background: #eadfd6; }
  .side-box--accent { border-color: #fed7aa; background: #fff; }
  .side-box--accent::before,
  .side-box--website::before { background: #f97316; }
  .side-box--checklist::before { background: #fb923c; }
  .side-box__icon { background: #fff0e2; color: #d94f08; }
  .side-box__icon--gold { background: #fff4e7; color: #c2410c; }
  .side-box .checklist li::before { background: #fff0e2; color: #d94f08; }

  .faq-item { border-color: #e9ded6; background: #fff; }
  .faq-item__q:hover { color: #c2410c; }
  .faq-item__sign::before,
  .faq-item__sign::after { background: #f97316; }

  .legal,
  .form-card,
  .empty {
    background: #fff;
    border-color: #e9ded6;
    border-radius: 14px;
    box-shadow: 0 12px 32px -30px rgba(72,32,12,.38);
  }
  .legal h2, .legal h3 { font-family: var(--sans); }
  .legal-note { background: #fff5ec; border-color: #fdba74; }
  .field input,
  .field textarea,
  .field select {
    border-color: #dfd3ca;
    border-radius: 10px;
    background: #fff;
  }
  .field input:focus,
  .field textarea:focus,
  .field select:focus { border-color: #fb923c; box-shadow: 0 0 0 4px rgba(249,115,22,.1); }

  .pagination a,
  .pagination span { border-radius: 9px; border-color: #e5d9d0; background: #fff; }
  .pagination a:hover { border-color: #fb923c; color: #c2410c; }
  .pagination .is-current { background: #f97316; border-color: #f97316; color: #fff; }

  .site-footer {
    background: #17120f;
    color: #efe5dd;
    border-top: 5px solid #f97316;
  }
  .footer-lead { border-bottom-color: rgba(255,255,255,.1); }
  .footer-lead__statement { color: #fff; font-family: var(--sans); font-weight: 820; letter-spacing: -.035em; }
  .footer-brand__text,
  .footer-col a { color: #cdbdb2; }
  .footer-brand__links a:hover,
  .footer-col__more { color: #fb923c !important; }
  .footer-bottom { color: #9d8d82; }

  .toast { border-radius: 10px; background: #1c1917; }

  @media (min-width: 800px) {
    .coupon {
      grid-template-columns: 152px minmax(0,1fr) 190px;
      align-items: stretch;
    }
    .coupon__rail {
      justify-content: center;
      align-items: center;
      text-align: center;
      border-right: 1px solid #f1e1d5;
      border-bottom: 0;
      border-radius: 13px 0 0 13px;
    }
    .coupon__action {
      justify-content: center;
      padding: 18px;
      border-left: 1px solid #f1e6de;
    }
  }

  @media (min-width: 1000px) {
    .site-header__inner { grid-template-columns: auto auto minmax(240px, 1fr); }
    .mega { border-top-color: #f0e5dd; border-bottom-color: #e9ddd4; }
  }

  @media (max-width: 759px) {
    .hero { padding-top: 42px; }
    .hero h1 { max-width: 13ch; }
    .hero__visual { min-height: 320px; }
    .hero-art__ticket { left: 49%; top: 30px; }
    .hero-art__bag { right: 5%; top: 145px; }
    .trust-card { padding: 18px; }
  }

  @media (max-width: 459px) {
    .hero::before { background-size: 300px 200px; }
    .hero__visual { min-height: 300px; }
    .hero-art__ticket { left: 51%; width: min(250px, 78vw); padding: 19px; }
    .hero-art__bag { width: 78px; height: 78px; right: 2%; top: 154px; }
    .hero-art__bag-check { width: 44px; height: 44px; }
    .hero-art__coin--two { display: none; }
    .store-card__link { border-radius: 12px; }
  }
}

/* Charcoal + Orange palette, matching theme option 2. */
@media screen {
  body { background: #fff7ed; }
  .trust-bar, .section--ink, .site-footer { background: #1f2937; color: #e5e7eb; }
  .section--ink .section-head--light p { color: #d1d5db; }
  .savings-hero h1 span { color: #f97316; }
  .savings-hero__eyebrow { color: #f97316; }
  .savings-hero__ico { color: #f97316; }
  .savings-hero__chip:hover { background: #f97316; border-color: #f97316; }
  .savings-hero__spark { background: #f97316; }
  .savings-hero__search .btn { background: #f97316; border-color: #f97316; color: #111827; }
  .savings-hero__search .btn:hover { background: #ea580c; border-color: #ea580c; color: #111827; }
  .btn--primary, .btn--deal, .header-search button, .coupon-reveal { background: #f97316; border-color: #f97316; color: #111827; }
  .btn--primary:hover, .btn--deal:hover, .header-search button:hover, .coupon-reveal:hover { background: #ea580c; border-color: #ea580c; color: #111827; }
  .store-card__count { background: #f97316; }
  .store-card__count-num, .store-card__count-label { color: #111827; }
}
/* Brand detail pages share the homepage charcoal and orange surfaces. */
@media screen {
  .brand-page .store-head { padding: 28px 0 48px; background: #1f2937; color: #f9fafb; border-bottom: 1px solid #475569; }
  .brand-page .store-head::after { display: none; }
  .brand-page .breadcrumb { margin-bottom: 36px; color: #cbd5e1; }
  .brand-page .breadcrumb a { color: #e5e7eb; }
  .brand-page .breadcrumb a:hover { color: #fdba74; }
  .brand-page .store-head__inner { align-items: center; animation: savings-arrive .75s ease-out both; }
  .brand-page .store-head__eyebrow { margin: 0 0 12px; color: #fdba74; font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
  .brand-page .store-head__text h1 { color: #fff; font-size: clamp(2.3rem, 4vw, 3.6rem); line-height: 1.1; }
  .brand-page .store-head__text h1::after { content: ""; display: block; width: 76px; height: 4px; margin-top: 18px; background: #f97316; border-radius: 2px; animation: savings-underline 4s ease-in-out infinite; transform-origin: left; }
  .brand-page .store-head__desc { color: #d1d5db; max-width: 62ch; line-height: 1.75; }
  .brand-page .store-head__logo { background: #fff7ed; border: 1px solid #fdba74; box-shadow: none; }
  .brand-page .store-head__tags .tag { background: #374151; border-color: #4b5563; color: #e5e7eb; }
  .brand-page .store-head__tags .tag .ico { fill: #fdba74; }
  .brand-page .store-head__actions { margin-top: 24px; }
  .brand-page .store-stats { background: #475569; border-color: #475569; box-shadow: none; gap: 1px; }
  .brand-page .store-stats__item { background: #2d3745; padding: 20px; }
  .brand-page .store-stats dt { color: #d1d5db; }
  .brand-page .store-stats dd { color: #fb923c; font-size: 2rem; }
  .brand-page .coupon-list { gap: 22px; }
  .brand-page .coupon { background: #2d3745; border-color: #4b5563; border-radius: 16px; box-shadow: 0 8px 20px -16px #111827; }
  .brand-page .coupon__rail { background: #374151; border-color: #4b5563; border-radius: 15px 15px 0 0; }
  .brand-page .coupon__discount { color: #fb923c; }
  .brand-page .coupon__kind { color: #fdba74; }
  .brand-page .coupon__title { color: #fffaf3; line-height: 1.45; }
  .brand-page .coupon__desc, .brand-page .coupon .fact { color: #d1d5db; }
  .brand-page .coupon .fact--verified { color: #bbf7d0; }
  .brand-page .coupon .fact--warn { color: #fecaca; }
  .brand-page .coupon__action { border-color: #4b5563; }
  .brand-page .coupon__terms summary, .brand-page .coupon__store-link { color: #fdba74; }
  .brand-page .coupon__terms p { background: #1f2937; border-color: #4b5563; color: #e5e7eb; }
  .brand-page .coupon__flag { background: #fdba74; color: #111827; }
  .brand-page .coupon.is-featured { border-color: #f97316; }
  .brand-page .coupon.is-expired { background: #374151; opacity: 1; border-color: #6b7280; }
  .brand-page .coupon.is-expired .coupon__rail { background: #4b5563; }
  .brand-page .coupon.is-expired .coupon__title,
  .brand-page .coupon.is-expired .coupon__discount,
  .brand-page .coupon.is-expired .coupon__kind { color: #d1d5db; }
  .brand-page .side-box { border-color: #d1d5db; background: #fff; }
  .brand-page .side-box--accent { background: #1f2937; border-color: #4b5563; }
  .brand-page .side-box--accent h2 { color: #fff; }
  .brand-page .side-box--accent p, .brand-page .side-box--accent li { color: #d1d5db; }
  .brand-page .side-box--accent a:not(.btn) { color: #fdba74; }
  @media (min-width: 800px) {
    .brand-page .coupon__rail { border-radius: 15px 0 0 15px; }
  }
  @media (max-width: 759px) {
    .brand-page .store-head { padding-bottom: 32px; }
    .brand-page .store-head__inner { gap: 22px; }
    .brand-page .store-stats__item { padding: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .brand-page .store-head__inner, .brand-page .store-head__text h1::after { animation: none; }
  }
}
@media screen {


  .brand-page .breadcrumb [aria-current='page'] { color: #fdba74; }
}

/* Light brand tiles with a separate offer footer. */
@media screen {
  .store-card__link { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 18px 16px; align-items: start; padding: 22px 22px 0; background: #fffdf9; border: 1px solid #e2e5e9; border-top: 3px solid #f97316; border-radius: 16px; box-shadow: 0 5px 16px -12px #667085; overflow: hidden; }
  .store-card__link:hover { background: #fff7ed; border-color: #fb923c; box-shadow: 0 10px 24px -18px #667085; }
  .store-card__media { width: 64px; height: 64px; background: #f1f3f5; border: 1px solid #e2e5e9; border-radius: 14px; }
  .store-card__media .store-card__initials { color: #374151; font-size: 1.2rem; }
  .store-card__body { gap: 8px; }
  .store-card__title { color: #1f2937; font-size: 1.07rem; font-weight: 800; }
  .store-card__link:hover .store-card__title { color: #c2410c; }
  .store-card__desc { color: #667085; font-size: .88rem; }
  .store-card__meta { gap: 9px; }
  .store-card .tag--verified { background: #f3f4f6; border-color: #e5e7eb; color: #4b5563; font-size: .73rem; }
  .store-card .tag--verified .ico { fill: #c2410c; }
  .store-card__date { color: #667085; font-size: .74rem; }
  .store-card__footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 -22px; padding: 14px 22px; background: #fff1e3; border-top: 1px solid #f2dfcc; }
  .store-card__count { flex-direction: row; gap: 5px; min-width: 0; padding: 0; background: transparent; border-radius: 0; }
  .store-card__count-num { color: #1f2937; font-size: .95rem; }
  .store-card__count-label { color: #667085; font-size: .8rem; }
  .store-card__cta { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; color: #c2410c; font-weight: 750; font-size: .84rem; }
  .store-card__cta > span { font-size: 1.2rem; }
  @media (max-width: 359px) {
    .store-card__link { grid-template-columns: 48px minmax(0, 1fr); padding: 16px 16px 0; gap: 14px 12px; }
    .store-card__media { width: 48px; height: 48px; }
    .store-card__footer { margin-inline: -16px; padding-inline: 16px; }
  }
}
/* Improved footer content using the established charcoal and orange theme. */
@media screen {
  .site-footer.footer-refresh { background: #1f2937; color: #e5e7eb; border-top: 1px solid #475569; padding: 0; }
  .footer-refresh__main { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 44px; padding: 56px 0 36px; align-items: start; }
  .footer-refresh__main > * { min-width: 0; }
  .footer-refresh .brand__coupon { color: #fff; }
  .footer-refresh .brand__tested { color: #f97316; }
  .footer-refresh__tagline { margin: 24px 0 14px; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.04em; }
  .footer-refresh__intro { max-width: 36ch; font-size: .88rem; line-height: 1.75; color: #d1d5db; margin: 0 0 20px; }
  .footer-refresh__browse { display: inline-flex; align-items: center; gap: 24px; color: #fb923c; font-size: .88rem; font-weight: 750; }
  .footer-refresh__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 8px; }
  .footer-refresh__nav h2 { font: 750 .78rem var(--sans); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 20px; color: #fff; }
  .footer-refresh__nav ul { list-style: none; padding: 0; margin: 0; }
  .footer-refresh__nav li { margin: 0 0 10px; }
  .footer-refresh__nav a { display: inline-block; padding: 4px 0; font-size: .87rem; color: #d1d5db; }
  .footer-refresh a:hover { color: #fb923c; }
  .footer-refresh :focus-visible { outline: 3px solid #fdba74; outline-offset: 4px; }
  .footer-refresh__guide { border-radius: 18px; padding: 28px; background: #1f2937; border-top: 4px solid #f97316; color: #f9fafb; }
  .footer-refresh__eyebrow { color: #fdba74; font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
  .footer-refresh__guide h2 { color: #fff; font: 750 1.45rem/1.25 var(--sans); letter-spacing: -.025em; margin: 16px 0 12px; }
  .footer-refresh__guide p { color: #d1d5db; font-size: .85rem; line-height: 1.75; margin: 0 0 22px; }
  .footer-refresh__guide a { display: flex; justify-content: space-between; gap: 12px; color: #fdba74; font-size: .82rem; font-weight: 700; }
  .footer-refresh__guide a:hover { color: #fff; }
  .footer-refresh__guide :focus-visible { outline-color: #fdba74; }
  .footer-refresh__note { display: grid; grid-template-columns: 210px 1fr; gap: 24px; border-top: 1px solid #475569; padding: 22px 0; }
  .footer-refresh__note > span { color: #fb923c; font-size: .75rem; font-weight: 750; }
  .footer-refresh__note p { margin: 0; color: #d1d5db; font-size: .75rem; line-height: 1.75; }
  .footer-refresh__base { background: #1f2937; color: #d1d5db; padding: 20px 0; }
  .footer-refresh__base .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
  .footer-refresh__base p { margin: 0; font-size: .75rem; }
  .footer-refresh__base nav { display: flex; flex-wrap: wrap; gap: 24px; }
  .footer-refresh__base a { color: #e5e7eb; font-size: .75rem; padding: 5px 0; }
  .footer-refresh__base a:hover { color: #fdba74; }
  .footer-refresh__base :focus-visible { outline-color: #fdba74; }
  .footer-refresh__trademarks { width: 100%; color: #b7c0cd; font-size: .68rem !important; }
  @media (max-width: 1050px) {
    .footer-refresh__main { grid-template-columns: 1fr 1.2fr; gap: 32px; }
    .footer-refresh__guide { grid-column: 1 / -1; }
  }
  @media (max-width: 600px) {
    .footer-refresh__main { grid-template-columns: minmax(0, 1fr); padding-top: 36px; }
    .footer-refresh__nav { gap: 16px; }
    .footer-refresh__guide { padding: 24px; }
    .footer-refresh__note { grid-template-columns: 1fr; gap: 8px; }
  }
}

/* Footer navigation and legal links. */
@media screen {
  .footer-refresh__main { grid-template-columns: 1.25fr repeat(3, minmax(0, .8fr)); gap: 40px; padding-bottom: 44px; }
  .footer-refresh__nav { display: block; padding-top: 8px; }
  .footer-refresh__nav h2 { margin-bottom: 16px; }
  .footer-refresh__nav li { margin-bottom: 7px; }
  .footer-refresh__nav a { font-size: .84rem; line-height: 1.55; }
  .footer-refresh__all-brands { color: #fb923c !important; font-weight: 750; margin-top: 6px; }
  .footer-refresh__trust { display: flex; justify-content: space-between; align-items: center; gap: 28px; border-top: 1px solid #475569; padding: 22px 0; }
  .footer-refresh__trust p { max-width: 75ch; margin: 0; color: #d1d5db; font-size: .78rem; line-height: 1.7; }
  .footer-refresh__trust strong { color: #fff; }
  .footer-refresh__trust a { flex: none; color: #fdba74; font-size: .78rem; font-weight: 750; white-space: nowrap; }
  .footer-refresh__base { border-top: 1px solid #374151; }
  .footer-refresh__base .container { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .footer-refresh__trademarks { width: auto; text-align: right; }
  @media (max-width: 1050px) {
    .footer-refresh__main { grid-template-columns: 1.25fr repeat(2, minmax(0, 1fr)); }
    .footer-refresh__nav--brands { grid-column: 2 / 4; }
  }
  @media (max-width: 680px) {
    .footer-refresh__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; }
    .footer-refresh__brand { grid-column: 1 / -1; }
    .footer-refresh__nav--brands { grid-column: auto; }
    .footer-refresh__trust { display: block; }
    .footer-refresh__trust a { display: inline-block; margin-top: 12px; white-space: normal; }
    .footer-refresh__base .container { display: block; }
    .footer-refresh__trademarks { margin-top: 8px !important; text-align: left; }
  }
  @media (max-width: 390px) {
    .footer-refresh__main { grid-template-columns: minmax(0, 1fr); }
  }
}

/* Homepage FAQ cards: two columns on desktop, one on smaller screens. */
@media screen {
  .home-faqs .faq-layout { display: block; }
  .home-faqs .faq-layout__head { position: static; max-width: 680px; margin: 0 auto 36px; text-align: center; }
  .home-faqs__eyebrow { display: block; margin-bottom: 12px; color: #c2410c; font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .home-faqs .faq-layout__head h2 { color: #1f2937; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; letter-spacing: -.035em; margin-bottom: 16px; }
  .home-faqs .faq-layout__head p { color: #5b6471; }
  .home-faqs .faq-layout__head a { color: #9a3412; }
  .home-faqs .faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px 24px; border: 0; }
  .home-faqs .faq-item { min-width: 0; background: #fffdf9; border: 1px solid #e2e5e9; border-radius: 14px; box-shadow: 0 4px 14px -12px #667085; }
  .home-faqs .faq-item:has(.faq-item__q[aria-expanded="true"]) { border-color: #f97316; }
  .home-faqs .faq-item__q { padding: 22px; gap: 14px; align-items: center; color: #1f2937; font-size: .95rem; font-weight: 750; border-radius: 13px; min-height: 88px; }
  .home-faqs .faq-item__q:hover { color: #9a3412; background: #fff7ed; }
  .home-faqs .faq-item__q:focus-visible { outline: 3px solid #c2410c; outline-offset: 3px; }
  .home-faqs__number { flex: none; color: #9a3412; font-size: .72rem; font-weight: 800; }
  .home-faqs__question { flex: 1; }
  .home-faqs .faq-item__sign { width: 28px; height: 28px; margin: 0; border-radius: 50%; background: #fff1e3; }
  .home-faqs .faq-item__sign::before, .home-faqs .faq-item__sign::after { background: #9a3412; }
  .home-faqs .faq-item__q[aria-expanded="true"] .faq-item__sign { background: #1f2937; }
  .home-faqs .faq-item__q[aria-expanded="true"] .faq-item__sign::before { background: #fdba74; }
  .home-faqs .faq-item__a { max-width: none; padding: 0 24px 24px 53px; color: #5b6471; font-size: .9rem; line-height: 1.8; }
  .home-faqs .faq-item__a p { margin: 0; }
  @media (max-width: 759px) {
    .home-faqs .faq-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .home-faqs .faq-item__q { padding: 18px; gap: 12px; }
    .home-faqs .faq-item__a { padding: 0 18px 20px; }
  }
}

/* Brand layout 8: compact dark merchant header and full-width light offers. */
@media screen {
  .brand-page .store-head { background: transparent; padding: 24px 0 0; border: 0; }
  .brand-page .breadcrumb { margin-bottom: 20px; color: #667085; }
  .brand-page .breadcrumb a { color: #475569; }
  .brand-page .breadcrumb [aria-current='page'] { color: #9a3412; }
  .brand-page .store-head__inner { display: grid; grid-template-columns: 104px minmax(0,1fr) auto; gap: 24px; padding: 28px; background: #1f2937; border: 1px solid #374151; border-radius: 14px; animation: none; }
  .brand-page .store-head__logo { width: 104px; height: 104px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; }
  .brand-page .store-head__seal { display: none; }
  .brand-page .store-head__text h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 8px; }
  .brand-page .store-head__text h1::after { display: none; }
  .brand-page .store-head__desc { font-size: .88rem; margin: 0 0 14px; line-height: 1.6; }
  .brand-page .store-head__tags { gap: 8px; margin: 0; }
  .brand-page .store-head__tags .tag { font-size: .68rem; }
  .merchant-summary { text-align: right; max-width: 240px; }
  .merchant-summary p { margin: 0 0 12px; color: #fff; font-size: .95rem; font-weight: 700; }
  .merchant-summary .btn { font-size: .84rem; }
  .brand-page .layout { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 28px; }
  .brand-page .sidebar { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .brand-page .coupon-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
  .offer-types { display: flex; flex-wrap: wrap; gap: 22px; }
  .offer-types button { padding: 14px 0; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #475569; font: 750 .85rem var(--sans); cursor: pointer; }
  .offer-types button[aria-pressed='true'] { color: #1f2937; border-bottom-color: #f97316; }
  .offer-types button:hover { color: #9a3412; }
  .offer-types button:focus-visible { outline: 3px solid #c2410c; outline-offset: 3px; }
  .brand-page .coupon-list { gap: 18px; }
  .brand-page .coupon { background: #fff; border: 1px solid #e2e5e9; border-radius: 12px; box-shadow: 0 4px 16px -14px #667085; padding: 12px; gap: 8px; }
  .brand-page .coupon__rail { background: #fff1e3; border: 0; border-radius: 8px; padding: 18px 12px; }
  .brand-page .coupon__discount { color: #ea580c; font-size: 2rem; }
  .brand-page .coupon__discount--long { font-size: 1.15rem; letter-spacing: -.02em; }
  .brand-page .coupon__discount--xlong { font-size: .95rem; letter-spacing: 0; line-height: 1.15; }
  .brand-page .coupon__kind { color: #9a3412; }
  .brand-page .coupon__title { color: #1f2937; font-size: 1.03rem; }
  .brand-page .coupon__main { padding: 16px; }
  .brand-page .coupon__desc, .brand-page .coupon .fact { color: #5b6471; }
  .brand-page .coupon .fact--verified { color: #166534; }
  .brand-page .coupon .fact--warn { color: #9a3412; }
  .brand-page .coupon__action { border: 0; padding: 12px; }
  .brand-page .coupon__terms summary, .brand-page .coupon__store-link { color: #9a3412; }
  .brand-page .coupon__terms p { background: #fff7ed; border-color: #fed7aa; color: #475569; }
  .brand-page .coupon.is-featured { border-color: #fb923c; }
  .brand-page .coupon.is-expired { background: #f9fafb; border-color: #d1d5db; }
  .brand-page .coupon.is-expired .coupon__rail { background: #e5e7eb; }
  .brand-page .coupon.is-expired .coupon__title, .brand-page .coupon.is-expired .coupon__discount, .brand-page .coupon.is-expired .coupon__kind { color: #667085; }
  @media (min-width: 800px) {
    .brand-page .coupon { grid-template-columns: 144px minmax(0,1fr) 190px; }
  }
  @media (max-width: 799px) {
    .brand-page .store-head__inner { grid-template-columns: 80px minmax(0,1fr); padding: 20px; gap: 18px; }
    .brand-page .store-head__logo { width: 80px; height: 80px; }
    .merchant-summary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; max-width: none; text-align: left; }
    .merchant-summary p { margin: 0; }
    .brand-page .coupon { grid-template-columns: 116px minmax(0,1fr); }
    .brand-page .coupon__main { padding: 10px; }
    .brand-page .coupon__action { grid-column: 1 / -1; }
    .brand-page .coupon__discount { font-size: 1.5rem; }
    .brand-page .coupon__discount--long { font-size: 1rem; }
    .brand-page .coupon__discount--xlong { font-size: .85rem; }
    .brand-page .sidebar { grid-template-columns: minmax(0,1fr); }
  }
  @media (max-width: 420px) {
    .brand-page .store-head__inner { grid-template-columns: 64px minmax(0,1fr); padding: 16px; gap: 12px; }
    .brand-page .store-head__logo { width: 64px; height: 64px; }
    .brand-page .coupon-filter { width: 100%; }
    .offer-types { gap: 18px; }
  }
}

/* Homepage top offers reuse the accessible reveal and copy controls. */
@media screen {
  .top-coupons { background: #fff7ed; }
  .top-coupons__eyebrow { display: block; color: #9a3412; font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
  .top-coupons__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: start; }
  .top-coupons .coupon { grid-template-columns: 108px minmax(0,1fr); gap: 0; background: #fffdf9; border: 1px solid #e2e5e9; border-radius: 14px; box-shadow: 0 6px 18px -14px #667085; }
  .top-coupons .coupon.is-featured { border-color: #fb923c; }
  .top-coupons .coupon__rail { background: #fff1e3; border: 0; border-radius: 13px 0 0 0; padding: 24px 12px; flex-direction: column; justify-content: center; text-align: center; }
  .top-coupons .coupon__discount { color: #ea580c; font-size: 1.35rem; }
  .top-coupons .coupon__kind { color: #9a3412; }
  .top-coupons .coupon__main { min-width: 0; padding: 24px 20px; }
  .top-coupons .coupon__brand { display: inline-flex; gap: 12px; margin-bottom: 10px; font-size: .78rem; font-weight: 750; color: #9a3412; }
  .top-coupons .coupon__title { color: #1f2937; font-size: 1.05rem; }
  .top-coupons .coupon__desc { color: #5b6471; font-size: .86rem; }
  .top-coupons .coupon__action { grid-column: 1 / -1; border: 0; border-top: 1px solid #f2dfcc; padding: 16px 20px; }
  .top-coupons .coupon__code { position: static; }
  @media (max-width: 759px) {
    .top-coupons__grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
  }
  @media (max-width: 380px) {
    .top-coupons .coupon { grid-template-columns: 92px minmax(0,1fr); }
    .top-coupons .coupon__main { padding: 20px 14px; }
    .top-coupons .coupon__discount { font-size: 1.1rem; }
  }
}

/* ==========================================================================
   Brand tiles - homepage "Brands we cover" and the Brands page
   The logo sits on a soft brand-coloured panel. --tile-tint starts as one of
   six fallback tints (picked from the slug in render_brand_tile) and main.js
   swaps in a tint sampled from the logo, so each tile takes on its brand's
   colour without anyone having to set one.
   ========================================================================== */
.brand-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 620px) {
  .brand-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 900px) {
  .brand-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1160px) {
  .brand-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 379px) {
  .brand-tiles { grid-template-columns: minmax(0, 1fr); }
}

.brand-tile {
  --tile-tint: #fff1dc;
  --tile-edge: #f3dcbd;
  min-width: 0;
}
.brand-tile[data-tint="0"] { --tile-tint: #fde8e4; --tile-edge: #f4cfc8; }
.brand-tile[data-tint="1"] { --tile-tint: #e4f1fc; --tile-edge: #c9def2; }
.brand-tile[data-tint="2"] { --tile-tint: #e6f5ec; --tile-edge: #c8e4d3; }
.brand-tile[data-tint="3"] { --tile-tint: #fff1dc; --tile-edge: #f3dcbd; }
.brand-tile[data-tint="4"] { --tile-tint: #eee9fb; --tile-edge: #d9d0f1; }
.brand-tile[data-tint="5"] { --tile-tint: #e3f3f5; --tile-edge: #c6e1e5; }

.brand-tile__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tile-edge);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 8px 22px -20px rgba(17, 24, 39, .45);
  transition: transform .18s ease, box-shadow .18s ease, border-color .35s ease;
}
.brand-tile__link:hover {
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 20px 36px -26px rgba(17, 24, 39, .5);
}
.brand-tile__link:focus-visible {
  outline: 3px solid var(--pine-dark);
  outline-offset: 3px;
}

.brand-tile__panel {
  display: grid;
  place-items: center;
  padding: 16px 12px;
  background: var(--tile-tint);
  transition: background-color .35s ease;
}
.brand-tile__logo {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 8px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 20px -16px rgba(17, 24, 39, .5);
  transition: transform .18s ease;
}
.brand-tile__link:hover .brand-tile__logo { transform: scale(1.04); }
.brand-tile__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.brand-tile__initials {
  color: var(--pine-dark);
  font-size: 1.2rem;
  font-weight: 850;
}

.brand-tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 12px 14px;
  text-align: center;
}
.brand-tile__name {
  color: var(--ink);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.brand-tile__desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.brand-tile__status {
  color: var(--muted);
  font-size: .72rem;
}
.brand-tile__status.tag { color: var(--pine-dark); }
.brand-tile__count {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 750;
}
/* Pinned to the bottom so buttons line up across a row of uneven tiles. */
.brand-tile__cta {
  margin-top: auto;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  font-size: .84rem;
}
.brand-tile__link:hover .brand-tile__cta {
  --btn-bg: var(--pine-dark);
  --btn-bd: var(--pine-dark);
  background: var(--pine-dark);
  border-color: var(--pine-dark);
}

@media (max-width: 519px) {
  .brand-tile__panel { padding: 12px 10px; }
  .brand-tile__logo { width: 56px; height: 56px; padding: 7px; border-radius: 14px; }
  .brand-tile__body { padding: 10px 8px 12px; }
  .brand-tile__name { font-size: .86rem; }
  .brand-tile__cta { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-tile__link,
  .brand-tile__logo,
  .brand-tile__panel { transition: none; }
  .brand-tile__link:hover,
  .brand-tile__link:hover .brand-tile__logo { transform: none; }
}

/* ==========================================================================
   Brands mega menu - full-width brand grid
   Order tabs (main.js re-sorts the grid in place) with "See all brands"
   beside them, then two rows of five logo tiles on desktop. The tabs reorder
   one grid rather than switching panels, so they are pressed-state buttons.
   ========================================================================== */
.bgrid__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 16px;
}
.bgrid__tabs {
  display: flex;
  gap: 4px;
  max-width: 100%;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bgrid__tabs::-webkit-scrollbar { display: none; }
.bgrid__tab {
  flex: none;
  min-height: 40px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink-body);
  font: inherit;
  font-size: .9rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.bgrid__tab:hover {
  background: var(--pine-tint);
  color: var(--pine-dark);
}
/* Dark label on orange, as on every other orange control: white fails contrast. */
.bgrid__tab[aria-pressed="true"] {
  background: var(--pine);
  border-color: var(--pine);
  color: #111827;
}
.bgrid__tab:focus-visible {
  outline: 3px solid var(--pine-dark);
  outline-offset: 2px;
}
.bgrid__all {
  color: var(--pine-dark);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.bgrid__all:hover {
  color: #9a3412;
}

.bgrid__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .bgrid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .bgrid__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
}
.bgrid__item {
  min-width: 0;
  margin: 0;
}

.bgrid__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  min-height: 124px;
  padding: 16px 10px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bgrid__tile:hover {
  color: var(--ink);
  text-decoration: none;
  border-color: var(--gold-lift);
  box-shadow: 0 12px 24px -20px rgba(17, 24, 39, .45);
  transform: translateY(-2px);
}
.bgrid__tile:focus-visible {
  outline: 3px solid var(--pine-dark);
  outline-offset: 2px;
}
.bgrid__logo {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 7px;
  overflow: hidden;
  border-radius: 12px;
}
.bgrid__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bgrid__initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--pine-tint);
  color: var(--pine-dark);
  font-weight: 850;
}
.bgrid__name {
  max-width: 100%;
  overflow: hidden;
  font-size: .9rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bgrid__offers {
  color: var(--muted);
  font-size: .78rem;
}

.bgrid__tile--more {
  background: var(--pine-tint);
  border-color: #fbd3b0;
  color: var(--pine-dark);
  font-size: .88rem;
  font-weight: 700;
}
.bgrid__tile--more:hover {
  background: #ffe7d3;
  border-color: var(--pine);
  color: var(--pine-dark);
}
.bgrid__more-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 7px;
  background: #fff;
  border-radius: 50%;
  font-size: 1.15rem;
  transition: transform .15s ease;
}
.bgrid__tile--more:hover .bgrid__more-arrow { transform: translateX(3px); }

.bgrid__empty {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 999px) {
  .bgrid__bar {
    flex-direction: column;
    align-items: stretch;
  }
  .bgrid__all { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .bgrid__tab,
  .bgrid__tile,
  .bgrid__more-arrow { transition: none; }
  .bgrid__tile:hover,
  .bgrid__tile--more:hover .bgrid__more-arrow { transform: none; }
}

/* ==========================================================================
   Brand page: information sidebar on the left, offers on the right
   The v7 skin stacks the sidebar under the whole page. From 1100px, where
   the offer cards still have room, it sits beside the offers. The sidebar
   is placed first visually only; in the HTML the offers still come first,
   so phones and screen readers reach the codes before the supporting boxes.
   ========================================================================== */
.side-box--glance::before { background: var(--pine); }
.glance {
  display: grid;
  margin: 0;
}
.glance__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--rule);
}
.glance__row:first-child { padding-top: 0; }
.glance__row:last-child { padding-bottom: 0; border-bottom: 0; }
.glance dt {
  color: var(--muted);
  font-size: .88rem;
}
.glance dd {
  margin: 0;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 750;
  text-align: right;
}

@media (min-width: 1100px) {
  .brand-page .layout {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 40px;
  }
  /* Stays in view while the offers scroll. It is taller than most screens,
     so it scrolls within itself, with the scrollbar hidden; the wheel passes
     on to the page once the sidebar reaches either end. The small padding,
     cancelled by the negative margin, keeps box shadows from being clipped. */
  .brand-page .sidebar {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    max-height: calc(100vh - var(--header-h) - 32px);
    margin: -6px;
    padding: 6px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .brand-page .sidebar::-webkit-scrollbar { display: none; }
  .brand-page .layout__main {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Long brand guides: accessible navigation and readable section anchors. */
.brand-guide { margin-top: 2rem; }
.brand-guide__byline { font-size: .875rem; }
.brand-guide__toc { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid #d6dce5; border-radius: 12px; background: #f8fafc; }
.brand-guide__toc summary { cursor: pointer; font-weight: 700; }
.brand-guide__toc ol { margin-bottom: 0; }
.brand-guide__toc a { overflow-wrap: anywhere; }
.brand-guide h2 { scroll-margin-top: calc(var(--header-h, 80px) + 24px); }
.brand-guide p { overflow-wrap: break-word; }

/* The guide's conclusion. It is the last thing a reader sees before the FAQs,
   so it is set apart from the body sections rather than running on as one more
   heading: a tinted panel with an accent edge and a smaller, quieter heading. */
.brand-guide__close {
  margin: 2.75rem 0 0;
  padding: 26px 28px 24px;
  border: 1px solid #efdccc;
  border-left: 4px solid #f97316;
  border-radius: 4px 14px 14px 4px;
  background: linear-gradient(180deg, #fffaf5 0%, #ffffff 70%);
}
.brand-guide__close-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 6px;
  color: #9a3412; font-size: .72rem; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase;
}
.brand-guide__close-eyebrow::before {
  content: ""; width: 20px; height: 2px; border-radius: 2px; background: #f97316;
}
.brand-guide__close > h2 {
  margin: 0 0 .6rem;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem);
  line-height: 1.25; letter-spacing: -.02em;
  scroll-margin-top: calc(var(--header-h, 80px) + 24px);
}
.brand-guide__close > p { margin: 0 0 .9em; }
.brand-guide__close > p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .brand-guide__close { margin-top: 2rem; padding: 20px 18px 18px; }
}

/* Keep badge words intact at every card size, including homepage overrides. */
.coupon__discount-word { white-space: nowrap; }
/* --------------------------------------------------------------------------
   Brand-page FAQs
   The block sits at the foot of a long guide, so it is given its own panel
   rather than running on as plain rows. Each question is a card with a real
   hover state, and the toggle turns from a plus into a cross so the open row
   is obvious at a glance.
   -------------------------------------------------------------------------- */
.post-faqs {
  margin-top: 56px;
  padding: 34px 32px 32px;
  border: 1px solid #efdccc;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffaf5 0%, #ffffff 58%);
}
.post-faqs__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  color: #9a3412; font-size: .72rem; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase;
}
.post-faqs__eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px; background: #f97316;
}
.post-faqs > h2 {
  margin: 0 0 10px;
  color: #1f2937;
  font-size: clamp(1.4rem, 1.15rem + .9vw, 1.8rem);
  line-height: 1.22; letter-spacing: -.025em;
  scroll-margin-top: calc(var(--header-h, 90px) + 32px);
}
.post-faqs__intro {
  margin: 0 0 26px; max-width: 62ch;
  color: #596579; font-size: .95rem; line-height: 1.65;
}

.post-faqs .faq-list { display: grid; gap: 10px; border: 0; }

.post-faqs .faq-item {
  min-width: 0;
  border: 1px solid #e7dcd3;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(31, 41, 55, .035);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.post-faqs .faq-item:hover { border-color: #f4b183; box-shadow: 0 8px 20px -14px rgba(154, 52, 18, .55); }
.post-faqs .faq-item:has(.faq-item__q[aria-expanded="true"]) {
  border-color: #f97316;
  box-shadow: 0 10px 24px -16px rgba(154, 52, 18, .6);
}

/* The heading only carries the button; it must not add its own spacing. */
.post-faqs .faq-item > h3 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

.post-faqs .faq-item__q {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 70px;
  padding: 18px 22px; gap: 18px;
  color: #1f2937; font-size: 1.02rem; font-weight: 650; line-height: 1.45;
  border-radius: 12px;
  transition: color .18s ease, background .18s ease;
}
.post-faqs .faq-item__q > span:first-child { flex: 1; min-width: 0; overflow-wrap: break-word; }
.post-faqs .faq-item__q:hover { background: #fff7ed; color: #9a3412; }
.post-faqs .faq-item__q:focus-visible { outline: 3px solid #c2410c; outline-offset: 3px; }
.post-faqs .faq-item__q[aria-expanded="true"] { color: #9a3412; }

.post-faqs .faq-item__sign {
  flex: 0 0 32px; width: 32px; height: 32px; margin: 0;
  border-radius: 50%; background: #fff1e3;
  transition: background .18s ease, transform .22s ease;
}
.post-faqs .faq-item__sign::before,
.post-faqs .faq-item__sign::after { background: #9a3412; }
/* Both strokes stay, and the pair rotates: the plus becomes a cross. */
.post-faqs .faq-item__q[aria-expanded="true"] .faq-item__sign {
  background: #9a3412; transform: rotate(135deg);
}
.post-faqs .faq-item__q[aria-expanded="true"] .faq-item__sign::before,
.post-faqs .faq-item__q[aria-expanded="true"] .faq-item__sign::after { background: #fff; }
.post-faqs .faq-item__q[aria-expanded="true"] .faq-item__sign::after {
  transform: translate(-50%, -50%); opacity: 1;
}

.post-faqs .faq-item__a {
  max-width: none;
  margin: 0 22px;
  padding: 16px 0 22px;
  border-top: 1px solid #f2e6dc;
  color: #526074; font-size: .95rem; line-height: 1.8;
  overflow-wrap: break-word;
  animation: post-faq-reveal .2s ease-out both;
}
.post-faqs .faq-item__a p { margin: 0 0 .85em; }
.post-faqs .faq-item__a p:last-child { margin-bottom: 0; }

@keyframes post-faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .post-faqs .faq-item,
  .post-faqs .faq-item__q,
  .post-faqs .faq-item__sign { transition: none; }
  .post-faqs .faq-item__a { animation: none; }
}

@media (max-width: 700px) {
  .post-faqs { padding: 24px 18px 22px; border-radius: 14px; }
  .post-faqs__intro { margin-bottom: 20px; }
  .post-faqs .faq-item__q { min-height: 62px; padding: 15px 16px; gap: 12px; font-size: .95rem; }
  .post-faqs .faq-item__sign { flex-basis: 28px; width: 28px; height: 28px; }
  .post-faqs .faq-item__a { margin: 0 16px; padding: 14px 0 18px; font-size: .91rem; line-height: 1.75; }
}

/* Footer: clear navigation groups, quieter legal copy and a distinct review note. */
.site-footer.footer-polished { padding: 0; background: #17212f; color: #d2d9e2; border-top: 4px solid #f97316; }
.footer-polished__main { display: grid; grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding: 64px 0 40px; }
.footer-polished__main > * { min-width: 0; }
.footer-polished .brand { width: fit-content; }
.footer-polished .brand__coupon { color: #fff; }
.footer-polished .brand__tested { color: #fb923c; }
.footer-polished__tagline { margin: 24px 0 14px; color: #fff; font-size: clamp(1.65rem, 2.5vw, 2.15rem); font-weight: 750; line-height: 1.2; letter-spacing: -.035em; }
.footer-polished__intro { max-width: 36ch; margin: 0 0 22px; color: #b6c2d1; font-size: .875rem; line-height: 1.8; }
.footer-polished__browse { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; padding: 0 16px; border: 1px solid #536173; border-radius: 8px; color: #fff; font-size: .84rem; font-weight: 650; }
.footer-polished__browse:hover { background: #253346; border-color: #fb923c; }
.footer-polished__nav { padding-top: 7px; }
.footer-polished__nav h2 { margin: 0 0 18px; color: #fff; font: 700 .82rem/1.5 var(--sans); letter-spacing: .025em; }
.footer-polished__nav ul { list-style: none; padding: 0; margin: 0; }
.footer-polished__nav li { margin: 0; }
.footer-polished__nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 0; color: #b6c2d1; font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.footer-polished a:hover { color: #fdba74; }
.footer-polished__nav a:hover { color: #fdba74; }
.footer-polished a:focus-visible { outline: 2px solid #fdba74; outline-offset: 5px; border-radius: 3px; }
.footer-polished__all-brands { color: #fdba74 !important; gap: 12px; font-weight: 650; margin-top: 6px; }
.footer-polished__trust { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 24px 28px; margin-bottom: 36px; background: #202e40; border: 1px solid #344256; border-radius: 12px; }
.footer-polished__trust p { max-width: 76ch; margin: 0; color: #c4cedb; font-size: .82rem; line-height: 1.75; }
.footer-polished__trust strong { display: block; margin-bottom: 4px; color: #fff; font-size: .92rem; }
.footer-polished__trust a { flex: 0 0 auto; color: #fdba74; font-size: .82rem; font-weight: 650; line-height: 1.6; padding-block: 10px; }
.footer-polished__base { border-top: 1px solid #344256; padding: 24px 0; }
.footer-polished__base .container { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px 48px; }
.footer-polished__base p { margin: 0; font-size: .75rem; line-height: 1.7; color: #a8b5c6; }
.footer-polished__base p:first-child { flex-shrink: 0; }
.footer-polished__trademarks { max-width: 66ch; text-align: right; }
@media (max-width: 1050px) {
  .footer-polished__main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 44px; }
  .footer-polished__brand { grid-column: 1 / -1; }
  .footer-polished__intro { max-width: 66ch; }
  .footer-polished__trust { align-items: flex-start; }
}
@media (max-width: 650px) {
  .footer-polished__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding: 36px 0 28px; }
  .footer-polished__nav--brands { grid-column: 1 / -1; border-top: 1px solid #344256; padding-top: 24px; }
  .footer-polished__nav--brands ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .footer-polished__nav a { min-height: 44px; }
  .footer-polished__trust { flex-direction: column; gap: 10px; padding: 20px; margin-bottom: 28px; }
  .footer-polished__trust a { flex: auto; }
  .footer-polished__base .container { flex-direction: column; gap: 10px; }
  .footer-polished__trademarks { text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
  .footer-polished a { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
}
/* The original Stadium Goods wordmark is white on transparent. */
img[src$="/6e0466b390afc4a261ce7e0bf9435716.png"] { background: #171717; padding: 8px; box-sizing: border-box; }
.coupon__discount { overflow-wrap: normal; word-break: normal; hyphens: none; }
.top-coupons .coupon__discount--long { font-size: 1.05rem; line-height: 1.15; letter-spacing: -.02em; }
.top-coupons .coupon__discount--xlong { font-size: .85rem; line-height: 1.2; letter-spacing: 0; }
@media (max-width: 380px) {
  .top-coupons .coupon__discount--long { font-size: .8rem; }
  .top-coupons .coupon__discount--xlong { font-size: .68rem; }
}