/* ─────────────────────────────────────────────────────────────
   Episodes system - "The QA Cowboy & the AI Stallion"
   Loads AFTER /qacowboy/qacowboy.css, which defines the western
   palette (:root tokens) plus the shared nav / logo / nav-links /
   back-link / footer. This file adds only the episode-specific
   components on top of the shared western palette. Accent tokens
   keep their names but resolve to the warm amber/cream scheme so
   these pages match the rest of the cowboy site.
   ───────────────────────────────────────────────────────────── */

:root {
  --cyan: #dc9a3c;                      /* amber - gear pills + lesson rail */
  --cyan-soft: rgba(220, 154, 60, .07);
  --cyan-line: rgba(220, 154, 60, .32);
  --cyan-ink: #ecdcbb;                  /* warm cream - terminal prompt text */
  --term-bg: #1a120a;                   /* warm near-black terminal */
  --term-head: #120b06;
  --green: #dc9a3c;                     /* amber - "COPIED" + savings, matches .bb-save */
}

/* content containers, narrower than the 1240 site wrap for reading comfort */
.ep-wrap { max-width: 1100px; margin: 0 auto; padding: 0 22px; }   /* index */
.epl-wrap { max-width: 960px; margin: 0 auto; padding: 0 22px; }   /* episode page */

/* ═══════════ PAGE 1 - newsletter landing ═══════════ */

/* masthead */
.ep-masthead {
  padding: 52px 0 34px; text-align: center;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #1a1109, var(--bg-0));
}
.ep-masthead .series {
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 14px;
}
.ep-masthead h1 {
  font-family: var(--display); font-size: clamp(30px, 5vw, 50px);
  font-weight: 800; letter-spacing: -.01em; line-height: 1.05; color: var(--cream);
}
.ep-masthead h1 .amp { color: var(--amber); }
.ep-masthead .tag { color: var(--ink-mute); margin: 14px auto 0; font-size: 16px; max-width: 620px; }

/* signup band */
.ep-signup {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(160deg, #241708, #1a1108); padding: 34px 0;
}
.ep-signup-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.ep-signup h3 { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--cream); }
.ep-signup p { color: var(--ink-mute); font-size: 14px; margin-top: 5px; }
.ep-form { display: flex; gap: 10px; flex-wrap: wrap; }
.ep-form input[type="email"] {
  background: #0f0a05; border: 1px solid var(--line); border-radius: 6px;
  padding: 12px 14px; color: var(--cream); font-size: 14px; min-width: 230px; font-family: inherit;
}
.ep-form input[type="email"]::placeholder { color: var(--ink-dim); }
.ep-form input[type="email"]:focus { outline: none; border-color: var(--amber); }
.ep-form button {
  padding: 12px 22px; border-radius: 6px; border: 0; cursor: pointer;
  background: var(--amber); color: var(--bg-0); font-weight: 700; font-size: 14px; font-family: inherit;
}
.ep-form button:hover { background: var(--amber-bright); }
.ep-form button[disabled] { opacity: .6; cursor: default; }
.ep-signup-done { font-family: var(--mono); font-size: 14px; color: var(--green); letter-spacing: .02em; }
.ep-form-error { font-family: var(--mono); font-size: 12px; color: var(--rust); margin-top: 8px; flex-basis: 100%; }
[hidden] { display: none !important; }

