/* ═══════════════════════════════════════════════
   HarmonicaGuru — shared stylesheet  v6
   Contrast level V3. Palette family unchanged.
   ONE centring utility: .center. No bespoke variants.
   ═══════════════════════════════════════════════ */

:root{
  --navy:#000306;
  --navy-2:#030A13;
  --navy-3:#0E1724;
  --navy-btn:#17263A;
  --navy-btn-hi:#20344F;

  --saffron:#F4600C;
  --saffron-hi:#FF6B13;
  --saffron-lite:#FF7D2B;
  --saffron-lite-2:#FF8A42;
  --gold:#F5C518;
  --green:#22C55E;
  --brick:#C2410C;

  --text:#FFFFFF;
  --body:#F5F7FA;
  --muted:#B7C4D2;

  --cream:#F8E6BC;
  --cream-2:#FFFFFF;
  --ink:#14120C;
  --ink-soft:#6B6355;

  --line:rgba(255,255,255,.20);
  --line-soft:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.34);
  --line-ink:rgba(20,18,12,.20);

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:26px; --r-pill:999px;
  --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:52px; --s6:78px;
  --wrap:1060px;

  --g-hero:linear-gradient(135deg,#000306 0%,#04101C 52%,#02080F 100%);
  --g-card:linear-gradient(180deg,#16233A 0%,#0C1523 100%);
  --g-videocard:linear-gradient(180deg,#16243A 0%,#0A131F 100%);
  --g-videoframe:linear-gradient(155deg,#1D2C42 0%,#0E1824 58%,#0A121D 100%);
  --g-cream:linear-gradient(180deg,#F8E6BC 0%,#F2D9A2 100%);
  --g-cream-card:#FFFFFF;
  --g-final:linear-gradient(180deg,#050E1B 0%,#000306 100%);

  --sh-card:0 10px 32px rgba(0,0,0,.7);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--navy);color:var(--text);
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Baloo 2',cursive;line-height:1.14;letter-spacing:-.4px;
  overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul,ol{list-style:none}
p,li{color:var(--body);overflow-wrap:break-word}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.section{padding:var(--s5) 0}
@media(min-width:760px){.section{padding:var(--s6) 0}}
.bg-2{background:var(--navy-2)}

/* ══ THE ONE CENTRING UTILITY ══
   Everything that centres uses .center. Nothing else does.
   Works as a wrapper OR on the element itself. */
.center{text-align:center}
.center > .sec-lede,
.center > p,
.sec-lede.center{margin-left:auto;margin-right:auto}
.center .btn-row,
.btn-row.center{justify-content:center}

.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;padding:6px 15px;border-radius:var(--r-pill);
  background:rgba(244,96,12,.13);color:var(--saffron-lite);
  border:1px solid rgba(244,96,12,.3);margin-bottom:var(--s2);
}
.sec-title{font-size:clamp(1.6rem,4.6vw,2.35rem);font-weight:700;margin-bottom:var(--s1);color:var(--text)}
.sec-lede{color:var(--muted);font-size:1rem;max-width:56ch;margin-bottom:var(--s4)}

/* ══ Cream ══ */
.bg-cream{background:var(--g-cream);color:var(--ink)}
.bg-cream h1,.bg-cream h2,.bg-cream h3,.bg-cream .sec-title{color:var(--ink)}
.bg-cream p,.bg-cream li,.bg-cream .sec-lede{color:var(--ink-soft)}
.bg-cream .eyebrow{background:rgba(244,96,12,.13);color:#B8440A;border-color:rgba(244,96,12,.32)}

/* ══ Buttons ══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Poppins',sans-serif;font-weight:600;
  border:1.5px solid transparent;cursor:pointer;border-radius:var(--r-pill);
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
  text-align:center;line-height:1.3;
}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--saffron-lite);outline-offset:3px}
.btn-lg{padding:15px 30px;font-size:1rem}
.btn-md{padding:11px 22px;font-size:.9rem}
.btn-sm{padding:9px 16px;font-size:.79rem}
.btn-full{width:100%}
.btn-primary{background:var(--saffron);color:#fff}
.btn-primary:hover{background:var(--saffron-hi)}
.btn-secondary{background:var(--navy-btn);color:#fff;border-color:rgba(255,255,255,.12)}
.btn-secondary:hover{background:var(--navy-btn-hi)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--saffron)}
.btn-on-cream{background:var(--ink);color:#fff}
.btn-on-cream:hover{background:#2A2D36}
.btn-wa{background:#25D366;color:#062B16}
.btn-wa svg{width:17px;height:17px;fill:currentColor}
.bg-cream .btn-ghost{color:var(--ink);border-color:rgba(17,19,24,.28)}
.bg-cream .btn-ghost:hover{border-color:var(--saffron)}
.btn-wa:hover{background:#1FBF5B}
.btn.is-disabled,.btn[disabled]{opacity:.45;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:520px){.btn-row > .btn{width:100%}}

/* ══ Pills ══ */
.pill{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;padding:5px 13px;border-radius:var(--r-pill);
}
.pill-gold{background:var(--gold);color:#241A00}
.pill-orange{background:rgba(244,96,12,.14);color:var(--saffron-lite);border:1px solid rgba(244,96,12,.3)}
.pill-muted{background:#172435;color:#D5DEE7}

/* ══ Header ══ */
.site-head{
  position:sticky;top:0;z-index:80;
  background:rgba(0,3,6,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.head-in{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:var(--wrap);margin:0 auto;padding:11px 20px;
}
.brand{flex-shrink:0}
.brand img{height:40px;width:auto}
.head-nav{display:none;gap:24px;font-size:.87rem;font-weight:500}
.head-nav a{color:var(--muted);transition:color .12s}
.head-nav a:hover{color:var(--text)}
.head-in .btn{flex-shrink:0;white-space:nowrap}
@media(max-width:400px){
  .brand img{height:34px}
  .head-in{padding:10px 14px;gap:8px}
  .head-in .btn-sm{padding:8px 13px;font-size:.74rem}
}
@media(min-width:940px){
  .head-in{padding:14px 20px}
  .brand img{height:44px}
  .head-nav{display:flex}
}

/* ══ Hero ══ */
.hero{
  background:var(--g-hero);padding:var(--s5) 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
@media(min-width:880px){.hero{padding:66px 0 74px}}
.hero-grid{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:880px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:44px}}

.hero-copy h1{font-size:clamp(2rem,6vw,3.25rem);font-weight:800;margin-bottom:var(--s2);color:var(--text)}
.hero-copy h1 em{font-style:normal;color:var(--saffron)}
.hero-copy .sub{color:var(--body);font-size:clamp(.98rem,2.4vw,1.12rem);max-width:44ch;margin-bottom:var(--s3)}
.hero-need{
  margin-top:var(--s3);font-size:.84rem;color:var(--muted);
}
.hero-need a{color:var(--saffron-lite);font-weight:600;border-bottom:1px solid rgba(255,125,43,.45)}
.hero-need a:hover{color:var(--saffron)}

/* mobile: hero copy centres via .center on the wrapper */
@media(max-width:879px){
  .hero-copy{text-align:center}
  .hero-copy .sub{margin-left:auto;margin-right:auto}
  .hero-copy .btn-row{justify-content:center}
}

.hero-card{
  background:var(--g-videocard);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:var(--s3);box-shadow:var(--sh-card);
}
.hero-card-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:12px;font-size:.75rem;
}
.hero-card-kicker{color:var(--saffron-lite-2);font-weight:800;letter-spacing:1px}
.hero-card-price{color:#D8E0E8}
.hero-card-price strong{color:var(--text);font-weight:600}
.video-frame{
  aspect-ratio:16/9;background:var(--g-videoframe);
  border:1px solid var(--line-soft);border-radius:20px;
  display:grid;place-items:center;text-align:center;padding:var(--s2);
}
.video-frame .play{
  width:58px;height:58px;border-radius:50%;background:var(--saffron);
  display:grid;place-items:center;font-size:1.25rem;color:#fff;margin:0 auto 10px;
}
.video-frame p{color:var(--muted);font-size:.84rem}
.hero-card-copy{padding-top:var(--s3);text-align:center}
.hero-card-copy h2{font-size:1.28rem;margin-bottom:4px}
.hero-card-copy p{color:var(--muted);font-size:.87rem}

/* ══ Curriculum ══ */
.modules{display:flex;flex-direction:column;gap:12px}
.module{
  background:var(--g-card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s3);box-shadow:var(--sh-card);
}
.module-top{
  display:grid;grid-template-columns:46px minmax(0,1fr) auto;
  gap:14px;align-items:start;margin-bottom:var(--s2);
}
.module-num{
  width:46px;height:46px;border-radius:var(--r-sm);
  background:var(--navy-2);border:1px solid rgba(244,96,12,.5);
  display:grid;place-items:center;
  font-family:'Baloo 2',cursive;font-weight:700;font-size:1.1rem;color:var(--saffron);
}
.module-lab{font-size:.66rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.module-txt h3{font-size:1.16rem;margin-top:2px;color:var(--text)}
.module-out{color:var(--muted);font-size:.88rem;margin-top:5px}
.module-count{
  font-size:.71rem;color:var(--body);background:rgba(255,255,255,.09);
  border:1px solid var(--line-soft);
  padding:5px 12px;border-radius:var(--r-pill);white-space:nowrap;
  font-weight:500;justify-self:end;
}
@media(max-width:560px){
  .module-top{grid-template-columns:44px minmax(0,1fr)}
  .module-num{width:44px;height:44px}
  .module-count{grid-column:2;justify-self:start;margin-top:9px}
}
.module-lessons{
  display:flex;flex-wrap:wrap;gap:7px;padding-top:var(--s2);
  border-top:1px solid var(--line-soft);
  align-content:flex-start;
}
@media(min-width:760px){.module-lessons{min-height:78px}}
.module-lessons li{
  font-size:.81rem;color:var(--body);
  background:rgba(255,255,255,.09);border:1px solid var(--line-soft);
  padding:6px 13px;border-radius:var(--r-pill);
}
.module.is-lab{border-color:rgba(245,197,24,.45)}
.module.is-lab .module-num{color:var(--gold);border-color:rgba(245,197,24,.5)}
.module.is-lab .module-lab{color:var(--gold)}
.lab-note{
  margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line-soft);
  font-size:.86rem;color:var(--muted);
}
.lab-note strong{color:var(--gold)}

/* ══ Benefits ══ */
.benefits{display:grid;gap:13px;grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.benefits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.benefits{grid-template-columns:repeat(3,minmax(0,1fr))}}
.benefit{
  background:var(--g-cream-card);border:1px solid var(--line-ink);
  border-radius:var(--r-md);padding:var(--s3);text-align:left;
}
.benefit .ico{
  width:40px;height:40px;border-radius:11px;margin-bottom:12px;
  background:rgba(244,96,12,.12);display:grid;place-items:center;
}
.benefit .ico svg{width:21px;height:21px;stroke:#B8440A;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.benefit h3{font-size:1.02rem;margin-bottom:4px;color:var(--ink)}
.benefit p{color:var(--ink-soft);font-size:.86rem}

/* ══ Pricing ══ */
.prices{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.prices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.prices{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pcard{
  background:var(--g-card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s3);box-shadow:var(--sh-card);
  display:flex;flex-direction:column;gap:var(--s2);position:relative;text-align:left;
}
.pcard.featured{border-color:var(--saffron);border-width:2px}
.ribbon{position:absolute;top:-11px;left:var(--s3)}
.pcard 
.pcard .tier-sub{font-size:.78rem;color:var(--muted)}
.pcard .amt{font-family:'Baloo 2',cursive;font-size:2.05rem;font-weight:800;line-height:1;color:var(--text)}
.pcard .req{
  font-size:.68rem;color:var(--muted);letter-spacing:.3px;
  padding-bottom:var(--s2);border-bottom:1px solid var(--line-soft);
}
.pcard ul{display:flex;flex-direction:column;gap:8px;font-size:.85rem}
.pcard li{display:flex;gap:8px;align-items:flex-start;color:var(--body)}
.pcard li .tk{color:var(--green);flex-shrink:0;font-weight:700}
.pcard li.off{color:var(--muted);opacity:.75}
.pcard li.off .tk{color:var(--muted)}
.pcard .spacer{flex:1}
.pcard .fine{font-size:.71rem;color:var(--muted);line-height:1.45}
.upgrade-note{text-align:center;margin-top:var(--s3);font-size:.92rem;color:var(--muted)}
.upgrade-note strong{color:var(--saffron-lite)}

/* ══ Testimonials ══ */
.quotes{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.quotes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.quote{
  background:var(--g-card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s3);box-shadow:var(--sh-card);
  display:flex;flex-direction:column;gap:var(--s2);text-align:left;
}
.quote .stars{color:var(--gold);font-size:.95rem;letter-spacing:2px}
.quote .said{font-size:.91rem;color:var(--body);flex:1}
.quote .by{display:flex;align-items:center;gap:11px;padding-top:var(--s2);border-top:1px solid var(--line-soft)}
.quote .av{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;background:var(--saffron);
  display:grid;place-items:center;font-family:'Baloo 2',cursive;font-weight:700;color:#fff;
}
.quote .by-name{font-weight:600;font-size:.87rem;color:var(--text);line-height:1.3}
.quote .by-src{font-size:.74rem;color:var(--muted)}
.quote.is-empty{
  background:transparent;border:1.5px dashed rgba(255,255,255,.2);box-shadow:none;
  align-items:center;justify-content:center;text-align:center;
  color:var(--muted);font-size:.86rem;min-height:168px;
}

/* ══ Instructor ══ */
.tutor{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:780px){.tutor{grid-template-columns:320px minmax(0,1fr);gap:var(--s5)}}
.tutor-photo{
  aspect-ratio:1;background:var(--g-card);border:1px solid var(--line);
  border-radius:var(--r-lg);display:grid;place-items:center;box-shadow:var(--sh-card);
  color:var(--muted);font-size:.82rem;text-align:center;padding:var(--s2);
  width:100%;max-width:400px;margin:0 auto;
}
.tutor-body{text-align:center}
@media(min-width:780px){.tutor-body{text-align:left}}
.tutor-body h2{font-size:clamp(1.5rem,4.2vw,2.05rem);margin-bottom:4px;color:var(--text)}
.tutor-body .handle{color:var(--saffron-lite);font-weight:600;font-size:.94rem;margin-bottom:var(--s3)}
.tutor-body p{color:var(--muted);margin-bottom:var(--s2)}
.tutor-tags{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s3) 0;justify-content:center}
@media(min-width:780px){.tutor-tags{justify-content:flex-start}}
.tutor-tags span{
  font-size:.77rem;color:var(--muted);background:rgba(255,255,255,.07);
  border:1px solid var(--line-soft);padding:5px 12px;border-radius:var(--r-pill);
}
.tutor-body .btn-row{justify-content:center}
@media(min-width:780px){.tutor-body .btn-row{justify-content:flex-start}}

/* ══ Community ══ */
.commu{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.commu{grid-template-columns:repeat(2,minmax(0,1fr))}}
.commu-card{
  background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);
  align-items:flex-start;text-align:left;box-shadow:var(--sh-card);
}
.commu-card h3{font-size:1.08rem;color:var(--text)}
.commu-card p{color:var(--muted);font-size:.87rem;flex:1}
.commu-card .btn{width:100%}

/* ══ FAQ ══ */
.faq{display:flex;flex-direction:column;gap:10px;text-align:left}
.faq details{
  background:var(--g-card);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-card);
}
.faq summary{
  padding:16px var(--s3);cursor:pointer;font-weight:600;font-size:.95rem;
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  list-style:none;font-family:'Baloo 2',cursive;color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--saffron);font-size:1.35rem;flex-shrink:0;font-weight:700}
.faq details[open] summary::after{content:'−'}
.faq summary:focus-visible{outline:2px solid var(--saffron-lite);outline-offset:-3px}
.faq .ans{padding:0 var(--s3) 18px;color:var(--muted);font-size:.89rem}
.faq .ans strong{color:var(--saffron-lite)}

/* ══ Final ══ */
.final-band{
  background:var(--g-final);
  border-top:1px solid rgba(255,255,255,.09);
  padding:var(--s5) 0;
}
@media(min-width:760px){.final-band{padding:var(--s6) 0}}
.final{max-width:760px;margin:0 auto}
.final h2{font-size:clamp(1.9rem,5vw,2.9rem);margin:10px 0 8px;color:var(--text)}
.final h2 em{font-style:normal;color:var(--saffron)}
.final-fine{
  margin-top:var(--s3);font-size:.79rem;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:5px 14px;justify-content:center;
}

/* ══ Footer ══ */
.site-foot{border-top:1px solid var(--line-soft);font-size:.84rem;color:var(--muted)}
.foot-in{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s4) var(--s3);padding-top:var(--s5);padding-bottom:var(--s4);
  text-align:left;
}
.foot-brand{grid-column:1 / -1;text-align:center;padding-bottom:var(--s2)}
@media(min-width:720px){
  .foot-in{grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}
  .foot-brand{grid-column:auto;text-align:left;padding-bottom:0}
}
.foot-brand img{height:32px;width:auto;margin:0 auto;display:block}
@media(min-width:720px){.foot-brand img{margin-left:0}}
.foot-tag{color:var(--body);font-size:.9rem;line-height:1.2;margin:2px 0 10px}
.foot-blurb{color:var(--muted);font-size:.82rem;max-width:34ch;margin:0 auto}
@media(min-width:720px){.foot-blurb{margin-left:0}}
.foot-social{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:var(--s2)}
.foot-social a{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.8rem;transition:color .12s}
.foot-social a:hover{color:var(--saffron-lite)}
.foot-social svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
@media(min-width:720px){.foot-social{justify-content:flex-start}}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col h3{
  font-family:'Poppins',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--saffron-lite);
  margin-bottom:2px;
}
.foot-col a{color:var(--muted);transition:color .12s}
.foot-col a:hover{color:var(--text)}
.foot-bottom{
  border-top:1px solid var(--line-soft);
  padding-top:var(--s3);padding-bottom:var(--s4);text-align:center;
}
.foot-bottom p{color:var(--muted);opacity:.7;font-size:.76rem}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ═══════════════ /harmonica page ═══════════════ */
.page-hero{background:var(--g-hero);padding:var(--s5) 0;border-bottom:1px solid rgba(255,255,255,.07)}
@media(min-width:760px){.page-hero{padding:var(--s6) 0}}
.ph-grid{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:880px){.ph-grid{grid-template-columns:1.05fr .95fr;gap:44px}}
.ph-copy h1{font-size:clamp(2rem,5.6vw,3rem);font-weight:800;margin-bottom:var(--s2)}
.ph-copy h1 em{font-style:normal;color:var(--saffron)}
.ph-copy .sub{color:var(--body);font-size:clamp(1rem,2.4vw,1.1rem);max-width:44ch;margin-bottom:var(--s3)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.chips span{
  font-size:.76rem;font-weight:600;color:var(--body);
  background:rgba(255,255,255,.07);border:1px solid var(--line-soft);
  padding:6px 14px;border-radius:var(--r-pill);
}
@media(max-width:879px){
  .ph-copy{text-align:center}
  .ph-copy .sub{margin-left:auto;margin-right:auto}
  .ph-copy .btn-row,.chips{justify-content:center}
}

/* product image frame */
.pimg{
  aspect-ratio:4/3;background:var(--navy-2);border:1px solid var(--line-soft);
  border-radius:var(--r-md);display:grid;place-items:center;overflow:hidden;
  color:var(--muted);font-size:.78rem;text-align:center;padding:var(--s2);
}
.pimg img{width:100%;height:100%;object-fit:contain}

/* hero product card */
.ph-card{
  background:var(--g-videocard);border:2px solid var(--saffron);
  border-radius:var(--r-xl);padding:var(--s3);box-shadow:var(--sh-card);position:relative;
}
.ph-card .badge{position:absolute;top:-12px;left:var(--s3)}
.ph-card .pimg{aspect-ratio:16/11;margin-bottom:var(--s3)}
.ph-card h2{font-size:1.2rem;margin-bottom:3px}
.ph-card .note{color:var(--muted);font-size:.85rem;margin-bottom:var(--s2)}
.ph-card .cost{font-family:'Baloo 2',cursive;font-size:1.6rem;font-weight:800;line-height:1;margin-bottom:3px}
.ph-card .cost-note{font-size:.7rem;color:var(--muted);margin-bottom:var(--s3)}
.ph-card .btn{width:100%}

/* 10-second check */
.checks{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.checks{grid-template-columns:repeat(3,minmax(0,1fr))}}
.check{
  background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s3);box-shadow:var(--sh-card);
}
.bg-cream .check{background:var(--g-cream-card);border-color:var(--line-ink);box-shadow:none}
.bg-cream .check .n{background:#FFFDF7;border-color:rgba(244,96,12,.45);color:#C2490A}
.bg-cream .check h3{color:var(--ink)}
.bg-cream .check p{color:var(--ink-soft)}
.bg-cream .check-out{border-top-color:var(--line-ink)}
.bg-cream .check-out p{color:var(--ink)}
.check .n{
  width:34px;height:34px;border-radius:9px;margin-bottom:11px;
  background:var(--navy-2);border:1px solid rgba(244,96,12,.5);
  display:grid;place-items:center;color:var(--saffron);
  font-family:'Baloo 2',cursive;font-weight:700;font-size:.95rem;
}
.check h3{font-size:1rem;margin-bottom:4px;color:var(--text)}
.check p{color:var(--muted);font-size:.85rem}
.check-out{
  margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--line-soft);text-align:center;
}
.check-out p{color:var(--body);margin-bottom:var(--s2);font-size:.95rem}

/* tiers */
.tier{margin-top:var(--s5)}














/* avoid */
.avoid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.avoid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:940px){.avoid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.avoid-card{
  background:var(--navy-2);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:var(--s3);
}
.avoid-card .x{
  width:32px;height:32px;border-radius:50%;margin-bottom:11px;
  background:rgba(194,65,12,.14);border:1px solid rgba(194,65,12,.5);
  display:grid;place-items:center;color:#E8703A;font-size:1rem;font-weight:700;
}
.avoid-card h3{font-size:.98rem;margin-bottom:4px;color:var(--body)}
.avoid-card p{color:var(--muted);font-size:.83rem}
.bg-cream .avoid-card{background:var(--g-cream-card);border-color:var(--line-ink)}
.bg-cream .avoid-card .x{background:rgba(194,65,12,.09);border-color:rgba(194,65,12,.45);color:var(--brick)}
.bg-cream .avoid-card h3{color:var(--ink)}
.bg-cream .avoid-card p{color:var(--ink-soft)}

/* explain */
.explain{display:grid;gap:13px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.explain{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ex{
  background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3);box-shadow:var(--sh-card);
  display:flex;flex-direction:column;justify-content:center;
}
.ex h3{font-size:1.05rem;margin-bottom:5px;color:var(--text)}
.ex p{color:var(--muted);font-size:.87rem}
.holes{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;margin-top:var(--s3)}
.holes span{
  aspect-ratio:1;border-radius:7px;background:var(--navy-2);
  border:1px solid var(--line-soft);display:grid;place-items:center;
  font-size:.72rem;color:var(--muted);
}
@media(max-width:480px){.holes{gap:4px}.holes span{font-size:.58rem;border-radius:5px}}

/* whatsapp form */
.hform{
  background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4) var(--s3);max-width:480px;margin:0 auto;box-shadow:var(--sh-card);text-align:left;
}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s2)}
.field label{font-size:.79rem;font-weight:600;color:var(--muted)}
.field input,.field select{
  background:var(--navy-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;color:var(--text);font-family:'Poppins',sans-serif;font-size:.93rem;width:100%;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--saffron)}
.field input::placeholder{color:#63788F}

/* form on cream */
.bg-cream .hform{
  background:var(--g-cream-card);border:1px solid var(--line-ink);box-shadow:none;
}
.bg-cream .field label{color:var(--ink-soft)}
.bg-cream .field input,.bg-cream .field select{
  background:#FFFDF7;border:1px solid rgba(17,19,24,.18);color:var(--ink);
}
.bg-cream .field input:focus,.bg-cream .field select:focus{border-color:var(--saffron)}
.bg-cream .field input::placeholder{color:#9A9078}
.bg-cream .hform-note{color:var(--ink-soft)}
.hform .btn{margin-top:var(--s1)}
.hform-note{font-size:.77rem;color:var(--muted);text-align:center;margin-top:var(--s2)}

/* short answer */
.summary{display:grid;gap:10px}
.sumrow{
  background:var(--g-cream-card);border:1px solid var(--line-ink);
  border-radius:var(--r-lg);padding:16px 18px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center;
}
@media(min-width:640px){.sumrow{grid-template-columns:minmax(0,1fr) auto;gap:16px}}
.sumrow h3{font-size:1.02rem;color:var(--ink);margin-bottom:2px}
.sumrow p{font-size:.84rem;color:var(--ink-soft)}
.sumrow strong{
  font-family:'Baloo 2',cursive;font-size:1.08rem;font-weight:700;color:var(--ink);
  white-space:nowrap;
}
.disclosure-cream{margin-top:18px;color:var(--ink-soft);font-size:.76rem;text-align:center}
.disclosure-inline{
  margin-top:var(--s4);padding:var(--s3);border:1px dashed rgba(255,255,255,.2);
  border-radius:var(--r-md);font-size:.79rem;color:var(--muted);text-align:center;
}
.disclosure-inline strong{color:var(--body)}

/* disclosure */
.disclosure{
  border:1px dashed rgba(255,255,255,.2);border-radius:var(--r-md);
  padding:var(--s3);font-size:.81rem;color:var(--muted);max-width:720px;margin:0 auto;
}
.disclosure strong{color:var(--body)}

/* ═══════════════ thank-you / login / 404 ═══════════════ */
.slim{max-width:720px;margin:0 auto}
.mark{
  width:64px;height:64px;border-radius:18px;margin:0 auto var(--s3);
  background:var(--navy-2);border:1px solid rgba(244,96,12,.45);
  display:grid;place-items:center;font-size:1.6rem;
}
.mark.ok{border-color:rgba(34,197,94,.5);color:var(--green)}

/* steps */
.steps{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin-top:var(--s4);text-align:left}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{
  background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3);box-shadow:var(--sh-card);
}
.step .sn{
  width:32px;height:32px;border-radius:9px;margin-bottom:11px;
  background:var(--navy-2);border:1px solid rgba(244,96,12,.5);
  display:grid;place-items:center;color:var(--saffron);
  font-family:'Baloo 2',cursive;font-weight:700;font-size:.92rem;
}
.step h3{font-size:1rem;margin-bottom:4px;color:var(--text)}
.step p{color:var(--muted);font-size:.85rem}
.bg-cream .step{background:var(--g-cream-card);border-color:var(--line-ink);box-shadow:none}
.bg-cream .step .sn{background:#FFFDF7;border-color:rgba(244,96,12,.45);color:#C2490A}
.bg-cream .step h3{color:var(--ink)}
.bg-cream .step p{color:var(--ink-soft)}

/* plan summary box */
.planbox{
  background:var(--g-card);border:2px solid var(--saffron);border-radius:var(--r-lg);
  padding:var(--s3);box-shadow:var(--sh-card);text-align:left;
  max-width:460px;margin:var(--s4) auto 0;
}
.planbox .lab{font-size:.7rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--saffron-lite);margin-bottom:6px}
.planbox h3{font-size:1.25rem;color:var(--text);margin-bottom:3px}
.planbox .amt{font-family:'Baloo 2',cursive;font-size:1.5rem;font-weight:800;color:var(--text);margin-bottom:var(--s2)}
.planbox ul{display:flex;flex-direction:column;gap:8px;font-size:.87rem}
.planbox li{display:flex;gap:8px;align-items:flex-start;color:var(--body)}
.planbox li .tk{color:var(--green);flex-shrink:0;font-weight:700}

/* notice strip */
.notice{
  background:var(--navy-2);border:1px solid rgba(244,96,12,.35);
  border-radius:var(--r-md);padding:var(--s3);max-width:560px;margin:var(--s4) auto 0;
}
.notice strong{color:var(--saffron-lite)}
.notice p{color:var(--body);font-size:.9rem}

/* ── login loader ── */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--navy);
  display:none;place-items:center;text-align:center;padding:20px;
}
.loader.on{display:grid}
.loader img{height:44px;width:auto;margin:0 auto var(--s4)}
.eq{display:flex;gap:6px;justify-content:center;align-items:flex-end;height:44px;margin-bottom:var(--s3)}
.eq i{
  width:7px;border-radius:4px;background:var(--saffron);
  animation:eqb 1s ease-in-out infinite;
}
.eq i:nth-child(1){animation-delay:0s}
.eq i:nth-child(2){animation-delay:.12s}
.eq i:nth-child(3){animation-delay:.24s;background:var(--gold)}
.eq i:nth-child(4){animation-delay:.36s}
.eq i:nth-child(5){animation-delay:.48s}
@keyframes eqb{0%,100%{height:11px;opacity:.5}50%{height:44px;opacity:1}}
.loader p{color:var(--muted);font-size:.9rem}
.loader .slow{color:var(--muted);font-size:.8rem;margin-top:var(--s3);opacity:0;transition:opacity .4s}
.loader .slow.on{opacity:1}
@media(prefers-reduced-motion:reduce){
  .eq i{animation:none;height:26px}
}

/* 404 */
.err-code{
  font-family:'Baloo 2',cursive;font-size:clamp(3.4rem,14vw,6rem);font-weight:800;
  line-height:1;color:var(--saffron);margin-bottom:var(--s2);
}

/* ═══════════════ sargam requests ═══════════════ */
.svc{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.svc-card{
  background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3);box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:var(--s2);
}
.svc-card.is-main{border-color:var(--saffron);border-width:2px}
.svc-card h3{font-size:1.18rem;color:var(--text)}
.svc-card .amt{font-family:'Baloo 2',cursive;font-size:1.9rem;font-weight:800;color:var(--text);line-height:1}
.svc-card .when{font-size:.76rem;color:var(--muted)}
.svc-card ul{display:flex;flex-direction:column;gap:8px;font-size:.86rem}
.svc-card li{display:flex;gap:8px;align-items:flex-start;color:var(--body)}
.svc-card li .tk{color:var(--green);flex-shrink:0;font-weight:700}
.svc-card .spacer{flex:1}
.svc-card .btn{width:100%}

/* fulfilled list */
.fflist{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.fflist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ff{
  background:var(--g-cream-card);border:1px solid var(--line-ink);border-radius:var(--r-md);
  padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:6px 12px;align-items:center;
}
.ff-song{font-family:'Baloo 2',cursive;font-size:1rem;font-weight:700;color:var(--ink)}
.ff-who{font-size:.78rem;color:var(--ink-soft);grid-column:1}
.ff-tag{
  grid-row:1 / span 2;font-size:.72rem;font-weight:700;color:#15803D;
  background:rgba(22,140,60,.12);padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap;
}

/* sample preview */
.sample{
  background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3);box-shadow:var(--sh-card);max-width:520px;margin:0 auto;
}
.sample .paper{
  background:#FFFDF7;border:1px solid var(--line-ink);border-radius:var(--r-md);
  padding:var(--s3);color:var(--ink);font-size:.86rem;line-height:1.7;
}
.sample .paper .ttl{font-family:'Baloo 2',cursive;font-weight:700;font-size:1.02rem;margin-bottom:10px}
.sample .paper .ly{color:var(--ink-soft);font-size:.8rem}
.sample .paper .sg{font-weight:600;letter-spacing:.4px;margin-bottom:9px}
.sample .cap{font-size:.78rem;color:var(--muted);text-align:center;margin-top:var(--s2)}

/* ═══════════════ admin ═══════════════ */
.adm{max-width:820px;margin:0 auto;padding:var(--s5) 20px}
.adm h1{font-size:1.5rem;margin-bottom:6px}
.adm .lede{color:var(--muted);font-size:.88rem;margin-bottom:var(--s4)}
.adm-block{
  background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3);margin-bottom:14px;
}
.adm-block h2{font-size:1.08rem;margin-bottom:4px}
.adm-block .hint{font-size:.78rem;color:var(--muted);margin-bottom:var(--s3)}
.adm-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.adm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.adm-f{display:flex;flex-direction:column;gap:5px}
.adm-f label{font-size:.75rem;font-weight:600;color:var(--muted)}
.adm-f small{font-size:.7rem;color:var(--muted);opacity:.8}
.adm-f input,.adm-f select{
  background:var(--navy-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;color:var(--text);font-family:'Poppins',sans-serif;font-size:.9rem;width:100%;
}
.adm-f input:focus,.adm-f select:focus{outline:none;border-color:var(--saffron)}
.ff-edit{
  display:grid;gap:8px;grid-template-columns:minmax(0,1fr);
  background:var(--navy-2);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:12px;margin-bottom:9px;
}
@media(min-width:700px){.ff-edit{grid-template-columns:1.4fr 1fr 1fr 1fr auto;align-items:center}}
.ff-edit input{
  background:var(--navy);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;color:var(--text);font-family:'Poppins',sans-serif;font-size:.85rem;width:100%;
}
.ff-del{
  background:transparent;border:1px solid var(--line-strong);color:var(--muted);
  border-radius:8px;padding:8px 12px;cursor:pointer;font-family:'Poppins',sans-serif;font-size:.8rem;
}
.ff-del:hover{border-color:var(--saffron);color:var(--saffron)}
.adm-out{
  background:#04090F;border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s3);font-family:ui-monospace,Menlo,monospace;font-size:.76rem;
  color:#C6D4E2;white-space:pre-wrap;word-break:break-word;max-height:360px;overflow:auto;
}
.adm-warn{
  background:rgba(244,96,12,.1);border:1px solid rgba(244,96,12,.4);
  border-radius:var(--r-md);padding:12px 15px;font-size:.82rem;color:var(--body);margin-bottom:14px;
}
.adm-warn.ok{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.4)}
.adm-bar{display:flex;flex-wrap:wrap;gap:10px;margin:var(--s3) 0}
@media(min-width:900px){.steps.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:760px) and (max-width:899px){.steps.steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.svc-card .btn + .btn{margin-top:8px}

/* ═══════════════ legal pages ═══════════════ */
.legal{max-width:760px;margin:0 auto;padding:var(--s5) 20px var(--s6)}
.legal .updated{font-size:.8rem;color:var(--muted);margin-bottom:var(--s4)}
.legal h1{font-size:clamp(1.7rem,4.6vw,2.3rem);font-weight:800;margin-bottom:6px}
.legal h2{
  font-size:1.15rem;margin:var(--s5) 0 var(--s2);color:var(--text);
  padding-top:var(--s3);border-top:1px solid var(--line-soft);
}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:var(--s4)}
.legal p{color:var(--body);font-size:.93rem;margin-bottom:var(--s2)}
.legal ul{margin:0 0 var(--s2) 0;display:flex;flex-direction:column;gap:8px}
.legal li{
  color:var(--body);font-size:.93rem;padding-left:18px;position:relative;
}
.legal li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--saffron)}
.legal strong{color:var(--text)}
.legal a{color:var(--saffron-lite);border-bottom:1px solid rgba(255,125,43,.4)}
.legal .fill{
  background:rgba(244,96,12,.1);border:1px solid rgba(244,96,12,.4);
  border-radius:5px;padding:1px 7px;color:var(--saffron-lite);font-weight:600;
  font-size:.9em;white-space:nowrap;
}
.legal-note{
  background:var(--navy-2);border:1px solid rgba(244,96,12,.35);
  border-radius:var(--r-md);padding:var(--s3);margin-bottom:var(--s4);font-size:.86rem;color:var(--body);
}
.legal-note strong{color:var(--saffron-lite)}
.legal-nav{
  display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:var(--s5);
  padding-top:var(--s3);border-top:1px solid var(--line-soft);font-size:.85rem;
}
.legal-nav a{color:var(--muted);border:0}
.legal-nav a:hover{color:var(--text)}
.legal-nav a.on{color:var(--saffron-lite);font-weight:600}

/* ═══════════════ portal ═══════════════ */
.portal-head .head-in{gap:12px}
.portal-plan{
  font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--r-pill);
  background:rgba(244,96,12,.13);color:var(--saffron-lite);
  border:1px solid rgba(244,96,12,.3);white-space:nowrap;
}
@media(max-width:520px){.portal-plan{display:none}}

