/* ============================================================
   OPERATOR GOODS CO — styles.css
   Aesthetic: "Operator Standard" — field goods on workshop paper.
   Reads every value from css/variables.css. Defines no new hues:
   the few derived values below are existing tokens at reduced alpha.
   ============================================================ */

/* ---- Derived values (alpha variants of existing tokens only) -------- */
:root {
  --on-dark:         #ffffff;
  --on-dark-soft:    rgba(255, 255, 255, 0.86);
  --on-dark-muted:   rgba(255, 255, 255, 0.68);
  --hairline:        rgba(87, 94, 115, 0.22);
  --hairline-strong: rgba(87, 94, 115, 0.40);
  --hairline-light:  rgba(255, 255, 255, 0.22);
  --focus-ring:      var(--color-field);
}

/* ============================================================
   1. RESET & BASE
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
}

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* [hidden] is a UA-level style, so any class that sets an explicit display
   (.btn is inline-flex, .form__skip is block) silently defeats it. Without
   this the form shows every step button at once. */
[hidden] { display: none !important; }

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

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

/* Light focus ring on every dark surface */
.nav :focus-visible,
.nav-overlay :focus-visible,
.band--ink :focus-visible,
.band--field :focus-visible,
.signup :focus-visible {
  outline-color: var(--color-paper);
}
.signup__card :focus-visible { outline-color: var(--focus-ring); }

::selection { background: var(--color-field); color: var(--color-paper); }

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

.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-200%);
  background: var(--color-ink); color: var(--color-paper);
  padding: 12px 20px; border-radius: var(--radius-md);
  font-size: var(--text-body-sm); font-weight: var(--fw-medium);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================
   2. LAYOUT PRIMITIVES
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.section { padding-block: var(--section-gap); }

/* Two sections sitting on the same canvas put 120px of tail against 120px of
   lead-in, and 240px of empty page reads as a hole rather than as rhythm. A
   colour change marks its own boundary, so only same-canvas neighbours collapse. */
.section + .section { padding-top: 0; }
/* The footer brings its own 120px lead-in. */
main > .section:last-child { padding-bottom: 0; }
/* The brand strip carries its own 64px and hairline rules, so its neighbours
   trim their facing padding to keep both gaps at one section rhythm. */
.section:has(+ .brand-strip) { padding-bottom: var(--spacing-56); }
.brand-strip + .section { padding-top: var(--spacing-56); }
.section--tight { padding-block: clamp(48px, 7vw, 80px); }

.section__head { max-width: var(--measure); }
.section__head + * { margin-top: var(--spacing-56); }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: var(--spacing-8);
}
.eyebrow--light  { color: var(--on-dark-muted); }
.eyebrow--asis   { text-transform: none; }
.eyebrow--accent { color: var(--color-field-deep); }

.h-display, .h-lg, .h, .h-sm {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}
.h-display {
  font-size: var(--text-display-fluid);
  line-height: var(--leading-display);
  letter-spacing: -0.05em;
}
.h-lg {
  font-size: clamp(32px, 4.4vw, 45px);
  line-height: var(--leading-heading-lg);
  letter-spacing: -0.038em;
}
.h {
  font-size: clamp(28px, 3.2vw, 32px);
  line-height: var(--leading-heading);
  letter-spacing: -0.028em;
}
.h-sm {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: -0.025em;
}

.lede {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  max-width: 56ch;
}
.body   { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); max-width: var(--measure); }
.caption{ font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-slate); }
.caption--light { color: var(--on-dark-muted); }

.on-dark      { color: var(--on-dark); }
.on-dark-soft { color: var(--on-dark-soft); }

/* ============================================================
   4. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--spacing-8);
  min-height: 46px;
  padding: 12px 30px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-paper);
  box-shadow: var(--shadow-sm-2);
}
.btn--primary:hover { background: var(--color-field); }

.btn--accent {
  background: var(--color-field);
  color: var(--color-paper);
  box-shadow: var(--shadow-sm-2);
}
.btn--accent:hover { background: var(--color-field-deep); }

/* Ghost on dark surfaces */
.btn--ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--color-paper);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--color-paper); }

/* Ghost on light surfaces */
.btn--ghost-ink { border-color: var(--color-ink); color: var(--color-ink); }
.btn--ghost-ink:hover { background: var(--color-ink); color: var(--color-paper); }

.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--spacing-16); }

/* ============================================================
   5. TAGS
   ============================================================ */

.tag-list { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }

.tag {
  display: inline-block;
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--color-bone);
  color: var(--color-ink);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 1px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}
.tag--light {
  background: transparent;
  border-color: var(--hairline-light);
  color: var(--on-dark-soft);
}

/* ============================================================
   6. STICKY NAV
   ============================================================ */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-height);
  display: flex; align-items: center;
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.nav--solid { background: var(--color-ink); box-shadow: var(--shadow-sm); }

/* While the nav is transparent it sits over photography, so it carries its own
   wash rather than darkening the whole hero. Alpha is set from measured hero
   luminance: the brightest pixel behind the bar needs a>=0.83 for Paper text
   to clear 4.5:1, so the ramp holds 0.86 through the full 64px bar. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 150px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 13, 52, 0.90) 0px,
    rgba(0, 13, 52, 0.86) 64px,
    rgba(0, 13, 52, 0) 150px);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav--solid::before { opacity: 0; }

.nav__inner {
  display: flex; align-items: center; gap: var(--spacing-24);
  width: 100%;
}

.nav__logo { display: flex; align-items: center; margin-right: auto; }
/* Compact two-line lockup: the full lockup's tagline lines turn to mush
   below about 60px, so the nav carries badge + name only. */
.nav__logo img {
  height: clamp(28px, 3vw, 36px);
  width: auto;
  display: block;
}

.nav__links { display: flex; align-items: center; gap: var(--spacing-32); }
.nav__link {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-paper);
  opacity: 0.86;
  padding-block: 4px;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav__link:hover { opacity: 1; }

.nav .btn--accent { min-height: 40px; padding: 9px 20px; font-size: 13px; letter-spacing: 0.06em; white-space: nowrap; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  align-items: center; justify-content: center;
  color: var(--color-paper);
}
.nav__toggle span {
  display: block; position: relative;
  width: 22px; height: 1.5px; background: currentColor;
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 22px; height: 1.5px; background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after  { top: 7px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* Mobile overlay */
.nav-overlay {
  position: fixed; inset: 0; z-index: 99;
  background: var(--color-ink);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-height) + 32px) clamp(20px, 5vw, 40px) 40px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.nav-overlay__links { display: flex; flex-direction: column; gap: var(--spacing-24); }
.nav-overlay__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-heading-sm);
  letter-spacing: -0.025em;
  color: #ffffff;
}
.nav-overlay .btn { margin-top: var(--spacing-40); align-self: flex-start; }
.nav-overlay__meta {
  margin-top: auto;
  padding-top: var(--spacing-40);
  color: var(--on-dark-muted);
  font-size: var(--text-caption);
}

