/* Palette is the app's own ballpark system: light = baseball leather,
     dark = the dusk-ballpark navy the app actually ships. Both sets are
     defined here in :root first so the un-stamped "system" state resolves. */
  :root {
    --ground: #FBF3E2;
    --panel: #FFFFFF;
    --panel-edge: #E4D6B8;
    --ink: #17233D;
    --ink-soft: #5A4A2C;
    --stitch: #C22333;
    --stitch-ink: #FFF7EE;
    --gold: #B8832A;
    --rule: rgba(23, 35, 61, 0.14);
    --shadow: 0 1px 2px rgba(23, 35, 61, 0.06), 0 8px 24px -12px rgba(23, 35, 61, 0.18);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #132139;
      --panel: #1C2C4B;
      --panel-edge: #2C3D5F;
      --ink: #F7EEDD;
      --ink-soft: #A9B4CB;
      --stitch: #EA5260;
      --stitch-ink: #FFF7EE;
      --gold: #F0B94A;
      --rule: rgba(247, 238, 221, 0.16);
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    }
  }
  :root[data-theme="dark"] {
    --ground: #132139;
    --panel: #1C2C4B;
    --panel-edge: #2C3D5F;
    --ink: #F7EEDD;
    --ink-soft: #A9B4CB;
    --stitch: #EA5260;
    --stitch-ink: #FFF7EE;
    --gold: #F0B94A;
    --rule: rgba(247, 238, 221, 0.16);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  }

  body {
    background: var(--ground);
    color: var(--ink);
    font-family: Nunito, "Segoe UI", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 40rem; margin: 0 auto; padding: 0 1.25rem 5rem; }

  /* Masthead: the red band is a nod to a baseball's stitching seam, the one
     decorative flourish on the page. */
  header { padding: 3.5rem 0 2rem; }
  .seam {
    height: 5px;
    border-radius: 99px;
    background: repeating-linear-gradient(
      90deg, var(--stitch) 0 14px, transparent 14px 22px
    );
    margin-bottom: 1.75rem;
  }
  h1 {
    font-family: "Alfa Slab One", Rockwell, Georgia, serif;
    font-size: clamp(2.1rem, 7vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
    text-wrap: balance;
  }
  .standfirst { color: var(--ink-soft); font-size: 1.05rem; margin: 0; max-width: 34rem; }

  h2 {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 3rem 0 1rem;
  }
  h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.35rem; text-wrap: balance; }
  p { margin: 0 0 0.9rem; }
  p:last-child { margin-bottom: 0; }
  a { color: var(--stitch); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

  /* Contact sits first: someone opening a support page has a problem now. */
  .contact {
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: 16px;
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .email {
    font-family: "Alfa Slab One", Rockwell, Georgia, serif;
    font-size: clamp(1.15rem, 4.4vw, 1.6rem);
    word-break: break-all;
    line-height: 1.25;
  }
  .contact .note { color: var(--ink-soft); font-size: 0.94rem; margin: 0; }

  .faq { display: flex; flex-direction: column; gap: 0; }
  .faq > div { padding: 1.25rem 0; border-top: 1px solid var(--rule); }
  .faq > div:first-child { border-top: none; padding-top: 0.25rem; }
  .faq p { color: var(--ink-soft); }
  .faq strong { color: var(--ink); font-weight: 700; }

  .path {
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
  }

  footer {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
  }
  footer .v { font-variant-numeric: tabular-nums; }

  /* ---- Legal pages ---------------------------------------------------
     The privacy policy and terms came from documents with their own
     palette, which called the seam red "--accent". It is the same colour
     this sheet already calls --stitch (#C22333 light, #EA5260 dark), so
     these rules use --stitch rather than introduce a second name for it. */
  .eyebrow {
    color: var(--gold);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .eff { color: var(--ink-soft); font-size: 0.875rem; }
  .note {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    margin: 1.5rem 0;
    font-size: 0.94rem;
    color: var(--ink-soft);
  }
  .tldr {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--stitch);
    border-radius: 0.75rem;
    padding: 1.125rem 1.25rem;
    margin: 1.5rem 0 2rem;
    box-shadow: var(--shadow);
  }
  .tldr h2 { margin: 0 0 0.625rem; }
  .tldr ul { margin: 0; padding-left: 1.25rem; }
  .tldr li { margin: 0.4375rem 0; }
  .num { color: var(--gold); font-variant-numeric: tabular-nums; }
  .legalese { font-size: 0.94rem; color: var(--ink-soft); }

  /* ---- Landing -------------------------------------------------------- */
  .cta-note {
    color: var(--ink-soft);
    font-size: 0.94rem;
    font-weight: 700;
    margin: 0.75rem 0 0;
  }