/* ==========================================================================
   MISS J BIMBEL CENTER · Enrollment Landing Page (Mission #011.1)
   ---------------------------------------------------------------------------
   Sections 1-4 (tokens, base, buttons, nav) and the footer are copied
   verbatim from registration.css / agreement.css so this page shares the
   exact same brand — colors, fonts, radii, shadows, nav, footer — as the
   rest of the enrollment journey. Everything from section 5 onward is new,
   built for this landing page only.

   This page is the "front door" of the enrollment journey: a premium,
   trust-building landing experience. It intentionally stops at an empty
   #registration-placeholder — the real form lives on registration/index.html
   and how the two connect is a decision for a later mission.
   ========================================================================== */

/* ---------- 1 · Tokens (identical to registration.css / agreement.css) ---------- */
:root{
  --sky:#8ECDF3; --sky-soft:#EAF6FE;
  --sun:#FFC94D; --sun-soft:#FFF3D6;
  --coral:#FF8A5F; --coral-soft:#FFE4D8;
  --mint:#7FD8B4; --mint-soft:#E2F7EE;
  --cream:#FFF6E8; --white:#FFFDF9;
  --ink:#2B4066; --ink-soft:#5E7194;
  --dusk:#35548F; --night:#1E3061; --deep-night:#152347;

  --font-display:'Fredoka',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
  --r-lg:34px; --r-md:22px; --r-sm:16px;
  --shadow:0 12px 30px rgba(43,64,102,.10);
  --shadow-big:0 22px 50px rgba(43,64,102,.16);
  --wrap:1120px;
  --form-wrap:760px;
}

/* ---------- 2 · Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);color:var(--ink);background:var(--cream);
  line-height:1.6;font-size:17px;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:8px}
::selection{background:var(--sun);color:var(--ink)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,40px)}

/* ---------- 3 · Buttons (same family as the approved site) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  padding:15px 28px;min-height:52px;border-radius:999px;border:none;cursor:pointer;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
}
.btn.big{padding:18px 36px;font-size:1.15rem;min-height:60px}
.btn-sun{background:var(--sun);color:var(--ink);box-shadow:0 10px 26px rgba(255,201,77,.5)}
.btn-sun:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 34px rgba(255,201,77,.55)}
.btn-sun:active{transform:translateY(-1px) scale(.99)}

/* ---------- 4 · Simplified nav (identical to registration.css) ---------- */
.nav{
  position:sticky;top:0;z-index:100;background:rgba(255,253,249,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(43,64,102,.08);
}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:14px clamp(20px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:44px;width:auto;display:block;border-radius:12px}
.logo span{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.nav-help{font-size:.92rem;font-weight:700;color:var(--ink-soft)}
.nav-help a{color:var(--dusk);border-bottom:2px solid var(--sky-soft);transition:border-color .2s ease}
.nav-help a:hover{border-color:var(--sky)}
.logo img{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.logo:hover img{transform:scale(1.06) rotate(-2deg)}

/* ---------- 5 · Shared section scaffolding (new) ---------- */
.kicker{
  display:inline-block;font-family:var(--font-display);font-weight:800;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;background:#fff;border-radius:999px;
  padding:8px 18px;margin-bottom:18px;color:var(--ink);box-shadow:var(--shadow);
}
.kicker-light{background:rgba(255,255,255,.85);color:var(--night)}
.section-head{text-align:center;max-width:640px;margin:0 auto clamp(36px,6vw,56px)}
.section-title{font-size:clamp(1.7rem,3.6vw,2.3rem);color:var(--ink)}
.section-title-light{color:#fff}
.section-sub{font-size:1.05rem;color:var(--ink-soft);margin-top:14px}

/* Gentle scroll-reveal — sections/cards fade and rise into place the first
   time they cross into view. Purely progressive enhancement: everything
   is fully visible without JS (see enrollment.js + the no-js fallback). */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- 6 · Hero (Mission #017.1) ---------- */
/* Single centered column built around the official logo — no split-screen
   illustration competing for attention, per the brand calibration's "Hero
   Logo Integration" note. The rainbow arc is calibrated to the same six
   saturated bands as the logo and the homepage hero, so it reads as one
   brand element rather than a generic backdrop. */
.land-hero{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(56px,10vw,104px) 0 clamp(40px,6vw,56px);
  background:linear-gradient(180deg,var(--sky-soft) 0%,var(--cream) 65%);
}
.land-hero-rainbow{
  position:absolute;bottom:-6%;left:50%;translate:-50% 0;
  width:min(760px,110vw);opacity:.9;pointer-events:none;
  filter:drop-shadow(0 0 22px rgba(255,196,0,.45)) drop-shadow(0 14px 32px rgba(255,149,0,.24));
}
.land-hero-star{position:absolute;width:clamp(18px,2.6vw,26px);height:auto;pointer-events:none}
.star-1{top:10%;left:12%}
.star-2{top:20%;right:14%}
.star-3{bottom:14%;right:8%}

.land-hero-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;max-width:var(--form-wrap);margin:0 auto;
}
.land-hero-logo{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-big);
  padding:clamp(16px,3vw,24px);margin:clamp(20px,4vw,28px) 0 clamp(28px,4vw,36px);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.land-hero-logo:hover{transform:translateY(-4px) scale(1.02)}
.land-hero-logo img{width:clamp(160px,22vw,230px);height:auto;display:block}

.land-hero-inner h1{font-size:clamp(2.2rem,5.4vw,3.4rem);color:var(--ink)}
.land-hero-sub{font-size:1.15rem;color:var(--ink-soft);margin-top:18px;max-width:34rem}
.land-hero-actions{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:14px}
.land-hero-note{
  display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;
  font-size:.9rem;color:var(--ink-soft);
}
.land-hero-note .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);flex:none}

/* Twinkle motif shared with the logo's stars — small, slow, decorative.
   Mission #017.4 adds a hair of floating drift (the `translate` property,
   independent of the `transform` these already animate) so the sparkles
   read as gently adrift, not just pulsing in place. */
.art-twinkle{animation:artTwinkle 2.6s ease-in-out infinite,twinkleFloat 5s ease-in-out infinite}
.art-twinkle-slow{animation:artTwinkle 3.4s ease-in-out infinite .4s,twinkleFloat 6.2s ease-in-out infinite .5s}
@keyframes artTwinkle{
  0%,100%{opacity:.45;transform:scale(.92)}
  50%{opacity:.95;transform:scale(1.04)}
}
@keyframes twinkleFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -5px}
}
@media (prefers-reduced-motion:reduce){
  .art-twinkle,.art-twinkle-slow{animation:none}
}

