/* Site styles, "Pen & Paper".
   Colours, radii, spacing, strokes and type scale are copied from the app's design tokens
   (docs/design/final/tokens/tokens.json, version 3). Light theme only. */

/* Fonts: self-hosted, Latin + Turkish + German subset (see static/assets/fonts/OFL-*.txt).
   The fallback faces are metric-adjusted so the swap does not move the layout. */
@font-face {
  font-family: "Mali";
  src: url("/assets/fonts/mali-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mali Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica-Bold");
  font-weight: 700;
  size-adjust: 107%;
  ascent-override: 98%;
  descent-override: 23%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
  font-weight: 400;
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica-Bold");
  font-weight: 700;
  size-adjust: 101%;
  ascent-override: 94%;
  descent-override: 29%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* colour primitives */
  --paper: #faf7f0;
  --paper-raised: #ffffff;
  --ink: #1c1b19;
  --ink-soft: #5e5b55;
  --ink-faint: #8a867e;
  --rule: #e3ddd0;
  --yellow: #f5c842;
  --coral: #ee8e7e;
  --coral-ink: #b04a3e;
  --yellow-light: #fae6aa;
  --coral-light: #f7ccc5;
  --yellow-wash: rgba(245, 200, 66, 0.6);
  --coral-wash: rgba(238, 142, 126, 0.6);
  --yellow-faint: #f9eed1;

  /* semantic */
  --bg: var(--paper);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --line: var(--ink);
  --divider: var(--rule);
  --primary: var(--yellow);
  --me: var(--yellow);
  --opponent: var(--coral);

  /* type */
  --font-display: "Mali", "Mali Fallback", "Comic Neue", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Atkinson Fallback", system-ui, -apple-system, "Roboto", sans-serif;

  /* spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --gutter: 18px;
  --space-24: 24px;
  --space-32: 32px;

  /* radii: uneven corner sets make every outline look hand-drawn */
  --wobble-1: 18px 13px 20px 15px / 14px 20px 13px 19px;
  --wobble-2: 14px 20px 15px 19px / 19px 14px 20px 13px;
  --wobble-3: 20px 15px 18px 13px / 13px 18px 15px 20px;
  --wobble-4: 15px 18px 13px 20px / 20px 13px 19px 15px;
  --wobble-lg: 26px 21px 28px 23px / 22px 28px 21px 26px;
  --wobble-lg-2: 24px 19px 26px 21px / 20px 26px 19px 24px;
  --wobble-sm: 12px 9px 13px 10px / 10px 13px 9px 12px;
  --wobble-xs: 9px 7px 10px 8px / 8px 10px 7px 9px;
  --wobble-badge: 11px 8px 12px 9px / 9px 12px 8px 11px;
  --wobble-round: 50% 47% 52% 49% / 49% 52% 47% 50%;
  --wobble-round-btn: 50% 46% 52% 48% / 48% 52% 46% 50%;

  /* shadows and strokes */
  --shadow-ink: 3px 4px 0 var(--ink);
  --shadow-ink-sm: 2px 3px 0 var(--ink);
  --stroke-hair: 1.5px;
  --stroke-thin: 2px;
  --stroke-line: 2.5px;
  --stroke-bold: 3px;

  /* sizes */
  --tap-min: 44px;
  --button-height: 52px;
  --button-md-height: 60px;

  --press: 80ms;
  --head-gap: 32px; /* space between the header row and the first content, phones; 48px from 760px */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 12px;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/22px var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
}

p {
  margin: 0;
}

a {
  color: var(--ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Keyboard focus: a thick ink ring with a yellow halo, visible on paper, yellow and coral. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--yellow);
  border-radius: 6px;
}
.tt-btn:focus-visible,
.tt-icon-btn:focus-visible,
.tile:focus-visible {
  border-radius: var(--wobble-1);
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: var(--space-8);
  top: -80px;
  z-index: 20;
  padding: 10px 16px;
  min-height: var(--tap-min);
  background: var(--paper-raised);
  border: var(--stroke-line) solid var(--ink);
  border-radius: var(--wobble-sm);
  font-weight: 700;
}
.skip-link:focus {
  top: var(--space-8);
}

