@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("fonts/AtkinsonHyperlegible-400.ttf") format("truetype"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("fonts/AtkinsonHyperlegible-700.ttf") format("truetype"); }
@font-face { font-family: "Lexend"; font-weight: 400; font-display: swap; src: url("fonts/Lexend-400.ttf") format("truetype"); }
@font-face { font-family: "Lexend"; font-weight: 600; font-display: swap; src: url("fonts/Lexend-600.ttf") format("truetype"); }
@font-face { font-family: "Lexend"; font-weight: 700 800; font-display: swap; src: url("fonts/Lexend-800.ttf") format("truetype"); }

/* Layout: one calm reading column, a lamplit header band, then Help and Privacy as two plain sections. */
  :root {
    --bg: #f2f3ee;
    --surface: #ffffff;
    --ink: #24261f;
    --ink-soft: #5c6056;
    --rule: #d9dccf;
    --accent: #2e6461;
    --glow: #b7862a;
    --band: #1f2624;
    --band-ink: #f1ead9;
    --display: "Lexend", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --body: "Atkinson Hyperlegible", "Verdana", system-ui, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #171a18; --surface: #20241f; --ink: #ece7da; --ink-soft: #aeb0a3;
      --rule: #343a33; --accent: #8cc7bf; --glow: #e3b45a; --band: #0f1211; --band-ink: #f1ead9;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #171a18; --surface: #20241f; --ink: #ece7da; --ink-soft: #aeb0a3;
    --rule: #343a33; --accent: #8cc7bf; --glow: #e3b45a; --band: #0f1211; --band-ink: #f1ead9;
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 1.0625rem/1.65 var(--body);
  }
  .wrap {
    max-width: 44rem;
    margin: 0 auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  header {
    background:
      radial-gradient(60% 140% at 85% 120%, color-mix(in srgb, var(--glow) 38%, transparent), transparent 70%),
      var(--band);
    color: var(--band-ink);
  }
  header .wrap { padding-block: 3rem 2.5rem; display: grid; gap: 0.75rem; }
  .eyebrow {
    font: 600 0.75rem/1 var(--display);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--glow);
  }
  h1 {
    font: 700 clamp(2rem, 6vw, 2.75rem)/1.1 var(--display);
    margin: 0;
    text-wrap: balance;
  }
  header p { margin: 0; max-width: 34rem; color: color-mix(in srgb, var(--band-ink) 82%, transparent); }
  nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
  nav a {
    font: 600 0.9375rem/1 var(--display);
    color: var(--band-ink);
    text-decoration: none;
    padding: 0.6rem 1rem;
    border: 1px solid color-mix(in srgb, var(--band-ink) 30%, transparent);
    border-radius: 999px;
  }
  nav a:hover, nav a:focus-visible { border-color: var(--glow); color: var(--glow); }

  main .wrap { padding-block: 2.5rem 4rem; display: grid; gap: 3.5rem; }
  section { display: grid; gap: 1.25rem; scroll-margin-top: 1rem; }
  h2 {
    font: 700 1.625rem/1.2 var(--display);
    margin: 0;
    text-wrap: balance;
  }
  h3 {
    font: 600 1.0625rem/1.35 var(--display);
    margin: 0;
  }
  p { margin: 0; }
  .lead { color: var(--ink-soft); }

  .contact {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 1.25rem;
    display: grid;
    gap: 0.75rem;
  }
  .email {
    font: 600 1.125rem/1.3 var(--display);
    color: var(--accent);
    user-select: all;
    overflow-wrap: anywhere;
    min-width: 0;
  }
  button {
    font: 600 0.875rem/1 var(--display);
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
  }
  button:focus-visible, nav a:focus-visible, a:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
  .small { font-size: 0.9375rem; color: var(--ink-soft); }

  .faq { display: grid; gap: 0; border-top: 1px solid var(--rule); }
  .faq > div { padding-block: 1.1rem; border-bottom: 1px solid var(--rule); display: grid; gap: 0.35rem; }

  .policy { display: grid; gap: 1.5rem; }
  .policy > div { display: grid; gap: 0.4rem; }
  .policy ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.3rem; }
  .stamp {
    font: 600 0.8125rem/1 var(--display);
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    text-transform: uppercase;
  }
  a { color: var(--accent); }
  footer .wrap { padding-block: 0 3rem; color: var(--ink-soft); font-size: 0.875rem; }
  @media (prefers-reduced-motion: no-preference) {
    nav a, button { transition: border-color 0.2s, color 0.2s; }
  }

  .button {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font: 600 1rem/1 var(--display);
    color: var(--bg); background: var(--accent);
    text-decoration: none; border-radius: 999px; padding: 0.8rem 1.2rem;
  }
  .button:hover { filter: brightness(1.08); }
  .button:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
  .back { font: 600 0.9375rem/1 var(--display); color: var(--band-ink); text-decoration: none; }