/* The deck's palette, so a publisher who reads one and then the other sees one studio. */
  :root{
    --navy-hi:#274A78; --navy-lo:#0E2036;
    --teal:#22D3C5; --paper:#F4F7FC; --muted:#8A97A8; --line:rgba(255,255,255,.10);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:Poppins,ui-sans-serif,system-ui,sans-serif;
    background:var(--navy-lo);
    background-image:linear-gradient(155deg,var(--navy-hi) 0%,var(--navy-lo) 58%);
    background-attachment:fixed;
    color:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased;
    min-height:100vh; display:flex; flex-direction:column;
  }
  .wrap{width:100%; max-width:60rem; margin:0 auto; padding:0 1.5rem}
  header{padding:4.5rem 0 0}
  .mark{margin-bottom:3.5rem}
  /* 23rem keeps the 'L L C' line above the size it turns into a smudge. */
  .mark img{display:block; width:min(23rem,100%); height:auto}
  h1{
    font-size:clamp(2.1rem,5.5vw,3.4rem); font-weight:700; line-height:1.08;
    letter-spacing:-.02em; text-wrap:balance; margin-bottom:1.1rem;
  }
  .lead{font-size:clamp(1.02rem,2.2vw,1.18rem); color:#DCE6F4; max-width:52ch; font-weight:300}
  .lead b{font-weight:500; color:var(--paper)}
  .rule{height:1px; background:var(--line); margin:3.5rem 0 2.5rem}
  .kicker{
    font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
    color:var(--teal); margin-bottom:1.5rem;
  }
  .games{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.25rem}
  .game{
    border:1px solid var(--line); border-radius:.75rem; padding:1.6rem;
    background:rgba(255,255,255,.025);
  }
  .game h2{font-size:1.22rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.15rem}
  .game .tag{font-size:.95rem; color:var(--teal); font-weight:400; margin-bottom:.9rem}
  .game p{font-size:.95rem; color:#C6D4E8; font-weight:300}
  .state{
    display:inline-block; margin-top:1.1rem; font-size:.75rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--muted); border:1px solid var(--line);
    border-radius:2rem; padding:.28rem .8rem;
  }
  footer{margin-top:auto; padding:3.5rem 0 4rem}
  footer .contact{font-size:1.02rem}
  a{color:var(--teal); text-decoration-thickness:1px; text-underline-offset:3px}
  a:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:2px}
  .small{font-size:.82rem; color:var(--muted); margin-top:1.6rem; line-height:1.7}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── Prose pages (support, privacy) ─────────────────────────────────── */
.page{padding:3.5rem 0 1rem}
.page h1{font-size:clamp(2rem,4.5vw,2.9rem); line-height:1.15; margin-bottom:.6rem}
.page .updated{color:var(--muted); font-size:.85rem; letter-spacing:.04em; text-transform:uppercase}
.prose{padding:1rem 0 4rem; display:flex; flex-direction:column; gap:1.6rem; max-width:44rem}
.prose h2{
  font-size:1.15rem; font-weight:600; letter-spacing:.01em;
  padding-top:1.2rem; border-top:1px solid var(--line);
}
.prose h2:first-child{padding-top:0; border-top:none}
.prose p{color:#C6D2E2}
.prose a{color:var(--teal)}
.prose ul{display:flex; flex-direction:column; gap:.7rem; padding-left:1.1rem}
.prose li{color:#C6D2E2}
.prose li::marker{color:var(--teal)}
.prose .answer{
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:.7rem; padding:1.1rem 1.25rem;
}
.prose .answer b{color:var(--paper)}
.back{display:inline-block; margin-top:.4rem; color:var(--muted); font-size:.9rem}
.back:hover{color:var(--teal)}