/* ============================================================
   GroCORN — emerald / gold / crimson brand system.
   ============================================================ */
:root {
  --paper: #f5f5f2;
  --card: #ffffff;
  --ink: #17181c;
  --ink-soft: #5b5f66;
  --dark: #14120c;
  --dark-2: #1c1910;
  --green: #14764c;
  --green-deep: #0e5c3a;
  --gold: #f2c230;
  --gold-line: #c9a227;
  --red: #e64a3d;
  /* Archivo keeps the italic grotesque identity but carries far more
     editorial weight than DM Sans, and its width axis lets headlines tighten
     without squashing. Figtree and IBM Plex Mono are the pairing the client's
     own preview builds used. Inter was the single most generic choice here. */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Shadows were a cold near-black on a warm cream page, which reads as grime
     rather than depth. Warm them to the paper. */
  --shadow-tint: 62, 44, 18;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--gold); color: var(--ink); }

/* ---------- Wordmark ---------- */
.wordmark {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 22px; letter-spacing: -0.01em;
}
.wordmark em { color: var(--red); font-style: inherit; }
.wordmark strong { color: var(--gold-line); }
.wordmark b { color: var(--green); }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: #fbfaf7;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader__logo {
  width: 88px;
  filter: drop-shadow(0 0 26px rgba(242, 194, 48, 0.4));
  animation: loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.loader__bar { width: min(260px, 60vw); height: 3px; background: rgba(23, 24, 28, 0.1); border-radius: 2px; overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--red), var(--gold), var(--green)); transition: width 0.25s ease-out; }
