/* ==========================================================================
   247 NFL TV — site stylesheet
   Rewritten: dead rules from the old NFL Game Pass template removed
   (.package-pass/.footer-devices/.footer-nav/.overlay/#packagesContainerInner
   and friends were not referenced by any page), design tokens introduced, and
   the layout modernised. Everything below is in use.
   ========================================================================== */

/* ---------- Design tokens ------------------------------------------------ */
:root{
    --navy:#013369;
    --navy-deep:#061429;
    --blue:#1b48e0;
    --blue-dark:#1740c2;
    --blue-soft:#9fc0ff;
    --red:#e11d2a;
    --green:#127a37;
    --green-bright:#22c55e;
    --ink:#14181f;
    --body:#4a5567;
    --muted:#6b7688;
    --line:#e3e7ee;
    --bg:#f4f6fa;
    --card:#fff;
    --radius:14px;
    --radius-sm:8px;
    --shadow-sm:0 4px 14px rgba(8,22,48,.07);
    --shadow:0 10px 30px rgba(8,22,48,.10);
    --shadow-lg:0 22px 60px rgba(8,22,48,.18);
    --max:1224px
}

*,:after,:before{
    box-sizing:border-box
}

/* ---------- Self-hosted brand fonts (woff2 only, 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
}

/* ---------- Base --------------------------------------------------------- */
html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
    /* Sticky header height, so #anchor targets are not hidden behind it. */
    scroll-padding-top:76px
}
html,body{
    max-width:100%;
    overflow-x:hidden
}
body{
    margin:0;
    font-family:endzone-light,'Helvetica Neue',Arial,sans-serif;
    font-size:15px;
    line-height:1.6;
    color:var(--body);
    background:var(--bg);
    -webkit-font-smoothing:antialiased
}
body,h1,h2,h3,h4,h5,h6,p,ul,figure{
    margin:0
}
h1,h2,h3,h4,h5,h6{
    font-weight:400;
    color:var(--ink)
}
ul{
    padding-left:0;
    list-style:none
}
img{
    border:0;
    vertical-align:middle;
    max-width:100%
}
a{
    cursor:pointer;
    text-decoration:none;
    color:var(--blue)
}
strong{
    font-family:endzone-medium
}
.container{
    width:100%;
    max-width:var(--max);
    padding-right:20px;
    padding-left:20px;
    margin:0 auto
}
.clear:after{
    display:block;
    clear:both;
    content:""
}
.section{
    padding:64px 0
}
.section-head{
    max-width:760px;
    margin:0 auto 40px;
    text-align:center
}
.section-eyebrow{
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:12px;
    font-family:endzone-medium;
    color:var(--blue);
    margin:0 0 10px
}
.section-head h2{
    font-family:endzone-bold;
    font-size:36px;
    line-height:1.15;
    letter-spacing:-.01em;
    margin:0
}
.section-head p{
    margin:14px auto 0;
    font-size:16px;
    color:var(--muted);
    max-width:660px
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

/* ---------- Buttons ------------------------------------------------------ */
.btn{
    font-family:endzone-medium;
    text-align:center;
    color:#fff;
    min-width:200px;
    padding:0 22px;
    height:48px;
    line-height:48px;
    background:var(--blue);
    border-radius:var(--radius-sm);
    display:inline-block;
    letter-spacing:.02em;
    box-shadow:0 8px 20px rgba(30,80,230,.28);
    transition:background .15s ease,transform .12s ease,box-shadow .15s ease
}
.btn:hover{
    background:var(--blue-dark);
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(30,80,230,.35)
}
.btn-ghost{
    background:transparent;
    border:2px solid rgba(255,255,255,.55);
    box-shadow:none;
    line-height:44px
}
.btn-ghost:hover{
    background:rgba(255,255,255,.12);
    border-color:#fff
}

/* ---------- Header ------------------------------------------------------- */
header{
    position:sticky;
    top:0;
    width:100%;
    height:64px;
    line-height:64px;
    background:var(--navy);
    color:#eee;
    font-family:endzone-medium;
    z-index:9999;
    box-shadow:0 1px 0 rgba(255,255,255,.06);
    transition:box-shadow .2s ease
}
header.is-scrolled{
    box-shadow:0 1px 0 rgba(255,255,255,.06),0 6px 22px rgba(0,0,0,.32)
}
header .container{
    display:flex;
    align-items:center;
    justify-content:space-between
}
header .logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
    height:64px;
    flex:0 0 auto
}
header .logo img{
    height:30px;
    width:auto
}
.logo-word{
    font-family:endzone-bold;
    font-size:19px;
    letter-spacing:.02em;
    color:#fff;
    text-transform:uppercase;
    line-height:1
}
.header-nav{
    display:flex;
    align-items:center;
    gap:4px
}
.header-nav a{
    color:#dfe6f5;
    font-size:13.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:8px 12px;
    border-radius:6px;
    line-height:1.2;
    transition:color .15s ease,background .15s ease
}
.header-nav a:hover{
    color:#fff;
    background:rgba(255,255,255,.09)
}
.header-cta{
    background:var(--red)!important;
    color:#fff!important;
    font-family:endzone-medium;
    padding:9px 18px!important;
    margin-left:8px;
    box-shadow:0 6px 16px rgba(225,29,42,.35)
}
.header-cta:hover{
    background:#c2101c!important
}
.hamburger{
    display:none;
    position:relative;
    width:44px;
    height:44px;
    border-radius:6px;
    cursor:pointer;
    flex:0 0 auto
}
.hamburger:before,.hamburger:after{
    content:"";
    position:absolute;
    left:9px;
    width:26px;
    height:2px;
    background:#eee;
    border-radius:2px;
    transition:transform .3s,top .3s,box-shadow .3s
}
.hamburger:before{
    top:14px;
    box-shadow:0 8px 0 #eee
}
.hamburger:after{
    top:30px
}
.hamburger.open:before{
    top:21px;
    box-shadow:none;
    transform:rotate(45deg)
}
.hamburger.open:after{
    top:21px;
    transform:rotate(-45deg)
}
@media (max-width:1023px){
    .hamburger{
        display:block
    }
    .header-nav{
        position:fixed;
        left:0;
        right:0;
        top:64px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        background:var(--navy);
        padding:12px 20px 22px;
        box-shadow:0 18px 30px rgba(0,0,0,.35);
        transform:translateY(-125%);
        visibility:hidden;
        transition:transform .32s ease,visibility .32s;
        z-index:9998
    }
    .header-nav.open{
        transform:translateY(0);
        visibility:visible
    }
    .header-nav a{
        font-size:16px;
        padding:14px 6px;
        border-bottom:1px solid rgba(255,255,255,.08)
    }
    .header-cta{
        margin:14px 0 0;
        text-align:center;
        border-bottom:0!important;
        border-radius:var(--radius-sm)
    }
}
@media (max-width:400px){
    .logo-word{
        font-size:16px
    }
}

