/* ──────────────────────────────────────────────────────────────────
   Boon — landing page
   Design tokens at top. Components below. Mobile-first.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* color — true-neutral grays + anodized mint accent.                      */
  /* grays are R=G=B (no warm or cool bias) — the mint accent supplies all   */
  /* the warmth. previous cool-blue grays read purple next to mint; warming  */
  /* them then read brown. neutral splits the difference and stays clean.    */
  --ink:           #0D0D0D;
  --ink-soft:      #262626;
  --paper:         #FBFBFB;
  --paper-warm:    #F3F3F3;
  --paper-deep:    #E8E8E8;
  --accent:        #1F8A6E;   /* anodized mint — replaces violet for brand differentiation */
  --accent-deep:   #0F6B54;
  --muted:         #6E6E6E;
  --muted-soft:    #B4B4B4;
  --hairline:      rgba(13, 13, 13, 0.10);
  --hairline-soft: rgba(13, 13, 13, 0.05);

  /* card surface — deep cosmic black; holographic overlay supplies color   */
  --card-base:     #0A0A10;
  --card-base-2:   #16161F;
  --pearl-1:       #FAFAFF;
  --pearl-2:       #BFBFCC;
  --pearl-3:       #6E6E80;

  /* type — Fraunces display + Inter body */
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* modular scale, 1.25 minor third */
  --t-xs:   0.75rem;     /* 12 */
  --t-sm:   0.875rem;    /* 14 */
  --t-base: 1rem;        /* 16 */
  --t-md:   1.125rem;    /* 18 */
  --t-lg:   1.375rem;    /* 22 */
  --t-xl:   1.75rem;     /* 28 */
  --t-2xl:  2.25rem;     /* 36 */
  --t-3xl:  3rem;        /* 48 */
  --t-4xl:  3.75rem;     /* 60 */
  --t-5xl:  4.75rem;     /* 76 */

  /* spacing, 4px base */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* layout */
  --container: 1100px;
  --measure:   65ch;

  /* radii */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-card: 14px;

  /* motion */
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast:  200ms;
  --d-base:  400ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:           #F0F0F0;
    --ink-soft:      #D4D4D4;
    --paper:         #0E0E0E;
    --paper-warm:    #181818;
    --paper-deep:    #222222;
    --accent:        #5BD6B4;
    --muted:         #9B9B9B;
    --muted-soft:    #2E2E2E;
    --hairline:      rgba(245, 245, 245, 0.12);
    --hairline-soft: rgba(245, 245, 245, 0.05);
  }
}

/* Holographic pointer variables — registered with @property so background-position
   and gradient stops can interpolate during the idle keyframes.
     --pfx, --pfy  pointer X/Y as 0..1 across the card (drives gradient parallax)
     --px,  --py   same value expressed as percent (drives radial glare position)
     --pfc         pointer distance from center, 0 at middle, ~1 at corner
   Inspired by simeydotme/pokemon-cards-css (GPL-3.0) — reimplemented here. */
@property --pfx { syntax: '<number>';     inherits: true; initial-value: 0.5; }
@property --pfy { syntax: '<number>';     inherits: true; initial-value: 0.5; }
@property --px  { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --py  { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --pfc { syntax: '<number>';     inherits: true; initial-value: 0; }

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

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

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
a:hover { border-bottom-color: currentColor; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── utilities ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-6);
}
@media (min-width: 720px) {
  .container { padding-inline: var(--s-8); }
}

.row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); }

.eyebrow {
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-4);
}
.eyebrow.centered { text-align: center; }

.centered { text-align: center; }

.section-title {
  font-size: var(--t-2xl);
  line-height: 1.1;
  max-width: 22ch;
  margin: 0 auto var(--s-12);
  letter-spacing: -0.02em;
}
@media (min-width: 720px) {
  .section-title { font-size: var(--t-3xl); }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  top: -100px; left: var(--s-4);
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  z-index: 100;
}
.skip:focus { top: var(--s-4); }


/* ─── header ─────────────────────────────────────────────────────── */
.site-header {
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--hairline-soft);
}

.wordmark {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  border-bottom: none !important;
}

.site-nav {
  display: flex;
  gap: var(--s-6);
  font-size: var(--t-sm);
}
.site-nav a {
  color: var(--muted);
  font-weight: 500;
}
.site-nav a:hover { color: var(--ink); }