/* Step preview strip under the hero — identical component to the
   registration/agreement progress indicator. */
.progress{
  display:flex;align-items:center;justify-content:center;gap:8px;
  max-width:var(--form-wrap);margin:36px auto 0;padding:0 clamp(20px,4vw,40px);
  flex-wrap:wrap;
}
.progress-step{
  display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;
  font-size:.86rem;color:var(--ink-soft);
}
.progress-step .num{
  width:26px;height:26px;border-radius:50%;background:#fff;color:var(--ink-soft);
  display:grid;place-items:center;font-size:.82rem;box-shadow:var(--shadow);flex:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s ease;
}
.progress-step.is-active{color:var(--ink)}
.progress-step.is-active .num{background:var(--sun);color:var(--ink)}
.progress-line{width:32px;height:2px;background:rgba(43,64,102,.18);border-radius:2px}

/* ---------- 7 · Program cards ---------- */
.programs-section{padding:clamp(56px,9vw,100px) 0}
.programs-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;
}
.program-card{
  background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow);
  padding:clamp(28px,4vw,32px);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;
}
.program-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-big)}
.program-card:hover .program-icon{transform:scale(1.08) rotate(-4deg)}
.program-icon{
  width:56px;height:56px;border-radius:50%;background:var(--accent-soft,var(--sky-soft));
  display:grid;place-items:center;margin-bottom:18px;transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.program-icon svg{width:28px;height:28px}
.program-icon img{width:40px;height:40px;object-fit:contain}
.program-card h3{font-size:1.2rem;color:var(--ink);margin-bottom:8px}
.program-card p{font-size:.96rem;line-height:1.6;color:var(--ink-soft)}

/* ---------- 8 · Trust / statistics (glassmorphism over a colorful band) ---------- */
.trust-section{
  padding:clamp(56px,9vw,100px) 0;
  background:linear-gradient(120deg,var(--sky) 0%,var(--mint) 100%);
}
.trust-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;
}
.trust-card{
  text-align:center;padding:clamp(28px,4vw,34px) 20px;border-radius:var(--r-md);
  background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 40px rgba(21,35,71,.14);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.trust-number{font-family:var(--font-display);font-weight:700;font-size:2.2rem;color:var(--night)}
.trust-icon{
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.65);
  display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.trust-icon svg{width:26px;height:26px}
.trust-label{font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--night)}

/* ---------- 9 · Enrollment timeline ---------- */
.timeline-section{padding:clamp(56px,9vw,100px) 0}
.timeline{
  display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:0 6px;
}
.timeline-step{
  flex:1 1 150px;max-width:190px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 6px;
}
.timeline-num{
  position:relative;z-index:1;
  width:44px;height:44px;border-radius:50%;background:var(--sun);color:var(--ink);
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;
  display:grid;place-items:center;box-shadow:0 10px 22px rgba(255,201,77,.45);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
}
.timeline-step h3{font-size:1.05rem;color:var(--ink)}
.timeline-step p{font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.timeline-arrow{
  position:relative;z-index:1;
  align-self:center;margin-top:12px;color:var(--sky);font-size:1.4rem;font-weight:700;
  flex:0 0 auto;
}

/* ---------- 10 · Final CTA ---------- */
.final-cta-section{
  padding:clamp(56px,9vw,100px) 0;text-align:center;
}
.final-cta-inner{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-big);
  padding:clamp(40px,7vw,64px) clamp(24px,6vw,60px);max-width:760px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.final-cta-inner h2{font-size:clamp(1.6rem,3.6vw,2.1rem);color:var(--ink)}
.final-cta-inner p{font-size:1.05rem;color:var(--ink-soft);max-width:34rem}
.final-cta-inner .btn{margin-top:10px}

/* ---------- 11 · Enrollment wizard shell ---------- */
/* Mission #011.2 replaces the empty Mission #011.1 placeholder with the
   real multi-step wizard (full styles in section 14+ below). This rule
   only keeps the section's scroll-anchoring behaviour identical to before,
   so the existing hero/final-cta CTA buttons still land in the same spot. */
.wizard-section{
  padding:clamp(56px,9vw,100px) 0;scroll-margin-top:88px;
}

/* ---------- 12 · Footer (identical to registration.css) ---------- */
.foot{background:var(--deep-night);padding:32px 0;margin-top:0}
.foot-inner{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.foot-inner p{color:rgba(255,255,255,.55);font-size:.82rem}
.foot-inner a{color:rgba(255,255,255,.8);font-weight:700}

/* ---------- 12a · Business identity block (Mission #040.1) ---------- */
.foot-biz{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:6px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
  width:100%;max-width:420px;
  color:rgba(255,255,255,.7);font-size:.86rem;text-align:center;
}
/* Qualified with the .foot-biz parent so these reliably beat this file's
   own pre-existing generic ".foot-inner p"/".foot-inner a" rules just
   above, which otherwise win on specificity over a single-class selector
   and silently override this block's color/weight. */
.foot-biz .foot-biz-name{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:#fff;margin-bottom:2px}
.foot-biz .foot-biz-address{font-style:normal;display:flex;flex-direction:column;gap:1px;color:rgba(255,255,255,.62)}
.foot-biz .foot-biz-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 18px;margin-top:14px}
.foot-biz .foot-biz-email{
  display:inline-flex;align-items:center;gap:7px;
  color:rgba(255,255,255,.85);font-weight:700;transition:color .2s;
}
.foot-biz .foot-biz-email:hover{color:var(--sun)}
.foot-biz .foot-biz-directions{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--sun);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:.86rem;
  padding:11px 22px;border-radius:999px;transition:transform .25s,box-shadow .25s;
  box-shadow:0 10px 24px rgba(255,201,77,.35);
}
.foot-biz .foot-biz-directions:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(255,201,77,.45)}
@media (max-width:640px){
  .foot-biz-actions{flex-direction:column;gap:12px}
}