/* ============================================================
   7. HERO  (split: copy left, product montage right — brief §3)
   ============================================================ */

/* Solid navy surface, so hero copy no longer depends on a scrim over
   photography for its contrast. The montage sits beside the copy instead
   of behind it, which is what the client brief asks for and removes the
   whole class of legibility problems that treatment had. */
.hero {
  background: var(--color-ink-deep);
  color: #ffffff;
  /* No overflow:hidden here. It creates a scroll container, which silently
     disables position:sticky on the phone CTA row. The hero has nothing to
     clip: the montage is a positioned child bounded by the section. */
  position: relative;
}
/* Stacked by default. The two-column split only switches on at 1024, because
   below that the copy column gets too narrow and the display headline breaks
   into five lines against a shrunken montage. */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 56px);
  align-items: center;
  padding-block: calc(var(--nav-height) + clamp(56px, 8vw, 104px)) clamp(56px, 8vw, 104px);
}
@media (min-width: 1024px) {
  .hero__inner {
    /* Copy gets the wider share: the two CTA labels come from the brief and are
       long, and they need to sit on one line. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.88fr);
    gap: clamp(32px, 4vw, 64px);
  }
}
.hero__content { max-width: 46rem; }
.hero__title { color: #ffffff; margin-bottom: var(--spacing-24); }
.hero__lede  { color: var(--on-dark-soft); max-width: 46ch; }
.hero__lede + .btn-row { margin-top: var(--spacing-40); }
.hero .btn-row .btn { padding-inline: clamp(18px, 1.9vw, 28px); }
.hero__support {
  margin-top: var(--spacing-16);
  font-size: var(--text-body-sm);
  color: var(--on-dark-soft);
}
.hero__support a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero__support a:hover { color: var(--on-dark-soft); }
.hero__note {
  margin-top: var(--spacing-32);
  color: var(--on-dark-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
.hero__figure { margin: 0; }
/* If the montage is missing the grid collapses to one column. */
.hero__inner:has(.hero__figure[style*="none"]) { grid-template-columns: minmax(0, 1fr); }
.hero__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

/* ============================================================
   7b. TRUST / VALUE STRIP
   ============================================================ */
.value-strip {
  background: var(--color-ink);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.value-strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-16) var(--spacing-32);
  padding-block: var(--spacing-20);
}
.value-strip__item {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.82);
}

/* ============================================================
   7c. DECORATION METHODS
   ============================================================ */
.decoration {
  background: var(--color-ink);
  color: #ffffff;
  padding-block: var(--section-gap);
}
/* Head and tiles share one .container, so the heading's left edge lands on the
   first tile's left edge rather than floating on its own inset. */
.decoration__head { margin-bottom: var(--spacing-56); }
.decoration__head h2 { margin-bottom: var(--spacing-20); }
.decoration__body { color: var(--on-dark-soft); }

.decoration__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--element-gap);
}
.method__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-16);
  background: rgba(255, 255, 255, 0.06);
}
.method__name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-subheading);
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-bottom: var(--spacing-4);
}
.method__desc {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--on-dark-muted);
}

/* ============================================================
   8. TWO-WORLDS INTRO + FEATURE BANDS
   ============================================================ */

/* Reads as a section head like every other one on the page: eyebrow stacked
   above the line, left-aligned, symmetric padding so it sits centred in its
   Paper band. The statement runs the full measure rather than being capped
   narrow and leaving the right of the grid empty. */
/* The intro is a lead-in to the bands, not a section of its own: a full
   section-gap below it stacked onto the band's own 100px top padding, which
   read as a hole. The lead-out is tightened so the pair reads as one unit. */
.worlds-intro { padding-block: var(--section-gap) clamp(40px, 6vw, 64px); }
.worlds-intro__line {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(28px, 3.9vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.034em;
  text-wrap: pretty;
  max-width: none;
}

.band { padding-block: clamp(64px, 9vw, 100px); }
/* Band A — the dark feature surface. */
.band--ink { background: var(--color-ink-deep); color: #ffffff; }
/* Band B — the two worlds separate by light/dark rather than by a second
   hue, which keeps red reserved for the one conversion moment. */
.band--field { background: var(--surface-canvas); color: var(--color-ink); }
.band--field .band__body { color: var(--color-slate); }
.band--field .eyebrow--light { color: var(--color-field-deep); }
.band--field .band__proof,
.band--field .band__brands { border-top-color: var(--hairline); color: var(--color-slate); }
.band--field .band__brands strong { color: var(--color-ink); }
.band--field .tag--light { border-color: var(--hairline-strong); color: var(--color-ink); background: var(--color-bone); }
.band--field .btn--ghost { border-color: var(--color-ink); color: var(--color-ink); }
.band--field .btn--ghost:hover { background: var(--color-ink); color: #ffffff; }
.band--field .brand-mark__logo { filter: grayscale(1); opacity: 0.92; }
.band--field .brand-mark__name { color: var(--color-ink); }

.band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.band__media { position: relative; }
.band__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
/* Band A carries the client's wide product lineup. Forcing it to 4:5 cropped
   items off both ends, so it keeps its own ratio and centres in the column. */
.band--ink .band__media img { aspect-ratio: auto; }
.band--reverse .band__media { order: 2; }

.band__title { margin-bottom: var(--spacing-20); }
.band__body  { color: var(--on-dark-soft); max-width: 46ch; }
.band__proof {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-12);
  margin-top: var(--spacing-20);
  padding-top: var(--spacing-20);
  border-top: 1px solid var(--hairline-light);
  max-width: 46ch;
}
.band__proof-marks { display: flex; align-items: center; gap: var(--spacing-16); }
.band__proof .brand-mark { color: var(--color-paper); font-weight: var(--fw-semibold); font-size: var(--text-caption); }
.band__proof-text {
  color: var(--on-dark-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
.band__brands {
  margin-top: var(--spacing-20);
  padding-top: var(--spacing-20);
  border-top: 1px solid var(--hairline-light);
  /* the label keeps a reading measure; the logo row gets the full column so
     the four marks sit on one line instead of orphaning the last one */
  max-width: none;
}
.band__brands-label {
  display: block;
  max-width: 46ch;
  color: var(--on-dark-muted);
  font-size: var(--text-caption);
  margin-bottom: var(--spacing-12);
}
.brand-mark-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-12) var(--spacing-20);
  color: var(--color-paper);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}
.band .tag-list { margin-top: var(--spacing-32); }
.band .btn-row  { margin-top: var(--spacing-32); }

/* ============================================================
   9. VALUE ROW (WHY US)
   ============================================================ */

.values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.value { border-top: 1px solid var(--hairline-strong); padding-top: var(--spacing-24); }
.value__icon { color: var(--color-ink); margin-bottom: var(--spacing-20); }
.value__icon svg { width: 28px; height: 28px; }
.value__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-subheading);
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-bottom: var(--spacing-12);
}
.value__body { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-slate); }