/* ─── hero ───────────────────────────────────────────────────────── */
.hero {
  padding-block: var(--s-20) var(--s-24);
}
@media (min-width: 720px) {
  .hero { padding-block: var(--s-24) var(--s-32); }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-16);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--s-20);
  }
}

.display {
  font-size: clamp(2.5rem, 7.5vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-6);
  max-width: 14ch;
}
.display .ital {
  font-style: italic;
  font-weight: 300;
}

.lede {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38ch;
  margin: 0 0 var(--s-10);
}
@media (min-width: 720px) {
  .lede { font-size: var(--t-lg); }
}

.microcopy {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--muted);
}


/* ─── capture form ───────────────────────────────────────────────── */
.capture {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;            /* form-status (flex-basis: 100%) drops to its own line */
  gap: var(--s-3);
  max-width: 520px;
}
@media (min-width: 560px) {
  .capture {
    flex-direction: row;
    align-items: stretch;
  }
}

.capture input[type="email"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.capture input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196, 90, 44, 0.15);
}
.capture input[type="email"]::placeholder { color: var(--muted-soft); }

.capture button {
  font: inherit;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-6);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.capture button:hover { background: var(--accent); border-color: var(--accent); }
.capture button:active { transform: translateY(1px); }
.capture button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.form-status {
  flex-basis: 100%;
  font-size: var(--t-xs);
  color: var(--accent-deep);
  min-height: 1.2em;
}
.form-status.ok { color: var(--accent-deep); }
.form-status.err { color: #B83A2E; }


/* ─── hero card stage ────────────────────────────────────────────── */
.hero-card-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  min-height: 280px;
}

.card-tilt {
  position: relative;
  width: 100%;
  max-width: 440px;
  transform-style: preserve-3d;
  transition: transform var(--d-base) var(--ease);
  will-change: transform;
  filter:
    drop-shadow(0 36px 60px rgba(10, 12, 10, 0.45))
    drop-shadow(0 10px 20px rgba(10, 12, 10, 0.30));
}

/* ─── holographic card ───────────────────────────────────────────────
   Technique adapted from simeydotme/pokemon-cards-css (GPL-3.0):
   1. A directional repeating rainbow band (82°) sized 400% × 900% — when
      background-position shifts with pointer, the band slides like real foil.
   2. A radial "wet shine" tracked to the pointer for the highlight spot.
   3. A glittery starfield (SVG turbulence thresholded to bright dots) lifts
      the surface so it doesn't look like flat plastic.
   The three layers blend via color-dodge / overlay against the dark card base.
   ────────────────────────────────────────────────────────────────────── */
.card-3d {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  --pfx: 0.5;
  --pfy: 0.5;
  --px: 50%;
  --py: 50%;
  --pfc: 0;
  animation: holoIdle 9s ease-in-out infinite;
}
.card-3d.is-hovering { animation: none; }

.gift-card {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.holo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* ── rainbow band — slides with pointer like a foil sheet under light ── */
.holo-rainbow {
  background-image:
    repeating-linear-gradient(
      82deg,
      hsl(0,   72%, 55%)  0%,
      hsl(38,  78%, 60%)  9%,
      hsl(95,  60%, 53%)  18%,
      hsl(170, 65%, 50%)  27%,
      hsl(215, 70%, 60%)  36%,
      hsl(275, 65%, 58%)  45%,
      hsl(325, 70%, 55%)  54%,
      hsl(325, 70%, 55%)  60%,
      hsl(275, 65%, 58%)  66%,
      hsl(215, 70%, 60%)  72%,
      hsl(170, 65%, 50%)  78%,
      hsl(95,  60%, 53%)  84%,
      hsl(38,  78%, 60%)  90%,
      hsl(0,   72%, 55%)  100%
    );
  background-size: 400% 900%;
  background-position:
    calc(25% + (var(--pfx) * 50%))
    calc(25% + (var(--pfy) * 50%));
  mix-blend-mode: color-dodge;
  filter: brightness(0.95) contrast(1.85) saturate(0.85);
  opacity: 0.92;
}

/* secondary band — same gradient, shifted angle + offset, soft-light blend.
   Two layers at slightly different parallax = chromatic depth (foil thickness). */
.holo-rainbow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -60deg,
      hsl(0,   72%, 55%)  0%,
      hsl(38,  78%, 60%)  9%,
      hsl(95,  60%, 53%)  18%,
      hsl(170, 65%, 50%)  27%,
      hsl(215, 70%, 60%)  36%,
      hsl(275, 65%, 58%)  45%,
      hsl(325, 70%, 55%)  54%,
      hsl(325, 70%, 55%)  60%,
      hsl(275, 65%, 58%)  66%,
      hsl(215, 70%, 60%)  72%,
      hsl(170, 65%, 50%)  78%,
      hsl(95,  60%, 53%)  84%,
      hsl(38,  78%, 60%)  90%,
      hsl(0,   72%, 55%)  100%
    );
  background-size: 400% 400%;
  background-position: var(--px) var(--py);
  mix-blend-mode: soft-light;
  filter: brightness(1.05) contrast(1.6) saturate(1.1);
  opacity: 0.6;
}