/* ---------- 13 · Responsive ---------- */
@media (max-width:640px){
  .nav-help{display:none}
  .land-hero-star{display:none}
  .timeline{flex-direction:column;align-items:center;gap:18px}
  .timeline-step{max-width:280px}
  .timeline-arrow{transform:rotate(90deg);margin:0}
  .trust-number{font-size:1.9rem}
  .timeline::before{display:none}
}

/* ==========================================================================
   ENROLLMENT WIZARD (Mission #011.2)
   ---------------------------------------------------------------------------
   Everything below is new. Sections 14 ports the form components already
   established on registration.css/agreement.css (same class names, same
   look) so the wizard speaks the site's existing visual language instead
   of inventing one. Sections 15+ are wizard-specific (progress bar, option
   cards, review grid, signature placeholder, submit panel).
   ========================================================================== */

/* ---------- 14 · Shared form components (ported verbatim) ---------- */
.reg-card{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-big);
  padding:clamp(28px,5vw,44px);
}
.reg-card-head{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.reg-icon{
  width:54px;height:54px;border-radius:50%;background:var(--sky-soft);
  display:grid;place-items:center;flex:none;
}
.reg-icon svg{width:26px;height:26px}
.reg-card-head h2{font-size:1.4rem;color:var(--ink)}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
.field label{font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--ink)}
.wizard-optional-tag{font-weight:400;color:var(--ink-soft);font-size:.85rem}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea{
  width:100%;border-radius:var(--r-sm);border:2px solid var(--sky-soft);
  padding:14px 16px;font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--cream);transition:border-color .2s,box-shadow .2s;
  min-height:52px;
}
.field textarea{min-height:96px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-soft);opacity:.7}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--sky);box-shadow:0 0 0 4px var(--sky-soft);
}
/* Gentle, non-alarming invalid state — same coral pattern used sitewide. */
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--coral);box-shadow:0 0 0 4px var(--coral-soft);
}
.field.has-error .pill-group,.field.has-error .option-cards{
  box-shadow:0 0 0 4px var(--coral-soft);border-radius:var(--r-sm);
}
.field-error{font-size:.84rem;font-weight:700;color:#D9622F;display:none}
.field.has-error .field-error{display:block}

.pill-group{display:flex;flex-wrap:wrap;gap:10px}
.pill-option{position:relative}
.pill-option input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pill-option span{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:12px 22px;border-radius:999px;
  background:var(--cream);border:2px solid var(--sky-soft);
  font-family:var(--font-display);font-weight:700;font-size:.96rem;color:var(--ink-soft);
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.pill-option:hover span{border-color:var(--sky)}
.pill-option input:focus-visible + span{outline:3px solid var(--sun);outline-offset:2px}
.pill-option:has(input:checked) span,
.pill-option span.is-selected{
  background:var(--sky);border-color:var(--sky);color:#fff;transform:translateY(-2px);
}

.info-list{display:flex;flex-direction:column;gap:18px}
.info-row{display:flex;align-items:flex-start;gap:14px}
.info-icon{width:36px;height:36px;border-radius:50%;background:var(--mint-soft);display:grid;place-items:center;flex:none}
.info-icon svg{width:18px;height:18px}
.info-row p{font-size:.98rem;line-height:1.6;color:var(--ink);padding-top:6px}

/* ---------- 15 · Wizard intro + progress ---------- */
.wizard-intro{text-align:center;max-width:640px;margin:0 auto clamp(32px,5vw,44px)}

.wizard-progress-wrap{max-width:var(--form-wrap);margin:0 auto clamp(32px,5vw,44px)}
.wizard-progress-bar{height:6px;border-radius:999px;background:rgba(43,64,102,.1);overflow:hidden;margin-bottom:22px}
.wizard-progress-fill{
  display:block;height:100%;width:14.2857%;background:var(--sun);border-radius:999px;
  transition:width .5s cubic-bezier(.34,1.56,.64,1);
}
.wizard-progress-scroll{overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;padding-bottom:4px}
.wizard-progress-scroll::-webkit-scrollbar{display:none}
.wizard-progress{justify-content:flex-start}
.wizard-progress .progress-step{
  background:none;border:none;font:inherit;cursor:pointer;padding:4px;border-radius:12px;white-space:nowrap;
}
.wizard-progress .progress-step:disabled{cursor:not-allowed;opacity:.5}
.wizard-progress .progress-step:not(:disabled):hover .num{border:2px solid var(--sky);transform:scale(1.08)}
.wizard-progress .progress-step.is-done{color:var(--ink)}
.wizard-progress .progress-step.is-done .num{background:var(--mint);color:#fff}

/* ---------- 16 · Wizard card + step panels ---------- */
.wizard-card{max-width:var(--form-wrap);margin:0 auto}

.wizard-panel{display:none}
.wizard-panel.is-active{display:block;animation:wizardIn .5s ease}
@keyframes wizardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .wizard-panel.is-active{animation:none}
}

.wizard-step-tag{
  display:block;font-family:var(--font-display);font-weight:700;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px;
}
.wizard-panel-note{font-size:.98rem;color:var(--ink-soft);margin:6px 0 26px}

.wizard-subsection{margin-top:32px}
.wizard-subsection:first-child{margin-top:0}
.wizard-subsection-title{font-size:1.15rem;color:var(--ink);margin-bottom:6px}
.wizard-subsection-note{font-size:.92rem;color:var(--ink-soft);margin-bottom:18px}

.wizard-actions{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:36px;
}

/* ---------- 17 · Option cards (program selection) ---------- */
.option-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:18px}
.option-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  background:var(--cream);border:2px solid var(--sky-soft);border-radius:var(--r-md);
  padding:22px 14px;cursor:pointer;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .2s,background .2s;
}
.option-card input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.option-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.option-card:focus-within{outline:3px solid var(--sun);outline-offset:4px}
.option-card-icon{
  width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;
  box-shadow:var(--shadow);
}
.option-card-icon svg{width:24px;height:24px}
.option-card-icon img{width:32px;height:32px;object-fit:contain}
.option-card-body h4{font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--ink)}
.option-card-body p{font-size:.82rem;color:var(--ink-soft);line-height:1.4;margin-top:4px}
.option-card.is-selected{background:var(--sky-soft);border-color:var(--sky)}
.option-card.is-selected .option-card-icon{box-shadow:0 8px 18px rgba(142,205,243,.5)}
.option-card-check{
  position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;
  background:#fff;border:2px solid var(--sky-soft);display:grid;place-items:center;
  transition:background .2s,border-color .2s;
}
.option-card-check svg{width:12px;height:12px;opacity:0;transition:opacity .2s}
.option-card.is-selected .option-card-check{background:var(--mint);border-color:var(--mint)}
.option-card.is-selected .option-card-check svg{opacity:1}