/* ============================================================
   9b. HOW IT WORKS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  counter-reset: step;
}
.step { border-top: 1px solid var(--hairline-strong); padding-top: var(--spacing-24); }
.step__num {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-sm);
  margin-bottom: var(--spacing-20);
}
.step:last-child .step__num { background: var(--color-field); }
.step__name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-subheading);
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-bottom: var(--spacing-12);
}
.step__desc { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-slate); }
.steps__note { margin-top: var(--spacing-40); max-width: var(--measure); }

/* ============================================================
   10. BRAND STRIP
   ============================================================ */

.brand-strip {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(40px, 6vw, 64px);
  text-align: center;
}
.brand-strip__label {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: var(--spacing-24);
}
/* Partner credit. Sits under the decorated-brands row because Wottoline is a
   supply partner, not a brand we decorate, and the two should not read as one
   list. */
.brand-strip__partner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--hairline);
}
.brand-strip__partner-label {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-slate);
}
.brand-strip__partner .brand-mark__logo { height: 26px; width: auto; max-width: 170px; }

.brand-strip__list {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(14px, 2.6vw, 36px);
}
.brand-strip__item {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: clamp(19px, 2.4vw, 26px);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* ---- Brand mark ---------------------------------------------------------
   One component for every place a third-party company is named. The logo slot
   stays hidden until the file genuinely decodes, so a mark that is missing or
   not yet authorised falls back to the company name as text instead of a
   broken image. Marks are normalised to one optical height per size and kept
   muted, per DESIGN_SYSTEM 4: a quiet row, not a loud logo wall. */
.brand-mark { display: inline-flex; align-items: center; }
.brand-mark__logo {
  display: none;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.9;
}
.brand-mark.has-logo .brand-mark__logo { display: block; }
.brand-mark.has-logo .brand-mark__name { display: none; }

/* The marks have wildly different aspect ratios (North Face 2.13:1 through
   Greyson 7.71:1), so height alone would let the wide wordmarks dominate.
   Each logo instead scales to fit a fixed box with object-fit: contain, which
   balances them optically and keeps doing so when official brand-kit files
   replace these. Source viewBoxes are trimmed to the artwork's real bounds. */
.brand-mark--lg .brand-mark__logo {
  width: clamp(92px, 10.5vw, 130px);
  height: clamp(26px, 2.8vw, 34px);
  max-width: none;
  object-fit: contain;
  object-position: center;
}
.brand-mark--md .brand-mark__logo {
  width: 104px;
  height: 26px;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}
.brand-mark--sm .brand-mark__logo { height: 20px; width: auto; max-width: 110px; }

/* Knock the artwork out to white on the dark surfaces only. Band B is now a
   light section, so it must NOT inherit this or the marks vanish. */
.band--ink .brand-mark__logo,
.signup .brand-mark__logo {
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

/* ============================================================
   11. SHOWCASE GRID
   ============================================================ */

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--element-gap);
}
.card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  box-shadow: var(--shadow-sm);
}
.card__media {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-16);
  background: var(--color-paper);
}
.card__name {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-4);
}
.card__desc { font-size: var(--text-caption); color: var(--color-slate); }
.showcase__note { margin-top: var(--spacing-24); }

/* ============================================================
   11b. QUARTERLY DROPS
   ============================================================ */
.drops {
  background: var(--color-ink-deep);
  color: #ffffff;
  padding-block: clamp(56px, 8vw, 88px);
}
.drops__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.drops__title { margin-bottom: var(--spacing-16); }
.drops__body { color: var(--on-dark-soft); max-width: 54ch; }

/* ============================================================
   11c. FAQ
   ============================================================ */
.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-20);
  min-height: 44px;
  padding-block: var(--spacing-20);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-subheading);
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-field-deep); }
.faq__icon {
  flex: none;
  width: 20px; height: 20px;
  color: var(--color-slate);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a {
  padding-bottom: var(--spacing-24);
  max-width: var(--measure);
}
.faq__a p {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-slate);
}
.faq__note { margin-top: var(--spacing-32); }
.faq__note a { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   12. GIVEAWAY / SIGN-UP
   ============================================================ */

.signup {
  background: var(--surface-accent);
  color: #ffffff;
  padding-block: var(--section-gap);
}
.signup__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.signup__title { margin-bottom: var(--spacing-20); }
.signup__value { color: var(--on-dark-soft); max-width: 42ch; }
.signup__list { margin-top: var(--spacing-32); display: grid; gap: var(--spacing-12); }
.signup__list li {
  display: flex; gap: var(--spacing-12); align-items: flex-start;
  color: var(--on-dark-soft);
  font-size: var(--text-body-sm);
  padding-top: var(--spacing-12);
  border-top: 1px solid var(--hairline-light);
}
.signup__list svg { flex: none; width: 18px; height: 18px; margin-top: 3px; }

.signup__card {
  background: var(--surface-card);
  color: var(--color-ink);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.4vw, 40px);
  box-shadow: var(--shadow-sm);
}

/* ---- Form controls ---- */
.form__grid { display: grid; gap: var(--spacing-20); }
.form__row { display: grid; gap: var(--spacing-20); grid-template-columns: repeat(2, minmax(0, 1fr)); }

.field__label {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  margin-bottom: var(--spacing-8);
}
.field__req { color: var(--color-field-deep); }

.field__input {
  width: 100%;
  background: var(--color-paper);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: var(--text-body-sm);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field__input::placeholder { color: var(--color-slate); opacity: 0.72; }
.field__input:hover { border-color: var(--color-slate); }

select.field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2357534a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
}
textarea.field__input { resize: vertical; min-height: 84px; }

.field__help { margin-top: var(--spacing-8); font-size: 13px; color: var(--color-slate); }
.field__error {
  display: none;
  margin-top: var(--spacing-8);
  font-size: 13px;
  color: var(--color-field-deep);
  font-weight: var(--fw-medium);
}
.field.has-error .field__error { display: block; }
.field.has-error .field__input { border-color: var(--color-field-deep); border-width: 1.5px; }

/* Fieldsets */
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset__legend {
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  margin-bottom: var(--spacing-12);
  padding: 0;
}
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-8) var(--spacing-16); }

/* The whole row is the target, not just the 18px box. 44px minimum, per the
   client brief and because this form gets filled on a phone at a booth. */