/* ---------- Hero --------------------------------------------------------- */
#heroContainer{
    position:relative;
    text-align:center;
    min-height:560px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:52px 20px 96px;
    overflow:hidden;
    background:var(--navy-deep)
}
/* Full-bleed: the photo sits behind a heavy overlay and is cropped with
   object-fit, so letting it span the viewport reads better than the old
   1280px-wide centred box (which left bare navy bars on large screens). */
#heroVideo{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
/* The source photo ships pre-darkened (its top third is close to black), so it
   is lifted here and framed on the players rather than the empty stands. */
.hero-img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 62%;
    display:block;
    filter:brightness(1.7) saturate(1.15)
}
#heroVideo .mask{
    position:absolute;
    inset:0;
    background:
      radial-gradient(820px 460px at 50% 54%,rgba(1,16,38,.74),rgba(1,16,38,.34) 68%,rgba(1,16,38,0) 100%),
      radial-gradient(900px 420px at 50% -10%,rgba(27,72,224,.26),transparent 60%),
      radial-gradient(700px 320px at 85% 16%,rgba(225,29,42,.15),transparent 55%),
      linear-gradient(180deg,rgba(1,20,50,.28) 0%,rgba(1,16,38,.34) 45%,rgba(1,16,38,.88) 100%)
}
#heroContent{
    position:relative;
    z-index:2;
    color:#fff;
    max-width:820px;
    margin:0 auto
}
.hero-eyebrow{
    display:inline-block;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:12px;
    font-family:endzone-medium;
    color:#cfe0ff;
    background:rgba(159,192,255,.14);
    border:1px solid rgba(159,192,255,.3);
    border-radius:100px;
    padding:6px 16px;
    margin:0 0 18px
}
.hero-title{
    font-family:endzone-bold;
    font-size:52px;
    line-height:1.04;
    text-transform:uppercase;
    letter-spacing:-.01em;
    color:#fff;
    margin:0 0 16px;
    text-shadow:0 4px 30px rgba(0,0,0,.45)
}
.hero-accent{
    color:#6fe39a
}
.hero-lead{
    font-family:endzone-medium;
    font-size:17px;
    line-height:1.6;
    color:#dce6fa;
    max-width:660px;
    margin:0 auto 22px
}
.hero-bullets{
    margin:0 auto 26px;
    padding:0;
    max-width:600px;
    text-align:left;
    display:inline-block
}
.hero-bullets li{
    position:relative;
    padding:6px 0 6px 34px;
    font-size:16px;
    font-family:endzone-medium;
    color:#e9eefb;
    line-height:1.45
}
.hero-bullets li strong{
    color:#fff
}
.hero-bullets li::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    width:20px;
    height:20px;
    background:var(--green);
    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:7px;
    font-size:12px;
    color:#fff;
    font-weight:700
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
    margin-bottom:22px
}
.hero-trust{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 24px;
    font-size:13px;
    font-family:endzone-medium;
    color:#b9c9e8;
    letter-spacing:.03em
}
.hero-trust span{
    display:inline-flex;
    align-items:center;
    gap:7px
}
.hero-trust span::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green-bright);
    box-shadow:0 0 0 3px rgba(34,197,94,.22)
}

