/* Booty Center Academy V16 visual system: calm, credible professional education */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{
  --bg:#FFFFFF; --bg-2:#F6F7F8; --ink:#171717; --body:#4B5563; --navy:#1D3154; --navy-2:#243B63;
  --orange:#FF9E1C; --orange-dark:#E88A00; --line:#E2E5E9; --line-2:#CDD2D8; --muted:#6B7280;
  --on-navy:#FFFFFF; --on-navy-2:#C9D2E3; --navy-line:rgba(255,255,255,.16);
  --err:#B42318; --err-bg:#FEF3F2; --err-line:#F4C7C3;
  --r:8px; --r-lg:12px; --pad:clamp(20px,4.5vw,56px); --hdr:64px; --sub:52px;
  --shadow:0 12px 40px rgba(23,23,23,.10); --shadow-sm:0 2px 10px rgba(23,23,23,.06);
  --font:'Inter',system-ui,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%}
[id]{scroll-margin-top:calc(var(--hdr) + var(--sub) + 16px)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none !important; animation:none !important} }
body{margin:0; background:var(--bg); color:var(--body); font-family:var(--font); font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip}
h1,h2,h3,h4{font-family:var(--font); color:var(--ink); margin:0; letter-spacing:0; text-wrap:balance}
h1{font-weight:700; line-height:1.08}
h2{font-weight:600; line-height:1.15}
h3,h4{font-weight:600; line-height:1.25}
p{margin:0}
a{color:var(--navy); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--ink)}
img{max-width:100%; display:block}
b,strong{font-weight:700}
.wrap{max-width:1180px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
section{padding-top:clamp(56px,7vw,96px); padding-bottom:clamp(56px,7vw,96px)}
.eyebrow{display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.h2{font-size:clamp(28px,3.6vw,42px); margin:12px 0 16px; max-width:26ch}
.lead{color:var(--body); max-width:62ch; text-wrap:pretty; font-size:clamp(17px,1.3vw,19px); line-height:1.6}
.muted{color:var(--muted)}
.center{text-align:center}
.center .h2,.center .lead{margin-left:auto; margin-right:auto}
.split{display:grid; gap:28px}
@media(min-width:900px){ .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px} }
.chip{display:inline-flex; align-items:center; background:#FFF1DC; color:var(--ink); font-size:12.5px; font-weight:600; letter-spacing:.02em; padding:5px 9px; border-radius:6px; line-height:1}
.fine{font-size:13.5px; color:var(--muted); margin-top:12px; line-height:1.5}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:13px 24px; border-radius:var(--r); font-size:16px; font-weight:600; text-decoration:none; border:1.5px solid transparent; cursor:pointer; line-height:1.2; transition:background .15s,color .15s,border-color .15s; text-align:center; font-family:inherit; text-wrap:balance}
.btn-primary{background:var(--orange); color:var(--ink); border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-dark); border-color:var(--orange-dark); color:var(--ink)}
.btn-ghost{border-color:var(--line-2); color:var(--ink); background:var(--bg)}
.btn-ghost:hover{border-color:var(--ink); color:var(--ink)}
.btn-white{background:var(--bg); color:var(--ink); border-color:var(--bg)}
.btn-white:hover{background:var(--bg-2); border-color:var(--bg-2); color:var(--ink)}
.btn-lg{min-height:56px; font-size:17px; padding:15px 28px; width:100%}
.textlink{font-weight:600; color:var(--navy); text-decoration:underline; text-underline-offset:3px}
.textlink:hover{color:var(--ink)}
:is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid var(--navy); outline-offset:3px; border-radius:6px}
.on-navy :is(a,button,summary):focus-visible,footer :is(a,button):focus-visible{outline-color:var(--on-navy)}
.skip{position:absolute; left:-9999px; background:var(--ink); color:var(--bg); padding:12px 18px; z-index:99; font-weight:600}
.skip:focus{left:0; top:0}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

/* Pricing states: <body data-price-state="launch|regular"> */
body[data-price-state="launch"] .ps:not(.ps-launch){display:none !important}
body[data-price-state="regular"] .ps:not(.ps-regular){display:none !important}
body:not([data-price-state]) .ps:not(.ps-launch){display:none !important}
[hidden]{display:none !important}

