/*! * Bootstrap Grid only, based on Bootstrap v3.3.7 (http://getbootstrap.com) */
body{
    margin:0
}
*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
:after,:before{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
img{
    vertical-align:middle
}
.container{
    padding-right:8px;
    padding-left:8px;
    margin-right:auto;
    margin-left:auto
}
@media (min-width:768px){
    .container{
        width:752px
    }
}
@media (min-width:1024px){
    .container{
        width:978px
    }
}
@media (min-width:1280px){
    .container{
        width:1224px
    }
}
.container:after,.container:before{
    display:table;
    content:" "
}
.container:after{
    clear:both
}
.center-block{
    display:block;
    margin-right:auto;
    margin-left:auto
}
.show{
    display:block!important
}
.hidden{
    display:none!important
}
@-ms-viewport{
    width:device-width
}
.visible-md,.visible-sm,.visible-xs{
    display:none!important
}
.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block{
    display:none!important
}
@media (max-width:767px){
    .visible-xs{
        display:block!important
    }
    table.visible-xs{
        display:table!important
    }
    tr.visible-xs{
        display:table-row!important
    }
    td.visible-xs{
        display:table-cell!important
    }
}
@media (max-width:767px){
    .visible-xs-block{
        display:block!important
    }
}
@media (max-width:767px){
    .visible-xs-inline{
        display:inline!important
    }
}
@media (max-width:767px){
    .visible-xs-inline-block{
        display:inline-block!important
    }
}
@media (min-width:768px) and (max-width:1023px){
    .visible-sm{
        display:block!important
    }
    table.visible-sm{
        display:table!important
    }
    tr.visible-sm{
        display:table-row!important
    }
    td.visible-sm{
        display:table-cell!important
    }
}
@media (min-width:768px) and (max-width:1023px){
    .visible-sm-block{
        display:block!important
    }
}
@media (min-width:768px) and (max-width:1023px){
    .visible-sm-inline{
        display:inline!important
    }
}
@media (min-width:768px) and (max-width:1023px){
    .visible-sm-inline-block{
        display:inline-block!important
    }
}
@media (min-width:1024px) and (max-width:1279px){
    .visible-md{
        display:block!important
    }
    table.visible-md{
        display:table!important
    }
    tr.visible-md{
        display:table-row!important
    }
    td.visible-md{
        display:table-cell!important
    }
}
@media (min-width:1024px) and (max-width:1279px){
    .visible-md-block{
        display:block!important
    }
}
@media (min-width:1024px) and (max-width:1279px){
    .visible-md-inline{
        display:inline!important
    }
}
@media (min-width:1024px) and (max-width:1279px){
    .visible-md-inline-block{
        display:inline-block!important
    }
}
@media (max-width:767px){
    .hidden-xs{
        display:none!important
    }
}
@media (min-width:768px) and (max-width:1023px){
    .hidden-sm{
        display:none!important
    }
}
@media (min-width:1024px) and (max-width:1279px){
    .hidden-md{
        display:none!important
    }
}
@media (max-width:767px){
    .container{
        margin-right:auto;
        margin-left:auto;
        padding-left:16px;
        padding-right:16px
    }
}
/* Self-hosted brand fonts (was external Akamai CDN; legacy eot/ttf/svg/woff and
   unused -cond variants removed). woff2 only + system fallback + font-display:swap. */
@font-face{
    font-family:endzone-bold;
    src:url(../fonts/bold.woff2) format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap
}
@font-face{
    font-family:endzone-light;
    src:url(../fonts/light.woff2) format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap
}
@font-face{
    font-family:endzone-medium;
    src:url(../fonts/medium.woff2) format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap
}
body{
    font-family:endzone-light,'Helvetica Neue',Arial,sans-serif;
    font-size:14px;
    color:#333;
    position:relative;
    background-color:#eee
}
body,h1,h2,h3,h4,h5,h6,p,ul{
    margin:0
}
h1,h2,h3,h4,h5,h6{
    font-weight:400
}
ul{
    padding-left:0;
    list-style-type:none
}
img{
    border:0
}
a{
    cursor:pointer;
    text-decoration:none
}
.clear:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0
}
.clear{
    zoom:1
}
.btn{
    font-family:endzone-medium;
    text-align:center;
    color:#fff;
    min-width:200px;
    padding:0 15px;
    height:40px;
    line-height:40px;
    background:#1b48e0;
    display:inline-block;
    box-sizing:border-box
}
.hamburger{
    position:relative;
    float:right;
    z-index:10002;
    cursor:pointer
}
.shadow{
    box-shadow:0 2px 4px rgba(0,0,0,.4);
    position:absolute;
    width:100%;
    height:0;
    top:60px;
    left:0;
    background:#013369;
    z-index:3;
    transition:all .2s
}
header{
    position:relative;
    width:100%;
    height:64px;
    line-height:64px;
    background-color:#013369;
    color:#eee;
    font-family:endzone-medium
}
header .logo{
    display:inline-block;
    width:164px;
    height:64px
}
header .logo img{
    display:inline-block
}
.header-right{
    float:right;
    width:calc(100% - 176px)
}
.header-right .menu .item{
    display:inline-block;
    padding:0
}
.header-right .menu a{
    color:#eee;
    padding:0 10px;
    line-height:24px;
    display:inline-block
}
.header-right a:hover{
    color:#fff
}
.header-right-mobile{
    float:right;
    height:64px;
    overflow:hidden
}
.header-right-mobile span.text{
    display:inline-block;
    margin-right:16px;
    font-family:endzone-bold
}
.header-right-mobile a.text{
    color:inherit;
    display:inline-block
}
.header-right .signin{
    float:right
}
.header-right .signin .text{
    color:inherit;
    font-size:14px;
    line-height:24px;
    display:inline-block
}
.overlay{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    opacity:0;
    background:rgba(0,0,0,.6);
    transition:opacity .4s ease-in-out;
    z-index:-2
}
.overlay.visible{
    z-index:10002
}
.dropdown-container{
    display:none;
    position:absolute;
    left:0;
    top:64px;
    width:100%;
    height:0;
    background-color:#013369;
    z-index:10002;
    overflow:hidden
}
.dropdown-wrap{
    position:relative
}
.drop-shadow{
    z-index:10003
}
.dropdown-btn{
    background-image:url(https://neulionms-a.akamaihd.net/nfl/gamepass/v2/nflgp/site_4/images/ic_more_eee.svg);
    background-position:center center;
    background-repeat:no-repeat;
    width:46px
}
.dropdown-btn.up{
    background-image:url(https://neulionms-a.akamaihd.net/nfl/gamepass/v2/nflgp/site_4/images/ic_aarow_more_eee.svg)
}
.dropdown-container .item{
    opacity:0;
    -webkit-transition:opcity .3s;
    -moz-transition:opcity .3s;
    -ms-transition:opcity .3s;
    -o-transition:opcity .3s;
    transition:opcity .3s .2s
}
@media (max-width:1279px){
    .drop-shadow,.dropdown-container{
        top:450px;
        overflow:inherit
    }
    header .dropdown-container .header-right{
        left:0
    }
}
@media (max-width:767px){
    .drop-shadow,.dropdown-container{
        top:402px;
        overflow:inherit
    }
    header .dropdown-container .header-right{
        left:0
    }
}
footer{
    background:#151515;
    border-top:1px solid #ccc
}
.footer-up-left{
    float:left
}
.footer-up-right{
    float:right
}
.footer-up .title{
    font-family:endzone-bold;
    font-size:36px;
    margin-bottom:7px
}
.footer-up .desc{
    font-size:16px;
    line-height:24px;
    color:#757575
}
.footer-up .btn{
    margin-top:25px;
    padding:0 20px;
    display:inline-block;
    width:auto;
    min-width:200px
}
.footer-devices{
    background:#eee;
    padding:64px 0
}
.footer-devices .footer-up-left{
    padding:27px 0 33px 0;
    max-width:500px
}
.footer-down{
    line-height:18px
}
.footer-down-up{
    padding:25px 0
}
.footer-nav{
    color:#7b7b7b;
    float:left;
    margin:0 -32px
}
.footer-down-down.copyright{
    color:#bfbfbf;
    font-size:12px;
    margin-bottom:50px
}
.footer-nav li.item{
    font-size:18px;
    padding:18px 18px;
    display:inline-block
}
.footer-nav a{
    color:#7b7b7b
}
.footer-nav a:hover{
    color:#fff
}
footer .dropdown{
    color:#bfbfbf;
    font-family:endzone-medium;
    font-size:16px;
    position:relative;
    min-width:160px;
    cursor:pointer
}
footer .dropdown .item{
    padding:5px 0;
    cursor:pointer
}
footer .dropdown .item a{
    width:100%;
    padding:0 10px;
    display:inline-block;
    box-sizing:border-box
}
footer .dropdown .item .text{
    color:#bfbfbf;
    text-decoration:none
}
footer .dropdown .item a:hover .text{
    color:#fff
}
@media (max-width:1279px){
    .header-overlay{
        width:978px;
        padding-right:8px;
        padding-left:8px;
        margin-right:auto;
        margin-left:auto;
        overflow:hidden
    }
    .header-right{
        float:none;
        position:absolute;
        left:-100%;
        top:0;
        width:100%;
        background:#013369;
        transition:all .56s;
        z-index:10001
    }
    .header-right .signin{
        float:none;
        box-shadow:0 2px 4px rgba(0,0,0,.4)
    }
    .header-right .menu{
        text-align:center;
        padding-bottom:10px
    }
    .header-right .menu .item{
        display:block
    }
    .header-right .menu nav{
        font-size:32px;
        line-height:56px;
        padding:20px 0
    }
    .header-right a{
        display:block;
        padding:0
    }
}
@media (max-width:1023px){
    .header-overlay{
        width:752px
    }
    .footer-nav{
        margin:0 -20px
    }
    .footer-nav li.item{
        padding:18px 14px
    }
    .footer-nav,.footer-up-left,.footer-up-right{
        float:none
    }
}
@media (max-width:767px){
    .header-overlay{
        width:100%
    }
    .header-right .menu nav{
        font-size:24px;
        line-height:48px
    }
    footer{
        text-align:center
    }
    .footer-up .btn{
        margin:25px auto 0
    }
    .footer-devices .footer-up-left{
        max-width:100%
    }
    .footer-nav{
        margin:5px 0 0
    }
    .footer-nav li.item{
        padding:16px 0;
        display:block
    }
}
@media (max-width:483px){
    header .logo{
        width:132px
    }
    .header-right-mobile span.text{
        margin-right:6px
    }
}
.center-container{
    display:table;
    height:100%;
    width:100%;
    margin:0 auto
}
@-webkit-keyframes loading{
    0%{
        transform:rotate(0)
    }
    100%{
        transform:rotate(360deg)
    }
}
@-moz-keyframes loading{
    0%{
        transform:rotate(0)
    }
    100%{
        transform:rotate(360deg)
    }
}
@-ms-keyframes loading{
    0%{
        transform:rotate(0)
    }
    100%{
        transform:rotate(360deg)
    }
}
@-o-keyframes loading{
    0%{
        transform:rotate(0)
    }
    100%{
        transform:rotate(360deg)
    }
}
@keyframes loading{
    0%{
        transform:rotate(0)
    }
    100%{
        transform:rotate(360deg)
    }
}
#packagesContent #heroContainer{
    height:500px!important;
    text-align:center;
    position:relative
}
#packagesContent #heroContainer #heroContent{
    display:inline-block;
    margin:auto;
    margin-top:74px!important;
    color:#fff;
    font-size:18px;
    font-family:endzone-medium;
    position:relative
}
#heroContent h1{
    font-family:endzone-bold;
    font-size:48px
}
#heroContent div.desc{
    padding:20px
}
/* ---- Enhanced hero (eyebrow, accent title, check-bullets, CTA) ---- */
.hero-eyebrow{
    text-transform:uppercase;
    letter-spacing:.22em;
    font-size:13px;
    font-family:endzone-medium;
    color:#9fc0ff;
    margin:0 0 14px
}
.hero-title{
    line-height:1.04;
    text-transform:uppercase;
    margin:0 0 22px;
    text-shadow:0 4px 30px rgba(0,0,0,.45)
}
.hero-accent{
    color:#6fe39a
}
.hero-bullets{
    list-style:none;
    margin:0 auto 26px;
    padding:0;
    max-width:560px;
    text-align:left;
    display:inline-block
}
.hero-bullets li{
    position:relative;
    padding:7px 0 7px 34px;
    font-size:17px;
    font-family:endzone-medium;
    color:#e9eefb;
    line-height:1.4
}
.hero-bullets li strong{
    color:#fff
}
.hero-bullets li::before{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    width:20px;
    height:20px;
    background:#127a37;
    border-radius:50%;
    box-shadow:0 0 0 4px rgba(18,122,55,.22)
}
.hero-bullets li::after{
    content:"\2713";
    position:absolute;
    left:5px;
    top:8px;
    font-size:12px;
    color:#fff;
    font-weight:700
}
@media (max-width:767px){
    .hero-eyebrow{
        font-size:11px;
        letter-spacing:.16em;
        margin-bottom:10px
    }
    .hero-title{
        margin-bottom:18px
    }
    .hero-bullets{
        margin-bottom:22px
    }
    .hero-bullets li{
        font-size:15px;
        padding-left:30px
    }
    .hero-bullets li::before{
        width:18px;
        height:18px;
        top:10px
    }
    .hero-bullets li::after{
        left:4px;
        top:7px
    }
}
#heroContent .btn{
    margin:auto
}
@media (max-width:360px){
    #packagesContent #heroContainer{
        height:720px;
        text-align:center
    }
}
#packagesContent #packagesContainerOuter{
    width:100%;
    max-width:1280px;
    margin:-50px auto auto auto;
    padding:0 32px;
    position:relative
}
#packagesContent #packagesContainerInner{
    background-color:#fff;
    width:100%;
    box-shadow:0 3px 5px 2px #ccc
}
#packagesContent div.package{
    border-bottom:1px solid #eee;
    padding:20px;
    font-family:endzone-light;
    font-size:14px;
    color:#757575
}
#packagesContent div.package div.packageName{
    width:50%;
    display:inline-block;
    vertical-align:middle
}
#packagesContent div.package div.packageOptions,#packagesContent div.package div.packagePrice{
    width:24%;
    display:inline-block;
    vertical-align:middle
}
#packagesContent div.package div.packagePrice{
    text-align:center
}
#packagesContent div.package:before{
    content:"";
    display:inline-block;
    vertical-align:middle;
    height:100%
}
#packagesContent div.package div.packageName h2{
    font-family:endzone-bold;
    font-size:24px;
    color:#333;
    padding-bottom:20px;
    text-transform:uppercase
}
#packagesContent div.package div.packageOptions{
    color:#333
}
#packagesContent div.package div.packageOptions div{
    padding:10px 0
}
#packagesContent div.package div.packagePriceAmount{
    font-family:endzone-medium;
    font-size:20px;
    color:#1b48e0;
    padding-bottom:10px
}
div.packagePriceAmount span{
    font-size:14px
}
#packagesContent div.package .btn{
    margin:auto
}
@media (max-width:1023px){
    #packagesContent div.package div.packageName{
        width:auto;
        display:block;
        text-align:center
    }
    #packagesContent div.package div.packageOptions,#packagesContent div.package div.packagePrice{
        width:auto;
        display:block;
        text-align:center
    }
    #packagesContent div.package div.packageOptions div{
        display:inline-block;
        padding:20px
    }
}
@media (max-width:767px){
    #packagesContent div.package div.packageOptions{
        padding:10px 0
    }
    #packagesContent div.package div.packageOptions div{
        display:block;
        padding:10px 0
    }
}
#packagesContent #featuresContainer{
    width:100%;
    max-width:1280px;
    margin:auto;
    padding:15px 32px
}
#packagesContent #featuresContainer div.feature{
    padding:15px 0;
    font-family:endzone-light;
    font-size:16px;
    color:#757575
}
#packagesContent #featuresContainer div.feature h2{
    font-family:endzone-bold;
    font-size:40px;
    color:#333
}
#packagesContent #featuresContainer div.feature div.desc{
    padding:20px 0
}
#packagesContent #featuresContainer div.feature div.text{
    display:inline-block;
    width:45%;
    vertical-align:middle
}
#packagesContent #featuresContainer div.feature:before{
    content:"";
    display:inline-block;
    vertical-align:middle;
    height:100%
}
#packagesContent #featuresContainer div.feature div.img{
    width:54%;
    display:inline-block;
    vertical-align:middle
}
@media (max-width:1216px){
    #packagesContent #featuresContainer div.feature div.img img{
        width:100%
    }
}
@media (max-width:1023px){
    #packagesContent #featuresContainer div.feature{
        padding:20px 0
    }
    #packagesContent #featuresContainer div.feature div.img{
        display:none
    }
    #packagesContent #featuresContainer div.feature div.text{
        width:auto;
        display:block;
        text-align:center
    }
    #packagesContent div.feature .btn{
        margin:auto
    }
}
/* ---- Modern feature cards (icon badge + title + text, responsive grid).
   Replaces the old fixed-width floated image tiles. ---- */
