/* ════════════════════════════════════════════════════════════════════
   IYA V10 — pages.css  ·  deep-sea system for the inner pages
   Loads AFTER deepsea.css + v10.css. Reuses their palette, nav, footer,
   buttons, reveal, and the card system (.grid-courses/.cc/.lvl-dot/.chip).
   Adds: page hero, course-detail, forms, certificate tracker, prose.
   Perf rules unchanged: native scroll, no backdrop-filter, GPU-only.
   ════════════════════════════════════════════════════════════════════ */

/* ── PAGE HERO (standard inner pages — one consistent size) ───────── */
/* one consistent hero across every page; image set per page via --hero-img inline */
/* bottom padding keeps hero copy off the section edge (breathing space, every inner page) */
.page-hero{position:relative;min-height:clamp(360px,46vh,500px);display:flex;align-items:center;
  padding:var(--nav-h) 0 clamp(30px,4vw,52px);overflow:hidden;background:var(--abyss);isolation:isolate}
.page-hero::before{content:'';position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-img,url('../images/hero.webp'));background-size:cover;background-position:center;
  background-repeat:no-repeat;transform:scale(1.05);opacity:.7;will-change:transform}
.page-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(3,16,31,.55) 0%,rgba(3,16,31,.5) 40%,rgba(3,16,31,.96) 100%),
  linear-gradient(90deg,rgba(3,16,31,.8) 0%,rgba(3,16,31,.32) 70%)}
.page-hero-inner{position:relative;width:100%}
.page-hero .eyebrow{margin-bottom:18px;color:var(--glow)}
.page-hero h1{font-family:var(--display);font-weight:600;color:#fff;font-size:clamp(34px,5.4vw,60px);
  line-height:1.05;letter-spacing:-.03em;max-width:18ch;text-wrap:balance}
.page-hero p{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:rgba(255,255,255,.82);
  max-width:58ch;margin-top:20px;text-wrap:pretty}
.page-hero h1 .lvl-dot{width:10px;height:10px;margin-left:14px;vertical-align:middle}

/* ── STICKY BOOK BAR (course pages) · sits at hero/body seam, sticks like the home router ── */
.book-bar{position:sticky;top:var(--nav-stuck);z-index:80;background:rgba(6,16,30,.72);
  border-top:1px solid var(--glass-line);border-bottom:1px solid var(--line-soft);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 18px 46px rgba(0,0,0,.4)}
.book-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,44px);
  min-height:76px;padding-top:14px;padding-bottom:14px}
.book-stats{display:flex;align-items:center;gap:clamp(22px,3.4vw,52px);min-width:0;flex-wrap:wrap}
.book-stat{display:flex;flex-direction:column;gap:4px;min-width:0}
.book-stat .cs-label{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.book-stat .cs-value{font-size:15px;font-weight:600;color:#fff;line-height:1.3}
.book-bar .btn{white-space:nowrap;flex:0 0 auto}
@media (prefers-reduced-transparency:reduce){
  .book-bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,16,30,.97)}
}
@media (max-width:860px){
  /* keep the book bar PINNED on mobile too (same as desktop), just slimmer:
     stats stay visible in a single swipeable row, Book now stays on the right */
  .book-bar-inner{gap:12px;min-height:0;padding-top:11px;padding-bottom:11px}
  .book-stats{flex-wrap:nowrap;overflow-x:auto;gap:22px;flex:1 1 auto;
    scrollbar-width:none;-ms-overflow-style:none}
  .book-stats::-webkit-scrollbar{display:none}
  .book-stat{flex:0 0 auto}
  .book-stat .cs-label{font-size:10px}
  .book-stat .cs-value{font-size:13px;white-space:nowrap}
  .book-bar .btn{flex:0 0 auto;padding:11px 16px;font-size:14px}
}