/* Header */
header{position:sticky; top:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--hdr)}
.lockup{text-decoration:none; color:var(--navy); display:flex; align-items:baseline; gap:8px; white-space:nowrap; flex-shrink:0}
.lockup:hover{color:var(--navy)}
.lockup b{font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1}
.lockup span{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.nav-links{display:none; gap:26px; font-size:14.5px; font-weight:500}
.nav-links a{color:var(--body); text-decoration:none; white-space:nowrap}
.nav-links a[aria-current]{color:var(--navy); font-weight:600}
.nav-links a:hover{color:var(--ink)}
.nav .btn{min-height:44px; padding:10px 18px; font-size:15px; flex-shrink:0}
.header-cta{display:none}
@media(min-width:960px){ .nav-links{display:flex} .header-cta{display:inline-flex} }
@media(max-width:959px){ .nav .btn:not(.header-cta){min-height:44px; padding:8px 14px; font-size:14px} }

/* Sticky anchor sub-navigation */
.subnav{position:sticky; top:var(--hdr); z-index:30; background:var(--bg); border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:var(--sub)}
.subnav ul{list-style:none; margin:0; padding:0; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.subnav ul::-webkit-scrollbar{display:none}
.subnav li a{display:inline-block; padding:15px 12px; font-size:14.5px; font-weight:600; color:var(--body); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px}
.subnav li a:hover,.subnav li a.is-active{color:var(--navy); border-color:var(--navy)}
.subnav .price{display:none; align-items:center; gap:14px; flex-shrink:0; font-size:14.5px; color:var(--body)}
.subnav .price b{color:var(--ink); font-size:18px; font-weight:700}
.subnav .price .btn{min-height:40px; padding:8px 16px; font-size:14.5px}
@media(min-width:960px){ .subnav .price{display:flex} }
@media(max-width:959px){ .subnav .wrap{padding-left:0; padding-right:0} .subnav ul{padding:0 var(--pad)} }

/* Image slots (reserved for final assets; see the image brief) */
.img{position:relative; overflow:hidden; border-radius:var(--r-lg); background:#E9ECF0; color:var(--body); display:grid; place-items:center; text-align:center; isolation:isolate; border:1px solid var(--line)}
.img img,.img picture{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
/* Document renders (course pages, cover, certificate) must never be cropped — contain, on a paper ground */
.img-doc img{object-fit:contain; padding:10px}
.img picture img{object-position:50% 30%}
.img .lbl{position:relative; z-index:2; padding:18px; font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; line-height:1.5; max-width:28ch}
.img .lbl small{display:block; margin-top:8px; font-size:11.5px; letter-spacing:0; text-transform:none; color:var(--muted); font-weight:500}
.img-light{background:var(--bg-2)}
.img-paper{background:#FBFBFC}

/* Course hero */
.hero{padding-top:clamp(32px,4vw,52px); padding-bottom:clamp(48px,6vw,88px)}
.hero-grid{display:grid; gap:36px; align-items:center}
@media(min-width:1000px){ .hero-grid{grid-template-columns:minmax(0,11fr) minmax(0,9fr); gap:64px} }
.hero h1{font-size:clamp(34px,4.5vw,56px); line-height:1.1; margin:0 0 18px; max-width:17ch}
.hero .lead{font-size:clamp(17px,1.6vw,22px); max-width:56ch}
/* Hero eyebrow (V20): navy, uppercase. RULE: no orange text anywhere — #FF9E1C on white fails contrast; orange is CTA fill and graphic accents only. */
.eyebrow-ce{margin:0 0 14px; font-size:clamp(14px,1.1vw,16px); font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--navy)}
/* Emphasis on "Glute Training Specialist": Title Case, navy. No underline, no orange — clean and formal. */
.hero h1 .swash{color:var(--navy)}
.trust{display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin:0 0 26px}
.trust img{width:auto; flex-shrink:0}
.trust .ce-nasm{height:68px}
.trust .ce-afaa{height:106px; margin:-20px -10px}
.trust span{font-size:13.5px; font-weight:600; color:var(--body); letter-spacing:.02em}
.identity{margin-top:12px; font-weight:600; color:var(--ink); font-size:16.5px}
.benefits{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px}
.benefits li{display:flex; gap:12px; align-items:flex-start; font-weight:500; color:var(--ink); font-size:17px}
.benefits li::before{content:""; flex:0 0 20px; height:20px; margin-top:4px; border-radius:50%; background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23171717' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5l3.5 3.5 6.5-8'/%3E%3C/svg%3E") center/13px no-repeat}
.format{margin-top:14px; color:var(--body); font-size:15px; font-weight:500}
.offer{margin-top:16px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 28px}
.offer .terms{flex:1 1 240px; margin:0}
.offer .price{margin-top:4px}
/* Hero outcome bullets */
.hero-points{list-style:none; margin:0 0 4px; padding:0; display:grid; gap:11px}
.hero-points li{position:relative; padding-left:30px; font-size:clamp(16px,1.3vw,18px); line-height:1.45; color:var(--body)}
.hero-points li::before{content:""; position:absolute; left:0; top:.28em; width:18px; height:18px; border-radius:50%; background:var(--navy); -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 8.5 6.5 12 13 4.5" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/100% no-repeat; mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 8.5 6.5 12 13 4.5" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/100% no-repeat}
.hero .cta-row{margin-top:26px}
.hero .cta-row .btn{font-size:17px}
.hero .fine{margin-top:12px; font-size:13.5px}
.hero .cta-row .btn{min-width:240px}
.hero-visual .img{aspect-ratio:4/3; width:100%}
@media(min-width:1000px){ .hero-visual .img{aspect-ratio:4/5; max-height:600px} }
/* Hero course cover: true cover ratio, never cropped */
.hero-visual .img-cover{aspect-ratio:1103/1426; max-height:none; background:var(--bg-2); box-shadow:var(--shadow)}
@media(min-width:1000px){ .hero-visual .img-cover{aspect-ratio:1103/1426; max-height:660px; width:auto; max-width:100%; margin:0 auto} }
.price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:8px}
.price .amt{font-weight:700; font-size:clamp(38px,4vw,48px); line-height:1; color:var(--ink); letter-spacing:-.02em}
.price .cur{font-size:14px; font-weight:600; color:var(--muted)}
.price s{color:var(--muted); font-size:20px; font-weight:600}
.terms{margin-top:8px; color:var(--body); font-size:14.5px; line-height:1.5}
.terms b{color:var(--ink); font-weight:600}
.ends{margin-top:8px; font-size:14px; color:var(--ink); font-weight:600}
/* Mobile hero (<640px): compact trust row, tighter type, full-width CTAs, bookshelf-scale cover. Placed AFTER all hero rules so it wins the cascade. */
@media(max-width:639px){
  .hero{padding-top:24px}
  .hero-grid{gap:28px}
  .trust{gap:8px 16px; margin-bottom:18px}
  .trust .ce-nasm{height:42px}
  .trust .ce-afaa{height:64px; margin:-12px -6px}
  .trust span{font-size:12px}
  .eyebrow-ce{font-size:12px; letter-spacing:.03em; margin-bottom:10px}
  .hero h1{font-size:31px; margin-bottom:14px}
  .hero-points{gap:9px}
  .hero-points li{font-size:15px; padding-left:26px}
  .hero-points li::before{width:16px; height:16px}
  .hero .cta-row{margin-top:20px}
  .hero .cta-row .btn{width:100%; min-width:0}
  .hero .fine{font-size:12.5px}
  .hero-visual .img-cover{max-width:280px; margin:0 auto}
}

/* CEU highlight in proof strip */
.proof li.hot{background:var(--orange); border-radius:var(--r-lg); padding:14px 18px; margin:-14px 0}
.proof li.hot b,.proof li.hot span{color:var(--ink)}
.proof li.hot span em{display:block; font-style:normal; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); margin-top:3px}
/* CEU coverage meters */
.ce-big{max-width:22ch}
.ce-meter{margin:26px 0 4px; display:grid; gap:16px}
.cm-row{display:grid; gap:6px}
.cm-lbl{font-size:13.5px; font-weight:500; color:var(--body)}
.cm-lbl b{color:var(--ink); font-weight:600}
.cm-bar{display:block; height:34px; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.cm-fill{display:flex; align-items:center; height:100%; background:var(--orange); border-radius:7px 0 0 7px; padding:0 12px; min-width:fit-content}
.cm-fill b{font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap}
.cm-note{font-size:13px; font-weight:600; color:var(--navy)}

/* Continuing-education approval (NASM/AFAA approved-provider logos: never recolored, cropped or placed on a tinted ground) */
.ce-badges{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:14px 0 6px; padding:12px 16px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); width:fit-content; max-width:100%}
.ce-badges img{width:auto; flex-shrink:0}
.ce-badges .ce-nasm{height:52px}
.ce-badges .ce-afaa{height:80px; margin:-14px -8px}
.ce-badges .ce-val{display:grid; gap:2px; line-height:1.3; padding-left:16px; border-left:1px solid var(--line)}
.ce-badges .ce-val b{font-size:15px; font-weight:600; color:var(--ink)}
.ce-badges .ce-val small{font-size:12.5px; color:var(--muted)}
.ce-badges-sm{margin:14px 0 0; padding:8px 12px; gap:8px 12px; border-radius:var(--r)}
.ce-badges-sm .ce-nasm{height:38px}
.ce-badges-sm .ce-afaa{height:58px; margin:-10px -6px}
.ce-badges-sm .ce-val{padding-left:12px}
.ce-badges-sm .ce-val b{font-size:13.5px}
.ce{border-bottom:1px solid var(--line)}
.ce-grid{display:grid; gap:32px; align-items:center}
@media(min-width:960px){ .ce-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px} }
.ce .lead b{color:var(--ink); font-weight:600}
.ce-facts{margin:26px 0 0; display:grid; border-top:1px solid var(--line)}
@media(min-width:640px){ .ce-facts{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px} }
.ce-facts div{padding:14px 0; border-bottom:1px solid var(--line); display:grid; gap:3px}
.ce-facts dt{font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.ce-facts dd{margin:0; color:var(--ink); font-weight:500; font-size:15.5px; text-wrap:pretty}
.ce-stmt{margin-top:18px; font-size:14px; color:var(--body); max-width:70ch; text-wrap:pretty}
.ce-logos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.ce-logo{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:28px 20px 22px; display:grid; justify-items:center; gap:14px; text-align:center}
.ce-logo img{height:120px; width:auto}
.ce-logo .ce-afaa{height:180px; margin:-30px 0}
.ce-logo span{font-size:14px; font-weight:600; color:var(--ink)}
@media(min-width:960px){ .ce-logo img{height:150px} .ce-logo .ce-afaa{height:225px; margin:-38px 0} }

/* Why this course / Why specialize */
.why{border-bottom:1px solid var(--line)}
.why-grid{display:grid; gap:26px; margin-top:34px}
@media(min-width:900px){ .why-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px} .why-grid-2{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:880px} }
.why-grid article{display:grid; gap:10px; align-content:start}
.why-grid h3{margin:0; font-size:19px; font-weight:600; color:var(--ink); line-height:1.25}
.why-grid p{margin:0; font-size:15.5px; line-height:1.65; color:var(--body); text-wrap:pretty}
.ce-note{margin:16px 0 0; font-size:15px; font-weight:600; color:var(--navy); max-width:60ch; text-wrap:pretty}

/* Careers strip (no salary figures by decision) */
.careers{margin-top:34px; padding-top:26px; border-top:1px solid var(--line)}
.careers-lbl{display:block; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.careers ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.careers li{font-size:14.5px; font-weight:500; color:var(--navy); background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:8px 16px}

/* Payment-option selector (radio cards) */
.pay-pick{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 4px}
.pay-pick label{display:flex; flex-direction:column; gap:2px; padding:14px 14px 12px; border:1.5px solid var(--line-2); border-radius:10px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s}
.pay-pick label:has(input:checked){border-color:var(--navy); box-shadow:0 0 0 1px var(--navy)}
.pay-pick input{position:absolute; opacity:0; pointer-events:none}
.pay-pick .pp-name{font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.pay-pick .pp-price{font-size:26px; font-weight:700; color:var(--navy); letter-spacing:-.01em}
.pay-pick .pp-sub{font-size:12.5px; color:var(--body); line-height:1.35}

/* Founding-cohort note (honest social proof; no fake reviews) */
.cohort-note{max-width:64ch; margin:14px 0 0; padding:12px 16px; border:1px solid var(--line); border-radius:8px; background:var(--bg-2); font-size:14.5px; line-height:1.55; color:var(--body)}

/* Stat strip (V20, first band under the hero; pages and hours excluded) */
.stats{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:30px 0 34px}
.stats ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 24px}
@media(min-width:760px){ .stats ul{grid-template-columns:repeat(4,minmax(0,1fr))} }
.stats li{display:flex; flex-direction:column; gap:4px; border-left:1px solid var(--line-2); padding-left:18px}
.stats b{font-size:clamp(32px,3vw,40px); font-weight:700; line-height:1.05; color:var(--navy); letter-spacing:-.01em}
.stats li span{font-size:13.5px; font-weight:500; color:var(--muted); line-height:1.4}

/* How it works */
.how-depth{margin:32px 0 0; padding-top:24px; border-top:1px solid var(--line); color:var(--body); font-size:16.5px; line-height:1.6; max-width:74ch; text-wrap:pretty}

/* Proof strip */
.proof{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0}
.proof .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:18px 40px}
.proof-lbl{font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); flex:0 0 auto; margin:0}
.proof ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; flex:1 1 560px}
@media(min-width:700px){ .proof ul{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:1000px){ .proof ul{grid-template-columns:repeat(5,minmax(0,1fr))} }
.proof li{display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line-2); padding-left:16px}
.proof b{font-size:clamp(24px,2.4vw,30px); font-weight:700; line-height:1.1; color:var(--ink); letter-spacing:-.01em}
.proof li span{font-size:13.5px; color:var(--body); line-height:1.4}