.check {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-caption);
  line-height: 1.45;
  min-height: 44px;
  padding-block: var(--spacing-4);
  cursor: pointer;
}
.check--consent { align-items: flex-start; padding-block: var(--spacing-8); }
.check input {
  flex: none;
  appearance: none;
  width: 18px; height: 18px; margin: 1px 0 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 3px;
  background: var(--color-paper);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.check input:checked {
  background: var(--color-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5 5.5 10.5 11.5 4' fill='none' stroke='%23ede7d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-color: var(--color-field);
}
.field.has-error .check input { border-color: var(--color-field-deep); }

.form__divider { height: 1px; background: var(--hairline); margin-block: var(--spacing-4); }

/* ---- Progressive steps ---- */
.form__progress {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: var(--spacing-20);
  padding-bottom: var(--spacing-12);
  border-bottom: 1px solid var(--hairline);
}
.form__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.form__nav {
  display: flex;
  gap: var(--spacing-12);
  align-items: center;
  margin-top: var(--spacing-24);
}
.form__nav .btn--block { width: auto; flex: 1; }
.form__back { flex: none; }
.form__skip {
  display: block;
  width: 100%;
  margin-top: var(--spacing-12);
  padding: var(--spacing-8);
  min-height: 44px;
  font-size: var(--text-caption);
  color: var(--color-slate);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form__skip:hover { color: var(--color-ink); }
.form__giveaway {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-slate);
  margin-bottom: var(--spacing-12);
}
.form__giveaway strong { color: var(--color-ink); font-weight: var(--fw-semibold); }
.form__giveaway + .check a { text-decoration: underline; text-underline-offset: 2px; }

.form__submit { margin-top: var(--spacing-8); }
.form__fine { margin-top: var(--spacing-16); font-size: 13px; line-height: 1.55; color: var(--color-slate); }
.form__fine a { text-decoration: underline; text-underline-offset: 2px; }

.form__status {
  display: none;
  margin-top: var(--spacing-16);
  padding: 12px 14px;
  border: 1px solid var(--color-field-deep);
  border-radius: var(--radius-md);
  font-size: var(--text-caption);
  color: var(--color-field-deep);
}
.form__status.is-visible { display: block; }

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

/* Success state */
.signup__success { display: none; }
.signup__success.is-visible { display: block; }
.signup__success .check-mark {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-field);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--spacing-20);
}
.signup__success .check-mark svg { width: 22px; height: 22px; }
.signup__success h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-heading-sm);
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-bottom: var(--spacing-12);
}
.signup__success p { font-size: var(--text-body-sm); color: var(--color-slate); }
.signup__success p + p { margin-top: var(--spacing-12); }

/* ============================================================
   13. FOOTER + OVERSIZED WORDMARK
   ============================================================ */

.footer { background: var(--surface-canvas); padding-top: var(--section-gap); }
.footer__brand { padding-bottom: clamp(32px, 5vw, 48px); }
/* Big enough that the lockup's tagline lines stay legible; below roughly
   60px they turn to mush, which is why the nav uses the compact mark. */
.footer__logo { height: clamp(56px, 7vw, 84px); width: auto; display: block; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(48px, 7vw, 80px);
}
.footer__links li { border-top: 1px solid var(--hairline); }
.footer__links li:last-child { border-bottom: 1px solid var(--hairline); }
.footer__links a {
  display: block;
  padding-block: 11px;
  font-size: var(--text-body-sm);
  letter-spacing: -0.02em;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--color-field-deep); }

.footer__contact { font-size: var(--text-body-sm); line-height: 1.9; }
.footer__contact a { display: inline-block; padding-block: var(--spacing-4); }
.footer__contact a:hover { color: var(--color-field-deep); }
.footer__disclaimer {
  margin-top: var(--spacing-32);
  padding-top: var(--spacing-20);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--color-slate);
  max-width: 60ch;
}

.wordmark { padding-inline: clamp(16px, 2.2vw, 32px); }
.wordmark svg { width: 100%; height: auto; display: block; }
.wordmark text {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 104px;
  letter-spacing: -0.05em;
  fill: var(--color-ink);
}

.footer__base {
  display: flex; flex-wrap: wrap; gap: var(--spacing-16);
  justify-content: space-between;
  padding-block: var(--spacing-24) var(--spacing-32);
  font-size: 13px;
  color: var(--color-slate);
}

/* ============================================================
   14. MOTION
   ============================================================ */

/* Reveals are OPT-IN. Content is visible by default and only hidden
   once .js-reveal is set by the inline script in <head>, so a failed or
   blocked main.js can never leave a section blank. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.js-reveal .reveal--d1 { transition-delay: 60ms; }
.js-reveal .reveal--d2 { transition-delay: 120ms; }
.js-reveal .reveal--d3 { transition-delay: 180ms; }

/* ============================================================
   15. RESPONSIVE
   ============================================================ */

