/* ============================================================================
   /competitions — Figma 2N553Cls5WgWmoHrH1EVVv, section 3195:23028.
   Desktop 3195:23029 (1512x7632), mobile 3195:84374 (393x6244).
   Needs atlas-tokens.css. Chrome (bar, navbar, footer, mobile menu) is the
   shared set and is NOT styled here.

   Built 28 Aug 2026, replacing the hand-built page that carried its styles
   inline and ran on the legacy .nav-glass navbar.

   THREE BANDS ARE DATA. The winners feed, the leaderboard and the countdown
   read assets/competitions.json and render an empty state when it is empty,
   which it is today. Every visual below therefore has to look finished with
   no rows in it - see .afxc-empty.
   ========================================================================= */

/* [hidden] is only `display:none` at UA-stylesheet strength; any of our own
   display rules beats it. The three data bands are hidden by the script via
   this attribute, so it has to actually win, or the page ships a stopped
   clock and an empty table. */
.afxc-hero [hidden], .afxc-vsl [hidden], .afxc-prizes [hidden],
.afxc-lb [hidden], .afxc-faq [hidden], .afxc-final [hidden] { display: none !important; }

/* The steps band on this page carries no CTA (Figma 3212:126575 drops it —
   the band above already has one), so the sheet's bottom padding would leave
   a hole where the button is on the home page. */
.afxs--comp { padding-bottom: 80px; }
@media (max-width: 900px) { .afxs--comp { padding-bottom: 56px; } }

.afxc-hero, .afxc-vsl, .afxc-prizes, .afxc-lb, .afxc-faq, .afxc-final {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
}