/* Transformation */
.shift-grid{display:grid; gap:36px}
@media(min-width:960px){ .shift-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start} }
.pull{margin-top:26px; padding:20px 0 0; border-top:1px solid var(--line); color:var(--ink); font-weight:600; font-size:clamp(18px,1.5vw,20px); line-height:1.45; text-wrap:pretty}
.fromto{list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--line)}
.fromto li{display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:18px 0; border-bottom:1px solid var(--line)}
@media(min-width:640px){ .fromto li{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); align-items:center; gap:14px} }
.fromto .from{color:var(--body); font-size:15.5px}
.fromto .from::before,.fromto .to::before{display:block; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px; color:var(--muted)}
.fromto .from::before{content:"From"}
.fromto .to::before{content:"To"}
.fromto .to{color:var(--ink); font-weight:600; font-size:16.5px}
.fromto .arr{display:none; color:var(--navy); font-size:18px; place-items:center}
@media(min-width:640px){ .fromto .arr{display:grid} }

/* Capabilities */
.caps{display:grid; gap:0; margin-top:36px; border-top:1px solid var(--line)}
@media(min-width:640px){ .caps{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px} }
@media(min-width:1000px){ .caps{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 48px} }
.cap{padding:24px 0 26px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.cap .num{font-size:13px; font-weight:700; color:var(--navy); letter-spacing:.04em}
.cap h3{font-size:20px}
.cap p{color:var(--body); font-size:15.5px; text-wrap:pretty}
.caps-sec .foot{margin-top:28px; color:var(--body); font-size:15px; max-width:70ch}

/* Inside the course */
.inside{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.inside-head{display:grid; gap:20px; align-items:end}
@media(min-width:960px){ .inside-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px} }
.inside-head .lead{max-width:none}
/* Gallery: puzzle collage — two interlocking columns whose widths are solved so the pieces pack edge to edge with no empty space. Each frame keeps its page's true aspect ratio (--ar): never cropped, never letterboxed. The photo opener (.g-photo) flexes to absorb the last few px of slack so both column bottoms align. Captions sit on the pieces as chips. */
.gallery-hint{margin:32px 0 0; font-size:14px; color:var(--muted)}
.gallery{display:flex; gap:14px; margin-top:16px; align-items:stretch}
.g-col{display:flex; flex-direction:column; gap:14px; min-width:0}
.g-main{flex:1.958 1 0%}
.g-side{flex:1 1 0%}
.g-sub{display:flex; gap:14px; align-items:flex-start}
.g-sub figure{flex:var(--fx,1) 1 0%}
.gallery figure{margin:0; min-width:0; display:flex; flex-direction:column; gap:8px}
.g-photo{flex:1 1 auto; display:flex; flex-direction:column}
.g-photo .zoom{flex:1; display:flex}
.g-photo .img{flex:1; height:100%; aspect-ratio:auto; min-height:220px}
.gallery .zoom{display:block; width:100%; margin:0; padding:0; border:0; background:none; cursor:zoom-in; border-radius:calc(var(--r) + 1px)}
.gallery .zoom:focus-visible{outline:2px solid var(--orange); outline-offset:3px}
.gallery .img{display:block; width:100%; aspect-ratio:var(--ar,4/3); border-radius:var(--r); background:var(--bg-2); box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:transform .22s ease, box-shadow .22s ease}
.gallery .img img{object-fit:cover; padding:0}
.gallery .zoom:hover .img{transform:scale(1.015); box-shadow:var(--shadow)}
.gallery .g-feature .img{box-shadow:var(--shadow)}
.gallery figcaption{font-size:13px; color:var(--body); font-weight:500; line-height:1.4}
@media(max-width:719px){
  .gallery{flex-direction:column}
  .g-photo{flex:none}
  .g-photo .zoom{display:block}
  .g-photo .img{aspect-ratio:.7728; height:auto; min-height:0}
}
/* Gallery lightbox */
.lightbox{border:0; padding:0; background:transparent; max-width:none; overflow:visible}
.lightbox::backdrop{background:rgba(12,15,20,.8)}
.lightbox figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:12px}
.lightbox img{display:block; max-width:min(1360px,92vw); max-height:86vh; width:auto; height:auto; border-radius:10px; background:#fff; box-shadow:0 32px 90px rgba(0,0,0,.55)}
.lightbox figcaption{color:#fff; font-size:14px; font-weight:500}
.lb-close{position:fixed; top:18px; right:22px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; cursor:pointer; z-index:2}
.lb-close:hover{background:rgba(255,255,255,.28)}
.contents{display:grid; gap:30px; margin-top:40px; align-items:start}
@media(min-width:960px){ .contents{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px} }
.spec{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; border-top:1px solid var(--line-2); margin:0}
@media(min-width:640px){ .spec{grid-template-columns:repeat(3,minmax(0,1fr))} }
.spec div{padding:16px 0 14px; border-bottom:1px solid var(--line-2); display:flex; flex-direction:column-reverse; justify-content:flex-end}
.spec dt{font-size:13.5px; color:var(--body)}
.spec dd{margin:0; font-weight:700; font-size:26px; line-height:1.1; color:var(--ink); letter-spacing:-.01em}
.previews{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px}
.previews h3{font-size:20px; margin-bottom:6px}
.previews p{color:var(--body); font-size:15px; margin-bottom:14px}
.previews ul{list-style:none; margin:0; padding:0; display:grid}
.previews a{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; border-top:1px solid var(--line); padding:11px 0; text-decoration:none; color:var(--navy); font-weight:600; font-size:15px}
.previews li:last-child a{border-bottom:1px solid var(--line)}
.previews a:hover{color:var(--ink)}
.previews a span{font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--muted); flex-shrink:0}

/* Pathways */
.paths{display:grid; gap:32px; margin-top:36px}
@media(min-width:900px){ .paths{grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px} }
.path{display:flex; flex-direction:column}
.path .img{aspect-ratio:3/2; border-radius:var(--r-lg)}
.path .body{padding:20px 0 0; display:flex; flex-direction:column; gap:8px; flex:1}
.path h3{font-size:22px; margin-top:4px}
.path p{color:var(--body); font-size:15.5px; text-wrap:pretty}
.path .note{font-size:13.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px; margin-top:auto}

/* Curriculum */
.curr{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.parts{display:grid; gap:10px; margin-top:34px}
@media(min-width:900px){ .parts{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px} }
.part{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg)}
.part summary{list-style:none; cursor:pointer; padding:18px 20px; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:14px}
.part summary::-webkit-details-marker{display:none}
.part summary::after{content:""; width:10px; height:10px; border-right:2px solid var(--orange-dark); border-bottom:2px solid var(--orange-dark); transform:rotate(45deg); transition:transform .2s; flex-shrink:0; margin-right:4px}
.part[open] summary::after{transform:rotate(-135deg)}
.part.static summary{cursor:default}
.part.static summary::after{display:none}
.pt{display:grid; gap:2px}
.pn{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.pname{font-weight:600; font-size:19px; line-height:1.25; color:var(--ink)}
.prange{font-size:13.5px; color:var(--body)}
.topics{margin:0; padding:0 20px 20px 20px; list-style:none; display:grid; gap:6px; color:var(--body); font-size:15.5px}
.topics li{padding-left:16px; position:relative}
.topics li::before{content:""; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:var(--orange-dark)}
.part-appx{border-style:dashed}
@media(min-width:900px){ .part-appx{grid-column:span 2} .part-appx .topics{grid-template-columns:repeat(3,minmax(0,1fr))} }
.spec-toggle{margin-top:20px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg)}
.spec-toggle summary{cursor:pointer; padding:16px 20px; min-height:48px; font-weight:600; color:var(--ink); list-style:none}
.spec-toggle summary::-webkit-details-marker{display:none}
.spec-toggle summary::before{content:"+ "; color:var(--navy); font-weight:700}
.spec-toggle[open] summary::before{content:"− "}
.spec-table{padding:0 20px 8px}
.spec-table .row{display:grid; grid-template-columns:minmax(0,1fr); gap:2px; padding:12px 0; border-top:1px solid var(--line); font-size:15px}
@media(min-width:640px){ .spec-table .row{grid-template-columns:200px minmax(0,1fr); gap:16px} }
.spec-table [role=rowheader]{font-weight:600; color:var(--ink)}
.spec-table [role=cell]{color:var(--body)}

/* Assessment (the one navy section) */
.on-navy{background:var(--navy); color:var(--on-navy)}
.on-navy h2,.on-navy h3,.on-navy .h2{color:var(--on-navy)}
.on-navy .eyebrow{color:var(--on-navy-2)}
.on-navy .lead{color:var(--on-navy-2)}
.steps{list-style:none; margin:40px 0 0; padding:0; display:grid; gap:0; counter-reset:step; border-top:1px solid var(--navy-line)}
@media(min-width:700px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px} }
@media(min-width:1100px){ .steps{grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 28px} }
.steps li{counter-increment:step; padding:22px 0 24px; border-bottom:1px solid var(--navy-line); display:flex; flex-direction:column; gap:8px}
.steps li::before{content:counter(step,decimal-leading-zero); font-weight:700; font-size:13px; color:var(--on-navy-2); letter-spacing:.06em}
.steps h3{font-size:19px}
.steps p{color:var(--on-navy-2); font-size:15px; text-wrap:pretty}
.receive{margin:36px 0 0; padding:26px; background:var(--bg); color:var(--ink); border-radius:var(--r-lg); display:grid; gap:18px}
@media(min-width:900px){ .receive{grid-template-columns:minmax(0,1.2fr) minmax(0,2fr); gap:36px; align-items:center} }
.receive .img{aspect-ratio:16/10}
.receive .img-doc{aspect-ratio:1584/1224}
.receive .img-doc img{object-fit:contain; padding:0}
.receive h3{font-size:22px; margin-bottom:8px}
.receive ul{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px}
.receive li{display:grid; gap:2px; padding-left:28px; position:relative; font-size:15.5px}
.receive li b{font-weight:600}
.receive li::before{content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23171717' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5l3.5 3.5 6.5-8'/%3E%3C/svg%3E") center/12px no-repeat}
.receive li span{color:var(--body); font-size:14px}

/* Credential */
.cred{padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(40px,5vw,64px); border-bottom:1px solid var(--line)}
.cred .box{display:grid; gap:20px; border-top:1px solid var(--line); padding-top:26px}
@media(min-width:900px){ .cred .box{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px} }
.cred h2{font-size:24px; margin-top:8px}
.cred p{color:var(--body); font-size:15.5px; text-wrap:pretty}
.cred p + p{margin-top:10px}
.cred ul{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.cred ul li{font-size:13px; color:var(--body); border:1px solid var(--line); border-radius:6px; padding:5px 10px}

/* Enrollment */
.enroll-sec{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.enroll-grid{display:grid; gap:28px; margin-top:40px; align-items:start}
@media(min-width:960px){ .enroll-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px} .enroll-panel{position:sticky; top:calc(var(--hdr) + var(--sub) + 20px)} }
.stack h3{font-size:22px; margin-bottom:12px}
.stack ul{list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--line-2)}
@media(min-width:640px){ .stack ul{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px} }
.stack li{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line-2); font-size:15.5px; color:var(--ink)}
.stack li::before{content:""; flex:0 0 18px; height:18px; margin-top:4px; border-radius:50%; background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23171717' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5l3.5 3.5 6.5-8'/%3E%3C/svg%3E") center/12px no-repeat}
.stack .img{aspect-ratio:16/9; margin-top:24px}
.enroll-panel{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow)}
.enroll-panel h2{font-size:24px; margin-top:10px}
.enroll-panel .sub{color:var(--body); font-size:14.5px; margin-top:6px}
.enroll-panel .price{margin-top:18px}
.enroll-panel .price .amt{font-size:clamp(44px,4.4vw,54px)}
.enroll-panel .btn-lg{margin-top:18px}
.enroll-panel .support{font-size:14px; color:var(--body); margin-top:14px; line-height:1.55}
.enroll-panel .wa-link{display:block; margin-top:12px; font-size:14px; font-weight:600; color:var(--navy)}
.enroll-form{margin-top:18px; display:flex; flex-direction:column; gap:0}
.enroll-form label{display:block; font-size:13.5px; font-weight:600; margin:12px 0 8px; color:var(--ink)}
.enroll-form label:first-child{margin-top:0}
.enroll-form input{
  width:100%; min-height:48px; border:1.5px solid var(--line-2); border-radius:12px;
  padding:0 14px; font-size:16px; font-family:inherit; background:#fff; color:var(--ink);
}
.enroll-form input:focus{outline:3px solid var(--navy); outline-offset:2px; border-color:var(--navy)}
.enroll-form .enroll-note{font-size:13px; color:var(--body); margin:10px 0 0; line-height:1.45}
.enroll-form .enroll-error{font-size:14px; color:#9B2C2C; margin:10px 0 0; line-height:1.45}
.enroll-form .btn-lg{margin-top:16px}
.enroll-form .btn:disabled{opacity:.7; cursor:wait}
.compare{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--body)}
.compare s{color:var(--body)}
.plan{margin-top:12px; padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:14.5px; color:var(--body)}
.plan b{color:var(--ink); font-weight:600}

