/* Keep transformed hero decorations from widening the document. */
.hero-viewport{overflow-x:clip}
.hero-viewport .hero{overflow:visible}

/* The hero cards share one compact visual treatment. */
.hero .floating-card{display:flex;align-items:center;gap:12px;width:274px;padding:16px;border-radius:15px;transform:none;animation:none;background:linear-gradient(135deg,rgba(31,47,37,.96),rgba(16,29,21,.96));border:1px solid #94c3a526;box-shadow:0 15px 45px #0004,inset 0 1px #ffffff08;text-align:left}
.hero .floating-card>div{display:block;min-width:0}
.hero .floating-card .mini-icon{width:36px;height:36px;flex-shrink:0;border-radius:50%;color:#d7f9e5;background:#22563866;box-shadow:inset 0 0 0 1px #a7ebc416}
.hero .floating-card .mini-icon svg{width:23px;height:23px}
.hero .floating-card.league-card .mini-icon svg{width:18px;height:18px}
.hero .floating-card .card-overline{font-size:.75rem;line-height:1.3;letter-spacing:.045em;color:#9fb7a8;font-weight:500;margin:0 0 5px}
.hero .floating-card strong{display:block;font-size:.875rem;line-height:1.35;letter-spacing:-.015em;font-weight:600;color:#edf5ef}
.hero .points-card{left:-18px;top:101px}
.hero .league-card{right:-4px;bottom:112px}

/* About 15% larger, while retaining each official badge's aspect ratio. */
.store-link img{height:56px;width:auto}

/* Two useful product views, with short copy and shared geometry. */
.product-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:45px}
.product-feature{min-width:0;display:flex;flex-direction:column}
.product-feature-copy{padding:0 0 25px;min-height:132px;flex-shrink:0}
.product-feature-copy h3{font-size:1.5rem;line-height:1.25;font-weight:650;letter-spacing:-.035em}
.product-feature-copy p{font-size:1rem;line-height:1.65;color:#96a69b;margin-top:12px;max-width:450px}
.product-feature figure{display:flex;flex-direction:column;flex:1;margin:0;overflow:hidden;border:1px solid #b8dcc015;border-radius:19px;background:#101a13;min-height:470px;box-shadow:0 12px 45px #0002}
.graphic-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 23px;border-bottom:1px solid #b8dcc00c;font-size:.875rem}
.graphic-header strong{font-weight:550;letter-spacing:-.01em;color:#e0ebe3}
.graphic-header>span{font-size:.75rem;color:#80998a}
.lineup-field{flex:1;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:361px;padding:19px 18px 15px;background:radial-gradient(ellipse at 50% 12%,#285a3b50,transparent 80%),linear-gradient(180deg,#152e1e,#12271b)}
.lineup-field-lines{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);z-index:-1;color:#a2cfb3;opacity:.13}
.lineup-line{display:flex;justify-content:space-evenly;align-items:flex-start;gap:9px;position:relative}
.lineup-person{text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 1 150px}
.lineup-person>strong{font-family:var(--body);font-size:.875rem;line-height:1.3;letter-spacing:-.01em;font-weight:550;max-width:100%;color:#e3f0e7;white-space:nowrap}
.lineup-position{font-size:.75rem;line-height:1.2;font-weight:500;color:#83a990;letter-spacing:.04em}
.lineup-score{font-family:var(--heading);font-size:.9375rem;line-height:1.15;font-weight:600;color:#a3eac0;letter-spacing:-.025em}
.lineup-score small{font-family:var(--body);font-size:.75rem;font-weight:400;letter-spacing:0;color:#87ae97}
.lineup-defence{flex-basis:190px}
.graphic-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:47px;padding:12px 19px;font-size:.75rem;color:#8ea998}
.graphic-footer>span:last-child{color:#6d8b77}
.match-graphic{padding-bottom:11px}
.match-result{display:flex;justify-content:center;align-items:center;gap:21px;padding:31px 22px 25px}
.result-team{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
.result-team>span{font-size:.875rem;color:#bbcec1;line-height:1.4;text-align:center}
.result-team>strong{font-family:var(--heading);font-size:3.75rem;letter-spacing:-.075em;font-weight:650;line-height:1.05;margin-top:10px;color:#d2ddd5}
.result-team-mine>strong{color:#7be5ab}
.result-team>small{font-size:.75rem;color:#738f7d;margin-top:8px}
.result-divider{font-family:var(--heading);font-size:1.75rem;font-weight:400;color:#496a55;margin-top:11px}
.result-outcome{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 23px;padding:12px 0 16px;border-bottom:1px solid #97c2a419;font-size:.8125rem;color:#aac8b4}
.result-outcome strong{font-size:.8125rem;font-weight:550;color:#7be5ab}
.result-players{padding:16px 23px 0}
.result-players-heading{display:flex;justify-content:space-between;gap:10px;font-size:.75rem;color:#7b9887;padding-bottom:8px}
.result-player{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #ffffff07}
.result-player:last-child{border:0}
.result-position{display:grid;place-items:center;flex-shrink:0;min-width:31px;height:27px;padding:0 4px;border-radius:5px;background:#213c2a;color:#a9d0b6;font-size:.75rem;font-weight:500}
.result-player>div{flex:1;min-width:0}
.result-player>div>strong{display:block;font-size:.875rem;font-weight:500;letter-spacing:-.01em;color:#d3e3d8}
.result-player>div>span{display:block;font-size:.75rem;color:#779581;margin-top:1px}
.result-points{font-family:var(--heading);font-size:1.15rem;font-weight:600;letter-spacing:-.035em;color:#bad7c4}
.product-example-note{font-size:.75rem;color:#6d8375;text-align:right;margin-top:11px}
.product-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:45px;border-top:1px solid #a2c7ad1a;margin-top:34px;padding-top:30px}
.product-facts>div{display:flex;align-items:flex-start;gap:22px;min-width:0}
.fact-value{font-family:var(--heading);font-size:1.65rem;line-height:1.25;letter-spacing:-.05em;font-weight:600;color:#91cba5;flex:0 0 46px}
.fact-free{font-size:1rem;line-height:1.55;letter-spacing:-.02em;flex-basis:81px}
.product-facts h3{font-size:1.0625rem;line-height:1.4;letter-spacing:-.025em;font-weight:600;color:#d9e5dc}
.product-facts p{font-size:1rem;line-height:1.65;color:#8fa294;margin-top:8px;max-width:390px}

@media(max-width:1150px){.hero .points-card{left:-12px;top:86px}.hero .league-card{right:-6px;bottom:100px}.hero .floating-card{width:260px;padding:14px;gap:10px}.hero .floating-card .mini-icon{width:34px;height:34px}.hero .floating-card .card-overline{font-size:.75rem;letter-spacing:.02em}.product-features{gap:23px}.product-feature-copy{min-height:150px}.lineup-person>strong{font-size:.8125rem}.graphic-footer{justify-content:center}.graphic-footer>span:last-child{display:none}.result-team>strong{font-size:3.4rem}.result-team>span{font-size:.8125rem}.match-result{gap:13px;padding-inline:17px}.product-facts{gap:30px}.product-facts>div{gap:16px}}
@media(max-width:820px){.hero .floating-card{width:270px}.hero .points-card{left:7px;top:89px}.hero .league-card{right:7px;bottom:88px}.product-features{grid-template-columns:1fr;gap:39px;max-width:590px;margin:33px auto 0}.product-feature-copy{min-height:0;padding-bottom:21px}.product-feature-copy h3{font-size:1.5rem}.product-feature-copy p{max-width:100%}.lineup-person>strong{font-size:.875rem}.product-feature figure{min-height:0}.lineup-field{min-height:367px}.graphic-footer{justify-content:space-between}.graphic-footer>span:last-child{display:block}.result-team>strong{font-size:3.8rem}.result-team>span{font-size:.9375rem}.match-result{padding:29px 24px 23px}.result-outcome{font-size:.875rem}.result-outcome strong{font-size:.875rem}.result-player{padding-block:13px}.result-player>div>strong{font-size:.9375rem}.result-points{font-size:1.2rem}.product-example-note{max-width:590px;margin:12px auto 0}.product-facts{gap:28px;margin-top:30px}.product-facts>div{display:block}.fact-value{display:block;margin-bottom:12px}.fact-free{font-size:1.25rem;line-height:1.65}.product-facts p{font-size:1rem}}
@media(max-width:520px){.store-link img{height:50px}.hero-stores,.download-section .store-buttons{gap:10px}.hero .floating-card{width:248px;padding:12px;gap:10px;border-radius:13px}.hero .floating-card .mini-icon{width:32px;height:32px}.hero .floating-card .mini-icon svg{width:21px;height:21px}.hero .floating-card .card-overline{font-size:.75rem;letter-spacing:0;margin-bottom:4px}.hero .floating-card strong{font-size:.8125rem}.hero .points-card{left:12px;top:82px}.hero .league-card{right:12px;bottom:88px}.features-section .section-heading h2{font-size:2rem}.features-section .section-heading h2 span{display:block}.product-features{margin-top:29px;gap:32px}.product-feature-copy h3{font-size:1.35rem}.product-feature-copy p{font-size:1rem;line-height:1.6;margin-top:10px}.product-feature-copy{padding-bottom:18px}.product-feature figure{border-radius:15px}.graphic-header{padding:17px 16px}.graphic-header strong{font-size:.875rem}.graphic-header>span{font-size:.75rem}.lineup-field{min-height:346px;padding:18px 9px 14px;gap:16px}.lineup-line{gap:6px}.lineup-person>strong{font-size:.75rem;letter-spacing:-.01em}.lineup-position{font-size:.75rem}.lineup-person{gap:4px;flex-basis:132px}.lineup-defence{flex-basis:185px}.lineup-score{font-size:.875rem}.graphic-footer{padding:12px 15px;justify-content:center}.graphic-footer>span:last-child{display:none}.match-result{gap:8px;padding:25px 12px 22px}.result-team>span{font-size:.8125rem}.result-team>strong{font-size:3.35rem}.result-divider{font-size:1.4rem}.result-outcome{margin-inline:16px;font-size:.8125rem;gap:8px}.result-outcome strong{font-size:.8125rem;white-space:nowrap}.result-players{padding:15px 16px 0}.result-player{gap:9px;padding:12px 0}.result-player>div>strong{font-size:.875rem}.result-player>div>span{font-size:.75rem}.result-points{font-size:1.1rem}.product-example-note{text-align:left;line-height:1.5}.product-facts{grid-template-columns:1fr;gap:25px;margin-top:26px;padding-top:25px}.product-facts>div{display:flex;gap:18px}.fact-value{flex:0 0 43px;margin:0;font-size:1.45rem;line-height:1.3}.fact-free{font-size:.875rem;line-height:1.65;flex-basis:78px}.product-facts h3{font-size:1rem}.product-facts p{font-size:.9375rem;margin-top:7px}}
@media(max-width:374px){.store-link img{height:48px}}
@media(max-width:359px){.store-link img{height:45px}.hero-stores,.download-section .store-buttons{gap:8px}.hero .floating-card{width:240px;padding:11px}.hero .floating-card strong{font-size:.8125rem}.hero .points-card{left:8px}.hero .league-card{right:8px}.lineup-person>strong{letter-spacing:-.025em}.result-team>strong{font-size:3rem}.result-team>span{font-size:.75rem}.result-outcome{flex-wrap:wrap}.result-player>div>strong{font-size:.8125rem}}
@media(max-width:339px){.store-link img{height:43px}.hero-stores,.download-section .store-buttons{gap:6px}.hero .floating-card{width:234px;gap:8px}.hero .floating-card .mini-icon{width:30px;height:30px}.lineup-field{padding-inline:5px}.lineup-line{gap:4px}.result-players{padding-inline:12px}.result-outcome{margin-inline:12px}}

/* Give the friends card its own stacked rhythm within the shared card style. */
.hero .floating-card.league-card{display:block;width:238px}
.hero .league-card .league-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:3px}
.hero .league-card .card-overline{margin:0}
.hero .league-card .mini-icon{width:34px;height:34px}
.rivalry-bars{display:flex;align-items:center;gap:5px;margin-top:13px}
.rivalry-bars>span{display:block;height:3px;width:36px;border-radius:2px;background:#74d5a1}
.rivalry-bars>span:nth-child(2){width:26px;background:#4e8264}
.rivalry-bars>span:nth-child(3){width:18px;background:#35513f}
@media(max-width:520px){.hero .floating-card.league-card{width:224px}.hero .league-card .mini-icon{width:29px;height:29px}.rivalry-bars{margin-top:11px}.rivalry-bars>span{width:30px}.rivalry-bars>span:nth-child(2){width:22px}.rivalry-bars>span:nth-child(3){width:15px}}
@media(max-width:359px){.hero .floating-card.league-card{width:218px}}
@media(max-width:339px){.hero .floating-card.league-card{width:214px}}