/* Self-hosted fonts. Archivo is a variable font: one file covers 400-800.
   Regenerate from the Google Fonts css2 API if a weight or subset is added. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-400-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/archivo-400-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ma's Donuts and more® — rewards app site
   Design source: "Mas Donuts Site.dc.html" (Claude Design canvas) */

:root {
  --bg:          #FBF6F0;
  --surface:     #FFFDFB;
  --footer-bg:   #F4E9DC;
  --ink:         #241A16;
  --body:        #5A4A42;
  --muted:       #6B5B52;
  --strong:      #3B2E28;
  --nav:         #4A3B34;
  --maroon:      #7C1D3F;
  --maroon-dark: #5C1129;
  --brown:       #8A5A2B;
  --gold:        #D9A227;

  --line-12: rgba(124,29,63,.12);
  --line-14: rgba(124,29,63,.14);
  --line-16: rgba(124,29,63,.16);
  --line-20: rgba(124,29,63,.20);

  --shell: 1200px;
  --pad: 28px;
  --header-h: 85px;
  --howto-stack: 320px;   /* site header + sticky how-to heading (299px) + gap */

  /* Phone renders are sized by height; widths vary by angle and must never be forced. */
  --hero-center: clamp(330px, 44vw, 600px);
  --hero-side:   calc(var(--hero-center) * .93);
  --hero-lap:    calc(var(--hero-center) * -.0733);
  --feature-phone: clamp(380px, 48vw, 620px);

  /* Home page phones carry no shadow: at these sizes the double drop-shadow
     rendered rough and banded on real screens. The hero keeps its shadows —
     it is the one place the phones overlap and need separating from each
     other. The how-to page keeps --shadow-howto. */
  --shadow-left:   none;
  --shadow-center: none;
  --shadow-howto:  drop-shadow(-16px 24px 34px rgba(36,26,22,.24)) drop-shadow(0 46px 60px rgba(36,26,22,.15));
  --shadow-hero-l: drop-shadow(-22px 26px 34px rgba(36,26,22,.30)) drop-shadow(0 60px 70px rgba(36,26,22,.18));
  --shadow-hero-c: drop-shadow(0 18px 26px rgba(36,26,22,.34))     drop-shadow(0 64px 80px rgba(36,26,22,.24));
  --shadow-hero-r: drop-shadow(22px 26px 34px rgba(36,26,22,.30))  drop-shadow(0 60px 70px rgba(36,26,22,.18));
  --shadow-cta:    none;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

picture { display: contents; }  /* keep the <img> as the flex/positioned item */
img { max-width: 100%; }

/* Spacing is flex `gap` throughout, as in the design; UA paragraph margins would double it. */
p { margin: 0; }

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

:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell { max-width: var(--shell); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

.eyebrow {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brown);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--maroon); color: var(--surface);
  padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--surface); }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,246,240,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-12);
}
.site-header__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 16px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { display: block; height: 52px; width: auto; }
.brand__tag {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brown);
  border-left: 1px solid var(--line-20);
  padding-left: 12px;
}
.site-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.site-nav a {
  font-size: 15px; font-weight: 500;
  padding: 10px 14px; border-radius: 999px;
  white-space: nowrap;
  color: var(--nav);
  transition: background 160ms ease, color 160ms ease;
}
.site-nav a:hover { background: rgba(124,29,63,.07); color: var(--maroon); }
.site-nav a[aria-current="page"] { color: var(--maroon); background: rgba(124,29,63,.07); }
.site-nav .btn-primary { font-weight: 600; padding: 11px 20px; background: var(--maroon); color: var(--surface); }
.site-nav .btn-primary:hover { background: var(--maroon-dark); color: var(--surface); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FFFDFB, #FBF6F0 60%, #F6EDE3);
}
.hero__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 84px var(--pad) 72px;
  display: flex; flex-wrap: wrap; gap: 56px; align-items: center;
}
.hero__copy { flex: 1 1 420px; min-width: 300px; display: flex; flex-direction: column; gap: 26px; }
.hero h1 {
  margin: 0;
  font-size: clamp(44px, 6vw, 76px);
  line-height: .98; letter-spacing: -.035em; font-weight: 800;
  text-wrap: balance;
}
.hero__lede {
  margin: 0; font-size: 20px; line-height: 1.5; color: var(--body);
  max-width: 46ch; text-wrap: pretty;
}
.hero__note { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--muted); }