/* ---------- Pricing card ------------------------------------------------- */
#packagesContainerOuter{
    width:100%;
    max-width:1224px;
    margin:-64px auto 0;
    padding:0 20px;
    position:relative;
    z-index:5
}
.pm-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
    padding:6px 36px;
    overflow:hidden
}
.pm-plan{
    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:32px;
    align-items:center;
    padding:30px 0
}
.pm-plan-featured{
    position:relative
}
.pm-head{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:10px
}
.pm-title{
    font-family:endzone-bold;
    font-size:26px;
    color:var(--ink);
    margin:0;
    text-transform:uppercase;
    letter-spacing:.01em
}
.pm-badge{
    background:var(--red);
    color:#fff;
    font-family:endzone-medium;
    font-size:12px;
    letter-spacing:.04em;
    padding:5px 11px;
    border-radius:5px;
    text-transform:uppercase
}
.pm-badge-alt{
    background:var(--green)
}
.pm-desc{
    color:var(--body);
    font-size:15px;
    line-height:1.6;
    margin:0 0 14px
}
.pm-hot{
    color:var(--red);
    font-family:endzone-bold
}
.pm-features{
    display:flex;
    flex-wrap:wrap;
    gap:6px 22px;
    margin:0 0 14px
}
.pm-features li{
    position:relative;
    padding-left:24px;
    font-size:14px;
    color:var(--ink);
    font-family:endzone-medium
}
.pm-features li::before{
    content:"\2713";
    position:absolute;
    left:0;
    top:-1px;
    width:17px;
    height:17px;
    line-height:17px;
    text-align:center;
    font-size:10px;
    color:#fff;
    background:var(--green);
    border-radius:50%
}
.pm-guarantee{
    font-family:endzone-bold;
    color:var(--ink);
    margin:0;
    font-size:14px
}
.pm-divider{
    border:0;
    border-top:1px solid var(--line);
    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:17px;
    color:var(--ink)
}
.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:var(--radius-sm);
    padding:16px 24px;
    font-size:16px;
    line-height:1.1;
    transition:transform .12s ease,background .15s ease,box-shadow .15s ease
}
.pm-btn:hover{
    transform:translateY(-2px)
}
.pm-btn-primary{
    background:var(--blue);
    box-shadow:0 8px 20px rgba(30,80,230,.35)
}
.pm-btn-primary:hover{
    background:var(--blue-dark);
    box-shadow:0 12px 26px rgba(30,80,230,.42)
}
.pm-btn-secondary{
    background:var(--green);
    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-coupon{
    color:var(--red);
    font-family:endzone-medium;
    font-size:13.5px;
    margin:12px 0 2px
}
.pm-coupon strong{
    color:var(--blue)
}
.pm-action-alt{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px
}
.pm-price{
    font-family:endzone-bold;
    font-size:40px;
    line-height:1;
    color:var(--blue)
}
.pm-price small{
    display:block;
    font-family:endzone-light;
    font-size:13px;
    color:var(--muted);
    margin-top:6px
}
.pm-note{
    text-align:center;
    font-size:13px;
    color:var(--muted);
    padding:0 0 22px;
    margin:0
}

/* Countdown timer (built by site.js into #counter). */
#counter{
    margin:0 auto;
    text-align:center
}
.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 var(--green);
    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:var(--muted);
    text-transform:uppercase;
    letter-spacing:.05em;
    text-align:center
}

