/* ─────────────────────────────────────────────────────────────
   Kartaz · "Pull up a chair" landing — layout + responsive system
   Ported from the Claude Design handoff (landing.css), shipped as a
   zero-build static site. Decorative SVG art is built in scenes.js;
   everything structural + responsive lives here.
   ───────────────────────────────────────────────────────────── */

:root {
  --k-surface: #F5EFE3;       /* Linen   */
  --k-surface-soft: #EDE2CB;  /* Oat     */
  --k-surface-tv: #3B3026;    /* Cocoa   */
  --k-ink: #2D2620;           /* Walnut  */
  --k-primary: #8AA876;       /* Sage    */
  --k-primary-deep: #5C7A4F;  /* Pine    */
  --k-accent-warm: #E2A07A;   /* Clay    */
  --k-accent-cool: #7B9CC0;   /* Blueberry */
  --k-success: #6B8E5A;       /* Moss    */
  --k-warn: #D88A6A;          /* Apricot */

  --k-ink-04: rgba(45,38,32,0.04);
  --k-ink-06: rgba(45,38,32,0.06);
  --k-ink-08: rgba(45,38,32,0.08);
  --k-ink-10: rgba(45,38,32,0.10);
  --k-ink-14: rgba(45,38,32,0.14);
  --k-ink-20: rgba(45,38,32,0.20);
  --k-ink-40: rgba(45,38,32,0.40);
  --k-ink-55: rgba(45,38,32,0.55);
  --k-ink-70: rgba(45,38,32,0.70);
  --k-surface-08: rgba(245,239,227,0.08);
  --k-surface-14: rgba(245,239,227,0.14);
  --k-surface-20: rgba(245,239,227,0.20);
  --k-surface-40: rgba(245,239,227,0.40);
  --k-surface-60: rgba(245,239,227,0.60);
  --k-surface-80: rgba(245,239,227,0.80);

  --k-font-display: "Fraunces", Georgia, serif;
  --k-font-body: "Nunito", ui-rounded, -apple-system, sans-serif;
  --k-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --k-shell: 1200px;
  --k-pad: 40px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--k-surface);
  font-family: var(--k-font-body);
  color: var(--k-ink);
  font-weight: 500;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--k-primary); color: var(--k-surface); }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong { color: var(--k-ink); font-weight: 800; }

/* ── wordmark ──────────────────────────────────────────── */
.wordmark {
  font-family: var(--k-font-display); font-weight: 600;
  line-height: 1; letter-spacing: -0.025em; color: var(--k-ink);
  display: inline-block;
}
.wm-accent { color: var(--k-primary); }
.brand { display: flex; align-items: center; }

/* ── shell ─────────────────────────────────────────────── */
.shell { max-width: var(--k-shell); margin: 0 auto; padding-left: var(--k-pad); padding-right: var(--k-pad); }
.eyebrow {
  font-family: var(--k-font-mono); font-size: 12px; letter-spacing: 0.16em;
  color: var(--k-primary-deep); font-weight: 700; text-transform: uppercase;
}
.serif { font-family: var(--k-font-display); }
.ital { font-family: var(--k-font-display); font-style: italic; font-weight: 400; }

/* Mexico launch promotion */
.sale-banner,
.sale-only { display: none; }
.regular-only { display: inline; }

