@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,500;0,700;0,900;1,800;1,900&family=Chivo+Mono:wght@500;700&display=swap');
:root{--ink:#071626;--ink2:#0a2238;--cyan:#27d3f2;--paper:#edf4fa;--muted:#91a7b9;--line:rgba(145,167,185,.22);--green:#42d98b;--red:#ff6378;--mono:'Chivo Mono',monospace;--display:'Archivo',system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--display);overflow-x:clip}a{color:inherit;text-decoration:none}.site-header{height:82px;max-width:1240px;margin:auto;padding:0 28px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:40px;position:relative;z-index:5}.wordmark{display:flex;align-items:baseline;font-style:italic;letter-spacing:-1px;white-space:nowrap}.wordmark strong{font-size:22px;font-weight:900}.wordmark span{font-size:22px;color:var(--cyan);font-weight:900;margin-left:4px}.site-header nav{display:flex;gap:28px;margin-left:auto}.site-header nav a{font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#abc0d1}.site-header nav a:hover{color:var(--paper)}.header-cta{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:11px 17px;border:1px solid var(--cyan);border-radius:999px;color:var(--cyan)}
.hero{max-width:1240px;min-height:690px;margin:auto;padding:76px 28px 70px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:72px;position:relative}.hero:before{content:'';position:absolute;width:700px;height:700px;border-radius:50%;right:-300px;top:-250px;background:var(--cyan);filter:blur(160px);opacity:.08;pointer-events:none}.eyebrow,.section-heading>span,.bridge-kicker{font:700 11px var(--mono);letter-spacing:.18em;color:var(--cyan);text-transform:uppercase}.live-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 12px var(--green);margin-right:9px}.hero h1{font-size:clamp(56px,7vw,96px);line-height:.88;letter-spacing:-.065em;font-weight:900;font-style:italic;margin:25px 0 28px;max-width:760px}.hero h1 em{font-style:italic;color:var(--cyan)}.hero-copy>p{font-size:18px;line-height:1.65;color:#a9bdcc;max-width:610px}.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:52px;padding:0 24px;border-radius:8px;font:800 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:.2s transform,.2s background}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--cyan);color:var(--ink)}.button-secondary{border:1px solid var(--line);background:rgba(255,255,255,.035)}.hero-proof{display:flex;gap:28px;margin-top:35px;color:#7f98aa;font:500 11px var(--mono);text-transform:uppercase}.hero-proof b{color:var(--paper);font-size:15px;margin-right:4px}
.season-card{position:relative;padding:25px;border:1px solid rgba(39,211,242,.34);border-radius:20px;background:linear-gradient(160deg,rgba(18,58,85,.8),rgba(4,18,31,.95));box-shadow:0 30px 80px rgba(0,0,0,.35);transform:rotate(1deg)}.season-card:before{content:'';position:absolute;inset:8px;border:1px solid rgba(255,255,255,.05);border-radius:14px;pointer-events:none}.card-top,.card-foot{display:flex;justify-content:space-between;align-items:center;font:700 10px var(--mono);letter-spacing:.14em;color:#85a2b6}.grade{font-size:24px;color:var(--cyan)}.record{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding:28px 0 18px}.record strong{font-size:64px;line-height:.8;letter-spacing:-.06em}.record span{font:700 10px var(--mono);color:var(--green);letter-spacing:.09em}.results{display:flex;gap:5px;padding:17px 0}.results i{height:7px;flex:1;border-radius:3px}.win{background:var(--green)}.loss{background:var(--red)}.roster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.roster-grid span{height:72px;border:1px solid var(--line);border-radius:9px;padding:11px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.025)}.roster-grid small{font:700 10px var(--mono);color:var(--cyan)}.roster-grid b{font-size:24px}.card-foot{margin-top:18px}.card-foot b{font-size:18px;color:var(--paper)}
.daily-banner{max-width:1184px;margin:0 auto 110px;padding:34px 38px;background:var(--cyan);color:var(--ink);border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:0 16px 55px rgba(39,211,242,.12)}.daily-number{font:700 10px var(--mono);letter-spacing:.14em}.daily-banner h2{margin:8px 0 5px;font-size:28px;font-style:italic}.daily-banner p{margin:0;opacity:.72}.button-light{background:var(--paper);white-space:nowrap}
.device-summary{max-width:1184px;margin:-55px auto 110px;padding:34px 38px;border:1px solid rgba(39,211,242,.3);border-radius:16px;background:linear-gradient(145deg,rgba(39,211,242,.08),rgba(4,18,31,.95))}.device-summary[hidden]{display:none}.device-summary-head{display:flex;justify-content:space-between;gap:25px;align-items:flex-start}.device-summary-head span{font:700 10px var(--mono);letter-spacing:.14em;color:var(--cyan)}.device-summary-head h2{font-size:34px;font-style:italic;margin:8px 0 3px}.device-summary-head p{color:var(--muted);margin:0}.device-streak{border:1px solid rgba(231,185,60,.5);color:#e7b93c;border-radius:999px;padding:10px 13px;font:700 10px var(--mono);white-space:nowrap}.device-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0 18px}.device-stats>div{border:1px solid var(--line);border-radius:10px;padding:16px;background:rgba(255,255,255,.025)}.device-stats b{display:block;font-size:28px}.device-stats span{font:700 9px var(--mono);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}.device-history{margin-bottom:22px}.device-history>div{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:13px 0}.device-history b{font-size:14px}.device-history small{display:block;color:var(--muted);font:500 9px var(--mono);margin-top:4px}.device-history strong{font:700 15px var(--mono);color:var(--cyan)}
.products{max-width:1184px;margin:0 auto;padding:0 0 120px}.section-heading{max-width:620px;margin-bottom:45px}.section-heading h2{font-size:clamp(36px,5vw,62px);line-height:1;letter-spacing:-.045em;margin:14px 0}.product{min-height:390px;border:1px solid var(--line);display:grid;grid-template-columns:170px 1fr;margin-top:-1px;position:relative;overflow:hidden}.product:after{content:'';position:absolute;width:460px;height:460px;border:1px solid rgba(39,211,242,.12);border-radius:50%;right:-190px;top:-35px;box-shadow:0 0 0 70px rgba(39,211,242,.02),0 0 0 140px rgba(39,211,242,.015)}.product-index{font:700 12px var(--mono);color:#658096;padding:35px;border-right:1px solid var(--line)}.product-copy{padding:54px 65px;position:relative;z-index:1;max-width:760px}.tag{font:700 10px var(--mono);letter-spacing:.15em;color:var(--cyan)}.product h3{font-size:66px;letter-spacing:-.05em;font-style:italic;margin:7px 0 12px}.product p{font-size:17px;line-height:1.6;color:#9bb0c0}.product ul{display:flex;gap:20px;list-style:none;padding:0;margin:25px 0;color:#bacbd8;font:600 11px var(--mono);text-transform:uppercase}.product li:before{content:'+';color:var(--cyan);margin-right:6px}.product-copy>a{display:inline-block;margin-top:12px;color:var(--cyan);font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.06em}.product-draft{background:linear-gradient(120deg,rgba(39,211,242,.04),transparent)}
.bridge{text-align:center;max-width:920px;margin:0 auto 120px;padding:75px 35px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.bridge h2{font-size:clamp(42px,7vw,78px);font-style:italic;letter-spacing:-.05em;margin:13px 0}.bridge>p{font-size:18px;color:#a4b8c7;line-height:1.6;max-width:650px;margin:0 auto}.bridge-flow{display:flex;justify-content:center;align-items:center;gap:16px;margin:38px 0;font:700 10px var(--mono);letter-spacing:.05em;text-transform:uppercase}.bridge-flow span{padding:12px 14px;border:1px solid var(--line);border-radius:7px}.bridge-flow b{color:var(--cyan)}
footer{max-width:1184px;margin:auto;border-top:1px solid var(--line);padding:42px 0 55px;display:grid;grid-template-columns:1fr auto;gap:20px;color:#8299aa}footer p{font-size:13px;margin:0}footer>div{grid-column:2;grid-row:1/3;display:flex;gap:22px;align-items:center;font:700 10px var(--mono);text-transform:uppercase}footer>div a:hover{color:var(--cyan)}footer small{grid-column:1/-1;max-width:850px;font-size:10px;line-height:1.55;color:#5f7688}.wordmark-footer strong,.wordmark-footer span{font-size:17px}
.product-grid{background:linear-gradient(120deg,rgba(242,194,48,.05),transparent)}
.product-grid:after{border-color:rgba(242,194,48,.15);box-shadow:0 0 0 70px rgba(242,194,48,.022),0 0 0 140px rgba(242,194,48,.014)}
.product-gtp{background:linear-gradient(120deg,rgba(66,217,139,.055),transparent)}.product-gtp:after{border-color:rgba(66,217,139,.15);box-shadow:0 0 0 70px rgba(66,217,139,.025),0 0 0 140px rgba(66,217,139,.015)}
.legal-main{max-width:900px;margin:80px auto 120px;padding:0 28px}.legal-main h1{font-size:clamp(48px,7vw,80px);font-style:italic;letter-spacing:-.05em}.legal-main h2{font-size:24px;margin:42px 0 10px;color:var(--cyan)}.legal-main p,.legal-main li{color:#a9bdcc;line-height:1.7}.legal-main .notice{border-left:3px solid var(--cyan);background:rgba(39,211,242,.06);padding:22px 24px;margin:30px 0}.legal-main a{color:var(--cyan)}
@media(max-width:900px){.site-header{gap:16px}.site-header nav{display:none}.hero{grid-template-columns:1fr;padding-top:55px}.season-card{max-width:560px}.products,.daily-banner,.device-summary,footer{margin-left:20px;margin-right:20px}.product{grid-template-columns:70px 1fr}.product-copy{padding:42px 30px}.product-index{padding:28px 20px}.product h3{font-size:50px}.product ul{flex-direction:column;gap:9px}.daily-banner{flex-direction:column;align-items:flex-start}.device-summary{margin-top:-55px}footer{grid-template-columns:1fr}footer>div{grid-column:1;grid-row:auto;flex-wrap:wrap}}
@media(max-width:540px){.site-header{padding:0 18px}.wordmark strong,.wordmark span{font-size:17px}.header-cta{padding:9px 12px}.hero{padding:45px 18px 60px;gap:48px}.hero h1{font-size:50px}.hero-copy>p{font-size:16px}.hero-proof{gap:14px;flex-wrap:wrap}.record{align-items:flex-start;flex-direction:column;gap:12px}.record strong{font-size:52px}.season-card{padding:18px}.daily-banner,.device-summary{padding:27px 23px}.device-summary-head{display:block}.device-streak{display:inline-block;margin-top:15px}.device-stats{grid-template-columns:1fr}.product{grid-template-columns:1fr}.product-index{border-right:0;border-bottom:1px solid var(--line);padding:18px}.product-copy{padding:35px 22px}.product h3{font-size:42px}.bridge{margin-left:18px;margin-right:18px;padding:60px 10px}.bridge-flow{align-items:stretch;flex-direction:column}.bridge-flow b{transform:rotate(90deg)}footer{padding-left:0;padding-right:0}.button{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ============ SHARED FAN2FAN WALLPAPER ============
   The page background only, taken from the GTP page, so all four pages sit on
   one colour. Cards, buttons, text and the cyan accent are left as they were.
   The gradient is written out rather than pointing at --ink, because --ink is
   also used as a foreground colour elsewhere and must keep its value. */
html body{background:linear-gradient(145deg,#061624,#081d2f);background-attachment:fixed;min-height:100vh}

/* ============ SHARED FAN2FAN SURFACES ============
   The two raised cards on this page (the example season card and the device
   summary) were built from hardcoded navies, #123A55 and #04121F, rather than
   from tokens. Repointed at GTP's panel colour so the hub reads the same as
   the rest of the site. Buttons, the cyan accent and all text are untouched. */
.season-card{background:linear-gradient(160deg,#0c263b,#061624)}
.device-summary{background:linear-gradient(145deg,rgba(39,211,242,.08),#061624)}

/* ---- Manager Mode promo -------------------------------------------------
   Dark panel against the daily banner's cyan so the two never read as a pair,
   with a miniature of the actual squad formation instead of a screenshot -
   it stays sharp at any size and costs nothing to load. */
.promo{max-width:1184px;margin:0 auto 110px;padding:38px;border-radius:16px;
  display:grid;grid-template-columns:1.35fr 1fr;gap:38px;align-items:center;
  background:linear-gradient(150deg,#0d2f4a 0%,var(--ink) 62%);
  border:1px solid rgba(39,211,242,.26);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.promo-flag{display:inline-block;padding:5px 11px;border-radius:100px;
  background:var(--cyan);color:var(--ink);font:800 9px var(--mono);
  letter-spacing:.14em;text-transform:uppercase}
.promo h2{margin:15px 0 12px;font:900 clamp(30px,4.6vw,46px) var(--display);
  font-style:italic;letter-spacing:-.045em;line-height:.95;color:var(--paper)}
.promo p{margin:0;color:var(--muted);font-size:14px;line-height:1.65;max-width:52ch}
.promo-list{list-style:none;margin:18px 0 24px;padding:0;display:grid;gap:7px}
.promo-list li{position:relative;padding-left:19px;color:var(--paper);font-size:13px}
.promo-list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:2px;background:var(--cyan)}

/* The miniature pitch: same 5-column diamond the real squad screen lays out. */
.promo-pitch{display:grid;gap:9px;padding:20px 16px;border-radius:13px;
  background:linear-gradient(175deg,#0e3b28,#071f16);
  border:1px solid rgba(120,220,170,.2)}
.promo-row{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.promo-row i{aspect-ratio:.74;border-radius:5px}
.promo-row i.c{background:linear-gradient(160deg,#d9b878,#8a6a3a)}
.promo-row i.silver{background:linear-gradient(160deg,#ced8e2,#6d7a86)}
.promo-row i.gold{background:linear-gradient(160deg,#f0d68a,#9a7a24)}
.promo-row i.icon{background:linear-gradient(160deg,#ffb3e6,#a52a86)}
.promo-row i.bronze{background:linear-gradient(160deg,#d9b878,#8a6a3a)}

@media(max-width:900px){
  .promo{grid-template-columns:1fr;gap:26px;padding:28px 22px;margin-bottom:70px}
  .promo-pitch{max-width:320px;margin:0 auto;width:100%}
}

/* ---- legal page ---------------------------------------------------------
   A long document that has to be readable and navigable: a sticky-ish contents
   list, real tables for the odds and the data inventory, and bracketed fields
   that are impossible to skim past. */
.legal-updated{color:var(--muted);font:600 11px var(--mono);letter-spacing:.04em;margin:-8px 0 26px}
.legal-toc{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 34px;padding:16px;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.legal-toc a{padding:6px 11px;border-radius:100px;border:1px solid var(--line);
  color:var(--muted);font:700 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;transition:.16s}
.legal-toc a:hover,.legal-toc a:focus-visible{border-color:var(--cyan);color:var(--cyan)}
.legal-main h2{scroll-margin-top:90px;margin-top:44px}
.legal-main h3{margin:26px 0 10px;font:800 12px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan)}
.legal-main .hint{color:var(--muted);font-size:12.5px}
.legal-main code{font:700 11.5px var(--mono);color:var(--cyan);
  background:rgba(39,211,242,.1);padding:1px 5px;border-radius:4px}
/* Bracketed placeholders must not be skimmable - they are the fields that make the
   page legally valid, and shipping with them in place is the failure mode. */
.legal-main b{color:var(--paper)}
.notice-action{border-color:rgba(255,99,120,.5);background:rgba(255,99,120,.07)}
.notice-action strong{color:var(--red)}

.legal-facts{list-style:none;margin:16px 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.legal-facts li{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:12px 15px;
  background:var(--ink);font-size:13.5px}
.legal-facts span{color:var(--muted);font:700 9px var(--mono);letter-spacing:.09em;
  text-transform:uppercase;align-self:center}

.legal-table-wrap{overflow-x:auto;margin:14px 0 8px;border:1px solid var(--line);
  border-radius:11px}
.legal-table{width:100%;border-collapse:collapse;min-width:480px;font-size:13px}
.legal-table th{text-align:left;padding:11px 14px;background:rgba(255,255,255,.035);
  color:var(--muted);font:700 9px var(--mono);letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap}
.legal-table td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top;
  color:var(--paper);line-height:1.5}
.legal-table td:first-child{font-weight:800;white-space:nowrap}
.legal-table tbody tr:hover td{background:rgba(39,211,242,.04)}

@media(max-width:540px){
  .legal-facts li{grid-template-columns:1fr;gap:3px}
  .legal-toc{gap:5px;padding:13px}
}