/* ==========================================================================
   YaysApp — landing page styles

   The brand orange is the app's own (palette.ember400 in
   ../yaysapp/mobile/src/yaychat/design/tokens.ts). The app's cream-and-brown
   neutrals are deliberately not carried over: this page is orange and white,
   so grounds are white and the ink is a near-black with only a trace of warmth.

   Light is the default for everyone. The dark palette below is keyed to
   [data-theme='dark'] and NOT to prefers-color-scheme, so a visitor whose OS
   is in dark mode still lands on the orange-and-white page and reaches dark
   only through the header toggle. Every colour is painted explicitly from
   these tokens, which is what keeps the page from borrowing a host background.
   ========================================================================== */

:root {
  /* Brand — the app's orange (palette.ember400) is the one accent. */
  --ember:        #e5852b;
  --ember-light:  #f6b878;
  --ember-deep:   #c96a15;
  --ember-wash:   #ffeeda;

  /* Ink — near-black with only a trace of warmth, so white stays white. */
  --ink:          #1f1a16;
  --ink-soft:     #6d635b;
  --ink-faint:    #a2988f;

  /* Grounds — white pages, the palest orange for banded sections. */
  --ground:       #ffffff;
  --surface:      #fff2e5;
  --sunken:       #ffe2cb;
  --line:         #f8ddc3;

  /* Semantic */
  --gold:         #e0a33a;
  --success:      #2f9a67;

  /* Store badge */
  --pill-bg:      #1f1a16;
  --pill-ink:     #ffffff;

  /* Elevation */
  --shadow-card:  0 4px 12px rgba(31, 26, 22, 0.07);
  --shadow-raise: 0 8px 26px rgba(31, 26, 22, 0.13);
  --shadow-hero:  0 18px 50px rgba(31, 26, 22, 0.15);

  --display: 'Outfit', 'Avenir Next', 'Avenir', 'Segoe UI', system-ui, sans-serif;
  --body: 'Nunito Sans', 'Avenir Next', 'Avenir', 'Segoe UI', system-ui, sans-serif;

  /* The brand oval artwork is 1133 x 1052 — every round element shares it. */
  --oval-ratio: 1133 / 1052;
  --oval-src: url('../img/oval.png');
}

/* ==========================================================================
   Dark theme — opt-in only

   Deliberately keyed to [data-theme='dark'] and NOT to prefers-color-scheme:
   the page is orange-and-white by default whatever the OS is set to, and dark
   is something the visitor chooses from the header toggle. Only tokens are
   redefined here; no component reaches into this block.
   ========================================================================== */
:root[data-theme='dark'] {
  --ember:        #ff9a45;
  --ember-light:  #ffc48a;
  --ember-deep:   #ff9d4d;
  --ember-wash:   #3a2415;

  --ink:          #ffffff;
  --ink-soft:     #b9b1aa;
  --ink-faint:    #8b837c;

  --ground:       #141210;
  --surface:      #1e1a17;
  --sunken:       #29231f;
  --line:         #342d28;

  --gold:         #e0a33a;
  --success:      #4cb583;

  --pill-bg:      #ffffff;
  --pill-ink:     #141210;

  --shadow-card:  0 4px 12px rgba(0, 0, 0, 0.38);
  --shadow-raise: 0 8px 26px rgba(0, 0, 0, 0.48);
  --shadow-hero:  0 18px 50px rgba(0, 0, 0, 0.54);
}

/* ==========================================================================
   The brand oval

   The app's tokens are explicit that round elements "render the brand oval
   image scaled to size — never a shape drawn in code", and that coloured
   variants "tint the same image so the silhouette is always pixel-identical".
   Masking the real artwork and painting through it is the web equivalent:
   one PNG, any colour, the same hand-drawn tilt every time.
   ========================================================================== */
.oval {
  aspect-ratio: var(--oval-ratio);
  background-color: var(--ember);
  -webkit-mask-image: var(--oval-src);
  mask-image: var(--oval-src);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex: none;
}