.wrap {
  width: min(100% - 2 * var(--gutter), 960px);
  margin-inline: auto;
}

/* ---------- hand-drawn outline layer ----------
   The border sits on a ::before layer that the wobble filter displaces, so text is never
   distorted. The filter itself is defined once per page (inline SVG, id tt-wobble). */
.tt-box {
  position: relative;
  border-radius: var(--wobble-1);
  background: var(--paper);
}
.tt-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--stroke-line) solid var(--ink);
  border-radius: inherit;
  filter: url(#tt-wobble);
  pointer-events: none;
}
.tt-box--raised {
  background: var(--paper-raised);
}
.tt-box--shadow {
  box-shadow: var(--shadow-ink);
}

/* ---------- buttons ---------- */
.tt-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--button-height);
  min-width: var(--tap-min);
  padding: 0 24px;
  font: 700 19px/24px var(--font-display);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  background: var(--paper);
  border: 0;
  border-radius: var(--wobble-1);
  box-shadow: var(--shadow-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--press) ease-out, box-shadow var(--press) ease-out;
}
.tt-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--stroke-bold) solid var(--ink);
  border-radius: inherit;
  filter: url(#tt-wobble);
  pointer-events: none;
}
.tt-btn:active {
  transform: translate(3px, 4px);
  box-shadow: 0 0 0 var(--ink);
}
.tt-btn--primary {
  background: var(--primary);
}
.tt-btn--md {
  min-height: var(--button-md-height);
  font-size: 22px;
  line-height: 26px;
  border-radius: var(--wobble-lg-2);
}
.tt-btn--block {
  display: flex;
  width: 100%;
}
.tt-btn--sm {
  min-height: var(--tap-min);
  padding: 0 16px;
  font-size: 17px;
  line-height: 22px;
  border-radius: var(--wobble-sm);
  box-shadow: var(--shadow-ink-sm);
}
.tt-btn--sm::before {
  border-width: var(--stroke-line);
}
.tt-btn--sm:active {
  transform: translate(2px, 3px);
}

.tt-icon-btn {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  color: var(--ink);
  background: var(--paper-raised);
  border: 0;
  border-radius: var(--wobble-round-btn);
  box-shadow: var(--shadow-ink-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--press) ease-out, box-shadow var(--press) ease-out;
}
.tt-icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--stroke-line) solid var(--ink);
  border-radius: inherit;
  filter: url(#tt-wobble);
  pointer-events: none;
}
.tt-icon-btn:active {
  transform: translate(2px, 3px);
  box-shadow: 0 0 0 var(--ink);
}
.tt-icon-btn svg {
  width: 24px;
  height: 24px;
}

