/* ============================================================
   Tennis Network — the shared foundation.

   Split out of marketing.css on 2026-09-09, when /join became the
   second surface built on this design system. Everything here is
   the system itself — the reset, the base elements, the type
   scale, the marks and the buttons — and nothing here knows about
   a page. Page-specific styling lives in marketing.css and
   join/join.css beside it.

   Tokens come from marketing/tokens.css, which must load first.
   ============================================================ */

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:15px;line-height:22px;
    font-variant-numeric:tabular-nums;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:600;margin:0;text-wrap:balance;}
  p{margin:0;}
  a{color:var(--primary);text-decoration:none;}
  a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
    outline:2px solid var(--royal-500);outline-offset:3px;border-radius:4px;
  }

  /* ---------- type scale (Archivo above 17px, Inter below) ---------- */
  .display{font-size:clamp(38px,5.6vw,62px);line-height:1.03;letter-spacing:-.035em;}
  .section-h{font-size:clamp(26px,3.2vw,38px);line-height:1.12;letter-spacing:-.028em;}
  .title{font-size:21px;line-height:25px;letter-spacing:-.028em;}
  .card-title{font-size:17px;line-height:21px;letter-spacing:-.022em;}
  .stat{font-family:Archivo,sans-serif;font-weight:600;font-size:clamp(30px,4vw,44px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
  .label{font-weight:600;font-size:14px;line-height:17px;letter-spacing:-.012em;}
  .label-s{font-weight:600;font-size:12.5px;line-height:15px;letter-spacing:-.005em;}
  .body-l{font-size:15px;line-height:22px;}
  .body-s{font-size:12.5px;line-height:18px;}
  .overline{font-weight:600;font-size:11px;line-height:13px;letter-spacing:.13em;text-transform:uppercase;}
  .micro{font-weight:600;font-size:9px;line-height:11px;letter-spacing:.11em;text-transform:uppercase;}

  .wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
  @media (max-width:520px){.wrap{padding:0 20px;}}

  /* ---------- marks: colour lives in a 7px mark, never a fill ---------- */
  .dot{width:7px;height:7px;border-radius:var(--r-pill);display:inline-block;flex:none;}
  .square{width:6px;height:6px;border-radius:2px;display:inline-block;flex:none;}
  .bar{width:2px;height:13px;border-radius:1px;display:inline-block;flex:none;}
  .verified{
    width:14px;height:14px;border-radius:var(--r-pill);background:var(--verified);
    display:inline-flex;align-items:center;justify-content:center;flex:none;
  }
  .verified svg{width:8px;height:8px;display:block;}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:Inter,sans-serif;font-weight:600;font-size:14px;line-height:17px;letter-spacing:-.012em;
    padding:13px 20px;border-radius:var(--r-action);border:1px solid transparent;
    cursor:pointer;transition:background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  }
  .btn-primary{background:var(--primary);color:var(--on-primary);}
  .btn-primary:hover{background:var(--primary-hover);}
  .btn-on-ground{background:var(--night-0);color:var(--royal-800);}
  .btn-on-ground:hover{background:var(--royal-100);}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
  .btn-ghost:hover{border-color:var(--night-400);}
  .btn-ghost-ground{background:transparent;color:var(--night-0);border-color:var(--line-on-ground);}
  .btn-ghost-ground:hover{border-color:var(--night-400);}