.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.badges a { display: block; line-height: 0; transition: opacity 160ms ease; }
.badges a:hover { opacity: .82; }
.badges img { display: block; height: 56px; width: auto; border-radius: 9px; }

.hero__stage {
  position: relative; flex: 1 1 460px; min-width: 320px;
  display: flex; justify-content: center; align-items: flex-end;
  padding: 20px 0 44px;
}
/* Ground shadow lives in CSS, not baked into the PNGs. */
.hero__stage::before,
.hero__stage::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  border-radius: 50%; pointer-events: none;
}
.hero__stage::before {
  bottom: 6px; width: 88%; height: 130px;
  background: radial-gradient(closest-side, rgba(58,38,26,.30), rgba(58,38,26,.14) 58%, rgba(58,38,26,0) 100%);
  filter: blur(18px);
}
.hero__stage::after {
  bottom: 30px; width: 52%; height: 60px;
  background: radial-gradient(closest-side, rgba(40,24,16,.34), rgba(40,24,16,0) 100%);
  filter: blur(10px);
}
.hero__phone { display: block; width: auto; position: relative; }
.hero__phone--left {
  height: var(--hero-side); margin-right: var(--hero-lap); z-index: 1;
  filter: var(--shadow-hero-l);
}
.hero__phone--center {
  height: var(--hero-center); z-index: 3;
  filter: var(--shadow-hero-c);
}
.hero__phone--right {
  height: var(--hero-side); margin-left: var(--hero-lap); z-index: 1;
  filter: var(--shadow-hero-r);
}

/* ------------------------------------------------------------ stats band */

.stats {
  border-top: 1px solid var(--line-12);
  border-bottom: 1px solid var(--line-12);
  background: linear-gradient(180deg, #FFFDFB, #FAF3EA);
}
.stats__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 42px var(--pad);
  display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: center; align-items: stretch;
}
.stat {
  flex: 1 1 200px; max-width: 300px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 6px 20px;
}
.stat + .stat { border-left: 1px solid var(--line-16); }
.stat__num {
  position: relative;
  font-size: 46px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  color: var(--maroon);
}
.stat__num .eyebrow {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 6px; white-space: nowrap;
}
.stat__label { font-size: 15px; line-height: 1.45; color: var(--body); }
.stat__label--tight { max-width: 22ch; }
.stat__label--nowrap { white-space: nowrap; }

/* -------------------------------------------------------------- features */