#privateLevelField{margin-top:20px}

/* ---------- 18 · Review step ---------- */
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.review-card{background:var(--cream);border-radius:var(--r-md);padding:22px 24px}
.review-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.review-card-head h3{font-size:1.05rem;color:var(--ink)}
.review-edit{
  font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--dusk);
  background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:8px;
  border-bottom:2px solid var(--sky-soft);
  transition:border-color .2s ease,transform .2s ease;
}
.review-edit:hover{border-color:var(--sky);transform:translateY(-1px)}
.review-list{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:.92rem}
.review-list dt{color:var(--ink-soft);font-weight:700}
.review-list dd{color:var(--ink)}

/* ---------- 19 · Digital signature (Step 6, Mission #011.4) ---------- */
/* The pad itself carries the "white writing surface / rounded / soft
   shadow" look the brief asks for; .signature-card is just a plain layout
   wrapper so the pad still reads as part of the same .reg-card, not a
   card nested inside a card. */
.signature-card{display:flex;flex-direction:column}

.signature-pad-wrap{
  position:relative;border-radius:var(--r-md);background:#fff;
  border:2px solid var(--sky-soft);box-shadow:var(--shadow);
  transition:box-shadow .2s,border-color .2s;
}
.signature-canvas{
  display:block;width:100%;height:clamp(220px,34vw,320px);
  border-radius:var(--r-md);touch-action:none;cursor:crosshair;
}
.signature-pad-wrap.has-error{border-color:var(--coral);box-shadow:0 0 0 4px var(--coral-soft)}

.signature-canvas-placeholder{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  color:var(--ink-soft);opacity:.55;pointer-events:none;text-align:center;padding:0 24px;
  transition:opacity .2s;
}
.signature-canvas-placeholder svg{width:28px;height:28px;opacity:.75}
.signature-canvas-placeholder.is-hidden{opacity:0}

.signature-controls{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px}
.signature-controls .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.signature-status{
  display:flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--ink-soft);
}
.signature-status .dot{width:9px;height:9px;border-radius:50%;background:var(--ink-soft);flex:none;transition:background .2s}
.signature-status.is-ready{color:var(--ink)}
.signature-status.is-ready .dot{background:var(--mint)}

