/* Shared phone layout corrections. Desktop layout remains unchanged. */
@media(max-width:650px){
 html body{margin:0!important;padding:0!important;min-width:0}
 html body main{box-sizing:border-box;width:100%;max-width:100%;min-width:0;padding:10px 12px 24px!important;margin:0 auto!important}
 html body main *,html body .simpleBrandHeader *{box-sizing:border-box}
 html body main :is(article,section,fieldset,.picktop,.chartCard,.aboutCard,.reportSummaryGrid,.reportSummaryGrid>div,.contactCard,.currentScorecard,.metric){min-width:0;max-width:100%}
 html body main :is(h1,h2,h3,h4,p,li,dt,dd,label,strong,address){overflow-wrap:break-word}
 html body main :is(img,video,iframe){max-width:100%}
 html body main :is(input,select,textarea){min-width:0;max-width:100%;font-size:16px}

 /* Consistent banner with one logo, readable brand, and five radar circles. */
 html body header.simpleBrandHeader{display:grid!important;grid-template-columns:76px minmax(0,1fr)!important;gap:6px!important;padding:8px!important;width:100%;max-width:100%}
 html body header.simpleBrandHeader .singleBannerLogo{left:0!important;grid-column:1;grid-row:2!important;min-height:90px;align-self:center}
 html body header.simpleBrandHeader .singleBannerLogo .headerImage{position:static!important;width:76px!important;height:90px!important;max-height:90px!important}
 html body header.simpleBrandHeader .headerTitle{grid-column:2;grid-row:2!important;min-width:0;gap:5px;margin:0}
 html body header.simpleBrandHeader .headerTitle strong{font-size:clamp(19px,4.8vw,25px)!important;line-height:1.15}
 html body header.simpleBrandHeader .headerTitle strong>.captainNameGold{font-size:clamp(29px,7.3vw,38px)!important;line-height:1.05;overflow-wrap:normal}
 html body header.simpleBrandHeader .headerTitle>span{font-size:14px!important;line-height:1.25}
 html body header.simpleBrandHeader>.headerDomain{font-size:clamp(13px,3.65vw,18px)!important;letter-spacing:0!important;line-height:1.3!important;white-space:normal!important}
 html body header.simpleBrandHeader .headerDomain .domainAddressText{white-space:normal!important;overflow-wrap:anywhere}
 html body header.simpleBrandHeader .bannerSports{grid-template-columns:repeat(5,minmax(0,1fr)) 44px!important;gap:4px!important;width:100%!important;max-width:100%;margin:4px 0 0}
 html body header.simpleBrandHeader .bannerSportLabel{font-size:12px;min-height:44px;height:44px;margin-bottom:3px}
 html body header.simpleBrandHeader .bannerWinRate{font-size:clamp(12px,3.3vw,14px);padding:2px 1px}
 html body header.simpleBrandHeader .sparklesSoundBar{width:44px!important;height:44px!important;margin:0 0 2px!important}
 html body header.simpleBrandHeader .sparklesSoundToggle{width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;padding:6px!important}
 html body header.simpleBrandHeader .sparklesSoundToggle svg{width:28px;height:28px}

 /* Controls occupy their own row; page title and date flow beneath them. */
 html body main>.sitePageTop{display:grid!important;grid-template-columns:112px minmax(0,1fr)!important;grid-template-rows:auto auto!important;align-items:center;gap:8px 12px!important;position:relative!important;min-height:0!important;height:auto!important;margin:0 0 12px!important;padding:0!important;overflow:visible!important}
 html body main>.sitePageTop:has(#moneySongButton){min-height:0!important;grid-template-columns:112px minmax(0,1fr)!important;padding-right:0!important;margin-bottom:12px!important}
 html body main>.sitePageTop #moneySongButton{grid-column:1!important;grid-row:1!important;position:static!important;transform:none!important;justify-self:start;align-self:center!important;margin:0!important;width:112px!important;height:90px!important;max-width:112px!important;font-size:14px!important}
 html body main>.sitePageTop .siteNavigation{grid-column:2!important;grid-row:1!important;position:static!important;transform:none!important;left:auto!important;right:auto!important;top:auto!important;justify-self:end;align-self:center;width:min(148px,100%)!important;max-width:100%;min-width:0;margin:0!important;padding:0!important;border:0!important;gap:6px!important;background:transparent!important}
 html body main>.sitePageTop .siteNavigation .siteMainMenuButton{width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:44px!important;padding:8px!important;font-size:16px!important;line-height:1.25}
 html body main>.sitePageTop>.siteMainMenuButton{grid-column:2;grid-row:1;justify-self:end;min-height:44px!important}
 html body main>.sitePageTop .sitePageTitle{grid-column:1/-1!important;grid-row:2!important;position:static!important;transform:none!important;left:auto!important;top:auto!important;bottom:auto!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;font-size:clamp(26px,7vw,32px)!important;line-height:1.2!important;text-align:center!important;overflow-wrap:break-word}
 html body main>.sitePageTop .pickPageDate{font-size:16px!important;line-height:1.3;margin-top:4px}

 /* Two comfortable menu buttons per phone row, with an intentional wide third. */
 html body main .mainMenuLinks{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin:8px 0!important;width:100%;max-width:100%}
 html body main .mainMenuLinks :is(.menuInfoRow,.menuProofRow,.menuLatestRow,.menuAllRow,.menuHistoryPair,.menuReportsRow,.menuLiveRow){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;width:100%;min-width:0}
 html body main .mainMenuLinks :is(.menuInfoRow,.menuProofRow)>a:last-child:nth-child(odd){grid-column:1/-1!important}
 html body main .mainMenuLinks .menuLiveRow .menuScoreboard{grid-column:1/-1!important;grid-row:1!important}
 html body main .mainMenuLinks .menuLiveRow .menuPickResult{grid-row:2!important}
 html body main .mainMenuLinks a{min-width:0;max-width:100%;font-size:18px!important;line-height:1.25!important;min-height:68px;padding:10px 8px!important;white-space:normal;overflow-wrap:break-word}
 html body main .mainMenuLinks .menuActionLabel{font-size:20px!important;line-height:1.2!important}
 html body main .mainMenuLinks .menuCaptainLabel{font-size:20px!important;line-height:1.2!important}
 html body main .mainMenuLinks .menuCardDate{font-size:14px!important;line-height:1.3!important}
 html body main .mainMenuLinks .performanceButtonLabel>span{white-space:normal!important}
 html body main .mainMenuLinks .menuProofHonest .proofButtonTruth{white-space:normal!important}
 html body main .mainMenuLinks .menuCurrentWin .menuWinCaptain{font-size:30px!important}
 html body main .mainMenuLinks .freeNoCard{font-size:12px!important}

 /* Narrative pages stay generous without turning every paragraph into a heading. */
 html body #about :is(.aboutHero>.eyebrow,.aboutCard>.eyebrow){font-size:30px!important;line-height:1.2!important;margin:12px 0!important;overflow-wrap:normal}
 html body #about :is(.aboutHero>p:not(.eyebrow),.aboutCard>p:not(.eyebrow)){font-size:20px!important;line-height:1.5!important;overflow-wrap:break-word}
 html body #about .aboutgrid,html body #howradar :is(.schemaInputs,.schemaDecision){grid-template-columns:minmax(0,1fr)!important;gap:12px}
 html body #howradar .radarBrandTitle{font-size:30px!important;line-height:1.2!important}
 html body #howradar :is(.schemaInputs p,.schemaDecision p,.schemaFoot,.schemaFeedback,.schemaIntro){font-size:20px!important;line-height:1.5!important}
 html body #howradar :is(.schemaInputs b,.schemaDecision b){font-size:20px!important;line-height:1.3!important}
 html body #howradar .schemaInputs h3{font-size:26px!important;line-height:1.25!important}
 html body main .pickSchema{padding:14px;margin:10px 0}
 html body main .schemaInputs{grid-template-columns:minmax(0,1fr)!important}
 html body main .schemaDecision{grid-template-columns:minmax(0,1fr)!important}
 html body main .schemaInputs article{min-width:0;margin:0}

 /* History/results, charts, reports, contact, and registration. */
 html body main .controls{display:flex;flex-direction:column;gap:6px;align-items:stretch}
 html body main .controls label{display:flex;flex-wrap:wrap;gap:6px;margin:0}
 html body main .controls :is(input,select){flex:1;min-width:0;width:100%}
 html body main .pickmeta{overflow-wrap:anywhere;line-height:1.5}
 html body main .picktop{min-width:0;gap:6px}
 html body main .pickMatchup{gap:8px}
 html body main .pickMatchup .teamNameLogo{width:40px!important;height:40px!important}
 html body main .picktop h3{font-size:24px!important;line-height:1.25!important}
 html body main :is(.currentScorecardGrid,.reportSummaryGrid){grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 html body main .currentScorecardMetric[data-score="profit"]{grid-column:auto}
 html body main .currentScorecardMetric strong{font-size:24px;line-height:1.2}
 html body main :is(.chartCard,.currentScorecard,.contactCard,#reportSummary,#reportFileOptions){padding:12px!important}
 html body main .chartsGrid,html body main .reportgrid{grid-template-columns:minmax(0,1fr)!important}
 html body main .chartViewport{min-width:0;max-width:100%;overflow-x:auto}
 html body main .tablewrap{width:100%;min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 html body main .planForm :is(.planChoices,.registrationFields,.pricePlans){grid-template-columns:minmax(0,1fr)!important}
 html body main .planForm .sportChoices{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px}
 html body main .planForm .pricePlan{display:flex;padding:12px;gap:10px}
 html body main .planForm .pricePlan input{float:none;flex:none}
 html body main .planForm .pricePlan strong small{display:inline}
 html body main .planHero>strong{position:static;display:block}
 html body main #freeplan .planHero h2{padding-right:0}
 html body main :is(.proofActions,.playPageOptions){gap:8px;max-width:100%}
 html body main :is(.proofActions,.playPageOptions) .button{font-size:16px;line-height:1.3;padding:10px}
 html body main .contactCard{margin:10px 0}
 html body main :is(a[href^="mailto:"],a[href^="tel:"]){overflow-wrap:anywhere;max-width:100%}
 html body #moneySongDialog{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;padding:12px!important}
 html body .moneyVideoControls{gap:8px}
 html body #moneyVideoStatus{font-size:14px;line-height:1.4}
 html body #liveGames .liveGameCard .liveMatchup{font-size:14px!important}
}
@media(max-width:350px){
 html body header.simpleBrandHeader{grid-template-columns:64px minmax(0,1fr)!important}
 html body header.simpleBrandHeader .singleBannerLogo .headerImage{width:64px!important}
 html body main .mainMenuLinks a{font-size:16px!important}
 html body main .mainMenuLinks .menuCaptainLabel,html body main .mainMenuLinks .menuActionLabel{font-size:18px!important}
 html body main .planForm .sportChoices{grid-template-columns:minmax(0,1fr)!important}
}

/* The video now lives in the header, leaving the page controls one column. */
@media(max-width:650px){
 html body main>.sitePageTop{grid-template-columns:minmax(0,1fr)!important}
 html body main>.sitePageTop .siteNavigation,html body main>.sitePageTop>.siteMainMenuButton{grid-column:1!important}
 html body main .picktop .pickSelection{font-size:20px!important;line-height:1.2!important}
}