/* ---------- Stats strip -------------------------------------------------- */
.stats{
    max-width:var(--max);
    margin:0 auto;
    padding:44px 20px 8px
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}
.stat{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:22px 18px;
    text-align:center
}
.stat-num{
    font-family:endzone-bold;
    font-size:34px;
    line-height:1;
    color:var(--navy);
    display:block
}
.stat-lbl{
    display:block;
    margin-top:8px;
    font-size:13.5px;
    color:var(--muted);
    line-height:1.4
}

/* ---------- Comparison table --------------------------------------------- */
.compare-wrap{
    max-width:var(--max);
    margin:0 auto;
    padding:0 20px
}
.compare-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:var(--radius);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    background:var(--card)
}
table.compare{
    width:100%;
    min-width:660px;
    border-collapse:collapse;
    font-size:14.5px
}
table.compare th,table.compare td{
    padding:15px 18px;
    text-align:left;
    border-bottom:1px solid var(--line);
    vertical-align:middle
}
table.compare thead th{
    background:var(--navy);
    color:#fff;
    font-family:endzone-bold;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.05em;
    border-bottom:0
}
table.compare thead th:first-child{
    background:#012a56
}
table.compare tbody th{
    font-family:endzone-medium;
    color:var(--ink);
    font-weight:400;
    width:34%
}
table.compare td{
    color:var(--body)
}
table.compare .col-us{
    background:rgba(27,72,224,.05);
    font-family:endzone-medium;
    color:var(--ink)
}
/* Beats the .col-us body rule (equal specificity, declared later) so the
   header cell keeps white-on-blue rather than inheriting the dark body ink. */
table.compare thead .col-us{
    background:var(--blue);
    color:#fff
}
table.compare tbody tr:last-child th,table.compare tbody tr:last-child td{
    border-bottom:0
}
.yes,.no{
    display:inline-flex;
    align-items:center;
    gap:7px
}
.yes::before,.no::before{
    content:"\2713";
    width:19px;
    height:19px;
    flex:0 0 19px;
    line-height:19px;
    text-align:center;
    font-size:11px;
    color:#fff;
    background:var(--green);
    border-radius:50%
}
.no::before{
    content:"\2715";
    background:#c2c9d6
}
.compare-note{
    font-size:12.5px;
    color:var(--muted);
    text-align:center;
    margin:16px auto 0;
    max-width:820px;
    line-height:1.6
}

/* ---------- Alternating feature rows ------------------------------------- */
#featuresContainer{
    width:100%;
    max-width:var(--max);
    margin:auto;
    padding:24px 20px
}
.feature{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    align-items:center;
    gap:48px;
    padding:34px 0
}
.feature-rev .feature-media{
    order:-1
}
.feature h2{
    font-family:endzone-bold;
    font-size:34px;
    line-height:1.15;
    letter-spacing:-.01em;
    margin:0 0 14px
}
.feature .desc{
    font-size:16px;
    color:var(--body);
    margin-bottom:22px
}
.feature .desc p{
    margin:0 0 10px
}
.feature-media img{
    width:100%;
    height:auto;
    border-radius:var(--radius);
    box-shadow:var(--shadow)
}