.pwrap{max-width:900px;margin:0 auto;padding:var(--s5) 20px var(--s6)}
.phello{margin-bottom:var(--s4)}
.phello h1{font-size:clamp(1.6rem,4.4vw,2.2rem);font-weight:800;margin-bottom:4px}
.phello p{color:var(--muted);font-size:.92rem}

/* continue card */
.contcard{
  background:var(--g-card);border:2px solid var(--saffron);border-radius:var(--r-lg);
  padding:var(--s3);box-shadow:var(--sh-card);margin-bottom:var(--s4);
}
.contcard .lab{font-size:.7rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--saffron-lite);margin-bottom:7px}
.contcard h2{font-size:1.25rem;margin-bottom:3px}
.contcard .sub{color:var(--muted);font-size:.86rem;margin-bottom:var(--s3)}
.contcard .btn{width:100%}
@media(min-width:560px){.contcard .btn{width:auto}}

/* progress */
.bar{height:8px;background:rgba(255,255,255,.09);border-radius:var(--r-pill);overflow:hidden}
.bar span{display:block;height:100%;background:var(--saffron);border-radius:var(--r-pill);transition:width .3s}
.bar.done span{background:var(--green)}
.prog-line{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:7px}

/* module cards in portal */
.pmods{display:flex;flex-direction:column;gap:12px}
.pmod{
  background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3);box-shadow:var(--sh-card);display:block;
  transition:border-color .12s;
}
a.pmod:hover{border-color:var(--saffron)}
.pmod-top{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center}
.pmod-n{
  width:44px;height:44px;border-radius:var(--r-sm);background:var(--navy-2);
  border:1px solid rgba(244,96,12,.5);display:grid;place-items:center;
  font-family:'Baloo 2',cursive;font-weight:700;font-size:1.05rem;color:var(--saffron);
}
.pmod-lab{font-size:.66rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.pmod h3{font-size:1.1rem;margin-top:2px;color:var(--text)}
.pmod .out{color:var(--muted);font-size:.85rem;margin-top:4px}
.pmod .meta{font-size:.74rem;color:var(--muted);white-space:nowrap;justify-self:end}
.pmod .barwrap{margin-top:var(--s2)}
.pmod.is-lab .pmod-n{color:var(--gold);border-color:rgba(245,197,24,.5)}
.pmod.is-lab .pmod-lab{color:var(--gold)}
.pmod.locked{opacity:.72;border-style:dashed}
.pmod.locked .pmod-n{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--muted)}
.pmod.locked h3{color:var(--muted)}
@media(max-width:520px){
  .pmod-top{grid-template-columns:44px minmax(0,1fr)}
  .pmod .meta{grid-column:2;justify-self:start;margin-top:6px}
}