#packagesContent #featureTilesContainer{
    width:100%;
    max-width:1280px;
    margin:auto;
    padding:40px 32px
}
.ft-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px
}
.ft-card{
    background:#fff;
    border:1px solid #e3e7ee;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(8,22,48,.10);
    display:flex;
    flex-direction:column;
    transition:transform .18s ease,box-shadow .18s ease
}
.ft-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 50px rgba(8,22,48,.18)
}
.ft-icon-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 20px 22px
}
.ft-icon{
    width:60px;
    height:60px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff
}
.ft-icon svg{
    width:30px;
    height:30px
}
.ft-blue{
    background:linear-gradient(135deg,#1b48e0,#3b7aff);
    box-shadow:0 6px 20px rgba(30,80,230,.3)
}
.ft-green{
    background:linear-gradient(135deg,#127a37,#22c55e);
    box-shadow:0 6px 20px rgba(18,122,55,.3)
}
.ft-navy{
    background:linear-gradient(135deg,#013369,#1e3a6e);
    box-shadow:0 6px 20px rgba(1,51,105,.3)
}
.ft-red{
    background:linear-gradient(135deg,#e11d2a,#f43f5e);
    box-shadow:0 6px 20px rgba(225,29,42,.3)
}
.ft-body{
    padding:0 22px 28px;
    text-align:center
}
.ft-body h3{
    font-family:endzone-bold;
    font-size:19px;
    color:#14181f;
    margin:0 0 8px
}
.ft-body p{
    color:#5b6675;
    font-size:14px;
    line-height:1.55;
    margin:0
}
@media (max-width:1023px){
    .ft-grid{
        grid-template-columns:repeat(2,1fr);
        gap:18px
    }
}
@media (max-width:767px){
    #packagesContent #featureTilesContainer{
        padding:28px 16px
    }
    .ft-grid{
        grid-template-columns:1fr;
        gap:16px
    }
}
#packagesContent #devicesContainer{
    width:100%;
    max-width:1280px;
    margin:auto;
    text-align:center;
    font-family:endzone-light;
    font-size:16px;
    color:#757575;
    padding:30px
}
#packagesContent #devicesContainer div.break{
    width:100%;
    padding-bottom:30px;
    border-top:1px solid #ccc
}
#packagesContent #devicesContainer h2{
    font-family:endzone-bold;
    font-size:40px;
    color:#333
}
#packagesContent #devicesContainer div.desc{
    padding:40px;
    max-width:640px;
    margin:auto
}
#devicesImg{
    background-image:url(../images/devices.png);
    background-repeat:no-repeat;
    width:687px;
    height:385px;
    margin:10px auto
}
@media (max-width:819px){
    #devicesImg{
        background-image:url(../images/devicesm.png);
        width:328px;
        height:184px
    }
}
@media (max-width:404px){
    #devicesImg{
        width:100%;
        background-size:100%
    }
}
#heroVideo{
    width:100%;
    height:100%;
    max-width:1280px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:auto
}
.video-wrap{
    background-position:center top;
    background-repeat:no-repeat;
    width:auto;
    height:auto;
    min-width:100%;
    min-height:100%
}
#heroVideo .mask{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    background:
      radial-gradient(900px 420px at 50% -10%, rgba(27,72,224,.30), transparent 60%),
      radial-gradient(700px 320px at 85% 16%, rgba(225,29,42,.16), transparent 55%),
      linear-gradient(180deg, rgba(1,20,50,.42) 0%, rgba(1,16,38,.92) 100%)
}
@media (max-width:767px){
    .video-wrap{
        background-position:80% top
    }
}
@media (max-width:360px){
    .video-wrap{
        background-image:url(../images/herobgm.png)
    }
}
@media (min-width:361px){
    .video-wrap{
        background-image:url(../images/herobg.png)
    }
}
/* Hero is now a CSS background (the old <video>/poster was a 1x1 placeholder).
   On the auto-height mobile hero, stretch the media box and cover it so the
   image always fills. Desktop (>=768px, fixed-height hero) is unaffected. */
