/* ==========================================================================
   Page styles. Depends on tokens.css.
   Shared by every page on the site — add page-specific rules at the bottom
   under a page class (e.g. .page--privacy) rather than in a new file.
   ========================================================================== */

/* — script fallbacks: Caprasimo/Figtree are Latin-only — */
html[lang="ru"] {
  --font-heading: "PT Serif", Georgia, "Times New Roman", serif;
  --font-body: system-ui, "Segoe UI", Roboto, sans-serif;
}
html[lang="ja"] {
  --font-heading: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --font-body: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
}
html[lang="zh"] {
  --font-heading: "Songti SC", "Noto Serif SC", serif;
  --font-body: "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.page { overflow-x: clip; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--color-accent); color: var(--color-bg);
  padding: 10px 18px; border-radius: 0 0 999px 0;
}
.skip-link:focus { left: 0; }

/* shared horizontal rhythm */
.nav,
.hero,
.section,
.site-footer { padding-inline: clamp(20px, 5vw, 64px); }

.hero,
.section:not(.section--surface),
.site-footer { max-width: 1280px; margin-inline: auto; }

/* ─────────────────────────────── nav ─────────────────────────────── */
/* Reserves the header's height before layout.js fills the slot, so the
   page doesn't jump on load. */
.nav-slot { min-height: 62px; }

.nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  max-width: 1280px;
  margin-inline: auto;
}
.nav-brand {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 18px;
  color: var(--color-text);
  margin-right: auto;
}
.nav-brand:hover { color: var(--color-text); text-decoration: none; }

.nav-menu { display: flex; align-items: center; gap: var(--space-4); }
.nav-menu a { color: inherit; font-size: 14px; }
.nav-menu a:hover { color: var(--color-accent-700); text-decoration: none; }
.nav-menu .btn { white-space: nowrap; }

.lang__select {
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
  max-width: 9.5rem;
}
.lang__select:hover { border-color: var(--color-accent); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 160ms ease, opacity 160ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 800px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    display: none;
    position: absolute;
    top: calc(100% - 4px);
    right: clamp(20px, 5vw, 64px);
    left: clamp(20px, 5vw, 64px);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-neutral-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu a { font-size: 16px; padding: 4px 0; }
  .lang__select { max-width: none; width: 100%; }
}

