/* Squadwise marketing site. Tokens mirror the app's DESIGN.md. */
@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-400.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-600.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/manrope-700.woff2) format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/manrope-800.woff2) format('woff2')}
:root{
  --navy:#1d3a66; --navy-deep:#132a4d; --navy-ink:#0f2340; --navy-hover:#284b80;
  --navy-tint:#e9edf3; --navy-border:#cdd6e3; --navy-soft:#c9d4e6;
  --green:#4CAF6D; --green-text:#2A7146;
  --amber:#E8963D; --amber-text:#96530A;
  --yellow:#F2C230; --yellow-text:#806200;
  --red:#D4453F; --red-text:#B3261E;
  --ink:#232426; --muted:#5c5f62; --border:#e1e3e3; --surface:#fff; --page:#f3f4f4;
  --warn-bg:#fdf1f0; --warn-border:#f2c4c0; --warn-text:#a83232;
  --r-s:8px; --r-m:14px; --r-l:20px;
  --sh-card:0 1px 2px rgba(19,42,77,.06),0 6px 18px rgba(19,42,77,.08);
  --sh-lift:0 1px 2px rgba(15,35,64,.06),0 10px 24px -8px rgba(15,35,64,.16),0 28px 56px -16px rgba(15,35,64,.22);
  --sh-float:0 2px 6px rgba(15,35,64,.16),0 24px 60px rgba(15,35,64,.34);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --nav-h:64px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--surface);scrollbar-color:var(--navy-border) var(--page);caret-color:var(--navy)}
::selection{background:var(--navy);color:#fff}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:#fff;color:var(--navy);padding:10px 14px;border-radius:var(--r-s);font-weight:800;z-index:100;transition:top .15s}
.skip:focus{top:12px}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.015em;line-height:1.1;text-wrap:balance}
p{margin:0;max-width:62ch;text-wrap:pretty}

/* Buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 20px;border-radius:var(--r-s);border:2px solid transparent;font:800 1rem/1 Manrope,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .25s var(--ease),transform .16s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-sm{min-height:44px;padding:0 16px;font-size:.9375rem}
.btn-lg{min-height:52px;padding:0 26px;font-size:1.0625rem}
.btn-light{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(8,18,34,.2),0 6px 18px -8px rgba(8,18,34,.5)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 1px 2px rgba(15,35,64,.2),0 8px 20px -10px rgba(15,35,64,.6)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn .arr{width:18px;height:18px;flex:none;margin-right:-4px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.btn-light:hover{background:#f2f5f9}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-navy:hover{background:var(--navy-hover)}
@media (hover:hover) and (pointer:fine){
  .btn-light:hover{box-shadow:0 2px 4px rgba(8,18,34,.2),0 14px 30px -10px rgba(8,18,34,.6)}
  .btn-navy:hover{box-shadow:0 2px 4px rgba(15,35,64,.2),0 14px 28px -10px rgba(15,35,64,.65)}
  .btn:hover .arr{transform:translateX(3px)}
}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:var(--navy);box-shadow:inset 0 -1px 0 rgba(255,255,255,.12);transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.nav-in{display:flex;align-items:center;gap:28px;height:var(--nav-h)}
.brand{display:inline-flex;align-items:center}
.brand img{width:auto}
.nav-links{display:flex;gap:26px;margin-left:12px}
.nav-links a{position:relative;color:var(--navy-soft);text-decoration:none;font-weight:700;font-size:.9375rem;padding:13px 2px;transition:color .2s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:2px;right:2px;bottom:6px;height:2px;border-radius:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav-signin{white-space:nowrap;color:#fff;font-weight:700;font-size:.9375rem;text-decoration:none;padding:13px 4px}
.nav-signin:hover{text-decoration:underline}
.cta-short{display:none}
.nav-sentinel{position:absolute;top:0;left:0;width:1px;height:12px;pointer-events:none}
/* Over the hero photo the nav is see-through, then frosted once you scroll (needs motion.js). */
.io .nav-over:not(.scrolled){background:rgba(19,42,77,0);box-shadow:inset 0 -1px 0 rgba(255,255,255,0)}
.nav-over.scrolled{background:rgba(19,42,77,.97);box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),0 12px 32px -14px rgba(8,18,34,.55)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav-over.scrolled{background:rgba(19,42,77,.9);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
}