@media (max-width:767px){
    #heroVideo{
        height:auto;
        bottom:0
    }
    .video-wrap{
        height:100%;
        background-size:cover;
        background-position:center
    }
}
div.packageName div.desc ul{
    list-style-type:disc;
    padding-left:20px;
    margin:auto;
    text-align:left
}
.packages-wrap{
    max-width:1280px;
    margin:0 auto;
    overflow:hidden
}
.package-pass{
    width:calc((100% - 32px)/ 2);
    padding:16px;
    margin:12px 8px 0;
    background:#fff;
    box-shadow:0 3px 10px 0 #ccc;
    display:flex;
    flex-direction:column
}
.package-header{
    text-align:center
}
.package__name{
    font-family:endzone-bold;
    font-size:24px;
    text-transform:uppercase;
    line-height:24px
}
.package__date{
    font-size:12px;
    height:13px;
    display:block
}
.package-body{
    flex:auto;
    margin-top:15px
}
.package-item{
    border-bottom:1px solid #eee;
    padding:12px 0
}
.package-item:last-of-type{
    border-bottom:none
}
.package-item .icon{
    display:block;
    width:22px;
    height:18px;
    margin:0 15px;
    background-position:left center;
    background-repeat:no-repeat;
    background-size:22px 18px
}
.package-item .icon.icon--no{
    background-image:url(https://neulionms-a.akamaihd.net/nfl/gamepass/v2/nflgp/site_4/images/packages/icon_no.svg)
}
.package-item__item{
    display:flex;
    line-height:20px;
    margin-top:5px;
    color:#757575
}
.package-item__name{
    font-family:endzone-bold;
    font-size:16px;
    line-height:20px;
    padding-left:52px
}
.package-item__desc{
    font-family:endzone-medium
}
.package-footer{
    text-align:center
}
.package__price{
    font-family:endzone-bold
}
.package__text--bold{
    font-family:endzone-bold
}
.package-pass--SEASON{
    order:10
}
@media (max-width:1023px){
    .package-pass{
        max-width:634px;
        width:100%
    }
}
#counter{
    margin:10 auto;
    text-align:center
}

