/* ─────────────────────────────────────────────────────────────
   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; }

/* ── keyboard focus ────────────────────────────────────────
   Every interactive thing on the page is a restyled link or a bare button, so
   without this a keyboard user gets whatever the UA draws over a custom shape,
   and on the email field nothing at all (it sets outline:none). One ring, in the
   accent, switching to clay on the dark panels where pine would disappear.
   :focus-visible only, so a mouse click never paints a ring. */
:focus-visible {
  outline: 2px solid var(--k-primary-deep);
  outline-offset: 3px;
  border-radius: 6px;
}
.section-dark :focus-visible,
.cta-card :focus-visible,
.gamenight :focus-visible { outline-color: var(--k-accent-warm); }
::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; }

/* ── 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; }
/* Named areas so the download block is its own grid item: on desktop it sits
   under the copy (visually identical to the old single column), on phones it
   moves BELOW the hero art, so a first-time visitor sees the product before
   being asked to pick an app. */
.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);
  grid-template-areas: "copy art" "get art";
  column-gap: 52px; row-gap: 0; align-items: center;
}
/* copy hugs the row boundary from above, get from below, so the slack from the
   taller art column lands outside the copy block, not between sub and CTAs. */
.hero-copy { grid-area: copy; align-self: end; }
.hero-inner > .hero-get { grid-area: get; align-self: start; }
.hero-art { grid-area: art; }
.hero-h1 {
  font-family: var(--k-font-display); font-weight: 500;
  /* Sized so the longest line of the headline ("Your living room") clears the
     hero's left column on one line. At 92px it wrapped, turning a 3-line
     headline into a 4-line one and pushing the whole hero down. */
  font-size: clamp(44px, 6.2vw, 80px); 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; }

/* ── hero: stacked captures + the game picker ──────────────────
   Each slot ships every game's capture stacked in one frame. The first layer is
   in flow and sets the height; the rest sit on top of it, so switching games
   cross-fades and can never reflow the scene. */
.hero-swap { position: relative; }
.hero-swap__l { display: block; width: 100%; height: auto; opacity: 0; transition: opacity 380ms ease; }
.hero-swap__l + .hero-swap__l { position: absolute; top: 0; left: 0; }
.hero-swap__l.is-on { opacity: 1; }

/* The picker: three game names under the scene, not a carousel. Switching is the
   visitor's call, so the page never animates out from under someone reading it. */
.hero-pick {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center; margin-top: 22px;
}
.hero-pick__lead {
  font-family: var(--k-font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--k-ink-40); font-weight: 700;
  margin-right: 4px;
}
.hero-pick__btn {
  padding: 8px 15px; border-radius: 999px;
  font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--k-ink-55); background: transparent;
  border: 1px solid var(--k-ink-10);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.hero-pick__btn:hover { color: var(--k-ink); border-color: var(--k-ink-20); }
.hero-pick__btn[aria-pressed="true"] {
  color: var(--k-surface); background: var(--k-ink); border-color: var(--k-ink);
}

/* ── hero entrance: the phones are dealt in ────────────────────
   The headline promises people arriving ("Everyone's already in"), so the scene
   performs it once on load: the table lands, then the hands, then the seat count.
   `translate` is its own property, so it composes with the inline rotate each
   phone already carries instead of fighting it. */
.js-anim .hero-deal {
  opacity: 0; translate: 0 42px;
  animation: k-deal 660ms cubic-bezier(0.2, 0.72, 0.28, 1) forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 220ms);
}
@keyframes k-deal { to { opacity: 1; translate: 0 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); }
/* The global `strong { color: var(--k-ink) }` is walnut, which on a cocoa panel
   is *darker* than the body text around it: emphasis rendered as a smudge. It hit
   the "play money" phrase in Why Kartaz, which is the one claim that has to be
   legible. Every dark surface flips strong back to linen. */
.section-dark strong, .cta-card strong, .gamenight strong, .why strong { color: var(--k-surface); }

/* ── 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; }
}

/* ── the free daily demo ───────────────────────────────────────
   The strongest offer on the page used to appear only as a clause in the host
   card, a sentence in the price note, and an FAQ answer. It is the thing that
   earns a download, so it gets a beat of its own, early, before the library and
   the price. The terms render as a house-rules placard: a card table posts its
   rules, and a plain three-line table is also the clearest way to say who gets
   what. Left column argues, right column states the terms. */