.features {
  max-width: var(--shell); margin: 0 auto;
  padding: 96px var(--pad) 0;
  display: flex; flex-direction: column; gap: 104px;
}
.feature { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.feature--flip { flex-wrap: wrap-reverse; }
.feature__figure { flex: 0 0 auto; max-width: 100%; display: flex; justify-content: center; }
.feature__figure img {
  display: block; height: var(--feature-phone); width: auto;
  max-width: 100%; object-fit: contain;
  filter: var(--shadow-left);
}
.feature__figure--center img { filter: var(--shadow-center); }
.feature__copy { flex: 1 1 380px; min-width: 300px; display: flex; flex-direction: column; gap: 20px; }
.feature__copy h2 {
  margin: 0; font-size: clamp(34px, 4vw, 50px);
  line-height: 1.02; letter-spacing: -.03em; font-weight: 800;
}
.feature__copy p {
  margin: 0; font-size: 19px; line-height: 1.55; color: var(--body);
  max-width: 48ch; text-wrap: pretty;
}
.textlink {
  align-self: flex-start;
  font-size: 16px; font-weight: 600; color: var(--maroon);
  border-bottom: 2px solid rgba(124,29,63,.3);
  padding-bottom: 3px;
  transition: border-bottom-color 160ms ease;
}
.textlink:hover { border-bottom-color: var(--maroon); color: var(--maroon); }

/* ------------------------------------------------------------ calculator */

.calc {
  scroll-margin-top: calc(var(--header-h) + 20px);
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px; border-radius: 20px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-14);
}
.calc__tiers { display: flex; flex-wrap: wrap; gap: 10px; }
.tier {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px 9px 11px;
  border: 0; border-radius: 999px;
  font-family: inherit; cursor: pointer;
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-16), 0 2px 6px rgba(36,26,22,.06);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}
.tier:hover { transform: translateY(-2px); }
.tier__dot {
  width: 14px; height: 14px; border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 0 0 1px rgba(36,26,22,.12);
}
.tier__name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.tier__mult {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 500;
  color: var(--maroon); background: rgba(124,29,63,.09);
  padding: 3px 8px; border-radius: 999px;
}
.tier[aria-pressed="true"] {
  background: var(--maroon); color: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(124,29,63,.9), 0 6px 14px -6px rgba(124,29,63,.5);
}
.tier[aria-pressed="true"] .tier__mult { color: var(--surface); background: rgba(255,253,251,.18); }

.calc__spend { display: flex; flex-direction: column; gap: 10px; }
.calc__spend-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.calc__spend-row span:first-child { font-size: 15px; color: var(--muted); }
.calc__spend-value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.calc__slider { width: 100%; accent-color: var(--maroon); cursor: pointer; }
.calc__result {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding-top: 16px; border-top: 1px solid var(--line-14);
}
.calc__points { font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: var(--maroon); }
.calc__result-label { font-size: 16px; color: var(--body); }
.calc__foot { font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------------- faq */

.faq {
  max-width: var(--shell); margin: 0 auto;
  padding: 110px var(--pad) 24px;
  display: flex; flex-wrap: wrap; gap: 56px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.faq__intro { flex: 1 1 280px; min-width: 260px; display: flex; flex-direction: column; gap: 14px; }
.faq__intro h2 {
  margin: 0; font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.04; letter-spacing: -.03em; font-weight: 800;
}
.faq__intro p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.faq__intro a { border-bottom: 1px solid rgba(124,29,63,.35); }
.faq__list { flex: 2 1 480px; min-width: 300px; display: flex; flex-direction: column; }
.faq__list > :last-child { border-top: 1px solid var(--line-16); }

.faq-item { border-top: 1px solid var(--line-16); padding: 22px 4px; }
.faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; font-size: 19px; font-weight: 600; line-height: 1.35; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary h3 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.faq-item p { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--body); max-width: 62ch; text-wrap: pretty; }
.faq-plus { flex: none; width: 22px; height: 22px; position: relative; transition: transform 200ms ease; margin-top: 3px; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; background: var(--maroon); }
.faq-plus::before { top: 10px; left: 0; width: 22px; height: 2px; }
.faq-plus::after { left: 10px; top: 0; width: 2px; height: 22px; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }

/* -------------------------------------------------------------- download */

.download {
  max-width: var(--shell); margin: 0 auto;
  padding: 96px var(--pad) 110px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.download__card {
  position: relative; overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(135deg, #F0C55C, #D9A227 55%, #C08D18);
  padding: 60px 48px;
  display: flex; flex-wrap: wrap; gap: 40px; align-items: center;
  box-shadow: 0 30px 60px -34px rgba(124,29,63,.45);
}
.download__copy { flex: 1 1 380px; min-width: 280px; display: flex; flex-direction: column; gap: 20px; }
.download__card h2 {
  margin: 0; font-size: clamp(36px, 4.4vw, 54px);
  line-height: 1.02; letter-spacing: -.03em; font-weight: 800; color: #2A1B06;
}
.download__card p { margin: 0; font-size: 19px; line-height: 1.5; color: #3D2A0C; max-width: 44ch; }
.download__figure { flex: 0 1 300px; min-width: 260px; display: flex; justify-content: center; }
.download__figure img {
  display: block; height: clamp(360px, 44vw, 560px); width: auto;
  max-width: 100%; object-fit: contain;
  filter: var(--shadow-cta);
}

/* ---------------------------------------------------------------- how-to */

.howto-head {
  position: sticky; top: var(--header-h); z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line-12);
}
.howto-head__inner {
  max-width: 900px; margin: 0 auto;
  padding: 26px var(--pad) 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.howto-head h1 {
  margin: 0; font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.02; letter-spacing: -.03em; font-weight: 800; max-width: 22ch;
}
.howto-head p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--body); max-width: 52ch; }

.howto {
  max-width: 900px; margin: 0 auto;
  padding: 24px var(--pad) 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: start; justify-content: center;
}
.howto__figure { min-width: 0; align-self: stretch; }
/* The page header plus the sticky how-to heading measure 299px at every
   desktop width, so pinning at 285px hid the phone's top 14px behind them. */
.howto__sticky {
  position: sticky; top: var(--howto-stack);
  height: min(620px, calc(100vh - var(--howto-stack) - 24px));
  display: flex; justify-content: center;
}
.howto__frames { position: relative; width: 100%; height: 100%; }
.howto__frames img {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  height: 100%; width: auto; max-width: 100%; object-fit: contain;
  opacity: 0; transition: opacity 400ms ease;
  filter: var(--shadow-howto);
}
.howto__frames img.is-active { opacity: 1; }

.howto__steps {
  min-width: 0; display: flex; flex-direction: column;
  /* A sticky element stops pinning once its bottom reaches its container's,
     so a 595px phone in a 2080px column could only stay pinned for 1485px —
     it began sliding away at scroll 1523, while step 04 does not become the
     active step until 1738. The phone was leaving exactly as the redeem
     screen should have appeared. This trailing space extends the pin range
     past the last step. */
  padding-bottom: min(46vh, 440px);
}
.step {
  min-height: 520px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 16px; padding: 40px 0;
}
.step__num {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 40px; font-weight: 500; letter-spacing: -.02em;
  color: rgba(124,29,63,.28);
}
.step h2 {
  margin: 0; font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.08; letter-spacing: -.025em; font-weight: 800;
}
.step p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--body); max-width: 44ch; text-wrap: pretty; }
.step__figure { display: none; }