@media (min-width: 1024px) {
  .showcase-grid,
  .decoration__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tablet: the desktop nav still shows here, so it has to fit without wrapping,
   and the hero copy spans most of the width, so the wash goes bottom-weighted. */
@media (max-width: 1023px) {
  .nav__inner { gap: var(--spacing-16); }
  .nav__links { gap: var(--spacing-20); }
  .nav__link { font-size: 13px; }
  .nav .btn--accent { padding: 9px 16px; font-size: 12px; letter-spacing: 0.04em; }
}

@media (max-width: 1023px) {
  .hero__content { max-width: none; }
}

@media (max-width: 1023px) {
  .values,
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .drops__inner { grid-template-columns: minmax(0, 1fr); }
  .signup__grid { grid-template-columns: minmax(0, 1fr); }
  /* Booth priority: the form comes first on small screens */
  .signup__card { order: -1; }
}

@media (max-width: 767px) {
  .nav__links, .nav__inner > .btn { display: none; }
  .nav__toggle { display: flex; }

  /* Phone hero: the montage becomes a full-bleed background rather than a
     stacked block, the copy sits over it, and the two CTAs pin to the bottom
     of the screen so they are reachable the moment the page lands. */
  .hero { min-height: 100svh; }

  /* The montage is square. Stretched over a tall phone viewport, cover crops
     away half the composition, so the background band is sized to roughly the
     viewport width and the group reads whole. It fades into the hero navy,
     which the copy then sits on. */
  .hero__figure {
    position: absolute;
    inset: 0 0 auto 0;
    height: clamp(280px, 90vw, 440px);
    margin: 0;
    z-index: 0;
  }
  .hero__figure picture { display: block; width: 100%; height: 100%; }
  .hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    border-radius: 0;
  }
  .hero__figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(0, 13, 52, 0.78) 0%,
      rgba(0, 13, 52, 0.16) 16%,
      rgba(0, 13, 52, 0.10) 46%,
      rgba(0, 13, 52, 0.72) 82%,
      rgba(0, 13, 52, 1) 100%);
  }

  /* The transparent nav now sits over the montage, and white-on-jacket only
     reached 3.1:1. A wash behind the bar alone fixes it without darkening the
     whole top of the image. It fades out once the nav goes solid. */
  .nav::before {
    content: "";
    position: absolute;
    inset: 0 0 -28px 0;
    background: linear-gradient(180deg,
      rgba(0, 13, 52, 0.92) 0%,
      rgba(0, 13, 52, 0.62) 46%,
      rgba(0, 13, 52, 0) 100%);
    transition: opacity var(--dur-fast) var(--ease-out);
    pointer-events: none;
  }
  .nav--solid::before { opacity: 0; }
  .nav__inner { position: relative; z-index: 1; }

  .hero__inner {
    position: static;
    display: flex;
    min-height: 100svh;
    padding-block: calc(clamp(280px, 90vw, 440px) - 24px) var(--spacing-20);
  }
  .hero__content {
    position: relative;
    z-index: 1;
    max-width: none;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .hero__title { order: 1; }
  .hero__lede    { order: 2; }
  .hero__support { order: 3; }
  .hero__note    { order: 4; }

  /* Pinned CTA bar. It needs its own ground: without one, whatever scrolls
     underneath shows straight through the gap between the two buttons. The
     negative inline margin takes it edge to edge. */
  .hero .btn-row {
    order: 5;
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    margin-inline: calc(-1 * clamp(20px, 5vw, 40px));
    padding: var(--spacing-24) clamp(20px, 5vw, 40px) var(--spacing-16);
    flex-direction: column;
    gap: var(--spacing-12);
    background: linear-gradient(180deg,
      rgba(0, 13, 52, 0) 0%,
      rgba(0, 13, 52, 0.94) 26%,
      rgba(0, 13, 52, 1) 100%);
  }
  .hero .btn-row .btn { padding-inline: var(--spacing-24); }
  .hero__note { margin-top: var(--spacing-16); }


  .band__grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-40); }
  .band--reverse .band__media { order: 0; }
  .band__media img { aspect-ratio: 5 / 4; }

  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  /* Free-wrapping left a ragged 3 + 1; a fixed 2x2 reads deliberate. */
  .value-strip__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-12) var(--spacing-16);
  }
}

@media (max-width: 599px) {
  /* Four marks across is too tight on a phone and 3+1 reads accidental,
     so the strip becomes a deliberate 2x2 with larger marks. */
  .brand-strip__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-24) var(--spacing-16);
  }
  .brand-strip__item { justify-content: center; }
  .brand-mark--lg .brand-mark__logo { width: 100%; max-width: 134px; height: 30px; }

  .values,
  .steps { grid-template-columns: minmax(0, 1fr); }
  .showcase-grid,
  .decoration__grid { grid-template-columns: minmax(0, 1fr); }
  .card__media,
  .method__media { aspect-ratio: 5 / 4; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .check-grid { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; }
  .form__nav .btn { width: auto; }
  .btn-row { gap: var(--spacing-12); }
  .hero__lede { font-size: var(--text-body-sm); }
}

@media (min-width: 1600px) {
  .hero__content { max-width: 720px; }
}

/* ============================================================
   16. REDUCED MOTION
   ============================================================ */

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