.loader__hint { font-size: 11px; letter-spacing: 0.5em; text-indent: 0.5em; color: var(--ink-soft); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(16px, 4vw, 48px);
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease-out), background 0.4s, box-shadow 0.4s;
}
.nav.visible { transform: translateY(0); }
.nav .wordmark { color: var(--ink); }
.nav.scrolled {
  background: rgba(245, 245, 242, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(var(--shadow-tint), 0.08);
}
.nav__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.nav__links { display: flex; gap: clamp(12px, 2.5vw, 30px); }
.nav__links a {
  color: var(--ink-soft); text-decoration: none; font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 2px; position: relative;
  transition: color 0.2s;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--green));
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out);
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--ink); }
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 820px) { .nav__links { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 28px;
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  border-radius: 999px; cursor: pointer; border: 0;
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s;
  will-change: transform;
}
.btn:active { transform: scale(0.96); }
.btn--gold {
  color: var(--ink);
  background: linear-gradient(100deg, var(--gold), #f7d35e);
  box-shadow: 0 8px 26px rgba(242, 194, 48, 0.35);
}
.btn--gold:hover, .btn--gold:focus-visible {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 34px rgba(242, 194, 48, 0.5);
}
.btn--gold::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
}
.btn--gold:hover::before { transform: translateX(120%); }
.btn--outline { color: #fff; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); }
.btn--outline:hover, .btn--outline:focus-visible { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 24px rgba(242, 194, 48, 0.25); transform: translateY(-2px); }
.btn--small { min-height: 44px; padding: 10px 20px; font-size: 12px; }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(48% 36% at 50% 38%, rgba(242, 194, 48, 0.12), transparent 72%),
    radial-gradient(55% 30% at 92% 100%, rgba(20, 118, 76, 0.08), transparent 70%),
    linear-gradient(180deg, #fbfaf7 0%, #f5f4ef 60%, #efeee8 100%);
  overflow: hidden;
  padding: 120px 20px 90px;
}
.hero__waves, .vault__waves { position: absolute; inset: 0; pointer-events: none; }
.hero__waves svg, .vault__waves svg { width: 100%; height: 100%; }
.wave-path {
  fill: none; stroke: var(--gold-line); stroke-width: 1; opacity: 0.4;
  stroke-dasharray: 3000; stroke-dashoffset: 3000;
  animation: waveDraw 3.2s var(--ease-out) forwards;
}
@keyframes waveDraw { to { stroke-dashoffset: 0; } }
/* champagne hairlines on the ivory hero */
.hero .wave-path { stroke: #b99a3e; }
/* corner corn-mark watermark bleeding off the bottom-right edge */
.hero__watermark {
  position: absolute; right: -6%; bottom: -10%;
  width: clamp(380px, 52vmin, 720px); height: auto;
  opacity: 0.12; filter: saturate(0.65);
  transform: rotate(-8deg);
  pointer-events: none; user-select: none;
  animation: watermarkSway 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes watermarkSway {
  from { transform: rotate(-8deg) translateY(0); }
  to { transform: rotate(-4deg) translateY(-24px); }
}
/* Centred on phones rather than bleeding off the right edge, keeping the same
   vertical position. Centred with a negative margin, not translateX, because
   the sway keyframes animate `transform` and would wipe a translate out. */
@media (max-width: 720px) {
  .hero__watermark { width: 300px; right: auto; left: 50%; margin-left: -150px; }
}
@media (prefers-reduced-motion: reduce) { .hero__watermark { animation: none; } }
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1080px; margin: 0 auto;
  text-align: center;
}
.hero__chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid rgba(201, 162, 39, 0.55); border-radius: 999px;
  padding: 10px 20px; margin-bottom: clamp(20px, 3vh, 34px);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 18px rgba(var(--shadow-tint), 0.05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #2fa470;
  box-shadow: 0 0 0 0 rgba(47, 164, 112, 0.6);
  animation: dotPulse 2s ease-out infinite;
}
@keyframes dotPulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 164, 112, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(47, 164, 112, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 164, 112, 0); }
}
.hero__title {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(64px, 13vw, 175px); line-height: 0.95; letter-spacing: -0.02em;
  color: var(--ink); white-space: nowrap;
}
.hero__tagline {
  font-family: 'Poiret One', var(--font-display), sans-serif; font-weight: 400;
  font-size: clamp(26px, 3.6vw, 54px); line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--gold-line);
  margin: 12px 0 20px;
}
.ht {
  display: inline-block;
  /* pad box so italic ink overhang isn't clipped by the composited layer */
  padding: 0.06em 0.09em 0.06em 0;
  margin: -0.06em -0.09em -0.06em 0;
  opacity: 0; transform: translateY(60%) rotate(6deg) scale(0.8);
  transition: transform 0.9s var(--ease-spring), opacity 0.5s ease-out;
  will-change: transform;
}
.hero.assembled .ht { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
.ht--red { color: #d8402f; }
.ht--gold { color: #dfa714; }
.ht--green { color: var(--green); }
.hero__sub { color: var(--ink-soft); max-width: 52ch; margin: 0 auto 28px; font-size: clamp(15px, 1.5vw, 18px); }
.hero__sub strong { color: var(--gold-line); font-weight: 700; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero .btn--outline { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(var(--shadow-tint), 0.4); }
.hero .btn--outline:hover, .hero .btn--outline:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--gold-line), 0 8px 24px rgba(201, 162, 39, 0.25);
}
.hero__stats {
  position: relative; z-index: 2;
  width: 100%; max-width: 1280px; margin: clamp(36px, 6vh, 64px) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(23, 24, 28, 0.12);
  padding-top: clamp(18px, 3vh, 28px);
  gap: 14px;
}
.hero__stats div {
  text-align: left; padding-left: 18px;
  border-left: 1px solid rgba(23, 24, 28, 0.1);
}
.hero__stats div:first-child { border-left: 0; padding-left: 0; }
.hero__stats dt {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(24px, 3vw, 38px); color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.hero__stats dd { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: left; }
  .hero__phone { display: none; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .hero__stats div:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden; padding: 24px 0; background: var(--green-deep);
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 36s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex; align-items: center;
  gap: clamp(22px, 3vw, 40px); padding-right: clamp(22px, 3vw, 40px);
}
.mq {
  font-family: 'Poiret One', var(--font-display), sans-serif;
  font-size: clamp(20px, 2.4vw, 32px); letter-spacing: 0.2em;
  text-transform: uppercase; white-space: nowrap;
  color: rgba(245, 245, 242, 0.8);
}
.mq--gold { color: var(--gold); }
.mq--star { font-size: 13px; letter-spacing: 0; color: rgba(242, 194, 48, 0.65); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Shared type ---------- */
.kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase; color: var(--green); margin-bottom: 14px;
}
.kicker--gold { color: var(--gold); }
.headline {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(38px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.headline em { font-style: inherit; color: var(--green); }
.headline--light { color: #fff; }
.headline--light em { color: var(--gold); }
/* padding-bottom + negative margin keeps italic descenders (g, y, p) inside the clip box */
.headline span {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.16em; margin-bottom: -0.16em;
}
.reveal-lines span {
  transform: translateY(110%) rotate(3deg); opacity: 0;
  transition: transform 0.85s var(--ease-out), opacity 0.5s ease-out;
}
.reveal-lines.in-view span { transform: translateY(0) rotate(0); opacity: 1; }
.reveal-lines.in-view span:nth-child(2) { transition-delay: 0.08s; }
.reveal-lines.in-view span:nth-child(3) { transition-delay: 0.16s; }
.body { color: var(--ink-soft); max-width: 60ch; font-size: clamp(15px, 1.4vw, 18px); }
.body--light { color: rgba(245,245,242,0.75); }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s var(--ease-out); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Why ---------- */
.why { max-width: 1240px; margin: 0 auto; padding: clamp(80px, 12vh, 150px) clamp(20px, 5vw, 64px); }
/* hairline editorial ledger — no boxes */
.ledger {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px); margin-top: clamp(36px, 6vh, 60px);
  text-align: left;
}
@media (max-width: 860px) { .ledger { grid-template-columns: 1fr; } }
.ledger__item { position: relative; border-top: 1px solid rgba(23, 24, 28, 0.15); padding-top: 28px; }
.ledger__item::before {
  content: ''; position: absolute; top: -1px; left: 0;
  width: 56px; height: 3px; background: var(--green);
  transition: width 0.5s var(--ease-out);
}
.ledger__item--answer::before { background: linear-gradient(90deg, var(--gold-line), var(--gold)); }
.ledger__item:hover::before { width: 100%; }
.ledger__no {
  position: absolute; top: 24px; right: 0;
  font-family: 'Poiret One', var(--font-display), sans-serif;
  font-size: 30px; line-height: 1; color: rgba(201, 162, 39, 0.55);
}
.ledger__icon {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  border: 1.5px solid rgba(201, 162, 39, 0.5);
  background: #fff; color: var(--green);
  box-shadow: 0 8px 22px rgba(var(--shadow-tint), 0.06);
  margin-bottom: 18px;
  transition: transform 0.3s var(--ease-spring), border-color 0.3s, color 0.3s;
}
.ledger__icon svg { width: 26px; height: 26px; }
.ledger__item:hover .ledger__icon {
  transform: translateY(-4px); border-color: var(--gold-line);
}
.ledger__item--answer .ledger__icon {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, #fff, rgba(242, 194, 48, 0.12));
  color: var(--gold-line);
}
.ledger__item h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); margin-bottom: 10px; }
.ledger__item p { color: var(--ink-soft); font-size: 15px; }
.why__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.5vw, 28px); margin-top: clamp(30px, 5vh, 54px);
}
.card {
  background: var(--card); border-radius: 20px; padding: 30px 28px;
  border: 1px solid rgba(23, 24, 28, 0.07);
  box-shadow: 0 14px 40px rgba(var(--shadow-tint), 0.07);
  transform-style: preserve-3d; will-change: transform;
  transition: box-shadow 0.3s;
}
.card:hover { box-shadow: 0 24px 60px rgba(var(--shadow-tint), 0.13); }
.card h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 15px; }
.card--green { background: var(--green-deep); border-color: transparent; }
.card--green h3 { color: #fff; }
.card--green p { color: rgba(245,245,242,0.78); }
.card--gold { background: var(--gold); border-color: transparent; }
.card--gold h3 { color: var(--ink); }
.card--gold p { color: rgba(23, 24, 28, 0.72); }
.why__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px; margin-top: clamp(44px, 7vh, 70px);
  border-top: 2px solid rgba(23, 24, 28, 0.08); padding-top: clamp(30px, 5vh, 50px);
}
.stat__num {
  display: block; font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(44px, 6vw, 72px); line-height: 1; color: var(--green);
  font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.stat:nth-child(2) .stat__num { color: var(--gold-line); }
.stat:nth-child(3) .stat__num { color: var(--red); }
.stat__label { color: var(--ink-soft); font-size: 14px; max-width: 30ch; display: block; }

/* ---------- Market ---------- */
.market {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 6vw, 80px); align-items: center;
  padding: clamp(80px, 12vh, 150px) clamp(20px, 5vw, 64px);
}
@media (max-width: 900px) { .market { grid-template-columns: 1fr; } }
.market__facts { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.market__facts li { position: relative; padding-left: 26px; color: var(--ink-soft); font-size: 15px; }
.market__facts li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px;
  border-radius: 3px; background: linear-gradient(135deg, var(--gold), var(--green));
}
.market__rings { display: grid; gap: 14px; }
.ring {
  border-radius: 20px; padding: 20px 24px;
  border: 1.5px solid rgba(20, 118, 76, 0.25);
  background: var(--card);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.ring:hover { transform: translateX(6px); box-shadow: 0 16px 40px rgba(var(--shadow-tint), 0.1); }
.ring span { display: block; color: var(--ink-soft); font-size: 14px; }
.ring b {
  display: block; font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(28px, 3.4vw, 40px); color: var(--ink); line-height: 1.1; margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.ring--mid { margin-left: clamp(16px, 3vw, 40px); border-color: rgba(201, 162, 39, 0.45); }
.ring--core {
  margin-left: clamp(32px, 6vw, 80px);
  background: var(--green-deep); border-color: transparent;
  box-shadow: 0 20px 50px rgba(14, 92, 58, 0.35);
}
.ring--core b, .ring--core span { color: #fff; }
.ring--core span { color: rgba(245,245,242,0.78); }

/* ---------- Impact flywheel ---------- */
.impact { max-width: 1280px; margin: 0 auto; padding: clamp(70px, 10vh, 130px) clamp(20px, 5vw, 64px); text-align: center; }
.impact__wheel {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 3vw, 44px); align-items: center;
  margin-top: clamp(38px, 6vh, 60px);
}
.impact__col { display: grid; gap: 18px; }
.spoke {
  position: relative; text-align: left;
  background: var(--card); border-radius: 20px; padding: 24px 24px 24px 70px;
  border: 1px solid rgba(23, 24, 28, 0.07);
  box-shadow: 0 14px 40px rgba(var(--shadow-tint), 0.07);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.3s, border-color 0.3s;
}
.spoke::before {
  content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px;
  border-radius: 0 4px 4px 0;
}
.spoke--impact::before { background: linear-gradient(180deg, var(--green), #2fa470); }
.spoke--revenue::before { background: linear-gradient(180deg, var(--gold), var(--gold-line)); }
.spoke:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: rgba(20, 118, 76, 0.35);
  box-shadow: 0 26px 60px rgba(var(--shadow-tint), 0.14);
}
.spoke--revenue:hover { border-color: rgba(201, 162, 39, 0.55); }
.spoke__icon {
  position: absolute; left: 20px; top: 24px;
  width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center;
}
.spoke__icon svg { width: 19px; height: 19px; }
.spoke--impact .spoke__icon { background: rgba(20, 118, 76, 0.12); color: var(--green); }
.spoke--revenue .spoke__icon { background: rgba(242, 194, 48, 0.2); color: var(--gold-line); }
.spoke h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-bottom: 6px; }
.spoke p { color: var(--ink-soft); font-size: 14px; }
/* staggered entrance per column position */
.impact__col .spoke:nth-child(2) { transition-delay: 0.1s; }
.impact__col .spoke:nth-child(3) { transition-delay: 0.2s; }
.spoke.in-view { transition-delay: 0s; }

/* Floor raised so the labels inside are not cramped on a phone. */
.impact__hub { position: relative; width: clamp(210px, 52vw, 250px); aspect-ratio: 1; margin: 0 auto; }
.hub__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--green) 0 50%, var(--gold) 50% 100%);
  /* Band as a share of the radius, not a fixed 22px. At the mobile size that
     22px was 24.4% of the radius against 17.6% on desktop, so the ring ate
     the middle of the circle and the composition looked off. */
  -webkit-mask: radial-gradient(farthest-side, transparent 82%, #000 83%);
  mask: radial-gradient(farthest-side, transparent 82%, #000 83%);
  animation: hubSpin 14s linear infinite;
}
@keyframes hubSpin { to { transform: rotate(360deg); } }
.impact__hub::after {
  content: ''; position: absolute; inset: 12%; border-radius: 50%;
  border: 1.5px dashed rgba(23, 24, 28, 0.15);
  animation: hubSpin 30s linear infinite reverse;
}
.hub__label {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.hub__label b {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(17px, 1.8vw, 22px); text-transform: uppercase; letter-spacing: 0.04em;
}
.hub__label b:first-child { color: var(--green); }
.hub__label b:last-child { color: var(--gold-line); }
.hub__label svg { width: 26px; height: 26px; color: var(--ink-soft); }
@media (max-width: 980px) {
  .impact__wheel { grid-template-columns: 1fr; }
  /* The hub keeps its DOM position when the columns stack, so it lands
     between the green impact cards and the gold revenue cards — the same
     divide the ring itself draws. Hoisting it to the top (order: -1) put
     the green/gold split above a run of green cards, which read as
     unrelated decoration rather than the hinge between the two halves. */
  .impact__hub { margin: 6px auto 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub__ring, .impact__hub::after, .hero__blob, .hero__dot, .hero__phone { animation: none !important; }
}

/* ---------- Team: editorial founders ---------- */
.team {
  position: relative; overflow: hidden;
  max-width: 1280px; margin: 0 auto;
  padding: clamp(70px, 10vh, 130px) clamp(20px, 5vw, 64px); text-align: center;
}
.team__bigword {
  position: absolute; top: clamp(30px, 6vh, 70px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(90px, 15vw, 220px); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(20, 118, 76, 0.1);
  pointer-events: none; user-select: none;
}
.team .kicker, .team .headline { position: relative; z-index: 2; }
.founder {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 5vw, 80px); align-items: center; text-align: left;
  margin-top: clamp(60px, 10vh, 120px);
}
.founder--flip { grid-template-columns: 1.15fr 0.85fr; }
.founder--flip .founder__media { order: 2; }
.founder--flip .founder__info { order: 1; text-align: right; }
.founder--flip .founder__quote { border-left: 0; border-right: 4px solid var(--gold); padding: 4px 20px 4px 0; }
.founder__index {
  position: absolute; top: -0.35em; z-index: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(110px, 16vw, 240px); line-height: 1;
  color: rgba(23, 24, 28, 0.05); pointer-events: none; user-select: none;
}
.founder:not(.founder--flip) .founder__index { right: 0; }
.founder--flip .founder__index { left: 0; }
.founder__media {
  position: relative; border-radius: 26px; overflow: hidden;
  transform: rotate(-2.5deg);
  border: 1px solid rgba(20, 118, 76, 0.25);
  box-shadow: 0 34px 90px rgba(var(--shadow-tint), 0.2), 0 0 0 8px rgba(242, 194, 48, 0.08);
}
.founder--flip .founder__media { transform: rotate(2.5deg); }
.founder__media img { width: 100%; will-change: transform; transform: scale(1.08); }
.founder__info { position: relative; }
.founder__name {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(42px, 6vw, 84px); line-height: 0.98; letter-spacing: -0.02em;
  text-transform: uppercase;
  background: linear-gradient(100deg, var(--ink) 40%, var(--green) 70%, var(--gold-line));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.founder__name span {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.16em; margin-bottom: -0.16em;
}
.founder__role {
  color: var(--green); font-size: 13px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; margin: 14px 0 18px;
}
.founder__bio { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; font-weight: 500; }
.founder__quote {
  margin-top: 22px; padding: 4px 0 4px 20px;
  border-left: 4px solid var(--gold);
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(16px, 1.5vw, 20px); color: var(--ink-soft);
}
@media (max-width: 860px) {
  .founder, .founder--flip { grid-template-columns: 1fr; }
  .founder--flip .founder__media { order: 1; }
  .founder--flip .founder__info { order: 2; text-align: left; }
  .founder--flip .founder__quote { border-right: 0; border-left: 4px solid var(--gold); padding: 4px 0 4px 20px; }
}

/* ---------- Movement: light stepper path ---------- */
.movement {
  position: relative; overflow: hidden;
  background:
    radial-gradient(50% 40% at 50% 100%, rgba(201, 162, 39, 0.08), transparent 70%),
    linear-gradient(180deg, #faf9f5 0%, #f0efe9 100%);
  padding: clamp(90px, 13vh, 160px) clamp(20px, 5vw, 64px);
}
.movement__inner { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; text-align: center; }
.movement .headline em { color: var(--gold-line); }
.msteps {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 6vh, 60px); text-align: left;
}
.mstep {
  position: relative;
  background: #fff; border: 1px solid rgba(23, 24, 28, 0.08);
  border-radius: 20px; padding: 30px 28px;
  box-shadow: 0 14px 40px rgba(var(--shadow-tint), 0.06);
  transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}
.mstep:hover {
  transform: translateY(-6px); border-color: rgba(201, 162, 39, 0.55);
  box-shadow: 0 26px 60px rgba(var(--shadow-tint), 0.12);
}
.mstep--featured {
  background: linear-gradient(180deg, #fff, rgba(242, 194, 48, 0.1));
  border-color: rgba(201, 162, 39, 0.5);
}
/* dashed path connector between steps */
.mstep:not(:last-child)::after {
  content: ''; position: absolute; top: 52px;
  right: calc(-1 * clamp(28px, 4vw, 56px) + 6px);
  width: calc(clamp(28px, 4vw, 56px) - 12px);
  border-top: 1.5px dashed rgba(201, 162, 39, 0.55);
}
.mstep__no {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(201, 162, 39, 0.55);
  font-family: 'Poiret One', var(--font-display), sans-serif;
  font-size: 22px; color: var(--gold-line); background: #fff;
  margin-bottom: 16px;
}
.mstep--featured .mstep__no { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.mstep h3 { font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--ink); margin-bottom: 10px; }
.mstep p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 16px; }
.mstep a {
  color: var(--green-deep); font-weight: 700; text-decoration: none; font-size: 14px;
  display: inline-block; padding: 4px 0; min-height: 32px;
}
.mstep a:hover, .mstep a:focus-visible { color: var(--gold-line); text-decoration: underline; }
@media (max-width: 860px) {
  .msteps { grid-template-columns: 1fr; }
  .mstep:not(:last-child)::after { display: none; }
}

/* ---------- Roadmap expansion ---------- */
.roadmap__expansion {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; margin-top: clamp(26px, 4vh, 40px);
  border-top: 2px solid rgba(23, 24, 28, 0.08); padding-top: clamp(26px, 4vh, 40px);
}
.roadmap__expansion p { color: var(--ink-soft); font-size: 14.5px; margin-top: 10px; }

/* ---------- Platform ---------- */
.platform { max-width: 1240px; margin: 0 auto; padding: clamp(70px, 10vh, 130px) clamp(20px, 5vw, 64px); text-align: center; }
.platform .body { margin: 0 auto; }
/* word-by-word scroll fill */
.fill-text { color: var(--ink); }
.fill-text--light { color: #f5f5f2; }
.fill-text .fw {
  opacity: 0.16;
  transition: opacity 0.25s linear;
  will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
  .fill-text .fw { opacity: 1 !important; transition: none; }
}
/* Card-fan arc: all engines in one view */
.phones {
  position: relative;
  display: flex; gap: clamp(10px, 1.6vw, 22px);
  justify-content: center; align-items: flex-end;
  margin-top: clamp(34px, 5vh, 56px);
  padding: 30px 4px 26px;
}
.phones::before {
  content: ''; position: absolute; inset: 6% 4% 10%;
  background: radial-gradient(55% 65% at 50% 55%, rgba(20, 118, 76, 0.1), rgba(242, 194, 48, 0.07) 55%, transparent 75%);
  border-radius: 40px; pointer-events: none;
}
.phone {
  flex: 0 0 auto; width: clamp(150px, 17vw, 235px);
  will-change: transform;
  opacity: 0;
  transform: translate(var(--sx, 0), 70px) rotate(0deg);
  transition: transform 1s var(--ease-spring), opacity 0.5s ease-out;
}
.phone--lead { width: clamp(175px, 20vw, 275px); }
.phone:nth-child(1) { --sx: 90%;  --ty: 30px;  --rot: -7deg; transition-delay: 0.05s; }
.phone:nth-child(2) { --sx: 45%;  --ty: 10px;  --rot: -3.5deg; transition-delay: 0.12s; }
.phone:nth-child(3) { --sx: 0%;   --ty: -14px; --rot: 0deg; transition-delay: 0s; }
.phone:nth-child(4) { --sx: -45%; --ty: 10px;  --rot: 3.5deg; transition-delay: 0.19s; }
.phone:nth-child(5) { --sx: -90%; --ty: 30px;  --rot: 7deg; transition-delay: 0.26s; }
.phones.in-view .phone {
  opacity: 1;
  transform: translate(0, var(--ty)) rotate(var(--rot));
}
.phones.in-view .phone:hover {
  transform: translate(0, calc(var(--ty) - 18px)) rotate(var(--rot)) scale(1.05);
  z-index: 3;
}
.phone img {
  width: 100%; border-radius: 26px;
  border: 1px solid rgba(23, 24, 28, 0.08);
  box-shadow: 0 24px 60px rgba(var(--shadow-tint), 0.2);
  will-change: transform;
}
.phone figcaption {
  display: inline-block; margin-top: 16px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  background: var(--card); border: 1px solid rgba(23, 24, 28, 0.1);
  border-radius: 999px; padding: 7px 14px;
  box-shadow: 0 6px 18px rgba(var(--shadow-tint), 0.08);
}
.engines {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 10px;
}
.engines li {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
  border: 1.5px dashed rgba(20, 118, 76, 0.35); border-radius: 999px;
  padding: 10px 18px;
  transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s var(--ease-spring);
}
.engines li:hover {
  color: var(--ink); background: rgba(242, 194, 48, 0.16);
  border-color: var(--gold-line); border-style: solid;
  transform: translateY(-3px);
}
/* Mobile: swipe row, no fan */
@media (max-width: 720px) {
  .phones { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .phones::before { display: none; }
  .phone { width: clamp(190px, 56vw, 250px); scroll-snap-align: center; opacity: 1; transform: none; transition: none; }
  .phones.in-view .phone { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .phone { opacity: 1 !important; transform: translate(0, var(--ty, 0)) rotate(var(--rot, 0)) !important; transition: none !important; }
}

/* ---------- Progress bar + cursor ---------- */
.progressbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--green));
  transform-origin: left; transform: scaleX(0);
  pointer-events: none;
}
.cursor {
  position: fixed; top: 0; left: 0; z-index: 300;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold);
  border: 2px solid rgba(20, 118, 76, 0.9);
  box-shadow: 0 2px 10px rgba(var(--shadow-tint), 0.25);
  pointer-events: none;
  transform: translate(-100px, -100px);
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), background 0.25s, opacity 0.25s;
  will-change: transform;
}
.cursor.grow {
  width: 40px; height: 40px;
  background: rgba(242, 194, 48, 0.18);
  border-color: var(--gold-line);
}
@media (hover: none), (max-width: 900px) { .cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor, .progressbar { display: none; } }

/* ---------- Vault: museum exhibit on ivory ---------- */
.vault {
  position: relative; overflow: hidden;
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(20, 118, 76, 0.06), transparent 70%),
    linear-gradient(180deg, #f0efe9 0%, #faf9f5 100%);
  padding: clamp(90px, 13vh, 160px) clamp(20px, 5vw, 64px);
}
.vault__inner {
  position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; text-align: center;
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 4px;
  padding: clamp(44px, 6vw, 80px) clamp(22px, 5vw, 70px);
}
/* inner hairline — double certificate frame */
.vault__inner::before {
  content: ''; position: absolute; inset: 8px;
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-radius: 2px; pointer-events: none;
}
.vault__ornament {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #f0efe9, #faf9f5);
  color: var(--gold-line); font-size: 18px;
  padding: 0 18px; line-height: 1;
}
.vault .body { margin: 0 auto; }
.vault__pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px; margin-top: clamp(40px, 6vh, 60px);
}
.pillar {
  position: relative;
  border: 1px solid rgba(23, 24, 28, 0.09); border-radius: 16px;
  padding: 30px 24px 26px; background: #fff;
  box-shadow: 0 10px 30px rgba(var(--shadow-tint), 0.05);
  transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.pillar::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 44px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--gold-line), var(--gold));
}
.pillar:hover {
  border-color: rgba(201, 162, 39, 0.55); transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(var(--shadow-tint), 0.1);
}
.pillar h3 { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 19px; margin-bottom: 8px; }
.pillar p { color: var(--ink-soft); font-size: 14px; }