/* A tinted oval that also carries centred content (initials, an icon). */
.oval-plate {
  position: relative;
  aspect-ratio: var(--oval-ratio);
  display: grid;
  place-items: center;
  flex: none;
}
.oval-plate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--plate, var(--ember));
  -webkit-mask-image: var(--oval-src);
  mask-image: var(--oval-src);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 0;
}
/* Labels must be elements, not bare text, or they render beneath ::before. */
.oval-plate > * { position: relative; z-index: 1; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.02em;
}

p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: min(1120px, calc(100% - 48px));
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-deep);
}

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

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.nav[data-stuck='true'] { border-bottom-color: var(--line); }

.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
}

.brand-lockup { display: flex; align-items: center; text-decoration: none; }
.brand-lockup img, .foot img { height: 30px; width: auto; display: block; }

/* The wordmark's lettering is solid black, so dark mode swaps in a recoloured
   copy rather than filtering, which would wreck the orange bubble. */
.brand-lockup .wm-dark, .foot .wm-dark { display: none; }
:root[data-theme='dark'] .wm-light { display: none; }
:root[data-theme='dark'] .wm-dark { display: block; }

.theme-toggle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.theme-toggle:hover { color: var(--ember-deep); border-color: var(--ember-light); }
.theme-toggle svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.theme-toggle .moon { display: none; }
:root[data-theme='dark'] .theme-toggle .moon { display: block; }
:root[data-theme='dark'] .theme-toggle .sun { display: none; }

.nav-links {
  display: flex;
  gap: 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
}
.nav-links a { text-decoration: none; transition: color 0.18s ease; }
.nav-links a:hover { color: var(--ember-deep); }
@media (max-width: 880px) { .nav-links { display: none; } }

.nav-right { display: flex; align-items: center; gap: 10px; }


.btn-ember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ember);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  padding: 11px 20px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  transition: background 0.18s ease, transform 0.18s ease;
}
.btn-ember:hover { background: var(--ember-deep); transform: translateY(-1px); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding: 120px 0 300px; overflow: hidden; }

/* Real brand ovals, tinted and blurred, standing in for a gradient wash. */
.hero-oval {
  position: absolute;
  background-color: var(--ember);
  -webkit-mask-image: var(--oval-src);
  mask-image: var(--oval-src);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  aspect-ratio: var(--oval-ratio);
  pointer-events: none;
  z-index: 0;
}
.hero-oval.one   { width: 620px; top: -230px; left: -190px; opacity: 0.22; filter: blur(6px); }
.hero-oval.two   { width: 300px; bottom: -140px; left: 22%; opacity: 0.16; background-color: var(--ember); }
.hero-oval.three { width: 190px; top: 54px; right: 40%; opacity: 0.16; background-color: var(--ember); }
@media (max-width: 940px) { .hero-oval.two, .hero-oval.three { display: none; } }

/* Tumbling BTCY coins — real art, but pure orange-and-white, so it can sit at
   a higher opacity than a full-colour piece would without leaving the page's
   one palette. Bottom-left, behind the copy, same layer as the plain ovals. */
.hero-coins {
  position: absolute;
  z-index: 0;
  width: 380px;
  left: -60px;
  bottom: 40px;
  opacity: 0.5;
  pointer-events: none;
  transform: rotate(-6deg);
}
:root[data-theme='dark'] .hero-coins { opacity: 0.6; }
@media (max-width: 940px) { .hero-coins { width: 240px; } }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 92px;
  align-items: center;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 52px; }
  .hero { padding: 64px 0 130px; }
}

.hero-mark { width: 76px; height: auto; display: block; margin-bottom: 26px; }