.fineprint { max-width: var(--shell); margin: 0 auto; padding: 96px var(--pad) 0; }
.fineprint__card {
  border-radius: 28px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-14);
  padding: 44px; display: flex; flex-wrap: wrap; gap: 44px;
}
.fineprint__intro { flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; gap: 12px; }
.fineprint__intro h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.fineprint__intro p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.fineprint__intro a { border-bottom: 1px solid rgba(124,29,63,.35); }
.fineprint__rules { flex: 2 1 400px; min-width: 300px; display: flex; flex-direction: column; gap: 18px; list-style: none; margin: 0; padding: 0; }
.fineprint__rules li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.55; color: var(--strong); }
.fineprint__rules li::before {
  content: ""; flex: none; width: 9px; height: 9px;
  border-radius: 3px; background: var(--gold); margin-top: 8px;
}
.badges--center { max-width: var(--shell); margin: 0 auto; padding: 72px var(--pad) 110px; justify-content: center; gap: 14px; }

/* ----------------------------------------------------------------- legal */

.legal {
  max-width: 860px; margin: 0 auto;
  padding: 76px var(--pad) 110px;
  display: flex; flex-direction: column; gap: 26px;
}
.legal h1 {
  margin: 0; font-size: clamp(36px, 4.6vw, 54px);
  line-height: 1.02; letter-spacing: -.03em; font-weight: 800;
}
.legal__intro { margin: 0; font-size: 18px; line-height: 1.6; color: var(--body); max-width: 60ch; }
.legal__updated {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 22px; border-bottom: 1px solid var(--line-16);
}
.legal__links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; font-size: 16px; font-weight: 600; }