/* Countdown timer (vanilla; built by site.js into #counter). */
.cd{
    display:inline-flex;
    gap:8px;
    justify-content:center;
    vertical-align:middle
}
.cd-unit{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px
}
.cd-num{
    display:block;
    min-width:48px;
    padding:7px 6px;
    background:#fff;
    border:2px solid #127a37;
    border-radius:6px;
    color:#0f642e;
    font-family:endzone-bold;
    font-size:24px;
    line-height:1.1;
    text-align:center;
    font-variant-numeric:tabular-nums
}
.cd-lbl{
    font-size:11px;
    color:#5b6675;
    text-transform:uppercase;
    letter-spacing:.05em;
    text-align:center
}

/* ============================================================
   Modern pricing card (WorldCupPass-style layout, NFL branding).
   Two-column plan rows on desktop, stacked on mobile. Scoped with
   pm- classes so the rest of the site is untouched.
   ============================================================ */
#packagesContainerOuter .pm-card{
    background:#fff;
    border:1px solid #e3e7ee;
    border-radius:12px;
    box-shadow:0 18px 50px rgba(8,22,48,.18);
    padding:8px 36px
}
.pm-plan{
    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:32px;
    align-items:center;
    padding:30px 0
}
.pm-head{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:10px
}
.pm-title{
    font-family:endzone-bold;
    font-size:26px;
    color:#14181f;
    margin:0;
    text-transform:uppercase;
    letter-spacing:.02em
}
.pm-badge{
    background:#e11d2a;
    color:#fff;
    font-family:endzone-medium;
    font-size:12px;
    letter-spacing:.04em;
    padding:5px 11px;
    border-radius:5px;
    text-transform:uppercase
}
.pm-desc{
    color:#5b6675;
    font-size:15px;
    line-height:1.55;
    margin:0 0 14px
}
.pm-hot{
    color:#e11d2a;
    font-family:endzone-bold
}
.pm-guarantee{
    font-family:endzone-bold;
    color:#14181f;
    margin:0
}
.pm-divider{
    border:0;
    border-top:1px solid #e3e7ee;
    margin:0
}
.pm-action{
    text-align:center
}
.pm-countdown{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-bottom:16px
}
.pm-cd-label{
    font-family:endzone-medium;
    font-size:19px;
    color:#14181f
}
.pm-btn{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:endzone-medium;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:#fff;
    border-radius:8px;
    padding:15px 24px;
    font-size:16px;
    line-height:1.1;
    transition:transform .12s ease,background .15s ease
}
.pm-btn:hover{
    transform:translateY(-2px)
}
.pm-btn-primary{
    background:#1b48e0;
    box-shadow:0 8px 20px rgba(30,80,230,.35)
}
.pm-btn-primary:hover{
    background:#1740c2
}
.pm-btn-secondary{
    background:#127a37;
    box-shadow:0 8px 20px rgba(18,122,55,.3)
}
.pm-btn-secondary:hover{
    background:#0f642e
}
.pm-strike{
    text-decoration:line-through;
    opacity:.65
}
.pm-now{
    color:#fff
}
.pm-coupon{
    color:#e11d2a;
    font-family:endzone-medium;
    font-size:14px;
    margin:12px 0 2px
}
.pm-coupon strong{
    color:#1b48e0
}
.pm-action-alt{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px
}
.pm-price{
    font-family:endzone-bold;
    font-size:40px;
    color:#1b48e0
}
@media (max-width:767px){
    #packagesContainerOuter .pm-card{
        padding:4px 18px
    }
    .pm-plan{
        grid-template-columns:1fr;
        gap:16px;
        padding:24px 0
    }
    .pm-main{
        text-align:center
    }
    .pm-head{
        justify-content:center
    }
    .pm-title{
        font-size:22px
    }
    .pm-desc{
        text-align:left
    }
}
    .progress_bar_text p {
    text-transform: capitalize;
    margin-top: 8px;
    text-align: center;
    }
    
    .logo img {
    height: 30px;
    width: auto; /* This ensures the width adjusts proportionally */
    }