@media print {
  .nav, .nav-overlay { display: none; }
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce {
  position: relative;
  z-index: 101;
  background: var(--color-field);
  color: #ffffff;
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-8) var(--spacing-16);
  padding-block: 11px;
  text-align: center;
}
.announce__label {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  opacity: 0.86;
}
.announce__link {
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.announce__link:hover { text-decoration-thickness: 2px; }

/* ============================================================
   LIGHT NAV  (sits under the announcement bar, on the light canvas)
   ============================================================ */
.nav--light {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav--light::before { display: none; }
.nav--light .nav__link { color: var(--color-ink); opacity: 0.78; }
.nav--light .nav__link:hover { opacity: 1; }
.nav--light .nav__toggle { color: var(--color-ink); }
.nav--light.nav--solid { box-shadow: var(--shadow-sm); }

/* ============================================================
   LIGHT HERO
   ============================================================ */
.hero--light {
  background: var(--color-bone);
  color: var(--color-ink);
  min-height: 0;
}
.hero--light .hero__title { color: var(--color-ink); }
.hero--light .hero__lede { color: var(--color-slate); }
.hero--light .hero__support { color: var(--color-slate); }
.hero--light .hero__support a { color: var(--color-ink); }
.hero--light .hero__note { color: var(--color-steel); }
.hero--light .hero__eyebrow { margin-bottom: var(--spacing-12); }
.hero--light .btn--ghost {
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.hero--light .btn--ghost:hover { background: var(--color-ink); color: #ffffff; }

/* The montage is shot on navy, so it sits in a rounded card rather than
   bleeding into the light canvas. */
.hero--light .hero__figure img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.hero--light .hero__inner {
  padding-block: clamp(48px, 7vw, 88px) clamp(56px, 8vw, 104px);
}

/* ============================================================
   WHITE-SPACE PASS
   The page carried six dark surfaces, which read heavy and left no air.
   Decoration and Drops come back to the light canvas; the two dark moments
   that remain (Private Stores and the sign-up) now land as deliberate
   punctuation rather than the default. Section rhythm opens up with them.
   ============================================================ */
:root { --section-gap: clamp(80px, 11vw, 148px); }

/* Decoration: light canvas, tiles carry the contrast instead of the band */
.decoration {
  background: var(--color-bone);
  color: var(--color-ink);
}
.decoration .eyebrow { color: var(--color-field-deep); }
.decoration__lede { color: var(--color-slate); }
.decoration__tile figcaption { color: var(--color-ink); }
.decoration__method { color: var(--color-ink); }
.decoration__result { color: var(--color-slate); }
.decoration__tile img { box-shadow: var(--shadow-md); }

/* Drops: light canvas with a hairline frame */
.drops {
  background: var(--surface-canvas);
  color: var(--color-ink);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.drops .eyebrow { color: var(--color-field-deep); }
.drops__body { color: var(--color-slate); }
.drops__item { border-top-color: var(--hairline); }
.drops__item-label { color: var(--color-ink); }
.drops__item-text { color: var(--color-slate); }
.drops .btn--ghost { border-color: var(--color-ink); color: var(--color-ink); }
.drops .btn--ghost:hover { background: var(--color-ink); color: #ffffff; }

/* Value strip: a quiet rule on the canvas, not a navy slab */
.value-strip {
  background: var(--color-bone);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.value-strip__item { color: var(--color-ink); }
.value-strip__item::before { background: var(--color-field); }

/* ============================================================
   BRAND TICKER
   ============================================================ */
.ticker-section {
  padding-block: var(--section-gap);
  background: var(--surface-canvas);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.ticker-section__head { margin-bottom: clamp(32px, 4vw, 48px); }

.ticker {
  /* full-bleed out of the container */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  gap: var(--spacing-16);
  animation: ticker-run 46s linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

.ticker__run {
  display: flex;
  gap: var(--spacing-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
@keyframes ticker-run { to { transform: translateX(calc(-50% - var(--spacing-8))); } }

.tile {
  position: relative;
  flex: none;
  width: clamp(148px, 15vw, 196px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bone);
  box-shadow: var(--shadow-sm);
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile__pill {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(10, 19, 50, 0.82);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: 5px 9px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.brand-strip__partner-note {
  font-size: var(--text-caption);
  color: var(--color-slate);
}

/* Motion is decorative: hold the marquee still and let it scroll by hand. */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ============================================================
   BENTO PRODUCT GRID
   Hero tile spans both rows; the rest fill a 2x2 to its right.
   ============================================================ */
.section__lede { color: var(--color-slate); margin-top: var(--spacing-16); }

.bento {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr 0.75fr;
  grid-template-rows: 260px 260px;
  gap: var(--spacing-16);
  margin-top: clamp(32px, 4vw, 48px);
}
.bento__cell {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-paper);
  box-shadow: var(--shadow-sm);
}
.bento__cell--hero { grid-row: 1 / 3; }
.bento__cell picture { display: block; width: 100%; height: 100%; }
.bento__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.bento__cell:hover img { transform: scale(1.03); }

.bento__cell figcaption {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bento__client,
.bento__tag {
  position: absolute;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bento__client {
  top: 12px;
  right: 12px;
  background: rgba(10, 19, 50, 0.78);
  color: #ffffff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.bento__tag {
  left: 12px;
  bottom: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-ink);
}

@media (max-width: 899px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 300px 200px 200px;
  }
  .bento__cell--hero { grid-column: 1 / 3; grid-row: auto; }
}
@media (max-width: 519px) {
  .bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: 220px;
  }
  .bento__cell--hero { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bento__cell:hover img { transform: none; }
}

/* ============================================================
   PRIVATE COMPANY STORES
   ============================================================ */
.stores {
  background: var(--color-ink-deep);
  color: #ffffff;
  padding-block: var(--section-gap);
}
.stores__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.stores__title { color: #ffffff; margin-bottom: var(--spacing-20); }
.stores__body { color: var(--on-dark-soft); max-width: 46ch; }

.stores__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-12);
  margin-top: var(--spacing-32);
  padding: 0;
  list-style: none;
}
.stores__features li {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  padding: var(--spacing-16);
}
.stores__feature-title {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-sm);
  margin-bottom: 4px;
}
.stores__feature-text {
  display: block;
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--on-dark-muted);
}
.stores .btn-row { margin-top: var(--spacing-32); }

.stores__media { margin: 0; }
.stores__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

@media (max-width: 899px) {
  .stores__grid { grid-template-columns: minmax(0, 1fr); }
  .stores__media { order: -1; }
}
@media (max-width: 599px) {
  .stores__features { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   HOW IT WORKS — connected flow
   Why Us above it is a four-column card grid on the canvas. Repeating that
   shape immediately afterwards read as one long undifferentiated run, so this
   is a centred, numbered timeline on the white surface: different ground,
   different alignment, different object.
   ============================================================ */
.flow {
  background: var(--color-bone);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.section__head--center {
  max-width: 44ch;
  margin-inline: auto;
  text-align: center;
}

.flow__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
/* the rule the numbers sit on */
.flow__track::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--hairline-strong);
}

.flow__step {
  position: relative;
  text-align: center;
  padding-inline: var(--spacing-8);
}
.flow__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 auto var(--spacing-20);
  border-radius: 50%;
  background: var(--color-bone);
  border: 1.5px solid var(--color-ink);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-sm);
  line-height: 1;
}
.flow__step:last-child .flow__num {
  background: var(--color-field);
  border-color: var(--color-field);
  color: #ffffff;
}
.flow__name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-subheading);
  letter-spacing: -0.025em;
  margin-bottom: var(--spacing-8);
}
.flow__desc {
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--color-slate);
  max-width: 30ch;
  margin-inline: auto;
}
.flow__note {
  margin-top: clamp(40px, 5vw, 56px);
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .flow__track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(32px, 6vw, 44px); }
  .flow__track::before { display: none; }
}
@media (max-width: 479px) {
  .flow__track { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   GIVEAWAY LANDING PAGE
   White canvas throughout. The entry form is the hero's right column, so the
   thing the page exists for is above the fold rather than four sections down.
   ============================================================ */
.gw-hero {
  background: var(--color-bone);
  color: var(--color-ink);
}
.gw-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
  padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px);
}
@media (min-width: 1024px) {
  .gw-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: clamp(48px, 6vw, 88px);
  }
}
.gw-hero__title { color: var(--color-ink); margin-bottom: var(--spacing-24); }
.gw-hero__lede { color: var(--color-slate); max-width: 46ch; }

/* Prize summary sits in the hero as a list, since the imagery moved down to
   make room for the form. */
.gw-hero__prizes {
  display: grid;
  gap: 0;
  margin: clamp(32px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  max-width: 30rem;
}
.gw-hero__prizes li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding-block: var(--spacing-12);
  border-top: 1px solid var(--hairline);
}
.gw-hero__prizes li:last-child { border-bottom: 1px solid var(--hairline); }
.gw-hero__prize-kicker {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--color-field-deep);
  flex: none;
}
.gw-hero__prize-name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-subheading);
  letter-spacing: -0.025em;
  color: var(--color-ink);
  text-align: right;
}
.gw-hero__note {
  margin-top: var(--spacing-24);
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--color-steel);
  max-width: 44ch;
}
.gw-hero__note a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }

/* The form card now sits on white rather than the red band, so it takes a
   hairline and a lift instead of relying on the band for separation. */
.gw-hero .signup__card {
  background: var(--color-bone);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--nav-height) + 20px);
}
@media (max-width: 1023px) {
  .gw-hero .signup__card { position: static; }
}
/* The home page pushes the form above the copy on small screens for booth
   scanning. Here the headline has to come first: arriving cold on a form with
   no heading above it gives no idea what is being entered. */
@media (max-width: 900px) {
  .gw-hero .signup__card { order: 0; }
}
/* Kicker and prize name collide once the row gets narrow, so stack them. */
@media (max-width: 519px) {
  .gw-hero__prizes li {
    display: block;
  }
  .gw-hero__prize-kicker { display: block; margin-bottom: 2px; }
  .gw-hero__prize-name { display: block; text-align: left; }
}