/* newsletter hero: CSS-background photo, one-sided left gradient, text in the empty left third */
.ep-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 70vh; border-bottom: 1px solid var(--line); }
.ep-hero .eph-bg { position: absolute; inset: 0; background: url('/qacowboy/episodes/assets/newsletter.jpg') center right / cover no-repeat; }
/* one-sided: opaque near-black at the left edge, fully transparent by ~48%; right side untouched */
.ep-hero .eph-grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,13,7,.97) 0%, rgba(20,13,7,.95) 27%, rgba(20,13,7,.6) 40%, rgba(20,13,7,0) 49%); }
.ep-hero .eph-inner { position: relative; z-index: 2; width: 100%; padding: 0 clamp(24px, 5vw, 96px); }
.ep-hero .eph-text { max-width: 440px; }
.eph-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin: 0 0 14px; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.eph-title { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5vw, 56px); line-height: 1.04; letter-spacing: -.01em; color: var(--cream); margin: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.eph-title .amp { color: var(--amber); }
.eph-sub { color: var(--cream); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; margin: 16px 0 0; max-width: 380px; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.eph-form { justify-content: flex-start; margin-top: 24px; }
.eph-free { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-mute); margin: 12px 0 0; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.eph-free .eph-cadence { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: 0; color: var(--amber-bright); }
.eph-free .eph-free-word { font-family: var(--display); font-size: 17px; color: var(--cream); font-weight: 700; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.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; }
/* below ~900px: gradient goes full-width and stronger, text full-width, subjects + horse kept in frame */
@media (max-width: 900px) {
  .ep-hero { min-height: 58vh; }
  .ep-hero .eph-bg { background-position: 68% center; }
  .ep-hero .eph-grad { background: linear-gradient(180deg, rgba(20,13,7,.6) 0%, rgba(20,13,7,.72) 45%, rgba(20,13,7,.9) 100%); }
  .ep-hero .eph-inner { padding: 44px clamp(20px, 6vw, 48px); }
  .ep-hero .eph-text { max-width: 620px; }
  .eph-sub { max-width: 100%; }
}

/* >=901px: the hero image carries the eyebrow, title and subhead (the comp's
   painted button was removed from the image). Show the comp whole, locked to
   its aspect so the painted text never crops, hide the duplicate live text,
   and place the real signup form where the comp's button sat. Form sizes are
   in vw so they scale with the painted text at every screen width. */
@media (min-width: 901px) {
  .ep-hero { aspect-ratio: 1736 / 906; min-height: 0; display: block; }
  .ep-hero .eph-bg { background-position: center; }
  .ep-hero .eph-grad { display: none; }
  .ep-hero .eph-inner { position: absolute; inset: 0; padding: 0; }
  .ep-hero .eph-eyebrow, .ep-hero .eph-title, .ep-hero .eph-sub { display: none; }
  .ep-hero .eph-text { position: absolute; left: 2.4%; top: 64.5%; width: 52%; max-width: none; }
  .ep-hero .eph-form { margin-top: 0; gap: .6em; font-size: clamp(13px, 1vw, 24px); }
  .ep-hero .eph-form input[type="email"] { font-size: 1em; padding: .8em 1em; width: 15em; min-width: 0; }
  .ep-hero .eph-form button { font-size: 1em; padding: .8em 1.6em; }
  .ep-hero .eph-free { margin-top: .9em; font-size: clamp(11px, .85vw, 20px); }
  .ep-hero .eph-free .eph-cadence,
  .ep-hero .eph-free .eph-free-word { font-size: clamp(14px, 1.2vw, 28px); }
}

/* archive: episode card grid */
.ep-trail { padding: 46px 0 30px; }
.ep-trail h2 { font-family: var(--display); font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--cream); margin-bottom: 8px; }
.ep-trail .sub { color: var(--ink-dim); font-size: 13.5px; margin-bottom: 30px; font-family: var(--mono); letter-spacing: .08em; }
.ep-trail .sub .ep-cadence {
  display: block;
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--amber-bright);
}
.ep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ep-card {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #1d130a, #170f08);
  transition: transform .15s ease, border-color .15s ease; display: block;
}
a.ep-card:hover { transform: translateY(-3px); border-color: rgba(220, 154, 60, .5); }
.ec-img { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.ec-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ec-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: rgba(220, 154, 60, .9);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.ec-play::after { content: ""; border-left: 14px solid var(--bg-0); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
/* "coming soon" corner tag for a card whose page is live but video is pending */
.ec-tag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bg-0); background: var(--amber); border-radius: 4px; padding: 4px 8px;
}
.ec-body { padding: 14px 16px 16px; }
.ec-num { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--amber); margin-bottom: 6px; }
.ec-title { font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--cream); margin-bottom: 6px; }
.ec-lesson { font-size: 13px; color: var(--ink-dim); line-height: 1.5; margin-bottom: 12px; }
.ec-gear {
  display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  color: var(--cyan); border: 1px solid var(--cyan-line); border-radius: 11px; padding: 4px 10px;
}
/* coming episodes: dimmed, not linked */
.ec-soon { opacity: .55; }
.ec-soon .ec-play { background: rgba(147, 128, 95, .5); }
/* vertical Short embed on a teaching page: 9:16, centered, capped on desktop, full width on mobile */
.short-embed {
  position: relative; width: 100%; max-width: 340px; margin: 8px auto 0; aspect-ratio: 9 / 16;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.short-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ep-hero .ep-standfirst { color: var(--ink-mute); font-size: 16px; line-height: 1.55; margin: 8px 0 20px; max-width: 560px; }
@media (max-width: 480px) { .short-embed { max-width: 100%; } }

/* origin story feature, above the episode grid */
.ep-origin { border-bottom: 1px solid var(--line); padding: 6px 0 42px; }
.ep-origin .eo-title { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.1; color: var(--cream); margin: 0 0 10px; }
.ep-origin .eo-sub { color: var(--ink-mute); font-size: 15px; line-height: 1.55; max-width: 620px; margin: 0 0 4px; }
.ep-origin .eo-rider { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin: 30px 0 0; }
/* three compact origin slots: the QA Cowboy (video) + Cowgirl & Rider (coming soon) */
.eo-row { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.eo-item { margin: 0; flex: 0 0 auto; width: 176px; }
.eo-item .short-embed { max-width: 176px; margin: 0; }
.eo-item figcaption { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tan); text-align: center; margin-top: 10px; }
.eo-soon { display: flex; align-items: center; justify-content: center; background: var(--bg-2); }
.eo-soon .os-badge { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); border: 1px solid var(--panel-edge); border-radius: 999px; padding: 6px 11px; }
@media (max-width: 560px) { .eo-item { width: calc(33.333% - 12px); } .eo-item .short-embed { max-width: 100%; } }
/* origin as a two-video pair (Part 1 + Part 2): larger, side by side, stacked on mobile */
.eo-row-pair .eo-item { width: 300px; }
.eo-row-pair .eo-item .short-embed { max-width: 300px; }
@media (max-width: 680px) {
  .eo-row-pair .eo-item { width: 100%; }
  .eo-row-pair .eo-item .short-embed { max-width: 300px; margin: 0 auto; }
}
/* four-part origin (Ada): all four share one row, up to 300px each;
   two by two on phones */