/* ---------- header ---------- */
.site-header {
  padding: 14px 0 var(--head-gap);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  min-height: var(--tap-min);
  color: var(--ink);
  text-decoration: none;
}
.tile {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--wobble-sm);
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--stroke-line) solid var(--ink);
  border-radius: inherit;
  filter: url(#tt-wobble);
}
.tile svg {
  width: 26px;
  height: 26px;
}
.tile--x {
  background: var(--yellow);
}
.tile--o {
  background: var(--coral);
  border-radius: var(--wobble-badge);
}
.wordmark {
  position: relative;
  padding-bottom: 5px;
  font: 700 clamp(20px, 6.2vw, 28px) / 1.15 var(--font-display);
  white-space: nowrap;
}
.wordmark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: url("/assets/img/underline.svg") no-repeat left center / 100% 100%;
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.head-row .brand {
  min-width: 0;
}
.lang-menu {
  position: relative;
  flex: none;
}
.lang-menu summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 var(--space-10);
  font: 700 15px/20px var(--font-body);
  color: var(--ink);
  background: var(--paper-raised);
  border-radius: var(--wobble-sm);
  box-shadow: var(--shadow-ink-sm);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--press) ease-out, box-shadow var(--press) ease-out;
}
.lang-menu summary::-webkit-details-marker {
  display: none;
}
.lang-menu summary::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--stroke-line) solid var(--ink);
  border-radius: inherit;
  filter: url(#tt-wobble);
  pointer-events: none;
}
.lang-menu summary:active {
  transform: translate(2px, 3px);
  box-shadow: 0 0 0 var(--ink);
}
.lang-menu .ico {
  width: 20px;
  height: 20px;
  flex: none;
}
.lang-menu summary .ico {
  display: none; /* phones: code and chevron only, so the header never overflows */
}
.lang-menu .chev {
  width: 16px;
  height: 16px;
  flex: none;
}
.lang-menu[open] .chev {
  transform: rotate(180deg);
}
.lang-full {
  display: none;
}
.lang-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-8));
  z-index: 15;
  min-width: 168px;
  margin: 0;
  padding: var(--space-6);
  list-style: none;
}
.lang-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: var(--tap-min);
  padding: 0 var(--space-10);
  font: 700 17px/22px var(--font-body);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--wobble-xs);
}
.lang-panel a:hover {
  background: var(--yellow-faint);
}
.lang-panel a[aria-current] {
  background: var(--yellow-light);
}
@media (min-width: 520px) {
  .lang-menu summary .ico {
    display: block;
  }
  .lang-full {
    display: inline;
  }
  .lang-code {
    display: none;
  }}
@media (max-width: 359px) {
  .brand {
    gap: var(--space-6);
  }
  .tile {
    width: 32px;
    height: 32px;
  }
  .tile svg {
    width: 21px;
    height: 21px;
  }
  .wordmark {
    font-size: 20px;
  }
  .lang-menu summary {
    padding: 0 var(--space-8);
    gap: var(--space-4);
  }}

/* ---------- footer ---------- */
.site-footer {
  margin-top: auto;
  padding: var(--space-32) 0 var(--space-24);
  color: var(--text-muted);
}
.site-footer .wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-16);
  border-top: var(--stroke-hair) solid var(--divider);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  font-size: 15px;
  color: var(--ink);
}

/* ---------- home ---------- */
.hero {
  display: grid;
  gap: var(--space-24);
  padding: 0 0 var(--space-24);
}
.hero h1 {
  font-size: clamp(32px, 8.4vw, 48px);
  line-height: 1.12;
  text-wrap: balance;
}
.hero .lead {
  margin-top: var(--space-12);
  font-size: 17px;
  line-height: 22px;
  color: var(--text-muted);
}
/* store buttons: stacked on phones, side by side from 520 px.
   "Coming soon" = muted, dashed frame, not a link (the words carry the meaning, not the colour). */
.store-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  margin-top: var(--space-24);
  max-width: 420px;
}
@media (min-width: 520px) {
  .store-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.store-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  min-height: 64px;
  padding: var(--space-6) var(--space-16);
  text-align: left;
  background: var(--paper);
  border-radius: var(--wobble-1);
}
.store-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--stroke-line) dashed var(--ink-faint);
  border-radius: inherit;
  filter: url(#tt-wobble);
  pointer-events: none;
}
.store-btn.store-play {
  border-radius: var(--wobble-3);
}
.store-glyph {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--text-muted);
}
.store-text {
  display: flex;
  flex-direction: column;
}
.store-name {
  font: 700 19px/24px var(--font-display);
  color: var(--text-muted);
}
.store-soon {
  font: 400 14px/18px var(--font-body);
  color: var(--text-muted);
}
.store-btn--link {
  justify-self: center;
  align-self: center;
  min-height: var(--button-height);
  padding: 0;
  background: none;
  border-radius: var(--wobble-sm);
}
.store-btn--link::before {
  display: none;
}
.store-btn--link img {
  display: block;
  height: 52px;
  width: auto;
}