.hero h1 {
  font-size: clamp(46px, 6.4vw, 78px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.hero h1 .dot { color: var(--ember); }

/* The one word that answers "how do I earn" — styled like plain headline
   text at rest so it doesn't look like a stray link, but underlines on
   interaction and jumps to the section that actually explains it. */
/* Visible at rest, not just on hover: this is the one word in the headline
   that answers "how do I earn", and nobody hovers a heading to find out.
   Uses text-decoration rather than a border — a border box grows the inline
   box and drove the rule down into the cap-height of the line below. */
.earn-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ember) 45%, transparent);
  text-decoration-thickness: 4px;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.18s ease;
}
.earn-link:hover, .earn-link:focus-visible { text-decoration-color: var(--ember); }

.hero-sub {
  margin-top: 26px;
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--ink-soft);
  max-width: 34em;
}

.hero-note {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
/* Presence dot — tinted the brand ember, not the semantic success green, to
   keep every oval on the page in the one orange-and-white palette. Height is
   explicit rather than left to aspect-ratio: at this size, in this flex row
   (align-items:center, not stretch), the ratio never resolved and the dot
   rendered at zero height — invisible however it was colored. */
.hero-note .live { width: 10px; height: 9px; background-color: var(--ember); }

/* --- store badges --- */
.stores { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  text-decoration: none;
  padding: 11px 20px 11px 17px;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.store:hover { transform: translateY(-2px); box-shadow: var(--shadow-raise); }
/* App Store button while the iOS app is not yet published — not clickable */
.store-soon { opacity: 0.55; cursor: default; }
.store-soon:hover { transform: none; box-shadow: var(--shadow-card); }
.store svg { flex: none; fill: currentColor; }
.store-txt { display: flex; flex-direction: column; line-height: 1.15; }
.store-txt small {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
  font-weight: 600;
}
.store-txt strong {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- hero conversation illustration --- */
.convo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 32px;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: var(--shadow-hero);
}

.convo-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.convo-head .oval-plate {
  width: 42px;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
}
.convo-head-txt { display: flex; flex-direction: column; }
.convo-head-txt b { font-family: var(--display); font-size: 15.5px; }
.convo-head-txt span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ember-deep);
  font-weight: 600;
}
/* Ember, not the semantic success green — keeps this oval in the same
   orange-and-white palette as every other one on the page. Explicit height
   for the same reason as .hero-note .live: aspect-ratio doesn't resolve on
   a centered flex item this small, so it rendered invisible either color. */
.convo-head-txt span .oval { width: 8px; height: 7px; background-color: var(--ember); }

.bubble {
  max-width: 86%;
  padding: 12px 17px;
  font-size: 15.5px;
  line-height: 1.45;
  border-radius: 22px;
}
.bubble.them {
  align-self: flex-start;
  background: var(--sunken);
  color: var(--ink);
  border-bottom-left-radius: 7px;
}
.bubble.me {
  align-self: flex-end;
  background: var(--ember);
  color: #fff;
  border-bottom-right-radius: 7px;
}

.reward-chip {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding: 8px 16px 8px 9px;
  background: var(--ember-wash);
  border: 1px solid color-mix(in srgb, var(--ember) 34%, transparent);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--display);
  color: var(--ember-deep);
}
/* The points badge is the brand oval tinted amber, exactly as in-app. */
.reward-chip .oval-plate {
  width: 42px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
.section { padding: 170px 0; }
.section.tint { background: var(--surface); border-block: 1px solid var(--line); }

.section-head { max-width: 42em; margin-bottom: 80px; }
.section-head h2 {
  font-size: clamp(31px, 3.7vw, 44px);
  font-weight: 800;
  line-height: 1.06;
  margin-top: 14px;
}
.section-head p { margin-top: 18px; color: var(--ink-soft); font-size: 17.5px; }

/* ==========================================================================
   Features
   ========================================================================== */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 34px;
}

.feature {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-raise);
  border-color: color-mix(in srgb, var(--ember) 42%, var(--line));
}