/* ==========================================================================
   Mobile usability improvements (audit). Scoped to small screens so the
   desktop layout is unchanged. Fixes: horizontal scroll, invisible/non-working
   hamburger menu, hero text overlapping the packages card, oversized feature
   tiles, small touch targets, cramped footer.
   ========================================================================== */

/* Safety net: never allow sideways scrolling on any device. On desktop the
   layout is already centred within max-width containers, so this is a no-op. */
html,body{
    max-width:100%;
    overflow-x:hidden
}

/* --- Working hamburger menu (tablet + mobile, <=1279px) --------------------
   The markup ships an empty <div id="hamburger">; render the 3-bar icon and
   reveal the off-canvas nav when JS adds the .open class (see files/js/site.js). */
@media (max-width:1279px){
    .hamburger{
        width:26px;
        height:2px;
        margin-top:31px;
        background:#eee;
        border-radius:2px
    }
    .hamburger:before,.hamburger:after{
        content:"";
        position:absolute;
        left:0;
        width:26px;
        height:2px;
        background:#eee;
        border-radius:2px;
        transition:transform .3s,top .3s
    }
    .hamburger:before{
        top:-8px
    }
    .hamburger:after{
        top:8px
    }
    .header-right.open{
        left:0
    }
    .hamburger.open{
        background:transparent
    }
    .hamburger.open:before{
        top:0;
        transform:rotate(45deg)
    }
    .hamburger.open:after{
        top:0;
        transform:rotate(-45deg)
    }
}