/* lesson rows */
.plessons{display:flex;flex-direction:column;gap:9px}
.plesson{
  display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:13px;align-items:center;
  background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;box-shadow:var(--sh-card);transition:border-color .12s;
}
a.plesson:hover{border-color:var(--saffron)}
.plesson .tick{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:.82rem;font-weight:700;
  background:rgba(255,255,255,.07);border:1px solid var(--line-soft);color:var(--muted);
}
.plesson.done .tick{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.5);color:var(--green)}
.plesson.now{border-color:var(--saffron)}
.plesson.now .tick{background:var(--saffron);border-color:var(--saffron);color:#fff}
.plesson .idx{font-size:.68rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.plesson .name{font-family:'Baloo 2',cursive;font-size:1rem;font-weight:600;color:var(--text)}
.plesson .go{color:var(--muted);font-size:1.1rem}

/* lesson page */
.crumb{font-size:.78rem;color:var(--muted);margin-bottom:var(--s2)}
.crumb a{color:var(--saffron-lite)}
.lesson-title{font-size:clamp(1.5rem,4.2vw,2rem);font-weight:800;margin-bottom:var(--s3)}
.player{
  aspect-ratio:16/9;background:var(--g-videoframe);border:1px solid var(--line);
  border-radius:var(--r-lg);display:grid;place-items:center;text-align:center;
  padding:var(--s3);box-shadow:var(--sh-card);margin-bottom:var(--s3);overflow:hidden;
}
.player iframe{width:100%;height:100%;border:0;display:block}
.player .ph .play{
  width:62px;height:62px;border-radius:50%;background:var(--saffron);
  display:grid;place-items:center;font-size:1.35rem;color:#fff;margin:0 auto 12px;
}
.player .ph p{color:var(--muted);font-size:.87rem}
.player .ph code{
  display:inline-block;margin-top:8px;font-size:.74rem;color:var(--saffron-lite);
  background:rgba(244,96,12,.1);border:1px solid rgba(244,96,12,.3);
  padding:3px 9px;border-radius:6px;
}
.lesson-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s4)}
.lesson-nav{
  display:flex;gap:10px;justify-content:space-between;
  margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line-soft);
}
.lesson-nav .btn{flex:1}
@media(min-width:560px){.lesson-nav .btn{flex:0 1 auto;min-width:170px}}