/* shared -------------------------------------------------------------- */
.afxc-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0; padding: 6px 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  color: rgba(255,255,255,.72);
}
.afxc-eyebrow--dark { color: rgba(13,13,13,.72); }
.afxc-eyebrow__dot {
  width: 16px; height: 16px; flex: none; border-radius: 5px;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.afxc-eyebrow--dark .afxc-eyebrow__dot {
  background: rgba(13,13,13,.10);
  box-shadow: inset 0 0 0 1px rgba(13,13,13,.14);
}

/* the two-tone headings: line one fades out, line two is solid. Same ink
   guard as every other band - background-clip:text gives a descender no
   paint and slices it flat, so push the paint box down and take it back. */
.afxc-fade {
  background: linear-gradient(120.95deg, #FFFFFF 63%, rgba(255,255,255,.35) 93.18%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .2em; margin-bottom: -.2em;
}
.afxc-fade--dark {
  background: linear-gradient(120.95deg, #0D0D0D 63%, #CECECE 93.18%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.afxc-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 18px 32px; box-sizing: border-box;
  border-radius: 100px;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t-instant) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.afxc-btn--lime {
  background: var(--af-lime);
  /* set explicitly: this is a link on a page that colours links, and a lime
     label on a lime pill is invisible, not subtle */
  color: var(--af-lime-ink, #001D21);
  box-shadow: 2px 14px 24px rgba(38,63,66,.12);
}
.afxc-btn--ghost {
  background: rgba(255,255,255,.10);
  color: #FFFFFF;
  font-weight: var(--w-medium);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.afxc-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .afxc-btn--lime:hover { box-shadow: 2px 18px 30px rgba(38,63,66,.18); }
  .afxc-btn--ghost:hover { background: rgba(255,255,255,.16); }
}
.afxc-chev {
  width: 16px; height: 16px; flex: none;
  background: currentColor;
  -webkit-mask: url("/assets/figma/steps-chevron.svg") center / contain no-repeat;
          mask: url("/assets/figma/steps-chevron.svg") center / contain no-repeat;
  transition: transform var(--t-fast) var(--e-out);
}
.afxc-chev--down { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .afxc-btn:hover .afxc-chev { transform: translateX(3px); }
}

/* the empty state the three data bands fall back to. It is deliberately a
   sentence, not a spinner: there is nothing loading, there is simply no
   competition yet, and saying so is better than an empty table. */
.afxc-empty {
  max-width: 560px; margin: 0 auto; padding: 28px 32px;
  border-radius: 24px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 1.5; text-align: center;
  color: rgba(255,255,255,.72);
}
.afxc-empty a { color: var(--af-lime); text-decoration: none; }
.afxc-empty a:hover { text-decoration: underline; }
.afxc-empty--dark {
  background: rgba(13,13,13,.04);
  box-shadow: inset 0 0 0 1px rgba(13,13,13,.10);
  color: rgba(13,13,13,.66);
}

/* --- BAND 1, hero — 3195:23036 -------------------------------------- */
.afxc-hero { background: #FFFFFF; }
.afxc-hero__bg {
  position: absolute; inset: 0 0 36px 0; z-index: -3;
  background: url("/assets/comp/comp-hero-bg.webp") center / cover no-repeat;
}
.afxc-hero__glow {
  position: absolute; left: -609px; top: 12px; width: 1693px; height: 956px;
  z-index: -2; border-radius: 50%; background: #051F1D; filter: blur(140px);
  opacity: .55; pointer-events: none;
}
.afxc-hero__wash {
  position: absolute; inset: 0; z-index: -1;
  /* 89.8deg is left-to-right: opaque behind the copy, clear over the art on
     the right. Too strong and the glass shelves the band is built around
     disappear entirely. */
  background: linear-gradient(89.8deg, rgba(5,31,29,.88) 0%, rgba(5,31,29,.62) 38%, rgba(5,31,29,.06) 78%, rgba(5,31,29,0) 100%);
}
.afxc-hero__inner { padding: 10px 10px 0; }
.afxc-hero__page {
  max-width: 1432px; margin: 0 auto; padding: 120px 30px 0;
  min-height: 750px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.afxc-hero__col { display: flex; flex-direction: column; gap: 32px; max-width: 1200px; }
.afxc-hero__eyebrow {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: #FFFFFF;
}
.afxc-hero__h1 {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 110px; line-height: 110px; letter-spacing: -3.3px;
  color: #FFFFFF;
}
.afxc-hero__h1 span { display: block; }
.afxc-hero__lede {
  margin: 0; max-width: 560px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; letter-spacing: -.36px;
  color: rgba(255,255,255,.78);
}
.afxc-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.afxc-hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  margin: 0 0 40px; padding: 0; list-style: none;
}
.afxc-hero__stats li {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22);
}
.afxc-stat__k {
  font-family: var(--font-alt); font-weight: var(--w-regular);
  font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.72);
}
.afxc-stat__v {
  font-family: var(--font-alt); font-weight: var(--w-semi);
  font-size: 32px; line-height: 1.2; letter-spacing: -.96px; color: #FFFFFF;
}

/* --- BAND 2, the walkthrough — 3195:141447 --------------------------- */
.afxc-vsl {
  background: linear-gradient(180deg, #303030 0%, #0D0D0D 60%, #0D0D0D 100%);
  padding: 120px 40px;
}
.afxc-vsl__container {
  max-width: 1432px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.afxc-vsl__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.afxc-vsl__h2, .afxc-lb__h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 96px; line-height: 96px; letter-spacing: -2.88px; color: #FFFFFF;
}
.afxc-vsl__h2 span, .afxc-lb__h2 span { display: block; }
.afxc-vsl__lede, .afxc-lb__lede {
  margin: 0; max-width: 560px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; color: rgba(255,255,255,.66);
}
.afxc-vsl__frame {
  width: 100%; max-width: 1074px; aspect-ratio: 1074 / 604;
  border-radius: 32px;
  background: radial-gradient(120% 120% at 50% 0%, #2A3B39 0%, #16211F 60%, #101615 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
}
.afxc-vsl__soon {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; letter-spacing: -.32px; color: rgba(255,255,255,.44);
}

/* --- BAND 3, prize structure + winners feed — 3199:28282 ------------- */
.afxc-prizes {
  background: #FBFBFB;
  padding: 120px 40px 140px;
  text-align: center;
}
/* The exported backdrop (3202:50831) is 2011.5 wide against a 1512 frame and
   ALREADY CONTAINS the coin clusters. Two consequences, both learned the hard
   way: `cover` crops those 500 extra pixels away and drags the coins inward
   until one sits on top of the winners table, and adding separate coin
   elements on top of it draws every coin twice. So: size it at its true
   133% (2011.5 / 1512) and let it carry the coins by itself. */
.afxc-prizes__bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("/assets/comp/comp-bg-prize.webp") center top / 133% auto no-repeat;
  opacity: .9;
}
.afxc-prizes__head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 32px; }
.afxc-prizes__h2, .afxc-final__h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px; color: #0D0D0D;
}
.afxc-prizes__h2 span, .afxc-final__h2 span { display: block; }
.afxc-prizes__lede {
  margin: 0 auto; max-width: 520px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; color: rgba(13,13,13,.62);
}

.afxc-feed { width: 100%; max-width: 720px; margin: 0 auto; text-align: left; }
.afxc-feed__head {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 20px; border-radius: 16px;
  background: rgba(118,151,148,.10);
  -webkit-backdrop-filter: blur(17px); backdrop-filter: blur(17px);
  font-family: var(--font-display); font-weight: var(--w-semi); font-size: 16px;
  color: rgba(13,13,13,.72);
}
.afxc-feed__live { display: inline-flex; align-items: center; gap: 8px; }
.afxc-feed__live i {
  width: 8px; height: 8px; border-radius: 50%; background: #7CB1AC;
  box-shadow: 0 0 0 4px rgba(124,177,172,.22);
}
.afxc-feed__rows { list-style: none; margin: 0; padding: 0; }
.afxc-feed__rows li {
  display: grid; grid-template-columns: 1.1fr 1.4fr .9fr .8fr;
  align-items: center; gap: 16px;
  height: 56px; padding: 0 20px;
  font-family: var(--font-display); font-weight: var(--w-semi); font-size: 16px;
  color: #0D0D0D;
}
.afxc-feed__rows li:nth-child(odd) { background: rgba(255,255,255,.72); border-radius: 12px; }
.afxc-feed__amt { color: #1F7A6B; font-weight: var(--w-bold); }
.afxc-feed__ago { text-align: right; color: rgba(13,13,13,.5); font-weight: var(--w-medium); }

/* the sample-data marker. Deliberately legible rather than a subtle
   watermark: its whole job is to stop invented rows reading as verified. */
.afxc-feed, .afxc-table { position: relative; }
.afxc-sample {
  position: absolute; top: -14px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(225,255,160,.18);
  box-shadow: inset 0 0 0 1px rgba(225,255,160,.45);
  font-family: var(--font-ui); font-weight: var(--w-semi);
  font-size: 12px; letter-spacing: .02em; text-transform: uppercase;
  color: #0D0D0D;
}
.afxc-table__head .afxc-sample { color: var(--af-lime); background: rgba(225,255,160,.12); }

/* 3208:126267 — the random-draw card under the winners feed. 1072x156,
   radius 32, a dark ramp running bottom-left to top-right (the file's handles
   put it at 225.2deg), 32px padding. Sits on the light prize band, so its ink
   is set explicitly rather than inherited. */
.afxc-draw {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  width: 100%; max-width: 1072px; margin: 40px auto 0; padding: 32px;
  border-radius: 32px; text-align: left;
  background: linear-gradient(225.2deg, #151515 0%, #2F2F2F 25%, #151515 100%);
  box-shadow: 0 18px 40px rgba(38,63,66,.14);
}
.afxc-draw__text { min-width: 0; }
/* 3208:126272 "Promotion Badge" — 115x38, radius 12, white at 9%. It sits
   BEHIND the words "Top 20?" in the headline; read as a standalone chip it
   renders as an empty grey box above the title. */
.afxc-draw__hl {
  display: inline-block;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.09);
  color: var(--af-lime);
}
.afxc-draw__t {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 32px; line-height: 1.2; letter-spacing: -.96px; color: #FFFFFF;
}
.afxc-draw__d {
  margin: 8px 0 0; max-width: 560px;
  font-family: var(--font-display); font-weight: var(--w-regular);
  font-size: 16px; line-height: 21px; color: rgba(255,255,255,.6);
}
.afxc-draw__cta { flex: none; height: 48px; padding: 14px 24px; }

/* --- BAND 4, the leaderboard — 3197:251890 -------------------------- */
.afxc-lb {
  background: linear-gradient(180deg, #303030 0%, #0D0D0D 55%, #0D0D0D 100%);
  padding: 120px 40px;
}
.afxc-lb__bg {
  position: absolute; inset: 0 0 auto 0; height: 1027px; z-index: -1;
  background: url("/assets/comp/comp-bg-lb.webp") center top / cover no-repeat;
  opacity: .55; pointer-events: none;
}
.afxc-lb__container {
  max-width: 1432px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.afxc-lb__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.afxc-lb__body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; }

.afxc-podium {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 24px;
  width: 100%; max-width: 1072px; margin: 0; padding: 0; list-style: none;
}
.afxc-table {
  width: 100%; max-width: 1072px;
  border-radius: 32px; background: #222222; padding: 16px;
}
.afxc-table__head, .afxc-table__rows li {
  display: grid; grid-template-columns: 80px 1fr 200px 120px;
  align-items: center; gap: 16px; padding: 0 20px;
}
.afxc-table__head {
  height: 40px;
  font-family: var(--font-display); font-weight: var(--w-regular); font-size: 14px;
  color: rgba(255,255,255,.5);
}
.afxc-table__head span:nth-child(3), .afxc-table__head span:nth-child(4) { text-align: right; }
.afxc-table__rows { list-style: none; margin: 0; padding: 0; }
.afxc-table__rows li { height: 56px; border-radius: 16px; color: #FFFFFF; }
.afxc-table__more {
  width: 100%; height: 48px; margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,.06); color: #FFFFFF;
  font-family: var(--font-ui); font-weight: var(--w-semi); font-size: 16px;
}

/* --- BAND 5, FAQ — 3195:141830 -------------------------------------- */
.afxc-faq {
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF1F4 100%);
  padding: 120px 40px 120px;
}
.afxc-faq__dots {
  position: absolute; inset: 0; z-index: -2;
  background: url("/assets/comp/comp-bg-dots.webp") center / cover no-repeat;
  opacity: .55; pointer-events: none;
}
.afxc-faq__puzzle {
  position: absolute; z-index: -1; width: 350px; height: 350px;
  background: url("/assets/comp/comp-puzzle.webp") center / contain no-repeat;
  pointer-events: none;
}
.afxc-faq__puzzle--l { left: -80px; top: 52%; }
.afxc-faq__puzzle--r { right: -70px; top: 46%; transform: rotate(18deg); }
.afxc-faq__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 40px; }
.afxc-faq__h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 64px; line-height: 64px; letter-spacing: -1.92px; color: #0D0D0D;
}
.afxc-faq__h2 span { display: block; }
.afxc-faq__list { width: 100%; max-width: 720px; margin: 0 auto; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.afxc-faq__row {
  border-radius: 20px; background: rgba(255,255,255,.86);
  box-shadow: inset 0 0 0 1px rgba(13,13,13,.06), 0 8px 24px rgba(38,63,66,.05);
  overflow: hidden;
}
.afxc-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 20px; line-height: 1.3; letter-spacing: -.4px; color: #0D0D0D;
}
.afxc-faq__pm {
  position: relative; width: 36px; height: 36px; flex: none; border-radius: 12px;
  background: rgba(124,177,172,.16);
}
.afxc-faq__pm::before, .afxc-faq__pm::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: #0D0D0D;
  transform: translate(-50%, -50%); transition: opacity var(--t-fast) var(--e-out);
}
.afxc-faq__pm::before { width: 14px; height: 1.6px; }
.afxc-faq__pm::after  { width: 1.6px; height: 14px; }
.afxc-faq__row[data-open="true"] .afxc-faq__pm::after { opacity: 0; }
/* grid-template-rows animates; height:auto does not */
.afxc-faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--e-out);
}
.afxc-faq__a > p { overflow: hidden; margin: 0; padding: 0 24px; }
.afxc-faq__row[data-open="true"] .afxc-faq__a { grid-template-rows: 1fr; }
.afxc-faq__row[data-open="true"] .afxc-faq__a > p { padding-bottom: 24px; }
.afxc-faq__a p {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; color: rgba(13,13,13,.66);
}