/* ---------- Pricing ---------- */
.pricing { max-width: 1240px; margin: 0 auto; padding: clamp(80px, 12vh, 150px) clamp(20px, 5vw, 64px); text-align: center; }
.pricing .body { margin: 0 auto; }
.pricing__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px; margin-top: clamp(34px, 5vh, 54px); align-items: stretch;
}
.price {
  background: var(--card); border-radius: 20px; padding: 28px 22px;
  border: 1px solid rgba(23, 24, 28, 0.08);
  box-shadow: 0 14px 40px rgba(var(--shadow-tint), 0.06);
  text-align: center; position: relative;
  transition: box-shadow 0.3s;
}
.price:hover { box-shadow: 0 24px 60px rgba(var(--shadow-tint), 0.12); }
.price h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.price__num {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(34px, 3.6vw, 44px); line-height: 1; color: var(--ink); margin-bottom: 12px;
}
.price__num span { font-size: 13px; font-style: normal; font-weight: 600; color: var(--ink-soft); margin-left: 4px; }
.price__note { color: var(--ink-soft); font-size: 13.5px; }
.price--featured {
  background: var(--green-deep); border-color: transparent;
  box-shadow: 0 24px 60px rgba(14, 92, 58, 0.35);
  transform: scale(1.04);
}
.price--featured h3, .price--featured .price__num { color: #fff; }
.price--featured .price__num span { color: rgba(245,245,242,0.7); }
.price--featured .price__note { color: rgba(245,245,242,0.78); }
.price__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 14px; white-space: nowrap;
}

