/* Original Comitty Experience compositions from the Claude reference.
   Shared buttons and form controls are provided by styles.css. */

body{margin:0;background:#07060E}
.pg{--grad:linear-gradient(90deg,#00C8FF 0%,#3B82F6 33%,#8B5CF6 66%,#E21FD6 100%);--cta:linear-gradient(90deg,#2563EB 0%,#7C3AED 55%,#C026D3 100%);font-family:'Inter',system-ui,sans-serif;color:#FFFFFF;background:#07060E;-webkit-font-smoothing:antialiased}
.h{font-family:'Montserrat',sans-serif}
.wrap{max-width:1440px;margin:0 auto;box-sizing:border-box;padding-left:clamp(16px,5.6vw,80px);padding-right:clamp(16px,5.6vw,80px)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:600 13px/1.2 'Inter',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#7FE7F7}
.eyebrow::before{content:'';width:28px;height:2px;border-radius:2px;background:var(--grad)}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nl{position:relative;color:#D5DAEA;text-decoration:none;font:500 15px/1 'Inter',sans-serif;padding:12px 4px}
.nl:hover{color:#FFFFFF}
.nl.on{color:#FFFFFF;font-weight:600}
.nl.on::after{content:'';position:absolute;left:4px;right:4px;bottom:2px;height:2px;border-radius:2px;background:var(--grad)}
.anc{color:#C9D0E4;text-decoration:none;font:600 14px/1 'Inter',sans-serif;padding:11px 14px;border-radius:999px}
.anc:hover{color:#FFFFFF;background:rgba(255,255,255,.08)}
.tl{color:#FFFFFF;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px}
.tl:hover{text-decoration-color:#FFFFFF}
.lt .tl{color:#0B1030;text-decoration-color:rgba(11,16,48,.4)}
.ill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(7,6,14,.72);border:1px solid rgba(255,255,255,.22);font:600 11px/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#E3E7F3}
.tag{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font:500 13px/1 'Inter',sans-serif;color:#D5DAEA}
.bezel{padding:8px;border-radius:12px;background:linear-gradient(180deg,#1C1F2B,#0B0D14);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.55)}
.pr{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;width:100%;text-align:left;padding:18px 20px;border-radius:16px;background:transparent;border:0;color:#FFFFFF;cursor:pointer;font:inherit;transition:background-color .2s ease}
.pr:hover{background:rgba(255,255,255,.05)}
.pr.on{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.pr .n{font:800 15px/22px 'Montserrat',sans-serif;color:#8C95B3}
.pr.on .n{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fq{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;background:none;border:0;color:#FFFFFF;font:600 18px/1.4 'Inter',sans-serif;text-align:left;cursor:pointer}
.fq:hover{color:#BFF3FB}
.fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.lab{font:600 14px/1.2 'Inter',sans-serif;color:#E3E7F3}
.errtxt{display:flex;align-items:center;gap:6px;color:#FDA4AF;font:500 14px/1.3 'Inter',sans-serif}
.g-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.g-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}
.g-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.g-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.g-ctrl{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.g-sp{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.g-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.g-faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.g-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.g-proof{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3.5fr) minmax(0,3.5fr);gap:24px}
.g-foot{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:48px}
.flow{display:flex;align-items:flex-start;gap:0}
.sbox{max-width:100%;overflow:hidden}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@keyframes drift{from{transform:scale(1.06) translateX(0)}to{transform:scale(1.12) translateX(-24px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse{animation:pulse 1.6s ease-in-out infinite}
.drift{animation:drift 22s ease-in-out infinite alternate}
.spin{animation:spin .9s linear infinite}
@media (prefers-reduced-motion: reduce){.pulse,.drift,.spin{animation:none}}
@media (max-width: 1100px){.g-5{grid-template-columns:repeat(3,minmax(0,1fr))}.navlinks{display:none}}
@media (max-width: 900px){.g-hero,.g-head,.g-ctrl,.g-sp,.g-2,.g-faq,.g-proof{grid-template-columns:minmax(0,1fr)}.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-foot{grid-template-columns:repeat(2,minmax(0,1fr))}.flow{flex-direction:column;align-items:stretch;gap:24px}.flow .conn{display:none}.h1{font-size:44px !important}.h2{font-size:34px !important}.sec{padding-top:80px !important;padding-bottom:80px !important}.ancs{overflow-x:auto}}
@media (max-width: 560px){.g-4,.g-5,.g-form,.g-foot{grid-template-columns:minmax(0,1fr)}.hide-s{display:none}}

@media(max-width:600px){

body{margin:0;background:#07060E}
.pm{--grad:linear-gradient(90deg,#00C8FF 0%,#3B82F6 33%,#8B5CF6 66%,#E21FD6 100%);--cta:linear-gradient(90deg,#2563EB 0%,#7C3AED 55%,#C026D3 100%);font-family:'Inter',system-ui,sans-serif;color:#FFFFFF;background:#07060E;-webkit-font-smoothing:antialiased}
.h{font-family:'Montserrat',sans-serif}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12px/1.2 'Inter',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#7FE7F7}
.eyebrow::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--grad)}
.ib{width:44px;height:44px;border-radius:12px;border:0;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer}
.chip{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;color:#D5DAEA;text-decoration:none;font:600 14px/1 'Inter',sans-serif;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);border:0;cursor:pointer}
.chip.on{color:#FFFFFF;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.ml{display:flex;align-items:center;justify-content:space-between;min-height:56px;color:#FFFFFF;text-decoration:none;font:600 20px/1 'Montserrat',sans-serif;border-bottom:1px solid rgba(255,255,255,.1)}
.tl{color:#FFFFFF;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px}
.ill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:rgba(7,6,14,.72);border:1px solid rgba(255,255,255,.22);font:600 10px/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#E3E7F3}
.tag{display:inline-flex;align-items:center;padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font:500 13px/1 'Inter',sans-serif;color:#D5DAEA}
.bezel{padding:6px;border-radius:10px;background:linear-gradient(180deg,#1C1F2B,#0B0D14);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.55)}
.scroller{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroller::-webkit-scrollbar{display:none}
.fq{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;background:none;border:0;color:#FFFFFF;font:600 17px/1.4 'Inter',sans-serif;text-align:left;cursor:pointer}
.fld{display:flex;flex-direction:column;gap:8px}
.lab{font:600 14px/1.2 'Inter',sans-serif;color:#E3E7F3}
.errtxt{color:#FDA4AF;font:500 14px/1.3 'Inter',sans-serif}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse{animation:pulse 1.6s ease-in-out infinite}
.spin{animation:spin .9s linear infinite}
@media (prefers-reduced-motion: reduce){.pulse,.spin{animation:none}}

}

/* Integration with the existing Comitty site components. */
html { scroll-padding-top: 24px; }
body.football-page { background:#07060e; }
.football-page > .nav { position:relative; }
.football-page > .nav .nav-links a[aria-current] { color:#fff; }
.football-page .cta-form { width:100%; max-width:none; margin:0; text-align:left; }
.football-page .cta-form input,
.football-page .cta-form select,
.football-page .cta-form textarea { width:100%; min-width:0; }
.football-page .cta-form button { align-self:auto; }
.football-page .cta-form button:disabled { opacity:.6; cursor:wait; }
.football-page .form-status { font-size:14px; line-height:1.6; }
.football-page .pg,.football-page .pm { line-height:normal; }
.football-page .pg .h,.football-page .pm .h { color:inherit; }
.football-page .pg a.btn,.football-page .pm a.btn { text-decoration:none; }
.football-page .pg .cta-form select,.football-page .pm .cta-form select { color-scheme:dark; }
.football-mobile { display:none; width:100%; }
.screen-viewport { max-width:100%; min-width:0; }
.screen-stage { transform-origin:0 0; }
.football-skip { position:fixed; left:16px; top:-100px; z-index:100; padding:12px; background:#fff; color:#0b1030; }
.football-skip:focus { top:12px; }
.football-page [hidden] { display:none!important; }
.football-page .btn:focus-visible,.football-page .pr:focus-visible,.football-page .chip:focus-visible,.football-page .fq:focus-visible { outline:3px solid #7fe7f7; outline-offset:4px; }
@media(max-width:1100px) {
  .football-page .flow { flex-wrap:wrap; gap:24px; }
  .football-page .flow .conn { display:none; }
  .football-page .flow > div:last-child { flex-basis:100%!important; }
}
@media(min-width:601px) and (max-width:900px) {
  .football-page .flow > div { flex-basis:auto!important; }
}
@media(max-width:600px) {
  .football-desktop { display:none; }
  .football-mobile { display:block; }
  .football-mobile .football-section { min-width:0; }
  .football-mobile .bezel { min-width:0; max-width:100%; }
  .football-mobile .btn { white-space:normal; text-align:center; }
  .football-page { padding-bottom:80px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .football-page *, .football-page *::before,.football-page *::after { animation:none!important; transition:none!important; }
}
@media(min-width:1101px) {
  .football-desktop .flow > div:not(.conn) { flex-shrink:1!important; min-width:0; }
}

/* Full-size sponsor artwork: explicit width prevents the flex bezel collapsing. */
#sponsors .sponsor-visual-bezel,
#m-sponsors .sponsor-visual-bezel { width:100%; min-width:0; }
.sponsor-main-image { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
#sponsors .sponsor-choices .pr { grid-template-columns:40px minmax(0,1fr); }
.sponsor-current-title { margin:22px 16px 12px; color:#fff; font:600 16px/1.4 Inter,sans-serif; }
#m-sponsors .sponsor-choices { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px!important; overflow:visible; }
#m-sponsors .sponsor-choices .chip { min-width:0; padding:14px 12px; border-radius:12px; white-space:normal; text-align:left; }
#m-sponsors .sponsor-choices .chip.on { background:rgba(139,92,246,.12); box-shadow:inset 0 0 0 1px #a78bfa; }
.sponsor-choice-label { display:flex; align-items:baseline; gap:8px; font:600 13px/1.45 Inter,sans-serif; }
.sponsor-step-number { flex-shrink:0; color:#7fe7f7; font-size:11px; }
#m-sponsor-choices { scroll-margin-top:80px; }

/* Sponsors remain in view while the six native scroll intervals are traversed. */
.football-page #sponsors { overflow:visible!important; }
.sponsor-scroll-track { position:relative; }
.sponsor-scroll-pin { position:sticky; top:72px; padding:12px 0 24px; }
.sponsor-scroll-pin .g-sp { gap:40px; }
.sponsor-scroll-pin #sponsor-preview > div { padding:36px 18px 20px!important; }
.sponsor-scroll-pin .sponsor-image-viewport { aspect-ratio:auto!important; }
.sponsor-scroll-pin .sponsor-main-image { max-height:calc(100svh - 285px); }
.sponsor-scroll-pin .pr { padding:12px 14px; }
.sponsor-scroll-pin .pr:not(.on) > span:nth-child(2) > span:nth-child(2) { display:none; }
.sponsor-scroll-progress { display:flex; justify-content:space-between; gap:16px; margin:20px 0 0; color:#a9b1cb; font:500 12px/1.5 Inter,sans-serif; }
.sponsor-scroll-progress > span:first-child { color:#7fe7f7; font-weight:700; letter-spacing:.1em; }
@media(min-width:601px) and (max-width:900px) {
  .sponsor-scroll-pin .g-sp { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:18px; }
  .sponsor-scroll-pin .pr { grid-template-columns:26px minmax(0,1fr)!important; padding:10px 8px; gap:8px; }
  .sponsor-scroll-pin .pr > span:nth-child(2) > span:first-child { font-size:14px!important; line-height:1.3!important; }
  .sponsor-scroll-pin .pr > span:nth-child(2) > span:nth-child(2) { font-size:12px!important; }
  .sponsor-scroll-pin #sponsor-preview ol { grid-template-columns:1fr!important; gap:10px!important; }
}
@media(max-width:600px) {
  .sponsor-scroll-pin { padding:0 0 16px; }
  #m-sponsors .sponsor-scroll-pin .sponsor-choices { padding:8px 16px 4px!important; gap:6px!important; }
  #m-sponsors .sponsor-scroll-pin .chip { padding:8px 10px; min-height:38px; }
  .sponsor-scroll-pin .sponsor-choice-label { font-size:11px; }
  .sponsor-scroll-pin .sponsor-current-title { margin:10px 16px; font-size:14px; }
  .sponsor-scroll-pin #m-sponsor-preview { padding:32px 10px 12px!important; }
  .sponsor-scroll-pin .sponsor-main-image { max-height:calc(100svh - 445px); }
  .sponsor-scroll-pin [data-mobile-sponsor-legend] { margin:12px 16px 0!important; gap:6px!important; }
  .sponsor-scroll-pin [data-mobile-sponsor-legend] li { gap:8px!important; }
  .sponsor-scroll-pin [data-mobile-sponsor-legend] li > span:last-child { font-size:12px!important; line-height:1.35!important; }
  .sponsor-scroll-pin [data-mobile-sponsor-legend] li > span:first-child { width:20px!important; height:20px!important; font-size:10px!important; }
  .sponsor-scroll-progress { margin:12px 16px 0; font-size:10px; }
}