/* Icon chip — brand oval tinted with the pale brand wash. */
.feature .oval-plate { width: 50px; --plate: var(--ember-wash); margin-bottom: 4px; }
.feature .oval-plate svg {
  width: 23px; height: 23px;
  stroke: var(--ember-deep);
  fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.feature h3 { font-size: 19.5px; font-weight: 700; }
.feature p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }

/* One card — the one actually about earning coins — gets a real coin
   bleeding off its corner, clipped by the card's own rounded edge. */
.points-feature { position: relative; overflow: hidden; }
.feature-art {
  position: absolute;
  z-index: 0;
  width: 110px;
  right: -18px;
  bottom: -18px;
  opacity: 0.5;
  pointer-events: none;
  transform: rotate(-10deg);
}
:root[data-theme='dark'] .feature-art { opacity: 0.6; }
/* Keep card copy above the art regardless of DOM/paint order. */
.points-feature .oval-plate, .points-feature h3, .points-feature p { position: relative; z-index: 1; }

/* ==========================================================================
   Earn ledger
   ========================================================================== */
.earn-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 96px;
  align-items: start;
}
@media (max-width: 900px) { .earn-layout { grid-template-columns: 1fr; gap: 64px; } }

.earn-copy h2 {
  font-size: clamp(31px, 3.7vw, 44px);
  font-weight: 800;
  line-height: 1.06;
  margin-top: 14px;
}
.earn-copy p { margin-top: 18px; color: var(--ink-soft); font-size: 17.5px; }
.earn-foot {
  margin-top: 26px;
  font-size: 14px;
  color: var(--ink-faint);
  border-left: 3px solid var(--ember-light);
  padding-left: 14px;
  line-height: 1.5;
}
/* Answers the "how do I actually earn" question the ledger raises — a real
   next step, not just a table of numbers with nowhere to go. */

/* How to start earning — a genuine sequence (you cannot earn before you
   install), so it is an <ol> and the numbers carry real meaning rather than
   decorating the section. */
.how {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.how li { display: flex; gap: 18px; align-items: flex-start; }

/* Built on .oval-plate rather than a fresh mask: that class already layers
   its label above the masked ::before, which a bare text node cannot do. */
.how-num {
  width: 38px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: #fff;
}

.how-txt { display: block; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.how-txt b {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}

.earn-cta { margin-top: 34px; }

.ledger {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 14px 10px;
  box-shadow: var(--shadow-card);
}
.section.tint .ledger { background: var(--ground); }

/* Real character art: the same tumbling coins as the hero. Row copy sits
   above it at z-index:1, so opacity can match the rest of the page's art
   without ever touching a point value. */
.ledger-art {
  position: absolute;
  z-index: 0;
  width: 150px;
  right: -20px;
  bottom: -20px;
  opacity: 0.5;
  pointer-events: none;
  transform: rotate(-8deg);
}
:root[data-theme='dark'] .ledger-art { opacity: 0.6; }

.ledger-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 24px;
  border-radius: 18px;
  transition: background 0.16s ease;
}
.ledger-row:hover { background: var(--sunken); }
.ledger-row + .ledger-row { box-shadow: inset 0 1px 0 var(--line); }

.ledger-row .what { flex: 1; min-width: 0; }
.ledger-row .what b {
  display: block;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
}
.ledger-row .what span { font-size: 13.5px; color: var(--ink-soft); }

/* Reward amount rides the brand oval, like the app's count bubbles. */
.ledger-row .oval-plate {
  width: 54px;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ledger-row .oval-plate.soon {
  --plate: color-mix(in srgb, var(--ink-faint) 26%, transparent);
  color: var(--ink-soft);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   Ecosystem
   ========================================================================== */
.eco {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px;
}

.eco-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 34px 28px 30px;
  border-radius: 20px;
  background: var(--ground);
  border: 1px solid var(--line);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.eco-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raise); }
.eco-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--tile-shown, var(--tile));
}


/* Product swatch — the brand oval tinted with each product's own colour. */
.eco-card .oval { width: 34px; background-color: var(--tile-shown, var(--tile)); margin-bottom: 5px; }