.mx-sale-active .sale-banner {
  display: block;
  padding: 13px var(--k-pad);
  background: var(--k-ink);
  color: var(--k-surface);
  border-bottom: 3px solid var(--k-accent-warm);
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

.sale-banner__label {
  color: var(--k-accent-warm);
  font-family: var(--k-font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mx-sale-active .sale-banner a {
  margin-left: 8px;
  color: var(--k-accent-warm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mx-sale-active .sale-only { display: inline; }
.mx-sale-active .regular-only { display: none; }

.hero-sale {
  width: 100%;
  margin-top: 28px;
  padding: 18px 20px;
  align-items: center;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  border-radius: 20px;
  background: var(--k-surface-soft);
  border: 1px solid var(--k-primary-deep);
  box-shadow: 0 18px 40px -24px var(--k-ink-20);
  text-align: left;
  transition: box-shadow 150ms ease;
}

.mx-sale-active .hero-sale { display: grid; }

.hero-sale:hover {
  box-shadow: 0 20px 42px -20px var(--k-ink-40);
}

.hero-sale:focus-visible {
  outline: 3px solid var(--k-primary-deep);
  outline-offset: 3px;
  box-shadow: 0 20px 42px -20px var(--k-ink-40);
}

.hero-sale__eyebrow {
  grid-column: 1 / -1;
  color: var(--k-primary-deep);
  font-family: var(--k-font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero-sale__body {
  display: flex;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  flex-direction: column;
}

.hero-sale__title {
  display: block;
  font-family: var(--k-font-display);
  font-size: clamp(24px, 2.3vw, 28px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}

.hero-sale__title strong {
  color: var(--k-primary-deep);
  font-weight: 800;
  white-space: nowrap;
}

.hero-sale__value {
  display: block;
  margin-top: 4px;
  color: var(--k-ink-70);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.hero-sale__was {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.hero-sale__cta {
  display: inline-flex;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--k-ink);
  color: var(--k-surface);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.bundle-was {
  font-family: var(--k-font-mono);
  font-size: 12px;
  color: var(--k-ink-55);
  text-decoration: line-through;
  white-space: nowrap;
}

.sale-disclosure {
  margin-left: 4px;
  color: var(--k-ink-70);
  font-weight: 800;
}

@media (max-width: 600px) {
  .mx-sale-active .sale-banner {
    padding: 11px var(--k-pad);
    font-size: 13px;
  }

  .sale-banner__label {
    display: block;
    margin-bottom: 4px;
  }

  .mx-sale-active .sale-banner a {
    display: block;
    margin: 4px 0 0;
  }

  .hero-sale {
    max-width: 100%;
    padding: 18px;
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
    gap: 12px;
  }

  .hero-sale__eyebrow {
    grid-column: 1;
    grid-row: auto;
  }

  .hero-sale__body {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .hero-sale__cta {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
    min-height: 44px;
    padding: 12px 16px;
  }
}

/* ── nav ───────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  transition: background 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease;
  border-bottom: 0.5px solid transparent;
}
.nav.scrolled {
  background: rgba(245,239,227,0.9);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 0.5px solid var(--k-ink-10);
}
.nav-inner {
  max-width: var(--k-shell); margin: 0 auto;
  padding: 16px var(--k-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-links { display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: 700; }
.nav-links a { color: var(--k-ink-70); transition: color 150ms ease; }
.nav-links a:hover { color: var(--k-ink); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 999px; font-weight: 800; letter-spacing: -0.01em;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-lg { padding: 16px 26px; font-size: 16px; border-radius: 16px; }
.btn-ink { background: var(--k-ink); color: var(--k-surface); }
.btn-ink:hover { background: #1f1a16; }
.btn-primary { background: var(--k-primary); color: var(--k-surface); box-shadow: 0 8px 20px -8px rgba(90,120,75,0.6); }
.btn-primary:hover { background: var(--k-primary-deep); }
.btn-ghost { background: var(--k-surface); color: var(--k-ink); border: 1px solid var(--k-ink-20); }
.btn-ghost:hover { border-color: var(--k-ink-40); }
.btn-on-dark { background: var(--k-surface-14); color: var(--k-surface); border: 1px solid var(--k-surface-20); }
.btn-on-dark:hover { background: var(--k-surface-20); }

/* ── language switch ───────────────────────────────────── */
.nav-right { display: flex; align-items: center; gap: 14px; }
.lang-switch {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: var(--k-ink-06); border: 0.5px solid var(--k-ink-10);
  font-family: var(--k-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
}
.lang-switch a, .lang-switch__on {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 5px 8px; border-radius: 999px;
  transition: background 150ms ease, color 150ms ease;
}
.lang-switch__on { background: var(--k-surface); color: var(--k-ink); box-shadow: 0 1px 2px rgba(45,38,32,0.10); }
.lang-switch a { color: var(--k-ink-55); }
.lang-switch a:hover { color: var(--k-ink); background: var(--k-ink-06); }

/* ── hero ──────────────────────────────────────────────── */
.hero { position: relative; }
.hero-inner {
  max-width: var(--k-shell); margin: 0 auto; padding: 44px var(--k-pad) 96px;
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: 52px; align-items: center;
}
.hero-h1 {
  font-family: var(--k-font-display); font-weight: 500;
  font-size: clamp(48px, 7vw, 92px); line-height: 0.98; letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero-sub {
  font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; margin-top: 24px; max-width: 520px;
  color: var(--k-ink-70); font-weight: 500; text-wrap: pretty;
}
.hero-ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero-micro {
  display: flex; align-items: center; gap: 16px; margin-top: 28px;
  font-size: 13px; color: var(--k-ink-55); font-weight: 700; flex-wrap: wrap;
}
.hero-micro .sep { width: 1px; height: 14px; background: var(--k-ink-20); }
.hero-art { position: relative; min-height: 700px; overflow: hidden; }

/* real-screenshot device frames */
.dev { position: relative; flex-shrink: 0; }
.dev img { display: block; width: 100%; height: auto; }
.dev-ipad { background: #191510; border-radius: 18px; padding: 8px; box-shadow: 0 30px 64px -24px rgba(45,38,32,0.55), 0 0 0 0.5px rgba(0,0,0,0.45); }
.dev-ipad img { border-radius: 10px; }
.dev-iphone { background: #15110d; border-radius: 18px; padding: 4px; box-shadow: 0 18px 34px -14px rgba(45,38,32,0.5), 0 0 0 0.5px rgba(0,0,0,0.45); }
.dev-iphone img { border-radius: 15px; }

/* SceneFit — scales a fixed-size design scene down to fit its column */
.scenefit { width: 100%; display: flex; justify-content: center; }
.scenefit-inner { transform-origin: top center; flex-shrink: 0; }

/* badge chips above headline */
.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.tag {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  background: var(--k-surface-soft); border: 0.5px solid var(--k-ink-10); color: var(--k-ink-70);
}
.tag .dot { width: 7px; height: 7px; border-radius: 50%; }

/* ── section scaffolding ───────────────────────────────── */
.section { padding: clamp(72px, 9vw, 120px) 0; }
.section-soft { background: var(--k-surface-soft); border-top: 0.5px solid var(--k-ink-10); border-bottom: 0.5px solid var(--k-ink-10); }
.section-dark { background: var(--k-surface-tv); color: var(--k-surface); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
.sec-title {
  font-family: var(--k-font-display); font-weight: 500;
  font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.03em; line-height: 1.04; margin-top: 14px;
  text-wrap: balance; max-width: 760px;
}
.sec-aside { font-size: 15px; color: var(--k-ink-55); font-weight: 600; max-width: 320px; text-wrap: pretty; flex-shrink: 0; }
.section-dark .eyebrow { color: var(--k-accent-warm); }
.section-dark .sec-aside { color: var(--k-surface-60); }

/* ── how it works ──────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  position: relative; padding: 30px; border-radius: 22px;
  background: var(--k-surface); border: 0.5px solid var(--k-ink-10);
  display: flex; flex-direction: column; min-height: 380px;
}
.step .num { font-family: var(--k-font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--k-ink-55); font-weight: 700; }
/* Sized for the real device shots, not the old flat icons: a framed phone is
   ~230pt tall on its own, and step 03 stacks a fan of them under the iPad. */
.step .art { margin: 22px 0 24px; height: 280px; }
.step h3 { font-family: var(--k-font-display); font-size: clamp(22px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.step p { margin-top: 10px; font-size: 15px; color: var(--k-ink-70); line-height: 1.5; font-weight: 500; text-wrap: pretty; }

/* ── games ─────────────────────────────────────────────── */
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.game {
  background: var(--k-surface); border: 0.5px solid var(--k-ink-10); border-radius: 24px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.game:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(45,38,32,0.3); }
.game-art { height: 300px; position: relative; overflow: hidden; border-bottom: 0.5px solid var(--k-ink-10); }
.game-body { padding: 26px; flex: 1; display: flex; flex-direction: column; }
.game-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pill {
  display: inline-flex; align-self: flex-start; padding: 4px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--k-ink-06); color: var(--k-ink-70);
}
.game-price { font-family: var(--k-font-mono); font-size: 11px; color: var(--k-ink-55); letter-spacing: 0.05em; font-weight: 700; white-space: nowrap; }
.game h3 { font-family: var(--k-font-display); font-size: clamp(26px, 2.4vw, 31px); font-weight: 600; letter-spacing: -0.025em; margin-top: 14px; }
.game p { margin-top: 9px; font-size: 14.5px; color: var(--k-ink-70); line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.game-seats { margin-top: auto; padding-top: 16px; font-family: var(--k-font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--k-ink-55); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.seat-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.bundle-note {
  margin-top: 28px; padding: 18px 26px; border-radius: 16px;
  background: var(--k-surface); border: 0.5px dashed var(--k-ink-20);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.bundle-left { display: flex; align-items: center; gap: 16px; }
.suit-row { display: flex; }
.suit { display: block; }
.bundle-title { font-size: 15px; font-weight: 800; }
.bundle-sub { font-size: 13.5px; color: var(--k-ink-55); font-weight: 600; margin-top: 2px; }

/* ── game-night band ───────────────────────────────────────────
   Full-bleed photo with the copy anchored to the bottom. The scrim is light at
   the top so the family and the TV stay visible, and heavy at the bottom so the
   words have something to sit on. */
.gamenight {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 580px; display: flex; align-items: flex-end;
}
.gamenight-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  /* The shot is symmetric: TV high, the row of raised phones through the middle,
     heads along the bottom. Hold the TV and the phones; the crop can eat the floor. */
  object-position: center 28%;
}
.gamenight-scrim {
  position: absolute; inset: 0; z-index: -1;
  /* Darker on the left, where the words go, so they never have to sit on a face. */
  background:
    linear-gradient(180deg, rgba(45,38,32,0.10) 0%, rgba(45,38,32,0.24) 40%,
                            rgba(45,38,32,0.74) 80%, rgba(45,38,32,0.94) 100%),
    linear-gradient(90deg, rgba(45,38,32,0.62) 0%, rgba(45,38,32,0.30) 34%,
                           rgba(45,38,32,0.00) 58%);
}
/* .shell is a flex item here, so it shrinks to its content and auto-margins centre
   it straight onto the couch. Make it fill the row, then max-width + auto margins
   do what they normally do and the copy lands on the empty wall. */
.gamenight-inner { position: relative; width: 100%; padding-top: 140px; padding-bottom: 60px; }
.gamenight .eyebrow { color: var(--k-accent-warm); }
.gamenight-h2 {
  font-family: var(--k-font-display); font-weight: 500;
  font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.03em;
  color: var(--k-surface); margin-top: 14px; text-wrap: balance;
}
.gamenight-sub {
  margin-top: 18px; max-width: 540px;
  font-size: 16px; line-height: 1.55; font-weight: 500;
  color: rgba(245,239,227,0.80); text-wrap: pretty;
}
@media (max-width: 960px) {
  .gamenight { min-height: 480px; }
  /* Portrait crops tighten around the middle of the frame; hold the couch in shot. */
  .gamenight-photo { object-position: 68% center; }
  .gamenight-inner { padding-top: 100px; padding-bottom: 44px; }
}

/* ── why different ─────────────────────────────────────── */
.whys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--k-surface-20); border: 0.5px solid var(--k-surface-20); border-radius: 22px; overflow: hidden; }
.why { padding: 32px; background: var(--k-surface-tv); min-height: 220px; }
.why .ic {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--k-surface-08); border: 0.5px solid var(--k-surface-20);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--k-font-display); font-size: 22px; color: var(--k-accent-warm);
}
.why h3 { font-family: var(--k-font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin-top: 20px; line-height: 1.2; color: var(--k-surface); }
.why p { margin-top: 8px; font-size: 14px; color: var(--k-surface-60); line-height: 1.55; font-weight: 500; text-wrap: pretty; }

/* ── faq ───────────────────────────────────────────────── */
.faq-wrap { max-width: 860px; margin: 0 auto; }
.faq-item { border-bottom: 0.5px solid var(--k-ink-14); }
.faq-q {
  width: 100%; text-align: left; padding: 26px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-family: var(--k-font-display); font-size: clamp(19px, 2vw, 23px); font-weight: 600; letter-spacing: -0.02em; color: var(--k-ink);
}
.faq-q .mk { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--k-ink-20); display: flex; align-items: center; justify-content: center; transition: transform 220ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease; font-size: 18px; color: var(--k-ink-55); }
.faq-item.open .faq-q .mk { transform: rotate(45deg); background: var(--k-primary); color: var(--k-surface); border-color: var(--k-primary); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height 280ms ease; }
.faq-a-inner { padding: 0 0 26px; font-size: 16px; line-height: 1.6; color: var(--k-ink-70); font-weight: 500; max-width: 680px; text-wrap: pretty; }

/* ── download / footer ─────────────────────────────────── */
.cta-card {
  position: relative; overflow: hidden; border-radius: 28px;
  background: var(--k-surface-tv); color: var(--k-surface);
  padding: clamp(48px, 6vw, 76px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center;
}
.cta-deco { position: absolute; inset: 0; overflow: hidden; border-radius: 28px; pointer-events: none; }
.cta-copy { position: relative; z-index: 1; min-width: 0; }
.cta-h2 { font-family: var(--k-font-display); font-weight: 500; font-size: clamp(34px, 4.4vw, 54px); letter-spacing: -0.03em; line-height: 1.04; color: var(--k-surface); text-wrap: balance; margin-top: 14px; }
.cta-sub { font-size: 17px; line-height: 1.55; margin-top: 20px; color: var(--k-surface-60); font-weight: 500; max-width: 460px; text-wrap: pretty; }
.cta-micro { margin-top: 22px; display: flex; align-items: center; gap: 10px; font-family: var(--k-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--k-surface-60); font-weight: 700; flex-wrap: wrap; }
.cta-micro-sep { width: 1px; height: 12px; background: var(--k-surface-20); }
.cta-seats { position: relative; z-index: 1; min-width: 0; display: flex; align-items: flex-end; justify-content: center; gap: 10px; }

.footer { padding: 64px 0 56px; }
.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-brand { max-width: 300px; }
.footer-blurb { margin-top: 16px; font-size: 14.5px; color: var(--k-ink-70); font-weight: 500; line-height: 1.55; text-wrap: pretty; }
.footer-suits { margin-top: 18px; gap: 12px; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col h4 { font-family: var(--k-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-ink-55); font-weight: 700; margin-bottom: 14px; }
.footer-col a { display: block; font-size: 14px; color: var(--k-ink-70); font-weight: 600; padding: 5px 0; transition: color 150ms ease; }
.footer-col a:hover { color: var(--k-ink); }
.footer-base { margin-top: 48px; padding-top: 24px; border-top: 0.5px solid var(--k-ink-10); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--k-ink-55); font-weight: 600; }

/* ── responsive ────────────────────────────────────────── */
@media (min-width: 961px) {
  .mx-sale-active .hero-art { align-self: start; }
}

@media (max-width: 960px) {
  :root { --k-pad: 28px; }
  .hero-inner { grid-template-columns: 1fr; gap: 12px; padding-top: 28px; padding-bottom: 72px; }
  .hero-art { min-height: 360px; margin-top: 16px; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; }
  .games { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .whys { grid-template-columns: 1fr 1fr; }
  .cta-card { grid-template-columns: minmax(0, 1fr); }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .nav-links { display: none; }
}
@media (max-width: 600px) {
  :root { --k-pad: 20px; }
  .whys { grid-template-columns: 1fr; }
  .hero-micro { gap: 10px; font-size: 12px; }
  .hero-micro .sep { display: none; }
  .btn-lg { padding: 15px 22px; font-size: 15px; }
}

/* ── load entrance (progressive, reduced-motion safe) ──────
   Content is visible by default; .js-anim is added by app.js so a
   no-JS render still shows everything. */
.js-anim .rise > * { opacity: 0; transform: translateY(14px); animation: k-rise 640ms cubic-bezier(0.22,0.61,0.36,1) forwards; }
.js-anim .rise > *:nth-child(1) { animation-delay: 60ms; }
.js-anim .rise > *:nth-child(2) { animation-delay: 140ms; }
.js-anim .rise > *:nth-child(3) { animation-delay: 220ms; }
.js-anim .rise > *:nth-child(4) { animation-delay: 300ms; }
.js-anim .rise > *:nth-child(5) { animation-delay: 380ms; }
@keyframes k-rise { to { opacity: 1; transform: none; } }

@keyframes k-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

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

/* ── Store badges ──────────────────────────────────────────────
   Live App Store badges reused on the hero, #get CTA, and phone download funnel.
   Black pills with Apple's mark, readable on both the linen hero and cocoa card. */
.store-cta { flex-direction: column; align-items: flex-start; gap: 14px; }
.store-badges { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.appstore-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 18px; border-radius: 13px;
  background: #000; color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 12px 26px -14px rgba(0,0,0,0.65);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
a.appstore-badge:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -16px rgba(0,0,0,0.75); }
.appstore-badge:active { transform: translateY(0); }
.appstore-badge--android { border-color: rgba(255,255,255,0.3); }
.appstore-badge__logo { width: 27px; height: 27px; flex-shrink: 0; }
.appstore-badge__txt { display: flex; flex-direction: column; line-height: 1; text-align: left; }
.appstore-badge__sm { font-size: 11px; font-weight: 500; letter-spacing: 0.01em; }
.appstore-badge__lg { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; }
.store-cta__note { font-size: 13px; color: var(--k-ink-55); font-weight: 700; max-width: 420px; text-wrap: pretty; }
.cta-card .store-cta__note { color: var(--k-surface-60); }

/* ── hero intent cards (Host vs Join) ───────────────────────────
   Two doors instead of three same-looking badges: the visitor picks by what
   they're here to do, not by which app name they've already learned. */
.hero-get { margin-top: 32px; }
.intents { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.intent {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 22px; border-radius: 20px;
  background: #FFFCF6; border: 0.5px solid var(--k-ink-10);
}
/* Host is the purchase path, so it carries the accent weight. */
.intent--host { border: 1px solid rgba(138,168,118,0.5); box-shadow: 0 18px 38px -26px rgba(92,122,79,0.55); }
.intent__tag {
  font-family: var(--k-font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-ink-55);
}
.intent--host .intent__tag { color: var(--k-primary-deep); }
.intent__title {
  font-family: var(--k-font-display); font-size: 25px; font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.1; margin-top: 8px;
}
.intent__sub { margin-top: 7px; margin-bottom: 16px; font-size: 13.5px; line-height: 1.5; color: var(--k-ink-70); font-weight: 500; text-wrap: pretty; }
/* The two cards carry different amounts of copy. Pin the badge to the bottom so
   the download buttons line up across both instead of floating at odd heights. */
.intent .appstore-badge { margin-top: auto; }
.intent__foot { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--k-ink-40); }
.intent-android {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 13px; font-weight: 700; color: var(--k-ink-55);
  transition: color 150ms ease;
}
.intent-android:hover { color: var(--k-ink); }

/* ── pricing on the game cards ─────────────────────────────────── */
.game-price {
  font-family: var(--k-font-mono); font-size: 13px; color: var(--k-ink);
  letter-spacing: 0.02em; font-weight: 700; white-space: nowrap;
}
.game-cta {
  margin-top: 14px; padding-top: 14px; border-top: 0.5px solid var(--k-ink-10);
  font-size: 13.5px; font-weight: 800; color: var(--k-primary-deep);
  transition: gap 150ms ease, color 150ms ease;
}
.game-cta:hover { color: var(--k-ink); }
.bundle-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bundle-price { font-family: var(--k-font-mono); font-size: 15px; font-weight: 700; }
.bundle-save {
  padding: 3px 9px; border-radius: 999px; background: var(--k-primary); color: #fff;
  font-family: var(--k-font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.price-note {
  margin-top: 18px; max-width: 720px;
  font-size: 13px; line-height: 1.6; color: var(--k-ink-55); font-weight: 600; text-wrap: pretty;
}

/* ── cross-device handoff (QR + share) ─────────────────────────── */
.handoff { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.handoff-row { display: flex; align-items: center; gap: 16px; }
.handoff-qr {
  flex-shrink: 0; width: 96px; height: 96px; padding: 8px; border-radius: 12px;
  background: var(--k-surface); box-shadow: 0 10px 22px -14px rgba(0,0,0,0.6);
}
.handoff-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.handoff-note { margin-top: 9px; font-size: 12.5px; font-weight: 700; color: var(--k-surface-60); text-wrap: pretty; }
.share-row { margin-top: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-status { font-size: 12.5px; font-weight: 700; color: var(--k-primary); min-height: 1em; }

@media (max-width: 600px) {
  .intents { grid-template-columns: 1fr; }
  .handoff-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── Android waitlist ───────────────────────────────────────── */
.android-waitlist {
  position: relative; z-index: 1; margin-top: 28px; max-width: 500px;
  padding: 22px; border-radius: 20px;
  background: var(--k-surface-08); border: 1px solid var(--k-surface-20);
}
.waitlist-copy h3 {
  font-family: var(--k-font-display); font-size: 24px; line-height: 1.12;
  letter-spacing: -0.02em; color: var(--k-surface); margin-top: 8px;
}
.waitlist-copy p {
  margin-top: 8px; font-size: 14px; line-height: 1.45;
  color: var(--k-surface-60); font-weight: 600; text-wrap: pretty;
}
.waitlist { position: relative; margin-top: 16px; }
.waitlist-label {
  font-family: var(--k-font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--k-accent-warm); font-weight: 800;
}
.waitlist-row { display: flex; gap: 10px; flex-wrap: wrap; }
.waitlist-input {
  flex: 1 1 220px; min-width: 0;
  padding: 15px 18px; border-radius: 16px;
  background: var(--k-surface-08); color: var(--k-surface);
  border: 1px solid var(--k-surface-20);
  font-family: var(--k-font-body); font-size: 16px; font-weight: 600;
  transition: border-color 150ms ease, background 150ms ease;
}
.waitlist-input::placeholder { color: var(--k-surface-40); font-weight: 500; }
.waitlist-input:focus { outline: none; border-color: var(--k-accent-warm); background: var(--k-surface-14); }
.waitlist-btn { flex-shrink: 0; }
.waitlist-btn:disabled { opacity: 0.6; cursor: default; }
.waitlist-hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.waitlist-note { margin-top: 13px; font-size: 12.5px; color: var(--k-surface-60); font-weight: 600; line-height: 1.5; text-wrap: pretty; }
.waitlist-note a { color: var(--k-surface-80); text-decoration: underline; text-underline-offset: 2px; }
.waitlist.is-error .waitlist-input { border-color: var(--k-warn); background: var(--k-surface-14); }
.waitlist-done { display: none; align-items: center; gap: 13px; padding: 16px 18px; border-radius: 16px; background: var(--k-surface-08); border: 1px solid var(--k-surface-20); }
.waitlist.is-done .waitlist-row,
.waitlist.is-done .waitlist-hp { display: none; }
.waitlist.is-done .waitlist-done { display: flex; }
.waitlist-done .check { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--k-primary); color: var(--k-surface); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.waitlist-done-txt { font-size: 14.5px; font-weight: 800; color: var(--k-surface); line-height: 1.25; }
.waitlist-done-txt span { display: block; font-size: 13px; font-weight: 500; color: var(--k-surface-60); margin-top: 3px; }