/* course-detail hero is a touch taller + holds the glance box (consistent across all course pages) */
.course-hero{min-height:54vh}
.course-hero .course-hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;width:100%;position:relative}
.course-hero h1{max-width:16ch}
.course-hero h1 .lvl-dot{width:9px;height:9px;margin-left:14px}
.course-hero .course-tagline{font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.84);margin-top:18px;max-width:46ch;line-height:1.6}

/* ── SECTION INTRO (reuses .h-sec/.lead/.eyebrow from deepsea) ────── */
.page-sec{padding:var(--section) 0;position:relative;overflow:hidden}
.page-sec--deep{background:var(--deep)}
.page-sec--abyss{background:var(--abyss)}
.sec-head{max-width:680px;margin-bottom:clamp(26px,3.2vw,40px)}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .h-sec{margin-bottom:16px}
.filter-intro{font-size:clamp(16px,1.6vw,18px);line-height:1.65;color:var(--text);max-width:64ch;margin-bottom:clamp(22px,2.5vw,32px)}

/* ── COURSE AT A GLANCE (stacked: label small grey over bold value) ─ */
.glance{background:var(--glass-2);border:1px solid var(--glass-line);border-radius:var(--radius);
  padding:8px 26px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.glance h3{font-family:var(--display);font-weight:600;font-size:18px;color:#fff;padding:22px 0 6px;letter-spacing:-.01em}
.glance-row{padding:18px 0;border-top:1px solid var(--line)}
.glance-row:first-of-type{border-top:1px solid var(--line)}
.glance-label{font-size:12.5px;font-weight:500;letter-spacing:.04em;color:var(--text-soft);text-transform:uppercase;margin-bottom:7px}
.glance-value{font-size:16px;font-weight:600;color:#fff;line-height:1.4}
.glance-cta{padding:22px 0 26px;text-align:center}
.glance-cta .btn{width:auto}

/* ── COURSE BODY (overview / program / assessment) ───────────────── */
.course-body-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(36px,5vw,72px);align-items:start}
.course-main h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;
  color:#fff;margin:0 0 18px}
.course-main h2:not(:first-child){margin-top:clamp(44px,5vw,64px)}
.course-main p{font-size:16px;line-height:1.72;color:var(--text);margin-bottom:16px;max-width:62ch}
.program-list{display:flex;flex-direction:column;counter-reset:mod}
.program-list li{position:relative;padding:20px 0 20px 56px;border-top:1px solid var(--line)}
.program-list li:last-child{border-bottom:1px solid var(--line)}
.program-list li::before{counter-increment:mod;content:counter(mod,decimal-leading-zero);position:absolute;left:0;top:20px;
  font-family:var(--display);font-weight:600;font-size:15px;color:var(--glow);opacity:.85}
.program-list strong{display:block;font-weight:600;font-size:16.5px;color:#fff;margin-bottom:5px}
.program-list span{font-size:14.5px;line-height:1.6;color:var(--text-soft)}
.course-aside{position:sticky;top:100px;display:flex;flex-direction:column;gap:16px}

/* ── COURSE DETAIL (V7 layout · deep-sea) ────────────────────────── */
.course-hero .course-hero-grid{grid-template-columns:1.08fr .92fr}
.course-hero-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--glass-line);
  box-shadow:0 44px 96px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
.course-hero-media img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.course-hero-media:hover img{transform:scale(1.04)}
.course-stats{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,3vw,40px);
  margin:clamp(22px,3vw,32px) 0 clamp(24px,3vw,34px)}
.course-stat{padding:14px 0;border-top:1px solid var(--line)}
.cs-label{display:block;font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);margin-bottom:5px}
.cs-value{display:block;font-size:15.5px;font-weight:600;color:#fff;line-height:1.35}

.course-blk{margin-bottom:clamp(44px,5vw,68px)}
.course-blk:last-child{margin-bottom:0}
.course-blk .eyebrow{margin-bottom:12px}
.course-blk .h-sec{font-size:clamp(23px,2.5vw,31px);margin-bottom:18px}
.course-blk>p{font-size:16px;line-height:1.74;color:var(--text);margin-bottom:14px;max-width:64ch}

/* multi-column (not grid) so a short item never leaves an empty gap beside a
   tall one — spacing stays uniform whether there are 2 points or 6 */
.check-list{columns:2;column-gap:30px}
.check-list li{position:relative;padding:11px 0 11px 34px;font-size:15px;line-height:1.5;color:var(--text);
  break-inside:avoid;-webkit-column-break-inside:avoid}
.check-list li::before{content:'';position:absolute;left:0;top:9px;width:21px;height:21px;border-radius:50%;
  background:rgba(95,178,245,.15);border:1px solid rgba(95,178,245,.3)}
.check-list li::after{content:'';position:absolute;left:6px;top:13px;width:9px;height:6px;
  border-left:2px solid var(--glow);border-bottom:2px solid var(--glow);transform:rotate(-45deg)}

.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.5vw,20px)}
.pcard{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid var(--glass-line);border-radius:16px;padding:22px 22px 20px;
  transition:transform .45s var(--spring),border-color .4s var(--smooth),box-shadow .4s var(--smooth);will-change:transform}