.demo-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 52px; align-items: center; }
.demo-title {
  font-family: var(--k-font-display); font-weight: 500;
  font-size: clamp(32px, 4.2vw, 50px); letter-spacing: -0.03em; line-height: 1.05;
  margin-top: 14px; text-wrap: balance;
}
.demo-sub { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--k-ink-70); font-weight: 500; max-width: 480px; text-wrap: pretty; }
.demo-cta { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.demo-foot { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--k-ink-55); font-weight: 600; max-width: 440px; text-wrap: pretty; }

.rules {
  background: var(--k-surface); border: 0.5px solid var(--k-ink-14);
  border-radius: 18px; padding: 26px 28px;
  box-shadow: 0 26px 52px -30px rgba(45,38,32,0.45);
}
.rules__head {
  font-family: var(--k-font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--k-primary-deep); font-weight: 700;
  padding-bottom: 14px; border-bottom: 1px solid var(--k-ink-10);
}
.rules__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 15px 0; border-bottom: 0.5px solid var(--k-ink-08);
}
.rules__game { font-family: var(--k-font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.rules__what { font-size: 13.5px; font-weight: 700; color: var(--k-ink-55); text-align: right; text-wrap: pretty; }
.rules__note {
  margin-top: 15px; font-family: var(--k-font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--k-primary-deep); font-weight: 700;
}

/* ── 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;
  color: var(--k-accent-warm);
}
.why .ic svg { display: block; }
.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);
  /* align-items:start, not center. The left column runs ~900px (copy, two QR
     rows, share buttons, micro) and the right held one iPad, so centring the art
     parked it in the middle of a 600px dead band. The waitlist now lives in the
     right column under the art: both columns carry weight, the band is gone, and
     the Android offer stops interrupting the download flow. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 48px; align-items: start;
}
.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; flex-direction: column; align-items: stretch; gap: 26px; }
.cta-seats .dev-ipad { align-self: center; }
.cta-seats .android-waitlist { margin-top: 0; max-width: none; }

.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 (max-width: 960px) {
  :root { --k-pad: 28px; }
  .hero-inner { grid-template-columns: 1fr; grid-template-areas: "copy" "art" "get"; row-gap: 12px; padding-top: 28px; padding-bottom: 72px; }
  .hero-art { min-height: 360px; margin-top: 16px; }
  .hero-inner > .hero-get { margin-top: 8px; }
  .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; }
  .demo-band { grid-template-columns: 1fr; gap: 34px; }
  .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; }
  /* The picker is the one control inside the hero art; left-align it with the
     copy above rather than centring it under a scene that is now full width.
     The label takes its own line: inline, it pushed "Blackjack" onto a second
     row on its own, which read as a stray button rather than a third option. */
  .hero-pick { justify-content: flex-start; margin-top: 18px; }
  .hero-pick__lead { flex-basis: 100%; margin: 0 0 2px; }
  .rules { padding: 22px; }
  .rules__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rules__what { text-align: left; }
}

/* ── 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; }
  /* animation:none above cancels the keyframes that would have restored these,
     so anything that starts hidden has to be put back by hand or it never shows. */
  .js-anim .rise > * { opacity: 1; transform: none; }
  .js-anim .hero-deal { opacity: 1; translate: none; }
  .hero-swap__l { opacity: 0; }
  .hero-swap__l.is-on { opacity: 1; }
}

/* ── 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; }
/* One plain sentence that names the two-app model before the cards ask the
   visitor to pick one. */
.intents-lead { margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--k-ink-70); }
/* auto-fit, not a viewport breakpoint: these cards live in the hero's narrow left
   column on desktop and full-width on phones, so they must stack on available
   width. At ~1000px the two-up grid squeezed the store badges. */
.intents { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 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); }
/* Escape hatches under the cards: the browsing visitor who is neither hosting
   nor invited yet, and the Android friend. */
.intent-after { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
.intent-android, .intent-curious {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--k-ink-55);
  transition: color 150ms ease;
}
.intent-android:hover, .intent-curious: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 stacks on its own via auto-fit; no viewport override needed. */
  .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); }
/* ...but a keyboard user still needs to see where they are. Ordered after the
   :focus rule above so it wins at equal specificity. */
.waitlist-input:focus-visible { outline: 2px solid var(--k-accent-warm); outline-offset: 2px; }
.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; }