@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,400;1,700&display=swap');

/*
    7 Minute Soccer Skills - Magazine layer (v2.1)
    Loaded AFTER 7mss-style-public.1.8.css. Global rules here only touch the
    site header and footer; everything else is scoped to .mag-* classes so
    older pages keep working until they are migrated.

    Palette: black + white, one accent. Change --mag-accent to re-theme.
*/

:root {
    --mag-ink: #111111;
    --mag-paper: #ffffff;
    --mag-cream: #f4f2ee;
    --mag-line: #e6e6e6;
    --mag-grey: #6b6b6b;
    --mag-accent: #e0182d;       /* 4.9:1 on white, white text on it 4.9:1 */
    --mag-accent-dark: #b5121f;
    --mag-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
    --mag-display: "Anton", Impact, sans-serif;
    --mag-serif: "Playfair Display", Georgia, serif;
    --header-h: 76px;
}

/* =================================================================
   SITE HEADER
   Default: solid black bar in normal flow (pages without a dark hero).
   .site-header--overlay: transparent, sits on top of the page's hero image.
   ================================================================= */
.site-header {position: relative; z-index: 1030; background: var(--mag-ink); color: #fff;}
.site-header--overlay {position: absolute; top: 0; left: 0; right: 0; background: transparent;}
.site-header-inner {display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); border-bottom: 1px solid rgba(255,255,255,.28);}
.site-header-inner:before, .site-header-inner:after {display: none;} /* cancel bootstrap clearfix inside flex */
.site-header:not(.site-header--overlay) .site-header-inner {border-bottom-color: transparent;}

