/* discovery.82dash.com - page styles.
   Tokens: CLAUDE.md "Design tokens". Fonts are self-hosted (decisions.md "Fonts"):
   Inter 4.1 subset to the Latin-1 set below; IBM Plex Sans 1.1.0 Latin1 split files (400, 700) as
   shipped by IBM. Both SIL OFL 1.1, licences in assets/fonts/. */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular-latin1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-Medium-latin1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold-latin1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-Bold-latin1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

:root {
  /* CLAUDE.md design tokens. Ink #0f0f10 everywhere (Paddy, 11 Nov 2026: Figma's #1e1a1c text
     is changed to match). */
  --green: #00f075;
  --blue: #2000ff;
  --ink: #0f0f10;
  --muted: #6b6d70;
  --hair: #e7e9eb;

  /* Other values from Figma "Creator Waitlist" (read 11 Nov 2026) */
  --mint: #eef4f1;
  --line: #d6dbd8;
  --card-line: #e3e7e5;
  --nav-line: #ebebeb;
  --error: #c0182f;          /* form errors; 5.5:1 on the hero background. Not a brand token: TBD in Figma (Proposed) */
  --dot-grey: #a1a3a6;
  --cat-dot: #a0a7a3;
  --divider: #c9d1cd;
  --footer-grey: #8a8c8f;
  --button: #121212;
  --white: #fff;

  /* Fonts */
  --font-head: "Inter", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;

  /* INTERACTIONS 1: visible focus ring (Paddy, 11 Nov 2026) */
  --focus: 2px solid var(--blue);
  --focus-offset: 3px;

  /* INTERACTIONS 2.3 */
  --circle: min(520px, 38vw);
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main {
  flex: 1;
}

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

a {
  color: inherit;
}

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

/* #main takes focus only as a landing point after a first-visit banner choice (consent-banner.js); it is not
   a control, so no ring around the whole page content (Proposed, 13 Nov 2026). */
#main:focus {
  outline: none;
}