/* Prizes */
.prizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-20);
  margin-top: clamp(32px, 4vw, 48px);
}
.prize {
  margin: 0;
  background: var(--color-bone);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prize img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prize figcaption { padding: var(--spacing-24); }
.prize__kicker {
  display: block;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--color-field-deep);
  margin-bottom: var(--spacing-8);
}
.prize__name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-subheading);
  letter-spacing: -0.025em;
  margin-bottom: var(--spacing-8);
}
.prize__desc { font-size: var(--text-caption); line-height: 1.55; color: var(--color-slate); }
.prize--benefit {
  background: var(--color-ink-deep);
  border-color: var(--color-ink-deep);
  color: #ffffff;
  justify-content: center;
}
.prize--benefit .prize__kicker { color: #ffffff; opacity: 0.7; }
.prize--benefit .prize__desc { color: var(--on-dark-soft); }
.prize__list {
  margin: var(--spacing-20) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--spacing-8);
}
.prize__list li {
  font-size: var(--text-caption);
  color: var(--on-dark-soft);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--hairline-light);
}

.flow__track--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow__track--three::before { left: 16%; right: 16%; }

/* Rules */
.rules__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(32px, 4vw, 48px);
}
.rules__item { border-top: 1px solid var(--hairline-strong); padding-top: var(--spacing-16); }
.rules__title {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: 6px;
}
.rules__text { font-size: var(--text-caption); line-height: 1.55; color: var(--color-slate); }
.rules__note { margin-top: clamp(32px, 4vw, 44px); max-width: 76ch; }

@media (max-width: 899px) {
  .prizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prize--benefit { grid-column: 1 / -1; }
  .rules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__track--three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
  .prizes { grid-template-columns: minmax(0, 1fr); }
  .prize--benefit { grid-column: auto; }
  .rules__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   GIVEAWAY HERO: floating pieces
   Same component as v2. The stage clips inside its own layer so the hero
   keeps overflow visible and the form card keeps position:sticky.
   ============================================================ */
.gw-hero { position: relative; }
.gw-hero .v2-hero__stage { overflow: hidden; }
.gw-hero__content { position: relative; z-index: 1; }
.gw-hero .signup__card { z-index: 2; }
/* room at the top for the two corner pieces */
.gw-hero__inner { padding-top: clamp(150px, 15vw, 190px); }
@media (max-width: 1023px) {
  .gw-hero .signup__card { position: relative; top: auto; }
  .v2-float[data-tier="3"] { display: none; }
}
@media (max-width: 767px) {
  .gw-hero .v2-float[data-tier="2"] { display: none; }
  .gw-hero .v2-float[data-tier="1"] { --w: clamp(88px, 24vw, 120px) !important; }
  .gw-hero .v2-float[data-tier="1"]:nth-child(1) { --x: 2% !important;  --y: 0% !important; }
  .gw-hero .v2-float[data-tier="1"]:nth-child(2) { --x: 70% !important; --y: 0% !important; }
  .gw-hero__inner { padding-top: 160px; }
}

/* Giveaway hero: form above the fold, pieces visible in the side margins.
   The inner grid narrows so there is real margin for the pieces to live in,
   the top padding drops back to a normal hero, and the card tightens. */
.gw-hero__inner { padding-top: clamp(40px, 5vw, 56px); padding-bottom: clamp(56px, 7vw, 88px); }
@media (min-width: 1200px) {
  .gw-hero__inner { max-width: 1060px; }
}
.gw-hero .signup__card { padding: clamp(22px, 2.6vw, 30px); }
.gw-hero .form__grid { gap: 16px; }
.gw-hero .form__row { gap: 16px; }
@media (max-width: 767px) {
  .gw-hero__inner { padding-top: 150px; }
  .gw-hero .v2-float[data-tier="1"]:nth-child(1) { --x: 2% !important;  --y: 0% !important; }
  .gw-hero .v2-float[data-tier="1"]:nth-child(3) { --x: 70% !important; --y: 0% !important; }
  .gw-hero .v2-float[data-tier="1"]:nth-child(2) { display: none; }
}

/* Giveaway hero pieces by width. Phone: two small corner pieces, nudged off
   the nav. Tablet: single column, so the pieces take the empty right-hand
   column beside the headline and prize list. 1024 to 1199: no side margin
   exists, so two pieces sit in a band above the content. 1200 to 1439: side
   margins are narrow, so the pieces shrink and the right-hand ones hug the
   edge. */
@media (max-width: 767px) {
  .gw-hero .v2-float[data-tier="1"]:nth-child(1) { --y: 14px !important; }
  .gw-hero .v2-float[data-tier="1"]:nth-child(3) { --y: 14px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .gw-hero .v2-float[data-tier="2"],
  .gw-hero .v2-float[data-tier="1"]:nth-child(2) { display: none; }
  .gw-hero .v2-float[data-tier="1"] { --w: clamp(130px, 19vw, 170px) !important; }
  .gw-hero .v2-float[data-tier="1"]:nth-child(3) { --x: 79% !important; --y: 1% !important; }
  .gw-hero .v2-float[data-tier="1"]:nth-child(1) { --x: 80% !important; --y: 27% !important; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .gw-hero__inner { padding-top: 160px; }
  .gw-hero .v2-float[data-tier="2"],
  .gw-hero .v2-float[data-tier="3"],
  .gw-hero .v2-float[data-tier="1"]:nth-child(2) { display: none; }
  .gw-hero .v2-float[data-tier="1"] { --w: 104px !important; }
  .gw-hero .v2-float[data-tier="1"]:nth-child(1) { --x: 2% !important;  --y: 12px !important; }
  .gw-hero .v2-float[data-tier="1"]:nth-child(3) { --x: 88% !important; --y: 12px !important; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .gw-hero .v2-float { --s: 0.78; }
  .gw-hero .v2-float[data-tier="1"]:nth-child(3) { --x: 91% !important; }
  .gw-hero .v2-float[data-tier="2"] { --x: 91.5% !important; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .gw-hero__inner { max-width: 1020px; }
  .gw-hero .v2-float[data-tier="1"]:nth-child(2) { display: none; }
}

/* Giveaway page: the canvas alternates (paper, white, paper), so every section
   boundary is a colour change and each band keeps its own lead-in. The rules
   section still hands its tail to the footer, which sits on the same paper. */
#how-to-enter.section,
#rules.section { padding-top: var(--section-gap); }

/* Footer legal block and short notice; policy links inside consent boxes. */
.footer__legal { padding-bottom: clamp(40px, 6vw, 64px); max-width: 78ch; }
.footer__legal h2 {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-subheading); letter-spacing: -0.02em;
  color: var(--color-ink); margin: 0 0 var(--spacing-12);
}
.footer__legal p { font-size: var(--text-caption); line-height: 1.6; color: var(--color-slate); margin: 0 0 var(--spacing-12); }
.footer__legal p:last-child { margin-bottom: 0; }
.footer__notice { flex-basis: 100%; width: 100%; max-width: none; font-size: 12px; line-height: 1.7; color: var(--color-steel); margin: 0 0 var(--spacing-12); padding-bottom: var(--spacing-16); border-bottom: 1px solid var(--hairline); }
.footer__notice strong { color: var(--color-slate); font-weight: var(--fw-semibold); }
.check a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.check strong { font-weight: var(--fw-semibold); }
.form__fine strong a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Two-up rows: label, input and helper line share row tracks across both
   columns, so a label that wraps no longer pushes its input below its
   neighbour's. Browsers without subgrid keep the previous stacking. */
@supports (grid-template-rows: subgrid) {
@media (min-width: 600px) {
  .form__row .field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    align-content: start;
  }
  .form__row .field__label { align-self: end; }
}
}

/* The rules note carries the link to the Official Rules PDF; it reads as a link. */
.rules__note a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.rules__note a:hover { color: var(--color-field-deep); }

/* ============================================================
   Legal pages (official rules, privacy policy, terms of use)
   One reading column on paper, a short contents list, numbered
   sections with a hairline between them.
   ============================================================ */
.legal { background: var(--color-bone); }
.legal__inner { max-width: 880px; padding-top: clamp(40px, 6vw, 72px); }
.legal__title { font-size: clamp(34px, 4.6vw, 56px); margin-bottom: var(--spacing-16); }
.legal__meta { font-size: var(--text-body-sm); color: var(--color-slate); }
.legal__toc { margin-top: clamp(28px, 4vw, 40px); padding: var(--spacing-20) var(--spacing-24); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface-canvas); }
.legal__toc ol { margin: 0; padding-left: 1.25em; columns: 2; column-gap: var(--spacing-32); font-size: var(--text-body-sm); line-height: 1.5; }
.legal__toc li { padding-block: 3px; break-inside: avoid; }
.legal__toc a { color: var(--color-ink); text-decoration: none; }
.legal__toc a:hover { color: var(--color-field-deep); text-decoration: underline; text-underline-offset: 3px; }
.legal__body { margin-top: clamp(32px, 5vw, 48px); max-width: 72ch; }
.legal__body section { padding-block: var(--spacing-24) var(--spacing-32); border-top: 1px solid var(--hairline); scroll-margin-top: calc(var(--nav-height) + 24px); }
.legal__body h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-subheading); letter-spacing: -0.02em; color: var(--color-ink); margin: 0 0 var(--spacing-12); }
.legal__body p, .legal__body li { font-size: var(--text-body-sm); line-height: 1.7; color: var(--color-slate); }
.legal__body p + p { margin-top: var(--spacing-12); }
.legal__body ul { margin: 0; padding-left: 1.2em; }
.legal__body li + li { margin-top: var(--spacing-8); }
.legal__body a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal__body a:hover { color: var(--color-field-deep); }
.legal__download { margin-top: var(--spacing-16); font-weight: var(--fw-semibold); }
@media (max-width: 599px) {
  .legal__toc ol { columns: 1; }
}
.legal__body h3 { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-body-sm); color: var(--color-ink); margin: var(--spacing-16) 0 var(--spacing-4); }