/* ---------- Roadmap: milestone journey ---------- */
.roadmap { max-width: 1240px; margin: 0 auto; padding: clamp(80px, 12vh, 150px) clamp(20px, 5vw, 64px); }
.road { position: relative; margin-top: clamp(44px, 7vh, 70px); padding-top: 34px; }
/* The furrow. Box is offset so the path's mid-line lands on the node centres. */
.road__line {
  position: absolute; top: -11px; left: 4%; right: 4%; height: 40px;
  background: none; pointer-events: none;
}
.road__line svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Seed drilled ahead of the plough. */
.road__furrow {
  fill: none; stroke: rgba(23, 24, 28, 0.18);
  stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1.5 13;
}
/* Ground already worked, growing green into gold. pathLength="1" means the
   draw is a plain dashoffset transition with nothing measured in JS. */
.road__grow {
  fill: none; stroke: url(#furrowGrow);
  stroke-width: 4.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2s var(--ease-out) 0.25s;
}
.road__grow--v { stroke: url(#furrowGrowV); }
.road.in-view .road__grow { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .road__grow { transition: none; stroke-dashoffset: 0; }
}
.road__steps {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 30px);
}
.road__step {
  position: relative;
  background: var(--card); border-radius: 22px;
  border: 1px solid rgba(23, 24, 28, 0.08);
  box-shadow: 0 16px 44px rgba(var(--shadow-tint), 0.08);
  padding: 30px 26px 26px;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.3s;
}
.road__step:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(var(--shadow-tint), 0.14); }
.road__step:hover .road__node { transform: translateX(-50%) scale(1.3); }
/* node rides ON the line above each card */
.road__node {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 4px solid var(--ink-soft);
  box-shadow: 0 2px 8px rgba(var(--shadow-tint), 0.15);
  transition: transform 0.3s var(--ease-spring);
}
.road__node--green { border-color: var(--green) !important; animation: nodePulse 2.4s ease-out infinite; }
.road__node--gold { border-color: var(--gold-line) !important; animation: nodePulse 2.4s ease-out infinite 0.8s; }
@keyframes nodePulse {
  0% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.35); }
  70% { box-shadow: 0 0 0 10px rgba(201, 162, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}
.road__ghost {
  position: absolute; top: 8px; right: 14px;
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 84px; line-height: 1; color: rgba(23, 24, 28, 0.05);
  pointer-events: none; user-select: none;
}
.road__step--featured { background: var(--green-deep); border-color: transparent; }
.road__step--featured h3 { color: #fff; }
.road__step--featured p { color: rgba(245, 245, 242, 0.78); }
.road__step--featured .road__ghost { color: rgba(255, 255, 255, 0.08); }
.road__step--featured .road__meta { color: var(--gold); }
.road__step h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; margin: 12px 0 8px; }
.road__step p { color: var(--ink-soft); font-size: 14.5px; }
.road__step--featured p { color: rgba(245, 245, 242, 0.82); }
.road__steps .road__step:nth-child(2) { transition-delay: 0.1s; }
.road__steps .road__step:nth-child(3) { transition-delay: 0.2s; }
.road__step.in-view { transition-delay: 0s; }
.road__meta {
  display: block; margin-top: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green);
}
.timeline__tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; border-radius: 999px; padding: 6px 14px;
  background: rgba(23, 24, 28, 0.07); color: var(--ink);
}
.timeline__tag--green { background: var(--green); color: #fff; }
.timeline__tag--gold { background: var(--gold); color: var(--ink); }
/* Which furrow is showing. Wide screens run it across, stacked screens run
   it down the side — the metaphor holds either way, a ruled line does not. */
.road__line svg.road__svg--v { display: none; }

@media (max-width: 860px) {
  .road { padding-top: 0; padding-left: 42px; }
  .road__steps { grid-template-columns: 1fr; }

  /* Rail down the left of the stack, spanning the whole column. */
  .road__line {
    top: 0; bottom: 0; left: 0; right: auto;
    width: 40px; height: auto;
  }
  .road__line svg.road__svg--h { display: none; }
  .road__line svg.road__svg--v { display: block; }

  /* Node sits on the rail centre, level with each card's date tag. */
  .road__node {
    display: block; top: 36px; left: -22px;
    transform: translateX(-50%);
  }
  .road__step:hover .road__node { transform: translateX(-50%) scale(1.3); }
}

/* ---------- Contact ---------- */
.contact {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(30px, 6vw, 90px);
  padding: clamp(80px, 12vh, 150px) clamp(20px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
.contact__points { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.contact__points li {
  position: relative; padding-left: 26px; color: var(--ink-soft); font-size: 15px;
}
.contact__points li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px;
  border-radius: 3px; background: linear-gradient(135deg, var(--gold), var(--green));
}
.contact__direct { font-style: normal; display: grid; gap: 6px; margin-top: 26px; }
.contact__direct a, .contact__direct span {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px;
  width: fit-content; padding: 2px 0;
}
.contact__direct a:hover, .contact__direct a:focus-visible { color: var(--green); }
.contact__socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.contact__socials a {
  text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
  border: 1.5px solid rgba(23, 24, 28, 0.16); border-radius: 999px;
  padding: 10px 18px; min-height: 44px; display: inline-flex; align-items: center;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease-spring);
}
.contact__socials a:hover, .contact__socials a:focus-visible {
  border-color: var(--green); background: rgba(20, 118, 76, 0.08); transform: translateY(-2px);
}
.contact__form {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #fbfaf6);
  border-radius: 26px; padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid rgba(23, 24, 28, 0.07);
  box-shadow: 0 2px 6px rgba(var(--shadow-tint), 0.04), 0 30px 80px rgba(var(--shadow-tint), 0.12);
  display: grid; gap: 22px;
}
.form__accent {
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--green));
}
.form__title {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 22px; color: var(--ink);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { position: relative; }
.field input, .field textarea {
  font: inherit; color: var(--ink); width: 100%;
  border: 1.5px solid rgba(23, 24, 28, 0.12); border-radius: 14px;
  padding: 24px 16px 10px; min-height: 58px; background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field textarea { min-height: 130px; resize: vertical; padding-top: 28px; }
.field > label {
  position: absolute; left: 17px; top: 18px;
  font-size: 15px; color: var(--ink-soft); pointer-events: none;
  transform-origin: left top;
  transition: transform 0.2s var(--ease-out), color 0.2s;
}
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-9px) scale(0.72);
  color: var(--green); font-weight: 700; letter-spacing: 0.06em;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--green); background: #fff;
  box-shadow: 0 0 0 4px rgba(20, 118, 76, 0.12);
}
.field.invalid input, .field.invalid textarea { border-color: var(--red); }
.field.invalid > label { color: var(--red); }
.field__error { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 4px; }
.field--pills { border: 0; padding: 0; }
.field--pills legend {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 10px;
}
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { position: relative; cursor: pointer; }
.pill input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.pill span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  border: 1.5px solid rgba(23, 24, 28, 0.16); background: #fff;
  transition: all 0.25s var(--ease-spring);
}
.pill:hover span { border-color: var(--gold-line); transform: translateY(-2px); }
.pill input:checked + span {
  background: var(--green-deep); border-color: var(--green-deep); color: #fff;
  box-shadow: 0 8px 20px rgba(14, 92, 58, 0.3);
}
.pill input:focus-visible + span { outline: 2px solid var(--gold-line); outline-offset: 2px; }
.btn--block { width: 100%; }
.form__note {
  font-size: 12.5px; color: var(--ink-soft); text-align: center;
  letter-spacing: 0.04em; margin-top: -8px;
}
.form__status { font-size: 14px; font-weight: 600; color: var(--green); min-height: 20px; text-align: center; }