/* FAQ */
.faq{display:grid; margin-top:30px; max-width:860px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:18px 0; min-height:48px; font-weight:600; font-size:17px; color:var(--ink); display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; width:10px; height:10px; border-right:2px solid var(--orange-dark); border-bottom:2px solid var(--orange-dark); transform:rotate(45deg); transition:transform .2s; flex-shrink:0; margin:0 6px 4px 0}
.faq details[open] summary::after{transform:rotate(-135deg); margin-bottom:-4px}
.faq .a{padding:0 0 20px; color:var(--body); font-size:15.5px; text-wrap:pretty; max-width:70ch}
.faq .a a{color:var(--navy)}

/* Final CTA */
.final .wrap{display:grid; gap:24px; align-items:center}
@media(min-width:900px){ .final .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px} }
.final h2{font-size:clamp(28px,3.4vw,40px)}
.final .lead{margin-top:12px}
.final .cta-col{display:grid; gap:12px; justify-items:start}
@media(min-width:900px){ .final .cta-col{justify-items:end} }
.final .cta-col .btn{min-width:280px}
.final .fine{color:var(--on-navy-2)}

/* Development (single author credit) */
.dev{padding:28px 0; border-top:1px solid var(--line); color:var(--body); font-size:14.5px; display:grid; gap:2px}
.dev b{color:var(--ink); font-weight:600}