.legal__body > :first-child { margin-top: 0; }
.legal__body h2 { margin: 38px 0 12px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.legal__body h3 { margin: 26px 0 8px; font-size: 18px; font-weight: 700; color: var(--strong); }
.legal__body p, .legal__body li { font-size: 17px; line-height: 1.65; color: var(--body); }
.legal__body p { margin: 0 0 14px; }
.legal__body a { border-bottom: 1px solid rgba(124,29,63,.35); }
.legal__body ol, .legal__body ul { margin: 0 0 14px; padding-left: 22px; }
.legal__body li { margin-bottom: 8px; }

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--footer-bg); color: var(--ink); border-top: 1px solid var(--line-16); }
.site-footer__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 60px var(--pad) 36px;
  display: flex; flex-wrap: wrap; gap: 48px;
}
.site-footer__brand { flex: 1 1 280px; min-width: 240px; display: flex; flex-direction: column; gap: 16px; }
.site-footer__brand img { display: block; height: 62px; width: auto; align-self: flex-start; }
.site-footer__brand p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.site-footer__col { flex: 0 1 160px; display: flex; flex-direction: column; gap: 12px; }
.site-footer__col a { font-size: 15px; color: var(--strong); }
.site-footer__col a:hover { color: var(--maroon); }
.site-footer__legal {
  max-width: var(--shell); margin: 0 auto;
  padding: 20px var(--pad) 40px;
  border-top: 1px solid var(--line-14);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 14px; color: var(--muted);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .howto { grid-template-columns: 1fr; gap: 0; }
  .howto__figure { display: none; }          /* sticky cross-fade is desktop-only */
  /* The trailing space on .howto__steps exists only to keep the sticky phone
     pinned through step 04. With that phone hidden here it was ~390px of empty
     page between the redeem image and the fine print. */
  .howto__steps { padding-bottom: 0; }
  /* Desktop min-widths (240px intro, 300px rules) outlast the card here: at
     375px the list overran its content box by 29px, leaving 32px of card
     padding on the left and 3px on the right; at 320px it scrolled the page. */
  .fineprint__intro, .fineprint__rules { min-width: 0; }
  .step { min-height: 0; padding: 32px 0; }
  .step__figure { display: flex; justify-content: center; margin-top: 8px; }
  .step__figure img { display: block; height: clamp(340px, 62vw, 460px); width: auto; filter: var(--shadow-howto); }
  .howto-head { position: static; }
  .fineprint__card { padding: 32px; gap: 28px; }
  .download__card { padding: 44px 28px; }
}