/* ---------- Feature tiles ------------------------------------------------ */
#featureTilesContainer{
    width:100%;
    max-width:var(--max);
    margin:auto;
    padding:24px 20px 8px
}
.ft-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px
}
.ft-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    display:flex;
    flex-direction:column;
    transition:transform .18s ease,box-shadow .18s ease
}
.ft-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg)
}
.ft-icon-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 20px 20px
}
.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:var(--ink);
    margin:0 0 8px
}
.ft-body p{
    color:var(--body);
    font-size:14px;
    line-height:1.55;
    margin:0
}

/* ---------- How it works ------------------------------------------------- */
.steps{
    max-width:var(--max);
    margin:0 auto;
    padding:0 20px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}
.step{
    position:relative;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:30px 26px 26px
}
.step-num{
    position:absolute;
    top:-18px;
    left:26px;
    width:44px;
    height:44px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--navy),#1e3a6e);
    color:#fff;
    font-family:endzone-bold;
    font-size:19px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 18px rgba(1,51,105,.3)
}
.step h3{
    font-family:endzone-bold;
    font-size:19px;
    margin:12px 0 8px
}
.step p{
    font-size:14.5px;
    color:var(--body);
    margin:0
}

/* ---------- Devices ------------------------------------------------------ */
#devicesContainer{
    width:100%;
    max-width:var(--max);
    margin:auto;
    text-align:center;
    padding:8px 20px 56px
}
#devicesContainer h2{
    font-family:endzone-bold;
    font-size:36px;
    letter-spacing:-.01em
}
#devicesContainer .desc{
    padding:14px 0 6px;
    max-width:680px;
    margin:auto;
    color:var(--muted);
    font-size:16px
}
/* The source montage carries its own light backdrop; rounding the corners
   makes that read as a deliberate card instead of a stray grey rectangle. */
#devicesImg{
    margin:18px auto 0;
    max-width:687px;
    width:100%;
    height:auto;
    border-radius:var(--radius)
}
.device-chips{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:9px;
    margin:24px auto 0;
    max-width:860px
}
.device-chips span{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:100px;
    padding:7px 15px;
    font-size:13px;
    font-family:endzone-medium;
    color:var(--body);
    box-shadow:var(--shadow-sm)
}

/* ---------- FAQ accordion ------------------------------------------------ */
.faq-list{
    max-width:880px;
    margin:0 auto;
    padding:0 20px
}
.faq-item{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    margin-bottom:12px;
    overflow:hidden
}
.faq-item summary{
    list-style:none;
    cursor:pointer;
    padding:18px 52px 18px 22px;
    position:relative;
    font-family:endzone-medium;
    font-size:16.5px;
    color:var(--ink);
    line-height:1.45
}
.faq-item summary::-webkit-details-marker{
    display:none
}
.faq-item summary::after{
    content:"";
    position:absolute;
    right:24px;
    top:26px;
    width:10px;
    height:10px;
    border-right:2px solid var(--blue);
    border-bottom:2px solid var(--blue);
    transform:rotate(45deg);
    transition:transform .2s ease
}
.faq-item[open] summary::after{
    transform:rotate(-135deg);
    top:30px
}
.faq-item summary:hover{
    color:var(--blue)
}
.faq-answer{
    padding:0 22px 20px;
    font-size:15px;
    color:var(--body);
    line-height:1.65
}
.faq-answer a{
    font-family:endzone-medium
}
.faq-more{
    text-align:center;
    margin-top:26px
}