/* In the black footer blue is 2.5:1, so the ring is green there (13.7:1; INTERACTIONS 1, Paddy 12 Nov 2026). */
.site-footer :focus-visible {
  outline-color: var(--green);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  font: 600 14px/1 var(--font-head);
  color: var(--white);
  background: var(--ink);
  border-radius: 8px;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Headline highlight (SPEC 3.1, Paddy 12 Nov 2026): ink on a green marker band, 12.5:1. Green text
   on the light backgrounds was 1.4:1, below WCAG AA. `clone` repeats the padding on each line. */
.hl {
  padding: 0 0.12em;
  color: var(--ink);
  background: var(--green);
  /* stylelint-disable-next-line property-no-vendor-prefix -- WebKit/Safari ignore the unprefixed one (checked 12 Nov 2026) */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.arrow {
  flex: none;
}

/* Header (Figma Nav 1460:34, mobile 1461:33) */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding: 0 64px;
  border-bottom: 1px solid var(--nav-line);
  background: var(--white);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo img {
  width: 111px;
  height: 32.3px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 10px;
  font: 600 13px/normal var(--font-head);
  border: 1px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.cta-short {
  display: none;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font: 500 13px/normal var(--font-head);
  text-decoration: none;
  white-space: nowrap;
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

/* Hero (Hero BG 1472:34, Hero Content 1460:40, circle 1460:72) */
.hero-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--circle);
  align-items: center;
  gap: 40px;
  min-height: 624px;
  padding: 58px 105px 46px 64px;
  background: var(--mint);
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 640px;
}

.hero h1 {
  font: 600 58px/64px var(--font-head);
  letter-spacing: -2.5px;
}

.hero-body {
  max-width: 520px;
  font: 500 18px/28px var(--font-head);
  letter-spacing: -0.2px;
}

/* Form (1460:64). Behaviour and states: part 5. */
.join {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.field {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 360px;
  max-width: 100%;
  padding: 17px 18px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgb(32 0 255 / 8%);
}

.field input {
  flex: 1;
  min-width: 0;
  font: 400 15px/20px var(--font-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}

.field input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.switch {
  font: 600 12px/normal var(--font-head);
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
}

.cta,
.go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 24px;
  font: 700 15px/normal var(--font-head);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s, color 0.15s;
}

.cta {
  color: var(--white);
  background: var(--button);
  box-shadow: 6px 6px 0 var(--green);
}

.consent {
  padding-left: 24px;
  font: 400 13px/20px var(--font-body);
  color: var(--muted);
}

.consent a {
  color: var(--ink);
  text-underline-offset: 2px;
}

/* Form states (SPEC 3.2, step 1 part 5; details Proposed). */
.form-error {
  padding-left: 24px;
  font: 400 13px/20px var(--font-body);
  color: var(--error);
}

/* Shown only without JavaScript (SPEC 3.2): the bot check needs it, so joining does too. */
.noscript-note {
  padding-left: 24px;
  font: 400 13px/20px var(--font-body);
  color: var(--ink);
}

/* Turnstile's box (interaction-only, SPEC 3.2). Turnstile always fills it, so it stays rendered but out
   of the layout (no flex gap, nothing moves) until a challenge is showing (turnstile.js adds the class). */
.bot-check:not(.is-interactive) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-error[hidden],
.join[hidden] {
  display: none;
}

/* Honeypot: off screen for people and assistive tech; bots that fill every field reveal themselves. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.join[aria-busy="true"] .spinner {
  display: inline-block;
}

.join[aria-busy="true"] .cta .arrow {
  display: none;
}

.cta[aria-disabled="true"] {
  cursor: progress;
}

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

/* Success card (Figma "Success Card" 1506:168). */
.success-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 480px;
  max-width: 100%;
  padding: 18px 24px 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.success-card[hidden] {
  display: none;
}

.success-tick {
  flex: none;
}

.success-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.success-title {
  font: 700 18px/normal var(--font-head);
  color: var(--ink);
}

.success-message {
  font: 400 15px/22px var(--font-head);
  color: var(--muted);
}

.no-app {
  display: flex;
  align-items: center;
  gap: 12px;
}

.no-app p {
  font: 700 16px/26px var(--font-body);
  color: var(--blue);
}

.no-app-dot {
  margin: 0 4px;
  font: 600 13px/normal var(--font-head);
  color: var(--dot-grey);
}

.wallets {
  display: flex;
  gap: 12px;
}

.wallets img {
  border-radius: 4px;
}

/* Hero visual (INTERACTIONS 2.3). hero.js rotates .hand-rig around the phone's centre, which sits
   on the circle's centre, so the wrist cut always stays on the circle's edge. */
.visual {
  display: flex;
  justify-content: center;
}

.circle {
  --hand-swap: 250ms; /* hero.js sets this from MOTION.SWAP_MS */

  position: relative;
  width: var(--circle);
  height: var(--circle);
  overflow: hidden;
  background: var(--white);
  border-radius: 50%;

  /* Clips the rotating hand reliably in Safari (INTERACTIONS 2.4). */
  clip-path: circle(50%);
}

.hand-rig {
  position: absolute;
  top: 14.667%;
  left: 24.5%;
  width: 63.333%;
  aspect-ratio: 380 / 532;
  transform-origin: 40.263% 39.85%;
  will-change: transform;
  pointer-events: none;
}

.hand-rig.is-missing {
  display: none;
}

.hand-rig picture,
.hand-rig img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hand-rig img {
  user-select: none;
}

/* The camera stays opaque underneath; only the voucher fades, so the hand never turns see-through. */
.hand-voucher {
  opacity: 0;
}

/* The fade only once hero.js runs (it sets data-motion): without JavaScript WebKit ran it once at first
   paint, so something moved with no way to pause it (Paddy, 14 Nov 2026). */
.circle[data-motion] .hand-voucher {
  transition: opacity var(--hand-swap) ease-out;
}

.circle[data-state="voucher"] .hand-voucher {
  opacity: 1;
}

/* Brands band (1485:32) */
.brands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 64px 44px;
  background: var(--mint);
}

.brands-tagline {
  font: 500 15px/22px var(--font-head);
  letter-spacing: -0.2px;
  color: var(--muted);
}

.brands-tagline strong,
.brands-tagline b {
  font-weight: 700;
}

.brands-tagline strong {
  color: var(--ink);
  text-decoration: underline 2px var(--green);
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
}

.brands-divider {
  width: 1px;
  height: 16px;
  background: var(--divider);
}

.brands-list {
  font: 600 14px/22px var(--font-head);
  word-spacing: 2px;
}

.brands-list .sep {
  margin: 0 3px;
  color: var(--cat-dot);
}

.beyond {
  font-weight: 500;
  color: var(--muted);
}

/* Section headings */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.eyebrow {
  font: 700 16px/normal var(--font-head);
  color: var(--blue);
}

.how h2 {
  font: 500 52px/normal var(--font-head);
  letter-spacing: -2.5px;
}

/* How it works (1469:32) */
.how {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 104px 64px 120px;
}

.cards {
  display: flex;
  gap: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 400px;
  height: 560px;
  padding: 32px 32px 0;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: 16px;
}

.card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 132px;
}

.step-pill {
  padding: 5px 10px;
  font: 600 12px/normal var(--font-head);
  letter-spacing: 0.3px;
  background: var(--green);
  border-radius: 100px;
}

.card h3 {
  font: 600 22px/30px var(--font-head);
  letter-spacing: -0.3px;
}

.card-visual {
  position: relative;
  flex: 1;
}

.phone {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.phone-1 {
  width: 206px;
  height: 399px;
  object-fit: cover;
}

.phone-2 {
  width: 214px;
  height: 381px;
  object-fit: cover;
}

/* Figma crops the wallet screenshot inside a 252 x 411.5 frame (1469:53). */
.phone-3 {
  top: 0;
  width: 252px;
  height: 411.5px;
  overflow: hidden;
}

.phone-3 img {
  position: absolute;
  top: -14.72%;
  left: -10.67%;
  width: 121.35%;
  max-width: none;
  height: 133.02%;
}

.chip,
.no-posting {
  position: absolute;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 999px;
}

.chip {
  top: 70px;
  left: calc(50% - 103px - 71px);
  gap: 6px;
  padding: 6px 12px 6px 11px;
  font: 600 12px/normal var(--font-head);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
}

.chip-dot {
  width: 6px;
  height: 6px;
  background: var(--blue);
  border-radius: 50%;
}

.no-posting {
  top: 294px;
  left: calc(50% - 103px - 22px);
  gap: 8px;
  padding: 8px 14px 8px 12px;
  font: 600 13px/normal var(--font-head);
  color: var(--white);
  background: var(--blue);
  box-shadow: 0 6px 16px rgb(32 0 255 / 28%);
}

/* Your terms + final CTA (1471:41) */
.terms {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 104px 64px 112px;
  background: var(--mint);
}

.terms h2 {
  font: 500 44px/normal var(--font-head);
  letter-spacing: -2px;
  text-align: center;
}

.strip {
  display: flex;
  width: 100%;
  max-width: 1312px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.strip li {
  display: flex;
  flex: 1 1 0;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 28px 24px;
}

.strip li + li {
  border-left: 1px solid var(--hair);
}

.strip img {
  flex: none;
}

.strip div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.strip h3 {
  font: 600 17px/24px var(--font-head);
  letter-spacing: -0.2px;
}

.strip p {
  font: 400 15px/22px var(--font-head);
  color: var(--muted);
}

.final-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
}

.go {
  padding: 18px 34px;
  font-size: 16px;
  color: var(--button);
  background: var(--green);
  box-shadow: 6px 6px 0 var(--blue);
}

.final-caption {
  font: 400 14px/normal var(--font-body);
  color: var(--muted);
  text-align: center;
}

/* Footer (1460:58, mobile 1461:67) */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 12px 64px;
  font-size: 12px;
  line-height: normal;
  background: #000;
}

.copyright {
  font-family: var(--font-body);
  color: var(--footer-grey);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
  font: 500 12px/normal var(--font-head);

  /* Each label stays on one line; with "Pause animations" added, a phone's footer wraps the items onto a
     second row instead of breaking labels in two (Proposed, 14 Nov 2026). */
  white-space: nowrap;
}

.site-footer a {
  color: var(--white);
  text-decoration: none;
  transition: color 0.15s;
}

/* "Cookie settings" reopens the banner and "Pause animations" pauses the page's animations, so they are
   buttons that look like the footer links (INTERACTIONS 7, 2.8). */
.cookie-settings,
.pause-animations {
  font: inherit;
  color: var(--white);
  cursor: pointer;
  background: none;
  border: 0;
  transition: color 0.15s;
}

/* Consent banner (SPEC 3.6, INTERACTIONS 8; look approved by Paddy, 13 Nov 2026, step 3 part 4). Non-modal card, bottom left;
   full width less the gutters on phones. Accept and Reject look exactly alike (equal weight). */
.consent-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(440px, calc(100vw - 48px));
  padding: 20px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--blue);
}