/* ---------- Footer ---------- */
.footer { background: var(--dark); color: rgba(245,245,242,0.75); padding: clamp(44px, 7vh, 70px) clamp(20px, 5vw, 64px) 30px; }
.footer .wordmark { color: #fff; }
.footer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-bottom: 26px; border-bottom: 1px solid rgba(245,245,242,0.14); margin-bottom: 22px;
}
.footer__links, .footer__bottom nav { display: flex; gap: clamp(14px, 2.5vw, 28px); flex-wrap: wrap; }
.footer a { color: inherit; text-decoration: none; font-size: 13px; letter-spacing: 0.06em; padding: 10px 0; }
.footer a:hover, .footer a:focus-visible { color: var(--gold); }
.footer__contact {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); flex-wrap: wrap;
  padding-bottom: 20px; font-size: 14px;
}
.footer__contact a { font-weight: 600; }
/* The contact row wraps at every width, so `margin-left: auto` only ever
   orphaned the socials to the right while the rest of the footer sat left.
   Give them their own row instead. */
.footer__socials {
  display: flex; flex-wrap: wrap; gap: 0 18px;
  width: 100%; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(245, 245, 242, 0.12);
}
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; }

/* ---------- Legal pages ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: 140px clamp(20px, 5vw, 40px) 90px; }
.legal h1 { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: clamp(34px, 5vw, 54px); margin-bottom: 10px; }
.legal .updated { color: var(--ink-soft); font-size: 14px; margin-bottom: 36px; }
.legal h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 15.5px; }
.legal ul { padding-left: 22px; margin: 10px 0; }
.legal a { color: var(--green); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track, .hero__scrollcue span, .loader__logo, .phone.floaty { animation: none !important; }
  .wave-path { animation: none !important; stroke-dashoffset: 0; }
  .ht, .reveal, .reveal-lines span, .btn, .nav, .pillar { transition: none !important; }
  .ht { opacity: 1 !important; transform: none !important; }
  .reveal, .reveal-lines span { opacity: 1 !important; transform: none !important; }
}

/* ---------- Community capital band ---------- */
.capital {
  margin-top: clamp(36px, 6vh, 60px);
  padding: clamp(26px, 4vw, 42px) clamp(20px, 4vw, 48px);
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 4px; text-align: center; position: relative;
  background: rgba(255, 255, 255, 0.6);
}
.capital::before {
  content: ''; position: absolute; inset: 7px;
  border: 1px solid rgba(201, 162, 39, 0.22); border-radius: 2px; pointer-events: none;
}
.capital__label {
  font-family: var(--font-file, 'Inter'), sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 16px;
}
.capital__math {
  font-family: 'Poiret One', var(--font-display), sans-serif;
  font-size: clamp(20px, 3.4vw, 40px); line-height: 1.25; color: var(--ink);
}
.capital__math b { font-family: var(--font-display); font-style: italic; font-weight: 900; color: var(--green-deep); }
.capital__math span { color: var(--gold-line); margin: 0 6px; }
.capital__note { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }

/* ---------- Honeypot (must be reachable to bots, invisible to people) ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- Form status states ---------- */
.form__status--err { color: var(--red); }

/* ---------- Waitlist modal ---------- */
.wl { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.wl[hidden] { display: none; }
.wl__scrim {
  position: absolute; inset: 0; background: rgba(20, 18, 12, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.26s var(--ease-out);
}
.wl.open .wl__scrim { opacity: 1; }
.wl__panel {
  position: relative; z-index: 2;
  width: min(480px, 100%);
  background: linear-gradient(180deg, #fff, #fbfaf6);
  border: 1px solid rgba(23, 24, 28, 0.08); border-radius: 26px;
  padding: clamp(28px, 4vw, 40px);
  box-shadow: 0 40px 90px rgba(var(--shadow-tint), 0.28);
  overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(0.97);
  transition: opacity 0.26s var(--ease-out), transform 0.32s var(--ease-spring);
}
.wl.open .wl__panel { opacity: 1; transform: none; }
.wl__accent {
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--green));
}
.wl__x {
  position: absolute; top: 12px; right: 14px;
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-soft); border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.wl__x:hover { background: rgba(23, 24, 28, 0.06); color: var(--ink); }
.wl__x:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.wl__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold-line); margin-bottom: 10px;
}
.wl__title {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(28px, 4.6vw, 40px); line-height: 1.05; margin-bottom: 10px;
}
.wl__sub { color: var(--ink-soft); font-size: 15px; margin-bottom: 24px; }
.wl form { display: grid; gap: 20px; }
@media (prefers-reduced-motion: reduce) {
  .wl__scrim, .wl__panel { transition: none; }
}

/* ---------- Culture Vault reel (scroll-scrubbed film) ---------- */
.vreel { position: relative; height: 320vh; background: #121214; }
.vreel__sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
}
/* Now a <video>; the canvas used to do this cover fit by hand in JS. */
.vreel__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; background: #121214;
}
.vreel__grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(75% 60% at 50% 45%, transparent 45%, rgba(12, 12, 14, 0.62) 100%),
    linear-gradient(180deg, rgba(12,12,14,0.5) 0%, transparent 28%, transparent 62%, rgba(12,12,14,0.78) 100%);
}
.vreel__handoff {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 40%, #121214 100%);
}
.vbeat {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 clamp(20px, 6vw, 80px);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.vbeat__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}
.vbeat__title {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(34px, 6vw, 82px); line-height: 1.04; color: #fff;
  text-shadow: 0 6px 50px rgba(0, 0, 0, 0.85);
}
.vbeat__title em { font-style: inherit; color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .vreel { height: 100vh; }
  .vbeat { position: relative; inset: auto; opacity: 1 !important; transform: none !important; padding: 40px 20px; }
  .vreel__sticky { position: relative; height: auto; }
}

/* ==========================================================================
   Responsive polish — audited at 320/360/375/390/414/768/834/1024/1280/1440/1920
   ========================================================================== */

/* Anchor targets were landing underneath the fixed nav on every size. */
html { scroll-padding-top: 84px; }

/* --- Nav: compact CTA + a real menu below the desktop breakpoint --- */
.nav__right { display: flex; align-items: center; gap: 10px; }
.nav__cta { white-space: nowrap; }
.nav__cta-short { display: none; }

.navmenu { display: none; position: relative; }
.navmenu__btn {
  list-style: none; display: flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 44px; height: 44px; padding: 0 10px; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(23, 24, 28, 0.14); background: rgba(255, 255, 255, 0.7);
}
.navmenu__btn::-webkit-details-marker { display: none; }
.navmenu__btn span {
  display: block; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform 0.25s var(--ease-out), opacity 0.2s;
}
.navmenu[open] .navmenu__btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navmenu[open] .navmenu__btn span:nth-child(2) { opacity: 0; }
.navmenu[open] .navmenu__btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.navmenu__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 120;
  display: grid; min-width: 208px; padding: 8px;
  background: rgba(250, 249, 245, 0.97); border: 1px solid rgba(23, 24, 28, 0.1);
  border-radius: 16px; box-shadow: 0 24px 60px rgba(var(--shadow-tint), 0.18);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.navmenu__panel a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: var(--ink); text-decoration: none; border-radius: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.navmenu__panel a:hover, .navmenu__panel a:focus-visible { background: rgba(20, 118, 76, 0.09); color: var(--green-deep); }

