/* Colours from the Workspace Messenger design system (tokens.json). */
  :root {
    --surface-000: #f3efe8; --surface-100: #faf8f4; --surface-200: #ffffff;
    --line: #e3ddd2; --line-control: #8f8577;
    --ink: #2a241d; --ink-muted: #6b6257;
    --brand: #1d6b58; --brand-hover: #175a4a; --on-brand: #ffffff; --brand-soft: #dcece6;
    --badge: #c9472a;
    --radius-md: 8px; --radius-lg: 12px;
    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --surface-000: #151310; --surface-100: #1c1915; --surface-200: #25211c;
      --line: #3a332c; --line-control: #857b6f;
      --ink: #f1ebe3; --ink-muted: #b3a99c;
      --brand: #62c3a6; --brand-hover: #7dd0b6; --on-brand: #0f2620; --brand-soft: #1f3a32;
      --badge: #f0805f;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans", Ubuntu, Cantarell, sans-serif;
    font-size: 16px; line-height: 1.55;
    color: var(--ink); background: var(--surface-100);
  }
  a { color: var(--brand); }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
  .display { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; }

  header { display: flex; align-items: center; gap: 10px; padding: 20px 0; }
  header img { width: 32px; height: 32px; border-radius: 8px; }
  header .name { font-size: 22px; }
  header nav { margin-left: auto; display: flex; gap: 20px; font-size: 15px; }
  header nav a { color: var(--ink-muted); text-decoration: none; }
  header nav a:hover { color: var(--ink); }

  .hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: center; padding: 40px 0 64px; }
  .hero h1 { margin: 0 0 16px; font-size: clamp(34px, 5vw, 54px); line-height: 1.08; }
  .hero p.lead { margin: 0 0 28px; font-size: 19px; color: var(--ink-muted); max-width: 34em; }
  .hero img { width: 100%; max-width: 440px; justify-self: center; height: auto; }

  .dl { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px;
    border-radius: var(--radius-md); font-weight: 600; font-size: 16px; text-decoration: none;
    background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand);
  }
  .btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
  .btn.secondary { background: transparent; color: var(--ink); border-color: var(--line-control); }
  .btn.secondary:hover { background: var(--surface-000); }
  .meta { margin-top: 12px; font-size: 14px; color: var(--ink-muted); }

  section { padding: 56px 0; border-top: 1px solid var(--line); }
  section h2 { margin: 0 0 24px; font-size: 30px; }
  .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .card { padding: 20px; background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); }
  .card h3 { margin: 0 0 6px; font-size: 17px; }
  .card p { margin: 0; color: var(--ink-muted); font-size: 15px; }
  .dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 8px; vertical-align: 1px; }

  .platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .platforms .card a { display: block; margin-top: 8px; font-weight: 600; }
  .platforms .req { margin-top: 10px; font-size: 13px; }

  footer { padding: 32px 0 48px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 24px; }

  @media (max-width: 760px) {
    header nav { display: none; }
    .hero { grid-template-columns: 1fr; padding-top: 16px; }
    .hero img { max-width: 260px; order: -1; }
    .grid, .platforms { grid-template-columns: 1fr; }
  }

  /* FAQ */
  .faq { display: flex; flex-direction: column; gap: 8px; }
  .faq details { padding: 14px 18px; background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); }
  .faq summary { cursor: pointer; font-weight: 600; }
  .faq p { margin: 10px 0 0; color: var(--ink-muted); }
  footer a { color: var(--ink-muted); }