/* V14: .pcard hover unified (deepsea) */
.pcard .pnum{font-family:var(--display);font-weight:600;font-size:15px;color:var(--glow);opacity:.85;display:block;margin-bottom:12px}
.pcard h3{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;color:#fff;margin-bottom:12px}
.pcard ul{display:flex;flex-direction:column;gap:7px}
.pcard li{position:relative;padding-left:16px;font-size:14px;line-height:1.5;color:var(--text-soft)}
.pcard li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--glow);opacity:.75}

@media (max-width:1024px){
  .course-hero-media img{aspect-ratio:16/10}
  .check-list{columns:2;column-gap:24px}
  .pgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .course-stats{column-gap:24px}
  .check-list{columns:1}
  .pgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pcard:hover,.course-hero-media:hover img{transform:none}
}

/* ── COURSE DETAIL v2 · full-bleed image hero + floating enrolment card ── */
.course-hero2{position:relative;min-height:74vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--nav-h) + 56px) 0 0;overflow:hidden;background:var(--abyss);isolation:isolate}
.course-hero2-bg{position:absolute;inset:0;z-index:-2;background-image:var(--img);background-size:cover;
  background-position:center;transform:scale(1.06);animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
.course-hero2-tint{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(3,16,31,.5),rgba(3,16,31,.32) 38%,rgba(3,16,31,.94) 100%),
  linear-gradient(90deg,rgba(3,16,31,.8),rgba(3,16,31,.25) 72%)}
.course-hero2-inner{position:relative;padding-bottom:clamp(48px,6vw,84px)}
.course-hero2-inner .eyebrow{margin-bottom:16px}
.course-hero2-inner h1{font-family:var(--display);font-weight:600;color:#fff;font-size:clamp(34px,5.6vw,68px);
  line-height:1.04;letter-spacing:-.03em;max-width:18ch;text-wrap:balance}
.course-hero2-inner .course-tagline{font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.86);
  margin-top:18px;max-width:56ch;line-height:1.6;text-wrap:pretty}
.course-hero2-inner .btn{margin-top:clamp(24px,3vw,32px)}

.enrol-wrap{position:relative;z-index:3;margin-top:clamp(-70px,-5vw,-44px)}
.enrol-card{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:clamp(14px,2vw,30px);align-items:center;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--glass-line);border-radius:var(--radius);padding:clamp(20px,2.3vw,28px) clamp(24px,3vw,38px);
  box-shadow:0 44px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.16)}