@media (max-width: 760px) {
  :root {
    --pad: 20px;

    /* The trio needs 361px of a 335px container at 375px wide, so the right
       phone was clipped by .hero's overflow:hidden. Nest them tighter rather
       than shrinking them: 12% overlap brings the group to ~330px and keeps
       the phones legible. */
    --hero-lap: calc(var(--hero-center) * -.12);

    /* One tight shadow instead of two wide blurs.
       The desktop pair blurs at 50-80px. On a phone at DPR 2 that is a ~160px
       device-pixel blur over a rasterised bitmap ~760px tall, twice per image —
       which is what makes them look banded and rough. A single short shadow
       still lifts the phone off the cream and costs a fraction as much.
       To drop shadows entirely, set these five to `none`. */
    --shadow-howto:  drop-shadow(0 10px 18px rgba(36,26,22,.22));
    --shadow-hero-l: drop-shadow(0 8px 14px rgba(36,26,22,.20));
    --shadow-hero-c: drop-shadow(0 10px 18px rgba(36,26,22,.24));
    --shadow-hero-r: drop-shadow(0 8px 14px rgba(36,26,22,.20));

  }

  /* Header: was 115px — 14% of the viewport, permanently, because it is sticky.
     One row, smaller logo, tighter nav. */
  .site-header__inner { padding: 10px var(--pad); gap: 8px; flex-wrap: nowrap; }
  .brand img { height: 34px; }
  .brand__tag { display: none; }
  .site-nav { gap: 2px; flex-wrap: nowrap; }
  .site-nav a { padding: 8px 8px; font-size: 13px; }
  .site-nav .btn-primary { padding: 9px 13px; white-space: nowrap; }

  .hero__inner { padding: 32px var(--pad) 36px; gap: 26px; }
  .hero__copy { gap: 18px; }
  .hero h1 { font-size: clamp(36px, 10vw, 44px); }
  .hero__lede { font-size: 17px; line-height: 1.5; }
  /* Badges and the note centre; the eyebrow, headline and lede stay ranged left. */
  .hero__copy .badges { justify-content: center; }
  .hero__note { font-size: 13px; justify-content: center; text-align: center; }
  .hero__stage { padding: 4px 0 26px; }

  /* Two 190px badges plus a 12px gap need 392px but only get 335px, so they
     stacked. At 46px tall they are 156px wide and sit on one row. */
  .badges img { height: 46px; }
  .badges { gap: 10px; }

  /* Eyebrows: 0.18em of tracking at 12px pushed these to full width. */
  .eyebrow { font-size: 11px; letter-spacing: .12em; }

  /* Three across rather than stacked. flex-basis 0 with min-width 0 gives three
     equal columns that can actually shrink; the default `auto` basis would size
     them to content and force a wrap. Top padding clears the overline, which is
     absolutely positioned above each number and so takes no space of its own. */
  .stats__inner { padding: 30px var(--pad) 22px; gap: 0; flex-wrap: nowrap; }
  .stat { flex: 1 1 0; min-width: 0; max-width: none; padding: 0 5px; gap: 5px; }
  .stat + .stat { border-left: 1px solid var(--line-16); border-top: 0; }
  .stat__num { font-size: clamp(21px, 6.6vw, 31px); }
  .stat__num .eyebrow { font-size: 9.5px; letter-spacing: .1em; margin-bottom: 5px; }
  .stat__label, .stat__label--nowrap, .stat__label--tight {
    font-size: 11.5px; line-height: 1.35; white-space: normal; max-width: none;
  }

  .features { padding: 52px var(--pad) 0; gap: 56px; }

  /* Keep the phone beside the copy instead of stacking. `display: contents`
     promotes the copy's children to grid items, so the figure can span the
     eyebrow/heading/paragraph rows while the calculator and the link below it
     still run the full width. */
  .feature, .feature--flip {
    display: grid;
    grid-auto-flow: row;
    align-items: start;
    gap: 10px 16px;
  }
  .feature__copy { display: contents; }
  .feature__figure { grid-row: 1 / span 3; align-self: center; }
  .feature__figure img { height: clamp(190px, 58vw, 250px); }
  .feature__copy > .eyebrow, .feature__copy > h2, .feature__copy > p { min-width: 0; }

  /* Earn and Redeem: phone on the left, as on desktop. */
  .feature { grid-template-columns: auto 1fr; }
  .feature > .feature__figure { grid-column: 1; justify-self: start; }
  .feature > .feature__copy > .eyebrow,
  .feature > .feature__copy > h2,
  .feature > .feature__copy > p,
  .feature > .feature__copy > .textlink { grid-column: 2; }

  /* Status: phone on the right, as on desktop. Same specificity as the block
     above, so source order decides — these must stay after it. */
  .feature--flip { grid-template-columns: 1fr auto; }
  .feature--flip > .feature__figure { grid-column: 2; justify-self: end; }
  .feature--flip > .feature__copy > .eyebrow,
  .feature--flip > .feature__copy > h2,
  .feature--flip > .feature__copy > p { grid-column: 1; }
  /* The link belongs with the copy, not stranded under the phone. */
  .feature--flip > .feature__copy > .textlink { grid-column: 1 / -1; }
  .feature__copy > h2 { font-size: clamp(24px, 7vw, 30px); }
  .feature__copy > p { font-size: 15px; line-height: 1.55; max-width: none; }
  /* The calculator needs the whole width, not the narrow text column. This
     applies while it is still inside a feature section — main.js moves it out
     to sit after Redeem, where .calc--standalone takes over. */
  .feature .calc { grid-column: 1 / -1; }
  .calc--standalone { margin-top: 0; }
  /* align-self: flex-start does nothing to a grid item's inline size, so the
     link stretched and dragged its underline across the full width. */
  .feature .textlink { justify-self: start; margin-top: 2px; }

  /* Calculator: chips were wrapping raggedly over three rows. An auto-fill grid
     lines them up, and the tighter metrics bring it back to two. */
  .calc { padding: 15px; gap: 12px; margin-top: 6px; }
  /* Three fixed columns so the five chips land as 3 + 2 rather than wrapping
     raggedly. The multiplier drops its pill and becomes plain text, which is
     what buys "Platinum · 1.5×" enough room to fit the narrowest column. */
  .calc__tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  /* "Platinum · 1.5×" plus its dot needs ~98px on one line but the column is
     79px at the narrow end. Flexbox was resolving that by shrinking the dot to
     nothing rather than overflowing, so the swatch silently disappeared.
     The dot is now unshrinkable and the multiplier drops to its own line. */
  .tier { padding: 7px 6px; gap: 4px 5px; justify-content: center; flex-wrap: wrap; }
  .tier__dot { flex: none; width: 10px; height: 10px; }
  .tier__name { font-size: 12px; white-space: nowrap; }
  .tier__mult { flex-basis: 100%; text-align: center; font-size: 11px; padding: 0; background: none; }
  .tier[aria-pressed="true"] .tier__mult { background: none; }
  .calc__points { font-size: 30px; }
  .calc__spend-value { font-size: 20px; }
  .calc__spend-row span:first-child { font-size: 14px; }
  .calc__result { padding-top: 12px; }
  .calc__result-label { font-size: 15px; }
  .calc__foot { font-size: 13px; }

  .faq { padding: 64px var(--pad) 24px; gap: 26px; }
  .faq-item { padding: 18px 2px; }
  .faq-item > summary { font-size: 17px; gap: 14px; }
  .faq-item p { font-size: 16px; }

  .download { padding: 56px var(--pad) 72px; }
  /* Centred on mobile: the card stacks here, so a left-aligned column of copy
     sitting above a centred phone read as lopsided. */
  .download__card { padding: 34px 22px; gap: 22px; border-radius: 26px; text-align: center; }
  /* min-width: 280px outlasted the card below ~375px, so the centred copy was
     centred on a box wider than the card — 22px off at 320px. */
  .download__copy { align-items: center; min-width: 0; }
  .download__card p { font-size: 17px; margin-inline: auto; }
  .download__card .badges { justify-content: center; }

  .badges--center { padding: 48px var(--pad) 72px; }
  /* No section break between the last step and the fine print: step 04 drops
     its bottom padding and the card follows with just enough room for the
     phone's shadow (10px offset + 18px blur) to fade before the card edge. */
  .howto__steps > .step:last-child { padding-bottom: 0; }
  .fineprint { padding: 24px var(--pad) 0; }
  .fineprint__rules li { font-size: 16px; }

  .legal { padding: 48px var(--pad) 72px; gap: 20px; }
  .legal__intro { font-size: 17px; }
  .legal__body h2 { margin: 30px 0 10px; font-size: 21px; }
  .legal__body p, .legal__body li { font-size: 16px; }

  /* Flex wrapping left the columns ragged — one per row at 375, and at 414 a
     half-width pair followed by a full-width "Follow". A two-column grid keeps
     every heading on the same left edges, and the odd third column sits in
     column one at its true width instead of stretching. */
  .site-footer__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
    padding: 36px var(--pad) 24px;
  }
  .site-footer__brand { grid-column: 1 / -1; min-width: 0; gap: 12px; }
  .site-footer__brand img { height: 46px; }
  .site-footer__brand p { white-space: normal; font-size: 14px; }
  .site-footer__col { min-width: 0; gap: 10px; }
  .site-footer__col a { font-size: 14px; }
  .site-footer__legal {
    padding: 16px var(--pad) 30px; font-size: 12.5px;
    gap: 4px; justify-content: flex-start;
  }
  .site-footer__legal > div { flex: 1 1 100%; }
}