/* Wordmark */
.site-brand {flex-shrink: 0; font-family: var(--mag-sans); font-weight: 700; font-size: 14px; letter-spacing: .26em; text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap;}
.site-brand:hover, .site-brand:focus {color: #fff; text-decoration: none;}
.site-brand:focus-visible {outline: 2px solid var(--mag-accent); outline-offset: 4px;}

/* Desktop nav */
.site-nav {display: flex; align-items: center;}
.site-nav:focus {outline: none;}
.site-nav-head, .site-nav-foot {display: none;}
.site-nav-list {display: flex; align-items: center; list-style: none; margin: 0; padding: 0;}
.site-nav-list li {margin: 0;}
.site-nav-list a {position: relative; display: block; padding: 8px 13px; font-family: var(--mag-sans); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); text-decoration: none; transition: color .15s;}
.site-nav-list a:after {content: ""; position: absolute; left: 13px; right: 13px; bottom: 1px; height: 2px; background: var(--mag-accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;}
.site-nav-list a:hover, .site-nav-list a:focus {color: #fff; text-decoration: none;}
.site-nav-list a:hover:after, .site-nav-list a:focus-visible:after {transform: scaleX(1);}
.site-nav-list li.active a {color: #fff;}
.site-nav-list li.active a:after {background: #fff; transform: scaleX(1);}
.site-nav-list li.nav-divider {width: 1px; height: 16px; background: rgba(255,255,255,.3); margin: 0 6px;}
.site-nav-list li.nav-cta a {margin-left: 8px; padding: 9px 18px; border: 1px solid rgba(255,255,255,.85); color: #fff; font-weight: 600;}
.site-nav-list li.nav-cta a:after {display: none;}
.site-nav-list li.nav-cta a:hover, .site-nav-list li.nav-cta a:focus {background: var(--mag-accent); border-color: var(--mag-accent); color: #fff;}

/* Hamburger + panel close */
.site-nav-toggle, .site-nav-close {display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;}
.site-nav-toggle .bun {position: absolute; left: 11px; width: 22px; height: 2px; background: #fff; border-radius: 1px;}
.site-nav-toggle .bun:nth-child(1) {top: 15px;}
.site-nav-toggle .bun:nth-child(2) {top: 21px;}
.site-nav-toggle .bun:nth-child(3) {top: 27px;}
.site-nav-close:before, .site-nav-close:after {content: ""; position: absolute; left: 11px; top: 21px; width: 22px; height: 2px; background: #fff; border-radius: 1px;}
.site-nav-close:before {transform: rotate(45deg);}
.site-nav-close:after {transform: rotate(-45deg);}
.site-nav-toggle:focus-visible, .site-nav-close:focus-visible {outline: 2px solid var(--mag-accent); outline-offset: 2px;}

.site-nav-scrim {display: none;}

/* Mobile: off-canvas panel from the right */
@media (max-width: 991px) {
    .site-nav-toggle, .site-nav-close {display: block;}

    .site-nav {position: fixed; top: 0; right: 0; bottom: 0; z-index: 1040; width: min(86vw, 380px); height: 100vh; height: 100dvh;
               flex-direction: column; align-items: stretch;
               padding: 0 32px 32px; background: var(--mag-ink); color: #fff; overflow-y: auto;
               transform: translateX(100%); visibility: hidden;
               transition: transform .4s cubic-bezier(.77,0,.18,1), visibility 0s linear .4s;}
    .nav-open .site-nav {transform: translateX(0); visibility: visible; transition: transform .4s cubic-bezier(.77,0,.18,1), visibility 0s;}

    .site-nav-head {display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); margin-bottom: 20px; border-bottom: 1px solid #262626;}
    .site-nav-head .site-brand {font-size: 12px; letter-spacing: .2em;}

    .site-nav-list {flex-direction: column; align-items: stretch;}
    .site-nav-list li {border-bottom: 1px solid #262626; opacity: 0; transform: translateX(24px); transition: opacity .3s ease, transform .3s ease;}
    .nav-open .site-nav-list li {opacity: 1; transform: none;}
    .nav-open .site-nav-list li:nth-child(1) {transition-delay: .12s;}
    .nav-open .site-nav-list li:nth-child(2) {transition-delay: .16s;}
    .nav-open .site-nav-list li:nth-child(3) {transition-delay: .20s;}
    .nav-open .site-nav-list li:nth-child(4) {transition-delay: .24s;}
    .nav-open .site-nav-list li:nth-child(5) {transition-delay: .28s;}
    .nav-open .site-nav-list li:nth-child(6) {transition-delay: .32s;}
    .nav-open .site-nav-list li:nth-child(7) {transition-delay: .36s;}

    .site-nav-list a {padding: 18px 0; font-size: 14px; letter-spacing: .16em; color: #fff;}
    .site-nav-list a:after {left: 0; right: auto; width: 28px; bottom: 12px;}
    .site-nav-list li.active a:after {background: var(--mag-accent);}
    .site-nav-list li.nav-divider {display: none;}
    .site-nav-list li.nav-cta {border-bottom: 0; margin-top: 28px;}
    .site-nav-list li.nav-cta a {margin: 0; padding: 16px 20px; text-align: center; border: 0; background: var(--mag-accent);}
    .site-nav-list li.nav-cta a:hover, .site-nav-list li.nav-cta a:focus {background: #fff; color: var(--mag-ink);}

    .site-nav-foot {display: block; margin-top: auto; padding-top: 40px; font-family: var(--mag-display); font-style: italic; text-transform: uppercase; font-size: 26px; line-height: 1.15; color: #fff;}
    .site-nav-foot small {display: block; margin-top: 10px; font-family: var(--mag-sans); font-style: normal; text-transform: none; font-size: 13px; color: #8a8a8a;}

    .site-nav-scrim {display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;}
    .nav-open .site-nav-scrim {opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s;}
    body.nav-open {overflow: hidden;}
}
@media (max-width: 400px) {
    .site-header-inner > .site-brand {font-size: 12px; letter-spacing: .2em;}
}

@media (prefers-reduced-motion: reduce) {
    .site-nav, .site-nav-list li, .site-nav-scrim, .site-nav-list a:after {transition: none !important;}
}

/* Old pages were built for a fixed 70px header; the header is now in flow. */
.site-header:not(.site-header--overlay) ~ form .page-header-bg {margin-top: 0;}

/* =================================================================
   MAGAZINE TYPE + BUTTONS
   ================================================================= */
.mag-kicker {display: inline-block; font-family: var(--mag-sans); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--mag-accent); margin-bottom: 12px;}
.mag-kicker:before {content: ""; display: inline-block; width: 28px; height: 2px; background: var(--mag-accent); vertical-align: middle; margin-right: 10px;}
.mag-headline {font-family: var(--mag-display); font-style: italic; text-transform: uppercase; font-weight: normal; line-height: 1.05; margin: 0 0 18px;}
.mag-dek {font-family: var(--mag-sans); font-size: 18px; line-height: 1.6; color: #444; margin: 0 0 24px;}
.mag-body, .mag-body p {font-family: var(--mag-sans); font-size: 16px; line-height: 1.75; color: #333;}
.mag-body a {color: var(--mag-ink); text-decoration: underline; text-decoration-color: var(--mag-accent); text-underline-offset: 3px;}
.mag-rule {width: 70px; height: 0; border: 0; border-top: 3px solid var(--mag-accent); margin: 0 0 18px;}
.mag-section {padding: 80px 0;}
.mag-section-head {margin-bottom: 40px;}
.mag-section-head .mag-headline {font-size: 42px; color: var(--mag-ink);}

.mag-btn {display: inline-block; font-family: var(--mag-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; padding: 15px 28px; border: 2px solid transparent; border-radius: 0; text-decoration: none; transition: background .15s, color .15s, border-color .15s;}
.mag-btn:hover, .mag-btn:focus {text-decoration: none;}
.mag-btn-accent {background: var(--mag-accent); color: #fff;}
.mag-btn-accent:hover, .mag-btn-accent:focus {background: #fff; color: var(--mag-ink);}
.mag-btn-ghost {background: transparent; color: #fff; border-color: #fff;}
.mag-btn-ghost:hover, .mag-btn-ghost:focus {background: #fff; color: var(--mag-ink);}
.mag-btn-ink {background: var(--mag-ink); color: #fff;}
.mag-btn-ink:hover, .mag-btn-ink:focus {background: var(--mag-accent); color: #fff;}
.mag-btn-light {background: #fff; color: var(--mag-ink);}
.mag-btn-light:hover, .mag-btn-light:focus {background: var(--mag-accent); color: #fff;}
.mag-btn + .mag-btn {margin-left: 10px;}
.mag-link {font-family: var(--mag-sans); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: inherit; border-bottom: 2px solid var(--mag-accent); padding-bottom: 2px; text-decoration: none;}
.mag-link:hover, .mag-link:focus {color: inherit; text-decoration: none; border-bottom-color: currentColor;}

/* =================================================================
   COVER
   ================================================================= */
.mag-cover {position: relative; min-height: 640px; color: #fff; background: #111 url('/i/bennett-follow-along-3.jpg') no-repeat 30% center; background-size: cover; display: flex; align-items: flex-end;}
.mag-cover:before {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%), linear-gradient(90deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.4) 45%, rgba(0,0,0,.88) 100%);}
.mag-cover .container {position: relative; width: 100%;}
.mag-cover-story {padding: 150px 0 70px; max-width: 580px; margin-left: auto;}
.mag-cover .mag-kicker {color: #fff;}
.mag-cover h1.mag-headline {font-size: 74px; line-height: 1; color: #fff; margin-bottom: 26px;}
.mag-cover h1 .line {display: block;}
.mag-cover h1 .line + .line {margin-top: .08em;}
.mag-cover h1 .hl {display: inline-block; margin-top: .18em; padding: .08em .16em .04em .08em; background: var(--mag-accent);}
.mag-cover .mag-dek {color: rgba(255,255,255,.9);}
.mag-cover-credit {font-family: var(--mag-sans); font-size: 13px; color: rgba(255,255,255,.7); margin-top: 22px;}
.mag-cover-credit a {color: #fff; text-decoration: underline; text-underline-offset: 3px;}

/* =================================================================
   CONTENTS STRIP
   ================================================================= */
.mag-contents {background: var(--mag-ink); color: #fff;}
.mag-contents .row {margin: 0;}
.mag-contents-item {position: relative; padding: 34px 22px 30px; border-right: 1px solid #262626; display: block; color: #fff; text-decoration: none; transition: background .2s;}
.mag-contents-item:before {content: ""; position: absolute; top: 0; left: 22px; width: 28px; height: 2px; background: var(--mag-accent); transition: width .35s cubic-bezier(.77,0,.18,1);}
.mag-contents-item:last-child {border-right: none;}
.mag-contents-item:hover, .mag-contents-item:focus {background: #181818; text-decoration: none; color: #fff;}
.mag-contents-item:hover:before, .mag-contents-item:focus-visible:before {width: calc(100% - 44px);}
.mag-contents-num {font-family: var(--mag-display); font-size: 44px; line-height: 1; display: block; margin-bottom: 12px; color: rgba(255,255,255,.55);}
@supports (-webkit-text-stroke: 1px #fff) {
    .mag-contents-num {color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.75); transition: color .2s;}
    .mag-contents-item:hover .mag-contents-num, .mag-contents-item:focus .mag-contents-num {color: #fff; -webkit-text-stroke-color: #fff;}
}
.mag-contents-title {font-family: var(--mag-sans); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .12em; display: block;}
.mag-contents-sub {font-family: var(--mag-sans); font-size: 13px; color: #9a9a9a; display: block; margin-top: 6px;}

/* =================================================================
   FEATURE
   ================================================================= */
.mag-feature .mag-headline {font-size: 46px; color: var(--mag-ink);}
.mag-feature .mag-dropcap:first-letter {float: left; font-family: var(--mag-display); font-size: 74px; line-height: .9; padding: 6px 10px 0 0; color: var(--mag-ink);}
.mag-figure {margin: 0;}
.mag-figure .video {box-shadow: 0 18px 40px rgba(0,0,0,.18);}
.mag-figure figcaption {font-family: var(--mag-sans); font-size: 13px; color: var(--mag-grey); margin-top: 14px; border-left: 3px solid var(--mag-accent); padding-left: 10px;}

/* =================================================================
   SCOREBOARD
   ================================================================= */
.mag-scoreboard {background: var(--mag-cream);}
.mag-score {background: #fff; padding: 30px 24px; margin-bottom: 24px; border-top: 4px solid var(--mag-ink); min-height: 200px;}
.mag-score-pts {font-family: var(--mag-display); font-size: 60px; line-height: 1; color: var(--mag-ink);}
.mag-score-pts small {font-family: var(--mag-sans); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--mag-grey); margin-left: 6px;}
.mag-score h3 {font-family: var(--mag-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; margin: 14px 0 8px; text-align: left;}
.mag-score p {font-family: var(--mag-sans); font-size: 14px; line-height: 1.6; color: #555; margin: 0;}
.mag-score.is-accent {border-top-color: var(--mag-accent);}
.mag-score.is-accent .mag-score-pts {color: var(--mag-accent);}
.mag-score-total {font-family: var(--mag-sans); font-size: 15px; color: #444; margin-top: 10px;}
.mag-score-total strong {font-family: var(--mag-display); font-weight: normal; font-size: 22px; color: var(--mag-ink);}
.mag-score-total a {color: var(--mag-ink); text-decoration: underline; text-decoration-color: var(--mag-accent); text-underline-offset: 3px;}

/* =================================================================
   STORY CARDS
   ================================================================= */
.mag-card {display: block; background: #fff; margin-bottom: 30px; color: var(--mag-ink); text-decoration: none; transition: transform .2s, box-shadow .2s;}
.mag-card:hover, .mag-card:focus {transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.14); text-decoration: none; color: var(--mag-ink);}
.mag-card-img {height: 230px; background-size: cover; background-position: center; background-color: #222;}
.mag-card-body {padding: 22px 22px 26px;}
.mag-card-body .mag-kicker {margin-bottom: 8px;}
.mag-card-body h3 {font-family: var(--mag-display); font-style: italic; text-transform: uppercase; font-size: 26px; line-height: 1.1; margin: 0 0 10px; text-align: left;}
.mag-card-body p {font-family: var(--mag-sans); font-size: 15px; line-height: 1.6; color: #555; margin: 0;}
.mag-card-more {display: inline-block; margin-top: 16px; font-family: var(--mag-sans); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .12em; border-bottom: 2px solid var(--mag-accent); padding-bottom: 2px;}

/* =================================================================
   PULL QUOTE
   ================================================================= */
.mag-quote {position: relative; color: #fff; text-align: center; padding: 110px 0; background: #111 url('/i/bg-field-dark.jpg') no-repeat center center; background-size: cover;}
.mag-quote:before {content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.62);}
.mag-quote blockquote {position: relative; border: none; margin: 0 auto; padding: 0; max-width: 860px; font-family: var(--mag-serif); font-style: italic; font-size: 42px; line-height: 1.3;}
.mag-quote cite {position: relative; display: block; margin-top: 24px; font-family: var(--mag-sans); font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: rgba(255,255,255,.8);}
.mag-quote cite:before {content: ""; display: block; width: 40px; height: 2px; background: var(--mag-accent); margin: 0 auto 16px;}

/* =================================================================
   COACHES (black band)
   ================================================================= */
.mag-coaches {background: var(--mag-ink); color: #fff;}
.mag-coaches .mag-headline {font-size: 44px; color: #fff;}
.mag-coaches .mag-kicker {color: #fff;}
.mag-coaches .mag-dek {color: rgba(255,255,255,.8);}
.mag-steps {list-style: none; padding: 0; margin: 0 0 28px; counter-reset: step;}
.mag-steps li {counter-increment: step; position: relative; padding: 16px 0 16px 58px; border-bottom: 1px solid #2a2a2a; font-family: var(--mag-sans); font-size: 16px; line-height: 1.5;}
.mag-steps li:before {content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 10px; font-family: var(--mag-display); font-size: 30px; color: rgba(255,255,255,.55);}
@supports (-webkit-text-stroke: 1px #fff) {
    .mag-steps li:before {color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.75);}
}
.mag-steps li:first-child {border-top: 2px solid var(--mag-accent);}

/* =================================================================
   PRICING
   ================================================================= */
.mag-pricing {text-align: center;}
.mag-price-card {border: 2px solid var(--mag-ink); padding: 38px 26px; margin-bottom: 24px; background: #fff;}
.mag-price-card.is-featured {background: var(--mag-ink); color: #fff;}
.mag-price-card h3 {font-family: var(--mag-sans); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .16em; margin: 0 0 10px; text-align: center;}
.mag-price {font-family: var(--mag-display); font-size: 64px; line-height: 1; margin: 12px 0;}
.mag-price small {font-family: var(--mag-sans); font-size: 15px; font-weight: 500; opacity: .7;}
.mag-price-card p {font-family: var(--mag-sans); font-size: 15px; line-height: 1.6; margin: 0 0 24px; opacity: .85;}

/* =================================================================
   FOOTER
   ================================================================= */
footer.mag-footer {background: var(--mag-ink); border-top: 4px solid var(--mag-accent); padding: 56px 0 30px; color: #fff;}
footer.mag-footer h3 {font-family: var(--mag-sans); font-weight: 700; font-style: normal; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; text-align: left; margin-bottom: 16px; color: #8a8a8a;}
footer.mag-footer ul.nav li {text-align: left;}
footer.mag-footer ul.nav > li > a {font-family: var(--mag-sans); font-style: normal; font-size: 14px; color: #ddd; padding: 5px 0;}
footer.mag-footer ul.nav > li > a:hover, footer.mag-footer ul.nav > li > a:focus {background: transparent; color: #fff; text-decoration: underline; text-decoration-color: var(--mag-accent);}
footer.mag-footer .footer-tag {font-family: var(--mag-display); font-style: italic; text-transform: uppercase; font-size: 24px; line-height: 1.15; text-align: left; margin: 16px 0 0;}
footer.mag-footer p.copy {font-family: var(--mag-sans); font-size: 12px; color: #777; text-align: left; border-top: 1px solid #262626; padding-top: 18px; margin-top: 24px;}
footer.mag-footer p.copy a {color: #777;}
footer.mag-footer .footer-brand {font-family: var(--mag-sans); font-weight: 700; font-size: 14px; letter-spacing: .26em; text-transform: uppercase; color: #fff; text-decoration: none;}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 991px) {
    .mag-cover h1.mag-headline {font-size: 60px;}
    .mag-contents-item {border-right: none; border-bottom: 1px solid #262626;}
}
@media (max-width: 767px) {
    .mag-cover {min-height: 560px; background-position: 25% center;}
    .mag-cover:before {background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.88) 70%);}
    .mag-cover-story {padding: 200px 0 44px; margin-left: 0;}
    .mag-cover h1.mag-headline {font-size: 46px;}
    .mag-section {padding: 56px 0;}
    .mag-section-head .mag-headline, .mag-feature .mag-headline, .mag-coaches .mag-headline {font-size: 32px;}
    .mag-quote {padding: 72px 0;}
    .mag-quote blockquote {font-size: 27px; padding: 0 10px;}
    .mag-figure {margin-top: 34px;}
    .mag-btn {display: block; text-align: center;}
    .mag-btn + .mag-btn {margin: 10px 0 0;}
}

/* =================================================================
   INNER PAGES
   ================================================================= */

/* Page cover: dark photo, overlay header sits on top.
   Set the photo per page with style="--hero:url('/i/x.jpg')". */
.mag-page-hero {position: relative; color: #fff; background: #111 var(--hero, none) no-repeat center center; background-size: cover; padding: calc(var(--header-h) + 90px) 0 70px;}
.mag-page-hero:before {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.82) 100%);}
.mag-page-hero .container {position: relative;}
.mag-page-hero .mag-kicker {color: #fff;}
.mag-page-hero h1.mag-headline {font-size: 68px; line-height: 1; color: #fff; max-width: 860px; margin-bottom: 20px;}
.mag-page-hero h1.mag-headline.mag-headline-sm {font-size: 46px;}   /* the sign-up pages: a smaller headline */
@media (max-width: 767px) { .mag-page-hero h1.mag-headline.mag-headline-sm {font-size: 36px;} }
.mag-page-hero h1 .hl {display: inline-block; padding: .06em .16em .02em .08em; background: var(--mag-accent);}
.mag-page-hero .mag-dek {color: rgba(255,255,255,.88); max-width: 640px; margin-bottom: 0;}
.mag-page-hero .mag-btn {margin-top: 28px;}

.mag-crumbs {list-style: none; padding: 0; margin: 0 0 26px; font-family: var(--mag-sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;}
.mag-crumbs li {display: inline; color: rgba(255,255,255,.6);}
.mag-crumbs li + li:before {content: "/"; margin: 0 10px; color: rgba(255,255,255,.35);}
.mag-crumbs a {color: rgba(255,255,255,.85); text-decoration: none;}
.mag-crumbs a:hover, .mag-crumbs a:focus {color: #fff; text-decoration: underline; text-decoration-color: var(--mag-accent);}

/* Article column */
.mag-article {max-width: 720px;}
.mag-article.is-centered {margin: 0 auto;}
.mag-article h2 {font-family: var(--mag-display); font-style: italic; text-transform: uppercase; font-weight: normal; font-size: 32px; line-height: 1.05; color: var(--mag-ink); margin: 44px 0 14px; text-align: left;}
.mag-article h2:first-child {margin-top: 0;}
.mag-article p, .mag-article li {font-family: var(--mag-sans); font-size: 17px; line-height: 1.75; color: #333;}
.mag-article p {margin: 0 0 18px;}
.mag-article a {color: var(--mag-ink); text-decoration: underline; text-decoration-color: var(--mag-accent); text-underline-offset: 3px;}
.mag-article .mag-lede {font-size: 21px; line-height: 1.6; color: var(--mag-ink);}
.mag-article .mag-lede:first-letter {float: left; font-family: var(--mag-display); font-size: 84px; line-height: .85; padding: 6px 12px 0 0;}
.mag-list {list-style: none; padding: 0; margin: 0 0 24px;}
.mag-list li {position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--mag-line);}
.mag-list li:before {content: ""; position: absolute; left: 0; top: 23px; width: 16px; height: 2px; background: var(--mag-accent);}
.mag-pullout {margin: 36px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--mag-accent); font-family: var(--mag-serif); font-style: italic; font-size: 26px; line-height: 1.4; color: var(--mag-ink);}

/* Sidebar */
.mag-aside {border-top: 4px solid var(--mag-ink); padding-top: 22px;}
.mag-aside h3 {font-family: var(--mag-sans); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--mag-grey); margin: 0 0 14px; text-align: left;}
.mag-aside p {font-family: var(--mag-sans); font-size: 15px; line-height: 1.65; color: #444;}
.mag-aside + .mag-aside {margin-top: 40px;}

/* Byline */
.mag-byline {display: flex; align-items: center; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--mag-line);}
.mag-byline img {width: 64px; height: 64px; border-radius: 50%; object-fit: cover;}
.mag-byline span {display: block; font-family: var(--mag-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mag-grey);}
.mag-byline a {font-family: var(--mag-sans); font-weight: 700; font-size: 16px; color: var(--mag-ink); text-decoration: none;}
.mag-byline a:hover {text-decoration: underline; text-decoration-color: var(--mag-accent);}

/* Split feature row (text + image) */
.mag-split {display: flex; align-items: center; flex-wrap: wrap;}
.mag-split + .mag-split {margin-top: 80px;}
.mag-split .mag-headline {font-size: 40px; color: var(--mag-ink);}
.mag-split img {width: 100%; height: auto; box-shadow: 0 18px 40px rgba(0,0,0,.18);}

/* Bands */
.mag-band-dark {background: var(--mag-ink); color: #fff;}
.mag-band-dark .mag-kicker, .mag-band-dark .mag-headline, .mag-band-dark .mag-split .mag-headline {color: #fff;}
.mag-band-dark .mag-dek, .mag-band-dark p {color: rgba(255,255,255,.82);}
.mag-band-cream {background: var(--mag-cream);}

/* Call-to-action band; also styles server-rendered membership HTML */
.mag-cta {background: var(--mag-ink); color: #fff; padding: 80px 0; text-align: center;}
.mag-cta:after {content: ""; display: block; width: 40px; height: 2px; background: var(--mag-accent); margin: 40px auto 0;}
.mag-cta .mag-headline {font-size: 46px; color: #fff;}
.mag-cta .mag-kicker {color: #fff;}
.mag-membership {font-family: var(--mag-sans); color: rgba(255,255,255,.85); margin: 0 auto 28px; max-width: 560px;}
.mag-membership .clear10, .mag-membership .clear20 {height: 0;}
.mag-membership h3 {font-family: var(--mag-sans); font-style: normal; font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); margin: 0 0 8px; text-align: center;}
.mag-membership h3 + h3, .mag-membership h3 span {font-family: var(--mag-display); font-weight: normal; letter-spacing: 0; font-size: 52px; color: #fff; text-transform: none; background: none; padding: 0;}
.mag-membership table {margin: 0 auto; font-size: 15px !important;}
.mag-membership table h3 {font-family: var(--mag-sans); font-size: 14px; letter-spacing: .14em; text-transform: uppercase;}
.mag-membership ul {list-style: none; padding: 0; margin: 14px 0 0;}
.mag-membership li {padding: 6px 0; border-bottom: 1px solid #262626;}
.mag-membership p {margin: 0 0 10px;}

/* Leaderboard (server-rendered table) */
.mag-leaderboard .programHeader h2 {font-family: var(--mag-sans); font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--mag-grey); margin: 0 0 8px; text-align: left;}
.mag-leaderboard .leaderboard {border-top: 4px solid var(--mag-ink);}
.mag-leaderboard .leaderboard > div[style] {font-family: var(--mag-sans); color: var(--mag-grey);}
.mag-leaderboard .table {font-family: var(--mag-sans); font-size: 15px; margin: 0;}
.mag-leaderboard .table > tbody > tr > th {font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mag-grey); border-top: 0; border-bottom: 1px solid var(--mag-ink); padding: 14px 10px;}
.mag-leaderboard .table > tbody > tr > td {border-top: 1px solid var(--mag-line); padding: 14px 10px; vertical-align: middle;}
.mag-leaderboard .table-striped > tbody > tr:nth-of-type(odd) {background: transparent;}
.mag-leaderboard .table > tbody > tr > td:first-child {font-family: var(--mag-display); font-size: 22px; width: 70px;}
.mag-leaderboard .table > tbody > tr:nth-child(2) > td:first-child {color: var(--mag-accent);}
.mag-leaderboard .table img.flag {height: 16px; width: auto;}

/* Videos (server-rendered grid) */
.mag-videos h4 {font-family: var(--mag-sans); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px;}
.mag-videos .video {box-shadow: 0 10px 24px rgba(0,0,0,.14);}

/* Choice cards (sign-up chooser) */
.mag-choices {display: flex; flex-wrap: wrap; gap: 24px; margin-top: 36px;}
.mag-choice {position: relative; flex: 1 1 260px; display: block; padding: 34px 30px 30px; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.35); color: #fff; text-decoration: none; transition: background .2s, border-color .2s;}
.mag-choice:before {content: ""; position: absolute; top: -1px; left: -1px; width: 40px; height: 3px; background: var(--mag-accent); transition: width .35s cubic-bezier(.77,0,.18,1);}
.mag-choice:hover, .mag-choice:focus {background: rgba(0,0,0,.6); border-color: #fff; color: #fff; text-decoration: none;}
.mag-choice:hover:before, .mag-choice:focus-visible:before {width: calc(100% + 2px);}
.mag-choice-title {display: block; font-family: var(--mag-display); font-style: italic; text-transform: uppercase; font-size: 44px; line-height: 1;}
.mag-choice-sub {display: block; margin-top: 12px; font-family: var(--mag-sans); font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.8);}
.mag-choice-go {display: inline-block; margin-top: 22px; font-family: var(--mag-sans); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 2px solid var(--mag-accent); padding-bottom: 2px;}

/* Forms on a dark cover (contact, sign-up) */
.mag-form-card {max-width: 560px; background: #fff; color: var(--mag-ink); padding: 36px 34px; margin-top: 36px; border-top: 4px solid var(--mag-accent); box-shadow: 0 30px 60px rgba(0,0,0,.35);}
.mag-form-card #signup-form, .mag-form-card .frm {background: transparent; padding: 0; width: auto !important; margin: 0; color: #444; border-radius: 0;}
.mag-form-card #signup-form .row {margin-left: -3px; margin-right: -3px;}
.mag-form-card h3 {font-family: var(--mag-sans); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--mag-grey); margin: 6px 0 12px; padding: 0 3px; text-align: left;}
.mag-form-card .form-control {height: 46px; border-radius: 0; border: 1px solid #cfcfcf; background: #fff; box-shadow: none; font-family: var(--mag-sans); font-size: 15px;}
.mag-form-card textarea.form-control {height: 130px !important;}
.mag-form-card .form-control:focus {border-color: var(--mag-ink); box-shadow: 0 0 0 1px var(--mag-ink);}
.mag-form-card .left-inner-addon i {padding: 15px 12px; color: #999;}
.mag-form-card hr {border-top-color: var(--mag-line); margin: 22px 0;}
.mag-form-card .btn {border-radius: 0; font-family: var(--mag-sans); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 13px 24px; border: 2px solid var(--mag-ink); background: #fff; color: var(--mag-ink); text-shadow: none; box-shadow: none; background-image: none;}
.mag-form-card .btn:hover, .mag-form-card .btn:focus {background: var(--mag-cream);}
.mag-form-card .btn-primary {background: var(--mag-ink); color: #fff;}
.mag-form-card .btn-primary:hover, .mag-form-card .btn-primary:focus {background: var(--mag-accent); border-color: var(--mag-accent); color: #fff;}
.mag-form-card a {color: var(--mag-ink); text-decoration: underline; text-decoration-color: var(--mag-accent);}
.mag-form-card .captcha-container img {border: 1px solid var(--mag-line); margin-bottom: 8px;}
.mag-form-card .modal, .mag-form-card .modal a {color: var(--mag-ink);}

/* Profile (coach bio) */
.mag-profile {display: flex; align-items: flex-end; flex-wrap: wrap; gap: 40px;}
.mag-profile-text {flex: 1 1 420px;}
.mag-profile-photo {flex: 0 1 360px; position: relative;}
.mag-profile-photo img {width: 100%; display: block; filter: grayscale(100%) contrast(1.05);}
.mag-profile-photo:after {content: ""; position: absolute; left: -12px; bottom: -12px; width: 60%; height: 3px; background: var(--mag-accent);}
.mag-facts {display: flex; flex-wrap: wrap; margin-top: 34px; border-top: 1px solid rgba(255,255,255,.25);}
.mag-fact {flex: 1 1 140px; padding: 18px 20px 0 0;}
.mag-fact strong {display: block; font-family: var(--mag-display); font-weight: normal; font-size: 30px; line-height: 1; color: #fff;}
.mag-fact span {display: block; margin-top: 6px; font-family: var(--mag-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65);}

@media (max-width: 991px) {
    .mag-page-hero h1.mag-headline {font-size: 54px;}
    .mag-aside {margin-top: 50px;}
    .mag-split > [class*="col-"] + [class*="col-"] {margin-top: 30px;}
}
@media (max-width: 767px) {
    .mag-page-hero {padding: calc(var(--header-h) + 50px) 0 48px;}
    .mag-page-hero h1.mag-headline {font-size: 40px;}
    .mag-article h2, .mag-split .mag-headline, .mag-cta .mag-headline {font-size: 28px;}
    .mag-article p, .mag-article li {font-size: 16px;}
    .mag-article .mag-lede {font-size: 18px;}
    .mag-split + .mag-split {margin-top: 50px;}
    .mag-cta {padding: 56px 0;}
    .mag-form-card {padding: 26px 20px;}
    .mag-leaderboard .table {font-size: 13px;}
    .mag-leaderboard .table > tbody > tr > th:nth-child(5), .mag-leaderboard .table > tbody > tr > td:nth-child(5) {display: none;}
    .mag-choice-title {font-size: 36px;}
    .mag-profile-photo {flex-basis: 100%;}
}

/* Inner pages: small extras */
.mag-page-hero .mag-dek a, .mag-steps a {color: #fff; text-decoration: underline; text-decoration-color: var(--mag-accent); text-underline-offset: 3px;}
.mag-page-hero .mag-dek a:hover, .mag-steps a:hover {color: #fff;}
.mag-page-hero #message:empty {display: none;}
.mag-page-hero noscript {color: var(--mag-ink);}

.mag-facts-lg .mag-fact {padding-top: 28px;}
.mag-facts-lg .mag-fact strong {font-size: 76px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.85);}
@supports not (-webkit-text-stroke: 1px #fff) {
    .mag-facts-lg .mag-fact strong {color: #fff;}
}

.mag-points-table {width: 100%; font-family: var(--mag-sans); font-size: 15px; margin: 0;}
.mag-points-table td {padding: 12px 0; border-bottom: 1px solid var(--mag-line);}
.mag-points-table td:last-child {text-align: right; font-family: var(--mag-display); font-size: 20px;}
.mag-points-table tr:last-child td {border-bottom: 0; border-top: 2px solid var(--mag-ink); font-weight: 700;}
.mag-points-table tr:last-child td:last-child {font-size: 30px; color: var(--mag-accent);}

@media (max-width: 767px) {
    .mag-facts-lg .mag-fact strong {font-size: 54px;}
}

/* Buttons and kicker links inside article copy keep their own colours */
.mag-article a.mag-btn {text-decoration: none;}
.mag-article a.mag-btn-ink, .mag-article a.mag-btn-accent {color: #fff;}
.mag-article a.mag-btn-ink:hover, .mag-article a.mag-btn-ink:focus {color: #fff;}
.mag-article a.mag-link {text-decoration: none;}

/* Busy cover photos get a heavier overlay */
.mag-page-hero.is-dense:before {background: linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.78) 50%, rgba(0,0,0,.9) 100%);}

/* Tall app screenshots: show the top, cap the height */
img.mag-shot {width: 100%; max-height: 480px; object-fit: cover; object-position: top center;}
.mag-aside img.mag-shot {max-height: 360px; border: 1px solid var(--mag-line);}

/* Sign-up card: server-rendered plan description, price badge and progress bar */
.mag-form-card, .mag-form-card p, .mag-form-card li, .mag-form-card label, .mag-form-card span {font-family: var(--mag-sans);}
.mag-form-card p, .mag-form-card li {font-size: 15px; line-height: 1.6; color: #444;}
.mag-form-card h2 {font-family: var(--mag-display); font-style: italic; text-transform: uppercase; font-weight: normal; font-size: 30px; line-height: 1.05; color: var(--mag-ink); margin: 0 0 10px; text-align: left;}
.mag-form-card ul {padding-left: 0; list-style: none; margin: 10px 0 16px;}
.mag-form-card ul li {position: relative; padding: 4px 0 4px 24px;}
.mag-form-card ul li:before {content: ""; position: absolute; left: 0; top: 15px; width: 12px; height: 2px; background: var(--mag-accent);}
.mag-form-card .bg-green, .mag-form-card .bg-blue {display: inline-block; background: var(--mag-ink); color: #fff; padding: 6px 12px; font-family: var(--mag-sans); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;}
.mag-form-card .progress {height: 6px; border-radius: 0; box-shadow: none; background: var(--mag-line); margin: 4px 3px 18px;}
.mag-form-card .progress-bar {background-color: var(--mag-accent); background-image: none; box-shadow: none; font-size: 0;}
.mag-form-card input[type=checkbox] {margin-right: 6px;}

@media (max-width: 767px) {
    .mag-form-card .btn.pull-left, .mag-form-card .btn.pull-right {float: none !important; display: block; width: 100%; margin: 0 0 10px;}
}

/* Pricing: two player prices + coach */
.mag-price-card {position: relative; height: calc(100% - 24px);}
.mag-pricing .row {display: flex; flex-wrap: wrap;}
.mag-pricing .row:before, .mag-pricing .row:after {display: none;}
.mag-price-flag {position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--mag-accent); color: #fff; font-family: var(--mag-sans); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 12px; white-space: nowrap;}
.mag-cta-dek {max-width: 600px; margin: 0 auto 28px; color: rgba(255,255,255,.82);}
.mag-cta-note {margin: 18px 0 0; font-family: var(--mag-sans); font-size: 14px; color: rgba(255,255,255,.7);}
.mag-choice-price {display: block; margin-top: 10px; font-family: var(--mag-display); font-size: 34px; line-height: 1; color: #fff;}
.mag-choice-price small {font-family: var(--mag-sans); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65);}
@media (max-width: 991px) {
    .mag-price-card {height: auto; margin-bottom: 34px;}
}

/* Login (cover with form card, matches For Coaches) */
.mag-login .mag-form-card {margin-top: 0; max-width: none;}
.mag-form-card #login {background: transparent; padding: 0; margin: 0; width: auto !important; color: #444; border-radius: 0; text-align: left;}
.mag-form-card #login #txtPassword {width: 100%; float: none;}
.mag-form-card #login .form-group {margin-bottom: 12px;}
.mag-login-row {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; font-family: var(--mag-sans); font-size: 14px; color: #555;}
.mag-check {font-weight: 400; margin: 0; cursor: pointer;}
.mag-btn-block {display: block; width: 100%; text-align: center;}
.mag-player-select .loginPlayer {margin-bottom: 10px;}
.mag-login-links {list-style: none; padding: 0; margin: 30px 0 0; font-family: var(--mag-sans); font-size: 15px; color: rgba(255,255,255,.75);}
.mag-login-links li {padding: 12px 0; border-top: 1px solid rgba(255,255,255,.2);}
.mag-login-links li:last-child {border-bottom: 1px solid rgba(255,255,255,.2);}
.mag-login-links a {color: #fff; font-weight: 600; margin-left: 6px; text-decoration: underline; text-decoration-color: var(--mag-accent); text-underline-offset: 3px;}
.mag-login-links a:hover, .mag-login-links a:focus {color: #fff;}
@media (max-width: 991px) {
    .mag-login .mag-form-card {margin-top: 36px;}
}

/* Login fixes: cancel the old 1.8 float/height on the button; keep icon font; flat alerts */
.mag-form-card #login #btnLogin {float: none; height: auto; margin: 0;}
.mag-form-card a.btn, .mag-form-card a.btn:hover, .mag-form-card a.btn:focus {text-decoration: none;}
.mag-form-card .glyphicon {font-family: "Glyphicons Halflings";}
.mag-form-card .alert {border-radius: 0; border: 0; border-left: 3px solid var(--mag-accent); background: #fbeaec; color: var(--mag-ink); font-family: var(--mag-sans); font-size: 14px; padding: 12px 14px; margin-bottom: 18px;}
.mag-form-card .alert-success {border-left-color: var(--mag-ink); background: var(--mag-cream);}

/* Pre-darkened cover photos (e.g. bg-indoor-dark.jpg): brighten the photo, and use a
   left-weighted overlay so the headline stays readable while the right side opens up. */
.mag-page-hero.is-lift {background-image: none; overflow: hidden;}
.mag-page-hero.is-lift:after {content: ""; position: absolute; inset: 0; background: var(--hero) no-repeat var(--hero-pos, center 88%); background-size: cover; filter: brightness(var(--lift, 2.4)) contrast(1.1) saturate(1.15);}
.mag-page-hero.is-lift:before {z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.12) 100%), linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.5) 100%);}
.mag-page-hero.is-lift .container {z-index: 2;}
@media (max-width: 767px) {
    .mag-page-hero.is-lift:before {background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.8) 100%);}
}

/* Legal pages: long-form text */
.mag-legal {max-width: 760px;}
.mag-legal h2 {font-size: 26px; margin-top: 40px;}
.mag-legal h3 {font-family: var(--mag-sans); font-style: normal; font-weight: 700; font-size: 15px; text-transform: none; letter-spacing: 0; text-align: left; color: var(--mag-ink); margin: 22px 0 6px;}
.mag-legal ul {padding-left: 20px;}

/* Sign-up review success message (white on the celebration photo) */
.signup-review #celebrate h2, .signup-review #celebrate h3 {color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.55);}