.enrol-stat{display:flex;flex-direction:column;gap:5px;min-width:0}
.enrol-stat .cs-label{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.enrol-stat .cs-value{font-size:15.5px;font-weight:600;color:#fff;line-height:1.3}
.enrol-btn{white-space:nowrap}

.course-content{padding-top:clamp(56px,6vw,90px)}
.course-read{max-width:840px;margin:0 auto}
.course-read .course-blk{margin-bottom:clamp(48px,5vw,72px)}
.course-read .course-blk:last-child{margin-bottom:0}
.course-read .course-blk .h-sec{font-size:clamp(24px,2.6vw,33px);margin-bottom:18px}

@media (prefers-reduced-transparency:reduce){
  .enrol-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(12,38,64,.96)}
}
@media (max-width:860px){
  .course-hero2{min-height:62vh}
  .enrol-card{grid-template-columns:1fr 1fr;gap:18px 24px}
  .enrol-btn{grid-column:1/-1;justify-self:stretch}
}
@media (prefers-reduced-motion:reduce){
  .course-hero2-bg{animation:none;transform:scale(1.04)}
}

/* ── RELATED COURSES (reuses .grid-courses/.cc) ──────────────────── */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,22px)}

/* ── FORMS (deep-sea) ────────────────────────────────────────────── */
.form-section{padding:var(--section) 0;background:var(--deep);position:relative;overflow:hidden}
.form-shell{max-width:720px;margin:0 auto;position:relative}
.form-intro{font-size:16px;line-height:1.7;color:var(--text);margin-bottom:26px;text-wrap:pretty}
.form-card{background:var(--glass-2);border:1px solid var(--glass-line);border-radius:var(--radius);
  padding:clamp(24px,3vw,40px);box-shadow:0 36px 90px rgba(0,0,0,.5)}