.eo-row-four { flex-wrap: nowrap; }
.eo-row-four .eo-item { flex: 1 1 0; min-width: 0; width: auto; max-width: 300px; }
.eo-row-four .eo-item .short-embed { max-width: none; }
@media (max-width: 560px) {
  .eo-row-four { flex-wrap: wrap; }
  .eo-row-four .eo-item { flex: 1 1 calc(50% - 9px); max-width: none; }
}
/* expand-to-lightbox control on the QA Cowboy origin slot */
.eo-expand {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cream); background: rgba(20, 13, 7, .74); border: 1px solid rgba(244, 233, 216, .28);
  border-radius: 999px; padding: 5px 9px; cursor: pointer;
}
.eo-expand:hover { background: rgba(20, 13, 7, .92); border-color: var(--amber); color: var(--amber-bright); }
.eo-lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(8, 5, 2, .86); padding: 24px; }
.eo-lightbox.is-open { display: flex; }
.eo-lb-frame { position: relative; height: min(85vh, 640px); aspect-ratio: 9 / 16; max-width: 92vw; background: #000; border: 1px solid var(--panel-edge); border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.eo-lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.eo-lb-close { position: absolute; top: -15px; right: -15px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: var(--amber); color: var(--bg-0); border: 0; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.eo-lb-close:hover { background: var(--amber-bright); }
@media (max-width: 520px) { .eo-lb-close { top: 8px; right: 8px; } }

/* closing band */
.ep-closing { border-top: 1px solid var(--line); padding: 40px 0 52px; text-align: center; }
.ep-closing p { color: var(--ink-mute); margin-bottom: 18px; font-size: 16px; }

/* shared amber button (matches mockup .btn-amber) */
.btn-amber {
  display: inline-block; padding: 12px 22px; border-radius: 6px;
  background: var(--amber); color: var(--bg-0); font-weight: 700; font-size: 14px;
}
.btn-amber:hover { background: var(--amber-bright); }

/* contact section (channels brought over from the qasmith storefront) */
.ep-contact { border-top: 1px solid var(--line); padding: 46px 0 40px; text-align: center; }
.ep-contact h2 { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 28px); color: var(--cream); margin: 0 0 6px; }
.ep-contact .cy { color: var(--amber); }
.ep-contact .ec-sub { color: var(--ink-mute); font-size: 14px; margin: 0 0 26px; }
.ep-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 720px; margin: 0 auto; }
.ep-contact-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px;
  border: 1px solid var(--panel-edge); border-radius: 10px; background: var(--bg-2);
  transition: border-color .15s ease, transform .15s ease;
}
.ep-contact-card:hover { border-color: var(--amber); transform: translateY(-2px); }
.ecc-icon { color: var(--amber); width: 30px; height: 30px; display: grid; place-items: center; }
.ecc-label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.ecc-value { font-size: 14px; color: var(--cream); }
@media (max-width: 620px) { .ep-contact-grid { grid-template-columns: 1fr; max-width: 340px; } }