/* ── radial glare — the "wet shine" highlight at the pointer focus point ── */
.holo-shine {
  background: radial-gradient(
    farthest-corner circle at var(--px) var(--py),
    hsla(0, 0%, 100%, 0.55) 0%,
    hsla(0, 0%, 90%,  0.22) 14%,
    hsla(0, 0%, 50%,  0.08) 35%,
    hsla(0, 0%, 0%,   0.00) 55%
  );
  mix-blend-mode: hard-light;
  opacity: calc(0.55 + var(--pfc) * 0.35);
}

/* ── glitter starfield — SVG turbulence thresholded into bright specks ── */
.holo-grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250'><filter id='s' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 16 -9'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>");
  background-size: 240px 150px;
  background-position:
    calc(var(--pfx) * -30px)
    calc(var(--pfy) * -30px);
  mix-blend-mode: overlay;
  opacity: 0.45;
  filter: contrast(1.15) brightness(1.1);
}

/* idle drift — gentle hand-tilt feel when no pointer is tracking */
@keyframes holoIdle {
  0%, 100% { --pfx: 0.30; --pfy: 0.35; --px: 30%; --py: 35%; --pfc: 0.30; }
  50%      { --pfx: 0.70; --pfy: 0.65; --px: 70%; --py: 65%; --pfc: 0.30; }
}


/* ─── trio section ───────────────────────────────────────────────── */
.trio {
  padding-block: var(--s-20);
  background: var(--paper-warm);
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
}

.trio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-10);
  align-items: end;
  justify-items: center;
}
@media (min-width: 760px) {
  .trio-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-8);
  }
}

.trio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  max-width: 360px;
  width: 100%;
}
.trio-card .card-3d {
  filter:
    drop-shadow(0 22px 36px rgba(10, 12, 10, 0.32))
    drop-shadow(0 8px 14px rgba(10, 12, 10, 0.18));
  transition: transform var(--d-base) var(--ease);
}
/* stagger the idle holo so each card shimmers on its own clock */
.trio-card.t1 .card-3d { animation-delay: 0s; }
.trio-card.t2 .card-3d { animation-delay: -2.7s; }
.trio-card.t3 .card-3d { animation-delay: -5.3s; }

.trio-card:hover .card-3d { transform: translateY(-4px); }

/* subtle editorial tilts — different per card */
@media (min-width: 760px) {
  .trio-card.t1 .card-3d { transform: rotate(-2.5deg); }
  .trio-card.t3 .card-3d { transform: rotate( 2.5deg); }
  .trio-card.t1:hover .card-3d { transform: rotate(-2.5deg) translateY(-4px); }
  .trio-card.t3:hover .card-3d { transform: rotate( 2.5deg) translateY(-4px); }
}

.trio-cap {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--muted);
  text-align: center;
}


/* ─── why section ────────────────────────────────────────────────── */
.why {
  padding-block: var(--s-24);
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-12);
}
@media (min-width: 800px) {
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-10);
  }
}

.why-band h3 {
  font-size: var(--t-xl);
  line-height: 1.2;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.015em;
}

.why-band p {
  color: var(--ink-soft);
  max-width: 38ch;
  line-height: 1.6;
}


/* ─── audience section ───────────────────────────────────────────── */
.audience {
  padding-block: var(--s-24);
}

.audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 640px) {
  .audience-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
  }
}
@media (min-width: 1000px) {
  .audience-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.audience-card {
  padding: var(--s-6);
  background: var(--paper-warm);
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
}

.audience-icon {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 0 var(--s-4);
  color: var(--muted);
}

.audience-card h3 {
  font-family: Fraunces, Georgia, serif;
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-2);
  color: var(--ink);
}

.audience-card p {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}


/* ─── how it works ───────────────────────────────────────────────── */
.how {
  padding-block: var(--s-24);
  background: var(--paper-warm);
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-12);
  counter-reset: step;
}
@media (min-width: 800px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-10);
  }
}

.steps li {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.step-n {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-3xl);
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
}

.steps h3 {
  font-size: var(--t-lg);
  margin: 0;
}

.steps p {
  color: var(--ink-soft);
  max-width: 30ch;
}


/* ─── faq ────────────────────────────────────────────────────────── */
.faq {
  padding-block: var(--s-24);
}

.faq-container { max-width: 760px; }

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-list details {
  border-top: 1px solid var(--hairline);
  padding: var(--s-5) 0;
}
.faq-list details:last-child { border-bottom: 1px solid var(--hairline); }

.faq-list summary {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: var(--s-8);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: var(--t-xl);
  color: var(--muted);
  transition: transform var(--d-fast) var(--ease);
}
.faq-list details[open] summary::after {
  content: "−";
}
.faq-list summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.faq-list details p {
  margin-top: var(--s-4);
  color: var(--ink-soft);
  max-width: var(--measure);
  line-height: 1.7;
}


/* ─── closer ─────────────────────────────────────────────────────── */
/* bold mint section — solid brand color, no faint radials.               */
.closer {
  position: relative;
  padding-block: var(--s-24);
  background: linear-gradient(180deg, #1F8A6E 0%, #0F6B54 100%);
  color: #F8FBF8;
  overflow: hidden;
}
/* single quiet highlight at the top so the section isn't flat            */
.closer::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 80%;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 70%);
  pointer-events: none;
}

.closer-inner {
  position: relative;
  max-width: 700px;
  text-align: center;
  margin-inline: auto;
}

.closer-title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  margin: 0 0 var(--s-4);
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.closer-sub {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--s-10);
}

.closer-form { margin-inline: auto; }
.closer-form input[type="email"] {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  backdrop-filter: blur(8px);
}
.closer-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.60); }
.closer-form input[type="email"]:focus-visible {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}
.closer-form button {
  background: #FFFFFF;
  color: #0F6B54;
  border-color: #FFFFFF;
}
.closer-form button:hover {
  background: #F4F2EE;
  border-color: #F4F2EE;
  color: #0F6B54;
}
.closer-form .form-status { color: rgba(255, 255, 255, 0.85); }


/* ─── footer ─────────────────────────────────────────────────────── */
.site-footer {
  padding-block: var(--s-10);
  border-top: 1px solid var(--hairline-soft);
}

.footer-row {
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
}

.site-footer .small {
  font-size: var(--t-xs);
  color: var(--muted);
  max-width: 60ch;
}

.site-footer nav {
  display: flex;
  gap: var(--s-6);
  font-size: var(--t-sm);
}
.site-footer nav a { color: var(--muted); }
.site-footer nav a:hover { color: var(--ink); }


/* ─── legal pages (Terms / Privacy / Refunds) ───────────────────────── */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-20) var(--s-8) var(--s-24);
}
@media (max-width: 720px) {
  .legal-page { padding: var(--s-12) var(--s-6) var(--s-16); }
}

/* Big display h1 matching the rest of the site, with a rule under the
   "Last updated" line to give the page a clean masthead. */
.legal-page > h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
}
.legal-page .updated {
  display: block;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0 0 var(--s-12);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--hairline);
}

/* Section heading — display family, accent eyebrow weight */
.legal-page h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: var(--s-12) 0 var(--s-4);
}

/* Sub-heading — body font, semibold, slightly muted vs h2 */
.legal-page h3 {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--t-md);
  line-height: 1.3;
  color: var(--ink);
  margin: var(--s-8) 0 var(--s-3);
}

/* Body text — wider line-height for legal scanability, ink-soft for
   visual comfort against the accent color on heads and links. */
.legal-page p {
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 var(--s-5);
}
.legal-page p:last-child { margin-bottom: 0; }