.form-group{margin-bottom:20px}
.form-group:last-of-type{margin-bottom:8px}
.form-group label{display:block;font-size:14px;font-weight:500;color:#fff;margin-bottom:9px}
.req{color:var(--glow)}
.form-control{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;font-family:inherit;font-size:15px;color:#fff;outline:none;
  transition:border-color .2s,background .2s}
.form-control::placeholder{color:rgba(255,255,255,.38)}
.form-control:focus{border-color:var(--glow);background:rgba(255,255,255,.07)}
.form-control:disabled{opacity:.5;cursor:not-allowed}
select.form-control{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fb2f5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:18px;padding-right:46px}
select.form-control option{background:#0a1f38;color:#fff}
textarea.form-control{min-height:120px;resize:vertical;line-height:1.6}
.form-note{font-size:13px;color:var(--text-soft);margin:14px 0 22px;line-height:1.6}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.btn-inline{align-self:center}
/* V14: certificate-tracker submit button centred under the field (matches approved mockup) */
.cert-actions{display:flex;justify-content:center}

/* checkboxes / radios (franchise) */
.check-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0}
.check-row input{margin-top:3px;width:18px;height:18px;accent-color:var(--blue);flex:0 0 auto}
.check-row label{font-size:14px;font-weight:400;color:var(--text);line-height:1.55;margin:0}
.radio-row{display:flex;gap:24px;padding-top:4px}
.radio-row label{display:flex;align-items:center;gap:9px;font-weight:400;color:var(--text);margin:0}
.radio-row input{width:18px;height:18px;accent-color:var(--blue)}
.is-hidden{display:none}
.btn[disabled],.btn-primary[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

.form-success{display:none;background:rgba(94,209,168,.12);border:1px solid rgba(94,209,168,.4);
  border-radius:13px;padding:16px 18px;font-size:14.5px;color:#aef0d6;margin-bottom:22px;line-height:1.6}
.form-success.show{display:block}

.form-aside{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline;
  padding-top:24px;border-top:1px solid var(--line);justify-content:center;text-align:center}
.form-aside h3{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft)}
.aside-email{font-size:16px;font-weight:600;color:var(--glow)}
.aside-email:hover{color:var(--blue-2)}

/* ── CERTIFICATE TRACKER ─────────────────────────────────────────── */
.tracker-shell{max-width:640px;margin:0 auto;position:relative}
.tracker-instruct{font-size:16px;line-height:1.65;color:var(--text);text-align:center;margin-bottom:26px;text-wrap:pretty}
.tracker-form{display:flex;gap:12px;margin-bottom:6px}
.tracker-form .form-control{flex:1}
.tracker-hint{font-size:12.5px;color:var(--text-faint);text-align:center;margin-top:14px}
.tracker-result{display:none;margin-top:26px;background:var(--glass-2);border:1px solid var(--glass-line);
  border-radius:var(--radius);padding:26px 28px}
.tracker-result.show{display:block}
.tracker-result--valid{border-color:rgba(94,209,168,.4)}
.tracker-result--error{border-color:rgba(226,75,74,.4)}
.tracker-result h3{font-family:var(--display);font-weight:600;font-size:22px;color:#fff;margin-bottom:18px}
.tracker-result p{font-size:14.5px;line-height:1.65;color:var(--text)}
.tracker-result a{color:var(--glow)}
.tracker-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tf-label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft);margin-bottom:6px}
.tf-value{font-size:16px;font-weight:600;color:#fff}
.status-badge{display:inline-block;font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:999px}
.status-badge--valid{background:rgba(94,209,168,.16);color:#7fe0bf}
.status-badge--expired{background:rgba(226,75,74,.16);color:#f0a0a0}

/* ── PROSE (about / legal) ───────────────────────────────────────── */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;
  color:#fff;margin:clamp(36px,4vw,52px) 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--display);font-weight:600;font-size:19px;color:#fff;margin:28px 0 10px}
.prose p{font-size:16px;line-height:1.75;color:var(--text);margin-bottom:16px}
.prose ul{margin:0 0 16px;padding-left:0}
.prose li{position:relative;padding:8px 0 8px 26px;font-size:15.5px;line-height:1.6;color:var(--text)}
.prose li::before{content:'';position:absolute;left:0;top:16px;width:7px;height:7px;border-radius:50%;background:var(--glow)}
.prose a{color:var(--glow)}
.prose strong{color:#fff;font-weight:600}
.legal-meta{font-size:13.5px;color:var(--text-soft);margin-bottom:32px}

/* ── ABOUT value cards (reuse .pillars feel) ─────────────────────── */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.value-grid--2{grid-template-columns:repeat(2,1fr)}
.value-card{background:var(--glass);border:1px solid var(--glass-line);border-radius:18px;padding:28px 26px}
.value-card .vnum{font-family:var(--display);font-weight:600;font-size:18px;color:var(--glow);opacity:.85;margin-bottom:14px;display:block}
.value-card h3{font-family:var(--display);font-weight:600;font-size:20px;color:#fff;margin-bottom:10px;letter-spacing:-.01em}
.value-card p{font-size:14.5px;line-height:1.62;color:var(--text)}

/* ── ABOUT · The IYA Standard (clean 4-up editorial row) ─────────── */
.standard-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,36px);
  margin-top:clamp(40px,5vw,64px)}
.std-pillar{padding-top:24px;border-top:1px solid var(--line);will-change:transform;
  transition:transform .45s var(--spring),border-color .4s var(--smooth),box-shadow .4s var(--smooth)}
/* V14: .std-pillar hover unified (deepsea) */
.std-num{font-family:var(--display);font-weight:600;font-size:34px;letter-spacing:-.03em;color:var(--glow);
  opacity:.32;line-height:1;display:block;margin-bottom:16px;transition:opacity .4s var(--smooth)}
.std-pillar:hover .std-num{opacity:.85}
.std-pillar h3{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em;color:#fff;margin-bottom:10px}
.std-pillar p{font-size:14.5px;line-height:1.62;color:var(--text)}

/* ── ABOUT · approach as a light two-column ticks list ───────────── */
.approach-ticks{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,56px)}
.approach-ticks li{position:relative;padding:16px 0 16px 34px;border-top:1px solid var(--line-soft);
  font-size:15.5px;line-height:1.6;color:var(--text)}
.approach-ticks li strong{color:#fff;font-weight:600}
.approach-ticks li::before{content:'';position:absolute;left:0;top:20px;width:18px;height:18px;border-radius:50%;
  background:var(--glow);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5l4 4 8-8'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5l4 4 8-8'/%3E%3C/svg%3E") center/13px no-repeat}

@media (max-width:860px){
  .standard-row{grid-template-columns:repeat(2,1fr);gap:32px 24px}
  .approach-ticks{grid-template-columns:1fr;gap:0}
}
@media (max-width:560px){
  .standard-row{grid-template-columns:1fr;gap:24px}
}

/* ── tight CTA band reused on listing pages ──────────────────────── */
.cta-band{padding:var(--section-cta) 0;text-align:center;
  background:radial-gradient(120% 130% at 50% 0%,rgba(27,108,168,.18),transparent 60%),var(--deep)}
.cta-band .h-sec{margin-bottom:14px}
.cta-band .lead{margin:0 auto 30px}
.cta-band-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width:1024px){
  .course-hero .course-hero-grid{grid-template-columns:1fr;gap:36px}
  .course-body-grid{grid-template-columns:1fr;gap:40px}
  .course-aside{position:static}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .value-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .page-hero{min-height:clamp(320px,52vh,440px)}
  .tracker-form{flex-direction:column}
  .tracker-fields{grid-template-columns:1fr}
  .form-row-2{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}
  .form-aside{flex-direction:column;gap:10px}
}

/* ════════════════════ ELEVATION PASS (inner-page surfaces) ════════════════════ */
/* course-at-a-glance + form card: frosted glass with layered depth */
.glance{background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 38px 84px rgba(0,0,0,.5)}
.form-card{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 42px 104px rgba(0,0,0,.55)}
/* value cards: hover lift now unified (deepsea) */
.value-card{transition:transform .45s var(--spring),border-color .4s var(--smooth),box-shadow .4s var(--smooth);will-change:transform}
/* tracker result + program cards inherit the deeper shadow language */
.tracker-result{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 36px 84px rgba(0,0,0,.5)}

@media (prefers-reduced-transparency:reduce){
  .glance{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-2)}
}
@media (prefers-reduced-motion:reduce){
  .value-card:hover{transform:none}
}

/* ════════════════════ V13 · M3 course key-info strip (mobile) ════════════════════
   Facts auto-scroll / drag horizontally BEHIND a fixed primary "Book now" pill.
   Auto-scroll + drag handled in mobile.js. Loads after v10.css so it wins here. */
@media (max-width:860px){
  /* V14 rev: pin the course meta bar FLUSH to the scrolled mobile nav (no gap).
     the V13 two-row header is gone; the nav is .scrolled (64px) when this sticks. */
  .book-bar{top:var(--nav-stuck)}
  .book-bar-inner{position:relative;gap:0}
  /* facts fill the row and scroll; the pill is lifted out of the flow (absolute) */
  .book-stats{flex:1 1 auto;min-width:0;touch-action:pan-y;cursor:grab}
  .book-stats:active{cursor:grabbing}
  .book-bar .btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:3;
    padding:10px 16px;font-size:13.5px}
  /* soft fade so facts dissolve behind the pill instead of a hard edge */
  .book-bar-inner::after{content:'';position:absolute;right:0;top:0;bottom:0;width:132px;z-index:2;
    pointer-events:none;background:linear-gradient(90deg,rgba(6,16,30,0),rgba(6,16,30,.9) 60%)}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .book-stats{cursor:default}   /* no auto-scroll (mobile.js honours reduce); manual scroll only */
}
/* mobile.js clones the facts for a seamless loop — never show the duplicates on desktop */
@media (min-width:861px){.book-stats .bs-clone{display:none}}