/* Footer */
footer{background:var(--navy); color:var(--on-navy-2); padding:44px 0 36px; font-size:14px}
footer .desc{max-width:80ch; text-wrap:pretty}
footer .desc + .desc{margin-top:10px}
footer nav{display:flex; flex-wrap:wrap; gap:8px 22px; margin:24px 0 16px}
footer nav a{color:var(--on-navy); text-decoration:none; font-weight:600; min-height:24px; display:inline-block}
footer nav a:hover{color:var(--on-navy); text-decoration:underline}
footer .legal{font-size:13px}

/* Mobile bottom bar */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--bg); border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(23,23,23,.08); padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:14px}
.bar[hidden]{display:none}
.bar .bp{display:grid; line-height:1.15}
.bar .bp small{font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.bar .bp b{font-weight:700; font-size:22px; color:var(--ink)}
.bar .bp s{font-size:14px; color:var(--muted); margin-right:6px; font-weight:600}
.bar .btn{min-height:46px; padding:10px 18px; font-size:15px; flex:1 1 auto; max-width:260px}
@media(min-width:960px){ .bar{display:none !important} }
@media(max-width:959px){ body.has-bar{padding-bottom:84px} }

/* Academy page */
.a-hero .hero-visual .img{aspect-ratio:4/3}
@media(min-width:1000px){ .a-hero .hero-visual .img{aspect-ratio:5/4; max-height:540px} }
.flag{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.flag-card{display:grid; gap:28px; align-items:center}
@media(min-width:960px){ .flag-card{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px} }
.flag-card h2{font-size:clamp(28px,3.4vw,40px); margin:12px 0 8px}
.flag-card .sub{color:var(--body); font-size:15px; font-weight:500}
.flag-card .body{color:var(--body); margin-top:16px; text-wrap:pretty}
.flag-card .facts{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px; color:var(--ink); font-weight:500}
.flag-offer{border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; background:var(--bg); box-shadow:var(--shadow)}
.flag-offer .img{aspect-ratio:16/10; margin-bottom:18px}
.flag-offer .btn{width:100%; margin-top:14px}
.pillars{display:grid; gap:0; margin-top:36px; border-top:1px solid var(--line)}
@media(min-width:700px){ .pillars{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px} }
.pillar{padding:24px 0 26px; border-bottom:1px solid var(--line); display:grid; gap:8px; align-content:start}
.pillar h3{font-size:20px}
.pillar p{color:var(--body); font-size:15.5px}
.inst{max-width:760px}
.login .wrap{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between}