.legal-page ul {
  padding-inline-start: var(--s-6);
  margin: var(--s-3) 0 var(--s-6);
}
.legal-page li {
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink-soft);
  padding-inline-start: var(--s-2);
  margin: 0 0 var(--s-3);
}
.legal-page li::marker {
  color: var(--accent);
}

.legal-page a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: border-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease);
}
.legal-page a:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent-deep);
}

.legal-page strong {
  font-weight: 600;
  color: var(--ink);
}


/* ─── primary buttons (hero / closer CTAs) ──────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  border: 1px solid;
  border-radius: var(--r-md);
  font: inherit;
  font-weight: 500;
  font-size: var(--t-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease);
  white-space: nowrap;
}
.btn:active   { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.btn-on-dark {
  background: #FFFFFF;
  color: #0F6B54;
  border-color: #FFFFFF;
}
.btn-on-dark:hover {
  background: #F4F2EE;
  border-color: #F4F2EE;
  color: #0F6B54;
}

.hero-cta {
  display: flex;
  gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-2);
}

.closer-cta {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-2);
}


/* ─── purchase modal ─────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal[aria-hidden="false"] { display: flex; }

body.modal-open { overflow: hidden; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 12, 0.55);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: var(--s-8) var(--s-6) var(--s-6);
  margin: var(--s-4);
  box-shadow:
    0 36px 60px rgba(10, 12, 10, 0.35),
    0 12px 20px rgba(10, 12, 10, 0.20);
  animation: modalIn var(--d-base) var(--ease);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.modal-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  color: var(--muted);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--d-fast), color var(--d-fast);
}
.modal-close:hover { color: var(--ink); background: var(--paper-warm); }

.modal-title {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-2);
}

.modal-lede {
  color: var(--muted);
  margin: 0 0 var(--s-6);
  font-size: var(--t-sm);
}


/* ─── buy form (inside modal) ────────────────────────────────────── */
.buy-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.bf-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.bf-group > label {
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.bf-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

.bf-pills {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.bf-pill {
  flex: 1 1 calc(25% - var(--s-2));
  min-width: 70px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  font-size: var(--t-base);
  cursor: pointer;
  text-align: center;
  transition: background var(--d-fast), color var(--d-fast), border-color var(--d-fast);
}
.bf-pill:hover { border-color: var(--accent); }
.bf-pill.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.bf-hint {
  font-size: var(--t-xs);
  color: var(--muted);
  margin: 0;
}

.buy-form input[type="email"],
.buy-form textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-base);
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.buy-form input[type="email"]:focus-visible,
.buy-form textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 138, 110, 0.18);
}
.buy-form textarea {
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
  line-height: 1.5;
}

.bf-submit {
  width: 100%;
  margin-top: var(--s-2);
}
.bf-submit:disabled { opacity: 0.55; cursor: progress; }

.bf-status {
  font-size: var(--t-sm);
  margin: 0;
  min-height: 1.2em;
  text-align: center;
}
.bf-status.err { color: #B83A2E; }
.bf-status.ok  { color: var(--accent); }

.bf-fine {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  margin: var(--s-1) 0 0;
  text-align: center;
}
.bf-fine a { color: inherit; text-decoration: underline; }


/* ─── success page ───────────────────────────────────────────────── */
/* Restore [hidden] precedence over our display: flex rules.            */
/* Without this, hidden sections still render because flex wins.         */
[hidden] { display: none !important; }

.success-main {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  padding-block: var(--s-16);
}

.success-container {
  max-width: 640px;
  text-align: center;
}

.success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}

.success-state .display {
  max-width: 18ch;
  margin-inline: auto;
  font-size: clamp(2rem, 5vw, 3.25rem);
}

.success-lede {
  max-width: 42ch;
  margin-inline: auto;
}

.success-message {
  margin: var(--s-2) auto var(--s-4);
  padding: var(--s-5) var(--s-6);
  max-width: 38ch;
  border-left: 3px solid var(--accent);
  background: var(--paper-warm);
  border-radius: var(--r-md);
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-soft);
  text-align: left;
  line-height: 1.5;
}

.success-tip {
  max-width: 46ch;
  margin-inline: auto;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--muted);
}

.success-cta {
  margin-top: var(--s-6);
}