/* ─────────────────────────────── hero ────────────────────────────── */
.hero {
  position: relative;
  padding-block: clamp(40px, 6vw, 72px) clamp(48px, 6vw, 64px);
}
.hero__blob {
  position: absolute;
  right: -140px;
  top: -190px;
  width: min(420px, 62vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent-2-200);
  z-index: 0;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
.hero__copy { container-type: inline-size; }

.hero__title {
  font-size: clamp(34px, 12.5cqw, 62px);
  line-height: 1.08;
  margin: 22px 0 0;
  letter-spacing: -0.028em;
}
.hero__title span { display: block; }
.hero__title-accent { color: var(--color-accent-700); }

.hero__lede {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  max-width: 44ch;
  margin: 26px 0 0;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.hero__cta .btn { white-space: nowrap; }
.hero__note { font-size: 14px; margin: 16px 0 0; color: var(--color-neutral-700); }

/* ────────────────────────── playable board ───────────────────────── */
.demo {
  background: var(--color-neutral-100);
  border-radius: 28px;
  padding: clamp(18px, 3vw, 26px);
  max-width: 520px;
  width: 100%;
  justify-self: end;
  scroll-margin-top: 24px;
}
@media (max-width: 800px) { .demo { justify-self: stretch; } }

.demo.is-flash { animation: demo-flash 900ms ease; }
@keyframes demo-flash {
  0%, 100% { box-shadow: var(--shadow-md); }
  30%      { box-shadow: 0 0 0 4px var(--color-accent-300), var(--shadow-md); }
}

.demo__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.demo__title { font-family: var(--font-heading); font-size: 19px; }
.demo__reset { min-height: 0; padding: 4px 12px; font-size: 13px; white-space: nowrap; }
.demo__hint {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 8px 0 18px;
  color: var(--color-neutral-700);
}

.demo__grid {
  display: grid;
  grid-template-columns: clamp(64px, 24%, 108px) repeat(4, 1fr);
  gap: 6px;
  align-items: center;
}
/* Sized so the longest translated room name ("BIBLIOTHEK", "DACHBODEN")
   still fits its column on a 390px screen without breaking mid-word.
   hyphens/anywhere are the fallbacks if a future language runs longer. */
.demo__room {
  font-size: clamp(8.5px, 2.15vw, 10.5px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  color: var(--color-neutral-700);
  hyphens: auto;
  overflow-wrap: anywhere;
}
.demo__name {
  font-size: clamp(11px, 2.6vw, 13px);
  font-weight: 600;
  padding-right: 6px;
  overflow-wrap: anywhere;
}
.demo__cell {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 50%;
  border: 2px solid var(--color-neutral-300);
  background: transparent;
  color: var(--color-neutral-600);
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  display: grid;
  place-content: center;
  transition: background 120ms ease, border-color 120ms ease;
}
.demo__cell:hover { border-color: var(--color-accent-400); }
.demo__cell[data-state="1"] { background: var(--color-neutral-200); }
.demo__cell[data-state="2"] { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }

.demo__clues { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.clue {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
  padding-left: 18px;
  position: relative;
  color: color-mix(in srgb, var(--color-text) 84%, transparent);
}
.clue::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.demo__ask {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent-700);
  margin: 22px 0 10px;
}
.demo__accuse { display: flex; gap: 8px; flex-wrap: wrap; }
.accuse {
  border-radius: 999px;
  border: 2px solid var(--color-neutral-300);
  background: transparent;
  color: var(--color-text);
  padding: 7px 15px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
}
.accuse:hover { border-color: var(--color-accent-400); }
.accuse.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.verdict {
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-800);
}
.verdict[hidden] { display: none; }

/* ───────────────────────────── sections ──────────────────────────── */
.section { padding-block: clamp(16px, 3vw, 24px) clamp(56px, 7vw, 88px); }
.section--surface {
  background: var(--color-surface);
  padding-block: clamp(56px, 7vw, 88px);
  max-width: none;
}

.kicker {
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent-700);
}
.section__title {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  margin: 14px 0 0;
  letter-spacing: -0.028em;
}
.section__title--plain { margin-top: 0; }

/* ─────────────────────────────── cast ────────────────────────────── */
.cast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: 40px;
}
.cast__avatar {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
}
.cast__avatar span { font-family: var(--font-heading); font-size: clamp(38px, 5vw, 54px); }
.cast__avatar--a { background: var(--color-accent-200); }
.cast__avatar--a span { color: var(--color-accent-800); }
.cast__avatar--b { background: var(--color-accent-2-300); }
.cast__avatar--b span { color: var(--color-accent-2-800); }
.cast__avatar--c { background: var(--color-accent-300); }
.cast__avatar--c span { color: var(--color-accent-800); }
.cast__avatar--d { background: var(--color-accent-2-200); }
.cast__avatar--d span { color: var(--color-accent-2-800); }

