/* landing.css — the front of house (docs/BRAND.md).
 *
 * The ground is evannalu.com's: warm cream, near-black ink, one teal accent, a lot of space, and
 * mono section labels that are numbered. The app's pink and blue are kept for exactly one job —
 * they are the two people — so they appear on the mark, on partner identity and on the primary
 * CTA's gradient, and nowhere as decoration (§2).
 *
 * Dark mode swaps ink and cream and lifts pink/blue for contrast. Every colour is a token declared
 * on :root first and only redefined inside the media query, so nothing is defined only in the dark.
 *
 * Loaded after base.css, which it deliberately overrides: the games keep the cool-paper register,
 * the front of house does not.
 */

:root {
  /* ---- ground ---- */
  --cream: #FAF7F2;
  --paper: #FAF7F2;
  --paper-raised: #FFFFFF;
  --ink: #17181C;
  --ink-soft: #5B5E68;
  --ink-faint: #6E727D;  /* was #8B8E98: 3.27:1 on a white card, under AA for 13px; this is 4.81 */
  --line: #E7E2DA;
  --line-strong: #D8D1C6;

  /* ---- the two people ---- */
  --pink: #FF7BA3;
  --pink-tint: #FFE0EA;
  --pink-ink: #B03260;
  --blue: #5FA0FF;
  --blue-tint: #DCEBFF;
  --blue-ink: #1E5FBF;

  /* ---- the system voice ---- */
  --teal: #14A3AF;
  --teal-deep: #0C6F78;

  --shadow-soft: 0 1px 2px rgba(23, 24, 28, .04), 0 8px 28px rgba(23, 24, 28, .06);
  --shadow-lift: 0 12px 40px rgba(23, 24, 28, .10);
  /* The shell's one card shadow (base.css §tokens), warmed: the front of house lifts a card off
     cream by the same amount everywhere, and --shadow-lift stays the hover. */
  --shadow-card: 0 1px 2px rgba(23, 24, 28, .04), 0 8px 28px rgba(23, 24, 28, .06);
  --bubble-alpha: .5;
  --scrim: rgba(250, 247, 242, .82);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Lifted off near-black and warmed. #131419 is a cold, almost pure black: on a phone at night
       it reads as a void with text floating in it, and it fought the warm cream the brand uses in
       light. These are the same hues with a little more light and a red bias, so the dark theme
       reads as the same product with the lamp off rather than a different, colder one. */
    --cream: #1B1A20;
    --paper: #1B1A20;
    --paper-raised: #26242D;
    --ink: #F6F2EC;
    --ink-soft: #B4AFB8;
    --ink-faint: #9B96A1;
    --line: #383540;
    --line-strong: #4A4653;

    --pink: #FF93B4;
    --pink-tint: #3B2029;
    --pink-ink: #FFB9CE;
    --blue: #7FB4FF;
    --blue-tint: #1D2A3D;
    --blue-ink: #A8CDFF;

    --teal: #35CBD6;
    --teal-deep: #7FE3EA;

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .35);
    --shadow-lift: 0 12px 40px rgba(0, 0, 0, .5);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .35);
    --bubble-alpha: .34;
    --scrim: rgba(19, 20, 25, .82);
  }
}

/* The explicit choice, in both directions.
 *
 * This file used to carry its dark register in a bare `@media (prefers-color-scheme: dark)` and
 * nothing else, while base.css carried all three blocks. On the front page that produced the exact
 * failure Evan reported — "it seems to run a light colour scheme and then some of the text was
 * white, and I just can't see it": pick dark while the OS is light, and base.css's
 * `:root[data-theme="dark"]` (higher specificity than this file's bare `:root`) won for --ink and
 * lost for --cream, so the page painted #F6F2EC text on #FAF7F2 ground. 1.04:1. Invisible.
 *
 * The `:not([data-theme="light"])` guard makes an explicit LIGHT choice beat a dark OS, and the
 * block below makes an explicit DARK choice beat a light OS. Same shape as base.css, and the two
 * files now agree about which theme is on. */
