/* Vox Incanto business page. Colours are the app's own tokens
   (Docs/Design/design-system.md: 2.1 for the board, 13.1 for the page), so
   the demo board looks like the player. System font, no web fonts (13). */
:root {
  --page: #F3F4F7;
  --surface: #FFFFFF;
  --surface-alt: #ECEEF2;
  --text: #14161A;
  --mute: #4A5060;
  --line: #D5D8DE;
  --accent: #0A4FD6;
  --focus: #0A4FD6;
  --board-bg: #ECEEF2;
  --bar-border: #4A5060;
  --nav-fill: #2B3040;
  --nav-text: #FFFFFF;
  --plate: #FFFFFF;
  --pressed: rgba(0, 0, 0, 0.18);
  --yellow-f: #FFF1A8; --yellow-b: #7A6200;
  --green-f: #BFEBC4;  --green-b: #1F6B2B;
  --blue-f: #BBD9FF;   --blue-b: #1F4FA3;
  --orange-f: #FFD3A6; --orange-b: #9A4A00;
  --pink-f: #FFC9DD;   --pink-b: #A3285F;
  --red-f: #FFB8B0;    --red-b: #A11D12;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #101216;
    --surface: #1A1D23;
    --surface-alt: #22262E;
    --text: #F5F6F8;
    --mute: #C9CED8;
    --line: #343A46;
    --accent: #8AB4FF;
    --focus: #8AB4FF;
    --board-bg: #101216;
    --bar-border: #C9CED8;
    --nav-fill: #3A4050;
    --plate: #E6E8EE;
    --pressed: rgba(255, 255, 255, 0.18);
    --yellow-f: #4D4200; --yellow-b: #FFD94A;
    --green-f: #143D1C;  --green-b: #6FD683;
    --blue-f: #16305E;   --blue-b: #7FB2FF;
    --orange-f: #5A2E00; --orange-b: #FFA85C;
    --pink-f: #5A1736;   --pink-b: #FF8FBE;
    --red-f: #5E1812;    --red-b: #FF8A7D;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
}

a { color: var(--accent); text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.75rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1rem; }
p { margin: 0; }

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus { left: 1rem; top: 1rem; background: var(--surface); padding: 0.5rem 0.75rem; }

/* Header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
}
.wordmark { font-weight: 700; font-size: 1.2rem; color: var(--text); text-decoration: none; }
.site-header nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; }

/* Sections */
main section { padding-block: 3rem; }
main section + section { border-top: 1px solid var(--line); }
.prose { max-width: 65ch; display: grid; gap: 0.9rem; }
.mute { color: var(--mute); }
.status {
  justify-self: start;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.75rem;
  font-size: 0.9rem;
}

/* Hero: words on the left, the demo board on the right; stacked when narrow */
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 52rem) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
}
.hero .lead { font-size: 1.15rem; }

/* The demo board, drawn like the player: message bar, then the grid */
.board {
  background: var(--board-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem;
  display: grid;
  gap: 0.6rem;
}
.message-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 2px solid var(--bar-border);
  border-radius: 10px;
  padding: 0.4rem 0.4rem 0.4rem 0.8rem;
  min-height: 3.4rem;
}
.message {
  flex: 1;
  min-width: 0;
  font-size: 1.3rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.message:empty::before { content: "Tap a symbol"; color: var(--mute); font-weight: 400; font-size: 1rem; }
.bar-button {
  font: inherit;
  font-weight: 700;
  background: var(--nav-fill);
  color: var(--nav-text);
  border: 0;
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.cell {
  font: inherit;
  font-weight: 700;
  color: var(--text);
  border: 3px solid;
  border-radius: 10px;
  padding: 0.5rem 0.25rem 0.4rem;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  cursor: pointer;
  min-width: 0;
}
.cell:active { box-shadow: inset 0 0 0 999px var(--pressed); }
.plate {
  background: var(--plate);
  border-radius: 6px;
  width: 100%;
  max-width: 5rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.plate img { width: 85%; height: 85%; }
.yellow { background: var(--yellow-f); border-color: var(--yellow-b); }
.green  { background: var(--green-f);  border-color: var(--green-b); }
.blue   { background: var(--blue-f);   border-color: var(--blue-b); }
.orange { background: var(--orange-f); border-color: var(--orange-b); }
.pink   { background: var(--pink-f);   border-color: var(--pink-b); }
.red    { background: var(--red-f);    border-color: var(--red-b); }
.board-note { font-size: 0.9rem; color: var(--mute); }

/* Feature list */
.features {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem 2rem;
}
.features li { display: grid; gap: 0.35rem; align-content: start; }
.features p { color: var(--mute); }

/* Pricing */
.plans {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}
.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
}
.plan.main { border: 2px solid var(--accent); }
.price { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.price span { font-size: 1rem; font-weight: 400; color: var(--mute); }
.plan ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }

/* Contact details */
.details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem 1.5rem; margin: 0; }
.details dt { font-weight: 700; }
.details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  .details { grid-template-columns: minmax(0, 1fr); }
  .details dd { margin-bottom: 0.5rem; }
}

/* Policy pages */
.policy { padding-block: 2.5rem 3rem; }
.policy .prose { gap: 1rem; }
.policy h2 { font-size: 1.25rem; margin-top: 1rem; }
.policy ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }

/* Footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--mute); }
.site-footer .wrap { display: grid; gap: 0.5rem; padding-block: 1.5rem; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; }