@media (max-width:767px){
    /* Hero: grow with its content so the headline/CTA never collide with the
       packages card, and scale the headline to fit narrow screens. */
    #packagesContent #heroContainer{
        height:auto!important;
        min-height:420px;
        padding:28px 16px 70px
    }
    #packagesContent #heroContainer #heroContent{
        margin-top:0!important;
        width:100%
    }
    #heroContent h1{
        font-size:30px;
        line-height:1.15
    }
    #heroContent div.desc{
        padding:16px 4px;
        font-size:15px
    }

    /* Packages card overlaps the bottom of the hero (matches desktop/reference).
       The hero's extra bottom padding keeps the headline clear of the card. */
    #packagesContent #packagesContainerOuter{
        margin-top:-50px;
        padding:0 12px
    }
    #packagesContent div.package{
        padding:20px 14px
    }
    #packagesContent div.package div.packageName h2{
        font-size:22px
    }

    /* Countdown: stack the "Discount Ends:" label above the timer and centre. */
    #packagesContent .packageOptions table,
    #packagesContent .packageOptions tbody,
    #packagesContent .packageOptions tr,
    #packagesContent .packageOptions td{
        display:block;
        width:100%;
        text-align:center
    }
    /* The original CSS has a high-specificity rule
       (#packagesContent div.package div.packageOptions div{display:block})
       that would force the countdown's flex boxes to stack vertically.
       Re-assert the horizontal timer layout with higher specificity. */
    #packagesContent div.package div.packageOptions #counter .cd{
        display:inline-flex;
        padding:0
    }
    #packagesContent div.package div.packageOptions #counter .cd-unit{
        display:flex;
        flex-direction:column;
        padding:0
    }

    /* Larger touch targets and full-width subscribe buttons. */
    .btn{
        height:48px;
        line-height:48px;
        min-width:180px
    }
    #packagesContent div.package .btn{
        width:100%;
        max-width:320px
    }

    /* Footer copy: a touch larger and padded for readability. */
    .footer-down-down.copyright{
        font-size:13px;
        line-height:20px;
        padding:0 16px;
        margin-bottom:30px
    }
}