:root[data-theme="dark"] {
    /* Lifted off near-black and warmed. #131419 is a cold, almost pure black: on a phone at night
       it reads as a void with text floating in it, and it fought the warm cream the brand uses in
       light. These are the same hues with a little more light and a red bias, so the dark theme
       reads as the same product with the lamp off rather than a different, colder one. */
    --cream: #1B1A20;
    --paper: #1B1A20;
    --paper-raised: #26242D;
    --ink: #F6F2EC;
    --ink-soft: #B4AFB8;
    --ink-faint: #9B96A1;
    --line: #383540;
    --line-strong: #4A4653;

    --pink: #FF93B4;
    --pink-tint: #3B2029;
    --pink-ink: #FFB9CE;
    --blue: #7FB4FF;
    --blue-tint: #1D2A3D;
    --blue-ink: #A8CDFF;

    --teal: #35CBD6;
    --teal-deep: #7FE3EA;

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .35);
    --shadow-lift: 0 12px 40px rgba(0, 0, 0, .5);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .35);
    --bubble-alpha: .34;
    --scrim: rgba(19, 20, 25, .82);
  }


/* ---------------------------------------------------------------- shell */

body.landing {
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--cream); padding: 12px 18px; border-radius: 0 0 8px 0;
  font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }

.wrap { width: min(1080px, 100%); margin: 0 auto; padding-inline: 20px; }
.wrap--narrow { width: min(760px, 100%); }
@media (min-width: 720px) { .wrap { padding-inline: 32px; } }

/* Numbered mono section labels — the rhythm from evannalu.com (§3). */
.label {
  font: 700 11px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  /* 11px uppercase needs 4.5:1. --teal reaches 2.85 on cream; --teal-deep reaches 5.5. */
  color: var(--teal-deep);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.label__num { color: var(--ink-faint); }
.label__num::after { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--line-strong); margin-left: 10px; vertical-align: middle; }

.link { color: var(--teal-deep); font-weight: 700; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); }
.link:hover { border-bottom-color: var(--teal); }

.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }

/* ---------------------------------------------------------------- topbar */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--scrim);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mark__dots { display: inline-flex; align-items: center; }
.mark__dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }
.mark__dot--pink { background: var(--pink); }
.mark__dot--blue { background: var(--blue); margin-left: -5px; }
.mark__word { font-weight: 800; letter-spacing: -.02em; font-size: 19px; }
.topbar__nav { display: flex; align-items: center; gap: 22px; }
.topbar__nav a:not(.btn) { color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 15px; }
.topbar__nav a:not(.btn):hover { color: var(--ink); }
@media (max-width: 719px) {
  .topbar__nav a:not(.btn) { display: none; }
}
.landing .btn-primary { background: var(--ink); color: var(--cream); }
.landing .btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--cream)); }
.landing .btn-ghost { background: var(--paper-raised); border-color: var(--line-strong); color: var(--ink); }
.landing .btn-grad { background: linear-gradient(100deg, var(--pink), var(--blue)); color: var(--on-grad); }

/* ---------------------------------------------------------------- hero */

.hero { position: relative; overflow: hidden; padding: 56px 0 64px; }
@media (min-width: 900px) { .hero { padding: 88px 0 96px; } }

.hero__inner { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.14fr .86fr; gap: 48px; } }

/* The promise is three lines and has to stay three lines: the <br>s are the rhythm, so the type is
   sized to let the longest of them ("However far apart.") fit the column rather than wrap into a
   fourth. `text-wrap: balance` is deliberately off here for the same reason. */
