/* Blocks & Taps landing page. Tokens follow the app's design system (light), with the dark set
   under [data-theme="dark"] on <html>. The "Dark theme" card carries .is-dark to stay dark in
   both themes. */
:root {
  color-scheme: light;
  --block-salmon: #FA897B;
  --block-butter: #FFDD94;
  --block-pistachio: #DDE6A5;
  --block-sky: #86C9E3;
  --block-lilac: #CCA8D8;
  --accent-teal: #5FBDCE;
  --accent-periwinkle: #7B9ED4;
  --accent-orchid: #BA89DB;
  --ground: #F8F8F8;
  --surface: #FFFFFF;
  --track: #EDEDED;
  --ink: #323232;
  --muted: rgba(50, 50, 50, 0.72);
  --on-accent: #323232;
  --hud-text: #323232;
  --elev-tile: 0 2px 8px rgba(0, 0, 0, 0.06);
  --elev-card: 0 4px 16px rgba(0, 0, 0, 0.08);
  --elev-action: 0 3px 10px rgba(0, 0, 0, 0.10);
  --reward: #FFB86B;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --bh: 40px;
  --font: "M PLUS Rounded 1c", ui-rounded, "Hiragino Maru Gothic ProN", system-ui, sans-serif;
}
:root[data-theme="dark"], .is-dark {
  color-scheme: dark;
  --block-salmon: #CE746A;
  --block-butter: #D1B67F;
  --block-pistachio: #B7BD8C;
  --block-sky: #72A6BC;
  --block-lilac: #A98CB4;
  --accent-teal: #57A4B3;
  --accent-periwinkle: #6D8AB8;
  --accent-orchid: #A278BE;
  --ground: #1E1C22;
  --surface: #2A2730;
  --track: #3A3644;
  --ink: #EDEAF2;
  --muted: rgba(237, 234, 242, 0.72);
  --on-accent: #1E1C22;
  --hud-text: #FFFFFF;
  --elev-tile: 0 2px 8px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --elev-card: 0 4px 16px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --elev-action: 0 3px 10px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --reward: #D79D60;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 800;
}
h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2, h3 { font-weight: inherit; }
ul, ol { list-style: none; padding: 0; }
img, svg { display: block; }
a { color: var(--ink); text-decoration: none; }
a:not([data-store]):hover {
  text-decoration: underline;
  text-decoration-color: var(--accent-teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--ground);
  border-radius: 8px;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--ground);
}
.skip:focus { top: 12px; }

/* ---------- Page frame ---------- */
.page { container-type: inline-size; width: 100%; }
.page-in {
  --pad-x: clamp(24px, 4.5cqw, 64px);
  --h1: clamp(36px, 9.2cqw, 54px);
  --h2: clamp(28px, 7.2cqw, 32px);
  --gap-section: clamp(56px, 5cqw, 72px);
  --bh: 40px;
  display: flex; flex-direction: column;
}
@container (min-width: 900px) { .page-in { --bh: 48px; } }
.wrap { max-width: 1120px; margin: 0 auto; }
section { padding: 0 var(--pad-x); }
main { display: flex; flex-direction: column; gap: var(--gap-section); padding: 24px 0 var(--gap-section); }