.cast__name { font-size: 21px; margin: 20px 0 0; }
.cast__line {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 6px 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* ────────────────────────────── steps ────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(28px, 3vw, 32px);
  margin-top: 40px;
}
.step__num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-family: var(--font-heading);
  font-size: 26px;
}
.step__num--a { background: var(--color-accent-200); color: var(--color-accent-800); }
.step__num--b { background: var(--color-accent-2-300); color: var(--color-accent-2-800); }
.step__num--c { background: var(--color-accent-300); color: var(--color-accent-800); }
.step__title { font-size: 22px; margin: 18px 0 0; }
.step__body {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* ───────────────────────────── in the app ────────────────────────── */
.app {
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
.app__lede {
  font-size: 16px;
  line-height: 1.65;
  margin: 20px 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.app__cta { margin-top: 26px; white-space: nowrap; }
.app .section__title { font-size: clamp(26px, 3.8vw, 38px); }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 32px 40px;
}
.feature__title { font-size: 21px; margin: 0; }
.feature__body {
  font-size: 15px;
  line-height: 1.6;
  margin: 8px 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* ─────────────────────── screenshots / phones ────────────────────── */
/* A 160px floor keeps the mockups two-up on a phone. One-up would make each
   screenshot taller than the viewport and add ~3000px of scrolling; on wide
   screens auto-fit still settles at four across. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: 36px;
}
.shot { margin: 0; }
.shot__label { font-size: 14px; margin: 12px 0 0; color: var(--color-neutral-700); }

.phone {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  box-shadow: var(--shadow-sm);
}
.screen {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: "Figtree", system-ui, sans-serif;
  color: var(--color-text);
}

.screen__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.4cqw 6cqw 0;
  font-size: 3.1cqw;
  font-weight: 700;
  color: var(--color-neutral-700);
}
.screen__status-icons { display: flex; gap: 1.4cqw; align-items: center; }
.screen__status-icons .dot { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--color-neutral-500); }
.screen__status-icons .batt { width: 4.6cqw; height: 2cqw; border-radius: 1cqw; background: var(--color-accent-2-500); }

.screen__body { flex: 1; display: flex; flex-direction: column; padding: 4cqw 6cqw 6cqw; }
.screen__body--center { align-items: center; text-align: center; padding-top: 8cqw; }
.screen__row { display: flex; justify-content: space-between; align-items: baseline; }
.screen__case {
  font-size: 3.1cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent-700);
}
.screen__time { font-size: 3.1cqw; font-weight: 600; color: var(--color-neutral-700); }
.screen__h { font-family: "Caprasimo", Georgia, serif; font-size: 7.4cqw; line-height: 1.12; margin: 2.6cqw 0 0; }
.screen__h--big { font-size: 9cqw; margin-top: 5cqw; }
.screen__sub { font-size: 3.3cqw; line-height: 1.5; margin: 1.8cqw 0 0; color: var(--color-neutral-700); }
.screen__sub--lg {
  font-size: 3.6cqw;
  line-height: 1.55;
  margin-top: 2.6cqw;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}

.screen__grid {
  display: grid;
  grid-template-columns: 26cqw repeat(4, 1fr);
  gap: 1.9cqw;
  align-items: center;
  margin-top: 5cqw;
}
.screen__room {
  font-size: 2.4cqw;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  color: var(--color-neutral-600);
}
.screen__name { font-size: 2.8cqw; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen__cell {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.55cqw solid var(--color-neutral-300);
  font-size: 3.4cqw;
  font-weight: 700;
  display: grid;
  place-content: center;
  color: var(--color-neutral-600);
}
.screen__cell.is-x { background: var(--color-neutral-200); }
.screen__cell.is-yes { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }

.screen__clues { margin-top: 5cqw; display: flex; flex-direction: column; gap: 2cqw; }
.screen__clue {
  font-size: 3.1cqw;
  line-height: 1.45;
  margin: 0;
  padding-left: 4.6cqw;
  position: relative;
  color: color-mix(in srgb, var(--color-text) 84%, transparent);
}
.screen__clue::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2cqw;
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  background: var(--color-accent);
}

.screen__bar { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; padding-top: 4cqw; }
.pill { border-radius: 999px; text-align: center; padding: 2.6cqw 0; font-size: 2.9cqw; font-weight: 700; }
.pill--mute { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.pill--green { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.pill--accent { background: var(--color-accent); color: #fff; }

.screen__cards { margin-top: 4.5cqw; display: flex; flex-direction: column; gap: 3cqw; }
.cluecard { border-radius: 5cqw; padding: 4cqw 4.4cqw; }
.cluecard__tag { font-size: 2.5cqw; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; margin: 0; }
.cluecard__text { font-size: 3.4cqw; line-height: 1.5; margin: 1.6cqw 0 0; }
.cluecard--mute { background: var(--color-neutral-200); }
.cluecard--mute .cluecard__tag,
.cluecard--mute .cluecard__text { color: var(--color-neutral-600); }
.cluecard--accent { background: var(--color-accent-100); }
.cluecard--accent .cluecard__tag { color: var(--color-accent-700); }
.cluecard--green { background: var(--color-accent-2-100); }
.cluecard--green .cluecard__tag { color: var(--color-accent-2-700); }

.screen__cta {
  margin-top: auto;
  width: 100%;
  border-radius: 999px;
  background: var(--color-accent);
  text-align: center;
  padding: 3.4cqw 0;
  font-size: 3.4cqw;
  font-weight: 700;
  color: #fff;
}

.screen__seal {
  width: 30cqw;
  height: 30cqw;
  border-radius: 50%;
  background: var(--color-accent-2-200);
  display: grid;
  place-content: center;
  font-family: "Caprasimo", Georgia, serif;
  font-size: 11cqw;
  color: var(--color-accent-2-800);
}
.screen__stats { display: flex; gap: 3cqw; margin-top: 6cqw; width: 100%; }
.stat { flex: 1; background: var(--color-neutral-100); border-radius: 5cqw; padding: 3.6cqw 0; }
.stat__val { font-family: "Caprasimo", Georgia, serif; font-size: 6cqw; margin: 0; }
.stat__key {
  font-size: 2.5cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 1cqw 0 0;
  color: var(--color-neutral-700);
}

.screen__progress { height: 2.4cqw; border-radius: 999px; background: var(--color-neutral-200); margin-top: 2.6cqw; overflow: hidden; }
.screen__progress span { display: block; width: 36%; height: 100%; background: var(--color-accent-2-500); }
.screen__cases { margin-top: 4.4cqw; display: flex; flex-direction: column; gap: 2.4cqw; }
.caserow {
  display: flex;
  align-items: center;
  gap: 3cqw;
  background: var(--color-neutral-100);
  border-radius: 4.4cqw;
  padding: 3.2cqw 3.6cqw;
}
.caserow__dot {
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 50%;
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
  font-size: 3.2cqw;
  font-weight: 700;
  display: grid;
  place-content: center;
  flex: none;
}
.caserow__dot--done { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.caserow__dot--open { background: var(--color-accent-200); color: var(--color-accent-800); }
.caserow__text { min-width: 0; }
.caserow__text b { display: block; font-size: 3.4cqw; font-weight: 700; }
.caserow__text i { display: block; font-size: 2.7cqw; font-style: normal; color: var(--color-neutral-700); }
.caserow__time { margin-left: auto; font-size: 2.9cqw; font-weight: 700; color: var(--color-neutral-600); }

/* ─────────────────────── waitlist + questions ────────────────────── */
.bottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 4vw, 48px);
  align-items: start;
}
.waitlist {
  background: var(--color-accent-2-100);
  border-radius: 36px;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 40px);
}
.waitlist__title { font-size: clamp(24px, 3vw, 28px); margin: 0; line-height: 1.15; }
.waitlist__body {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 14px 0 0;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.waitlist__form { display: flex; gap: 12px; margin-top: 22px; max-width: 420px; flex-wrap: wrap; }
.waitlist__form .input { flex: 1; min-width: 180px; }
.waitlist__form .btn { white-space: nowrap; }
.waitlist__done {
  font-size: 15.5px;
  margin: 22px 0 0;
  font-weight: 600;
  color: var(--color-accent-2-800);
}
.waitlist__done[hidden] { display: none; }

.faq__title { font-size: clamp(24px, 3vw, 28px); margin: 0 0 12px; }
.qa { border-bottom: 1px solid var(--color-divider); padding: 14px 0; }
.qa summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa p {
  font-size: 15px;
  line-height: 1.65;
  margin: 10px 0 2px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.chev {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
  transition: transform 160ms ease;
}
.qa[open] .chev { transform: rotate(45deg); }

/* ────────────────────────────── footer ───────────────────────────── */
.site-footer {
  padding-bottom: clamp(40px, 5vw, 56px);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-neutral-700);
}
.site-footer__brand { font-family: var(--font-heading); font-size: 17px; color: var(--color-text); }