.consent-banner[hidden],
.cookie-settings-item[hidden],
.pause-animations-item[hidden] {
  display: none;
}

.consent-banner-text {
  font: 400 14px/20px var(--font-body);
}

.consent-banner-buttons {
  display: flex;
  gap: 12px;
}

.consent-choice {
  flex: 1 1 0;
  padding: 12px 16px;
  font: 700 15px/normal var(--font-head);
  color: var(--ink);
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

/* While the banner shows, the page can scroll far enough that it never hides the footer. */
body.has-consent-banner {
  padding-bottom: var(--consent-banner-space, 0);
}

/* Hover only where hover exists (INTERACTIONS 1, 5, 7) */
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover {
    color: var(--white);
    background: var(--ink);
  }

  .switch:hover {
    text-decoration: underline;
  }

  .cta:hover,
  .go:hover {
    transform: translate(3px, 3px);
  }

  .cta:hover {
    box-shadow: 3px 3px 0 var(--green);
  }

  .go:hover {
    box-shadow: 3px 3px 0 var(--blue);
  }

  .site-footer a:hover {
    color: var(--green);
  }

  .cookie-settings:hover,
  .pause-animations:hover {
    color: var(--green);
  }

  .consent-choice:hover {
    color: var(--white);
    background: var(--ink);
  }
}