/* ---------- Final CTA band ----------------------------------------------- */
.cta-band{
    margin:0 20px 56px;
    border-radius:var(--radius);
    text-align:center;
    color:#fff;
    padding:52px 24px;
    background:
      radial-gradient(700px 300px at 50% -30%,rgba(27,72,224,.55),transparent 62%),
      radial-gradient(500px 220px at 85% 20%,rgba(225,29,42,.28),transparent 60%),
      linear-gradient(180deg,#0b1d3d 0%,#061429 100%);
    max-width:calc(var(--max) - 40px);
    margin-left:auto;
    margin-right:auto
}
.cta-band h2{
    font-family:endzone-bold;
    font-size:34px;
    color:#fff;
    margin:0 0 12px;
    letter-spacing:-.01em
}
.cta-band p{
    color:#cdd9f2;
    max-width:620px;
    margin:0 auto 24px;
    font-size:16px
}

/* ---------- Footer ------------------------------------------------------- */
footer{
    background:#0d1220;
    border-top:3px solid var(--blue);
    color:#9aa6bd;
    font-size:14px
}
.footer-seo{
    padding:52px 0 8px
}
.footer-seo h2{
    font-family:endzone-bold;
    font-size:24px;
    color:#fff;
    margin:0 0 14px
}
.footer-seo h3{
    font-family:endzone-medium;
    font-size:17px;
    color:#e6ecf8;
    margin:24px 0 8px
}
.footer-seo p{
    margin:0 0 12px;
    line-height:1.75;
    color:#9aa6bd;
    font-size:14.5px
}
.footer-seo a{
    color:var(--blue-soft)
}
.footer-seo a:hover{
    color:#fff;
    text-decoration:underline
}
.footer-seo-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 46px
}
.footer-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:32px;
    padding:44px 0 34px;
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:36px
}
.footer-brand .logo-word{
    font-size:20px;
    margin-bottom:12px;
    display:inline-block
}
.footer-brand p{
    margin:0 0 14px;
    line-height:1.7;
    max-width:360px
}
.footer-col h4{
    font-family:endzone-bold;
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#fff;
    margin:0 0 14px
}
.footer-col ul li{
    margin-bottom:9px
}
.footer-col a,.footer-brand a{
    color:#9aa6bd;
    transition:color .15s ease
}
.footer-col a:hover,.footer-brand a:hover{
    color:#fff;
    text-decoration:underline
}
.footer-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px
}
.footer-badges span{
    border:1px solid rgba(255,255,255,.14);
    border-radius:6px;
    padding:6px 11px;
    font-size:11.5px;
    font-family:endzone-medium;
    letter-spacing:.04em;
    color:#c3cede
}
.footer-legal{
    border-top:1px solid rgba(255,255,255,.08);
    padding:22px 0 34px;
    font-size:12.5px;
    line-height:1.7;
    color:#7c879b
}
.footer-legal strong{
    color:#c3cede
}
.footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px 22px;
    margin-top:12px
}
.footer-links a{
    color:var(--blue-soft);
    font-family:endzone-medium;
    font-size:13px;
    padding:4px 0
}
.footer-links a:hover{
    color:#fff;
    text-decoration:underline
}

/* ---------- Legal / content pages ---------------------------------------- */
.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:var(--blue-soft);
    margin:0 0 10px
}
.page-hero h1{
    font-family:endzone-bold;
    font-size:42px;
    color:#fff;
    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:880px;
    margin:0 auto;
    padding:0 20px
}
.legal-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:36px 40px
}
.legal-intro{
    color:#3a4555;
    font-size:16px;
    line-height:1.7
}
.legal-card h1{
    font-family:endzone-bold;
    font-size:30px;
    margin:0 0 14px
}
.legal-card h2{
    font-family:endzone-bold;
    font-size:22px;
    margin:30px 0 10px
}
.legal-card p{
    color:#3a4555;
    font-size:15.5px;
    line-height:1.7;
    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.65;
    margin-bottom:7px
}
.legal-card a{
    color:var(--blue);
    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:var(--blue);
    border-radius:var(--radius-sm);
    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:var(--blue-dark)
}

/* ---------- Sticky mobile CTA -------------------------------------------- */
.sticky-cta{
    display:none
}

/* ---------- Responsive --------------------------------------------------- */
/* Below ~900px the 1.45fr/1fr plan row squeezes the description into a narrow
   column; stack it before that happens rather than at the phone breakpoint. */