.signature-error{margin-top:12px;font-size:.84rem;font-weight:700;color:#D9622F;display:none}
.signature-error.is-visible{display:block}

@media (max-width:640px){
  .signature-controls{justify-content:stretch}
  .signature-controls .btn{flex:1}
}

/* ---------- 20 · Submit step ---------- */
.wizard-submit-panel{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.wizard-submit-panel .info-list{text-align:left;align-self:stretch;max-width:28rem;margin:0 auto}
.wizard-submit-panel > p{color:var(--ink-soft);max-width:28rem}
.wizard-submit-note{
  display:none;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;
  font-size:.92rem;color:var(--ink);
}
.wizard-submit-note.is-visible{display:flex}
.wizard-submit-note .dot{width:9px;height:9px;border-radius:50%;background:var(--mint);flex:none}

/* ---------- 21 · Wizard responsive ---------- */
@media (max-width:640px){
  .field-grid{grid-template-columns:1fr}
  .wizard-actions{flex-direction:column-reverse}
  .wizard-actions .btn{width:100%}
  .option-cards{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
  .review-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   ENROLLMENT EXPERIENCE ENHANCEMENTS (Mission #011.3)
   ---------------------------------------------------------------------------
   Pure UX polish on top of the Mission #011.2 wizard — no HTML structure,
   IDs, validation, or existing classes were removed, only extended.
   ========================================================================== */

/* ---------- 22 · Progress status + encouragement ---------- */
.wizard-progress-status{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;
}
.wizard-progress-label{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--ink)}
.wizard-progress-percent{font-family:var(--font-display);font-weight:800;font-size:.9rem;color:var(--dusk)}
.wizard-progress-encourage{
  display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.92rem;color:var(--ink-soft);
}
.wizard-progress-encourage .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);flex:none}

/* Gentle pop the first time a step is marked done — reinforces progress
   without being distracting (plays once per step, not on every re-render). */
@keyframes stepDonePop{0%{transform:scale(1)}50%{transform:scale(1.22)}100%{transform:scale(1)}}
.wizard-progress .progress-step.is-done .num{animation:stepDonePop .4s ease}

/* ---------- 23 · Program card hierarchy + hover polish ---------- */
.option-card-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.option-card:hover .option-card-icon{transform:scale(1.1) rotate(-4deg);box-shadow:0 10px 20px rgba(43,64,102,.18)}
.option-card-body h4{font-size:1.02rem}

.wizard-badge-optional{
  display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.68rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--dusk);background:var(--sky-soft);
  border-radius:999px;padding:3px 10px;margin-left:8px;vertical-align:middle;
}

/* ---------- 24 · Private level — elegant slide reveal ---------- */
/* Replaces the old [hidden]-attribute toggle with an animated max-height
   reveal, so choosing "Private" feels like a considered response instead
   of an abrupt DOM swap. */
.wizard-reveal{
  max-height:0;opacity:0;overflow:hidden;pointer-events:none;margin-top:0;
  transition:max-height .45s cubic-bezier(.34,1.1,.64,1),opacity .35s ease,margin-top .45s ease;
}
.wizard-reveal.is-open{max-height:220px;opacity:1;margin-top:20px;pointer-events:auto}

/* ---------- 25 · Review cards — premium summary treatment ---------- */
.review-card-head{gap:12px}
.review-icon{
  width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:var(--shadow);
  display:grid;place-items:center;flex:none;
}
.review-icon svg{width:18px;height:18px}
.review-card-head h3{flex:1}

.review-list{display:flex;flex-direction:column;gap:0;font-size:.92rem}
.review-list dt{
  font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:14px;
}
.review-list dt:first-child{margin-top:0}
.review-list dd{color:var(--ink);font-weight:600;margin-top:3px;padding-bottom:12px;border-bottom:1px solid rgba(43,64,102,.08)}
.review-list dt:last-of-type + dd{border-bottom:none;padding-bottom:0}

.review-tags{display:flex;flex-wrap:wrap;gap:6px}
.review-tag{
  display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.8rem;
  background:var(--sky-soft);color:var(--dusk);border-radius:999px;padding:4px 12px;
}
.review-empty{color:var(--ink-soft);font-weight:400}

/* Cards gently stagger into place each time Step 5 is opened. */
@keyframes reviewCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.wizard-panel[data-step="5"].is-active .review-card{animation:reviewCardIn .5s ease both}
.wizard-panel[data-step="5"].is-active .review-card:nth-child(1){animation-delay:.03s}
.wizard-panel[data-step="5"].is-active .review-card:nth-child(2){animation-delay:.08s}
.wizard-panel[data-step="5"].is-active .review-card:nth-child(3){animation-delay:.13s}
.wizard-panel[data-step="5"].is-active .review-card:nth-child(4){animation-delay:.18s}
.wizard-panel[data-step="5"].is-active .review-card:nth-child(5){animation-delay:.23s}

/* ---------- 26 · Direction-aware step transitions ---------- */
@keyframes wizardInForward{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@keyframes wizardInBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
.wizard-panel.is-active{animation-name:wizardInForward}
.wizard-panel.is-active.slide-back{animation-name:wizardInBack}

/* ---------- 27 · Button micro-interaction ---------- */
@keyframes btnPulse{0%{box-shadow:0 0 0 0 rgba(255,201,77,.55)}100%{box-shadow:0 0 0 16px rgba(255,201,77,0)}}
.btn.is-pulsing{animation:btnPulse .55s ease-out}

/* ---------- 28 · Step-completion toast ---------- */
.wizard-toast{
  position:fixed;left:50%;bottom:28px;z-index:200;
  display:flex;align-items:center;gap:10px;
  background:var(--night);color:#fff;border-radius:999px;
  padding:14px 22px;box-shadow:var(--shadow-big);
  font-family:var(--font-display);font-weight:700;font-size:.92rem;
  transform:translate(-50%,140%);opacity:0;
  transition:transform .4s cubic-bezier(.34,1.1,.64,1),opacity .3s ease;
  pointer-events:none;
}
.wizard-toast.is-visible{transform:translate(-50%,0);opacity:1}
.wizard-toast-icon{
  width:20px;height:20px;border-radius:50%;background:var(--mint);
  display:grid;place-items:center;flex:none;
}
.wizard-toast-icon svg{width:11px;height:11px}

/* ---------- 29 · Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .wizard-progress .progress-step.is-done .num{animation:none}
  .wizard-panel.is-active,.wizard-panel.is-active.slide-back{animation:none}
  .btn.is-pulsing{animation:none}
  .wizard-panel[data-step="5"].is-active .review-card{animation:none}
  .wizard-reveal{transition:none}
  .wizard-toast{transition:none}
}

/* ---------- 30 · Mission #011.3 responsive ---------- */
@media (max-width:640px){
  .wizard-progress-status{font-size:.85rem}
  .wizard-toast{bottom:16px;padding:12px 18px;font-size:.86rem;max-width:calc(100% - 32px);text-align:center}
}

/* ==========================================================================
   ENROLLMENT SUCCESS SCREEN (Mission #011.6)
   ---------------------------------------------------------------------------
   Reuses .reg-card / .info-list / .btn / .kicker / .wizard-subsection-title
   verbatim — the only new classes below are for pieces that don't already
   exist anywhere on the page (the icon, the registration-number card).
   ========================================================================== */

/* ---------- 31 · Success card ---------- */
.success-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}

.success-icon-wrap{width:88px;height:88px;animation:successPop .6s cubic-bezier(.34,1.56,.64,1)}
.success-icon-wrap svg{width:100%;height:100%}
@keyframes successPop{
  0%{transform:scale(.5);opacity:0}
  60%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1)}
}

.success-heading h2{font-size:clamp(1.6rem,3.6vw,2.1rem);color:var(--ink);margin-top:4px}
.success-sub{font-size:1.05rem;color:var(--ink-soft);max-width:32rem;margin:12px auto 0}