/* Tablet footer: brand (280) plus three 160px columns and four 48px gaps need
   952px, but the shell only offers viewport - 56. Below ~1008px the fourth
   column wrapped to the far left, landing under the logo instead of lining up
   with the others. A grid puts the brand on its own row with three even columns
   beneath it. */
@media (min-width: 761px) and (max-width: 1010px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
  }
  .site-footer__brand { grid-column: 1 / -1; min-width: 0; }
  .site-footer__col { min-width: 0; }
}

/* Wherever the download card wraps, its figure keeps `flex: 0 1 300px` with a
   260px min-width, so it neither grows to fill the row (leaving the phone
   left-aligned) nor shrinks below 260px (overflowing the card at 320px, where
   only 236px is available). Full width with no minimum fixes both; the figure's
   own justify-content then centres the phone. The card stops wrapping around
   880px, above which the two-column desktop layout is intended. */
@media (max-width: 880px) {
  .download__figure { flex: 1 1 100%; min-width: 0; justify-content: center; }
}

/* Tablet range: "Bronze to Diamond, up to 2× points" is nowrap, which gives each
   stat a ~290px min-content width. Three of those plus gaps need 918px but only
   get 712px at 768, so the band wrapped to three rows. Letting it wrap fixes it
   without touching the desktop treatment, where nowrap fits comfortably. */