/* Hero */
.hero{position:relative;overflow:hidden;isolation:isolate;margin-top:calc(var(--nav-h) * -1);background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 62%,var(--navy-ink) 100%);color:#fff}
.hero-pitch{position:absolute;right:-90px;bottom:-190px;width:760px;height:760px;color:#fff;opacity:.12;pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:48px;padding:calc(var(--nav-h) + 72px) 0 72px}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);letter-spacing:-.025em;line-height:1.02}
.hero-h .w{display:inline-block;vertical-align:top;overflow:hidden;padding:0 .05em .14em;margin:0 -.05em -.14em}
.hero-h .w>span{display:inline-block}
.lede{margin-top:24px;font-size:1.25rem;line-height:1.55;color:var(--navy-soft);max-width:34em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:24px}
.status{display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 11px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-size:.8125rem;font-weight:800;line-height:1.2;color:#fff;white-space:nowrap}
.status-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--green)}
.status-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);opacity:0}
.hero-note{font-size:.9375rem;color:var(--navy-soft)}
.hero-device{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-device figcaption{font-size:.8125rem;color:var(--navy-soft)}
.hero-proof{position:relative;display:flex;align-items:center;gap:14px;padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.12)}
.hero-proof img{flex:none;width:15px;height:20px}
.hero-proof p{max-width:none;font-size:.9375rem;font-weight:700;color:var(--navy-soft)}