.success-number-card{
  background:var(--cream);border-radius:var(--r-md);padding:24px 32px;
  display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:26rem;
}
.success-number-label{
  font-family:var(--font-display);font-weight:700;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);
}
.success-number{
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--dusk);
  letter-spacing:.02em;word-break:break-all;
}
.success-timestamp{font-size:.86rem;color:var(--ink-soft)}

.success-next-steps{width:100%;text-align:left}
.success-next-steps .wizard-subsection-title{text-align:center}
.success-next-steps .info-list{margin-top:18px}

.success-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;width:100%}
.success-download-note{font-size:.86rem;color:var(--ink-soft);min-height:1.2em}

@media (max-width:640px){
  .success-actions{flex-direction:column}
  .success-actions .btn{width:100%}
}

/* ---------- 32 · Print Receipt ---------- */
/* Isolates the success card so "Cetak Struk" prints a clean receipt
   instead of the whole marketing page around it. */
@media print{
  body *{visibility:hidden}
  #enrollmentSuccessCard,#enrollmentSuccessCard *{visibility:visible}
  #enrollmentSuccessCard{
    position:absolute;top:0;left:0;width:100%;box-shadow:none;border:none;padding:0;
  }
  .success-actions,.success-download-note{display:none}
}

/* ==========================================================================
   EMOTIONAL STORYTELLING ATMOSPHERE (Mission #017.2)
   ---------------------------------------------------------------------------
   Nothing structural, nothing JS, nothing already-approved moves or changes
   size, color, or position. This pass only layers quiet storybook atmosphere
   — drifting clouds, twinkling stardust, a warmer rainbow glow, and soft
   fades at the color-block seams — entirely via pseudo-elements and
   animation, on top of the approved Mission #017.1 hero and site sections.
   ========================================================================== */