.hero__h1 {
  font-size: clamp(38px, 7.4vw, 60px);
  font-weight: 800; letter-spacing: -.032em; line-height: 1.04;
  margin: 0 0 20px;
  /* Hug the longest line instead of filling the column, so the headline's box is its ink — which is
     what the bubbles are kept clear of. */
  width: max-content; max-width: 100%;
}
.hero__lead { color: var(--ink-soft); font-size: 17px; line-height: 1.6; margin: 0 0 28px; max-width: 46ch; }
@media (min-width: 900px) { .hero__lead { font-size: 18px; } }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- join with a code ---- */
.join { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-raised); max-width: 420px; }
.join__label { display: block; font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.join__row { display: flex; gap: 8px; }
.join__input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--cream); color: var(--ink);
  font: 700 20px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
}
.join__input::placeholder { color: var(--ink-faint); letter-spacing: .22em; }
.join__msg { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); min-height: 1.2em; }
.join__msg[data-tone="bad"] { color: var(--pink-ink); }

/* ---- the floating messages (§4) ----
 *
 * Positions live here, not in the script, because where a bubble may sit depends entirely on where
 * the words are — and that changes at the breakpoint. Rule 2 of §4 is that they never land on
 * anything readable, so the field is defined as the space the copy does not use: the thin bands
 * above and below the hero content on a phone, and the right-hand column on a desktop, where they
 * drift up and pass behind the opaque demo card. Ten are created; the phone shows the first four.
 */
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bubble {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  max-width: 46vw;
  padding: 9px 14px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  color: var(--ink-soft);
  background: var(--blue-tint);
  will-change: transform, opacity;
  animation: drift var(--dur, 26s) linear var(--delay, 0s) infinite;
}

/* phone: only the four that fit in the hero's own top and bottom padding */
.bubble { display: none; }
.bubble:nth-child(1) { display: block; --x: 3%;  --y: 0.5%; --dur: 24s; --delay: -1s;  --dx: 8px; }
.bubble:nth-child(2) { display: block; --x: 54%; --y: 1.6%; --dur: 30s; --delay: -12s; --dx: -6px; }
.bubble:nth-child(3) { display: block; --x: 6%;  --y: 96%;  --dur: 27s; --delay: -6s;  --dx: 10px; }
.bubble:nth-child(4) { display: block; --x: 50%; --y: 97%;  --dur: 33s; --delay: -19s; --dx: -8px; }

@media (min-width: 900px) {
  /* desktop: the whole field moves to the right of the copy column */
  .bubble { display: block; }
  /* Every x stays past the copy column, which ends around 54% of the viewport at this grid. */
  .bubble:nth-child(1)  { --x: 58%; --y: 2%;  --dur: 26s; --delay: -2s;  --dx: 8px; }
  .bubble:nth-child(2)  { --x: 78%; --y: 10%; --dur: 31s; --delay: -14s; --dx: -6px; }
  .bubble:nth-child(3)  { --x: 62%; --y: 92%; --dur: 24s; --delay: -7s;  --dx: 10px; }
  .bubble:nth-child(4)  { --x: 80%; --y: 99%; --dur: 34s; --delay: -21s; --dx: -9px; }
  .bubble:nth-child(5)  { --x: 59%; --y: 46%; --dur: 29s; --delay: -4s;  --dx: 6px; }
  .bubble:nth-child(6)  { --x: 86%; --y: 62%; --dur: 22s; --delay: -16s; --dx: -7px; }
  .bubble:nth-child(7)  { --x: 68%; --y: 32%; --dur: 36s; --delay: -9s;  --dx: 9px; }
  .bubble:nth-child(8)  { --x: 61%; --y: 72%; --dur: 27s; --delay: -24s; --dx: -5px; }
  .bubble:nth-child(9)  { --x: 82%; --y: 38%; --dur: 32s; --delay: -11s; --dx: 7px; }
  .bubble:nth-child(10) { --x: 64%; --y: 56%; --dur: 25s; --delay: -18s; --dx: -10px; }
}
.bubble--pink { background: var(--pink-tint); }
/* the small tail that makes it a message and not a pill */
.bubble::after {
  content: '';
  position: absolute; bottom: 3px; left: -4px;
  width: 12px; height: 12px;
  background: inherit;
  border-bottom-right-radius: 12px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.bubble--right::after { left: auto; right: -4px; border-bottom-right-radius: 0; border-bottom-left-radius: 12px; clip-path: polygon(0 0, 100% 100%, 0 100%); }

@keyframes drift {
  0%   { transform: translate3d(0, 40px, 0) scale(.96); opacity: 0; }
  14%  { opacity: var(--bubble-alpha); }
  78%  { opacity: var(--bubble-alpha); }
  100% { transform: translate3d(var(--dx, 10px), -190px, 0) scale(1); opacity: 0; }
}

/* Reduced motion stops them dead — a static scatter, still pretty (§4 rule 3). The JS also sets
   data-motion="still" so the state is assertable, but this query is what actually governs. */
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; opacity: var(--bubble-alpha); transform: none; }
}
.bubbles[data-motion="still"] .bubble { animation: none; opacity: var(--bubble-alpha); transform: none; }

