/* ==========================================================================
   Landing page
   ========================================================================== */

/* -------------------------------------------------------------------- hero
   Asymmetric two-column at desktop: the copy gets the narrower measure so the
   headline breaks where it should, and the imagery carries the wider half. */

.hero {
  padding-block: clamp(var(--space-8), 8vw, var(--space-10)) var(--section-y);
  background:
    radial-gradient(60rem 40rem at 15% -10%, var(--accent-soft), transparent 70%),
    var(--surface);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.hero__copy { display: grid; gap: var(--space-5); max-width: 36rem; }

.hero h1 { font-size: var(--text-4xl); }

.hero__lede { font-size: var(--text-lg); line-height: var(--leading-loose); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.hero__assurance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--ink-subtle);
}
.hero__assurance li { display: flex; align-items: center; gap: var(--space-2); }
.hero__assurance ul { list-style: none; padding: 0; display: contents; }
.hero__assurance svg { width: 1rem; height: 1rem; color: var(--accent); flex-shrink: 0; }

/* Placeholder imagery: a composed panel rather than a grey box, so the layout
   is judged on its real proportions before photography arrives. */
.hero__panel {
  position: relative;
  aspect-ratio: 4 / 3.8;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* A soft scrim under the stat strip so the white card keeps its edge whatever
   the photograph happens to be doing at the bottom of the frame. */
.hero__panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgb(21 34 56 / 0.28), transparent);
  pointer-events: none;
}