/* the example board */
.board {
  --label-col: minmax(76px, 0.85fr);
  display: grid;
  grid-template-columns: var(--label-col) repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-4);
  position: relative;
}
.board .label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 3px;
  font: 700 13px/16px var(--font-body);
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
  color: var(--ink);
}
.board .cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--paper-raised);
}
.w1 {
  border-radius: var(--wobble-1);
}
.w2 {
  border-radius: var(--wobble-2);
}
.w3 {
  border-radius: var(--wobble-3);
}
.w4 {
  border-radius: var(--wobble-4);
}
.board .cell[data-m="x"] {
  background: var(--yellow-light);
}
.board .cell[data-m="o"] {
  background: var(--coral-light);
}
.board .cell svg {
  width: 56%;
  height: 56%;
}

/* hero demo (demo.js): the markup is the final position; .is-live replays the game (reserved space: .win-row, .answer-box) */
.demo{display:grid;gap:var(--space-16);width:min(100%,400px);margin:0;container-type:inline-size}
.prompt{margin:0;min-height:2.6em;text-align:center;color:var(--ink);font:400 13px/1.3 var(--font-body);font-size:clamp(13px,4.5cqi,17px)}
.is-live .prompt{opacity:0;transition:opacity 160ms ease-out}
.is-live .prompt.show{opacity:1}
.demo-stage{display:grid;gap:var(--space-16)}
.win-row{display:flex;justify-content:center;min-height:36px}
.win-label{display:inline-flex;align-items:center;padding:4px 14px;background:var(--yellow);border-radius:var(--wobble-sm);font:700 17px/22px var(--font-display)}
.answer-box{display:flex;align-items:center;min-height:var(--button-height);padding:0 var(--space-16);font:700 19px/24px var(--font-body)}
.answer-box[data-who=x]{background:var(--yellow-faint)}
.answer-box[data-who=o]{background:var(--coral-faint)}
.demo:not(.is-live) .answer-box{visibility:hidden}
.board .cell svg,.ans{transition:opacity 220ms ease-out,transform 220ms ease-out}
.cell[data-m]{container-type:inline-size}
.cell[data-m] svg{position:absolute;left:28%;top:18%;width:44%;height:44%}
.ans{position:absolute;left:0;right:0;top:66%;text-align:center;white-space:nowrap;font:700 10px/1.2 var(--font-body);font-size:clamp(10px,14cqi,14px);color:var(--ink)}
.cell[data-w]::after{content:"";position:absolute;top:34.2%;height:11.6%;left:-4.5px;right:-4.5px;background:var(--ink);filter:url(#tt-wobble-bar)}
.cell[data-w=s]::after{left:38%;border-radius:99px 0 0 99px}
.cell[data-w=e]::after{right:38%;border-radius:0 99px 99px 0}
.is-live .cell[data-w]::after{transform:scaleX(0);transform-origin:left;transition:transform 130ms linear}
.is-live .cell[data-w=m]::after{transition-delay:130ms}
.is-live .cell[data-w=e]::after{transition-delay:260ms}
.is-live .cell.ln::after{transform:none}
.is-live .win-label{opacity:0;transform:scale(.8);transition:opacity 200ms,transform 200ms}
.is-live .win-label.on{opacity:1;transform:none}
.cf{position:absolute;width:8px;height:12px;border:1.5px solid var(--ink);border-radius:2px;pointer-events:none;animation:cf 1.2s ease-out forwards}
.c0{background:var(--yellow)}.c1{background:var(--coral)}.c2{background:var(--ink)}.c3{background:var(--paper)}
@keyframes cf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
.is-live .cell[data-m]:not(.on){background:var(--paper-raised)}
.is-live .cell:not(.on) svg,.is-live .cell:not(.on) .ans{opacity:0}
.is-live .cell:not(.on) svg{transform:scale(.6)}
.is-live .cell[data-sel=x][data-m]{background:var(--yellow-light)}
.is-live .cell[data-sel=o][data-m]{background:var(--coral-light)}
.is-live .cell[data-sel]::before{border-width:3.5px}
.is-live .label.hl{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.is-live #demo-text::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-3px;background:var(--ink);animation:caret 1s steps(2,start) infinite}
@keyframes caret{to{visibility:hidden}}

.how {
  padding: var(--space-16) 0 var(--space-32);
}
.how h2 {
  font-size: 28px;
  line-height: 34px;
}
.steps {
  display: grid;
  gap: var(--space-12);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--space-12);
  align-items: start;
  padding: var(--space-16);
}
.steps li::after {
  content: counter(step);
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--yellow);
  border-radius: var(--wobble-badge);
  font: 700 21px/1 var(--font-display);
}
.steps h3 {
  grid-column: 2;
  font-size: 21px;
  line-height: 26px;
}
.steps p {
  grid-column: 2;
  margin-top: var(--space-4);
  color: var(--text-muted);
}

/* ---------- invite ---------- */
.invite {
  width: min(100% - 2 * var(--gutter), 480px);
  margin-inline: auto;
  padding: 0 0 var(--space-16);
}
.invite h1 {
  font-size: 28px;
  line-height: 34px;
  text-wrap: balance;
}
.who {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.avatar-slot {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--paper-raised);
  border-radius: var(--wobble-round);
}
.avatar-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--stroke-line) solid var(--ink);
  border-radius: inherit;
  filter: url(#tt-wobble);
}
.avatar-slot img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.invite [data-panel] {
  display: none;
}
.invite[data-state="loading"] [data-panel~="ok"],
.invite[data-state="ok"] [data-panel~="ok"],
.invite[data-state="invalid"] [data-panel~="invalid"],
.invite[data-state="expired"] [data-panel~="expired"] {
  display: block;
}

