:root {
    --navy: #1A2129;        /* the logo's field */
    --navy-2: #222C36;      /* raised surfaces */
    --court: #2F6FA8;       /* a hard court's playing surface */
    --apron: #2E7B57;       /* the green around it */
    --chalk: #FFFFFF;
    --lime: #A8C400;        /* the logo's ball */
    --lime-ink: #1B2400;
    --mint: #8FD6A8;        /* the app's buttons */
    --mint-ink: #16301F;
    --soft: #BAC5CE;
    --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;   /* one spacing scale for everything */
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy: #1A2129; } }
  :root[data-theme="dark"] { --navy: #1A2129; }
  * { box-sizing: border-box; }
  :root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); }
  body { margin: 0; background: var(--navy); color: var(--chalk); font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: inherit; }
  a:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
  h1, h2, h3 { margin: 0; line-height: 1.08; }
  h1 { font-size: clamp(2.5rem, 4.6vw, 3.75rem); font-weight: 900; letter-spacing: -0.02em; }
  h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 900; letter-spacing: -0.01em; }
  h3 { font-size: 1.5rem; font-weight: 700; }
  p { margin: 0; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s4); }
  section { padding: var(--s7) 0; }

  /* top bar: the logo and the links together at the left, the button at the right */
  .top { display: flex; align-items: center; gap: var(--s4); height: 64px; }
  .logo { width: 44px; height: 44px; border-radius: 10px; display: block; }
  .top nav { display: flex; gap: var(--s3); font-size: 15px; font-weight: 700; letter-spacing: .02em; }
  .top nav a { text-decoration: none; color: var(--chalk); opacity: .86; padding: 6px 2px; border-bottom: 2px solid transparent; }
  .top nav a:hover { opacity: 1; border-bottom-color: var(--lime); }
  .top .btn { margin-left: auto; height: 40px; margin-right: 4px; }
  /* THE BUTTON, everywhere: a court's colours. Blue surface, a white boundary, a green apron ring. NO lines inside a button:
     the court's lines are for design elements (the closing panel), where nothing has to be read through them. */
  .btn, .store { position: relative; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap;
    color: #fff; font-weight: 700; border: 2px solid #fff; border-radius: 8px; box-shadow: 0 0 0 4px var(--apron); background-color: var(--court); }
  .btn:hover, .store:hover { background-color: #3A7FBC; }
  .btn { height: 44px; padding: 0 var(--s3); font-size: 16px; }
  .store { flex-direction: column; height: 60px; padding: 0 var(--s3); min-width: 176px; }
  .store small { font-size: 11px; font-weight: 500; line-height: 1.2; opacity: .95; }
  .store b { font-size: 19px; line-height: 1.15; font-weight: 700; }

  /* hero: the words, then four of the app's own screens standing on a court (a design element, so it has its lines) */
  .hero { padding: var(--s5) 0 var(--s7); }
  .hero .say { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); }
  .hero h1 { max-width: 16ch; }
  .hero .say p { font-size: 1.25rem; color: var(--soft); max-width: 56ch; }
  .stores { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); padding: 4px; }
  .free { font-size: 15px; color: var(--soft); }
  .screens { position: relative; margin-top: var(--s6); padding: 0 var(--s4) var(--s5); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); justify-items: center; }
  .screens::before { content: ""; position: absolute; left: 0; right: 0; top: 150px; bottom: 0; border-radius: 28px; border: 4px solid #fff; outline: 14px solid var(--apron); outline-offset: 0; margin: 14px;
    --ln: rgba(255,255,255,.26); background-color: var(--court);
    background-image: linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)), linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45));
    background-repeat: no-repeat; background-size: 100% 4px, 100% 4px, 4px 74%, 4px 74%, 54% 4px, 4px 100%; background-position: 0 13%, 0 87%, 23% 50%, 77% 50%, 50% 50%, 50% 0; }
  .screens figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
  .screens figure:nth-child(even) { margin-top: var(--s5); }
  .screens figcaption { font-weight: 700; font-size: 1.05rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

  /* the net, across the whole page */
  .net { position: relative; height: 40px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 1px, transparent 1px 9px), repeating-linear-gradient(0deg, rgba(255,255,255,.3) 0 1px, transparent 1px 9px), rgba(8,11,14,.5);
    border-top: 7px solid var(--chalk); box-shadow: 0 16px 22px -10px rgba(0,0,0,.6); }
  .net b { position: absolute; left: calc(50% - 3px); top: -7px; bottom: 0; width: 6px; background: var(--chalk); }

  .lede { color: var(--soft); font-size: 1.2rem; max-width: 52ch; margin-top: var(--s2); }

  /* how it works: three steps in order, each the same card as the sections below: a numbered ball at the left, the words beside it */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s5); }
  .step { background: var(--navy-2); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: var(--s4) var(--s3); display: grid; grid-template-columns: 56px 1fr; column-gap: var(--s2); align-items: start; }
  .num { width: 56px; height: 56px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); font-weight: 900; font-size: 24px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
  .num::before, .num::after { content: ""; position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.9); }
  .num::before { left: -44px; } .num::after { right: -44px; }
  .step h3 { margin-top: 4px; font-size: 1.35rem; }
  .step p { color: var(--soft); margin-top: var(--s1); }

  /* the four sections: identical cards, the icon at the left */
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s5); }
  a.card { background: var(--navy-2); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: var(--s4); text-decoration: none; display: grid; grid-template-columns: 72px 1fr; column-gap: var(--s3); align-items: stretch; transition: border-color .15s, background .15s; }
  a.card:hover { background: #27323E; border-color: var(--lime); }
  .ico { width: 72px; height: 72px; border-radius: 20px; background: var(--lime); color: var(--lime-ink); display: flex; align-items: center; justify-content: center; }
  .ico svg { width: 44px; height: 44px; }
  .txt { display: flex; flex-direction: column; min-width: 0; }
  .txt h3 { margin-top: 2px; }
  .txt > p { color: var(--soft); margin-top: var(--s1); min-height: 3em; }
  .ball { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--lime); margin-top: 6px;
    background-image: radial-gradient(circle at -18% 50%, transparent 54%, #fff 55% 62%, transparent 63%), radial-gradient(circle at 118% 50%, transparent 54%, #fff 55% 62%, transparent 63%); }
  ul.balls { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 10px; }
  ul.balls li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.4; }
  .go { margin-top: auto; padding-top: var(--s3); color: var(--lime); font-weight: 500; }

  /* the last word: on the court */
  .cta { padding: 0 0 var(--s7); }
  .cta .panel { position: relative; overflow: hidden; border-radius: 32px; background: var(--court); padding: var(--s6) var(--s5); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; border: 4px solid #fff; outline: 20px solid var(--apron); outline-offset: 0; margin: 20px; }
  .cta .panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; --ln: rgba(255,255,255,.2);
    background-image: linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)), linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4));
    background-repeat: no-repeat; background-size: 100% 4px, 100% 4px, 4px 74%, 4px 74%, 4px 100%; background-position: 0 13%, 0 87%, 23% 50%, 77% 50%, 50% 0; }
  .cta .panel > * { position: relative; z-index: 1; }
  .cta h2 { max-width: 14ch; }
  .cta .store { background-color: var(--navy); box-shadow: 0 0 0 4px rgba(0,0,0,.25); }

  footer { border-top: 1px solid rgba(255,255,255,.14); padding: var(--s4) 0 var(--s5); font-size: 15px; color: var(--soft); }
  footer .cols { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
  footer a { text-decoration: none; } footer a:hover { color: var(--chalk); }
  footer .fine { margin-top: var(--s2); font-size: 13px; }

  /* ---- the phone and the watch: Court Mate's own screens, drawn to match ---- */
  .dev-phone { width: 232px; height: 480px; flex: none; border-radius: 34px; border: 7px solid #05070A; background: #05070A; overflow: hidden; box-shadow: 0 16px 28px -14px rgba(0,0,0,.8); }
  .scr { width: 360px; height: 770px; transform: scale(.6056); transform-origin: 0 0; background: #121614; color: #E4E8E5; position: relative; overflow: hidden; font-size: 14px; line-height: 1.3; }
  .dev-phone.sm { width: 176px; height: 376px; border-radius: 20px; } .dev-phone.sm .scr { transform: scale(.461); }
  .dev-watch { width: 150px; height: 150px; flex: none; border-radius: 50%; border: 6px solid #3A4046; background: #000; overflow: hidden; box-shadow: 0 12px 20px -10px rgba(0,0,0,.8); }
  .face { width: 204px; height: 204px; transform: scale(.676); transform-origin: 0 0; position: relative; color: #fff; font-size: 11px; }
  .mi { font-family: 'Material Icons'; font-style: normal; font-weight: 400; line-height: 1; display: inline-block; }
  .scr .st { position: absolute; top: 10px; left: 22px; right: 20px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; color: #fff; }
  .scr .body { position: absolute; left: 13px; right: 13px; top: 40px; bottom: 76px; overflow: hidden; }
  .scr .hdr { display: flex; align-items: center; height: 54px; gap: 6px; }
  .scr .hdr .t { flex: 1; min-width: 0; }
  .scr .hdr .t b { display: block; font-size: 20px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scr .sub { font-size: 11.5px; color: #A6ADA8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scr .rb { width: 34px; height: 34px; border-radius: 50%; background: #202523; display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
  .scr .rb.plus { background: #1E3B2A; color: #8FD6A8; font-size: 22px; }
  .scr .cardr { background: #2B2C33; border-radius: 16px; padding: 0 14px; height: 54px; display: flex; align-items: center; gap: 12px; margin-top: 8px; }
  .scr .cardr .mi { font-size: 22px; color: #8FD6A8; width: 24px; }
  .scr .cardr b { display: block; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scr .nav { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: #201F25; display: flex; justify-content: space-around; padding-top: 9px; }
  .scr .nav div { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; width: 62px; }
  .scr .nav .mi { font-size: 19px; padding: 3px 15px; border-radius: 13px; color: #D6D9DC; }
  .scr .nav .on .mi { background: #8FD6A8; color: #14301F; }
  .scr .pillb { background: #8FD6A8; color: #16301F; font-weight: 500; border-radius: 24px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
  .scr .chip { flex: 1; height: 38px; border-radius: 19px; border: 1px solid #8B908D; display: flex; align-items: center; justify-content: center; font-size: 13px; white-space: nowrap; }
  .scr .chip.on { background: #8FD6A8; color: #14301F; border-color: transparent; font-weight: 500; }



  @media (max-width: 1040px) {
    .screens { grid-template-columns: repeat(2, 1fr); row-gap: var(--s4); } .screens::before { top: 120px; } .screens figure:nth-child(even) { margin-top: 0; }
  }
  @media (max-width: 760px) {
    .top nav { display: none; } .top .btn { margin-left: auto; }
    section { padding: var(--s6) 0; } .hero { padding: var(--s3) 0 var(--s6); }
    .steps, .cards { grid-template-columns: 1fr; }
    a.card { grid-template-columns: 56px 1fr; padding: var(--s3); column-gap: var(--s2); } .ico { width: 56px; height: 56px; border-radius: 16px; } .ico svg { width: 34px; height: 34px; }
    .screens { padding: 0 var(--s2) var(--s4); } .dev-phone { zoom: .68; }
    .cta .panel { padding: var(--s5) var(--s3); outline-width: 12px; margin: 12px; }
  }

  /* ---- the other pages ---- */
  .view { display: none; } .view.on { display: block; }
  .phero { padding: var(--s6) 0 var(--s6); }
  .phero h1 { max-width: 18ch; } .phero .lede { margin: var(--s2) 0 var(--s4); }
  .feats { padding: var(--s5) 0 var(--s4); }
  .feat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; padding: var(--s6) 0; border-top: 2px solid rgba(255,255,255,.14); }
  .feat:first-child { border-top: 0; padding-top: var(--s4); }
  .feat:nth-child(even) .words { order: 2; }
  .feat .words p { color: var(--soft); font-size: 1.15rem; margin-top: var(--s2); max-width: 40ch; }
  .feat ul.balls { margin-top: var(--s3); font-size: 1.05rem; color: var(--chalk); }
  .feat .devs { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: var(--s3); min-height: 560px; }
  .feat .dev-phone { width: 270px; height: 561px; } .feat .dev-phone .scr { transform: scale(.7111); }
  .feat .dev-phone.second { margin-left: -70px; margin-bottom: -24px; }
  .feat .dev-watch { position: absolute; right: calc(50% - 230px); bottom: 26px; }
  .onwatch { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s3) !important; font-size: .95rem !important; color: var(--lime) !important; }
  .wdot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--lime); display: inline-block; }
  .plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .plan { background: var(--navy-2); border-radius: 24px; padding: var(--s5) var(--s4); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: flex-start; }
  .plan.pro { border: 2px solid var(--lime); }
  .plan .amount { font-size: 3rem; font-weight: 900; line-height: 1; margin: 14px 0 6px; } .plan .amount small { font-size: 1.05rem; font-weight: 400; color: var(--soft); }
  .plan ul.balls { margin-top: var(--s3); } .soft { color: var(--soft); }
  .notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6); } .notes p { color: var(--soft); margin-top: 8px; }
  .formgrid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s6); }
  .form label { display: block; font-size: 15px; color: var(--soft); margin-bottom: var(--s3); }
  .form input, .form textarea { display: block; width: 100%; margin-top: 8px; background: transparent; border: 1px solid #5a6672; border-radius: 12px; padding: 14px; color: #fff; font: inherit; }
  .form input:focus, .form textarea:focus { outline: 2px solid var(--lime); border-color: transparent; }
  .faq details { border-top: 1px solid rgba(255,255,255,.14); padding: 14px 0; } .faq summary { cursor: pointer; font-weight: 500; } .faq details p { color: var(--soft); margin-top: 8px; }
  .narrow { max-width: 760px; } ol.steps2 { color: var(--soft); padding-left: 22px; line-height: 2; }
  .top nav a.here { opacity: 1; border-bottom-color: var(--lime); }
  @media (max-width: 860px) {
    .feat, .plans, .notes, .formgrid { grid-template-columns: 1fr; gap: var(--s4); } .feat:nth-child(even) .words { order: 0; }
    .feat .devs { min-height: 0; } .feat .dev-watch { right: 6%; }
  }
  /* ---- more sections (schools, pros, clubs, tournaments) ---- */
  .top nav { gap: 20px; }
  .also { border-top: 2px solid rgba(255,255,255,.14); padding: var(--s6) 0 var(--s3); }
  .alsogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s3); }
  .alsogrid b { font-size: 1.1rem; } .alsogrid p { color: var(--soft); margin-top: 6px; }
  .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s4); }
  .tile { background: var(--navy-2); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: var(--s4) var(--s3); }
  .tile h3 { font-size: 1.25rem; } .tile p { color: var(--soft); margin-top: 8px; }
  .btn.big { height: 56px; padding: 0 var(--s4); font-size: 18px; }
  /* the last tile on the home page: the court itself (a design element, so it has its lines) */
  .getcard { display: flex; flex-direction: column; gap: 10px; border-radius: 24px; padding: var(--s4); border: 4px solid #fff; outline: 10px solid var(--apron); outline-offset: -1px; margin: 10px;
    --ln: rgba(255,255,255,.2); background-color: var(--court);
    background-image: linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)), linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,.38));
    background-repeat: no-repeat; background-size: 100% 3px, 100% 3px, 3px 74%, 3px 74%, 3px 100%; background-position: 0 13%, 0 87%, 23% 50%, 77% 50%, 50% 0; }
  .getcard p { color: #E6EEF5; } .getcard .store { background-color: var(--navy); box-shadow: 0 0 0 4px rgba(0,0,0,.25); min-width: 150px; }
  @media (max-width: 860px) { .alsogrid, .tiles { grid-template-columns: 1fr; } }
  /* ---- everything scales to fit ---- */
  /* the menu: when it no longer fits beside the logo and the button, it folds into a ☰ button; tapping it drops the links down as a panel */
  .burger { display: none; }
  @media (max-width: 1040px) {
    .top { position: relative; gap: 12px; }
    .top .btn { margin-left: auto; }
    .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer; flex: none; }
    .burger span { display: block; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .18s, opacity .18s; }
    .top.open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .top.open .burger span:nth-child(2) { opacity: 0; } .top.open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
    .top nav { display: none; position: absolute; left: -32px; right: -32px; top: 100%; z-index: 30; flex-direction: column; gap: 0; padding: 4px 32px 14px; background: var(--navy-2); border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 30px rgba(0,0,0,.35); }
    .top.open nav { display: flex; }
    .top nav a { font-size: 18px; padding: 15px 0; opacity: 1; border-bottom: 1px solid rgba(255,255,255,.08); }
    .top nav a:last-child { border-bottom: 0; } .top nav a.here { color: var(--lime); border-bottom-color: rgba(255,255,255,.08); }
  }
  @media (max-width: 760px) { .top nav { left: -20px; right: -20px; padding: 4px 20px 14px; } .top .btn { height: 40px; padding: 0 14px; font-size: 15px; } }
  @media (max-width: 1100px) { .screens { grid-template-columns: repeat(4, 1fr); gap: 12px; padding-left: 12px; padding-right: 12px; } .screens .dev-phone { zoom: .84; } .feat .dev-phone { zoom: .9; } .feat { gap: var(--s4); } }
  @media (max-width: 940px) { .screens .dev-phone { zoom: .7; } .screens figcaption { font-size: .95rem; } .feat .dev-phone { zoom: .8; } .feat .dev-watch { zoom: .85; } }
  @media (max-width: 760px) {
    h1 { font-size: clamp(2rem, 9vw, 2.6rem); } .wrap { padding: 0 20px; }
    /* the four screens: one row you swipe sideways, not a stack */
    .screens { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: var(--s5) -20px 0; padding: 0 20px 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .screens::-webkit-scrollbar { display: none; }
    .screens::before { display: none; }
    .screens figure { flex: 0 0 auto; scroll-snap-align: center; margin-top: 0 !important; } .screens .dev-phone { zoom: .92; }
    .swipe { display: block !important; text-align: center; color: var(--soft); font-size: 14px; margin-top: -8px; }
    .feat .devs { min-height: 0; } .feat .dev-phone { zoom: .84; } .feat .dev-watch { right: 4%; zoom: .8; }
    .feat .devs.two { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -20px; padding: 0 20px 8px; scrollbar-width: none; } .feat .devs.two::-webkit-scrollbar { display: none; }
    .feat .devs.two .dev-phone { flex: 0 0 auto; scroll-snap-align: center; margin: 0 !important; }
    .tiles, .alsogrid { grid-template-columns: 1fr; }
  }
  .swipe { display: none; }

  /* ---- phones: compact, even layouts (his screenshots, Nov 12: "not clean, professional or well laid out") ---- */
  @media (max-width: 760px) {
    section { padding: 44px 0; } .hero { padding: 20px 0 44px; } h2 { font-size: 1.6rem; } .lede { font-size: 1.05rem; }
    /* How it works: ONE card, three short rows */
    .steps { gap: 0; margin-top: 20px; background: var(--navy-2); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; overflow: hidden; }
    .step { background: none; border: 0; border-radius: 0; padding: 16px 18px; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; border-top: 1px solid rgba(255,255,255,.08); }
    .step:first-child { border-top: 0; }
    .num { width: 40px; height: 40px; font-size: 18px; } .num::before, .num::after { width: 40px; height: 40px; border-width: 2px; } .num::before { left: -31px; } .num::after { right: -31px; }
    .step h3 { margin: 0; font-size: 1.1rem; } .step p { margin-top: 2px; font-size: .95rem; line-height: 1.35; }
    /* Who it's for: ONE list, a row for each, the detail is on its page */
    .cards { gap: 0; margin-top: 20px; background: var(--navy-2); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; overflow: hidden; }
    a.card { background: none; border: 0; border-radius: 0; padding: 14px 16px; grid-template-columns: 44px 1fr 14px; column-gap: 14px; align-items: center; border-top: 1px solid rgba(255,255,255,.08); }
    a.card:first-child { border-top: 0; } a.card:hover { background: none; }
    a.card::after { content: "›"; color: var(--soft); font-size: 22px; line-height: 1; }
    .ico { width: 44px; height: 44px; border-radius: 12px; } .ico svg { width: 28px; height: 28px; }
    .txt h3 { margin: 0; font-size: 1.1rem; } .txt > p { min-height: 0; margin-top: 2px; font-size: .95rem; line-height: 1.35; }
    .txt ul.balls, .txt .go { display: none; }
    /* the closing panel: no lines behind the words on a phone; everything centred */
    .cta { padding-bottom: 44px; }
    .cta .panel { flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 36px 20px; border-radius: 22px; border-width: 3px; outline-width: 8px; margin: 8px; }
    .cta .panel::after { display: none; } .cta h2 { max-width: none; font-size: 1.5rem; }
    .cta .stores { flex-direction: column; width: 100%; max-width: 260px; gap: 14px; padding: 4px; } .cta .store { width: 100%; }
    /* the footer: the logo, then the links in two even columns */
    /* the section pages */
    .phero { padding: 28px 0 36px; } .feats { padding: 12px 0 8px; } .feat { padding: 36px 0; gap: 24px; } .feat h2 { font-size: 1.45rem; } .feat .words p { font-size: 1rem; } .feat ul.balls { font-size: .98rem; margin-top: 14px; }
    .plan { padding: 28px 22px; } .plan .amount { font-size: 2.4rem; } .notes { margin-top: 36px; gap: 22px; } .tile { padding: 20px 18px; } .also { padding: 36px 0 8px; }
  }

  /* ---- Who it's for, at every size: a directory. Each section is one row: icon at the left, its name, one line, an arrow.
     Two columns on a wide screen, one list on a phone. (Nov 12: the tall bulleted cards "look terrible on desktop and tablet".) ---- */
  .cards { grid-template-columns: 1fr 1fr; gap: 16px; grid-auto-rows: 1fr; margin-top: var(--s4); }
  a.card { grid-template-columns: 56px 1fr 18px; column-gap: 18px; align-items: center; padding: 20px 22px; border-radius: 20px; transition: border-color .15s, background .15s; }
  a.card::after { content: "›"; color: var(--soft); font-size: 26px; line-height: 1; transition: transform .15s, color .15s; }
  a.card:hover { border-color: var(--lime); background: #26313c; } a.card:hover::after { transform: translateX(4px); color: var(--lime); }
  .ico { width: 56px; height: 56px; border-radius: 16px; } .ico svg { width: 34px; height: 34px; }
  .txt h3 { margin: 0; font-size: 1.3rem; } .txt > p { min-height: 0; margin-top: 4px; font-size: 1rem; line-height: 1.4; }
  /* ---- steps ("How it starts" on the Clubs and Tournaments pages): one card, three parts side by side; stacked on narrow screens ---- */
  .steps { grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--navy-2); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; overflow: hidden; }
  .step { background: none; border: 0; border-radius: 0; padding: 24px; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; border-left: 1px solid rgba(255,255,255,.08); }
  .step:first-child { border-left: 0; }
  .num { width: 44px; height: 44px; font-size: 20px; } .num::before, .num::after { width: 44px; height: 44px; border-width: 2px; } .num::before { left: -34px; } .num::after { right: -34px; }
  .step h3 { margin: 0; font-size: 1.15rem; } .step p { margin-top: 4px; font-size: 1rem; line-height: 1.4; }
  @media (max-width: 900px) {
    .steps { grid-template-columns: 1fr; } .step { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); align-items: center; padding: 18px 20px; } .step:first-child { border-top: 0; }
  }
  @media (max-width: 760px) {
    .cards { grid-template-columns: 1fr; gap: 0; grid-auto-rows: auto; margin-top: 20px; }
    a.card { grid-template-columns: 44px 1fr 14px; column-gap: 14px; padding: 14px 16px; border-radius: 0; } a.card::after { font-size: 22px; } a.card:hover { background: none; border-color: transparent; }
    .ico { width: 44px; height: 44px; border-radius: 12px; } .ico svg { width: 28px; height: 28px; }
    .txt h3 { font-size: 1.1rem; } .txt > p { margin-top: 2px; font-size: .95rem; line-height: 1.35; }
    .num { width: 40px; height: 40px; font-size: 18px; } .num::before, .num::after { width: 40px; height: 40px; } .num::before { left: -31px; } .num::after { right: -31px; }
  }

  /* ---- the footer (Nov 12): ONE line. The logo, then the small print beside it, and the three links that are not in the menu at the
     right. On a phone, where one line can't fit, the same three things are centred and stacked. ---- */
  footer { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; margin-top: 0; }
  .foot { display: flex; align-items: center; gap: 16px; }
  .fbrand { display: inline-flex; flex: none; } .fbrand img { width: 40px; height: 40px; border-radius: 10px; display: block; }
  footer .fine { margin: 0; padding: 0; border: 0; color: #8b96a1; font-size: .9rem; }
  .flinks { display: flex; gap: 28px; margin-left: auto; } .flinks a { color: var(--soft); text-decoration: none; font-size: .95rem; white-space: nowrap; } .flinks a:hover { color: #fff; }
  @media (max-width: 760px) {
    footer { padding: 24px 0; margin-top: 0; } .foot { flex-direction: column; gap: 14px; text-align: center; } .flinks { margin-left: 0; gap: 22px; flex-wrap: wrap; justify-content: center; }
  }
  /* ---- RALLY, the game at the bottom of the home page: a big court you play on ---- */
  .rally { padding: 60px 0 36px; text-align: center; } .rally .lede { margin: 8px auto 0; max-width: none; }                 /* (Nov 12) tighter above and below; the title centred */
  #rally { position: relative; margin-top: 24px; text-align: left; border-radius: 26px; overflow: hidden; border: 4px solid #fff; outline: 10px solid var(--apron); outline-offset: -1px; background: #16202A; }
  #rally canvas { display: block; width: 100%; height: 500px; touch-action: none; cursor: pointer; }
  #rally .r-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 22px; padding: 14px 20px; font-size: 16px; color: var(--soft); pointer-events: none; }
  #rally .r-hud b { color: #fff; font-size: 22px; font-weight: 900; margin-left: 4px; } #rally .r-hud .r-snd { margin-left: auto; pointer-events: auto; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 6px 11px; font-size: 14px; line-height: 1; cursor: pointer; } #rally .r-hud .r-board { margin-left: 0; pointer-events: auto; }
  #rally button { font: inherit; cursor: pointer; }
  #rally .r-board { background: rgba(0,0,0,.35); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 7px 14px; font-size: 14px; }
  #rally .r-over { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 3; width: min(420px, calc(100% - 40px)); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: rgba(20,26,32,.92); border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 22px 22px 20px; }
  #rally .r-over[hidden] { display: none; } #rally .r-over b { font-size: 1.5rem; font-weight: 900; } #rally .r-over span { color: var(--soft); font-size: .98rem; }
  #rally .r-go { margin-top: 6px; height: 48px; padding: 0 26px; border-radius: 12px; font-weight: 700; font-size: 16px; color: #fff; background: var(--court); border: 3px solid #fff; box-shadow: 0 0 0 4px var(--apron); }
  #rally .r-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; color: var(--lime); font-size: .95rem; }
  #rally .r-name { width: 70px; height: 36px; text-align: center; letter-spacing: 4px; font: inherit; font-weight: 700; text-transform: uppercase; background: transparent; color: #fff; border: 1px solid #5a6672; border-radius: 8px; }
  #rally .r-ok { height: 36px; padding: 0 14px; border-radius: 8px; background: var(--lime); color: #1a2400; border: 0; font-weight: 700; }
  #rally .r-top { position: absolute; right: 16px; top: 58px; z-index: 4; width: 220px; background: rgba(20,26,32,.96); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 14px 16px; font-size: 15px; }
  #rally .r-top ol { margin: 8px 0 0; padding-left: 24px; } #rally .r-top li { padding: 2px 0; } #rally .r-top li span { display: inline-block; width: 62%; letter-spacing: 3px; font-weight: 700; } #rally .r-top li span + span { width: 36%; text-align: right; letter-spacing: 0; color: var(--lime); } #rally .r-top p { color: var(--soft); margin-top: 6px; }
  .r-how .r-finger { display: none; } @media (pointer: coarse) { .r-how .r-mouse { display: none; } .r-how .r-finger { display: inline; } }
  /* a phone on its side: the court fills the screen's height */
  @media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) { #rally canvas { height: calc(100vh - 14px) !important; } }   /* (!important: the width rules further down would otherwise win) */
  #rally:fullscreen { border-radius: 0; outline: 0; border: 0; } #rally:fullscreen canvas { height: 100vh; }
  /* the match: a small scoreboard at the top left, the last shot at the top right, the game picker and the stats */
  #rally.is-match .r-hud > span, #rally.is-match .r-board { display: none; }
  #rally .r-sb { background: rgba(8,12,11,.82); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 3px 10px; font-size: 13px; color: #E4E8E5; min-width: 168px; }
  #rally .r-sb div { display: flex; align-items: center; height: 22px; } #rally .r-sb div + div { border-top: 1px solid rgba(255,255,255,.1); }
  #rally .r-sb i { width: 12px; color: #C8E21A; font-size: 9px; font-style: normal; } #rally .r-sb span { flex: 1; white-space: nowrap; } #rally .r-sb small { color: #A6ADA8; font-size: 11px; }
  #rally .r-hud .r-sb b { width: 22px; text-align: center; font-size: 14px; font-weight: 800; margin: 0; color: #fff; } #rally .r-sb em { width: 26px; text-align: center; font-style: normal; font-weight: 700; color: #C8E21A; }
  #rally .r-shot { background: rgba(8,12,11,.6); border-radius: 10px; padding: 4px 10px; font-size: 12px; text-align: right; line-height: 1.3; color: #A6ADA8; white-space: nowrap; }
  #rally .r-hud .r-shot b { display: block; color: #C8E21A; font-size: 12.5px; font-weight: 700; margin: 0; } #rally .r-shot span { display: block; }
  #rally .r-over { max-height: calc(100% - 16px); overflow-y: auto; top: 50%; }
  #rally .r-modes, #rally .r-lvs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
  #rally .r-mode, #rally .r-lv { background: transparent; color: #E4E8E5; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }
  #rally .r-lv { padding: 8px 0; width: 44px; } #rally .r-mode.on, #rally .r-lv.on { background: #8FD6A8; border-color: #8FD6A8; color: #16301f; }
  #rally .r-lvsay b { color: #fff; } #rally .r-menu { background: transparent; border: 0; color: #8FD6A8; font-size: 14px; cursor: pointer; padding: 4px; }
  #rally .r-stats { border-collapse: collapse; font-size: 13px; margin: 2px auto; color: #E4E8E5; } #rally .r-stats td { width: 96px; padding: 2px 6px; font-weight: 700; } #rally .r-stats td:first-child { text-align: right; } #rally .r-stats td:last-child { text-align: left; }
  #rally .r-stats th { font-weight: 400; color: #A6ADA8; padding: 2px 10px; white-space: nowrap; } #rally .r-stats tr + tr { border-top: 1px solid rgba(255,255,255,.08); }
  @media (orientation: landscape) and (max-height: 560px) { #rally .r-over { gap: 6px; padding: 12px 16px; } #rally .r-over b { font-size: 1.2rem; } #rally .r-stats { font-size: 12px; } #rally .r-stats td, #rally .r-stats th { padding-top: 0; padding-bottom: 0; } }
  @media (max-width: 760px) { #rally .r-sb { min-width: 140px; font-size: 12px; } #rally .r-shot { font-size: 11px; } #rally .r-lv { width: 38px; font-size: 13px; } }
  /* (817) drawn a quarter turn round on an upright phone, filling the screen; and the app's page, where the game is all there is */
  html.r-lock, html.r-lock body { overflow: hidden; overscroll-behavior: none; }
  #rally .r-x { display: none; pointer-events: auto; background: rgba(0,0,0,.35); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; width: 30px; height: 30px; font-size: 14px; line-height: 1; cursor: pointer; align-items: center; justify-content: center; padding: 0; }
  #rally.r-rot .r-x, #rally.r-app .r-x { display: inline-flex; }
  #rally.r-app { position: fixed; inset: 0; z-index: 99999; margin: 0; border: 0; border-radius: 0; outline: 0; } #rally.r-app canvas { height: 100vh !important; height: var(--sh, 100vh) !important; }   /* --sw / --sh: the screen measured by the page itself (818) */
  #rally.r-rot { position: fixed; z-index: 99999; top: 0; left: 100vw; left: var(--sw, 100vw); right: auto; bottom: auto; width: 100vh; width: var(--sh, 100vh); height: 100vw; height: var(--sw, 100vw); transform-origin: 0 0; transform: rotate(90deg); margin: 0; border: 0; border-radius: 0; outline: 0; }
  #rally.r-rot canvas { height: 100vw !important; height: var(--sw, 100vw) !important; }
  #rally .r-me { color: #8FD6A8; font-size: .9rem; }
  #rally .r-fail { color: #FF8A80; font-size: .9rem; } #rally .r-top .r-why { font-size: 12px; color: #8b96a1; word-break: break-word; }
  .r-how { text-align: center; color: var(--soft); font-size: .95rem; margin-top: 14px; }
  .hero:has(+ .rally) { padding-bottom: 28px; }                                                            /* the screens sit closer to the game */
  @media (max-width: 900px) { #rally canvas { height: 460px; } }
  @media (max-width: 760px) { #rally { border-radius: 20px; border-width: 3px; outline-width: 7px; } #rally canvas { height: 420px; } #rally .r-hud { padding: 12px 14px; gap: 16px; font-size: 14px; } #rally .r-hud b { font-size: 19px; } #rally .r-top { right: 10px; top: 52px; width: 200px; } .r-how { font-size: .88rem; } }

  /* forms that send (Support, Talk to us) */
  button.btn { border-style: solid; cursor: pointer; font-family: inherit; }
  .formmsg { min-height: 1.4em; margin-top: 12px; font-size: 15px; } .formmsg.ok { color: var(--mint); } .formmsg.bad { color: #FF8A80; }
  .legal h2 { font-size: 1.35rem; font-weight: 700; margin-top: 32px; } .legal p { color: var(--soft); margin-top: 8px; max-width: 74ch; } .legal a { color: var(--lime); }
  .legal ul { color: var(--soft); max-width: 74ch; margin: 8px 0; padding-left: 22px; } .legal li { margin-top: 6px; } .legal b { color: var(--chalk); font-weight: 500; }
  .legal p:empty { display: none; }