/* ═══════════ PAGE 2 - episode landing ═══════════ */

.ep-hero { padding: 34px 0 8px; }
.ep-hero .crumb { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--ink-dim); margin-bottom: 14px; text-transform: uppercase; }
.ep-hero .crumb b { color: var(--amber); font-weight: 700; }
.ep-hero h1 { font-family: var(--display); font-size: clamp(26px, 4.4vw, 40px); font-weight: 800; letter-spacing: -.01em; color: var(--cream); margin-bottom: 8px; }
.gear-pill {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--cyan); border: 1px solid var(--cyan-line); border-radius: 11px; padding: 4px 12px; margin-bottom: 18px;
}

/* video: click-to-load facade (poster + play badge -> youtube-nocookie iframe) */
.player {
  aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  position: relative; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); background: #000;
}
.player.is-clickable { cursor: pointer; }
.player-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player .play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%; background: rgba(220, 154, 60, .92);
  display: flex; align-items: center; justify-content: center; transition: transform .15s ease, background .15s ease;
}
.player.is-clickable:hover .play-btn { transform: translate(-50%, -50%) scale(1.06); background: var(--amber); }
.player .play-btn::after { content: ""; border-left: 20px solid var(--bg-0); border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 4px; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* no-video-yet state: dimmed poster + a "coming soon" badge, non-interactive */
.player.is-soon { cursor: default; }
.player.is-soon .player-poster { filter: brightness(.42) saturate(.85); }
.player .soon-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: clamp(12px, 1.7vw, 15px); letter-spacing: .18em;
  text-transform: uppercase; color: var(--cream); background: rgba(20, 13, 7, .72);
  border: 1px solid var(--amber); border-radius: 6px; padding: 11px 20px; white-space: nowrap;
}

/* lesson section */
.lesson-sect { padding: 34px 0 10px; }
.lesson-sect .kicker { margin-bottom: 14px; }
.lesson { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; }
.lesson-block { border-left: 3px solid var(--cyan); background: var(--cyan-soft); padding: 16px 18px; border-radius: 0 8px 8px 0; }
.lb-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--cyan); margin-bottom: 10px; text-transform: uppercase; }
.lesson-block p { font-size: 14.5px; line-height: 1.6; color: var(--cream); }
.lesson-block .try { margin-top: 14px; font-size: 13.5px; color: var(--ink-mute); }
.lesson-block .try b { color: var(--amber-bright); }