.code-row {
  margin-top: var(--space-10);
  min-height: 84px;
}
.code-box {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 60 px each side: the copy button (44 px + 8 px edge + 8 px air) on the right, the same on the left so the code stays centred */
  padding: var(--space-8) 60px var(--space-6);
}
.code-box .tt-icon-btn {
  position: absolute;
  right: var(--space-8);
  top: calc(50% - 22px);
}
.code-label {
  font-size: 14px;
  line-height: 18px;
  color: var(--text-muted);
}
.code {
  font: 700 50px/60px var(--font-body);
  font-size: min(50px, calc(100cqi / 3.3)); /* cqi = the box minus its 60 px paddings; 4 letters need 3.2em: shrinks before it could run under the button */
  letter-spacing: 0.16em;
  padding-left: 0.16em; /* centres the text: the last letter's spacing is trailing */
  white-space: nowrap;
  font-variant-ligatures: none;
  user-select: all;
  -webkit-user-select: all;
}
.nojs-note {
  margin-top: var(--space-10);
  padding: var(--space-12) var(--space-16);
  background: var(--paper-raised);
}
.nojs-note code {
  font: 700 17px/22px var(--font-body);
  letter-spacing: 0.08em;
}

.invite-steps {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
}
.invite-steps li {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  font-size: 17px;
  line-height: 22px;
}
.invite-steps .n {
  flex: none;
  min-width: 1.1em;
  font: 700 17px/22px var(--font-display);
}
.code-inline {
  font-weight: 700;
  letter-spacing: 0.12em;
}

.invite .store-row {
  margin-top: var(--space-8);
  max-width: none;
}
.no-app {
  margin-top: var(--space-16);
  font-size: 14px;
  line-height: 18px;
  color: var(--text-muted);
}
.open-app {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}
.open-app a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-8);
  font: 700 17px/22px var(--font-display);
}
[data-platform="android"] .store-play {
  order: -1;
}

.panel-text {
  margin-top: var(--space-8);
  font-size: 17px;
  line-height: 22px;
  color: var(--text-muted);
}
.panel-icon {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.panel-icon svg {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--coral);
}