/* locked wall */
.wall{
  background:linear-gradient(180deg,rgba(244,96,12,.09),transparent),var(--g-card);
  border:2px dashed rgba(244,96,12,.5);border-radius:var(--r-lg);
  padding:var(--s4) var(--s3);text-align:center;
}
.wall .lock{font-size:2rem;margin-bottom:var(--s2)}
.wall h2{font-size:clamp(1.4rem,4vw,1.9rem);margin-bottom:var(--s2)}
.wall p{color:var(--muted);font-size:.95rem;max-width:46ch;margin:0 auto var(--s2)}
.wall .count{color:var(--text);font-weight:600;margin-bottom:var(--s3)}
.wall .btn-row{justify-content:center}
.wall .after{font-size:.8rem;color:var(--muted);margin-top:var(--s3)}

/* premium strip */
.pstrip{
  background:var(--g-card);border:1px solid rgba(245,197,24,.4);border-radius:var(--r-lg);
  padding:var(--s3);margin-top:var(--s4);box-shadow:var(--sh-card);
}
.pstrip h3{font-size:1.05rem;margin-bottom:var(--s2);color:var(--gold)}
.pstrip ul{display:flex;flex-direction:column;gap:8px;font-size:.87rem}
.pstrip li{display:flex;gap:9px;color:var(--body)}
.pstrip li b{color:var(--text)}
.prog-note{font-size:.76rem;color:var(--muted);opacity:.8;margin-top:8px}