/* terminal-styled prompt block with COPY */
.prompt-block { display: flex; flex-direction: column; background: var(--term-bg); border: 1px solid var(--cyan-line); border-radius: 8px; overflow: hidden; }
.prompt-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--term-head); border-bottom: 1px solid rgba(220, 154, 60, .18); }
.prompt-head .ph-title { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.ph-dots { display: flex; gap: 6px; }
.ph-dots i { width: 9px; height: 9px; border-radius: 50%; background: #43331d; display: block; }
.copy-chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--cyan-ink);
  border: 1px solid var(--cyan-line); border-radius: 4px; padding: 5px 11px; background: none; cursor: pointer;
}
.copy-chip:hover { background: rgba(220, 154, 60, .12); }
.copy-chip.copied { color: var(--green); border-color: rgba(220, 154, 60, .55); }
.prompt-body {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  padding: 20px 18px; margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.8;
  color: var(--cyan-ink); white-space: pre-wrap; word-break: break-word;
}
.prompt-foot { padding: 10px 14px; background: var(--term-head); border-top: 1px solid rgba(220, 154, 60, .18); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }

/* miniaturized 3-guide + bundle strip - shown on every landing page */
.mini-guides { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; background: rgba(220, 154, 60, .04); }
.mg-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 14px; }
.mg-row { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.mg-card { flex: 0 0 auto; width: 80px; display: flex; flex-direction: column; gap: 7px; text-decoration: none; }
.mg-card img { width: 100%; height: auto; display: block; border-radius: 4px; border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); transition: transform .15s ease; }
.mg-card:hover img { transform: translateY(-3px); }
.mg-name { font-family: var(--mono); font-size: 9.5px; letter-spacing: .03em; line-height: 1.3; text-align: center; color: var(--ink-mute); }
.mg-bundle { flex: 1 1 150px; min-width: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; border: 1px solid var(--cyan-line); border-radius: 8px; background: rgba(220, 154, 60, .06); padding: 12px 14px; transition: border-color .15s ease, background .15s ease; }
.mg-bundle:hover { border-color: var(--amber); background: rgba(220, 154, 60, .1); }
.mgb-top { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.mgb-price { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; color: var(--amber-bright); }
.mgb-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
@media (max-width: 480px) { .mg-card { width: calc(33.333% - 8px); } .mg-bundle { flex-basis: 100%; margin-top: 4px; } }

/* subtle guide mention - one quiet line, not a promo block */
.mention-sect { padding: 30px 0 6px; }
.mention { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; background: rgba(220, 154, 60, .04); transition: border-color .15s ease; }
.mention:hover { border-color: rgba(220, 154, 60, .45); }
.m-thumb { width: 40px; height: 52px; border-radius: 3px; overflow: hidden; flex: none; border: 1px solid var(--line); }
.m-thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-text { font-size: 13.5px; color: var(--ink-mute); }
.m-text b { color: var(--cream); }
.m-arrow { color: var(--amber-bright); font-weight: 700; }

/* next ride card */
.next-sect { padding: 38px 0 46px; }
.next-card { display: grid; grid-template-columns: 190px 1fr auto; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: linear-gradient(180deg, #1d130a, #170f08); }
.next-card.is-coming { opacity: .55; }
.next-thumb { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; }
.next-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nx-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--amber); margin-bottom: 5px; }
.nx-title { font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--cream); }
.nx-go { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--amber-bright); white-space: nowrap; }

@media (max-width: 760px) {
  .lesson { grid-template-columns: 1fr; }
  .next-card { grid-template-columns: 1fr; }
  .nx-go { display: none; }
  .ep-grid { grid-template-columns: 1fr; }
  .ep-signup-inner { flex-direction: column; align-items: flex-start; }
  .ep-form input[type="email"] { min-width: 0; flex: 1; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .ep-grid { grid-template-columns: repeat(2, 1fr); }
}