/* Course detail pages styling — scoped under body.qp-course.
   Source: ~/Downloads/qp_claude_build_handoff/styles.css (v5.6).
   Duplicate tokens (--navy, --teal, --taupe, --paper) and selectors that collide
   with /css/shared.css (.btn variants, .wrap, body, img) are scoped here so they
   only apply to course-detail pages. Local --ink:#2c2c2c kept (warmer body ink
   for the cinematic pages, overrides shared.css #111 within scope).
   .dev-note + .scrollProg rules dropped — the shared QP header v11 already ships
   .qp-h-progress on its own.
*/
body.qp-course{--deep:#071426;--mid:#10243d;--blue:#122a43;--teal2:#8bd0d8;--gold:#c9a96e;--warm:#faf8f5;--ink:#2c2c2c;--muted:#667085;--white:#fff;
  --fd:'Playfair Display',Georgia,serif;--fb:'Inter',system-ui,-apple-system,sans-serif;
}
html{scroll-behavior:smooth}body.qp-course{font-family:var(--fb);background:var(--warm);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}body.qp-course main .wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
body.qp-course .ey{font-size:14.3px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:var(--teal2)}body.qp-course .ey.gold{color:var(--gold)}body.qp-course .h1{font-family:var(--fd);font-size:clamp(42px,5.7vw,76px);line-height:1.02;font-weight:650;letter-spacing:-.035em;color:#fff}body.qp-course .hero-sub{display:block;font-family:var(--fd);font-style:italic;font-weight:400;color:var(--teal2);font-size:clamp(22px,2.65vw,38px);letter-spacing:-.02em;margin-top:12px;line-height:1.08}body.qp-course .h2{font-family:var(--fd);font-size:clamp(30px,3.9vw,54px);line-height:1.08;font-weight:600;letter-spacing:-.025em;color:var(--navy)}body.qp-course .h3{font-family:var(--fd);font-size:clamp(22px,2.2vw,32px);line-height:1.14;color:var(--navy);font-weight:600}body.qp-course .lead{font-size:clamp(16px,1.25vw,20px);line-height:1.78;color:rgba(255,255,255,.76);max-width:650px}body.qp-course .body{font-size:16px;line-height:1.78;color:#5d6472}body.qp-course .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;border-radius:999px;padding:15px 28px;font-size:11px;font-weight:850;letter-spacing:.15em;text-transform:uppercase;transition:.32s cubic-bezier(.23,1,.32,1);white-space:nowrap}body.qp-course .btn.teal{background:linear-gradient(135deg,#71c5ce,var(--teal));color:#081427;box-shadow:0 12px 34px rgba(91,168,178,.28), inset 0 1px 0 rgba(255,255,255,.24)}body.qp-course .btn.teal:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(91,168,178,.38)}body.qp-course .btn.outline{background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.26);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}body.qp-course .btn.outline:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.42)}body.qp-course .btn.dark{background:var(--navy);color:#fff;box-shadow:0 10px 28px rgba(19,30,61,.18)}body.qp-course .btn.gold{background:linear-gradient(135deg,#e0c48d,var(--gold));color:#081427;box-shadow:0 12px 34px rgba(201,169,110,.22)}
/* HERO — no custom site header included. Drop this below the existing shared header. */
body.qp-course .course-hero{position:relative;min-height:calc(100vh - 130px);display:flex;align-items:center;overflow:hidden;padding:92px 0 76px;background:radial-gradient(circle at 78% 24%,rgba(91,168,178,.2),transparent 32%),linear-gradient(135deg,#071426,#0d2239 58%,#153a55)}body.qp-course .course-hero:before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");opacity:.9}body.qp-course .course-hero:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:82px;background:linear-gradient(180deg,transparent,var(--warm));pointer-events:none}body.qp-course .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}body.qp-course .hero-copy{max-width:650px}body.qp-course .hero-copy .ey{margin-bottom:22px}body.qp-course .hero-copy .lead{margin:24px 0 28px}body.qp-course .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}body.qp-course .meta-row{display:flex;gap:10px;flex-wrap:wrap}body.qp-course .meta-pill{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.055);color:rgba(255,255,255,.72);border-radius:999px;padding:9px 15px;font-size:12px;backdrop-filter:blur(12px)}body.qp-course .hero-visual{position:relative}body.qp-course .hero-visual:before{content:'';position:absolute;inset:-36px;border:1px solid rgba(139,208,216,.12);border-radius:38px;transform:rotate(-1.2deg);pointer-events:none}body.qp-course .hero-frame{position:relative;border-radius:30px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);box-shadow:0 34px 90px rgba(0,0,0,.36),0 0 0 10px rgba(255,255,255,.025)}body.qp-course .hero-frame img{width:100%;height:clamp(360px,50vh,520px);object-fit:cover;object-position:center center}body.qp-course .hero-frame.contain-img{background:#f8f6f1}body.qp-course .hero-frame.contain-img img{object-fit:contain;padding:22px;background:#f8f6f1}body.qp-course .hero-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,20,38,0) 55%,rgba(7,20,38,.18));pointer-events:none}body.qp-course .hero-stats{position:absolute;left:24px;right:24px;bottom:24px;display:grid;grid-template-columns:repeat(3,1fr);border-radius:18px;overflow:hidden;background:rgba(7,20,38,.66);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 46px rgba(0,0,0,.26)}body.qp-course .hero-stats div{padding:14px 16px;border-right:1px solid rgba(255,255,255,.12)}body.qp-course .hero-stats div:last-child{border-right:0}body.qp-course .hero-stats strong{display:block;font-family:var(--fd);font-size:22px;color:#fff;line-height:1}body.qp-course .hero-stats span{display:block;margin-top:6px;font-size:9px;font-weight:850;letter-spacing:.18em;text-transform:uppercase;color:var(--teal2)}
/* Sections */
body.qp-course .section{position:relative;padding:86px 0}body.qp-course .section.paper{background:var(--paper)}body.qp-course .section.dark{background:linear-gradient(135deg,#071426,#132443);color:#fff;overflow:hidden}body.qp-course .section.dark .h2, body.qp-course .section.dark .h3{color:#fff}body.qp-course .section-head{max-width:760px;margin:0 auto 48px;text-align:center}body.qp-course .section-head .ey{margin-bottom:16px}body.qp-course .section-head .body{max-width:620px;margin:18px auto 0}body.qp-course .intro-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:56px;align-items:center}body.qp-course .intro-card{background:#fff;border-radius:28px;padding:34px;box-shadow:0 18px 60px rgba(19,30,61,.08);border:1px solid rgba(19,30,61,.06)}body.qp-course main .outcome-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:88px}body.qp-course main .outcome-card{background:#fff;border:1px solid rgba(19,30,61,.07);border-radius:22px;padding:24px;min-height:166px;box-shadow:0 16px 44px rgba(19,30,61,.055);transition:.3s}body.qp-course .outcome-card:hover{transform:translateY(-5px);box-shadow:0 22px 64px rgba(91,168,178,.14)}body.qp-course .outcome-card .num{font-family:var(--fd);font-size:30px;color:var(--teal);margin-bottom:12px}body.qp-course .outcome-card h3{font-size:21px;margin-bottom:9px}body.qp-course .outcome-card .body{font-size:14px;line-height:1.65}body.qp-course .image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}body.qp-course .img-tile{position:relative;border-radius:26px;overflow:hidden;background:#e8e3db;box-shadow:0 22px 70px rgba(19,30,61,.11);border:1px solid rgba(19,30,61,.055)}body.qp-course .img-tile img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:center center;transition:transform .65s cubic-bezier(.23,1,.32,1)}body.qp-course .img-tile.contain{background:#fff}body.qp-course .img-tile.contain img{object-fit:contain;padding:18px;background:#fff}body.qp-course .img-tile:hover img{transform:scale(1.035)}body.qp-course .curriculum{display:grid;grid-template-columns:.78fr 1.22fr;gap:46px;align-items:start}body.qp-course .module-stack{display:grid;gap:13px}body.qp-course .module{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px;border-radius:22px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}body.qp-course .module b{font-family:var(--fd);font-size:25px;color:var(--gold)}body.qp-course .module h3{font-family:var(--fb);font-size:21px;line-height:1.25;color:#fff;margin-bottom:6px}body.qp-course .module p{color:rgba(255,255,255,.64);line-height:1.65;font-size:15px}body.qp-course .dates-wrap{display:grid;grid-template-columns:.84fr 1.16fr;gap:34px;align-items:start}body.qp-course .date-list{display:grid;gap:14px}body.qp-course .date-card{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;border-radius:22px;padding:18px;background:#fff;border:1px solid rgba(19,30,61,.08);box-shadow:0 15px 46px rgba(19,30,61,.07)}body.qp-course .date-mark{width:60px;height:60px;border-radius:17px;background:linear-gradient(135deg,var(--navy),#1b2f50);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--fd);font-size:17px;line-height:1.05}body.qp-course .date-card h4{font-family:var(--fd);font-size:23px;color:var(--navy);font-weight:650}body.qp-course .date-card p{font-size:13px;color:#697386;margin-top:4px;line-height:1.45}body.qp-course .reg-card{border-radius:28px;background:linear-gradient(135deg,#071426,#132443);color:#fff;padding:34px;position:relative;overflow:hidden;box-shadow:0 22px 80px rgba(19,30,61,.16)}body.qp-course .reg-card:before{content:'';position:absolute;right:-80px;top:-80px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(91,168,178,.24),transparent 65%)}body.qp-course .reg-card>*{position:relative}body.qp-course .reg-card .price{font-family:var(--fd);font-size:48px;line-height:1;color:#fff;margin:16px 0 8px}body.qp-course .reg-card p{color:rgba(255,255,255,.68);line-height:1.72;margin-bottom:26px}body.qp-course .quote-band{position:relative;min-height:430px;display:flex;align-items:center;overflow:hidden;background:#071426;margin-top:24px}body.qp-course .quote-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;filter:brightness(.54) saturate(.88)}body.qp-course .quote-band:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,20,38,.9),rgba(7,20,38,.38))}body.qp-course .quote-content{position:relative;z-index:2;max-width:720px;color:#fff}body.qp-course .quote-content .h2{color:#fff}body.qp-course .quote-content .lead{margin-top:18px}body.qp-course .template-index-hero{padding:96px 0;background:linear-gradient(135deg,#071426,#122a43);color:#fff}body.qp-course .template-index-hero .h1{max-width:900px}body.qp-course .index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}body.qp-course .course-tile{background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 18px 70px rgba(19,30,61,.09);transition:.3s;border:1px solid rgba(19,30,61,.06)}body.qp-course .course-tile:hover{transform:translateY(-5px)}body.qp-course .course-tile img{width:100%;aspect-ratio:16/10;object-fit:cover}body.qp-course .course-tile div{padding:24px}body.qp-course .course-tile h3{font-family:var(--fd);font-size:28px;color:var(--navy);line-height:1.1;margin:8px 0 12px}body.qp-course .course-tile p{color:#657084;line-height:1.55;font-size:14px}body.qp-course.advanced .course-hero{background:radial-gradient(circle at 75% 18%,rgba(201,169,110,.18),transparent 34%),linear-gradient(135deg,#061123,#111c36 48%,#182b47)}body.qp-course.advanced .hero-sub, body.qp-course.advanced .ey{color:#dfc08a}body.qp-course.advanced .btn.teal{background:linear-gradient(135deg,#e0c48d,var(--gold))}body.qp-course.mastery .course-hero{background:radial-gradient(circle at 76% 18%,rgba(201,169,110,.19),transparent 34%),linear-gradient(135deg,#050912,#101a2c 50%,#1d2637)}body.qp-course.mastery .hero-sub, body.qp-course.mastery .ey{color:#dfc08a}body.qp-course.mastery .btn.teal{background:linear-gradient(135deg,#e0c48d,var(--gold))}body.qp-course.mastery .hero-frame img{object-position:center 18%}
@media(max-width:960px){body.qp-course .hero-grid, body.qp-course .intro-grid, body.qp-course .curriculum, body.qp-course .dates-wrap{grid-template-columns:1fr;gap:38px}body.qp-course .course-hero{padding:74px 0 70px;min-height:auto}body.qp-course .hero-frame img{height:auto;aspect-ratio:4/3}body.qp-course .hero-stats{position:relative;left:auto;right:auto;bottom:auto;margin:16px 16px 0}body.qp-course main .outcome-grid, body.qp-course .image-grid, body.qp-course .index-grid{grid-template-columns:1fr 1fr}body.qp-course .date-card{grid-template-columns:auto 1fr}body.qp-course .date-card .btn{grid-column:1/-1}body.qp-course .h1{font-size:clamp(40px,11vw,68px)}}@media(max-width:620px){body.qp-course .wrap{width:min(100% - 32px,1180px)}body.qp-course main .outcome-grid, body.qp-course .image-grid, body.qp-course .index-grid{grid-template-columns:1fr}body.qp-course .hero-stats{grid-template-columns:1fr}body.qp-course .hero-stats div{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}body.qp-course .section{padding:68px 0}body.qp-course .btn{width:100%}body.qp-course .hero-actions{width:100%}}


/* v5.2 targeted polish: uniform CTAs, meaningful utility chips, safer image framing */
body.qp-course .hero-actions{align-items:center;margin-bottom:24px}body.qp-course .hero-actions .btn{min-height:56px;min-width:230px}body.qp-course .btn{border:1px solid transparent}body.qp-course .btn.teal{background:linear-gradient(135deg,#78ccd5,#5ba8b2);color:#071426;text-shadow:none}body.qp-course .btn.outline{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);color:#fff}body.qp-course .btn.outline:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.52)}
body.qp-course .meta-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:560px}body.qp-course .meta-pill{position:relative;border:0;background:transparent;color:rgba(255,255,255,.78);border-radius:0;padding:0 0 0 22px;font-size:13px;line-height:1.35;backdrop-filter:none}body.qp-course .meta-pill:before{content:'✓';position:absolute;left:0;top:-1px;color:var(--teal2);font-weight:800}body.qp-course .hero-frame img{object-position:center top}body.qp-course .hero-frame.is-diagram img{object-fit:contain;background:#f8f6f1;padding:18px}body.qp-course .hero-frame.is-photo img{object-fit:cover;object-position:center top}body.qp-course .img-tile img{object-position:center top}body.qp-course .img-tile.is-diagram img{object-fit:contain;background:#fff;padding:18px}body.qp-course .date-card .btn{min-width:150px}body.qp-course .course-note{margin-top:18px;padding:16px 18px;border-radius:18px;background:rgba(139,208,216,.08);border:1px solid rgba(139,208,216,.14);color:rgba(255,255,255,.72);font-size:14px;line-height:1.6}body.qp-course .student-path{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}body.qp-course .path-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:20px}body.qp-course .path-card b{display:block;color:var(--teal2);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}body.qp-course .path-card span{color:rgba(255,255,255,.75);font-size:14px;line-height:1.6}body.qp-course .details-list{list-style:none;display:grid;gap:12px;margin-top:18px}body.qp-course .details-list li{position:relative;padding-left:24px;color:#5d6472;line-height:1.7}body.qp-course .details-list li:before{content:'✓';position:absolute;left:0;color:var(--teal);font-weight:800}body.qp-course .dates-wrap.compact{grid-template-columns:.78fr 1.22fr;gap:46px}body.qp-course .date-card.featured{border-color:rgba(91,168,178,.22);box-shadow:0 20px 56px rgba(91,168,178,.12)}
@media(max-width:960px){body.qp-course .meta-row{grid-template-columns:1fr}body.qp-course .student-path{grid-template-columns:1fr}body.qp-course .hero-actions .btn{min-width:0}}


/* v5.4 registration flow refinement */
body.qp-course .included-card{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-height:280px}body.qp-course .included-card .included-list{margin-top:20px;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}body.qp-course .reg-card .btn{min-width:260px}body.qp-course .date-card .btn.dark{background:#111d38;color:#fff;border-color:rgba(17,29,56,.12)}body.qp-course .date-card .btn.dark:hover{background:#182747;transform:translateY(-2px)}body.qp-course .dates-wrap.compact .h2{max-width:480px}body.qp-course .date-list{scroll-margin-top:110px}#dates{scroll-margin-top:92px}#register{scroll-margin-top:92px}body.qp-course .reg-card .price{font-size:clamp(42px,4vw,56px)}
@media(max-width:960px){body.qp-course .included-card .included-list{grid-template-columns:1fr}body.qp-course .reg-card .btn{min-width:0}}


/* v5.5 hierarchy fix: dates are the functional registration area; lower panels are separated support/reassurance. */
body.qp-course .registration-support{padding-top:110px;padding-bottom:110px;background:linear-gradient(180deg,#f4f1ec 0%,#faf8f5 100%);}
body.qp-course .registration-support:before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 80px));height:1px;background:linear-gradient(90deg,transparent,rgba(19,30,61,.12),transparent)}
body.qp-course .registration-support .support-kicker{max-width:760px;margin:0 auto 46px;text-align:center}
body.qp-course .registration-support .support-kicker .ey{margin-bottom:14px;color:var(--gold)}
body.qp-course .registration-support .support-kicker .h3{font-size:clamp(28px,3vw,42px);line-height:1.1}
body.qp-course .registration-support .support-kicker .body{margin:14px auto 0;max-width:640px}
body.qp-course .reg-card .price.next-step{font-size:clamp(40px,4vw,58px);letter-spacing:-.02em}
body.qp-course .reg-card .ey{color:var(--gold)}
@media(max-width:960px){body.qp-course .registration-support{padding-top:82px}body.qp-course .registration-support .support-kicker{text-align:left}body.qp-course .registration-support:before{width:calc(100% - 48px)}}

/* ============================================================
   RELAY-04 refinement pass (2026-09-04) — Todd video walkthrough.
   Context: shared.css's dark-theme layer (html[data-theme=dark]
   body{background:var(--navy-deep)} + h1/h2/h3{color:var(--paper)})
   leaks into these fixed-palette pages. Bare .section blocks are
   transparent, so in dark mode the navy headings sit on a dark body
   (Todd's "dark-on-dark") while the classless .outcome-card h3 catches
   the white-h3 rule on white cards ("white-on-white"). Fixes below are
   dark-scoped where light mode is already correct, both-mode where the
   ask is theme-independent. ALL shared — never page-scoped.
   ============================================================ */

/* (a)+(d) dark mode: headings + supporting copy inside bare (transparent)
   sections — Course Experience and Upcoming Classes — lift to warm paper.
   .paper/.dark sections and the white cards inside are untouched. */
html[data-theme="dark"] body.qp-course .section:not(.paper):not(.dark) .h2,
html[data-theme="dark"] body.qp-course .section:not(.paper):not(.dark) .h3{color:#f4f1ec}
html[data-theme="dark"] body.qp-course .section:not(.paper):not(.dark) .body{color:rgba(244,241,236,.78)}
html[data-theme="dark"] body.qp-course .section:not(.paper):not(.dark) .iba-loading{color:#f4f1ec}

/* (b→RELAY-05 ①) eyebrows are UNIVERSAL: one size for every .ey on the
   template, set in the base rule above (11px → 14.3px, +30%, Todd ruling).
   The RELAY-04 intro-grid-only bump was consolidated away — no per-section
   eyebrow size/weight/spacing overrides may exist. */
/* (b) outcome-card headings (Learn/Practice/Apply/Share): brand navy,
   semibold — (0,2,2) also outguns the dark-theme h3 element rule that
   made them white-on-white. */
body.qp-course .outcome-card h3{color:var(--navy,#0a1e33);font-weight:600}

/* (c) curriculum heading: +26% at desktop (54→68px), clamp keeps the
   existing responsive floor. */
body.qp-course .curriculum .h2{font-size:clamp(32px,4.9vw,68px)}

/* (d) Upcoming Classes heading: +30% at desktop (54→70px). */
body.qp-course .dates-wrap.compact .h2{font-size:clamp(32px,5vw,70px);max-width:520px}

/* (e) support panels: equal geometry — true halves, stretched to equal
   height, same padding (both already 34px) and gap; content vertically
   centered in both. Navy vs white treatments untouched. Stacks at 960px
   via the existing dates-wrap 1fr rule. */
body.qp-course .registration-support .dates-wrap{grid-template-columns:1fr 1fr;gap:34px;align-items:stretch}
body.qp-course .registration-support .reg-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;align-self:stretch}
body.qp-course .registration-support .included-card{min-height:0}
/* MOBILE STACKING (RELAY-05 scout catch): the (0,3,1) grid rules above and
   v5.2's .dates-wrap.compact BEAT the 960 media block's (0,2,1) 1fr rule by
   specificity, so those sections never stacked on mobile — .compact was
   broken this way in prod since v5.2. Re-stack both at equal-or-higher
   specificity, source-after the desktop rules. */
@media(max-width:960px){
  body.qp-course .dates-wrap.compact,
  body.qp-course .registration-support .dates-wrap{grid-template-columns:1fr}
}

/* ============================================================
   RELAY-32 — contain-tile gutter fill (opt-in, shared mechanism).
   A contain-on-white diagram leaves white side gutters in the 16/11
   card; zoom is ruled out (clips labels). Opt-in via focal-utility-
   style vars set inline on the TILE:
     --fill-img: url(<same image>)  → blurred (24px), scaled (1.4x)
        copy of the image behind the sharp contained layer, darkened
        via the filter (brightness) so the sharp layer separates. The
        unset default renders NOTHING (background-image:none), so
        every non-opted page keeps its plain white tile.
     --fill-color: <color>         → flat sampled-color fill instead.
   The white moves from the img to the tile (visually identical
   default) so a backdrop can show through the padding; the contained
   image itself stays byte-identical and un-filtered. No animation —
   nothing for prefers-reduced-motion to suppress.
   ============================================================ */
body.qp-course .img-tile.contain{background:var(--fill-color,#fff)}
body.qp-course .img-tile.contain img{background:transparent;position:relative;z-index:1}
body.qp-course .img-tile.contain::before{content:'';position:absolute;inset:0;z-index:0;
  background-image:var(--fill-img,none);background-size:cover;background-position:center;
  filter:blur(24px) brightness(.86) saturate(.9);transform:scale(1.4);pointer-events:none}

/* ============================================================
   RELAY-14 — hero CTA matched pair + clickable Next Class cell.
   ============================================================ */
/* ① One sizing system for the Register/Curriculum pair: equal-width grid
   halves on desktop (long labels wrap INSIDE; geometry never diverges),
   single-column stack ≤620. Primary (teal fill) vs secondary (ghost)
   treatments untouched — hierarchy by color, not size. Both buttons
   already shared .btn metrics (min-height 56 / 1px border / same padding);
   the divergence was natural width from label length — consolidated here. */
body.qp-course .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:14px;max-width:560px}
body.qp-course .hero-actions .btn{min-height:56px;min-width:0;padding:14px 20px;white-space:normal;text-align:center;line-height:1.3}
@media(max-width:620px){body.qp-course .hero-actions{grid-template-columns:1fr;max-width:none}}

/* ② Sticky-header offset as a shared var (was a 92px magic number) +
   reduced-motion respect for the template's global smooth scroll. */
body.qp-course{--qp-sticky-header:92px}
#dates{scroll-margin-top:var(--qp-sticky-header,92px)}
#register{scroll-margin-top:var(--qp-sticky-header,92px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ② The Next Class cell renders as a real <a href="#dates"> (only when it
   resolved from live data — renderHeroStats). Same cell chrome as the
   div cells, plus subtle clickable affordance: cursor, persistent chevron,
   underline + tint on hover, visible focus ring. */
body.qp-course .hero-stats a.hero-stat-link{display:block;padding:14px 16px;border-right:1px solid rgba(255,255,255,.12);text-decoration:none;color:inherit;cursor:pointer;transition:background .25s}
body.qp-course .hero-stats a.hero-stat-link strong:after{content:'\00a0\203a';color:var(--teal2,#8bd0d8);opacity:.8}
body.qp-course .hero-stats a.hero-stat-link:hover{background:rgba(139,208,216,.12)}
body.qp-course .hero-stats a.hero-stat-link:hover strong{text-decoration:underline;text-underline-offset:3px}
body.qp-course .hero-stats a.hero-stat-link:focus-visible{outline:2px solid var(--teal2,#8bd0d8);outline-offset:-2px;border-radius:4px}
@media(max-width:620px){body.qp-course .hero-stats a.hero-stat-link{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}}

/* ============================================================
   RELAY-10 — shared per-image FOCAL utility.
   Art direction is legitimately per-image, but the MECHANISM is
   template-shared: a page sets CSS vars inline on the img
   (style="--focal:center 26%;--zoom:1.12;--origin:center 65%"), with
   optional per-breakpoint overrides --focal-md/--zoom-md (≤960) and
   --focal-sm/--zoom-sm (≤620) falling back up the chain. Defaults
   reproduce the pre-existing behavior exactly (hero/tiles center top,
   quote-band center center, zoom 1) so untouched pages don't move.
   Tile hover multiplies the zoom instead of clobbering it.
   ============================================================ */
body.qp-course .hero-frame.is-photo img{object-position:var(--focal,center top);transform:scale(var(--zoom,1));transform-origin:var(--origin,center)}
body.qp-course .img-tile img{object-position:var(--focal,center top);transform:scale(var(--zoom,1));transform-origin:var(--origin,center)}
body.qp-course .img-tile:hover img{transform:scale(calc(var(--zoom,1) * 1.035))}
body.qp-course .quote-band img{object-position:var(--focal,center center);transform:scale(var(--zoom,1));transform-origin:var(--origin,center)}
@media(max-width:960px){
  body.qp-course .hero-frame.is-photo img,
  body.qp-course .img-tile img{object-position:var(--focal-md,var(--focal,center top));transform:scale(var(--zoom-md,var(--zoom,1)));transform-origin:var(--origin-md,var(--origin,center))}
  body.qp-course .quote-band img{object-position:var(--focal-md,var(--focal,center center));transform:scale(var(--zoom-md,var(--zoom,1)));transform-origin:var(--origin-md,var(--origin,center))}
}
@media(max-width:620px){
  body.qp-course .hero-frame.is-photo img,
  body.qp-course .img-tile img{object-position:var(--focal-sm,var(--focal-md,var(--focal,center top)));transform:scale(var(--zoom-sm,var(--zoom-md,var(--zoom,1))));transform-origin:var(--origin-sm,var(--origin-md,var(--origin,center)))}
  body.qp-course .quote-band img{object-position:var(--focal-sm,var(--focal-md,var(--focal,center center)));transform:scale(var(--zoom-sm,var(--zoom-md,var(--zoom,1))));transform-origin:var(--origin-sm,var(--origin-md,var(--origin,center)))}
}

/* ============================================================
   RELAY-06 — data-driven hero stat strip.
   The strip is now a SIBLING of .hero-frame (inside .hero-visual),
   rendered by course-pages.js from the same iba_course_dates rows the
   Upcoming Classes list fetches. It ships hidden and empty; JS unhides
   it only when ≥2 cells resolve from real data — zero static filler.
   Straddles the frame's bottom edge (translateY 50%) so the artwork
   gets its full height back; glass treatment inherited from the base
   .hero-stats rule. Below 960 it sits fully under the image.
   ============================================================ */
body.qp-course .hero-stats[hidden]{display:none}
body.qp-course .hero-visual>.hero-stats{position:absolute;left:24px;right:24px;bottom:0;transform:translateY(50%);z-index:3;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
@media(max-width:960px){body.qp-course .hero-visual>.hero-stats{position:relative;left:auto;right:auto;bottom:auto;transform:none;margin:16px 0 0}}

/* ============================================================
   IBA dates dynamic states (Stage 2)
   ============================================================ */

body.qp-course .iba-loading {
  padding: 24px 0;
  color: var(--ink, #2c2c2c);
  opacity: .6;
  font-style: italic;
}

/* Empty-state: vertically center against taller left column */
body.qp-course .dates-wrap.compact .date-list:has(.iba-empty-block) {
  align-self: center;
}

body.qp-course .iba-show-more-btn {
  margin-top: 16px;
  align-self: flex-start;
}

/* ─── Modal ─── */
body.qp-course .iba-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
body.qp-course .iba-overlay.open {
  display: flex;
}
body.qp-course .iba-modal {
  background: var(--paper, #faf7f2);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
  animation: iba-modal-in .25s ease;
}
@keyframes iba-modal-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
body.qp-course .iba-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
body.qp-course .iba-modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}
body.qp-course .iba-modal-close {
  background: transparent;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--navy);
  padding: 0;
  line-height: 1;
}
body.qp-course .iba-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.qp-course .iba-modal-body .date-card {
  margin: 0;
}

/* ============================================================
   STAGE 3 — Waitlist modal (cloned visual pattern from one-on-sessions.html
   .cal-modal-* and renamed to .iba-wl-* to avoid collision with the
   existing .iba-modal-* "Show More dates" modal above)
   ============================================================ */

body.qp-course .iba-wl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .3s ease;
}
body.qp-course .iba-wl-overlay.open { opacity: 1; }

body.qp-course .iba-wl-box {
  background: linear-gradient(170deg, rgba(16,28,52,.98) 0%, rgba(12,22,42,.99) 50%, rgba(14,26,48,.98) 100%);
  border: 1px solid rgba(91, 168, 178, .12);
  border-radius: 24px;
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 48px 40px 40px;
  position: relative;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, .6),
    0 0 60px rgba(91, 168, 178, .06),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: translateY(20px) scale(.97);
  transition: transform .3s ease;
  overflow-x: hidden;
}
body.qp-course .iba-wl-overlay.open .iba-wl-box {
  transform: translateY(0) scale(1);
}

body.qp-course .iba-wl-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 160px;
  background: radial-gradient(ellipse, rgba(91, 168, 178, .08), transparent 70%);
  pointer-events: none;
}

body.qp-course .iba-wl-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .4);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  padding: 0;
  line-height: 1;
}
body.qp-course .iba-wl-close:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-color: rgba(255, 255, 255, .2);
}

body.qp-course .iba-wl-header {
  text-align: center;
  margin-bottom: 28px;
}
body.qp-course .iba-wl-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal, #5ba8b2);
  margin-bottom: 12px;
}
body.qp-course .iba-wl-title {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.2;
}
body.qp-course .iba-wl-sub {
  color: rgba(255, 255, 255, .45);
  font-size: 14px;
  margin: 0;
  line-height: 1.6;
}

body.qp-course .iba-wl-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.qp-course .iba-wl-input {
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(91, 168, 178, .2);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  -webkit-text-fill-color: #fff;
  transition: border-color .15s;
}
body.qp-course .iba-wl-input::placeholder {
  color: rgba(255, 255, 255, .35);
}
body.qp-course .iba-wl-input:focus {
  border-color: rgba(91, 168, 178, .5);
}
/* Neutralize browser autofill background/text color */
body.qp-course .iba-wl-input:-webkit-autofill,
body.qp-course .iba-wl-input:-webkit-autofill:hover,
body.qp-course .iba-wl-input:-webkit-autofill:focus,
body.qp-course .iba-wl-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .04) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff;
  transition: background-color 5000s ease-in-out 0s;
}
body.qp-course .iba-wl-error {
  color: #e85d5d;
  font-size: 13px;
  min-height: 18px;
  margin: -4px 0 0;
}
body.qp-course .iba-wl-submit {
  width: 100%;
  margin-top: 4px;
  padding: 16px;
  font-size: 13px;
  letter-spacing: .15em;
}

body.qp-course .iba-wl-success {
  text-align: center;
  padding: 20px 0;
}
body.qp-course .iba-wl-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(91, 168, 178, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
body.qp-course .iba-wl-success-title {
  color: var(--teal, #5ba8b2);
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 12px;
}
body.qp-course .iba-wl-success-sub {
  color: rgba(255, 255, 255, .5);
  font-size: 15px;
  margin: 0 0 28px;
  line-height: 1.6;
}
body.qp-course .iba-wl-success .btn {
  padding: 12px 36px;
  font-size: 12px;
}