:root {
      --navy: #0a2f5c;
      --navy-2: #0a2f5c;
      --ink: #102235;
      --white: #ffffff;
      --mist: #eef4f8;
      --line: rgba(255,255,255,0.22);
      --accent: #a2a9b0;
      --danger: #b42318;
      --success: #166534;
      --radius: 18px;
      --shadow: 0 18px 45px rgba(0,0,0,0.18);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--white);
      background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,0.10), transparent 32%),
        radial-gradient(circle at 85% 20%, rgba(255,255,255,0.06), transparent 28%),
        var(--navy);
      min-height: 100vh;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .18;
      background-image:
        linear-gradient(25deg, transparent 35%, rgba(255,255,255,.08) 35% 37%, transparent 37% 63%, rgba(255,255,255,.05) 63% 65%, transparent 65%),
        linear-gradient(155deg, transparent 42%, rgba(255,255,255,.06) 42% 44%, transparent 44%);
      background-size: 90px 90px, 130px 130px;
    }

    .app {
      width: min(760px, 100%);
      margin: 0 auto;
      padding: 20px 18px 42px;
      position: relative;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 4px 0 22px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--white);
    }
    
    .brand-logo {
        height: 64px;
        width: auto;
        display: block;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border: 2px solid rgba(255,255,255,.9);
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-weight: 900;
      letter-spacing: -2px;
      font-size: 18px;
    }

    .brand-text {
      line-height: 1;
    }

    .brand-text strong {
      display: block;
      letter-spacing: .13em;
      font-size: 17px;
    }

    .brand-text span {
      display: block;
      margin-top: 4px;
      font-size: 10px;
      letter-spacing: .15em;
      opacity: .8;
    }

    .top-actions {
      display: flex;
      gap: 8px;
    }

    .ghost-btn {
      appearance: none;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.06);
      color: var(--white);
      border-radius: 999px;
      padding: 9px 13px;
      font: inherit;
      cursor: pointer;
    }

    .ghost-btn:hover { background: rgba(255,255,255,.12); }

    .screen {
      display: none;
      animation: fade .22s ease;
    }

    .screen.active { display: block; }

    @keyframes fade {
      from { opacity: 0; transform: translateY(5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .eyebrow {
      margin: 6px 0 9px;
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: 12px;
      font-weight: 700;
      opacity: .78;
    }

    h1, h2 {
      margin: 0;
      text-transform: uppercase;
      letter-spacing: .03em;
      line-height: .98;
    }

    h1 { font-size: clamp(40px, 9vw, 72px); }
    h2 { font-size: clamp(32px, 7vw, 54px); }

    .lead {
      font-size: 17px;
      line-height: 1.55;
      max-width: 620px;
      margin: 18px 0 26px;
      color: rgba(255,255,255,.88);
    }

    .question {
      margin-top: 28px;
      font-size: clamp(22px, 5vw, 30px);
      line-height: 1.15;
      font-weight: 800;
      text-transform: uppercase;
    }

    .choices {
      display: grid;
      gap: 12px;
      margin-top: 20px;
    }

    .choice,
    .primary-link,
    .primary-btn {
      width: 100%;
      border: 0;
      border-radius: 999px;
      background: var(--white);
      color: var(--navy);
      padding: 17px 20px;
      font-size: 17px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      text-align: center;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 10px 26px rgba(0,0,0,.12);
      transition: transform .15s ease, box-shadow .15s ease;
      box-sizing: border-box;
    }

    .primary-link {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 58px;
      margin-top: 20px;
      margin-bottom: 16px;
      line-height: 1.25;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .choice:hover,
    .primary-link:hover,
    .primary-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 30px rgba(0,0,0,.18);
    }

    .panel {
      margin-top: 24px;
      border: 1px solid var(--line);
      background: rgba(3,23,39,.42);
      border-radius: var(--radius);
      padding: 20px;
      backdrop-filter: blur(5px);
      box-shadow: var(--shadow);
    }

    .panel h3 {
      margin: 0 0 8px;
      font-size: 20px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .panel p, .panel li {
      line-height: 1.55;
      color: rgba(255,255,255,.88);
    }

    .panel ul {
      margin: 14px 0 0;
      padding-left: 20px;
    }

    .facts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 10px;
      margin: 18px 0;
    }

    .fact {
      border: 1px solid var(--line);
      background: rgba(255,255,255,.07);
      border-radius: 14px;
      padding: 14px;
    }

    .fact small {
      display: block;
      text-transform: uppercase;
      letter-spacing: .1em;
      opacity: .7;
      margin-bottom: 5px;
    }

    .fact strong { font-size: 20px; }

    .note {
      margin-top: 12px;
      font-size: 13px;
      line-height: 1.5;
      color: rgba(255,255,255,.72);
    }

    .muted-box {
      margin-top: 20px;
      padding: 15px 16px;
      border-radius: 14px;
      background: rgba(255,255,255,.08);
      border: 1px solid var(--line);
      line-height: 1.5;
    }

    .step-label {
      margin-top: 24px;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .13em;
      opacity: .72;
      font-weight: 700;
    }

    .field-group {
      margin-top: 16px;
    }

    label {
      display: block;
      font-weight: 700;
      margin-bottom: 7px;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"] {
      width: 100%;
      border: 1px solid rgba(255,255,255,.28);
      background: rgba(255,255,255,.96);
      color: var(--ink);
      padding: 14px 15px;
      border-radius: 12px;
      font-size: 16px;
      outline: none;
    }

    input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.18); }

    .check-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .check-item {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      padding: 13px 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,.06);
    }

    .check-item input {
      margin-top: 2px;
      width: 18px;
      height: 18px;
      accent-color: var(--navy);
    }

    .check-item label {
      margin: 0;
      font-weight: 600;
      cursor: pointer;
    }

    .radio-row {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .inline-actions {
      display: flex;
      gap: 10px;
      margin-top: 22px;
      flex-wrap: wrap;
    }

    .secondary-btn {
      border: 1px solid var(--line);
      background: rgba(255,255,255,.08);
      color: var(--white);
      border-radius: 999px;
      padding: 13px 17px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }

    .error {
      display: none;
      margin-top: 12px;
      color: #ffd7d2;
      font-weight: 700;
      font-size: 14px;
    }

    .error.show { display: block; }

    .field-error {
      display: none;
      margin-top: 7px;
      color: #ffd7d2;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
    }

    .field-error.show { display: block; }

    input.invalid {
      border-color: #ffb4ab;
      box-shadow: 0 0 0 3px rgba(255,180,171,.16);
    }

    .summary {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .summary-row {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255,255,255,.13);
    }

    .summary-row strong { color: rgba(255,255,255,.72); }

    .success-box {
      border: 1px solid rgba(217,255,226,.32);
      background: rgba(20,92,53,.28);
      border-radius: var(--radius);
      padding: 20px;
      margin-top: 22px;
    }

    .prototype-note {
      margin-top: 14px;
      font-size: 12px;
      opacity: .68;
      line-height: 1.45;
    }

    footer {
      padding-top: 34px;
      font-size: 12px;
      opacity: .55;
      text-align: center;
    }


    /* Desktop / laptop layout */
    @media (min-width: 900px) {
      .app {
        width: min(1180px, 100%);
        padding: 28px 32px 54px;
      }

      header {
        padding-bottom: 28px;
      }

      /* Use the wider desktop canvas on the landing screen */
      .screen[data-screen="home"] h1 {
        max-width: 1080px;
        font-size: clamp(64px, 5.2vw, 88px);
      }

      .screen[data-screen="home"] .lead {
        max-width: 820px;
        font-size: 18px;
      }

      .screen[data-screen="home"] .question {
        margin-top: 34px;
      }

      /* Put Basketball, Football, Volleyball side-by-side on desktop */
      .screen[data-screen="home"] .choices {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .screen[data-screen="home"] .choice {
        min-height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* Keep the deeper form/decision screens comfortably readable */
      .screen:not([data-screen="home"]) {
        max-width: 860px;
      }
    }

    @media (max-width: 560px) {
  .app { padding: 16px 14px 32px; }
  header { padding-bottom: 16px; }

  .brand-logo {
    height: 52px;
    }

  .primary-link {
    min-height: 56px;
    padding: 15px 18px;
    font-size: 15px;
    margin-top: 18px;
    margin-bottom: 18px;
  }

  .brand-text span { display: none; }
  .facts { grid-template-columns: 1fr; }
  .summary-row { grid-template-columns: 1fr; gap: 4px; }
  .top-actions .ghost-btn:first-child { display: none; }
    }
    
  
/* V10 additions, original responsive layout retained. */
[hidden] { display:none !important; }
a { color:inherit; }
.brand-logo { height:auto; width:clamp(150px,26vw,240px); max-width:100%; }
.art-card { width:100%; aspect-ratio:1/1; margin-top:26px; border:1px solid rgba(162,169,176,.35); border-radius:18px; overflow:hidden; display:grid; place-items:center; background:rgba(255,255,255,.04); text-align:center; }
.art-card img { width:100%; height:100%; object-fit:contain; }
.art-card strong { display:block; text-transform:uppercase; letter-spacing:.08em; }
.art-card span { display:block; margin-top:8px; font-size:14px; color:#ccd5df; }
fieldset { border:0; padding:0; min-width:0; }
legend { font-weight:700; padding:0; }
.honey { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
button:disabled { opacity:.65; cursor:wait; transform:none; }
:focus-visible { outline:3px solid #a2a9b0; outline-offset:4px; }
.note,.field-error { font-size:14px; }
.payment-amount { font-size:clamp(32px,6vw,56px); font-weight:800; margin:14px 0; }
.policy-panel { margin:24px 0; padding:24px; border:1px solid rgba(162,169,176,.45); border-radius:18px; }
.policy-panel h3 { margin-top:0; }
.policy-option { margin-top:18px; }
.policy-option label { display:flex; gap:12px; align-items:flex-start; line-height:1.55; font-size:16px; }
.policy-option input { flex:0 0 auto; width:20px; height:20px; margin:3px 0 0; accent-color:#0a2f5c; }
.policy-option a { display:inline-block; margin:6px 0 0 32px; text-decoration:underline; text-underline-offset:3px; }
.policy-option input:disabled { cursor:not-allowed; }
.policy-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px; margin-top:12px; font-size:14px; }
.policy-links a[href] { text-decoration:underline; text-underline-offset:3px; }
.policy-links a[aria-disabled="true"] { opacity:.6; cursor:default; }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.trial-options { display:grid; gap:16px; margin:24px 0; }
.trial-option,.trial-selected { border:1px solid rgba(162,169,176,.45); border-radius:18px; padding:22px; background:rgba(255,255,255,.04); overflow-wrap:anywhere; }
.trial-option h3,.trial-selected h3 { margin:0; font-size:1.25rem; line-height:1.4; }
.trial-option p,.trial-selected p { margin:12px 0; line-height:1.6; }
.trial-option-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.slot-badge { font-size:.875rem; font-weight:700; flex-shrink:0; padding:5px 12px; border:1px solid #a2a9b0; border-radius:20px; }
.slot-full { color:#cdd3da; border-style:dashed; }
.trial-option-calendar { margin-top:12px; border-width:2px; }
.trial-option button:disabled { cursor:not-allowed; }
.trial-selected { margin:22px 0; }
.booking-steps { padding-left:24px; line-height:1.65; }
.booking-steps li { padding:8px 0 8px 6px; }
@media (max-width:560px) { .trial-option,.trial-selected { padding:18px; } .trial-option-top { flex-wrap:wrap; } }