/* ==========================================================================
   Motorcycle Riders Hub — owner's list 19-20 Oct 2026: bold centred section
   titles, the Simon story and course tiles on the homepage, the Membership
   & Pricing matrix, the Training App page and the Rider Development
   Journey. Loaded after v3.css (see header.php).
   ========================================================================== */

/* Bold, centred section titles so riders always know where they are. */
.section-title{text-align:center;font-size:clamp(30px,4vw,44px);font-weight:600;max-width:960px;margin:0 auto 6px;}
.section-title + .tagline,.tagline.center{text-align:center;}
.lp-sec > .wrap > .section-title{margin-bottom:10px;}
.lp-sec .section-title ~ .lp-grid{margin-top:34px;}
.center .lead{margin-left:auto;margin-right:auto;}

/* Store badges in a row. */
.store-badges{display:flex;flex-wrap:wrap;gap:10px;}
.store-badges .store-badge{margin-bottom:0;}

/* ------------------------------------------------- homepage ----------- */
/* Trust strip: the five star rating. */
.stat .stars{color:#F5B301;letter-spacing:1px;font-size:20px;margin-left:2px;vertical-align:1px;}

/* Course tiles with a darkened photo of the training type. */
.course-tile--img{position:relative;overflow:hidden;background-size:cover;background-position:center;min-height:250px;justify-content:center;}
.course-tile--img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,26,36,.62),rgba(18,26,36,.78));transition:background .2s ease;}
.course-tile--img > *{position:relative;z-index:1;}
.course-tile--img h3{font-size:30px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45);}
.course-tile--img .ct-kicker,.course-tile--img .ct-sub,.course-tile--img .ct-cta{color:#fff;opacity:1;text-shadow:0 1px 8px rgba(0,0,0,.5);}
.course-tile--img:hover::before{background:linear-gradient(180deg,rgba(18,26,36,.5),rgba(18,26,36,.7));}
.course-tile--img:hover{box-shadow:0 22px 45px rgba(18,26,36,.35);}

/* Simon's story over a full-width dark photo (owner's Fig 1).
   The photograph is a still from a Mod 1 video and carries a "PASS THE MOD 1
   TEST" caption burnt into the bottom right corner, from 84% of the image's
   height down. Framing it with `cover` left that caption showing (owner's
   note, 26 Oct 2026), so the shot is zoomed in and anchored near the top:
   the visible window stops around three quarters of the way down, well
   above the caption, and Simon stays right of the text column. Any zoom
   below about 108% lets the caption creep back in. */
.simon-story{position:relative;background:#111820;color:#fff;overflow:hidden;}
.simon-story__bg{position:absolute;inset:0;background-size:115% auto;background-position:70% 8%;background-repeat:no-repeat;}
.simon-story__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,17,23,.94) 0%,rgba(12,17,23,.86) 42%,rgba(12,17,23,.25) 75%,rgba(12,17,23,.1) 100%);}
.simon-story .wrap{position:relative;z-index:1;padding-top:96px;padding-bottom:96px;}
.simon-story__text{max-width:560px;}
.simon-story h2{color:#fff;}
.simon-story .kicker{color:var(--teal);}
.simon-story .prose p{color:#DDE5EC;}
.simon-story .byline li:last-child{color:#B9C6D2;}
@media (max-width:900px){
  /* Taller than it is wide, so the zoom is set on the height instead and
     anchored to the top, for the same reason. */
  .simon-story__bg{background-size:auto 130%;background-position:60% 0;}
  .simon-story__bg::after{background:linear-gradient(180deg,rgba(12,17,23,.7) 0%,rgba(12,17,23,.92) 45%,rgba(12,17,23,.96) 100%);}
}

/* ------------------------------------------------ course pages -------- */
/* Long lesson names must not push the sidebar wider than a phone. */
.topic-layout > *{min-width:0;}
.acc-btn{white-space:normal;text-align:left;}

/* ------------------------------------------- membership & pricing ----- */
.one-account{display:grid;grid-template-columns:72px 1fr;gap:26px;align-items:start;max-width:900px;margin:0 auto;background:#fff;border:2px solid var(--teal);border-radius:20px;padding:34px 36px;box-shadow:var(--shadow-card);}
.one-account svg{width:64px;height:64px;color:var(--teal-dark);}
.mx-wrap{margin-top:36px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px;box-shadow:var(--shadow-card);background:#fff;}
.mx{width:100%;min-width:620px;border-collapse:collapse;font-size:15px;}
.mx th,.mx td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:center;}
.mx th[scope=row]{text-align:left;font-weight:500;}
.mx thead th{font-size:13px;letter-spacing:.06em;font-weight:700;color:var(--navy);background:#F7F9FB;}
.mx thead th:first-child{text-align:left;}
.mx-price th,.mx-price td{font-family:'Oswald',sans-serif;font-size:22px;font-weight:600;color:var(--ink);background:#F7F9FB;}
.mx .mx-full{background:rgba(98,203,201,.10);}
.mx thead .mx-full{background:var(--teal);color:#fff;}
.mx-yes{color:var(--teal-dark);font-weight:700;font-size:18px;}
.mx-no{color:#B5BDC6;}
.mx th[scope=row]{position:sticky;left:0;background:#fff;z-index:1;}
.mx-price th[scope=row]{background:#F7F9FB;}
.mx-foot{font-size:13px;color:var(--muted);margin-top:12px;font-style:italic;}
.mx-options{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
.mx-options .card{background:#fff;display:flex;flex-direction:column;}
.mx-options .card .btn,.mx-options .card .store-badges{margin-top:auto;padding-top:0;}
.mx-options .card > .mt-30{margin-top:auto;}
.mx-options .btn{align-self:flex-start;}
.mx-big{font-family:'Oswald',sans-serif;font-size:40px;font-weight:600;color:var(--ink);line-height:1.1;}
.mx-big small{font-size:18px;color:var(--muted);}
.mx-full-card{border:2px solid var(--teal);}
@media (max-width:900px){ .mx-options{grid-template-columns:1fr;} .one-account{grid-template-columns:1fr;padding:26px;} }

/* ---------------------------------------------------- training app ---- */
.how-grid--3{grid-template-columns:repeat(3,1fr);max-width:900px;margin-left:auto;margin-right:auto;}
.garage-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.app-hero-shot img{width:100%;height:auto;}
.page-hero .app-hero-shot img{box-shadow:none;aspect-ratio:auto;object-fit:contain;}
@media (max-width:900px){ .how-grid--3,.garage-steps{grid-template-columns:1fr;} .how-grid--3 .how-item + .how-item{border-left:0;} }

/* ----------------------------------------- rider development journey -- */
.review-bar{background:#FFF4DE;color:#7A4B00;font-size:14px;font-weight:600;padding:10px 0;border-bottom:1px solid #F1D49B;}
.dev-tree img,#five-stages .lp-media img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:18px;}
.landing-steps--stack li b{display:block;}