@media (max-width: 820px) {
  .navmenu { display: block; }
}
/* Below ~400px the full CTA label wrapped and collided with the wordmark. */
/* Short CTA label for the whole mobile range: the long one is wide enough to
   push the side track out and knock the centred logo off centre. */
@media (max-width: 820px) {
  .nav__cta-long { display: none; }
  .nav__cta-short { display: inline; }
}
@media (max-width: 400px) {
  .nav { gap: 8px; padding-inline: 14px; }
  .nav .wordmark { font-size: 18px; }
  .nav__brand img { width: 28px; height: 28px; }
  .btn--small { padding: 10px 16px; }
}

/* --- Hero --- */
@media (max-width: 560px) {
  /* The status pill wrapped to two lines and broke out of its own outline. */
  .hero__chip { text-align: center; line-height: 1.5; padding: 9px 16px; font-size: 11px; letter-spacing: 0.16em; }
  .hero { padding: 104px 18px 72px; }
}

/* --- Founders: the portrait went full-bleed once the grid collapsed,
       eating well over a screen on tablet and phone. --- */
@media (max-width: 860px) {
  /* Portraits are already 4:5, so capping the width is enough — no crop needed. */
  .founder__media { max-width: 400px; margin-inline: auto; width: 100%; }
  .founder__media img { display: block; }
  .founder { margin-top: clamp(44px, 7vh, 72px); }
  .founder__index { font-size: clamp(90px, 22vw, 150px); }
}

/* --- Tap targets: every link below was under the 44px minimum. --- */
.mstep a, .contact__direct a,
.footer__links a, .footer__socials a, .footer__contact a, .footer__bottom a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.contact__direct { gap: 0; }

/* --- Vertical rhythm: vh-driven padding stacked ~200px of dead space between
       sections on a phone. Tighten the floor without touching desktop. --- */
@media (max-width: 640px) {
  .why, .market, .impact, .platform, .team, .movement, .contact, .pricing, .roadmap {
    padding-top: clamp(56px, 8vh, 90px);
    padding-bottom: clamp(56px, 8vh, 90px);
  }
  .team__bigword { font-size: clamp(64px, 20vw, 110px); }
}

/* Landscape phones: a 100dvh hero leaves no room for anything but the logo. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 92px; padding-bottom: 56px; }
  .vreel__sticky { height: 100dvh; }
}

/* --- Phone: the film is 16:9 and the viewport is ~9:19.5, so filling the
       screen cover-style showed roughly a quarter of each frame — a torso
       close-up instead of the shot. Play it as a band at its own aspect and
       move the copy below it. --- */
@media (max-width: 900px) and (orientation: portrait) {
  /* Grid rather than absolute percentages: the band's height follows the
     width, so the copy has to track it instead of a fixed offset. */
  .vreel__sticky {
    display: grid;
    /* Both rows hug their content so the film + copy centre as one group,
       clear of the fixed nav. */
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: clamp(22px, 4vh, 44px);
  }
  .vreel__canvas, .vreel__grade {
    position: relative; inset: auto;
    grid-area: 1 / 1;
    width: 100%; height: auto;
    aspect-ratio: 16 / 9;
  }
  .vreel__canvas { border-block: 1px solid rgba(242, 194, 48, 0.16); }
  /* Grade sits over the film only, not the whole dark stage. */
  .vreel__grade {
    background: linear-gradient(180deg, rgba(12,12,14,0.4) 0%, transparent 34%, transparent 68%, rgba(12,12,14,0.45) 100%);
  }
  /* Every beat shares one cell so they still cross-fade in place. */
  .vbeat {
    position: relative; inset: auto;
    grid-area: 2 / 1;
    justify-content: flex-start;
    padding: 0 24px;
  }
  .vreel__handoff { grid-area: 1 / 1 / 3 / 2; }
  .vbeat__eyebrow { margin-bottom: 12px; }
  .vbeat__title { font-size: clamp(28px, 7vw, 44px); text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6); }
}

/* --- Hero copy was left-aligned on phones: a leftover from the old
       two-column hero that no longer exists. --- */
@media (max-width: 900px) {
  .hero__inner { text-align: center; }
}

/* --- Footer on phones: everything was one wrapping flex row, so contact
       details fragmented across ragged lines and `margin-left: auto` shoved
       the socials against the right edge while everything else sat left.
       Stack it into labelled groups instead. --- */
@media (max-width: 720px) {
  .footer__top {
    flex-direction: column; align-items: flex-start; gap: 16px;
  }
  .footer__links {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 16px; width: 100%;
  }
  .footer__contact {
    flex-direction: column; align-items: flex-start; gap: 0;
    padding-bottom: 0;
  }
  .footer__bottom {
    flex-direction: column; align-items: flex-start; gap: 4px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(245, 245, 242, 0.12);
  }
  .footer__bottom p { line-height: 1.5; }
}

/* --- Market rings used a staircase indent that reads as designed on a wide
       column and as misalignment on a phone. --- */
@media (max-width: 720px) {
  .ring--mid, .ring--last { margin-left: 0; }
}

/* --- The featured price card's scale-up pushed it past the grid (and its
       badge into the card above) once the grid was a single column. --- */
@media (max-width: 860px) {
  .price--featured { transform: none; }
}

/* ==========================================================================
   Merged from the GroCORN preview builds — media network, funding audiences,
   donation tiers and the jersey donor reward. Restyled onto this site's
   tokens rather than the preview's, so they read as one page.
   ========================================================================== */

/* ---------- Media / Kofi Table Talk ---------- */
.media {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
  color: rgba(245, 245, 242, 0.82);
  padding: clamp(70px, 10vh, 130px) clamp(20px, 5vw, 64px);
}
.media__inner {
  position: relative; z-index: 2; max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
.media .kicker { color: var(--gold); }
.media .headline { color: #fff; }
.media .body { color: rgba(245, 245, 242, 0.72); }
.media__card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(242, 194, 48, 0.28);
  border-radius: 22px; padding: 30px 28px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* A waveform is many thin bars of varying height, mirrored about the centre
   line. The previous version stretched nine bars with flex:1 and a pill
   radius, so each one rendered ~44px wide and it read as a row of coins. */
.media__wave {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2px; height: 56px; margin-bottom: 22px;
}
.media__wave i {
  flex: 1 1 0; min-width: 2px; max-width: 5px;
  height: 100%; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), var(--gold-line));
  transform: scaleY(var(--h, 0.5));
  transform-origin: center;
  animation: mediaWave 1.9s ease-in-out infinite alternate;
}
.media__eplist { list-style: none; margin: 18px 0 0; }
.media__eplist li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid rgba(245, 245, 242, 0.12);
  font-size: 14.5px;
}
.media__eplist span { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; font-size: 12px; }

/* ---------- Funding audiences: grants + investors ---------- */
.audiences {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(70px, 10vh, 130px) clamp(20px, 5vw, 64px);
}
.audiences__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.5vw, 28px); margin-top: clamp(30px, 5vh, 54px);
}
.aud {
  position: relative; background: var(--card); border-radius: 20px;
  padding: 32px 28px; border: 1px solid rgba(23, 24, 28, 0.07);
  box-shadow: 0 18px 46px rgba(var(--shadow-tint), 0.06);
}
.aud__tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green-deep); background: rgba(20, 118, 76, 0.1);
  border-radius: 999px; padding: 6px 14px; margin-bottom: 16px;
}
.aud--gold .aud__tag { color: var(--gold-line); background: rgba(201, 162, 39, 0.14); }
.aud h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  color: var(--ink); margin-bottom: 10px; line-height: 1.2;
}
.aud p { color: var(--ink-soft); font-size: 15px; }
.aud ul { list-style: none; margin-top: 16px; }
.aud li {
  position: relative; padding-left: 22px; margin-top: 10px;
  color: var(--ink-soft); font-size: 14.5px;
}
.aud li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--gold);
}