/* Phone */
.phone{--rz:2.5deg;width:304px;border-radius:44px;padding:11px;background:var(--navy-ink);box-shadow:var(--sh-float),inset 0 0 0 1.5px rgba(255,255,255,.14);transform:rotate(var(--rz))}
.screen{border-radius:34px;background:var(--page);color:var(--ink);overflow:hidden;padding:18px 14px 0;height:542px;display:flex;flex-direction:column}
.app-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.app-squad{font-weight:800;font-size:.9375rem;line-height:1.2;color:var(--navy)}
.app-sub{font-size:.75rem;color:var(--muted);line-height:1.3}
.app-warn-wrap{display:grid;grid-template-rows:1fr}
.app-warn-clip{min-height:0;overflow:hidden}
.app-warn,.alert-line{display:flex;align-items:center;gap:8px;background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);border-radius:var(--r-s);padding:9px 10px;font-size:.8125rem;line-height:1.3}
.app-warn svg,.alert-line svg{flex:none}
.app-label{margin:16px 0 8px;font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pl{display:grid;grid-template-columns:22px 1fr 76px 34px;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:var(--r-s);padding:8px 10px}
.pl-flag{background:var(--warn-bg);border-color:var(--warn-border)}
.no{font-weight:800;font-size:.8125rem;color:var(--navy)}
.nm{font-weight:700;font-size:.8125rem;line-height:1.15}
.nm small{display:block;font-weight:600;font-size:.6875rem;color:var(--muted)}
.pct{font-weight:800;font-size:.75rem;text-align:right;font-variant-numeric:tabular-nums}

/* Game-time bars (shared) */
.gt{position:relative;display:block;height:8px;border-radius:99px;background:var(--navy-tint)}
.gt i{position:absolute;inset:0 auto 0 0;width:calc(var(--p) * 1%);border-radius:99px;transform-origin:left}
.gt::after{content:"";position:absolute;left:65%;top:-3px;bottom:-3px;width:2px;background:var(--navy);opacity:.55;border-radius:1px}
.gt-g i{background:var(--green)} .gt-a i{background:var(--amber)} .gt-r i{background:var(--red)}
.pct-g{color:var(--green-text)} .pct-a{color:var(--amber-text)} .pct-r{color:var(--red-text)}
.app-legend{display:flex;align-items:center;gap:7px;margin:10px 2px 14px;font-size:.6875rem;font-weight:700;color:var(--muted)}
.mark65{width:2px;height:12px;background:var(--navy);opacity:.55;border-radius:1px}
.app-tabs{margin:auto -14px 0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid var(--border);padding:10px 0 14px;font-size:.6875rem;font-weight:800;text-align:center;color:var(--muted)}
.app-tabs .on{color:var(--navy)}

/* Sections */
.section-h{font-size:clamp(1.85rem,3.6vw,2.8rem);letter-spacing:-.02em;max-width:20ch}
.features{padding:112px 0 48px}
.features .section-h{margin-bottom:24px}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px 0}
.feat-flip .feat-copy{order:2}
.feat h3{font-size:clamp(1.55rem,2.6vw,2.1rem);letter-spacing:-.02em}
.feat-copy p{margin-top:16px;color:var(--muted);font-size:1.0625rem}
.ticks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.ticks svg{flex:none;width:22px;height:22px;margin-top:2px;fill:none;stroke:var(--green-text);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* Stages: a backdrop with faint pitch markings that the product pieces sit on */
.stage{position:relative;isolation:isolate;border-radius:var(--r-l);padding:40px 36px;background:linear-gradient(160deg,#f3f6fa 0%,#e5ebf3 100%);box-shadow:inset 0 0 0 1px rgba(29,58,102,.07)}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%231d3a66' stroke-opacity='.1' stroke-width='2'%3E%3Ccircle cx='200' cy='200' r='170'/%3E%3Ccircle cx='200' cy='200' r='4' fill='%231d3a66' fill-opacity='.1' stroke='none'/%3E%3C/svg%3E") no-repeat right -200px top -200px/400px 400px}
.stage-dark{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-ink) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.stage-dark::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='2'%3E%3Ccircle cx='200' cy='200' r='170'/%3E%3Ccircle cx='200' cy='200' r='4' fill='%23ffffff' fill-opacity='.08' stroke='none'/%3E%3C/svg%3E") no-repeat left -200px bottom -200px/400px 400px}
.notes-stage::before{background-position:left -200px bottom -200px}
.share-stage::before{background-position:right -200px bottom -200px}

/* A bars */
.stage-a{display:flex;flex-direction:column}
.bars{position:relative;display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--border);border-radius:var(--r-m);padding:38px 20px 42px;box-shadow:var(--sh-lift)}
.bar-row{display:grid;grid-template-columns:62px 1fr 42px 118px;align-items:center;gap:12px}
.bn{font-weight:700;font-size:.9375rem}
.bv{font-weight:800;font-size:.9375rem;text-align:right;font-variant-numeric:tabular-nums}
.bar-row .gt{height:10px}
.bs{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;font-weight:800;transform-origin:left center}
.bs b{width:10px;height:10px;border-radius:50%;flex:none}
.s-g{color:var(--green-text)} .s-g b{background:var(--green)}
.s-y{color:var(--yellow-text)} .s-y b{background:var(--yellow)}
.s-r{color:var(--red-text)} .s-r b{background:var(--red)}
.bar-guide{position:absolute;left:calc(20px + 62px + 12px);right:calc(20px + 118px + 12px + 42px + 12px);top:12px;height:0}
.bar-guide span{position:absolute;left:65%;transform:translateX(-50%);top:0;white-space:nowrap;font-size:.6875rem;font-weight:800;color:var(--muted)}
.alert-line{position:relative;align-self:flex-end;margin:-22px 18px 0;padding:12px 16px;font-size:.9375rem;box-shadow:var(--sh-lift)}

/* B pitch */
.pitch-stage{display:flex;flex-direction:column;align-items:center}
.pitch{width:min(100%,320px);height:auto;border-radius:14px;box-shadow:0 2px 4px rgba(0,0,0,.2),0 24px 50px -18px rgba(0,0,0,.6)}
.quick{position:relative;width:min(100% - 32px,296px);margin-top:-20px;background:#fff;border:1px solid var(--border);border-radius:var(--r-m);padding:14px;box-shadow:0 2px 6px rgba(0,0,0,.18),0 20px 40px -14px rgba(0,0,0,.55)}
.quick-h{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:.9375rem;margin-bottom:10px}
.quick-n{color:var(--muted);font-weight:700}
.rate{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.rate span{position:relative;display:grid;place-items:center;min-height:40px;border-radius:var(--r-s);border:1px solid var(--navy-border);background:var(--navy-tint);font-weight:800;color:var(--navy)}
.rate .on{background:var(--navy);color:#fff;border-color:var(--navy)}
.rate .on::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 2px var(--navy);opacity:0;pointer-events:none}

/* C notes */
.notes-stage{display:flex;flex-direction:column;gap:14px}
.note{background:#fff;border:1px solid var(--border);border-radius:var(--r-m);padding:18px;box-shadow:var(--sh-lift)}
.note-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.lock{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;font-size:.75rem;font-weight:800;border-radius:99px;padding:5px 10px;white-space:nowrap}
.lock svg{overflow:visible}
.note p{font-size:.9375rem;color:var(--ink)}
.note-f{margin-top:10px;font-size:.8125rem;color:var(--muted)}
.note-b{margin-left:36px}

/* D share */
.share-stage{display:grid;place-items:center;padding-block:48px}
.result{width:min(100%,320px);aspect-ratio:4/5;border-radius:var(--r-m);background:linear-gradient(160deg,var(--navy) 0%,var(--navy-ink) 100%);color:#fff;padding:26px 24px;display:flex;flex-direction:column;box-shadow:var(--sh-float),inset 0 0 0 1px rgba(255,255,255,.08);transform:rotate(-2deg)}
.res-top{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.8125rem;color:var(--navy-soft)}
.res-top img{width:auto}
.res-score{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.res-score .tm{font-weight:800;font-size:1.0625rem}
.res-score .sc{display:inline-flex;align-items:center;font-weight:800;font-size:4.5rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.res-score .sc em{font-style:normal;color:var(--green);margin:0 .12em}
.digit{display:inline-block;height:1em;overflow:hidden}
.roll{display:block}
.roll>span{display:block;height:1em}
.roll-h{transform:translateY(-3em)}
.roll-a{transform:translateY(-1em)}
.res-meta{margin-top:18px;text-align:center;font-size:.875rem;color:var(--navy-soft)}
.res-scorers{margin-top:6px;text-align:center;font-weight:700;font-size:.9375rem}
.res-foot{margin-top:auto;padding-top:22px;display:flex;justify-content:center}
.res-foot img{width:auto}

/* How */
.how{background:var(--page);padding:104px 0;border-block:1px solid var(--border)}
.how .section-h{max-width:22ch}
.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.steps li{position:relative;padding-top:4px}
.steps li:not(:last-child)::after{content:"";position:absolute;z-index:0;top:27px;left:52px;width:calc(100% + 48px - 56px);height:2px;border-radius:2px;background:linear-gradient(90deg,var(--navy) 0%,var(--navy-border) 100%);transform-origin:left center}
.step-n{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:1.125rem;margin-bottom:20px;box-shadow:inset 0 0 0 2px var(--navy),0 6px 16px -6px rgba(15,35,64,.45)}
.step-n::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--navy);opacity:0}
.steps h3{font-size:1.375rem;margin-bottom:10px}
.steps p{color:var(--muted)}

/* Clubs */
.clubs{padding:112px 0}
.clubs-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.clubs-copy p{margin-top:20px;color:var(--muted)}
.roles{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--navy-border);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-lift);font-size:.9375rem}
.roles th,.roles td{padding:17px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border);transition:background-color .2s var(--ease)}
.roles thead th{background:var(--navy-tint);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.roles tbody th{font-weight:800;color:var(--navy);white-space:nowrap}
.roles tbody tr:last-child th,.roles tbody tr:last-child td{border-bottom:0}
@media (hover:hover) and (pointer:fine){.roles tbody tr:hover>*{background:#f6f8fb}}

/* Access */
.access{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;padding:104px 0}
.access-pitch{position:absolute;z-index:-1;left:-250px;bottom:-330px;width:720px;height:720px;color:#fff;opacity:.06;pointer-events:none}
.access-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.access h2{font-size:clamp(1.85rem,3.6vw,2.8rem);letter-spacing:-.02em;max-width:14ch}
.access-copy p{margin-top:20px;color:var(--navy-soft);font-size:1.125rem}
.form{background:#fff;color:var(--ink);border-radius:var(--r-l);padding:30px;box-shadow:var(--sh-float),inset 0 0 0 1px rgba(255,255,255,.6);display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{font-weight:800;font-size:.875rem;color:var(--navy)}
.field input,.field select{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--navy-border);border-radius:var(--r-s);background:#fff;font:600 1rem Manrope,system-ui,sans-serif;color:var(--ink);transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d3a66' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.field input:hover,.field select:hover{border-color:var(--navy)}
.field input:focus-visible,.field select:focus-visible{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(76,175,109,.45)}
.field [aria-invalid="true"]{border-color:var(--red-text);background:var(--warn-bg)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{width:100%}
.form-msg{min-height:1.5em;font-weight:700;font-size:.9375rem}
.form-msg.ok{color:var(--green-text)}
.form-msg.err{color:var(--red-text)}
.form-fine{font-size:.8125rem;color:var(--muted)}
.form-fine a{color:var(--navy);font-weight:700;display:inline-block;padding:14px 4px;margin:-14px -4px}

/* Footer */
.foot{background:var(--navy-ink);color:var(--navy-soft)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;padding:36px 0}
.foot-links{display:flex;gap:24px;margin-left:auto}
.foot-links a{color:var(--navy-soft);text-decoration:none;font-weight:700;font-size:.9375rem;padding:13px 0;transition:color .2s var(--ease)}
.foot-links a:hover{color:#fff;text-decoration:underline}
.foot-c{flex-basis:100%;font-size:.8125rem;max-width:none}

/* Legal page */
.legal{padding:72px 0 96px}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:12px}
.legal h2{font-size:1.375rem;margin:40px 0 10px;letter-spacing:-.01em}
.legal p,.legal li{color:var(--ink);max-width:68ch}
.legal ul{padding-left:1.2em}
.legal .meta{color:var(--muted);font-size:.9375rem}

/* Photo hero and band (Unsplash, free licence). The photo sits on its own layer so it can settle on load. */
.hero-photo{background:var(--navy-ink)}
.hero-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(15,35,64,.94) 0%,rgba(19,42,77,.74) 46%,rgba(19,42,77,.36) 100%),url("/brand/hero-2000.jpg.avif") center 42%/cover no-repeat,linear-gradient(160deg,var(--navy) 0%,var(--navy-ink) 100%)}
.hero-photo .hero-pitch{opacity:.05}
.band{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-deep);color:#fff;padding:128px 0}
.band::before{content:"";position:absolute;inset:-8% 0;z-index:-1;background:linear-gradient(180deg,rgba(15,35,64,.78),rgba(15,35,64,.86)),url("https://images.unsplash.com/photo-1711447395363-5595964fd7ab?auto=format&fit=crop&q=72&w=2000") center 60%/cover no-repeat,var(--navy-deep)}
.band-in{text-align:left}
.band h2{font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:-.025em;max-width:16ch}
.band p{margin-top:20px;max-width:40ch;font-size:1.25rem;color:var(--navy-soft)}

/* Early-access form: thank-you state */
.form>*:not(.form-done){transition:opacity .3s var(--ease),transform .3s var(--ease)}
.form.leaving>*:not(.form-done){opacity:0;transform:translateY(-8px);pointer-events:none}
.form.is-done>*:not(.form-done){display:none}
.form-done{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;min-height:340px;padding:12px 8px}
.form-done[hidden]{display:none}
.form-done:focus{outline:none}
.form-done h3{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em;color:var(--navy);opacity:0;transform:translateY(12px)}
.form-done p{color:var(--muted);max-width:34ch;opacity:0;transform:translateY(12px)}
.done-tick{width:84px;height:84px;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.7)}
.tick-ring{stroke:var(--green);stroke-dasharray:145;stroke-dashoffset:145}
.tick-path{stroke:var(--green-text);stroke-dasharray:40;stroke-dashoffset:40}
.form-done.show .done-tick{opacity:1;transform:scale(1);transition:opacity .25s var(--ease),transform .5s var(--ease)}
.form-done.show .tick-ring{animation:draw .7s var(--ease) .05s forwards}
.form-done.show .tick-path{animation:draw .45s var(--ease) .5s forwards}
.form-done.show h3{animation:rise .6s var(--ease) .55s forwards}
.form-done.show p{animation:rise .6s var(--ease) .7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{to{opacity:1;transform:none}}

/* Responsive */
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:40px;padding:calc(var(--nav-h) + 48px) 0 56px}
  .hero-device{margin-top:8px}
  .phone{--rz:0deg}
  .hero-photo::before{background:linear-gradient(180deg,rgba(15,35,64,.9),rgba(19,42,77,.8)),url("/brand/hero-900.jpg.avif") center/cover no-repeat,var(--navy-deep)}
  .feat{grid-template-columns:1fr;gap:28px;padding:36px 0}
  .feat-flip .feat-copy{order:0}
  .clubs-in,.access-in{grid-template-columns:1fr;gap:36px}
  .steps{grid-template-columns:1fr;gap:36px}
  .steps li{padding:0 0 0 68px}
  .step-n{position:absolute;left:0;top:-4px;margin:0}
  .steps li:not(:last-child)::after{top:52px;left:23px;width:2px;height:calc(100% - 24px);background:linear-gradient(180deg,var(--navy) 0%,var(--navy-border) 100%);transform-origin:center top}
  .steps h3{padding-top:8px}
  .features,.clubs{padding-block:72px}
  .how,.access{padding-block:72px}
  .band{padding:88px 0}
}
@media (max-width:760px){
  .nav-links{display:none}
  .nav-in{gap:12px}
  .nav-actions{gap:10px}
  .btn-sm{padding:0 12px}
  .cta-long{display:none} .cta-short{display:inline}
}
@media (max-width:560px){
  body{font-size:1rem}
  .wrap{width:min(1160px,100% - 32px)}
  .lede{font-size:1.125rem}
  .hero-actions .btn{width:100%}
  .hero-proof{align-items:flex-start}
  .hero-proof img{margin-top:2px}
  .stage{padding:20px 16px}
  .bars{padding:22px 16px 42px}
  .bar-row{grid-template-columns:54px 1fr 38px;gap:8px 10px}
  .bar-row .bs{grid-column:2 / -1}
  .bars{gap:16px}
  .bar-guide{display:none}
  .alert-line{align-self:stretch;margin-inline:10px;font-size:.875rem}
  .share-stage{padding-block:36px}
  .field-row{grid-template-columns:1fr}
  .form{padding:22px 18px}
  .note-b{margin-left:0}
  .foot-links{margin-left:0}
  .roles thead{display:none}
  .roles,.roles tbody,.roles tr,.roles th,.roles td{display:block}
  .roles tr{padding:14px 16px;border-bottom:1px solid var(--border)}
  .roles tr:last-child{border-bottom:0}
  .roles th,.roles td{padding:2px 0;border:0}
  .roles td::before{content:attr(data-l) ": ";font-weight:800;color:var(--navy)}
}

/* ============================================================
   Motion
   1. The hero text and photo play on load (CSS only).
   2. Product demos wait for motion.js to add .motion to <html>,
      sit paused on their first frame, then play once when they
      scroll into view (.in). No script or reduced motion: the
      rules below never apply and the page shows its finished state.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .hero-photo::before{animation:settle 2.4s var(--ease) both}
  .hero-h .w>span{animation:wordUp 1s var(--ease) both;animation-delay:calc(var(--i) * 55ms + 80ms)}
  .hero .lede{animation:fadeUp 1s var(--ease) .38s both}
  .hero-actions{animation:fadeUp 1s var(--ease) .48s both}
  .hero-meta{animation:fadeUp 1s var(--ease) .58s both}
  .hero-proof{animation:fadeIn 1.2s var(--ease) .9s both}
  .status-dot::after{animation:live 2.2s var(--ease) 1.2s 3}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .band::before{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}

/* Hold every demo on its first frame until it is in view */
.motion [data-play]:not(.in),
.motion [data-play]:not(.in) *,
.motion [data-play]:not(.in) *::before,
.motion [data-play]:not(.in) *::after{animation-play-state:paused!important}

/* Hero phone: lifts into place, rows land, bars fill, Max falls short, the alert drops in */
.motion .hero-device .phone{animation:phoneIn 1.15s var(--ease) .05s both}
.motion .hero-device figcaption{animation:fadeIn .8s var(--ease) 1.2s both}
.motion .hero-device .pl{animation:rowIn .6s var(--ease) both;animation-delay:calc(.45s + var(--i) * 55ms)}
.motion .hero-device .pl.pl-flag{animation:rowIn .6s var(--ease) .72s both,flagRow 1s var(--ease) 1.52s both}
.motion .hero-device .gt i{animation:grow calc(var(--p) * 13ms) var(--ease) both;animation-delay:calc(.65s + var(--i) * 70ms)}
.motion .hero-device .pct{animation:fadeIn .25s var(--ease) both;animation-delay:calc(.65s + var(--i) * 70ms)}
.motion .hero-device .gt::after{animation:fadeIn .4s var(--ease) .9s both}
.motion .hero-device .app-legend{animation:fadeIn .5s var(--ease) 1s both}
.motion .hero-device .app-warn-wrap{animation:expand .55s var(--ease) 1.75s both}
.motion .hero-device .app-warn{animation:alertIn .6s var(--ease) 1.85s both}

/* A: bars fill, form lights come on, then the flag */
.motion .stage-a .gt i{animation:grow calc(var(--p) * 12ms) var(--ease) both;animation-delay:calc(.25s + var(--i) * 90ms)}
.motion .stage-a .bv{animation:fadeIn .25s var(--ease) both;animation-delay:calc(.25s + var(--i) * 90ms)}
.motion .stage-a .bs{animation:popIn .5s var(--ease) both;animation-delay:calc(.25s + var(--i) * 90ms + var(--p) * 9ms)}
.motion .stage-a .gt::after{animation:fadeIn .4s var(--ease) .2s both}
.motion .stage-a .bar-guide{animation:fadeIn .5s var(--ease) .3s both}
.motion .stage-a .alert-line{animation:toastIn .7s var(--ease) 1.45s both}

/* B: players take their positions from the centre spot, then a rating gets tapped */
.motion .pitch-stage .p{transform-box:fill-box;transform-origin:center;animation:takePos .85s var(--ease) both;animation-delay:calc(.2s + var(--d))}
.motion .pitch-stage .quick{animation:toastIn .7s var(--ease) .95s both}
.motion .pitch-stage .rate .on{animation:tapFill .55s var(--ease) 1.55s both}
.motion .pitch-stage .rate .on::after{animation:ripple .7s var(--ease) 1.85s forwards}

/* C: notes slide in and their padlocks click shut */
.motion .notes-stage .note{animation:noteIn .75s var(--ease) both;animation-delay:calc(.15s + var(--i) * 160ms)}
.motion .notes-stage .shackle{animation:lockShut .3s var(--ease) both;animation-delay:calc(.8s + var(--i) * 160ms)}
.motion .notes-stage .lock{animation:lockTap .35s var(--ease) both;animation-delay:calc(.8s + var(--i) * 160ms)}

/* D: the result card lands and the score ticks 1-0, 2-0, 2-1, 3-1 */
.motion .share-stage .result{animation:cardIn .9s var(--ease) .1s both}
.motion .share-stage .roll-h{animation:home3 2s var(--ease) .75s both}
.motion .share-stage .roll-a{animation:away1 2s var(--ease) .75s both}
.motion .share-stage .res-scorers{animation:fadeIn .6s var(--ease) 2.5s both}

/* How it works: the line runs 1 > 2 > 3 and each step lights up as it arrives */
.motion .steps li::after{animation:drawX .7s var(--ease-io) both;animation-delay:calc(.3s + var(--i) * .7s)}
.motion .steps .step-n{animation:stepOn .45s var(--ease) both;animation-delay:calc(.15s + var(--i) * .7s)}
.motion .steps .step-n::after{animation:ring .8s var(--ease) forwards;animation-delay:calc(.2s + var(--i) * .7s)}

/* Roles: rows arrive in order */
.motion .roles tbody tr>*{animation:fadeUpSm .55s var(--ease) both}
.motion .roles tbody tr:nth-child(2)>*{animation-delay:.08s}
.motion .roles tbody tr:nth-child(3)>*{animation-delay:.16s}
.motion .roles tbody tr:nth-child(4)>*{animation-delay:.24s}

@media (max-width:980px){
  .motion .steps li::after{animation-name:drawY}
}

@keyframes settle{from{transform:scale(1.08)}}
@keyframes wordUp{from{transform:translateY(120%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);filter:blur(6px)}}
@keyframes fadeUpSm{from{opacity:0;transform:translateY(8px)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes live{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(2.8)}}
@keyframes drift{from{transform:translateY(-5%) scale(1.06)}to{transform:translateY(5%) scale(1.06)}}
@keyframes phoneIn{from{opacity:0;transform:perspective(1600px) translateY(72px) rotateX(26deg) rotateZ(7deg) scale(.94)}to{opacity:1;transform:perspective(1600px) translateY(0) rotateX(0) rotateZ(var(--rz)) scale(1)}}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes flagRow{from{background:#fff;border-color:var(--border);box-shadow:0 0 0 0 rgba(212,69,63,.45)}45%{box-shadow:0 0 0 5px rgba(212,69,63,.16)}to{box-shadow:0 0 0 9px rgba(212,69,63,0)}}
@keyframes expand{from{grid-template-rows:0fr}}
@keyframes alertIn{from{opacity:0;transform:translateY(-10px) scale(.97)}}
@keyframes popIn{from{opacity:0;transform:scale(.85)}}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes takePos{0%{opacity:0;transform:translate(var(--x),var(--y)) scale(.6)}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes tapFill{0%{background:var(--navy-tint);color:var(--navy);border-color:var(--navy-border);transform:scale(1)}35%{background:var(--navy-tint);color:var(--navy);border-color:var(--navy-border);transform:scale(.9)}60%{background:var(--navy);color:#fff;border-color:var(--navy)}100%{transform:scale(1)}}
@keyframes ripple{from{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.45)}}
@keyframes noteIn{from{opacity:0;transform:translateX(28px)}}
@keyframes lockShut{from{transform:translateY(-3.5px)}}
@keyframes lockTap{50%{transform:scale(.93)}}
@keyframes cardIn{from{opacity:0;transform:translateY(36px) rotate(-7deg) scale(.95)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes home3{0%,18%{transform:translateY(0)}28%,45%{transform:translateY(-1em)}55%,78%{transform:translateY(-2em)}88%,100%{transform:translateY(-3em)}}
@keyframes away1{0%,60%{transform:translateY(0)}70%,100%{transform:translateY(-1em)}}
@keyframes drawX{from{transform:scaleX(0)}}
@keyframes drawY{from{transform:scaleY(0)}}
@keyframes stepOn{from{background:var(--page);color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy-border),0 0 0 0 rgba(15,35,64,0)}}
@keyframes ring{from{opacity:.55;transform:scale(.85)}to{opacity:0;transform:scale(1.35)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:active{transform:none}
  .btn .arr,.nav-links a::after{transition:none}
  .form>*:not(.form-done){transition:none}
  .form-done .done-tick,.form-done h3,.form-done p{opacity:1;transform:none}
  .tick-ring,.tick-path{stroke-dashoffset:0}
  .form-done.show .tick-ring,.form-done.show .tick-path,.form-done.show h3,.form-done.show p{animation:none}
}
@media print{
  *,*::before,*::after{animation:none!important;transition:none!important}
  .nav{position:static}
}