@media (min-width: 761px) and (max-width: 1000px) {
  .stat__label--nowrap { white-space: normal; }
  .stat { padding: 6px 12px; }
}

/* "Bronze to Diamond" needs ~100px at 11.5px but the stat column only offers
   ~97px of content width below 375. Trimming the column padding buys the 6px
   that keeps the label on the two lines the copy intends. */
@media (max-width: 374px) {
  .stat { padding: 0 2px; }
}

/* iPhone SE (1st gen) and similar: 280px of usable width cannot hold the phone
   trio at its 330px floor, so lower the floor rather than clip. */
@media (max-width: 340px) {
  :root { --hero-center: 275px; }
  /* 89px of content width here — the label has to come down with it. */
  .stat__label, .stat__label--nowrap, .stat__label--tight { font-size: 10px; }
  .stat__num { letter-spacing: -.04em; }
  .tier { padding: 7px 4px; }
  .tier__name { font-size: 11px; }
}

/* Very narrow phones: the nav cannot hold three items on one row. */
@media (max-width: 380px) {
  .site-nav a { padding: 8px 6px; font-size: 12px; }
  .site-nav .btn-primary { padding: 8px 11px; }
  .brand img { height: 30px; }
  /* 46px badges need 322px of the 320px available here; 44px leaves headroom. */
  .badges img { height: 44px; }
}

/* ------------------------------------------------------------- tier dots */

.tier__dot--bronze   { background: linear-gradient(140deg, #C68A52, #8A5A2B); }
.tier__dot--silver   { background: linear-gradient(140deg, #DCDCDC, #9E9E9E); }
.tier__dot--gold     { background: linear-gradient(140deg, #F0C55C, #C08D18); }
.tier__dot--platinum { background: linear-gradient(140deg, #EDEFF2, #A8B0BA); }
.tier__dot--diamond  { background: linear-gradient(140deg, #EAF3F8, #8FB6CC); }