/* founding offer */
.was{
  font-size:1.05rem;font-weight:500;color:var(--muted);
  text-decoration:line-through;text-decoration-color:rgba(194,65,12,.8);
  margin-right:9px;
}
.founding-tag{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill);
  background:rgba(245,197,24,.16);color:var(--gold);
  border:1px solid rgba(245,197,24,.45);margin-bottom:var(--s2);
}
.founding-strip{
  background:rgba(245,197,24,.09);border:1px solid rgba(245,197,24,.4);
  border-radius:var(--r-md);padding:14px 18px;text-align:center;
  font-size:.88rem;color:var(--body);margin-bottom:var(--s4);
}
.founding-strip b{color:var(--gold)}

/* review card */
.revcard{
  background:var(--g-card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3);box-shadow:var(--sh-card);margin-top:var(--s4);
  display:grid;gap:var(--s2);grid-template-columns:minmax(0,1fr);
}
@media(min-width:620px){.revcard{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.revcard h3{font-size:1.08rem;color:var(--text);margin-bottom:3px}
.revcard p{color:var(--muted);font-size:.86rem}
.revcard .price{
  font-family:'Baloo 2',cursive;font-size:1.35rem;font-weight:700;color:var(--text);
}
.revcard .btn{white-space:nowrap}

/* three harmonica cards */
.hgrid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.hgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hcard{
  background:var(--g-card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s3);position:relative;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh-card);
}
.hcard.is-pick{border-color:var(--saffron);border-width:2px}
.hcard .badge{position:absolute;top:-11px;left:var(--s3)}
.hcard .pimg{
  aspect-ratio:4/3;background:var(--navy-2);border:1px solid var(--line-soft);
  border-radius:var(--r-md);display:grid;place-items:center;overflow:hidden;
  color:var(--muted);font-size:.78rem;
}
.hcard .pimg img{width:100%;height:100%;object-fit:contain}
.hcard h3{font-size:1.02rem;color:var(--text);line-height:1.3}
.hcard .cost{font-family:'Baloo 2',cursive;font-size:1.45rem;font-weight:700;color:var(--text);line-height:1}
.hcard .line{font-size:.9rem;color:var(--muted)}
.hcard .spacer{flex:1}
.hcard .btn{width:100%}
.price-note{font-size:.8rem;color:var(--muted);text-align:center;margin-top:var(--s3)}
.price-note strong{color:var(--body)}
.tutor-photo{padding:0;overflow:hidden}
.tutor-photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}
.hcard .pimg img{width:100%;height:100%;object-fit:contain;padding:6px}