/* ---------- 33 · Hero: clouds, stardust, warmer rainbow glow ---------- */
.land-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(130px 54px at 15% 20%,rgba(255,255,255,.65),transparent 72%),
    radial-gradient(100px 44px at 85% 14%,rgba(255,255,255,.55),transparent 72%),
    radial-gradient(380px 220px at 50% 96%,rgba(255,196,0,.28),transparent 70%);
  animation:heroAtmosphereDrift 10s ease-in-out infinite;
}
.land-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.8;
  background:
    radial-gradient(1.8px 1.8px at 20% 32%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 68% 24%,#fff,transparent),
    radial-gradient(2px 2px at 82% 42%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 34% 48%,#fff,transparent);
  animation:artTwinkle 4.5s ease-in-out infinite .6s;
}
@keyframes heroAtmosphereDrift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.land-hero-rainbow{animation:rainbowGlow 6s ease-in-out infinite}
@keyframes rainbowGlow{
  0%,100%{filter:drop-shadow(0 0 22px rgba(255,196,0,.45)) drop-shadow(0 14px 32px rgba(255,149,0,.24))}
  50%{filter:drop-shadow(0 0 30px rgba(255,196,0,.6)) drop-shadow(0 14px 32px rgba(255,149,0,.3))}
}
@media (prefers-reduced-motion:reduce){
  .land-hero::before,.land-hero::after,.land-hero-rainbow{animation:none}
}

/* ---------- 34 · Trust section: soft cream seams + drifting clouds ---------- */
/* The vivid sky→mint band now eases in and out of the cream sections around
   it instead of starting/ending on a hard edge, with a couple of pale cloud
   puffs riding along the seam for continuity with the hero's sky. */
.trust-section{position:relative;overflow:hidden}
.trust-section > .wrap{position:relative;z-index:2}
.trust-section::before,
.trust-section::after{
  content:"";position:absolute;left:0;right:0;height:clamp(48px,8vw,90px);z-index:1;pointer-events:none;
}
.trust-section::before{
  top:0;
  background:
    radial-gradient(90px 30px at 20% 45%,rgba(255,255,255,.5),transparent 72%),
    radial-gradient(120px 36px at 78% 60%,rgba(255,255,255,.4),transparent 72%),
    linear-gradient(to bottom,var(--cream),transparent);
}
.trust-section::after{
  bottom:0;
  background:
    radial-gradient(100px 32px at 32% 55%,rgba(255,255,255,.4),transparent 72%),
    linear-gradient(to top,var(--cream),transparent);
}

/* ---------- 35 · Final CTA: warm spotlight before the wizard begins ---------- */
/* A quiet echo of the hero's glow right before parents step into the form —
   the card itself is untouched, only the space behind it feels warmer. */
.final-cta-section{position:relative}
.final-cta-section::before{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:0;pointer-events:none;
  width:min(640px,92%);height:80%;
  background:radial-gradient(ellipse at center,rgba(255,196,0,.16),transparent 72%);
}
.final-cta-inner{position:relative;z-index:1}

/* ---------- 36 · Footer: the journey settles into a starry night ---------- */
/* The day that began under the hero's sunrise rainbow closes here under a
   quiet night sky — same dark footer, just a few soft stars in it. */
.foot{position:relative;overflow:hidden}
.foot::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(1.6px 1.6px at 12% 30%,#fff,transparent),
    radial-gradient(2px 2px at 30% 65%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 55% 22%,#fff,transparent),
    radial-gradient(2px 2px at 75% 58%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 90% 38%,#fff,transparent);
  animation:artTwinkle 5s ease-in-out infinite;
}
.foot-inner{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .foot::before{animation:none}
}

/* ==========================================================================
   VISUAL STORY CONTINUITY (Mission #017.3)
   ---------------------------------------------------------------------------
   No section is redesigned and nothing moves — this only repeats the same
   quiet motif family (the rainbow thread, soft clouds, a twinkling star)
   at two more narrative beats: where the journey begins right after the
   hero, and where the timeline visually connects every step, the way the
   brand's "Rainbow Road" is meant to. Everything is a pseudo-element:
   no layout width/height is consumed, so whitespace is unchanged.
   ========================================================================== */

/* ---------- 37 · Programs section: the journey continues from the hero ---------- */
.programs-section{position:relative;overflow:hidden}
.programs-section::before{
  content:"";position:absolute;top:0;left:50%;translate:-50% 0;z-index:1;pointer-events:none;
  width:min(180px,40%);height:4px;border-radius:999px;opacity:.32;
  background:linear-gradient(90deg,#FF4D4D,#FF9500,#FFC400,#00B67A,#2E8FE8,#7B4FD8);
}
.programs-section::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90px 40px at 94% 6%,rgba(142,205,243,.16),transparent 72%),
    radial-gradient(70px 30px at 4% 92%,rgba(127,216,180,.16),transparent 72%);
}
.programs-section > .wrap{position:relative;z-index:1}

/* ---------- 38 · Timeline: a soft rainbow road beneath every step ---------- */
.timeline-section{position:relative}
.timeline-section::before{
  content:"";position:absolute;top:0;left:50%;translate:-50% 0;pointer-events:none;
  width:min(180px,40%);height:4px;border-radius:999px;opacity:.32;
  background:linear-gradient(90deg,#7B4FD8,#2E8FE8,#00B67A,#FFC400,#FF9500,#FF4D4D);
}
.timeline{position:relative}
.timeline::before{
  content:"";position:absolute;left:6%;right:6%;top:22px;height:3px;z-index:0;pointer-events:none;
  border-radius:999px;opacity:.3;
  background:linear-gradient(90deg,#FF4D4D,#FF9500,#FFC400,#00B67A,#2E8FE8,#7B4FD8);
}

/* ---------- 39 · A quiet twinkle where the story pauses to look back ---------- */
/* Same star motif as the hero and footer, once more, very small — just
   enough for the whole page to read as one hand's work top to bottom. */
.trust-section .section-head{position:relative}
.trust-section .section-head::after{
  content:"";position:absolute;top:-6px;right:-4px;width:14px;height:14px;pointer-events:none;
  background:#fff;opacity:.7;
  clip-path:polygon(50% 0%,61% 39%,100% 39%,69% 61%,80% 100%,50% 76%,20% 100%,31% 61%,0% 39%,39% 39%);
  animation:artTwinkle 3.4s ease-in-out infinite .3s;
}
@media (prefers-reduced-motion:reduce){
  .trust-section .section-head::after{animation:none}
}

/* ==========================================================================
   MICRO-INTERACTION POLISH (Mission #017.4)
   ---------------------------------------------------------------------------
   No section is redesigned, nothing moves position, nothing changes color
   or copy. This pass only adds hover/active feedback and eases transitions
   that were previously abrupt or missing — mostly on components that had
   no interaction state at all (trust cards, review cards, the nav logo,
   timeline icons). Everything reuses the site's existing signature easing
   curve (cubic-bezier(.34,1.56,.64,1)) so it reads as the same hand, not a
   new interaction language.
   ========================================================================== */

/* ---------- 40 · Buttons: a universal, gentle hover/press ---------- */
/* .btn-sun already has its own stronger hover/active further up the file
   (higher specificity, so it still wins there unchanged) — this just gives
   every other button built on .btn (Undo, Clear, Kembali, Unduh/Cetak
   Struk) the same elegant lift and press it was missing. */
.btn:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(43,64,102,.16)}
.btn:not(:disabled):active{transform:translateY(-1px) scale(.985)}
@media (prefers-reduced-motion:reduce){
  .btn:not(:disabled):hover,.btn:not(:disabled):active{transform:none}
}

/* ---------- 41 · Trust cards: the glass cards gain a soft lift ---------- */
.trust-card{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,background .3s ease;
}
.trust-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 46px rgba(21,35,71,.2);
  background:rgba(255,255,255,.5);
}
.trust-card:hover .trust-icon{transform:scale(1.08)}

/* ---------- 42 · Review cards: same quiet lift as the rest of the site ---------- */
.review-card{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.review-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

/* ---------- 43 · Timeline: the step icon reacts, echoing the program cards ---------- */
.timeline-step:hover .timeline-num{
  transform:scale(1.1) rotate(-4deg);
  box-shadow:0 14px 26px rgba(255,201,77,.55);
}

/* ---------- 44 · Reduced motion for the hover transforms above ---------- */
@media (prefers-reduced-motion:reduce){
  .trust-card:hover,.trust-card:hover .trust-icon,
  .review-card:hover,
  .timeline-step:hover .timeline-num,
  .logo:hover img,
  .review-edit:hover,
  .wizard-progress .progress-step:not(:disabled):hover .num{
    transform:none;
  }
}

/* ==========================================================================
   DYNAMIC TUITION PACKAGE SELECTOR — styling
   ---------------------------------------------------------------------------
   enrollment.js's tuitionPackageCardHtml()/syncTuitionPackagePanel() emit
   .course-price-panel/.course-option markup, but no CSS for that class
   family existed in this file — every real package card rendered
   completely unstyled (bare radio, no visible name/price). Ported from the
   already-designed, already-tested Course Catalog + Tuition Package
   styling; no JS or HTML changed, only these class rules added.
   ========================================================================== */

.course-price-lists{display:flex;flex-direction:column;gap:18px}
.course-price-lists:not(:empty){margin-top:26px}

.course-price-panel{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,var(--cream) 140%);
  border:1px solid rgba(43,64,102,.08);border-radius:var(--r-md);
  padding:26px 28px;box-shadow:var(--shadow);
  animation:coursePanelIn .45s cubic-bezier(.22,1,.36,1);
}
.course-price-panel::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--sky),var(--mint));
}
@keyframes coursePanelIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.course-price-panel{animation:none}}

.course-price-panel.has-error{border-color:var(--coral);box-shadow:0 0 0 4px var(--coral-soft)}
.course-price-panel.has-error::before{background:var(--coral)}

.course-price-panel-title{
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:5px;
}
.course-price-panel-note{font-size:.87rem;color:var(--ink-soft);line-height:1.5;margin-bottom:20px}