/* ---------- Header ---------- */
.hd {
  height: 56px; padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.brand span { font-size: 20px; line-height: 1; white-space: nowrap; }
.hd-right { display: flex; align-items: center; gap: 8px; flex: none; }
.tt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.tt svg {
  width: 24px; height: 24px; fill: none; stroke: var(--ink);
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.tt .sun { display: none; }
:root[data-theme="dark"] .tt .sun { display: block; }
:root[data-theme="dark"] .tt .moon { display: none; }
.pill-cta {
  display: inline-flex; align-items: center; height: 48px; padding: 0 18px; border-radius: 22px;
  background: var(--accent-teal); color: var(--on-accent); font-size: 16px; white-space: nowrap;
  box-shadow: var(--elev-action);
}
.pill-cta:hover { text-decoration: none; }
@media (max-width: 420px) {
  .hd-right { gap: 0; }
  .brand { gap: 8px; }
  .brand span { font-size: 18px; }
  .tt { width: 40px; }
  .pill-cta { padding: 0 12px; }
}
@media (max-width: 379px) { .pill-cta { display: none; } }

/* ---------- Shared bits ---------- */
.eyebrow {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px;
  background: var(--track); font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
}
.col { display: flex; flex-direction: column; align-items: flex-start; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 64px; }
.row > .copy { flex: 1 1 400px; min-width: 0; }
.row > .media { flex: 1 1 300px; max-width: 420px; margin: 0 auto; min-width: 0; }
h2 { font-size: var(--h2); line-height: 1.15; text-wrap: balance; }
h3 { font-size: 22px; line-height: 1.2; }
.lead { font-size: 20px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.body { font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.small { font-size: 16px; line-height: 1.5; }
.muted { color: var(--muted); }
.crop { overflow: hidden; border-radius: 20px; }
.crop img { width: 100%; height: auto; }
.chip-list {
  display: grid; gap: 12px; width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(50% - 6px), 200px), 1fr));
}
.chip-list li, .opt-list li {
  display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 14px;
  border-radius: 999px; background: var(--surface); box-shadow: var(--elev-tile);
  font-size: 16px; text-align: center;
}

/* ---------- Store badges ---------- */
.getbox {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px;
  border-radius: 22px; background: var(--accent-teal); box-shadow: var(--elev-action);
}
.badge { display: inline-flex; align-items: center; justify-content: center; height: var(--bh); }
.badge:hover { text-decoration: none; }
.badge img { max-width: none; }
.badge-appstore img { width: calc(var(--bh) * 2.9915); height: var(--bh); }
.badge-play img {
  width: calc(var(--bh) * 3.8475); height: calc(var(--bh) * 1.4875);
  margin: calc(var(--bh) * -0.24375);
}
.alt-link { display: none; align-items: center; min-height: 48px; font-size: 16px; }
.alt-link {
  text-decoration: underline; text-decoration-color: var(--accent-teal);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
html[data-platform="ios"] .only-hero .badge-play,
html[data-platform="android"] .only-hero .badge-appstore,
html[data-platform="ios"] .only-mid .badge-play,
html[data-platform="android"] .only-mid .badge-appstore { display: none; }
html[data-platform="ios"] .alt-play, html[data-platform="android"] .alt-as { display: inline-flex; }
.cta-block { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 4px; }

/* ---------- Hero ---------- */
.hero .copy { flex: 1 1 440px; gap: 20px; }
.hero h1 { display: flex; flex-direction: column; gap: 10px; }
.hero h1 .wm { font-size: 20px; line-height: 1; color: var(--muted); }
.hero h1 .tag { font-size: var(--h1); line-height: 1.1; text-wrap: balance; }
.hero .chip-list { max-width: 560px; }
.hero .sub { max-width: 34em; }
.phone { flex: 1 1 300px; max-width: 360px; margin: 0 auto; min-width: 0; }
.phone-clip { position: relative; width: 100%; aspect-ratio: 760 / 1000; overflow: hidden; }
.phone-in { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 760 / 1577; }
.phone-in .shot {
  position: absolute; left: 3.7%; top: 1.8%; width: 92.6%; height: 96.4%;
  object-fit: cover; border-radius: 13% / 6.3%;
}
.phone-in .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
@container (min-width: 900px) {
  .phone-clip { aspect-ratio: 760 / 1577; overflow: visible; }
  .phone-in { position: relative; }
}

/* ---------- Color vision ---------- */
.shapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.shapes svg { width: 100%; height: auto; }
.shapes .glyph { fill: var(--on-accent); opacity: 0.62; }
.shapes .stroke { stroke: var(--on-accent); stroke-width: 8; stroke-linecap: round; opacity: 0.62; }
.media-stack { display: flex; flex-direction: column; gap: 16px; }
.crop-wide { aspect-ratio: 1 / 0.85; }

/* ---------- How to play ---------- */
.steps {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.steps li { display: flex; flex-direction: column; gap: 14px; }
.steps .crop { width: 100%; aspect-ratio: 3 / 2; }
.tip-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.tip { display: flex; align-items: flex-start; gap: 10px; max-width: 32em; color: var(--muted); }
.tip svg { flex: none; margin-top: 2px; }
.hud {
  display: flex; align-items: center; gap: 24px; padding: 12px 20px; border-radius: 24px;
  background: var(--surface); box-shadow: var(--elev-tile);
}

/* ---------- Why people stay ---------- */
.cards {
  display: grid; gap: 12px; grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(50% - 6px), 340px), 1fr));
}
.card {
  display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 18px 20px;
  border-radius: 24px; background: var(--surface); box-shadow: var(--elev-card);
}
.card > svg { height: 42px; width: 24px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.card .kicker { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.card p { font-size: 16px; line-height: 1.5; }
.mini { width: 116px; height: 42px; overflow: hidden; }
.mini > div { display: flex; gap: 10px; width: 154px; transform: scale(0.75); transform-origin: left top; }

/* ---------- Design-system components (class names as in ds_bundle.css) ---------- */
.bt-menu-button {
  display: block; width: 100%; max-width: 280px; padding: 14px 20px; border: 0; border-radius: 22px;
  font-family: var(--font); font-weight: 800; font-size: 18px; color: var(--on-accent);
  text-align: center;
}
.bt-menu-button--teal { background: var(--accent-teal); }
.bt-menu-button--periwinkle { background: var(--accent-periwinkle); }
.bt-menu-button--orchid { background: var(--accent-orchid); }
.bt-action-button {
  position: relative; width: 72px; height: 56px; border: 0; border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent);
  box-shadow: var(--elev-action);
}
.bt-action-button--undo { background: var(--block-sky); }
.bt-action-button--redo { background: var(--block-pistachio); }
.bt-action-button:disabled { opacity: 0.35; }
.bt-action-button__pill {
  position: absolute; right: 4px; top: 4px; min-width: 18px; padding: 1px 5px; border-radius: 9px;
  background: var(--surface); font-family: var(--font); font-weight: 800; font-size: 11px;
  line-height: 1.45; color: var(--accent-teal); text-align: center;
}
.bt-objectives { display: flex; align-items: center; justify-content: center; gap: 18px; }
.bt-objective { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bt-objective__swatch { width: 32px; height: 32px; border-radius: 4.1px; }
.bt-objective__swatch--salmon { background: var(--block-salmon); }
.bt-objective__swatch--butter { background: var(--block-butter); }
.bt-objective__swatch--sky { background: var(--block-sky); }
.bt-objective__count { font-size: 13px; color: var(--hud-text); }
.bt-taps { display: inline-flex; flex-direction: column; align-items: flex-end; min-width: 44px; }
.bt-taps__value { font-size: 26px; line-height: 1.15; }
.bt-taps--normal .bt-taps__value { color: var(--hud-text); }
.bt-taps__caption { font-size: 10px; color: var(--hud-text); }

@container (max-width: 519px) {
  .cards { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .card { min-height: 0; }
}
@container (max-width: 479px) { .opt-list { grid-template-columns: 1fr; } }
@container (max-width: 419px) { .hero .chip-list li:last-child { grid-column: 1 / -1; } }

/* ---------- Daily ---------- */
.daily {
  --p: clamp(24px, 3cqw, 40px);
  position: relative; padding: var(--p); border-radius: 28px; background: var(--surface);
  box-shadow: var(--elev-card); overflow: hidden;
}
.daily > svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.35; pointer-events: none; }
.daily .row { position: relative; }
.daily .row > .copy { flex: 1 1 380px; }
.daily .crop { box-shadow: var(--elev-tile); }
.daily .cta-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 8px; }

/* ---------- Levels ---------- */
.menu-card {
  flex: 1 1 280px; max-width: 360px; margin: 0 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 32px 24px;
  border-radius: 28px; background: var(--surface); box-shadow: var(--elev-card);
}
.menu-card > svg { width: 120px; height: 120px; }
.menu-btns { width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- Comfort ---------- */
.opt-list {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(50% - 6px), 300px), 1fr));
}
.opt-list li { justify-content: flex-start; gap: 10px; min-height: 56px; height: auto; padding: 0 16px; text-align: left; }
.opt-list svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.langs { font-size: 16px; line-height: 1.5; color: var(--muted); }
.dark-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: clamp(24px, 3cqw, 32px);
  border-radius: 24px; background: var(--surface); box-shadow: var(--elev-card); color: var(--ink);
}
.dark-card .copy { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.dark-card .thumb { flex: 0 1 180px; min-width: 140px; margin: 0 auto; }

/* ---------- Developer, FAQ ---------- */
.narrow { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.dev {
  display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; border-radius: 24px;
  background: var(--surface); box-shadow: var(--elev-card);
}
.dev img { width: 48px; height: 48px; border-radius: 12px; }
.faq { border-radius: 24px; background: var(--surface); box-shadow: var(--elev-card); padding: 4px 20px; }
.faq details + details { border-top: 1px solid var(--track); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px;
  cursor: pointer; font-size: 18px; line-height: 1.3; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg {
  flex: none; width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease);
}
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding: 0 0 18px; font-size: 18px; line-height: 1.5; text-wrap: pretty; }

/* ---------- Final CTA ---------- */
.final {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 24px; padding: clamp(32px, 4.5cqw, 56px) clamp(24px, 4cqw, 64px); border-radius: 28px;
  background: var(--accent-teal); box-shadow: var(--elev-card); color: var(--on-accent);
  overflow: hidden;
}
.final > img {
  position: absolute; right: 8px; top: 8px; width: clamp(56px, 7cqw, 104px); height: auto;
  pointer-events: none;
}
.final h2 { max-width: 22em; padding: 0 clamp(40px, 6cqw, 72px); }
.final p { max-width: 30em; text-wrap: balance; }
.final .getbox { background: transparent; box-shadow: none; padding: 0; justify-content: center; gap: 12px 16px; }
.qr {
  display: none; align-items: center; gap: 16px; padding: 12px 20px 12px 12px; border-radius: 20px;
  background: var(--surface); box-shadow: var(--elev-tile); color: var(--ink); text-align: left;
}
.qr img { width: 96px; height: 96px; border-radius: 8px; background: #fff; }
.qr span { font-size: 16px; line-height: 1.4; max-width: 9em; }
@container (min-width: 900px) { .qr { display: flex; } }

/* ---------- Footer ---------- */
.ft { padding: 32px var(--pad-x) 40px; border-top: 1px solid var(--track); }
.ft-in { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.ft nav { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.ft nav a { display: inline-flex; align-items: center; min-height: 48px; font-size: 16px; }
.legal { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* ---------- Sticky bar (phones, iOS or Android only) ---------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--accent-teal); color: var(--on-accent); font-size: 16px;
  visibility: hidden; transform: translateY(110%);
  transition: transform 0.3s var(--ease), visibility 0.3s;
}
.sticky.show { visibility: visible; transform: none; }
.sticky .badge { --bh: 40px; }
html[data-platform="ios"] .sticky .badge-play,
html[data-platform="android"] .sticky .badge-appstore { display: none; }
@media (max-width: 767px) {
  html[data-platform="ios"] .sticky, html[data-platform="android"] .sticky { display: flex; }
}

html.theming, html.theming *, html.theming *::before, html.theming *::after {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease,
    box-shadow 0.45s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sticky, .faq summary svg { transition: none; }
}