/* ═══ cream card treatment — border + bottom edge + saffron stripe ═══ */
.bg-cream .benefit,
.bg-cream .quote,
.bg-cream .cream-card,
.bg-cream .check,
.bg-cream .avoid-card,
.bg-cream .step,
.bg-cream .hform,
.ff{
  background:#FFFFFF;
  border:1.5px solid rgba(20,18,12,.20);
  border-left:4px solid var(--saffron);
  box-shadow:0 3px 0 rgba(20,18,12,.13);
}
.bg-cream .avoid-card{border-left-color:var(--brick)}
.bg-cream .eyebrow{
  background:rgba(244,96,12,.16);color:#A83C08;border:1px solid rgba(244,96,12,.3);
}
.bg-cream .btn-ghost{color:var(--ink);border-color:rgba(20,18,12,.3)}
.bg-cream .sec-title{color:var(--ink)}

/* icon tiles — circular, colour matched to context */
.bg-cream .benefit .ico,
.bg-cream .check .n,
.bg-cream .step .sn{
  border-radius:50%;
  background:rgba(244,96,12,.13);
  border:1.5px solid rgba(244,96,12,.32);
  color:#A83C08;
}
.bg-cream .benefit .ico svg{stroke:#A83C08}
.bg-cream .avoid-card .x{
  border-radius:50%;
  background:rgba(194,65,12,.11);
  border:1.5px solid rgba(194,65,12,.42);
  color:var(--brick);
}
/* dark sections keep circular icons too, for consistency */
.check .n,.step .sn,.benefit .ico,.avoid-card .x{border-radius:50%}

/* ═══ fulfilled list — tag no longer stretches ═══ */
.fflist{display:grid;gap:11px;grid-template-columns:minmax(0,1fr)}
@media(min-width:680px){.fflist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ff{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 17px;border-radius:14px;
}
.ff-l{min-width:0}
.ff-song{font-family:'Baloo 2',cursive;font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.25}
.ff-who{font-size:.78rem;color:var(--ink-soft);margin-top:2px}
.ff-tag{
  font-size:.71rem;font-weight:700;padding:5px 12px;border-radius:99px;
  white-space:nowrap;flex-shrink:0;
  background:#E4F5E7;color:#177245;border:1px solid rgba(22,140,60,.3);
  grid-row:auto;
}

/* ═══ harmonica card labels ═══ */
.hcard .rank{
  font-size:.66rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--muted);
}
.hcard.is-pick .rank{color:var(--gold)}