.success-spinner {
  width: 28px;
  height: 28px;
  margin-top: var(--s-4);
  border: 2px solid var(--hairline);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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


/* ─── redeem page (recipient surface) ────────────────────────────── */
.redeem-main {
  padding-block: var(--s-16);
}

.redeem-container {
  max-width: 760px;
  text-align: center;
}

.redeem-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}

.redeem-state .display {
  max-width: 18ch;
  margin-inline: auto;
  font-size: clamp(2rem, 5vw, 3.25rem);
}

.redeem-lede {
  max-width: 46ch;
  margin-inline: auto;
}

.redeem-form {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: stretch;
  margin: var(--s-4) auto 0;
}

.redeem-form input[type="email"],
.redeem-form input[type="text"] {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-md);
  text-align: center;
}

.redeem-form input[type="text"] {
  font-family: 'JetBrains Mono', Menlo, monospace;
  letter-spacing: 0.25em;
  font-size: var(--t-lg);
}

.redeem-form input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 138, 110, 0.18);
}

.redeem-form .btn { width: 100%; }
.redeem-form .btn:disabled { opacity: 0.55; cursor: progress; }

.redeem-status {
  font-size: var(--t-sm);
  margin: 0;
  min-height: 1.2em;
  text-align: center;
}
.redeem-status.err { color: #B83A2E; }
.redeem-status.ok  { color: var(--accent); }

.redeem-resend {
  font-size: var(--t-sm);
  color: var(--muted);
  margin: 0;
}
.redeem-resend a { color: var(--accent); }


/* ─── revealed: key card ─────────────────────────────────────────── */
.key-card {
  width: 100%;
  max-width: 640px;
  margin: var(--s-6) auto var(--s-2);
  padding: var(--s-5) var(--s-6);
  background: var(--paper-warm);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  text-align: left;
}

.key-card-label {
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: var(--s-3);
}

.key-card-value {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--paper);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
}
.key-card-value code {
  flex: 1;
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: var(--t-sm);
  word-break: break-all;
  color: var(--ink);
}

.key-copy {
  flex-shrink: 0;
  padding: var(--s-2) var(--s-4);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--d-fast);
}
.key-copy:hover { background: var(--accent); border-color: var(--accent); }

.key-card-warning {
  font-size: var(--t-xs);
  color: var(--muted);
  margin: var(--s-3) 0 0;
}


/* ─── revealed: tools accordion ──────────────────────────────────── */
.redeem-subhead {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 400;
  margin: var(--s-12) 0 var(--s-2);
  text-align: center;
}

.redeem-subhead-sub {
  color: var(--muted);
  max-width: 50ch;
  margin: 0 auto var(--s-6);
  text-align: center;
  font-size: var(--t-sm);
}

.tools-accordion {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.tool {
  border-top: 1px solid var(--hairline);
  padding: var(--s-4) 0;
}
.tool:last-child {
  border-bottom: 1px solid var(--hairline);
}

.tool summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  cursor: pointer;
  list-style: none;
  padding-right: var(--s-8);
  position: relative;
}
.tool summary::-webkit-details-marker { display: none; }
.tool summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: var(--t-xl);
  color: var(--muted);
  transition: transform var(--d-fast);
}
.tool[open] summary::after { content: "−"; }
.tool summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.tool-name {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tool-name .muted {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  color: var(--muted);
  font-weight: 400;
}

.tool-tag {
  font-size: var(--t-xs);
  color: var(--accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.tool-steps {
  margin: var(--s-4) 0 var(--s-2);
  padding-left: var(--s-6);
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.65;
}
.tool-steps li { margin-bottom: var(--s-2); }
.tool-steps code {
  background: var(--paper-warm);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'JetBrains Mono', Menlo, monospace;
}
.tool-steps kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--hairline);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--paper);
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 0.85em;
  color: var(--ink);
}

.tool details p { color: var(--ink-soft); font-size: var(--t-sm); }
.tool .muted-small { color: var(--muted); font-size: var(--t-xs); }

.code-block {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--s-4);
  background: #0C0C12;
  color: #F0F0F5;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: var(--t-xs);
  line-height: 1.6;
}
.code-block code {
  white-space: pre;
  display: block;
  color: inherit;
  background: none;
  padding: 0;
}

.redeem-finefoot {
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: var(--s-12);
  text-align: center;
}


/* ─── reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card-tilt { transform: none !important; }
  .card-3d   { animation: none !important; }
  /* holo layers stay visible — just don't move */
}