.course-option-list{display:flex;flex-direction:column;gap:12px}
.course-option{
  position:relative;display:flex;align-items:center;gap:16px;
  background:#fff;border:2px solid rgba(43,64,102,.08);border-radius:var(--r-sm);
  padding:16px 18px;cursor:pointer;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.course-option:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--sky)}
.course-option input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.course-option:focus-within{outline:3px solid var(--sun);outline-offset:3px}

.course-option-check{
  width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid rgba(43,64,102,.16);
  display:grid;place-items:center;flex:none;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.course-option-check svg{width:13px;height:13px;opacity:0;transition:opacity .2s ease}
.course-option.is-selected{
  background:var(--sky-soft);border-color:var(--sky);
  box-shadow:0 10px 24px rgba(142,205,243,.4);
}
.course-option.is-selected .course-option-check{background:var(--mint);border-color:var(--mint);transform:scale(1.06)}
.course-option.is-selected .course-option-check svg{opacity:1}

.course-option-body{
  display:flex;flex:1;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;min-width:0;
}
.course-option-name{font-family:var(--font-display);font-weight:600;font-size:.98rem;color:var(--ink)}
.course-option-price{text-align:right;white-space:nowrap;flex:none}
.course-option-fee{
  font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--dusk);letter-spacing:-.01em;
}
.course-option-reg{
  display:inline-block;font-size:.74rem;font-weight:700;color:var(--ink-soft);
  margin-top:6px;padding:3px 11px;border-radius:999px;background:var(--sun-soft);
}

@media (max-width:640px){
  .course-price-panel{padding:22px 18px}
  .course-option{flex-wrap:wrap;padding:14px 16px}
  .course-option-body{flex-direction:column;align-items:flex-start;gap:8px}
  .course-option-price{text-align:left}
}

/* ---------- #tuitionPackageLists — distinct dusk/sky accent so real
   tuition packages read as visually distinct from any future optional
   add-on subjects, even though both share the same base classes. ---------- */
#tuitionPackageLists .course-price-panel{
  background:linear-gradient(180deg,#fff 0%,var(--sky-soft) 170%);
  border-color:rgba(53,84,143,.18);
}
#tuitionPackageLists .course-price-panel::before{
  background:linear-gradient(90deg,var(--dusk),var(--sky));
}
#tuitionPackageLists .course-price-panel-title{
  color:var(--dusk);
}

#tuitionPackageLists .course-option-list{gap:16px}
#tuitionPackageLists .course-option{
  position:relative;
  padding:20px 22px;
}
#tuitionPackageLists .course-option:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-big);
  border-color:var(--dusk);
}

#tuitionPackageLists .course-option-name{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:1.04rem;
}
#tuitionPackageLists .course-option-name small{
  display:inline-flex;align-items:center;
  font-family:var(--font-body);font-size:.72rem;font-weight:700;
  color:var(--dusk);background:var(--sky-soft);
  border-radius:999px;padding:3px 10px;
}

#tuitionPackageLists .course-option-fee{
  font-size:1.4rem;
  color:var(--dusk);
}
#tuitionPackageLists .course-option-fee::after{
  content:"/bulan";
  font-size:.6em;font-weight:700;color:var(--ink-soft);margin-left:3px;
}
#tuitionPackageLists .course-option-reg{
  background:var(--coral-soft);color:#a83e1f;
}

#tuitionPackageLists .course-option.is-selected{
  background:linear-gradient(135deg,var(--sky-soft) 0%,#fff 100%);
  border-color:var(--dusk);
  box-shadow:0 14px 30px rgba(53,84,143,.28);
}
#tuitionPackageLists .course-option.is-selected .course-option-check{
  background:var(--dusk);border-color:var(--dusk);
}
#tuitionPackageLists .course-option.is-selected::after{
  content:"Dipilih";
  position:absolute;top:-11px;right:16px;
  font-family:var(--font-display);font-weight:700;font-size:.68rem;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;
  background:var(--dusk);padding:4px 12px;border-radius:999px;
  box-shadow:0 6px 14px rgba(53,84,143,.35);
}

@media (max-width:640px){
  #tuitionPackageLists .course-option{padding:16px 18px}
  #tuitionPackageLists .course-option-fee{font-size:1.2rem}
  #tuitionPackageLists .course-option.is-selected::after{
    top:-9px;right:12px;font-size:.62rem;padding:3px 10px;
  }
}


/* ---------- 46 . Pricing review summary ---------- */
.pricing-review{
  margin-top:28px;
  background:linear-gradient(180deg,#fff 0%,var(--mint-soft) 160%);
  border:1px solid rgba(127,216,180,.45);border-radius:var(--r-md);
  padding:26px 28px;box-shadow:var(--shadow);
  animation:coursePanelIn .45s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion:reduce){.pricing-review{animation:none}}

.pricing-review-title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:18px;
}
.pricing-review-title::before{
  content:"\2713";display:grid;place-items:center;flex:none;
  width:26px;height:26px;border-radius:50%;background:var(--mint);color:#fff;
  font-size:.82rem;font-weight:700;
}

.pricing-review-list{display:flex;flex-direction:column;gap:16px}

.pricing-review-group{display:flex;flex-direction:column;gap:10px}
.pricing-review-group-title{
  font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);
}

.pricing-review-item{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
  padding:14px 16px;background:#fff;border:1px solid rgba(43,64,102,.06);border-radius:var(--r-sm);
}
.pricing-review-name{font-family:var(--font-display);font-weight:600;font-size:.96rem;color:var(--ink)}
.pricing-review-fees{text-align:right;white-space:nowrap}

.pricing-review-item-primary{background:var(--sky-soft);border-color:rgba(142,205,243,.5)}
.pricing-review-item-primary .pricing-review-name{color:var(--dusk)}

@media (max-width:640px){
  .pricing-review{padding:22px 18px}
  .pricing-review-item{flex-direction:column;align-items:flex-start;gap:6px}
  .pricing-review-fees{text-align:left;white-space:normal}
}