/* ---------- Donation tiers ---------- */
.donate {
  position: relative;
  background: linear-gradient(180deg, #faf9f5 0%, #f0efe9 100%);
  padding: clamp(70px, 10vh, 130px) clamp(20px, 5vw, 64px);
}
.donate__inner { max-width: 1160px; margin: 0 auto; }
.donate__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px); align-items: start;
  margin-top: clamp(30px, 5vh, 54px);
}
.panel {
  background: var(--card); border-radius: 22px; padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(23, 24, 28, 0.08);
  box-shadow: 0 20px 60px rgba(var(--shadow-tint), 0.07);
}
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 22px; }
.tier-btn {
  border: 1.5px solid rgba(23, 24, 28, 0.16); background: transparent;
  border-radius: 14px; padding: 14px 6px; text-align: center; cursor: pointer;
  font-family: var(--font-body); color: var(--ink); min-height: 64px;
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.tier-btn b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.tier-btn span {
  display: block; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 2px;
}
.tier-btn:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.tier-btn[aria-pressed="true"] { border-color: var(--green); background: rgba(20, 118, 76, 0.08); }
.tier-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.dfield { margin-bottom: 16px; }
.dfield > label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px;
}
.dfield input, .dfield select {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1.5px solid rgba(23, 24, 28, 0.16); border-radius: 12px;
  font-size: 16px; background: #fff; font-family: var(--font-body); color: var(--ink);
}
.dfield input:focus, .dfield select:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: transparent; }
.dfield-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.donate__note { font-size: 13px; color: var(--ink-soft); margin-top: 14px; }
.donate__status { margin-top: 14px; font-size: 14.5px; min-height: 1.2em; }
.donate__status--err { color: #b3261e; }

/* ---------- Jersey builder ---------- */
.jersey__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px); align-items: start;
  margin-top: clamp(30px, 5vh, 54px);
}
.jersey__stage {
  background: radial-gradient(ellipse at 50% 28%, #ffffff, #e9e8e1 120%);
  border-radius: 22px; padding: 26px; border: 1px solid rgba(23, 24, 28, 0.09);
  perspective: 1400px; display: flex; justify-content: center;
  touch-action: pan-y; cursor: grab; user-select: none;
}
.jersey__stage:active { cursor: grabbing; }
.jersey__rotor {
  width: 70%; max-width: 280px; position: relative;
  transform-style: preserve-3d; transition: transform 0.5s var(--ease-out);
}
.jersey__stage.dragging .jersey__rotor { transition: none; }
.jersey__face { position: absolute; inset: 0; backface-visibility: hidden; }
.jersey__face--front { position: relative; }
.jersey__face--back { transform: rotateY(180deg); }
.jersey__controls {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px;
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.jersey__controls button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(23, 24, 28, 0.18); background: none; cursor: pointer;
  font-size: 15px; color: var(--ink); transition: background 0.18s var(--ease-out);
}
.jersey__controls button:hover { background: rgba(23, 24, 28, 0.05); }
.swatch-row { display: flex; gap: 12px; flex-wrap: wrap; }
.swatch {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15); cursor: pointer; padding: 0;
}
.swatch[aria-pressed="true"] { outline: 2px solid var(--green); outline-offset: 3px; }
.swatch:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.jersey__total {
  margin-top: 22px; border-top: 1px dashed rgba(23, 24, 28, 0.2); padding-top: 18px;
  display: flex; justify-content: space-between; align-items: center;
}
.jersey__total b { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); }
.btn--block { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .media__inner { grid-template-columns: 1fr; }
  .donate__grid, .jersey__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tier-grid { grid-template-columns: repeat(2, 1fr); }
  .dfield-row { grid-template-columns: 1fr; }
}

/* ---------- Segmented controls (replace native <select>) ----------
   Native selects render as OS chrome and broke the panel's look; these are
   plain buttons with roving state, so they style consistently everywhere. */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg__btn {
  flex: 1 1 auto; min-width: 62px; min-height: 46px;
  padding: 11px 14px; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink);
  background: #fff; border: 1.5px solid rgba(23, 24, 28, 0.16); border-radius: 12px;
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), color 0.18s;
}
.seg__btn:hover { border-color: var(--gold-line); }
.seg__btn[aria-pressed="true"] {
  border-color: var(--green); background: var(--green); color: #fff;
}
.seg__btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* The media headline was colliding with the copy beneath it: the shared
   .headline uses a tight line-height tuned for the light sections. */
.media .headline { line-height: 1.06; margin-bottom: 18px; }
.media .headline span { display: inline-block; }
.media__inner > div > .body { margin-top: 0; }


/* Momentum figures alongside the headline stats, from the preview builds. */
.stat__delta {
  display: inline-block; margin-left: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--green-deep); background: rgba(20, 118, 76, 0.12);
  border-radius: 999px; padding: 3px 9px; vertical-align: middle;
}
/* In the hero the pill sat inline with the label but carried a top margin,
   which knocked it off the text baseline. Give it its own line instead. */
.hero__stats .stat__delta { display: block; width: fit-content; margin: 9px 0 0; }
/* Source note beside a market figure, not a competing voice. */
.stat__label em, .ring span em { font-style: normal; opacity: 0.62; font-size: 0.92em; }
.dfield__hint { font-size: 12.5px; color: var(--red); margin-top: 6px; min-height: 1em; }

/* ---------- Jersey: configurator <-> model film ---------- */
.jersey__film { margin: 0; }
.jersey__video {
  width: 100%; display: block; border-radius: 22px;
  border: 1px solid rgba(23, 24, 28, 0.09); background: #121214;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.jersey__film figcaption {
  font-size: 12.5px; color: var(--ink-soft); margin-top: 12px; text-align: center;
}
.jersey__toggle { display: flex; justify-content: center; margin-top: 14px; }
/* The outline button is styled for dark sections; this section is light. */
.jersey__toggle-btn {
  color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(var(--shadow-tint), 0.35);
}
.jersey__toggle-btn:hover, .jersey__toggle-btn:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--gold-line), 0 8px 24px rgba(201, 162, 39, 0.22);
}

/* `hidden` is display:none from the UA sheet, but .jersey__stage sets
   display:flex, which wins on specificity — so toggling the film left both
   panes on screen. Make the attribute authoritative for these. */
.jersey__stage[hidden], .jersey__controls[hidden], .jersey__film[hidden] { display: none; }

/* Size has four options and Cut two; side by side they wrapped onto a second
   row. Give each its own full-width row inside the panel. */
.jersey__grid .dfield-row { grid-template-columns: 1fr; gap: 0; }

/* Ambient product loop, not a media player: native controls put browser
   chrome over the shot. Motion is still user-initiated (the toggle), and
   anyone who prefers reduced motion gets the poster frame instead. */
.jersey__video::-webkit-media-controls { display: none !important; }
.jersey__video { pointer-events: none; }

/* Each bar breathes around its own height rather than all sweeping together. */
@keyframes mediaWave {
  from { transform: scaleY(calc(var(--h, 0.5) * 0.55)); opacity: 0.72; }
  to   { transform: scaleY(var(--h, 0.5)); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .media__wave i { animation: none; transform: scaleY(var(--h, 0.5)); opacity: 0.9; }
}

/* Podcast card: a mic-marked eyebrow and a numbered topic list, so the panel
   reads as a show rather than as a generic bullet list. */
.media__card-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.media__card-title {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: #fff; line-height: 1.25;
}
.media__eplist li { align-items: flex-start; gap: 14px; }
.media__eplist li:first-child { margin-top: 4px; }
.media__eplist span {
  min-width: 20px; padding-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* Size buttons carry their surcharge, so the price is on the choice itself
   rather than hidden behind a separate tier row. */
/* Grid, not flex. With flex the final row stretched to fill: when XXL and
   XXXL wrapped on their own they grew to ~185px against ~65px for the rest.
   auto-fill keeps the empty tracks so every chip stays one column wide and a
   short last row lines up under the row above it. */
.seg--sizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}
.seg--sizes .seg__btn {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; padding: 9px 8px;
}
.seg--sizes .seg__btn b { font-size: 14px; font-weight: 700; }
.seg--sizes .seg__btn i {
  font-style: normal; font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-soft); opacity: 0.9;
}
.seg--sizes .seg__btn[aria-pressed="true"] i { color: rgba(255,255,255,0.85); }
.dfield__note { font-size: 12.5px; color: var(--ink-soft); margin-top: 9px; }

/* Secondary founder detail: the depth from the pitch-deck bios, set quieter
   than the lead paragraph so the section still scans. */
.founder__detail {
  margin-top: 16px; color: var(--ink-soft);
  font-size: clamp(14.5px, 1.25vw, 16px); line-height: 1.75;
}
/* The section's mission statement, quoted from the preview builds rather
   than written here. Replaced two per-founder lines that were paraphrased
   from the pitch deck. */
/* Label carries the subject so the sentence can stand on its own. The
   previous "Mission — give ..." ran the label into the sentence and read as
   a fragment. */
.team__mission { max-width: 62ch; margin: 0 auto; }
.team__mission-label {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--green); margin-bottom: 10px;
}
.team__mission-text {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; color: var(--ink);
}
.founder__mission {
  margin-top: 20px; padding: 4px 0 4px 20px;
  border-left: 4px solid var(--gold);
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px); color: var(--ink);
}
.founder--flip .founder__mission {
  border-left: 0; border-right: 4px solid var(--gold); padding: 4px 20px 4px 0;
}
@media (max-width: 860px) {
  .founder--flip .founder__mission {
    border-right: 0; border-left: 4px solid var(--gold); padding: 4px 0 4px 20px;
  }
}

/* The two founders together, as the lead into their individual profiles.
   Landscape group shot, so it gets its own full-width frame rather than
   being forced into the alternating portrait rhythm below it. */
.founders-together {
  position: relative; z-index: 2;
  max-width: 860px; margin: clamp(38px, 6vh, 64px) auto 0;
}
.founders-together img {
  width: 100%; height: auto; display: block;
  border-radius: 24px;
  border: 1px solid rgba(20, 118, 76, 0.2);
  box-shadow: 0 30px 80px rgba(var(--shadow-tint), 0.16), 0 0 0 8px rgba(242, 194, 48, 0.07);
}
.founders-together figcaption {
  margin-top: 18px; text-align: center;
  color: var(--ink-soft); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.65;
  max-width: 60ch; margin-inline: auto;
}
.founders-together figcaption em { color: var(--green); font-style: italic; }

