:root {
    --navy: #0A1628;
    --navy-2: #101E36;
    --navy-3: #16253E;
    --gold: #C9A84C;
    --gold-bright: #E0C165;
    --green: #4CAF82;
    --cream: #F5F1E6;
    --w90: rgba(245,241,230,0.9);
    --w70: rgba(245,241,230,0.68);
    --w50: rgba(245,241,230,0.48);
    --w30: rgba(245,241,230,0.28);
    --w15: rgba(245,241,230,0.14);
    --border: rgba(201,168,76,0.22);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }
  body {
    margin: 0;
    background: var(--navy);
    color: var(--cream);
    font-family: 'DM Sans', sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, .display { font-family: 'Cormorant Garamond', serif; font-weight: 500; letter-spacing: 0.01em; margin: 0; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
  section { padding: 96px 0; }
  @media (max-width: 720px) { section { padding: 64px 0; } }
  .eyebrow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 14px; }
  .lede { font-size: 18px; color: var(--w70); max-width: 640px; }

  /* ── Nav ─────────────────────────────────────────────────────────── */
  nav { position: sticky; top: 0; z-index: 50; background: rgba(10,22,40,0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--w15); }
  nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; position: relative; }
  .logo { font-family: 'Cormorant Garamond', serif; font-size: 24px; letter-spacing: 0.02em; }
  .logo b { color: #fff; font-weight: 500; }
  .logo span { color: var(--gold); font-weight: 500; }
  .nav-links { display: flex; align-items: center; gap: 32px; font-size: 14px; color: var(--w70); }
  .nav-links a:hover { color: var(--gold-bright); }
  .nav-cta { background: var(--gold); color: var(--navy); padding: 10px 20px; border-radius: 8px; font-weight: 700; font-size: 13px; letter-spacing: 0.3px; text-decoration: none; }
  .nav-toggle { display: none; background: none; border: none; color: var(--cream); font-size: 24px; cursor: pointer; line-height: 1; padding: 4px; }
  @media (max-width: 780px) {
    .nav-toggle { display: block; }
    .nav-links { display: none; position: absolute; top: 74px; left: 0; right: 0; background: var(--navy-2); border-bottom: 1px solid var(--w15); flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 28px 22px; box-shadow: 0 20px 40px rgba(0,0,0,0.35); }
    .nav-links.open { display: flex; }
    .nav-links a { display: block !important; padding: 10px 0; width: 100%; }
    .nav-links a.nav-cta { width: auto; margin-top: 8px; padding: 12px 20px; }
  }

  /* ── Hero ────────────────────────────────────────────────────────── */
  .hero { padding: 88px 0 80px; }
  .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
  @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }
  .hero h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; color: #fff; }
  .hero h1 em { font-style: normal; color: var(--gold); }
  .hero-sub { margin-top: 22px; font-size: 18px; color: var(--w70); max-width: 480px; }
  .hero-ctas { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
  .btn-primary { background: var(--gold); color: var(--navy); padding: 15px 26px; border-radius: 10px; font-weight: 700; font-size: 14px; text-decoration: none; letter-spacing: 0.3px; }
  .btn-ghost { background: transparent; color: var(--cream); padding: 15px 26px; border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid var(--w30); }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }

  /* Signature: a real Coach chat exchange */
  .chat-mock { max-width: 380px; margin: 0 auto; background: var(--navy-2); border: 1px solid var(--border); border-radius: 18px; padding: 4px; box-shadow: 0 30px 70px rgba(0,0,0,0.45); }
  .chat-mock-head { background: var(--navy-3); display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px; border-bottom: 1px solid var(--w15); }
  .chat-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--navy); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 16px; flex-shrink: 0; }
  .chat-mock-name { font-family: 'Cormorant Garamond', serif; font-size: 17px; color: var(--gold); }
  .chat-mock-status { font-size: 10px; color: var(--w50); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
  .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
  .chat-body { padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 14px; }
  .msg { font-size: 14px; line-height: 1.55; padding: 12px 15px; border-radius: 14px; max-width: 92%; opacity: 0; animation: rise 0.5s ease forwards; }
  .msg.coach { background: var(--navy-3); border: 1px solid var(--w15); border-bottom-left-radius: 4px; align-self: flex-start; }
  .msg.player { background: rgba(201,168,76,0.14); border: 1px solid var(--border); border-bottom-right-radius: 4px; align-self: flex-end; color: var(--w90); }
  .msg:nth-child(1) { animation-delay: 0.15s; }
  .msg:nth-child(2) { animation-delay: 0.55s; }
  .msg:nth-child(3) { animation-delay: 1.0s; }
  .msg:nth-child(4) { animation-delay: 1.5s; }
  .msg:nth-child(5) { animation-delay: 2.1s; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

  /* ── Squad mockup (roster + player detail) ─────────────────────── */
  .squad-section .wrap { text-align: center; }
  .squad-section h2 { font-size: clamp(26px, 3.4vw, 34px); color: #fff; max-width: 720px; margin: 0 auto; }
  .squad-section .lede { margin: 16px auto 0; }
  .squad-mocks { margin-top: 48px; display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; align-items: flex-start; }
  .squad-card { width: 320px; max-width: 100%; background: var(--navy-2); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,0.45); overflow: hidden; text-align: left; }
  .squad-card-head { padding: 16px 18px; border-bottom: 1px solid var(--w15); display: flex; align-items: center; justify-content: space-between; }
  .squad-brand { font-family: 'Cormorant Garamond', serif; }
  .squad-brand b { color: #fff; font-weight: 500; font-size: 20px; }
  .squad-brand span { color: var(--gold); font-weight: 500; font-size: 20px; }
  .squad-brand small { display: block; font-size: 9px; letter-spacing: 1.3px; color: var(--w50); text-transform: uppercase; margin-top: 2px; font-family: 'DM Sans', sans-serif; }
  .squad-pill { background: var(--gold); color: var(--navy); font-size: 11px; font-weight: 700; padding: 7px 13px; border-radius: 7px; }
  .squad-back { color: var(--w50); font-size: 12px; text-decoration: underline; }
  .squad-body { padding: 16px 18px 20px; }
  .squad-title-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
  .squad-title { font-family: 'Cormorant Garamond', serif; font-size: 21px; color: #fff; }
  .squad-count { font-size: 11.5px; color: var(--w50); margin-bottom: 14px; }
  .squad-search { background: var(--navy-3); border: 1px solid var(--w15); border-radius: 9px; padding: 9px 12px; font-size: 12px; color: var(--w50); margin-bottom: 14px; }
  .squad-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--w15); }
  .squad-row:first-of-type { border-top: none; }
  .squad-status { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .squad-status.on { background: var(--green); }
  .squad-status.mid { background: var(--gold); }
  .squad-status.off { background: var(--w30); }
  .squad-row-info { flex: 1; min-width: 0; }
  .squad-row-name { font-size: 13.5px; color: var(--cream); font-weight: 600; }
  .squad-row-meta { font-size: 10.5px; color: var(--w50); margin-top: 1px; }
  .squad-row-score { text-align: right; font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 600; }
  .squad-row-score small { display: block; font-family: 'DM Sans', sans-serif; font-size: 9px; color: var(--w50); font-weight: 400; margin-top: 1px; }
  .sc-green { color: var(--green); }
  .sc-gold { color: var(--gold-bright); }
  .sc-red { color: #E07B6B; }
  .sc-muted { color: var(--w30); }
  .squad-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--w15); margin: 12px 0 16px; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; }
  .squad-tabs span { padding-bottom: 9px; color: var(--w30); }
  .squad-tabs span.active { color: var(--gold); border-bottom: 2px solid var(--gold); }
  /* Assistant Report card on the coaches page — scrolls inside the card */
  .sq-report-scroll { max-height: 470px; overflow-y: auto; margin-top: 12px; padding-right: 8px; }
  .sq-report-scroll p { font-size: 13.5px; line-height: 1.65; color: var(--w70); margin: 0 0 12px; }
  @media (max-width: 360px) { .squad-tabs { gap: 12px; font-size: 10px; letter-spacing: 0.2px; } }
  .player-stats { display: flex; gap: 8px; margin: 14px 0; }
  .player-stat { flex: 1; background: var(--navy-3); border-radius: 9px; padding: 9px 6px; text-align: center; }
  .player-stat b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 17px; color: #fff; }
  .player-stat small { font-size: 8.5px; color: var(--w50); text-transform: uppercase; letter-spacing: 0.5px; }
  .player-goal { background: rgba(201,168,76,0.08); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; margin-bottom: 16px; }
  .player-goal small { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); font-weight: 700; }
  .player-goal p { margin: 5px 0 0; font-size: 12.5px; color: var(--w90); font-style: italic; }
  .sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 12px; margin-bottom: 14px; }
  .sf-head { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
  .sf-head.s { color: var(--green); } .sf-head.f { color: var(--gold-bright); }
  .sf-grid div.row { display: flex; justify-content: space-between; color: var(--w70); padding: 2px 0; }
  .mini-round { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--w15); font-size: 12px; }
  .mini-round-name { color: var(--cream); font-weight: 600; }
  .mini-round-date { color: var(--w50); font-size: 10px; display: block; }
  .squad-caption { text-align: center; font-size: 12px; color: var(--w50); margin-top: 10px; }
  .problem { background: var(--navy-2); border-top: 1px solid var(--w15); border-bottom: 1px solid var(--w15); }
  .problem .wrap { max-width: 760px; text-align: center; }
  .problem h2 { font-size: clamp(26px, 3.4vw, 36px); color: #fff; }
  .problem p { margin-top: 20px; font-size: 17px; color: var(--w70); }

  /* ── Two-track: coach / player ──────────────────────────────────── */
  .tracks .wrap { text-align: center; margin-bottom: 56px; }
  .tracks h2 { font-size: clamp(28px, 3.6vw, 38px); color: #fff; }
  .track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 1000px) { .track-grid { grid-template-columns: 1fr 1fr; } }
  /* 21 Sept 2026 — named column counts. The pages used to set
     grid-template-columns inline, which beats this file's phone rule, so the
     two cards on the homepage and players page never stacked on a phone.
     Column counts live here now; never put grid-template-columns in a style=. */
  .track-grid.two-col { grid-template-columns: 1fr 1fr; }
  .track-grid.one-col { grid-template-columns: 1fr; }
  @media (max-width: 640px) { .track-grid, .track-grid.two-col { grid-template-columns: 1fr; } }
  .track-card { background: var(--navy-2); border: 1px solid var(--w15); border-radius: 16px; padding: 30px 26px; }
  .track-card.highlight { border-color: var(--border); }
  .track-card .tag { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 700; }
  .track-card h3 { font-size: 22px; color: #fff; margin-top: 10px; line-height: 1.2; }
  .track-card ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .track-card li { display: flex; gap: 12px; font-size: 14px; color: var(--w70); line-height: 1.5; }
  .track-card li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); margin-top: 8px; flex-shrink: 0; }
  .track-note { margin-top: 40px; text-align: center; font-size: 15px; color: var(--w70); border-top: 1px solid var(--w15); padding-top: 32px; }
  .track-note strong { color: var(--gold-bright); font-weight: 600; }

  /* ── Proof ───────────────────────────────────────────────────────── */
  .proof { background: var(--navy-2); border-top: 1px solid var(--w15); border-bottom: 1px solid var(--w15); }
  .proof .wrap { max-width: 720px; }
  .proof blockquote { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 2.8vw, 30px); font-style: italic; color: #fff; line-height: 1.45; }
  .proof cite { display: block; margin-top: 22px; font-style: normal; font-size: 13px; color: var(--w50); letter-spacing: 0.3px; }

  /* ── Commission ──────────────────────────────────────────────────── */
  .commission .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  @media (max-width: 820px) { .commission .wrap { grid-template-columns: 1fr; } }
  .commission h2 { font-size: clamp(26px, 3.4vw, 34px); color: #fff; }
  .commission p { margin-top: 18px; color: var(--w70); font-size: 16px; }
  .commission-card { background: var(--navy-2); border: 1px solid var(--border); border-radius: 16px; padding: 30px; }
  .commission-row { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--w15); }
  .commission-row:last-child { border-bottom: none; }
  .commission-row .k { font-size: 14px; color: var(--w70); }
  .commission-row .v { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--gold-bright); }

  /* ── Coach application ───────────────────────────────────────────── */
  .apply { background: var(--navy-2); border-top: 1px solid var(--w15); }
  .apply .wrap { max-width: 620px; }
  .apply h2 { font-size: clamp(26px, 3.4vw, 34px); color: #fff; text-align: center; }
  .apply .lede { margin: 14px auto 0; text-align: center; max-width: 480px; }
  form { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
  label { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--w50); margin-bottom: 7px; display: block; }
  input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid var(--w30); border-radius: 10px; padding: 13px 14px; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 14px; }
  input:focus { border-color: var(--gold); outline: none; }
  input::placeholder { color: var(--w30); }
  .apply-note { font-size: 12.5px; color: var(--w50); margin-top: -2px; }
  .btn-submit { margin-top: 6px; background: var(--gold); color: var(--navy); border: none; border-radius: 10px; padding: 15px; font-weight: 700; font-size: 14px; letter-spacing: 0.3px; cursor: pointer; font-family: 'DM Sans', sans-serif; }
  .btn-submit:hover { background: var(--gold-bright); }
  .form-success { display: none; text-align: center; padding: 30px 0; }
  .form-success h3 { font-size: 24px; color: var(--gold-bright); }
  .form-success p { color: var(--w70); margin-top: 10px; font-size: 14.5px; }

  /* ── Players: two paths in ──────────────────────────────────────── */
  .players .wrap { max-width: 900px; text-align: center; }
  .players h2 { font-size: clamp(26px, 3.4vw, 34px); color: #fff; }
  .path-grid { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }
  @media (max-width: 700px) { .path-grid { grid-template-columns: 1fr; } }
  .path-card { background: var(--navy-2); border: 1px solid var(--w15); border-radius: 16px; padding: 30px 28px; display: flex; flex-direction: column; }
  .path-card .tag { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 700; }
  .path-card h3 { font-size: 21px; color: #fff; margin-top: 10px; }
  .path-card p { margin-top: 10px; font-size: 14px; color: var(--w70); flex-grow: 1; }
  .invite-box { margin-top: 20px; display: flex; gap: 10px; }
  @media (max-width: 500px) { .invite-box { flex-direction: column; } }
  .invite-box input { flex: 1; text-align: center; letter-spacing: 1px; }
  .invite-box button, .path-card .btn-submit-like { background: var(--gold); color: var(--navy); border: none; border-radius: 10px; padding: 0 26px; height: 48px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: 'DM Sans', sans-serif; white-space: nowrap; }
  .path-card .btn-submit-like { margin-top: 20px; width: 100%; }
  .players-note { margin-top: 32px; font-size: 13.5px; color: var(--w50); }

  footer { border-top: 1px solid var(--w15); padding: 48px 0; }
  footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
  .foot-about { max-width: 480px; font-size: 13px; color: var(--w50); line-height: 1.6; }
  /* flex-wrap added 21 Sept: with six links the row outgrew a phone and pushed every page sideways */
  .foot-links { display: flex; flex-wrap: wrap; gap: 12px 22px; font-size: 13px; color: var(--w50); }
  .foot-links a:hover { color: var(--gold-bright); }

  /* ── Multi-page additions ───────────────────────────────────────── */
  .nav-links a.active { color: var(--gold-bright); }

  /* Sub-page hero (Coaches / Players) — simpler than the home hero */
  .page-hero { padding: 64px 0 20px; text-align: center; }
  .page-hero .eyebrow { text-align: center; }
  .page-hero h1 { font-size: clamp(32px, 4.4vw, 48px); color: #fff; line-height: 1.1; }
  .page-hero p { margin: 18px auto 0; font-size: 17px; color: var(--w70); max-width: 620px; }

  /* Real screenshot proof blocks */
  .proof-shots { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; align-items: flex-start; margin-top: 44px; }
  .shot-card { width: 280px; text-align: center; }
  .shot-card img { width: 100%; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0,0,0,0.4); display: block; }
  .shot-card p { margin-top: 14px; font-size: 13.5px; color: var(--w70); line-height: 1.5; }
  .shot-card p strong { color: var(--gold-bright); }
  .shot-flow-arrow { align-self: center; font-size: 22px; color: var(--w30); margin-top: 100px; }
  @media (max-width: 900px) { .shot-flow-arrow { display: none; } }

  /* Home page: condensed teaser cards linking out to full pages */
  .teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
  @media (max-width: 700px) { .teaser-grid { grid-template-columns: 1fr; } }
  .teaser-card { background: var(--navy-2); border: 1px solid var(--w15); border-radius: 16px; padding: 32px 28px; }
  .teaser-card .tag { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 700; }
  .teaser-card h3 { font-size: 24px; color: #fff; margin-top: 10px; }
  .teaser-card p { margin-top: 12px; font-size: 14.5px; color: var(--w70); }
  .teaser-card .teaser-link { display: inline-block; margin-top: 20px; font-size: 13.5px; font-weight: 700; color: var(--gold-bright); text-decoration: none; }
  .teaser-card .teaser-link:hover { text-decoration: underline; }

  /* ── FAQ ─────────────────────────────────────────────────────────── */
  .faq-list { max-width: 760px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 14px; }
  .faq-item { background: var(--navy-2); border: 1px solid var(--w15); border-radius: 14px; padding: 4px 24px; }
  .faq-item summary { cursor: pointer; list-style: none; padding: 20px 0; font-size: 16px; font-weight: 600; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: '+'; font-size: 20px; color: var(--gold); flex-shrink: 0; font-weight: 400; }
  .faq-item[open] summary::after { content: '−'; }
  .faq-item p { margin: 0 0 20px; font-size: 14.5px; color: var(--w70); line-height: 1.6; }

  /* ── Teams page: teaser link on Coaches page ────────────────────── */
  .team-teaser { background: var(--navy-2); border: 1px solid var(--border); border-radius: 16px; padding: 30px 28px; max-width: 640px; margin: 0 auto; text-align: center; }
  .team-teaser h3 { font-size: 22px; color: #fff; }
  .team-teaser p { margin-top: 10px; font-size: 14.5px; color: var(--w70); }
  .team-teaser a { display: inline-block; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--gold-bright); text-decoration: none; }
  .team-teaser a:hover { text-decoration: underline; }

  /* ── Hero: real screenshot version ──────────────────────────────── */
  .hero-shot { background: var(--navy-2); border: 1px solid var(--border); border-radius: 18px; padding: 4px; box-shadow: 0 30px 70px rgba(0,0,0,0.45); overflow: hidden; max-width: 380px; margin: 0 auto; }
  .hero-shot img { width: 100%; display: block; border-radius: 14px; }
  .hero-shot-caption { text-align: center; font-size: 12.5px; color: var(--w50); margin-top: 14px; }

  /* ── Hero mockup: app top chrome (brand bar + nav tabs) ─────────── */
  .app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; border-bottom: 1px solid var(--w15); }
  .app-signout { background: var(--gold); color: var(--navy); font-size: 11px; font-weight: 700; padding: 8px 16px; border-radius: 7px; white-space: nowrap; }
  .app-tabs { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 0; border-bottom: 1px solid var(--w15); }
  .app-tabs span { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--w50); padding: 6px 4px 9px; }
  .app-tabs span.active { color: var(--gold); border-bottom: 2px solid var(--gold); font-weight: 700; }
  .chat-mock-head .start-fresh { font-size: 11px; color: var(--w50); text-decoration: underline; white-space: nowrap; }


  /* ── Hero film ─────────────────────────────────────────────────── */
  .hero-film { position: relative; max-width: 620px; margin: 0 auto; }
  .hero-film video { display: block; width: 100%; height: auto; border-radius: 16px;
    border: 1px solid var(--border); background: var(--navy);
    box-shadow: 0 30px 70px rgba(0,0,0,0.45); }
  .film-replay { position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%);
    background: rgba(10,22,40,0.72); border: 1px solid var(--border); color: var(--gold-bright);
    font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.6px;
    padding: 9px 20px; border-radius: 999px; cursor: pointer; }
  .film-replay:hover { background: rgba(10,22,40,0.9); }
  @media (max-width: 900px) { .hero-film { max-width: 100%; } }

  /* ── Founder quote (replaces the old Problem section) ──────────── */
  .problem blockquote { margin: 26px auto 0; font-family: 'Cormorant Garamond', serif; font-size: clamp(21px, 2.6vw, 28px); font-style: italic; color: #fff; line-height: 1.5; max-width: 640px; }
  .problem cite { display: block; margin-top: 20px; font-style: normal; font-size: 13px; color: var(--w50); letter-spacing: 0.3px; }

  /* ── Demo-card: reusable branded mockup frame for proof sequences ─ */
  .chat-mock.demo { max-width: 320px; margin: 0 auto; }
  .plan-block { padding: 16px 18px 18px; }
  .plan-title { font-family: 'Cormorant Garamond', serif; font-size: 21px; color: #fff; }
  .plan-meta { font-size: 11px; color: var(--w50); margin-top: 3px; }
  .rounds-block { padding: 4px 18px 16px; }
  .rounds-log-btn { display: block; text-align: center; margin: 10px 0 4px; }
  .round-card2 { border-top: 1px solid var(--w15); padding: 12px 0; }
  .round-card2:first-of-type { border-top: none; }
  .round-card2-top { display: flex; justify-content: space-between; align-items: baseline; }
  .round-card2-name { color: #fff; font-weight: 600; font-size: 14px; }
  .round-card2-score { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600; }
  .round-card2-meta { font-size: 10.5px; color: var(--w50); margin: 2px 0 8px; }
  .tag-pill { display: inline-block; background: rgba(245,241,230,0.08); color: var(--w70); font-size: 9.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; margin: 2px 4px 2px 0; }
  .tag-pill.hi { background: rgba(76,175,130,0.15); color: var(--green); }
  .tag-pill.lo { background: rgba(224,123,107,0.15); color: #E07B6B; }

  .plan-hint { font-size: 10.5px; color: var(--w50); margin-top: 6px; }

  /* Fix: demo cards inherit text-align:center from .squad-section .wrap — force left */
  .chat-mock, .plan-block, .rounds-block { text-align: left; }

  /* ── Practice plan showcase: drills, coach quote, actions ────────── */
  .showcase-card { max-width: 420px; margin: 0 auto; }
  .plan-eyebrow { font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--w50); margin-bottom: 6px; }
  .drill-item { display: flex; justify-content: space-between; align-items: center; background: var(--navy-3); border-left: 3px solid var(--gold); border-radius: 8px; padding: 12px 14px; margin-top: 10px; }
  .drill-item.warm { border-left-color: var(--green); }
  .drill-item.long { border-left-color: var(--gold); }
  .drill-item.short { border-left-color: #E07B6B; }
  .drill-cat { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 3px; }
  .drill-cat.warm { color: var(--green); }
  .drill-cat.long { color: var(--gold-bright); }
  .drill-cat.short { color: #E07B6B; }
  .drill-name { font-size: 14px; color: #fff; font-weight: 600; }
  .drill-time { font-size: 12px; color: var(--w50); white-space: nowrap; }
  .coach-quote { background: rgba(201,168,76,0.08); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-top: 18px; }
  .coach-quote small { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); font-weight: 700; }
  .coach-quote p { margin: 6px 0 0; font-style: italic; color: var(--w90); font-size: 13px; line-height: 1.5; }
  .plan-adjust-note { font-size: 11.5px; color: var(--w50); margin-top: 12px; }
  .plan-actions { display: flex; gap: 10px; margin-top: 16px; }
  .plan-btn { flex: 1; text-align: center; padding: 12px; border-radius: 9px; font-size: 13px; font-weight: 700; }
  .plan-btn.primary { background: var(--gold); color: var(--navy); }
  .plan-btn.secondary { background: transparent; border: 1px solid var(--w30); color: var(--cream); }

  /* ── Roster card: outline pill + full-width CTA ─────────────────── */
  .squad-pill-outline { background: var(--navy-3); border: 1px solid var(--w15); color: var(--w70); font-size: 11px; font-weight: 700; padding: 7px 13px; border-radius: 7px; white-space: nowrap; }
  .squad-cta-full { display: block; text-align: center; background: var(--gold); color: var(--navy); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; padding: 12px; border-radius: 9px; margin: 14px 0; }

  /* ── Player-detail: more authentic card proportions ─────────────── */
  .info-card { background: var(--navy-3); border: 1px solid var(--w15); border-radius: 14px; padding: 18px; margin-top: 16px; }
  .info-label-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); font-weight: 700; }
  .info-label-row .muted { color: var(--w50); font-weight: 400; letter-spacing: 0; text-transform: none; }
  .sf-head { font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 600; margin-bottom: 10px; }
  .sf-grid { gap: 8px 16px; font-size: 14px; }
  .sf-grid div.row { padding: 5px 0; }
  .player-stat b { font-size: 21px; }
  .player-goal p { font-size: 14px; }

  /* ── FAQ groups ──────────────────────────────────────────────────── */
  .faq-group-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: #fff; text-align: center; margin: 56px 0 0; }
  .faq-group-title:first-of-type { margin-top: 0; }
  .faq-jump { display: flex; justify-content: center; gap: 24px; margin-top: 28px; font-size: 13.5px; }
  .faq-jump a { color: var(--gold-bright); text-decoration: none; font-weight: 600; }
  .faq-jump a:hover { text-decoration: underline; }

/* 21 Sept 2026 — company identification, application privacy line, form error */
.foot-legal{width:100%;margin-top:0;font-size:12px;color:var(--w50, rgba(255,255,255,0.5));line-height:1.6}

/* 21 Sept 2026 — long-form legal pages (safeguarding.html; later the other legal documents) */
.legal-doc{padding:8px 0 72px}
.legal-doc .wrap{max-width:780px}
.legal-doc h2{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:#fff;margin:44px 0 12px;line-height:1.25}
.legal-doc h3{font-size:16px;font-weight:600;color:var(--gold-bright);margin:28px 0 8px;letter-spacing:.2px}
.legal-doc p{font-size:15px;line-height:1.75;color:var(--w70);margin:0 0 14px}
.legal-doc ul,.legal-doc ol{margin:0 0 16px 22px;padding:0}
.legal-doc li{font-size:15px;line-height:1.7;color:var(--w70);margin:0 0 6px}
.legal-doc li p{margin:0}
.legal-doc strong{color:#fff;font-weight:600}
.legal-doc a{color:var(--gold-bright)}

  /* 22 Sept 2026 — squad roster illustration (teams page) */
  .roster-card { width: 380px; max-width: 100%; margin: 0 auto; background: var(--navy-2); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,0.45); overflow: hidden; text-align: left; }
  .roster-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--w15); }
  .roster-brand { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: #fff; line-height: 1; }
  .roster-brand b { font-weight: 600; } .roster-brand span { color: var(--gold); }
  .roster-sub { font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-top: 4px; }
  .roster-top-actions { display: flex; align-items: center; gap: 12px; font-size: 11px; }
  .roster-switch { color: var(--gold); text-decoration: underline; }
  .roster-signout { background: var(--gold); color: var(--navy); font-weight: 700; padding: 7px 12px; border-radius: 8px; }
  .roster-body { padding: 18px; }
  .roster-headrow { display: flex; justify-content: space-between; align-items: center; }
  .roster-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: #fff; font-weight: 600; }
  .roster-count { font-size: 11px; color: var(--w50); margin-top: 2px; }
  .roster-invite { font-size: 11px; font-weight: 600; color: var(--gold); border: 1px solid rgba(201,168,76,0.5); border-radius: 999px; padding: 8px 12px; white-space: nowrap; }
  .roster-ac { margin: 16px auto 14px; width: max-content; background: var(--gold); color: var(--navy); font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 19px; padding: 8px 30px; border-radius: 999px; box-shadow: 0 0 22px rgba(201,168,76,0.25); }
  .roster-search { font-size: 12px; color: var(--w30); border: 1px solid var(--w15); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; background: rgba(255,255,255,0.03); }
  .roster-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--w15); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; background: rgba(255,255,255,0.02); }
  .rdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .rdot.week { background: #4CAF7D; } .rdot.fortnight { background: #C9A84C; } .rdot.quiet { background: rgba(255,255,255,0.25); }
  .rmain { flex: 1; min-width: 0; }
  .rname { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 600; color: #fff; }
  .rmeta { font-size: 10.5px; color: var(--w50); margin-top: 1px; }
  .rscore { text-align: right; flex-shrink: 0; }
  .rscore div { font-family: 'Cormorant Garamond', serif; font-size: 20px; line-height: 1.1; }
  .rscore .good { color: #4CAF7D; } .rscore .bad { color: #E25C5C; } .rscore .none { color: var(--w30); }
  .rscore small { font-size: 9.5px; color: var(--w50); }

  /* 9 October 2026 — home page: the chat and the practice plan side by side on
     a computer, stacked on a phone. Column count lives here, never in a style=. */
  .proof-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; max-width: 920px; margin: 0 auto; }
  .proof-pair-title { font-size: clamp(24px, 3vw, 30px); color: #fff; text-align: center; margin: 0 0 24px; }
  @media (max-width: 860px) { .proof-pair { grid-template-columns: 1fr; gap: 56px; } }
  /* 10 October 2026 — a line under a proof-pair title. On a computer the two
     columns sit side by side, so the column without one gets an invisible
     spacer of the same height and the two cards still start level. */
  .proof-pair-sub { text-align: center; color: var(--w70); font-size: 16px; line-height: 1.6; max-width: 398px; margin: -4px auto 24px; }
  .proof-pair-sub.spacer { display: none; }
  @media (min-width: 861px) { .proof-pair-sub { min-height: 3.2em; } .proof-pair-sub.spacer { display: block; visibility: hidden; } }

  /* 9 October 2026 — THE MOCK-UPS AT THE APP'S OWN PROPORTIONS. Every chat
     mock-up on the site is drawn at a phone's width (the app is 390px wide)
     with the app's own bubble sizes, spacing and the small Coach avatar beside
     each of his messages (index.html .ap-bubble / .ap-messages / .ap-avatar),
     so a screen on the website is the same shape as the screen in the app. */
  .chat-mock.demo, .showcase-card { max-width: 398px; }
  .chat-body { padding: 8px 16px 16px; gap: 12px; }
  .msg { font-size: 13px; line-height: 1.6; padding: 10px 14px; border-radius: 16px; max-width: 80%; }
  .msg.coach { position: relative; margin-left: 36px; border-bottom-left-radius: 4px; }
  .msg.coach::before { content: 'C'; position: absolute; left: -36px; bottom: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--navy); font-family: 'Cormorant Garamond', serif; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .msg.player { border-bottom-right-radius: 4px; }