/* BTCY's mining lantern, from the Bitcoin Yay pack. The source art is
   red/purple/yellow, which would be the only off-palette colour on the page,
   so it is masked and painted in the brand orange exactly as .oval is. Tucked
   into the corner clear of the card's copy, at an opacity that reads as a
   watermark rather than an illustration competing with the text. */
.eco-card .btcy-art {
  position: absolute;
  right: -6px;
  bottom: -8px;
  width: 74px;
  aspect-ratio: 191 / 260;
  background-color: var(--ember);
  -webkit-mask-image: url('../img/btcy-lantern.png');
  mask-image: url('../img/btcy-lantern.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.22;
  pointer-events: none;
}
:root[data-theme='dark'] .eco-card .btcy-art { opacity: 0.3; }
/* Keep every real content element above the art regardless of paint order. */
.eco-card > *:not(.btcy-art) { position: relative; z-index: 1; }

/* EMMM (#0d1321) and Wallstreet (#23262f) are near-black and vanish on the
   dark ground; lifting every tile by a fixed amount keeps each brand's hue. */
:root[data-theme='dark'] .eco-card { --tile-shown: color-mix(in srgb, var(--tile) 74%, #ffffff 26%); }
.eco-card b { font-family: var(--display); font-size: 17px; font-weight: 700; }
.eco-card > span { font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.eco-tag {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eco-tag.live { color: var(--success); }

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.close {
  position: relative;
  padding: 128px 52px 132px;
  border-radius: 34px;
  background: linear-gradient(152deg, var(--ember) 0%, var(--ember-deep) 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-hero);
}
/* A brand oval in white, as the panel's only ornament. */
.close .oval.ornament {
  position: absolute;
  width: 460px;
  right: -140px;
  top: -180px;
  background-color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.close-in { position: relative; }
.close img { width: 62px; height: auto; margin-bottom: 20px; filter: brightness(0) invert(1); }

/* Real character art, recoloured white by the same filter — bottom-left,
   balancing the plain oval ornament up at top-right. */
.close img.close-coins {
  position: absolute;
  width: 300px;
  height: auto;
  margin-bottom: 0;
  left: -50px;
  bottom: -46px;
  opacity: 0.5;
  pointer-events: none;
  transform: rotate(10deg);
}
.close h2 { color: #fff; font-size: clamp(30px, 4.1vw, 48px); font-weight: 800; line-height: 1.04; }
.close p { margin: 18px auto 0; max-width: 30em; font-size: 18px; color: rgba(255, 255, 255, 0.9); }
.close .stores { justify-content: center; margin-top: 32px; }
.close .store { background: #ffffff; color: #1f1a16; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { position: relative; padding: 80px 0 88px; border-top: 1px solid var(--line); margin-top: 150px; }

/* Same coin motif as the hero, echoed faintly in the corner — the page's
   one closing wink at the art pack rather than a new decorative idea. Kept
   inside the padded box (no negative offset) since .foot has no rounded
   corner or overflow clip to bleed against. */
/* Specificity note: .foot img (below) sets height:30px/width:auto for the
   wordmark, and would win over a bare .foot-coins class — so this needs the
   extra "img" in the selector to actually take the size it declares. */
.foot img.foot-coins {
  position: absolute;
  z-index: 0;
  width: 110px;
  height: auto;
  right: 18px;
  bottom: 6px;
  opacity: 0.5;
  pointer-events: none;
  transform: rotate(8deg);
}
:root[data-theme='dark'] .foot img.foot-coins { opacity: 0.6; }
@media (max-width: 900px) { .foot img.foot-coins { display: none; } }
.foot-in {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: space-between;
}
.foot img { height: 26px; opacity: 0.9; }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.foot-links a { text-decoration: none; transition: color 0.18s ease; }
.foot-links a:hover { color: var(--ember-deep); }
.foot-legal {
  margin-top: 32px;
  font-size: 13px;
  color: var(--ink-faint);
  max-width: 60em;
  line-height: 1.6;
}

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal-main { padding: 86px 0 24px; }
.legal-hero { max-width: 760px; margin-bottom: 52px; }
.legal-hero .eyebrow { margin-bottom: 14px; }
.legal-hero h1 {
  font-size: clamp(42px, 6vw, 68px);
  font-weight: 800;
  line-height: 1;
}
.legal-intro { margin-top: 22px; color: var(--ink-soft); font-size: 19px; }
.legal-meta { margin-top: 18px; color: var(--ink-faint); font-size: 14px; font-weight: 600; }
.legal-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 64px; align-items: start; }
.legal-toc {
  position: sticky;
  top: 86px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.legal-toc strong { display: block; font-family: var(--display); margin-bottom: 10px; }
.legal-toc a { display: block; padding: 5px 0; color: var(--ink-soft); text-decoration: none; font-size: 14px; }
.legal-toc a:hover { color: var(--ember-deep); }
.legal-copy { max-width: 760px; }
.legal-copy section { scroll-margin-top: 100px; }
.legal-copy section + section { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line); }
.legal-copy h2 { font-size: clamp(25px, 3vw, 32px); line-height: 1.15; margin-bottom: 18px; }
.legal-copy h3 { font-size: 19px; margin: 28px 0 10px; }
.legal-copy p, .legal-copy li { color: var(--ink-soft); }
.legal-copy p + p { margin-top: 14px; }
.legal-copy ul { margin: 14px 0 0; padding-left: 22px; }
.legal-copy li + li { margin-top: 9px; }
.legal-copy a { color: var(--ember-deep); font-weight: 700; }
.legal-note {
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--ember-wash);
  border-left: 4px solid var(--ember);
  border-radius: 0 14px 14px 0;
}
@media (max-width: 820px) {
  .legal-main { padding-top: 58px; }
  .legal-layout { grid-template-columns: 1fr; gap: 38px; }
  .legal-toc { position: static; }
}

.legal-form {
  margin-top: 30px;
  padding: clamp(24px, 5vw, 38px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
}
.legal-form h2 { font-size: 25px; margin-bottom: 8px; }
.legal-form > p { color: var(--ink-soft); }
.field { margin-top: 20px; }
.field label { display: block; margin-bottom: 7px; font-family: var(--display); font-size: 14px; font-weight: 700; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
}
.field textarea { min-height: 140px; resize: vertical; }
.field-hint { margin-top: 6px; color: var(--ink-faint); font-size: 13px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; color: var(--ink-soft); font-size: 14px; }
.check-row input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--ember); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.form-button {
  border: 0;
  border-radius: 12px;
  padding: 13px 19px;
  background: var(--ember);
  color: #fff;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.form-button:hover { background: var(--ember-deep); }
.form-button:disabled { opacity: 0.55; cursor: not-allowed; }
.form-button.danger { background: #b9382f; }
.form-button.danger:hover { background: #922a24; }
.form-status { margin-top: 18px; padding: 13px 15px; border-radius: 12px; font-size: 14px; display: none; }
.form-status.show { display: block; }
.form-status.success { background: color-mix(in srgb, var(--success) 14%, var(--ground)); color: var(--success); }
.form-status.error { background: color-mix(in srgb, #b9382f 13%, var(--ground)); color: #b9382f; }
.danger-list { margin-top: 22px; padding: 20px 22px; border: 1px solid color-mix(in srgb, #b9382f 28%, var(--line)); border-radius: 16px; }
.danger-list strong { color: #b9382f; }
.faq { margin-top: 28px; }
.faq details { padding: 18px 0; border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; }
.faq details p { margin-top: 10px; color: var(--ink-soft); }

/* ==========================================================================
   Motion
   ========================================================================== */
.rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise { opacity: 1; transform: none; }
}