/* ---------------------------------------------------------------- the live demo */

.demo { position: relative; }
.demo__card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-lift);
}
@media (min-width: 900px) { .demo__card { padding: 26px; } }
.demo__label {
  display: flex; align-items: center; gap: 8px;
  font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 14px;
}
.demo__pip { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); flex: none; }
.demo__q { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; margin: 0 0 16px; text-wrap: balance; }
.demo__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.demo__opt {
  width: 100%; text-align: left; min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--line-strong); border-radius: 11px;
  background: var(--cream); color: var(--ink); font-size: 15px; font-weight: 600;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
.demo__opt:hover { border-color: var(--pink); }
.demo__opt:active { transform: translateY(1px); }
.demo__opt[aria-pressed="true"] { border-color: var(--pink); background: var(--pink-tint); color: var(--pink-ink); }
.demo__opt[data-partner="true"] { border-color: var(--blue); background: var(--blue-tint); color: var(--blue-ink); }
.demo__opt[aria-pressed="true"][data-partner="true"] {
  border-color: var(--teal);
  background: linear-gradient(100deg, var(--pink-tint), var(--blue-tint));
  color: var(--ink);
}
.demo[data-state="answered"] .demo__opt { pointer-events: none; }
.demo[data-state="answered"] .demo__opt:not([aria-pressed="true"]):not([data-partner="true"]) { opacity: .45; }