/* Very small phones: keep the header from crowding. */
@media (max-width:360px){
    header .logo{
        width:112px
    }
    .header-right-mobile span.text{
        margin-right:8px;
        font-size:13px
    }
}

/* ============================================================
   Legal / content pages (policy, dmca): gradient hero + card.
   ============================================================ */
.page-hero{
    position:relative;
    color:#fff;
    text-align:center;
    padding:56px 20px;
    background:
      radial-gradient(800px 320px at 50% -20%, rgba(27,72,224,.5), transparent 60%),
      radial-gradient(600px 240px at 12% 30%, rgba(18,122,55,.28), transparent 55%),
      radial-gradient(600px 240px at 88% 20%, rgba(225,29,42,.22), transparent 55%),
      linear-gradient(180deg,#0b1d3d 0%,#061429 100%)
}
.page-eyebrow{
    text-transform:uppercase;
    letter-spacing:.2em;
    font-size:12px;
    font-family:endzone-medium;
    color:#9fc0ff;
    margin:0 0 10px
}
.page-hero h1{
    font-family:endzone-bold;
    font-size:42px;
    margin:0;
    text-transform:uppercase;
    letter-spacing:.01em
}
.page-lead{
    color:#cdd9f2;
    margin:12px auto 0;
    max-width:620px;
    font-size:16px;
    line-height:1.5
}
.legal{
    padding:48px 0 72px
}
.legal-inner{
    max-width:860px;
    margin:0 auto;
    padding:0 20px
}
.legal-card{
    background:#fff;
    border:1px solid #e3e7ee;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(8,22,48,.10);
    padding:36px 40px
}
.legal-intro{
    color:#3a4555;
    font-size:16px;
    line-height:1.6
}
.legal-card h2{
    font-family:endzone-bold;
    font-size:23px;
    color:#14181f;
    margin:30px 0 10px
}
.legal-card h1{
    font-family:endzone-bold;
    font-size:30px;
    color:#14181f;
    margin:0 0 14px
}
.legal-card p{
    color:#3a4555;
    font-size:15.5px;
    line-height:1.65;
    margin:0 0 12px
}
.legal-card ul{
    padding-left:22px;
    margin:10px 0 14px;
    list-style:disc
}
.legal-card li{
    color:#3a4555;
    font-size:15.5px;
    line-height:1.6;
    margin-bottom:7px
}
.legal-card a{
    color:#1b48e0;
    font-family:endzone-medium;
    word-break:break-word
}
.legal-card a:hover{
    text-decoration:underline
}
.legal-cta{
    text-align:center;
    margin-top:28px
}
.legal-cta a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:endzone-medium;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:#fff;
    background:#1b48e0;
    border-radius:8px;
    padding:14px 34px;
    font-size:16px;
    box-shadow:0 8px 20px rgba(30,80,230,.35);
    transition:transform .12s ease,background .15s ease
}
.legal-cta a:hover{
    transform:translateY(-2px);
    background:#1740c2;
    text-decoration:none
}
@media (max-width:767px){
    .page-hero{
        padding:40px 18px
    }
    .page-hero h1{
        font-size:28px
    }
    .legal{
        padding:26px 0 44px
    }
    .legal-inner{
        padding:0 14px
    }
    .legal-card{
        padding:24px 20px
    }
}