/* ============================================================
   Exclusive drops page
   ============================================================ */
.drop-hero { background: var(--color-bone); border-bottom: 1px solid var(--hairline); }
.drop-hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 6vw, 80px) clamp(48px, 7vw, 88px); }
.drop-hero__media { margin: 0; }
.drop-hero__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: 0 24px 48px -24px rgba(10, 19, 50, 0.35); }
.drop-hero__title { font-size: clamp(36px, 5vw, 64px); margin-bottom: var(--spacing-20); }
.drop-hero__lede { color: var(--color-ink); max-width: 56ch; }
.drop-hero__text { margin-top: var(--spacing-16); max-width: 64ch; font-size: 16px; line-height: 1.65; color: var(--color-slate); }
.drop-hero .btn-row { margin-top: var(--spacing-32); }
.drop-ways { background: var(--surface-canvas); }
.drop-ways__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-24); margin-top: clamp(28px, 4vw, 44px); }
.drop-way { background: var(--color-bone); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.drop-way__media { display: block; }
.drop-way__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.drop-way__body { padding: clamp(22px, 3vw, 32px); }
.drop-way__num, .drop-step__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--color-field); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.drop-way h3, .drop-step h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 20px; letter-spacing: -0.02em; color: var(--color-ink); margin: 0 0 10px; }
.drop-way p, .drop-step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-slate); }
#how.section { padding-top: var(--section-gap); background: var(--color-bone); }
.drop-steps { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 36px); }
.drop-step { padding-top: 16px; border-top: 1px solid var(--hairline-strong); }
.drop-identity { background: var(--color-ink-deep); color: #fff; padding-block: clamp(56px, 7vw, 96px); }
.drop-identity__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.drop-identity__media { margin: 0; }
.drop-identity__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.drop-identity h2 { color: #fff; margin-bottom: var(--spacing-16); }
.drop-identity p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--on-dark-soft); }
.drop-identity p + p { margin-top: var(--spacing-12); }
.drop-why { background: var(--surface-canvas); }
.drop-why__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.drop-why__list { list-style: none; margin: var(--spacing-32) 0 0; padding: 0; display: grid; gap: var(--spacing-12); }
.drop-why__list li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.55; color: var(--color-ink); }
.drop-why__list li::before { content: ""; position: absolute; left: 1px; top: 0.4em; width: 13px; height: 7px; border-left: 2px solid var(--color-field); border-bottom: 2px solid var(--color-field); transform: rotate(-45deg); }
.drop-why__aside { margin-top: var(--spacing-32); }
.drop-why__media { display: block; }
.drop-why__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.drop-note { background: var(--color-bone); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 32px); margin-top: var(--spacing-16); }
.drop-note h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 18px; letter-spacing: -0.02em; color: var(--color-ink); margin: 0 0 8px; }
.drop-note p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-slate); }
.page--drops .signup__value { max-width: 46ch; }
.page--drops textarea.field__input { min-height: 96px; resize: vertical; }
@media (max-width: 1023px) {
  .drop-hero__inner, .drop-identity__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .drop-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drop-why__inner { grid-template-columns: minmax(0, 1fr); }
  .drop-why__aside { margin-top: 0; }
}
@media (max-width: 767px) {
  .drop-ways__grid, .drop-steps { grid-template-columns: minmax(0, 1fr); }
}