/* QR code: desktop only (a phone user is already on the phone) */
.qr {
  display: none;
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .qr[data-ready] {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-top: var(--space-24);
    padding: var(--space-16);
  }
  .qr-img {
    flex: none;
    width: 132px;
    height: 132px;
    padding: 6px;
    background: #fff;
    border-radius: var(--wobble-sm);
  }
  .qr-img svg {
    width: 100%;
    height: 100%;
  }
  .qr p {
    color: var(--text-muted);
  }}

/* toast */
.toast-region {
  position: fixed;
  top: var(--space-12);
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.toast {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-16);
  font: 700 17px/22px var(--font-body);
  color: var(--paper);
  background: var(--ink);
  border-radius: var(--wobble-sm);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.toast[data-show] {
  opacity: 1;
  transform: none;
}

/* ---------- legal pages and 404 ---------- */
.doc {
  width: min(100% - 2 * var(--gutter), 720px);
  margin-inline: auto;
  padding: 0 0 var(--space-24);
}
.doc h1 {
  font-size: clamp(30px, 7.5vw, 40px);
  line-height: 1.12;
}
.doc h2 {
  margin-top: var(--space-32);
  font-size: 21px;
  line-height: 26px;
  scroll-margin-top: 16px;
}
.doc h3 {
  margin-top: var(--space-16);
  font-size: 17px;
  line-height: 22px;
}
.doc p,
.doc ul,
.doc address {
  margin-top: var(--space-10);
  font-style: normal;
}
.doc ul {
  padding-left: 22px;
}
.doc li + li {
  margin-top: var(--space-6);
}
.doc .meta {
  margin-top: var(--space-8);
  color: var(--text-muted);
}
.doc .toc {
  margin-top: var(--space-16);
  padding: var(--space-12) var(--space-16);
  background: var(--paper-raised);
}
.doc .toc ol {
  margin: 0;
  padding-left: 22px;
}
.doc .toc a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}
.faq {
  margin-top: var(--space-10);
  background: var(--paper-raised);
  border-radius: var(--wobble-1);
  position: relative;
}
.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--stroke-line) solid var(--ink);
  border-radius: inherit;
  filter: url(#tt-wobble);
  pointer-events: none;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: var(--tap-min);
  padding: var(--space-10) var(--space-16);
  font: 700 17px/22px var(--font-body);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: none;
  font: 700 24px/1 var(--font-display);
}
.faq[open] summary::after {
  content: "\2212";
}
.faq-a {
  padding: 0 var(--space-16) var(--space-16);
}
.faq-a p:first-child {
  margin-top: 0;
}
.doc .draft-note {
  margin-top: var(--space-16);
  padding: var(--space-12) var(--space-16);
  background: var(--yellow-faint);
  font-weight: 700;
}
.doc table {
  width: 100%;
  margin-top: var(--space-10);
  border-collapse: collapse;
  font-size: 15px;
  line-height: 20px;
}
.doc th,
.doc td {
  padding: var(--space-8);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--stroke-hair) solid var(--divider);
}
.doc th {
  font-weight: 700;
}
.table-scroll {
  overflow-x: auto;
}

.center-page {
  width: min(100% - 2 * var(--gutter), 480px);
  margin: 0 auto;
  padding: 0 0 var(--space-24);
  text-align: center;
}
.mark-pair {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}
.mark-pair .tile {
  width: 64px;
  height: 64px;
}
.mark-pair .tile svg {
  width: 42px;
  height: 42px;
}
.center-page h1 {
  font-size: 40px;
  line-height: 44px;
}
.center-page p {
  margin-top: var(--space-12);
  color: var(--text-muted);
}
.center-page .tt-btn {
  margin-top: var(--space-24);
}
.center-page .other-lang {
  font-size: 15px;
}

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

/* ---------- wider screens ---------- */
@media (min-width: 760px) {
  :root {
    --head-gap: 48px;
  }
  .site-header {
    padding-top: 24px;
  }
  .hero {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 48px;
    padding: 0 0 var(--space-32);
  }
  .hero .lead {
    font-size: 19px;
    line-height: 24px;
  }
  .demo {
    justify-self: end;
  }
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cf {
    display: none;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .toast {
    transform: none;
  }}