/* --- BAND 6, the closer — 3195:84340 -------------------------------- */
.afxc-final {
  background: linear-gradient(180deg, #303030 0%, #0D0D0D 55%, #051F1D 100%);
  padding: 140px 40px 0;
  /* CLIP, both axes. __bg is a fixed 1054px and __glow 956px inside a section
     that is shorter than either, and the shared `overflow-y: visible` at the
     top of this file let both spill straight over the footer that follows -
     washing out its link columns to near-unreadable. Nothing in this band
     needs to overflow, so it clips. */
  overflow: clip;
}
.afxc-final__bg {
  position: absolute; inset: 0 0 auto 0; height: 1054px; z-index: -2;
  background: url("/assets/comp/comp-closer-bg.webp") center top / cover no-repeat;
  opacity: .5; pointer-events: none;
}
.afxc-final__glow {
  position: absolute; left: 50%; top: 120px; width: 1693px; height: 956px;
  margin-left: -846px; z-index: -1; border-radius: 50%;
  background: #051F1D; filter: blur(190px); opacity: .8; pointer-events: none;
}
.afxc-final__container {
  max-width: 1488px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 48px;
  padding-bottom: 140px;
}
.afxc-final__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.afxc-final__h2 { color: #FFFFFF; }
.afxc-count {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  width: 100%; max-width: 720px; padding: 12px;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.afxc-count__cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 0; border-radius: 24px; background: rgba(255,255,255,.05);
}
.afxc-count__cell b {
  font-family: var(--font-alt); font-weight: var(--w-medium);
  font-size: 40px; line-height: 1.1; color: #FFFFFF; font-variant-numeric: tabular-nums;
}
.afxc-count__cell span {
  font-family: var(--font-alt); font-weight: var(--w-regular);
  font-size: 14px; color: rgba(255,255,255,.6);
}
.afxc-final__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.afxc-final__proof {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  margin: 0; padding: 0; list-style: none;
}
.afxc-final__proof li {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; color: rgba(255,255,255,.6);
}
.afxc-final__proof li + li::before { content: '· '; color: rgba(255,255,255,.3); }

/* ============================================================================
   Below the 1512 design width. The headings are the only thing that genuinely
   breaks - 110px does not fit a phone - so they step down first.
   ========================================================================= */
@media (max-width: 1200px) {
  .afxc-hero__h1 { font-size: 84px; line-height: 84px; letter-spacing: -2.5px; }
  .afxc-vsl__h2, .afxc-lb__h2 { font-size: 72px; line-height: 72px; letter-spacing: -2.16px; }
  .afxc-prizes__h2, .afxc-final__h2 { font-size: 64px; line-height: 64px; letter-spacing: -1.92px; }
  .afxc-faq__h2 { font-size: 52px; line-height: 54px; }
}
@media (max-width: 900px) {
  .afxc-hero__inner { padding: 8px 8px 0; }
  .afxc-hero__page { padding: 72px 16px 0; min-height: 0; gap: 56px; }
  .afxc-hero__h1 { font-size: 44px; line-height: 46px; letter-spacing: -1.32px; }
  .afxc-hero__lede { font-size: 16px; line-height: 24px; }
  .afxc-hero__stats { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .afxc-vsl, .afxc-lb { padding: 72px 24px; }
  .afxc-prizes { padding: 72px 24px 96px; }
  .afxc-faq { padding: 72px 24px 96px; }
  .afxc-final { padding: 96px 24px 0; }
  .afxc-vsl__h2, .afxc-lb__h2,
  .afxc-prizes__h2, .afxc-final__h2 { font-size: 40px; line-height: 42px; letter-spacing: -1.2px; }
  .afxc-faq__h2 { font-size: 36px; line-height: 38px; letter-spacing: -1.08px; }
  .afxc-faq__q { font-size: 17px; padding: 18px 18px; }
  .afxc-count { grid-template-columns: repeat(2, 1fr); }
  .afxc-table__head, .afxc-table__rows li { grid-template-columns: 48px 1fr 96px; }
  .afxc-table__head span:nth-child(3) { display: none; }
  .afxc-feed__rows li { grid-template-columns: 1fr auto; }
  .afxc-feed__rows li > :nth-child(2) { display: none; }
  .afxc-prizes__coin, .afxc-faq__puzzle { display: none; }
  .afxc-btn { width: 100%; }
  .afxc-hero__actions, .afxc-final__actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .afxc-btn, .afxc-chev, .afxc-faq__a { transition: none; }
}