.cta:active,
.go:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 transparent;
}

/* Between desktop and mobile: let the fixed Figma widths shrink. */
@media (width <= 1340px) {
  .cards {
    width: 100%;
    max-width: 1248px;
  }

  .card {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

/* Mobile (Figma "Mobile - Waitlist (390)" 1461:32; breakpoint from INTERACTIONS 2.3) */
@media (width <= 900px) {
  :root {
    --circle: min(360px, calc(100vw - 40px));
  }

  /* Clear of the bottom safe area (home indicator, in-app browser bars; Paddy, 13 Nov 2026).
     The viewport meta has viewport-fit=cover, so env() is the real inset on iPhones. */
  .consent-banner {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 16px;
    width: auto;
  }

  .desktop-only {
    display: none;
  }

  /* Sticky mobile nav (Figma 1508:32, note 1508:52). Past the hero it shrinks from 60.3 to 52 px.
     The header keeps its height in the page and shrinks with transforms only, so nothing below it
     moves (no layout shift) and only transform and opacity animate (INTERACTIONS 1). */
  .site-header {
    --nav-shrink: 0.2s;
    --swap-fade: 0.15s;
    --swap-delay: 0.08s;

    position: sticky;
    top: 0;
    z-index: 20;
    height: 60.3px;
    padding: 0 20px;
    transition: transform var(--nav-shrink) ease, box-shadow var(--nav-shrink) ease;
  }

  .brand {
    flex: 1;
    justify-content: space-between;
    transition: transform var(--nav-shrink) ease;
  }

  .logo img {
    transform-origin: left center;
    transition: transform var(--nav-shrink) ease;
  }

  .badge {
    transition: opacity var(--swap-fade) ease;
  }

  .nav-cta {
    position: absolute;
    top: 50%;
    right: 20px;
    padding: 8px 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    transition: opacity var(--swap-fade) ease, visibility 0s linear var(--swap-fade);
  }

  .nav-cta:hover {
    transform: translateY(-50%);
  }

  .cta-long {
    display: none;
  }

  .cta-short {
    display: inline;
  }

  .past-hero .site-header {
    box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
    transform: translateY(-8.3px);
  }

  /* Recentre the contents in the 52 px that stays on screen, and the logo at 80% (26 px tall). */
  .past-hero .brand,
  .past-hero .nav-cta {
    translate: 0 4.15px;
  }

  .past-hero .logo img {
    transform: scale(0.8);
  }

  .past-hero .badge {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--swap-fade) ease var(--swap-delay);
  }

  .past-hero .nav-cta {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--swap-fade) ease var(--swap-delay), visibility 0s linear var(--swap-delay);
  }

  .hero-band {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .hero {
    gap: 20px;
    max-width: none;
    padding: 36px 20px 28px;
  }

  .hero h1 {
    font-size: 40px;
    line-height: 44px;
    letter-spacing: -1.6px;
  }

  .hero-body {
    font-size: 17px;
    line-height: 26px;
  }

  .join {
    gap: 12px;
  }

  .field-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .field {
    width: 100%;
  }

  .consent,
  .form-error,
  .noscript-note {
    padding-left: 4px;
  }

  .no-app {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .no-app p {
    line-height: 22px;
  }

  .wallets {
    gap: 8px;
  }

  .visual {
    height: 400px;
    padding-top: 20px;
    align-items: flex-start;
  }

  .brands {
    flex-direction: column;
    gap: 12px;
    padding: 8px 20px 40px;
    text-align: center;
  }

  .brands-divider {
    display: none;
  }

  .how {
    gap: 32px;
    padding: 56px 20px 64px;
  }

  .how h2 {
    font-size: 34px;
    letter-spacing: -1.4px;
  }

  .cards {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .card {
    flex: none;
    width: 100%;
    height: 500px;
    padding: 28px 24px 0;
  }

  .card-copy {
    height: 116px;
  }

  .card h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .chip {
    left: calc(50% - 103px - 45px);
  }

  .no-posting {
    top: 280px;
    left: calc(50% - 103px - 30px);
  }

  .terms {
    gap: 28px;
    padding: 56px 20px 64px;
  }

  .terms h2 {
    font-size: 32px;
    letter-spacing: -1.2px;
  }

  .strip {
    flex-direction: column;
  }

  .strip li {
    padding: 20px;
  }

  .strip li + li {
    border-top: 1px solid var(--hair);
    border-left: 0;
  }

  .final-cta {
    align-self: stretch;
  }

  .go {
    width: 100%;
  }

  .site-footer {
    flex-direction: column-reverse;
    justify-content: space-between;
    gap: 4px;
    min-height: 79px;
    padding: 20px 20px 28px;
  }
}

/* Reduced motion. Keep this block LAST: rules later in the file with the same specificity
   (the mobile nav transitions) would otherwise win and keep the motion (part 7 test). */
@media (prefers-reduced-motion: reduce) {
  .cta,
  .go {
    transition: background 0.15s, color 0.15s;
  }

  .cta:hover,
  .go:hover,
  .cta:active,
  .go:active {
    transform: none;
  }

  /* The nav still shrinks, but at once; the badge and Join still crossfade. */
  .site-header,
  .brand,
  .logo img {
    transition: none;
  }

  .spinner {
    animation: none;
  }

  /* INTERACTIONS 2.6: no motion; hero.js shows the voucher, still, from the start, with no fade. */
  .circle[data-motion] .hand-voucher {
    transition: none;
  }
}