@media (max-width:899px){
    .pm-plan{
        grid-template-columns:1fr;
        gap:18px
    }
    .pm-action{
        max-width:420px;
        margin:0 auto;
        width:100%
    }
}
@media (max-width:1023px){
    .section{
        padding:48px 0
    }
    .section-head h2{
        font-size:30px
    }
    .stats-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .ft-grid{
        grid-template-columns:repeat(2,1fr);
        gap:18px
    }
    .steps{
        grid-template-columns:1fr;
        gap:28px
    }
    .feature{
        grid-template-columns:1fr;
        gap:24px;
        text-align:center;
        padding:28px 0
    }
    .feature-rev .feature-media{
        order:0
    }
    .feature h2{
        font-size:28px
    }
    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:28px
    }
    .footer-seo-cols{
        grid-template-columns:1fr;
        gap:0
    }
}
@media (max-width:767px){
    body{
        padding-bottom:78px
    }
    html{
        scroll-padding-top:70px
    }
    #heroContainer{
        min-height:auto;
        padding:36px 16px 96px
    }
    .hero-title{
        font-size:32px;
        line-height:1.12
    }
    .hero-lead{
        font-size:15.5px
    }
    .hero-bullets li{
        font-size:15px;
        padding-left:30px
    }
    .hero-bullets li::before{
        width:18px;
        height:18px;
        top:9px
    }
    .hero-bullets li::after{
        left:4px;
        top:6px
    }
    .hero-actions .btn{
        width:100%
    }
    #packagesContainerOuter{
        margin-top:-56px;
        padding:0 14px
    }
    .pm-card{
        padding:2px 18px
    }
    .pm-plan{
        grid-template-columns:1fr;
        gap:16px;
        padding:24px 0
    }
    .pm-main{
        text-align:center
    }
    .pm-head,.pm-features{
        justify-content:center
    }
    .pm-title{
        font-size:22px
    }
    .pm-desc{
        text-align:left
    }
    .section-head{
        margin-bottom:28px
    }
    .section-head h2{
        font-size:26px
    }
    .feature h2{
        font-size:25px
    }
    .ft-grid{
        grid-template-columns:1fr;
        gap:16px
    }
    #devicesContainer h2{
        font-size:28px
    }
    .cta-band{
        padding:38px 20px;
        margin-bottom:40px
    }
    .cta-band h2{
        font-size:26px
    }
    .faq-item summary{
        font-size:15.5px;
        padding:16px 46px 16px 18px
    }
    .faq-answer{
        padding:0 18px 18px;
        font-size:14.5px
    }
    .footer-grid{
        grid-template-columns:1fr;
        gap:26px;
        text-align:left
    }
    .page-hero{
        padding:40px 18px
    }
    .page-hero h1{
        font-size:28px
    }
    .legal{
        padding:26px 0 44px
    }
    .legal-card{
        padding:24px 20px
    }
    /* Sticky buy bar — mobile only; desktop keeps the pricing card in view. */
    .sticky-cta{
        display:block;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:9998;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom));
        background:rgba(1,20,50,.97);
        box-shadow:0 -4px 18px rgba(0,0,0,.35)
    }
    .sticky-cta a{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        min-height:48px;
        font-family:endzone-medium;
        font-size:16px;
        text-transform:uppercase;
        letter-spacing:.03em;
        color:#fff;
        background:var(--blue);
        border-radius:var(--radius-sm)
    }
}
@media (max-width:479px){
    .stats-grid{
        grid-template-columns:1fr 1fr;
        gap:12px
    }
    .stat{
        padding:18px 10px
    }
    .stat-num{
        font-size:27px
    }
    .stat-lbl{
        font-size:12px
    }
}

/* ---------- Accessibility ------------------------------------------------ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible{
    outline:3px solid #ffd34d;
    outline-offset:2px;
    border-radius:4px
}
a:focus,
button:focus,
[role="button"]:focus{
    outline:3px solid #ffd34d;
    outline-offset:2px
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible){
    outline:none
}
@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*::before,*::after{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important;
        scroll-behavior:auto!important
    }
}