.demo__hint { margin: 14px 0 0; font-size: 13px; color: var(--ink-faint); }
.demo__result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.demo__verdict { margin: 0 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.demo__partner { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.demo__note { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--ink-faint); }
.demo__again { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------- sections */

.section { padding: 64px 0; }
@media (min-width: 900px) { .section { padding: 92px 0; } }
.section--band { background: var(--paper-raised); border-block: 1px solid var(--line); }
.section__h { margin: 0 0 12px; font-size: clamp(26px, 4.4vw, 38px); letter-spacing: -.025em; }
.section__lead { color: var(--ink-soft); font-size: 17px; line-height: 1.6; margin: 0 0 36px; max-width: 54ch; }
.section__more { margin: 28px 0 0; }

/* ---- shelves ---- */
.shelves { display: grid; gap: 44px; }
.shelf__head { margin-bottom: 16px; }
.shelf__title { margin: 0 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.shelf__blurb { margin: 0; font-size: 15px; color: var(--ink-soft); }
.shelf__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .shelf__items { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .shelf__items { grid-template-columns: repeat(3, 1fr); } }

.tile {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 16px; border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--cream);
  text-decoration: none; color: var(--ink);
  transition: border-color .14s ease, transform .08s ease, box-shadow .14s ease;
}
.section--band .tile { background: var(--cream); }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.tile--pink:hover { border-color: var(--pink); }
.tile--blue:hover { border-color: var(--blue); }
/* Built, but not yet: shown so the shelf reads whole, never as a link to a page that is not there. */
.tile--soon { opacity: .62; border-style: dashed; }
.tile--soon:hover { transform: none; box-shadow: none; }
.tile__soon { margin-top: 2px; font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.tile__emoji { font-size: 24px; line-height: 1; }
.tile__title { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.tile__blurb { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }

/* ---- keepsakes ---- */
.keepsakes { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 760px) { .keepsakes { grid-template-columns: repeat(3, 1fr); } }
.keepsake__art {
  height: 150px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--cream); margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  overflow: hidden;
}
/* These blocks are mixed from the live pink and blue rather than the flat tints, so they still read
   as the two people in dark mode instead of going muddy. */
.keepsake__art--strip { flex-direction: column; padding: 12px; }
.strip__cell { width: 74px; height: 26px; border-radius: 4px; }
.strip__cell--pink { background: color-mix(in srgb, var(--pink) 34%, var(--paper-raised)); }
.strip__cell--blue { background: color-mix(in srgb, var(--blue) 34%, var(--paper-raised)); }
.strip__foot { font: 700 9px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.keepsake__art--card { flex-direction: column; align-items: flex-start; padding: 22px; }
.card__line { height: 7px; width: 60%; border-radius: 4px; background: var(--line-strong); }
.card__line--wide { width: 82%; }
.card__line--short { width: 38%; }
.card__seal { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--pink) 40%, var(--paper-raised)); margin-top: 8px; }
.keepsake__art--board { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 22px; }
.board__tile { border-radius: 6px; min-height: 42px; }
.board__tile--a, .board__tile--d { background: color-mix(in srgb, var(--pink) 34%, var(--paper-raised)); }
.board__tile--b, .board__tile--c { background: color-mix(in srgb, var(--blue) 34%, var(--paper-raised)); }
/* Gowun Batang is reserved for keepsake moments (§3) — this is one. */
.keepsake__t { font-family: var(--serif); font-size: 20px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.01em; }
.keepsake__d { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

/* ---- every day (the daily question section, §02) ---- */
.everyday { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 760px) { .everyday { grid-template-columns: repeat(3, 1fr); } }
.everyday__item { padding-top: 16px; border-top: 2px solid var(--line-strong); }
.everyday__t { margin: 0 0 6px; font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.everyday__d { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

/* ---- steps ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.step { position: relative; padding-top: 18px; border-top: 2px solid var(--line-strong); }
.step__n { font: 700 12px/1 var(--mono); color: var(--teal); letter-spacing: .1em; }
.step__t { margin: 10px 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.step__d { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* ---- faq ---- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__mark { position: relative; width: 14px; height: 14px; flex: none; }
.faq__mark::before, .faq__mark::after {
  content: ''; position: absolute; background: var(--teal); border-radius: 2px;
  transition: transform .16s ease;
}
.faq__mark::before { inset: 6px 0 6px 0; height: 2px; }
.faq__mark::after { inset: 0 6px 0 6px; width: 2px; }
.faq__item[open] .faq__mark::after { transform: scaleY(0); }
.faq__a { padding: 0 0 22px; max-width: 62ch; }
.faq__a p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }

/* ---- plans (rendered only when the paywall flag is on) ---- */
.plans { padding-top: 0; }
.plan-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .plan-cards { grid-template-columns: repeat(3, 1fr); } }
.plan { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-raised); }
.plan--featured { border-color: var(--pink); box-shadow: var(--shadow-soft); }
/* Same 11px uppercase mono as .label, so the same rule applies: --teal is 2.85:1 on a white card,
   --teal-deep is 5.90. The system voice keeps its hue, the small type gets the readable member. */
.plan__eyebrow { font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); margin: 0 0 12px; }
.plan__price { margin: 0 0 4px; display: flex; align-items: baseline; gap: 8px; }
.plan__amount { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.plan__per { font-size: 15px; color: var(--ink-soft); }
.plan__then { margin: 0 0 14px; font-size: 13px; color: var(--ink-faint); }
.plan__lines { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }

/* ---- close ---- */
.section--close { padding-bottom: 96px; }
.close__mark { display: flex; justify-content: center; gap: 0; margin: 0 0 20px; }
.close__mark .mark__dot { width: 18px; height: 18px; }
.close__h { margin-bottom: 10px; }
.close__lead { margin-inline: auto; margin-bottom: 28px; }

/* ---------------------------------------------------------------- legal pages */

.legal { padding: 56px 0 80px; }
@media (min-width: 900px) { .legal { padding: 76px 0 100px; } }
.legal__h1 { font-size: clamp(30px, 5.4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; margin: 0 0 10px; text-wrap: balance; }
.legal__stamp { font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 28px; }
.legal__lead { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 40px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.legal__h2 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 36px 0 12px; }
.legal p { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 14px; max-width: 68ch; }
.legal__list { margin: 0 0 14px; padding-left: 20px; max-width: 68ch; }
.legal__list li { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 6px; }
/* Scoped rather than !important: `.legal p` would otherwise win on specificity. */
.legal p.legal__note {
  margin-top: 40px; padding: 18px 20px;
  border: 1px solid var(--line-strong); border-left: 3px solid var(--teal);
  border-radius: 10px; background: var(--paper-raised);
  font-size: 15px;
}
.legal__back { margin-top: 36px; }

/* ---------------------------------------------------------------- footer */

.footer { border-top: 1px solid var(--line); padding: 34px 0 48px; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.footer__brand { display: inline-flex; align-items: center; gap: 10px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__links a { color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 600; }
.footer__links a:hover { color: var(--ink); }
.footer__tag { margin: 0; margin-left: auto; font: 700 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 719px) { .footer__tag { margin-left: 0; width: 100%; } }

/* ================================================================ hero — daily question
 *
 * APPENDED BLOCK, owned by the doors agent (docs/FS-INTERFACE.md S2). Everything above this line
 * belongs to the shell; nothing here redefines a token, and every colour is one of theirs.
 *
 * The card is the product's own daily question standing where the quiz demo used to. It is the
 * emotional centre of the screen, so it obeys STYLE-GUIDE §03: the question is set in the serif and
 * is the largest thing on the card — larger than the button, larger than the kicker, and second
 * only to the headline beside it.
 *
 * Measured pairings (§02 asks for the ratio, not a promise):
 *   --teal-deep on --paper-raised   5.90:1 light / 7.9:1 dark   the kicker, 11px mono
 *   --ink       on --paper-raised  16.60:1 light / 14.3:1 dark  the question
 *   --ink-soft  on --paper-raised   6.29:1 light / 6.0:1 dark   the hint
 *   --ink-faint on --cream          4.81:1 light / 5.3:1 dark   the field text and the seal line
 *   --on-grad   on --grad           7.5:1 pink end, 6.9:1 blue  the one gradient button on the page
 */

.hero__count {
  margin: 16px 0 0;
  /* Mono because it is the catalog counting itself out loud (§03: counts are the instrument
     panel). Small, so a phone gets it in two short lines rather than a block of terminal. */
  font: 400 13px/1.6 var(--mono);
  color: var(--ink-soft);
  max-width: 42ch;
}

.daily { position: relative; }
.daily__card {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 22px 22px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
@media (min-width: 900px) { .daily__card { padding: 30px 28px 26px; } }

/* The two people, as a hairline across the top of the card. This is the one decorative use of the
   pair on the page and it carries no text, so §02's "never white on pink or blue" cannot apply. */
.daily__card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(100deg, var(--pink), var(--blue));
}

.daily__kicker {
  margin: 0 0 18px;
  font: 700 11px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

/* Gowun Batang, because this is a question worth answering (§03) and the keepsake voice is what
   makes it read as the product rather than as a form. */
.daily__q {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(21px, 3.1vw, 27px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
}
.daily__hint { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

/* The shape of the answer, not an answer box. Nothing on a marketing page should look like it will
   keep what you type into it — this one plainly will not, and says what the real one asks for. */
.daily__field {
  margin: 0 0 14px;
  min-height: 82px;
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink-faint);
  font-size: 15px;
  line-height: 1.5;
}

.daily__go { width: 100%; }
.daily__seal { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-faint); }

/* ---- the quiz demo, one section down (§03 of the page, "and when you are both free") ----
   Same card, same script; it simply is not the widest thing in a 1080px column any more. */
#do .demo { max-width: 560px; margin: 0 0 44px; }