.hero__stat {
  position: absolute;
  z-index: 1;
  inset: auto var(--space-5) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.hero__stat div { display: grid; gap: var(--space-2); align-content: start; }
.hero__stat div + div {
  padding-left: var(--space-4);
  border-left: 1px solid var(--line);
}
.hero__stat dt {
  font-size: 0.68rem;
  color: var(--ink-subtle);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__stat dd {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: var(--leading-snug);
}

/* --------------------------------------------------------------- trust bar */

.trust-bar {
  border-block: 1px solid var(--line);
  background: var(--surface);
  padding-block: var(--space-5);
}
.trust-bar__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-4) var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.trust-bar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.trust-bar__item svg { width: 1.4rem; height: 1.4rem; color: var(--accent); flex-shrink: 0; margin-top: 0.1em; }
.trust-bar__item strong { display: block; color: var(--ink); font-weight: 600; }
.trust-bar__item span { color: var(--ink-subtle); }

/* -------------------------------------------------------------- categories */

.category-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}
.category-card:hover {
  color: inherit;
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.category-card__icon {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.category-card__icon svg { width: 1.4rem; height: 1.4rem; }
.category-card h3 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 600; }
.category-card p { font-size: var(--text-sm); color: var(--ink-subtle); }
.category-card__more {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  display: flex; align-items: center; gap: var(--space-2);
}
.category-card:hover .category-card__more svg { transform: translateX(3px); }

/* The same treatment as a card's "Browse", for a link that stands on its own.
   A separate class rather than reusing the card's, because the card's name
   says where it belongs and this is not there.
   
   The arrow does not move on hover. On a card the nudge belongs to the whole
   card lifting; on a line of text it is a small thing twitching beside the
   words, which draws the eye to the arrow rather than to where the link goes. */
.link-more {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.link-more:hover { text-decoration: underline; }
.link-more svg { width: 0.9rem; height: 0.9rem; }
.category-card__more svg { width: 0.9rem; height: 0.9rem; transition: transform var(--duration) var(--ease); }

/* ------------------------------------------------------------------ rewards */

.rewards {
  background: var(--surface-brand);
  color: var(--on-brand-muted);
}
.rewards h2, .rewards .rewards__step-n { color: var(--on-brand); }
/* The gold rule and eyebrow are lifted for this ground: the brand gold sits at
   only 3.04:1 against the red, which is below AA even for large text. */
.rewards .eyebrow { color: var(--on-brand-gold); }
.rewards .eyebrow--ruled::before,
.rewards .eyebrow--ruled::after { background: var(--on-brand-gold); }
.rewards__logo {
  display: inline-block;
  width: 7.5rem;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
  line-height: 0;
}
.rewards__logo img { width: 100%; height: auto; }
.rewards__promise { color: var(--on-brand); font-weight: 600; }
.rewards__inner {
  display: grid;
  gap: clamp(var(--space-7), 6vw, var(--space-9));
  align-items: center;
}
@media (min-width: 62rem) {
  .rewards__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.rewards__steps { list-style: none; padding: 0; display: grid; gap: var(--space-5); }
.rewards__step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.rewards__step-n {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--on-brand-line);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
}
.rewards__step strong { display: block; color: var(--on-brand); font-weight: 600; margin-bottom: var(--space-1); }
.rewards__step p { font-size: var(--text-sm); }

/* ---------------------------------------------------------------- about/CTA */

.about__inner {
  display: grid;
  gap: clamp(var(--space-7), 6vw, var(--space-9));
  align-items: start;
}
@media (min-width: 62rem) {
  .about__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}
.about__aside { display: grid; gap: var(--space-6); align-content: start; }

.about__media {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.about__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.about__facts { list-style: none; padding: 0; display: grid; gap: var(--space-5); }
.about__fact {
  display: grid;
  gap: var(--space-1);
  padding-left: var(--space-5);
  border-left: 2px solid var(--accent);
}
.about__fact dt { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--ink); line-height: 1; }
.about__fact dd { margin: 0; font-size: var(--text-sm); color: var(--ink-subtle); }

.cta-split {
  display: grid;
  gap: 0;
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 56rem) {
  .cta-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.cta-split__media { display: block; }
.cta-split__media img {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  object-fit: cover;
}

.cta-split__body {
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  display: grid;
  gap: var(--space-4);
  align-content: center;
}
.cta-split__body p { max-width: var(--measure-narrow); }

/* ==========================================================================
   Specials carousel
   --------------------------------------------------------------------------
   The adverts are portrait posters made for WhatsApp and print. Stretched
   across a wide banner they crop their own price and closing date off, so a
   slide sets the poster beside its text instead and keeps the artwork whole.
   ========================================================================== */

/* The band is not in the document until the API answers, so revealing it
   genuinely moves the hero down. It used to do that in one frame, which reads
   as the page breaking rather than as a banner arriving.
   
   It now opens: the row grows from 0fr to 1fr and takes its padding and rule
   with it, so the hero is carried down by the band rather than jumping out of
   its way. Everything here is a real layout change, which is the honest shape
   of this particular reveal -- reserving the space up front instead would
   leave a hole on every page that has no special running, which is most of
   them. */
.promos {
  background: var(--surface-sunken);
  border-bottom: 1px solid transparent;
  padding-block: 0;
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows 520ms var(--ease),
    padding-block 520ms var(--ease),
    border-bottom-color 520ms var(--ease);
}
.promos.is-in {
  grid-template-rows: 1fr;
  padding-block: var(--space-7);
  border-bottom-color: var(--line);
}

/* The collapsing child. min-height:0 is what lets a grid row actually go to
   zero; without it the content floors the row at its own height and nothing
   moves.
   
   This is a bare wrapper rather than .promos__inner because .promos__inner is
   the grid parent of the track, and the track clips too: a second
   overflow:hidden there resolved the track's height to zero wherever the slide
   stacks, which is every phone. The clip belongs one level out, on an element
   that owns no layout of its own. */
.promos__reveal { overflow: hidden; min-height: 0; }
.promos__inner { display: grid; gap: var(--space-5); }

/* The contents settle a beat after the band has opened, so the slide is not
   stretched as the row grows. */
.promos__inner > * {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 320ms var(--ease) 180ms, transform 320ms var(--ease) 180ms;
}
.promos.is-in .promos__inner > * { opacity: 1; transform: none; }

/* Someone who has asked for less motion gets the band, not the performance. */
@media (prefers-reduced-motion: reduce) {
  .promos, .promos__inner > * { transition: none; }
}

/* The track clips; the list slides within it. */
.promos__track { overflow: hidden; }
.promos__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  transition: transform 420ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .promos__list { transition: none; }
}

.promo {
  flex: 0 0 100%;
  display: grid;
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 54rem) {
  /* The poster gets the smaller share: it is tall, and letting it drive the
     row height would push the text into a narrow column. */
  .promo { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
}

.promo__media {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  max-width: 22rem;
  justify-self: center;
}
.promo__media img { width: 100%; height: auto; display: block; }

.promo__body { display: grid; gap: var(--space-4); justify-items: start; }

.promo__badge {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
}

.promo__headline {
  font-size: var(--text-3xl);
  max-width: 18ch;
  margin: 0;
}
.promo__sub { font-size: var(--text-lg); color: var(--ink-muted); max-width: var(--measure-narrow); }

.promo__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.promo__price strong {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.promo__was {
  font-size: var(--text-lg);
  color: var(--ink-subtle);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}

.promo__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.promo__ends { font-size: var(--text-sm); color: var(--ink-subtle); }

/* ------------------------------------------------------------- controls */

.promos__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.promos__arrow {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
}
.promos__arrow:hover { border-color: var(--accent); color: var(--accent); }
.promos__arrow svg { width: 1.1rem; height: 0.7rem; }

.promos__dots { display: flex; gap: var(--space-2); }
.promos__dot {
  width: 0.55rem; height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: background var(--duration) var(--ease), width var(--duration) var(--ease);
}
.promos__dot[aria-selected="true"] { background: var(--accent); width: 1.4rem; }

/* ------------------------------------------------------- supplier brands
   Wordmarks rather than logo files. Supplied artwork arrives at different
   sizes, crops and backgrounds; one consistent typographic treatment reads as
   a deliberate choice where a row of mismatched scrapes reads as neglect.
   Swapping an <img> in later needs no change to this layout. */

.brands__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.brand {
  background: var(--surface);
  padding: var(--space-6) var(--space-5);
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
  transition: background var(--duration) var(--ease);
}
.brand:hover { background: var(--surface-sunken); }

.brand__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.brand__note {
  font-size: var(--text-xs);
  color: var(--ink-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: var(--leading-snug);
}

/* A supplied logo drops straight in here. */
.brand__logo { max-height: 2.2rem; width: auto; }