/* The three cards are equal height but their copy is not, so the call to
   action floated at a different height in each one. Push it to the bottom so
   all three sit on a common baseline. */
.mstep { display: flex; flex-direction: column; }
.mstep p { flex: 0 0 auto; }
.mstep a { margin-top: auto; padding-top: 18px; }

/* ==========================================================================
   Style pass: editorial type detail + paper texture.
   The page was three weights of one sans on flat colour fields. These give it
   a voice — mono for anything machine-ish (labels, figures, timestamps),
   a real display face for headlines, and grain so the cream reads as paper.
   ========================================================================== */

/* Labels and eyebrows belong in mono: they are signage, not prose. */
.kicker, .aud__tag, .tier-btn span, .seg--sizes .seg__btn i,
.media__card-eyebrow, .stat__delta, .timeline__tag, .price__note,
.dfield > label, .jersey__controls, .hero__chip {
  font-family: var(--font-mono);
  font-feature-settings: 'ss01' 1;
}
.kicker {
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.34em; text-indent: 0.34em;
}
.hero__chip { font-weight: 500; letter-spacing: 0.16em; }
.dfield > label { font-weight: 500; letter-spacing: 0.12em; }

/* Figures should never reflow as they count up. */
.hero__stats dt, .stat__num, .price__num, .ring b, .capital__math b,
#donateTotal, #jerseyTotal, .jersey__total b, .footer__bottom p {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}

/* Archivo carries a width axis — pull headlines slightly narrow so the long
   ones hold their line without dropping in size. */
.headline, .founder__name, .hero__title {
  font-stretch: 96%;
  letter-spacing: -0.028em;
}
.headline em, .founder__name { font-stretch: 94%; }

/* Paper grain. Fixed and non-interactive, so it costs one composited layer
   and never intercepts a pointer. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: 0.32; } }

/* The warm wash used to be painted per section, anchored to each section's
   own box. Every section boundary restarted it, which left a visible seam on
   the join and a repeating pale patch at each section's top-left. One fixed
   layer behind the whole page instead, so there is nothing to restart. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 50% at 8% 8%, rgba(201, 162, 39, 0.06), transparent 68%),
    radial-gradient(60% 45% at 94% 92%, rgba(20, 118, 76, 0.05), transparent 70%);
}

/* Hairline rule under each kicker — an editorial tell, cheap and quiet. */
.kicker::after {
  content: ''; display: block; width: 46px; height: 2px; margin-top: 12px;
  background: linear-gradient(90deg, var(--gold-line), transparent);
  text-indent: 0;
}
.impact .kicker::after, .platform .kicker::after, .movement .kicker::after,
.team .kicker::after, .pricing .kicker::after, .vault .kicker::after { margin-inline: auto; }

/* Reserve the surcharge line on every size button so the letters share a
   baseline whether or not the size carries a surcharge. */
/* Pin the line box so the price line is the same height on every chip
   regardless of digit count. */
.seg--sizes .seg__btn i { display: block; font-size: 10.5px; line-height: 14px; min-height: 14px; }

/* ---------- Mobile: centred logo, app-bar layout ----------
   A logo centred inside the existing flex row would collide with the CTA —
   at 390px the brand runs to ~256px and the CTA starts at ~224px. So the bar
   becomes three columns: menu, logo, CTA. The menu is first in the DOM too,
   so tab order runs left to right the way the bar reads. */
@media (max-width: 820px) {
  .nav {
    display: grid;
    /* Equal side tracks, so the auto centre track lands on the viewport
       centre. With `auto 1fr auto` the brand only centred inside its own
       column and sat 25-62px left of true centre, because the menu button
       and the CTA are different widths. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    justify-content: initial;
    gap: 10px;
  }
  .navmenu   { grid-column: 1; justify-self: start; }
  .nav__brand{ grid-column: 2; justify-self: center; }
  .nav__right{ grid-column: 3; justify-self: end; }

  /* Panel now hangs off a left-hand button, so it opens from the left edge. */
  .navmenu__panel { left: 0; right: auto; }
}

/* Below ~360 the three parts no longer fit at full size: the equal side
   tracks squeeze the CTA past its content width and it overlaps the centred
   brand. Trim the brand and the CTA rather than give up the centring. */
@media (max-width: 380px) {
  .nav { gap: 6px; padding-inline: 12px; }
  .nav .wordmark { font-size: 15px; letter-spacing: -0.01em; }
  .nav__brand img { width: 24px; height: 24px; }
  .nav__brand { gap: 6px; }
  .nav__cta.btn--small { padding: 10px 12px; font-size: 11px; }
  .navmenu__btn { width: 40px; }
}

/* ==========================================================================
   iOS safe areas. viewport-fit=cover lets the page use the full screen, so
   every fixed or full-bleed edge has to hold its own inset or it slides under
   the notch, the Dynamic Island, the home indicator, or the landscape corners.
   max() keeps the existing spacing on devices where the insets are 0.
   ========================================================================== */
:root {
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --gutter: clamp(20px, 5vw, 64px);
}

/* Fixed bar: clear the notch and, in landscape, the rounded corners. */
.nav {
  padding-top: max(12px, var(--sa-t));
  padding-left: max(clamp(16px, 4vw, 48px), var(--sa-l));
  padding-right: max(clamp(16px, 4vw, 48px), var(--sa-r));
}

/* Full-bleed sections: landscape puts a notch on one side. */
.why, .market, .audiences, .platform, .media, .impact, .team,
.pricing, .roadmap, .movement, .donate, .contact, .footer, .legal {
  padding-left: max(var(--gutter), var(--sa-l));
  padding-right: max(var(--gutter), var(--sa-r));
}
.hero { padding-left: max(20px, var(--sa-l)); padding-right: max(20px, var(--sa-r)); }

/* Last thing on the page sits above the home indicator. */
.footer { padding-bottom: max(30px, var(--sa-b)); }

/* Overlays are positioned against the viewport, so they need their own. */
.navmenu__panel { margin-left: var(--sa-l); }
.wl__panel {
  margin-bottom: var(--sa-b);
  max-height: calc(100dvh - var(--sa-t) - var(--sa-b) - 32px);
  overflow-y: auto;
}

/* The film is pinned to the viewport; keep its copy off the indicator. */
@media (max-width: 900px) and (orientation: portrait) {
  .vbeat { padding-bottom: max(0px, var(--sa-b)); }
}

/* Positioning statement closing the problem section. Replaced a "0% true
   competitors" stat that named rival platforms — fine in a pitch deck, not
   on a public page. */
.why__position {
  margin-top: clamp(26px, 4vh, 40px);
  padding-left: 20px;
  border-left: 4px solid var(--gold);
  max-width: 68ch;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(17px, 1.7vw, 22px); line-height: 1.45; color: var(--ink);
}

/* ---------- Reduced motion: unstack the film captions ----------
   The beats share one grid cell so they can cross-fade. The reduced-motion
   fallback makes all three opacity:1 at once, which was fine when they were
   absolutely positioned and it reset them to normal flow — but the portrait
   layout later pinned them to grid-area 2/1, and that reset no longer
   applied. Result: all three captions printed on top of each other.
   This block comes last so it wins over the portrait rules. */
@media (prefers-reduced-motion: reduce) {
  .vreel { height: auto; }
  .vreel__sticky {
    position: relative; height: auto;
    display: block;                 /* out of the grid entirely */
  }
  .vreel__canvas {
    position: relative; inset: auto; grid-area: auto;
    width: 100%; height: auto; aspect-ratio: 16 / 9;
  }
  /* A grade with nothing pinned under it is just a dark band. */
  .vreel__grade, .vreel__handoff { display: none; }
  .vbeat {
    position: relative; inset: auto; grid-area: auto;
    height: auto; opacity: 1 !important; transform: none !important;
    padding: 30px 20px 0;
  }
  .vbeat__title { text-shadow: none; }
}


/* Bank-donation alternative. Visually subordinate to the gold card button —
   Stripe Checkout is the primary path for everyone; this is opt-in and
   US-only, so it should read as a secondary choice, not a competing one. */
/* The rule and the label are one element: the line is drawn by the pseudo
   elements either side of "or", so it can never drift out of alignment with
   the text the way a separate border-top did. */
.donate__alt { margin-top: 14px; }
.donate__or {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-soft);
}
.donate__or::before,
.donate__or::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: rgba(23, 24, 28, 0.12);
}
.donate__fineprint { margin-top: 8px; font-size: 12px; color: var(--ink-soft); }

/* .btn--outline is built for the dark sections: white text, white border, no
   background. Inside this white donation card that renders as an invisible
   button. Re-skin it for a light surface — ink text on a visible hairline,
   still clearly secondary to the gold card button above it. */
.donate__alt .btn--outline {
  color: var(--ink);
  background: #fff;
  border: 1.5px solid rgba(23, 24, 28, 0.22);
}
.donate__alt .btn--outline:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(20, 118, 76, 0.04);
}
.donate__alt .btn--outline:disabled { opacity: .5; }