/* ============================================================
   HJ CLASSES — Premium storefront layer
   Everything is scoped under .hjc-app so the admin UI is never
   affected. Loaded AFTER app.css, so these rules win on the
   public site (higher specificity + later in cascade).
   GPU-friendly: only transform / opacity / filter are animated.
   ============================================================ */

.hjc-app{
  --p-navy:#082B73;
  --p-navy2:#0A5BCF;
  --p-royal:#0B45AB;
  --p-orange:#0AC7E5;
  --p-orange2:#5AD9EF;
  /* Was #3DAA35/#5BD34F. These two feed the animated gradient borders (header
     pill, faculty rings, section accents) as the third stop after --p-orange
     and --p-royal — which is what made those borders cycle through green.
     Now a pale azure, so the shimmer stays inside the blue family. Names kept
     so every existing var(--p-green) reference resolves. */
  --p-green:#5AD9EF;
  --p-green2:#7FE3F5;
  --p-ink:#0A1628;
  --p-glass:rgba(255,255,255,.07);
  --p-glass-strong:rgba(255,255,255,.12);
  --p-glass-brd:rgba(255,255,255,.16);
  --p-ease:cubic-bezier(.22,.7,.24,1);
  --p-shadow:0 18px 48px -16px rgba(11,31,58,.45);
  --p-shadow-lg:0 30px 70px -24px rgba(11,31,58,.55);
  scroll-behavior:smooth;
}

/* ---------- Keyframes ---------- */
@keyframes p-float       {0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes p-floatBlob   {0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(20px,-24px) scale(1.06)}66%{transform:translate(-18px,16px) scale(.96)}}
@keyframes p-grad        {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes p-shine       {0%{transform:translateX(-130%) skewX(-18deg)}60%,100%{transform:translateX(230%) skewX(-18deg)}}
@keyframes p-pulseGlow   {0%,100%{box-shadow:0 0 0 0 rgba(10,199,229,.5)}70%{box-shadow:0 0 0 14px rgba(10,199,229,0)}}
@keyframes p-marquee     {from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes p-spinSlow    {to{transform:rotate(360deg)}}
@keyframes p-fomoBar     {from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- Scroll reveal ---------- */
.hjc-app .reveal{opacity:0;transform:translateY(30px);transition:opacity .75s var(--p-ease),transform .75s var(--p-ease);will-change:transform,opacity}
.hjc-app .reveal--in{opacity:1;transform:none}
.hjc-app .reveal[data-delay="1"]{transition-delay:.08s}
.hjc-app .reveal[data-delay="2"]{transition-delay:.16s}
.hjc-app .reveal[data-delay="3"]{transition-delay:.24s}
.hjc-app .reveal[data-delay="4"]{transition-delay:.32s}
.hjc-app .reveal[data-delay="5"]{transition-delay:.40s}

/* ============================================================
   HERO
   ============================================================ */
.hjc-app .hero{
  position:relative;overflow:hidden;isolation:isolate;
  /* top padding is overridden per-breakpoint by hero-banner.css (banner → hero seam) */
  padding:clamp(64px,9vw,118px) 20px clamp(40px,5vw,68px);
  background:linear-gradient(135deg,#072456 0%,#0B45AB 48%,#082B73 100%);
  color:#fff;text-align:center;
}
/* animated colour wash */
.hjc-app .hero::after{
  content:"";position:absolute;inset:-40%;z-index:-2;opacity:.6;
  background:radial-gradient(60% 60% at 20% 30%,rgba(10,199,229,.20),transparent 60%),
            radial-gradient(55% 55% at 85% 20%,rgba(11,69,171,.30),transparent 60%),
            radial-gradient(50% 60% at 70% 90%,rgba(10,199,229,.18),transparent 60%);
  background-size:200% 200%;animation:p-grad 18s ease infinite;
}
/* faint grid */
.hjc-app .hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hjc-app .hero__grid{
  position:absolute;inset:-2px;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 38%,#000,transparent 72%);
          mask-image:radial-gradient(circle at 50% 38%,#000,transparent 72%);
}
.hjc-app .hero__blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;transition:translate .5s ease-out}
.hjc-app .hero__blob--orange{width:340px;height:340px;left:-60px;top:-40px;background:radial-gradient(circle,#ff8a3d,#0AC7E5);animation:p-floatBlob 16s ease-in-out infinite;translate:calc(var(--px,0)*38px) calc(var(--py,0)*38px)}
.hjc-app .hero__blob--blue{width:420px;height:420px;right:-80px;top:-60px;background:radial-gradient(circle,#0A5BCF,#082B73);animation:p-floatBlob 20s ease-in-out infinite reverse;translate:calc(var(--px,0)*-30px) calc(var(--py,0)*30px)}
.hjc-app .hero__blob--green{width:300px;height:300px;left:30%;bottom:-120px;background:radial-gradient(circle,#5AD9EF,#0AA9C4);animation:p-floatBlob 18s ease-in-out infinite;opacity:.4;translate:calc(var(--px,0)*22px) calc(var(--py,0)*-22px)}

.hjc-app .hero__inner{position:relative;max-width:880px;margin:0 auto;z-index:1}
.hjc-app .hero__badge{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.2px;
  background:var(--p-glass-strong);border:1px solid var(--p-glass-brd);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.hjc-app .hero__badge svg{width:15px;height:15px;color:var(--p-orange2)}
.hjc-app .hero__badge b{color:#fff;font-weight:700}

.hjc-app .hero__title{
  font-size:clamp(34px,6vw,62px);font-weight:800;line-height:1.05;letter-spacing:-1.5px;margin-bottom:18px;
  text-shadow:0 2px 30px rgba(0,0,0,.25);
}
.hjc-app .hero__title .highlight{
  background:linear-gradient(120deg,#7FE3F5,#0AC7E5 55%,#5AD9EF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  position:relative;
}
.hjc-app .hero__subtitle{font-size:clamp(15px,2vw,19px);line-height:1.6;opacity:.86;margin:0 auto 34px;max-width:660px}
.hjc-app .hero__note{display:block;margin-top:10px;font-size:13px;opacity:.6}

.hjc-app .hero__course-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:6px}
/* Four CTAs need ~950px but .hero__inner caps at 880px, which pushed the 4th onto
   its own row. Let the button row alone breach that cap on wide screens so all four
   sit side by side. Symmetric negative margins (not a transform — this row carries
   the .reveal animation, whose transform would collide). Gated at 1160px so the
   widened row always fits inside the viewport; below that it wraps as before. */
@media(min-width:1160px){
  .hjc-app .hero__course-btns{margin-inline:-110px}
}
.hjc-app .hero__course-btn{
  position:relative;overflow:hidden;isolation:isolate;
  padding:15px 30px;border-radius:14px;font-weight:700;font-size:15px;min-width:210px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#fff;
  transition:transform .3s var(--p-ease),box-shadow .3s var(--p-ease),filter .3s;
}
.hjc-app .hero__course-btn svg{width:18px;height:18px}
.hjc-app .hero__course-btn::after{ /* shine sweep */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-130%) skewX(-18deg);
}
.hjc-app .hero__course-btn:hover::after{animation:p-shine 1.1s ease}
.hjc-app .hero__course-btn--foundation{background:linear-gradient(135deg,#38D4EE,#0AC7E5);box-shadow:0 14px 30px -10px rgba(10,199,229,.7)}
.hjc-app .hero__course-btn--inter{background:linear-gradient(135deg,#0A5BCF,#0B45AB);box-shadow:0 14px 30px -10px rgba(11,69,171,.6)}
/* CA Final — fourth CTA. Same box model, typography, radius, shine sweep and hover
   as the others (all inherited from .hero__course-btn); this only supplies the
   colour, using the brand royal blue so it sits alongside orange/green/glass. */
.hjc-app .hero__course-btn--final{background:linear-gradient(135deg,#0A5BCF,var(--p-royal));box-shadow:0 14px 30px -10px rgba(11,69,171,.7)}
.hjc-app .hero__course-btn--books{background:var(--p-glass-strong);border:1.5px solid var(--p-glass-brd);backdrop-filter:blur(8px)}
.hjc-app .hero__course-btn:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.05)}
.hjc-app .hero__course-btn--books:hover{background:rgba(255,255,255,.2)}
/* magnetic follow (vars set by JS) — composes with hover scale */
.hjc-app .magnetic{transform:translate(var(--mx,0px),var(--my,0px))}
.hjc-app .hero__course-btn.magnetic:hover{transform:translate(var(--mx,0px),var(--my,0px)) scale(1.04);filter:brightness(1.06)}

/* glass stat cards w/ counters */
.hjc-app .hero__stats{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:clamp(24px,3vw,36px)}
.hjc-app .hero__stats .stat{
  min-width:150px;padding:18px 26px;border-radius:18px;
  background:var(--p-glass);border:1px solid var(--p-glass-brd);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 30px -18px rgba(0,0,0,.6);
  transition:transform .35s var(--p-ease),background .35s;
}
.hjc-app .hero__stats .stat:hover{transform:translateY(-5px);background:var(--p-glass-strong)}
.hjc-app .hero__stats .stat strong{display:block;font-size:clamp(26px,4vw,34px);font-weight:800;
  background:linear-gradient(120deg,#fff,#cfe0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hjc-app .hero__stats .stat span{font-size:12.5px;opacity:.78;letter-spacing:.3px}

/* hero → page transition curve */
/* ── Continuous flowing wave divider (premium layered ocean) ──
   Three SVG layers, each with a 1440-unit periodic path inside a 2880-wide viewBox.
   At width:200% an animation of translate3d(0)→translate3d(-50%) loops seamlessly because
   the path at x=1440 is identical to x=0. All three layers flow in the SAME direction so
   the motion reads as a unified current. Layers overlap heavily at the bottom (front fill
   covers ≥20px of the container's lowest portion) — no light/dark gap is possible at the joint. */
.hjc-app .hero__wave{position:absolute;left:0;right:0;bottom:-1px;z-index:0;height:clamp(80px,10vw,130px);overflow:hidden;pointer-events:none;line-height:0}
.hjc-app .hero__wave-svg{position:absolute;left:0;bottom:0;width:200%;height:100%;display:block;will-change:transform;transform:translate3d(0,0,0)}
.hjc-app .hero__wave-svg--back {color:rgba(140,180,230,.22); animation:p-wave 26s linear infinite}
.hjc-app .hero__wave-svg--mid  {color:rgba(220,232,247,.55); animation:p-wave 18s linear infinite; animation-delay:-9s}
.hjc-app .hero__wave-svg--front{color:#f7f9fc;               animation:p-wave 11s linear infinite; animation-delay:-3s}
@keyframes p-wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ============================================================
   MENU BAR — top contact strip + glass navbar
   ============================================================ */
/* top contact strip */
.hjc-app .contact-strip{position:relative;background:linear-gradient(90deg,#072456,#0B45AB 50%,#072456);font-size:12px;padding:7px 0}
.hjc-app .contact-strip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(10,199,229,.55),transparent)}
.hjc-app .contact-strip__phones>svg{color:var(--p-orange2)}
.hjc-app .contact-strip__phones a{color:rgba(255,255,255,.82);font-weight:500;transition:color .2s}
.hjc-app .contact-strip__phones a:hover{color:var(--p-orange2)}
.hjc-app .contact-strip__social{gap:8px}
.hjc-app .contact-strip__social a{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:transform .25s var(--p-ease),background .25s,box-shadow .25s}
.hjc-app .contact-strip__social a:hover{transform:translateY(-2px);background:linear-gradient(135deg,var(--p-orange),#5AD9EF);border-color:transparent;box-shadow:0 8px 18px -8px rgba(10,199,229,.85)}
.hjc-app .contact-strip__social svg{width:15px;height:15px}

/* glass header */
/* position is handled by the fixed .site-topbar wrapper (app.css); the header
   itself stays in normal flow inside it. Opaque white — a fixed bar must not let
   page content show through as it scrolls beneath. */
.hjc-app .header{position:static;background:#fff;backdrop-filter:saturate(180%) blur(16px);
  border-bottom:none;box-shadow:0 10px 34px -24px rgba(11,31,58,.6)}
.hjc-app .header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;opacity:.9;
  background:linear-gradient(90deg,var(--p-orange),var(--p-royal),var(--p-green),var(--p-orange));background-size:200% 100%;animation:p-grad 9s linear infinite}
.hjc-app .header__inner{height:70px;gap:8px}
.hjc-app .header__logo img{height:46px;transition:transform .3s var(--p-ease)}
.hjc-app .header__logo:hover img{transform:scale(1.05)}
.hjc-app .header__nav{gap:4px;margin-left:32px}

/* nav links: pill hover + sliding gradient underline */
.hjc-app .header__link{position:relative;border-bottom:none!important;padding:9px 14px;border-radius:11px;font-weight:600;color:var(--gray-600);transition:color .22s,background .22s}
.hjc-app .header__link:hover,.hjc-app .header__link.active{color:var(--p-navy);background:rgba(11,69,171,.07)}
.hjc-app .header__link::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--p-orange),var(--p-orange2));transform:scaleX(0);transform-origin:left;transition:transform .28s var(--p-ease)}
.hjc-app .header__link:hover::after,.hjc-app .header__link.active::after{transform:scaleX(1)}
.hjc-app .hnav-caret{transition:transform .25s,color .25s}
.hjc-app .hnav-item:hover .hnav-caret{transform:rotate(180deg);color:var(--p-orange)}
.hjc-app .hnav-drop,.hjc-app .hnav-fly{box-shadow:0 22px 50px -16px rgba(11,31,58,.42),0 4px 14px rgba(11,31,58,.10)}
.hjc-app .hnav-drop__link{border-radius:9px;font-weight:600;transition:background .2s,color .2s,padding-left .2s}
.hjc-app .hnav-drop__link:hover{background:rgba(11,69,171,.07);color:var(--p-royal);padding-left:16px}
@keyframes p-dropIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* action icons */
.hjc-app .header__actions{gap:8px}
.hjc-app .header__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;color:var(--p-navy);transition:background .22s,color .22s,transform .22s}
.hjc-app .header__icon svg{width:20px;height:20px}
.hjc-app .header__icon:hover{background:rgba(11,69,171,.08);color:var(--p-royal);transform:translateY(-2px)}
.hjc-app .header__cart-badge{background:linear-gradient(135deg,var(--p-orange),#38D4EE);box-shadow:0 0 0 2px #fff;animation:p-pulseGlow 2.4s ease infinite}

/* divider */
.hjc-app .header__divider{width:1px;height:28px;background:linear-gradient(180deg,transparent,var(--gray-200) 30%,var(--gray-200) 70%,transparent);margin:0 4px}

/* admin / franchise chip */
.hjc-app .header__chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:11px;font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#16386a,#082B73);box-shadow:0 10px 22px -12px rgba(11,31,58,.85);transition:transform .25s var(--p-ease),box-shadow .25s,filter .25s}
.hjc-app .header__chip svg{width:16px;height:16px;color:var(--p-orange2)}
.hjc-app .header__chip:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 16px 30px -12px rgba(11,31,58,.95)}

/* ── account: chip + avatar ring + glass dropdown ── */
.hjc-app .header__profile{position:relative}
.hjc-app .header__user{display:inline-flex;align-items:center;gap:9px;height:46px;padding:4px 12px 4px 4px;border-radius:999px;font-weight:600;color:var(--p-navy);cursor:pointer;
  background:var(--gray-100);border:1px solid var(--gray-200);transition:background .22s,box-shadow .22s,transform .22s}
.hjc-app .header__user:hover,.hjc-app .header__user.is-open{background:#fff;box-shadow:0 12px 26px -14px rgba(11,31,58,.7);transform:translateY(-1px)}
.hjc-app .header__avatar{position:relative;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:conic-gradient(from 200deg,var(--p-orange),var(--p-royal),var(--p-green),var(--p-orange));transition:transform .3s var(--p-ease)}
.hjc-app .header__user:hover .header__avatar{transform:scale(1.06) rotate(6deg)}
.hjc-app .header__avatar-txt{width:31px;height:31px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#16386a,#082B73)}
.hjc-app .header__status{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:#0AC7E5;border:2px solid #fff;animation:p-dot 2.2s ease infinite}
.hjc-app .header__user-name{font-size:13.5px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hjc-app .header__user-caret{width:15px;height:15px;color:var(--gray-400);transition:transform .28s var(--p-ease)}
.hjc-app .header__user.is-open .header__user-caret{transform:rotate(180deg);color:var(--p-royal)}

.hjc-app .header__menu-backdrop{position:fixed;inset:0;z-index:110}
.hjc-app .header__menu{position:absolute;top:calc(100% + 12px);right:0;min-width:256px;z-index:120;padding:8px;border-radius:18px;
  background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(18px);border:1px solid rgba(255,255,255,.65);
  box-shadow:0 28px 64px -22px rgba(11,31,58,.55);transform-origin:top right;animation:p-menuIn .22s var(--p-ease)}
@keyframes p-menuIn{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
.hjc-app .header__menu-head{display:flex;align-items:center;gap:11px;padding:8px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--gray-100)}
.hjc-app .header__avatar--lg{width:46px;height:46px}
.hjc-app .header__avatar--lg .header__avatar-txt{width:38px;height:38px;font-size:14px}
.hjc-app .header__menu-name{display:block;font-size:14px;font-weight:700;color:var(--p-navy);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hjc-app .header__menu-role{font-size:11.5px;font-weight:600;color:var(--orange)}
.hjc-app .header__menu-item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;border-radius:11px;font-size:14px;font-weight:600;color:var(--gray-700);background:none;border:none;text-align:left;cursor:pointer;transition:background .18s,color .18s,padding-left .18s}
.hjc-app .header__menu-item svg{width:18px;height:18px;color:var(--gray-400);transition:color .18s}
.hjc-app .header__menu-item:hover{background:rgba(11,69,171,.08);color:var(--p-royal);padding-left:15px}
.hjc-app .header__menu-item:hover svg{color:var(--p-royal)}
.hjc-app .header__menu-item--danger{color:#dc2626}
.hjc-app .header__menu-item--danger svg{color:#f87171}
.hjc-app .header__menu-item--danger:hover{background:#fef2f2;color:#dc2626}
.hjc-app .header__menu-item--danger:hover svg{color:#dc2626}
.hjc-app .header__menu-count{margin-left:auto;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--p-orange),#38D4EE);min-width:19px;height:19px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.hjc-app .header__menu-sep{height:1px;background:var(--gray-100);margin:6px 4px}

/* logout icon button */
.hjc-app .header__logout{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gray-200);background:#fff;color:var(--gray-500);cursor:pointer;transition:color .22s,border-color .22s,background .22s,transform .22s}
.hjc-app .header__logout svg{width:18px;height:18px}
.hjc-app .header__logout:hover{color:var(--error);border-color:#fecaca;background:#fef2f2;transform:translateY(-2px)}

/* login button */
.hjc-app .header__login{background:linear-gradient(135deg,var(--p-orange),#5AD9EF);box-shadow:0 10px 24px -10px rgba(10,199,229,.8);gap:7px;border-radius:11px}
.hjc-app .header__login svg{width:16px;height:16px}
.hjc-app .header__login:hover{transform:translateY(-2px);filter:brightness(1.05)}

/* premium morphing hamburger */
.hjc-app .header__hamburger{position:relative;width:46px;height:46px;border-radius:13px;color:var(--p-navy);background:var(--gray-100);border:1px solid var(--gray-200);padding:0;transition:background .2s}
.hjc-app .header__hamburger:hover{background:rgba(11,69,171,.08)}
.hjc-app .header__hamburger span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:currentColor;transition:transform .32s var(--p-ease),opacity .2s}
.hjc-app .header__hamburger span:nth-child(1){top:16px}
.hjc-app .header__hamburger span:nth-child(2){top:22px}
.hjc-app .header__hamburger span:nth-child(3){top:28px}
.hjc-app .header__hamburger.is-open span:nth-child(1){top:22px;transform:rotate(45deg)}
.hjc-app .header__hamburger.is-open span:nth-child(2){opacity:0;transform:scaleX(.4)}
.hjc-app .header__hamburger.is-open span:nth-child(3){top:22px;transform:rotate(-45deg)}
@media(max-width:768px){.hjc-app .header__hamburger{display:inline-flex}.hjc-app .header__inner{height:62px}}

/* ── sticky scroll: shrink + intensify (class toggled by JS) ── */
.hjc-app .header{transition:background .32s var(--p-ease),box-shadow .32s var(--p-ease),backdrop-filter .32s}
.hjc-app .header__inner{transition:height .32s var(--p-ease)}
.hjc-app .header__logo img{transition:transform .3s var(--p-ease),height .32s var(--p-ease)}
/* Shrink-on-scroll is deliberately neutralised: the bar is permanently fixed, so a
   height that changes with scroll would desync the page's fixed top offset and
   shift content. Only the shadow deepens — no layout change. */
.hjc-app .header.is-scrolled{background:#fff;backdrop-filter:saturate(180%) blur(20px);box-shadow:0 18px 44px -26px rgba(11,31,58,.8)}
.hjc-app .header.is-scrolled .header__inner{height:70px}
.hjc-app .header.is-scrolled .header__logo img{height:38px}

/* ── icon tooltips ── */
.hjc-app .header__icon[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(5px);white-space:nowrap;
  background:var(--p-navy);color:#fff;font-size:11.5px;font-weight:600;padding:5px 9px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:var(--p-shadow);z-index:50}
.hjc-app .header__icon[data-tip]::before{content:"";position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:var(--p-navy);opacity:0;transition:opacity .2s;z-index:50}
.hjc-app .header__icon[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.hjc-app .header__icon[data-tip]:hover::before{opacity:1}

/* ── active nav link ── */
.hjc-app .header__link.active{color:var(--p-navy);background:linear-gradient(120deg,rgba(10,199,229,.12),rgba(11,69,171,.10))}
/* Active submenu item (any level in the current path): tinted row + orange bullet + left accent. */
.hjc-app .hnav-drop__link.active{background:rgba(10,199,229,.08);color:var(--p-navy);font-weight:700;box-shadow:inset 3px 0 0 var(--p-orange)}
.hjc-app .hnav-drop__link.active::before{background:var(--p-orange);transform:scale(1.3)}
/* Active top-level tab: premium orange-tinted pill + persistent underline (set later so it wins). */
.hjc-app .header__link.active{background:rgba(10,199,229,.10);color:var(--p-navy)}

/* ── admin/franchise chip shine sweep ── */
.hjc-app .header__chip{position:relative;overflow:hidden;isolation:isolate}
.hjc-app .header__chip::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-130%) skewX(-18deg)}
.hjc-app .header__chip:hover::after{animation:p-shine 1.1s ease}

/* ── status-dot pulse ── */
@keyframes p-dot{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ============================================================
   PREMIUM MOBILE DRAWER
   ============================================================ */
.hjc-app .drawer-overlay{background:rgba(8,18,32,.55);backdrop-filter:blur(5px);animation:fade-in .25s ease}
.hjc-app .drawer{width:min(320px,86vw);background:linear-gradient(180deg,#0e2647,#081726);color:#fff;border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-26px 0 70px -24px rgba(0,0,0,.7);animation:p-drawerIn .38s var(--p-ease)}
@keyframes p-drawerIn{from{transform:translateX(105%)}to{transform:none}}
.hjc-app .drawer__header{border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:16px;margin-bottom:14px}
.hjc-app .drawer__close{width:40px;height:40px;border-radius:11px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;font-size:17px;transition:background .2s,transform .3s var(--p-ease)}
.hjc-app .drawer__close:hover{background:linear-gradient(135deg,var(--p-orange),#5AD9EF);border-color:transparent;transform:rotate(90deg)}
.hjc-app .drawer__nav{gap:3px}
.hjc-app .drawer__nav > a{position:relative;color:rgba(255,255,255,.84);font-weight:600;border-radius:12px;padding:13px 16px;
  opacity:0;transform:translateX(22px);animation:p-drawerItem .45s var(--p-ease) forwards;transition:background .2s,color .2s,padding-left .2s}
.hjc-app .drawer__nav > a::before{content:"";position:absolute;left:7px;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:18px;border-radius:2px;
  background:linear-gradient(180deg,var(--p-orange),var(--p-orange2));transition:transform .22s var(--p-ease)}
.hjc-app .drawer__nav > a:hover{background:rgba(255,255,255,.09);color:#fff;padding-left:22px}
.hjc-app .drawer__nav > a:hover::before{transform:translateY(-50%) scaleY(1)}
.hjc-app .drawer__nav > form{opacity:0;transform:translateX(22px);animation:p-drawerItem .45s var(--p-ease) .42s forwards}
.hjc-app .drawer__nav .btn{width:100%;margin-top:10px}
.hjc-app .drawer__nav .btn-outline{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.hjc-app .drawer__nav .btn-outline:hover{background:rgba(255,255,255,.14);border-color:#fff}
.hjc-app .drawer__nav .btn-primary{background:linear-gradient(135deg,var(--p-orange),#5AD9EF)}
@keyframes p-drawerItem{to{opacity:1;transform:none}}
.hjc-app .drawer__nav > *:nth-child(1){animation-delay:.04s}
.hjc-app .drawer__nav > *:nth-child(2){animation-delay:.09s}
.hjc-app .drawer__nav > *:nth-child(3){animation-delay:.14s}
.hjc-app .drawer__nav > *:nth-child(4){animation-delay:.19s}
.hjc-app .drawer__nav > *:nth-child(5){animation-delay:.24s}
.hjc-app .drawer__nav > *:nth-child(6){animation-delay:.29s}
.hjc-app .drawer__nav > *:nth-child(7){animation-delay:.34s}
.hjc-app .drawer__nav > *:nth-child(8){animation-delay:.39s}
.hjc-app .drawer__nav > *:nth-child(n+9){animation-delay:.44s}

/* ============================================================
   SECTION RHYTHM (kill the empty-white feel)
   ============================================================ */
/* Section rhythm — tightened from clamp(56px,8vw,92px). 92px top AND bottom on nine
   consecutive sections was ~1.6k px of pure whitespace; 48px reads as premium
   breathing room (Stripe/Notion territory) without feeling cramped, and the clamp
   keeps it proportional down to 32px on mobile. */
.hjc-app .section{position:relative;padding:clamp(26px,3.6vw,48px) 20px}
.hjc-app .section--gray{background:
  radial-gradient(120% 80% at 50% 0%,rgba(11,69,171,.05),transparent 60%),
  linear-gradient(180deg,#f7f9fc,#eef2f8)}
.hjc-app .section__label{
  display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:999px;
  background:linear-gradient(120deg,rgba(10,199,229,.12),rgba(10,199,229,.05));
  color:var(--orange);letter-spacing:1.6px;font-size:12px;border:1px solid rgba(10,199,229,.18)}
.hjc-app .section__title{font-size:clamp(26px,4vw,42px);font-weight:800;letter-spacing:-.8px;color:var(--p-navy);margin-bottom:12px}
.hjc-app .section__subtitle{font-size:clamp(14px,1.6vw,17px);line-height:1.7;color:var(--gray-500)}
/* badge → heading → subtitle → content: the label/title gaps (8px/12px) were already
   tight; the 52px drop to content was the excessive one. */
.hjc-app .section__header{margin-bottom:clamp(16px,2.6vw,28px)}

/* a soft glow divider between alternating sections */
.hjc-app .section--gray::before,.hjc-app .section--gray::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(11,31,58,.10),transparent)}
.hjc-app .section--gray::before{top:0}.hjc-app .section--gray::after{bottom:0}

/* ============================================================
   TRENDING / COURSE CARDS — ultra-premium showcase
   ============================================================ */

/* Trending section ambient background */
.hjc-app .trending-section{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 80% at 50% 0%,rgba(11,69,171,.05),transparent 60%),linear-gradient(180deg,#f7f9fc,#eef3fb)}
.hjc-app .trending-section::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 12% 20%,rgba(10,199,229,.08),transparent 50%),
    radial-gradient(circle at 88% 80%,rgba(11,69,171,.08),transparent 50%)}
.hjc-app .trending-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hjc-app .trending-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5}
.hjc-app .trending-blob--blue{width:380px;height:380px;left:-100px;top:8%;background:radial-gradient(circle,#a8c5ff,transparent 70%);animation:p-floatBlob 20s ease-in-out infinite}
.hjc-app .trending-blob--orange{width:340px;height:340px;right:-80px;bottom:-60px;background:radial-gradient(circle,#A8E9F5,transparent 70%);animation:p-floatBlob 24s ease-in-out infinite reverse}

/* Grid — 4 cards desktop, 3 small laptop, 2 tablet, 1 mobile carousel */
.hjc-app .course-grid{display:grid;gap:20px;grid-template-columns:repeat(4,1fr);margin-top:2px}
@media(max-width:1279px){.hjc-app .course-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media(max-width:1023px){.hjc-app .course-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:639px){
  .hjc-app .course-grid{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;
    padding:2px 0 14px;margin:0 -16px;padding-left:16px;padding-right:16px;
    scrollbar-width:none;-ms-overflow-style:none}
  .hjc-app .course-grid::-webkit-scrollbar{display:none}
  .hjc-app .course-card{flex:0 0 86%;scroll-snap-align:center}
}

/* ── glass card ── */
.hjc-app .course-card{
  position:relative;display:flex;flex-direction:column;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.7);border-radius:22px;overflow:hidden;isolation:isolate;text-decoration:none;color:inherit;min-width:0;
  box-shadow:0 18px 42px -22px rgba(11,31,58,.45),inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1),border-color .45s,background .45s}

/* glow border on hover */
.hjc-app .course-card::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .45s;z-index:4;
  background:linear-gradient(135deg,var(--p-orange),var(--p-royal),var(--p-green));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
/* whole-card shine sweep */
.hjc-app .course-card::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-130%) skewX(-18deg);pointer-events:none;z-index:3}
.hjc-app .course-card:hover::after{animation:p-shine 1.1s ease}
.hjc-app .course-card:hover{transform:translateY(-12px) scale(1.015);
  box-shadow:0 36px 60px -22px rgba(11,31,58,.55),0 0 60px -10px rgba(11,69,171,.22),inset 0 1px 0 rgba(255,255,255,.9);
  background:rgba(255,255,255,.97);border-color:transparent}
.hjc-app .course-card:hover::before{opacity:1}

/* radial backlight glow behind card */
.hjc-app .course-card__glow{position:absolute;left:50%;top:-15%;transform:translateX(-50%);
  width:130%;height:55%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(11,69,171,.18),transparent 60%);
  opacity:.55;transition:opacity .5s,transform .5s}
.hjc-app .course-card:hover .course-card__glow{opacity:1;transform:translateX(-50%) translateY(-2%) scale(1.06)}
/* vary backlight colour per card so the row feels alive */
.hjc-app .course-card:nth-child(4n+2) .course-card__glow{background:radial-gradient(ellipse at 50% 50%,rgba(10,199,229,.18),transparent 60%)}
.hjc-app .course-card:nth-child(4n+3) .course-card__glow{background:radial-gradient(ellipse at 50% 50%,rgba(90,217,239,.20),transparent 60%)}
.hjc-app .course-card:nth-child(4n) .course-card__glow{background:radial-gradient(ellipse at 50% 50%,rgba(11,69,171,.16),transparent 60%)}

/* ── image area ── */
/* Square 1:1 area so the uploaded 360×360 product artwork shows in full on every screen/DPI:
   the container height always scales with the card width (responsive), never a fixed px height.
   height:auto beats the global .course-card__image{height:160px} rule via higher specificity so
   the aspect-ratio governs sizing. */
.hjc-app .course-card__image{position:relative;aspect-ratio:1/1;height:auto;overflow:hidden;
  background:linear-gradient(135deg,#082B73,#0A5BCF);z-index:1}
.hjc-app .course-card__image--inter{background:linear-gradient(135deg,#0B45AB,#0A5BCF)}
.hjc-app .course-card__image--final{background:linear-gradient(135deg,#0A5BCF,#3D9BE9)}
.hjc-app .course-card__image--books{background:linear-gradient(135deg,#082B73,#0A5BCF)}
/* Was a green gradient (#1f5a3a → #2f8a55) — the last one left on the course cards. Re-cut from the
   brand pair, Primary Blue into Azure Haze, which also keeps it distinct from the other three
   level treatments: inter and books both run dark-blue-to-mid-blue, this one lifts to cyan. */
.hjc-app .course-card__image--tests{background:linear-gradient(135deg,#0B45AB,#0AC7E5)}
/* Show the WHOLE image inside the square box — object-fit:contain never crops, stretches or
   squashes. A perfect 360×360 fills the 1:1 box exactly; any off-ratio image letterboxes onto the
   navy backdrop rather than being cut. height:100% beats the global img{height:auto} normalize. */
.hjc-app .course-card__photo{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s}
.hjc-app .course-card:hover .course-card__photo{transform:scale(1.08);filter:brightness(1.06) saturate(1.05)}

/* overlay gradient over the image */
.hjc-app .course-card__image::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.0) 0%,rgba(0,0,0,.0) 50%,rgba(0,0,0,.32) 100%),
             linear-gradient(110deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);
  background-size:100% 100%,400% 100%;background-position:0 0,-130% 0;background-repeat:no-repeat;
  pointer-events:none;z-index:2;transition:opacity .4s}
.hjc-app .course-card:hover .course-card__image::after{background-position:0 0,230% 0;transition:background-position 1.1s ease}

/* illustration (when no PrimaryImageUrl) */
.hjc-app .course-card__illustration{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:14px;z-index:1}
.hjc-app .course-card__ico{position:relative;display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:24px;
  background:rgba(255,255,255,.10);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.20);
  box-shadow:0 14px 36px -10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .55s var(--p-ease)}
.hjc-app .course-card:hover .course-card__ico{transform:scale(1.08) rotate(-3deg)}
.hjc-app .course-card__ico svg{width:44px;height:44px;color:rgba(255,255,255,.95);position:relative;z-index:1}
.hjc-app .course-card__illustration-label{font-size:11px;font-weight:800;color:rgba(255,255,255,.85);letter-spacing:1.6px;text-transform:uppercase}

/* ── badge — colour variants ── */
.hjc-app .course-card__badge{position:absolute;top:14px;left:14px;z-index:5;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,var(--p-orange),#5AD9EF);
  box-shadow:0 8px 20px -6px rgba(10,199,229,.6);backdrop-filter:blur(6px);
  transition:transform .25s,box-shadow .25s}
.hjc-app .course-card:hover .course-card__badge{transform:translateY(-2px);box-shadow:0 14px 26px -8px rgba(10,199,229,.7)}
/* LIVE — red gradient with pulsing dot */
.hjc-app .course-card__badge--live{background:linear-gradient(135deg,#ff4d4d,#d4341f);box-shadow:0 8px 20px -6px rgba(212,52,31,.6)}
.hjc-app .course-card__badge--live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:p-pulseGlow 1.6s ease infinite}
/* BESTSELLER — gold gradient */
.hjc-app .course-card__badge--best{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 8px 20px -6px rgba(217,119,6,.6)}
/* COMBO — purple gradient */
.hjc-app .course-card__badge--combo{background:linear-gradient(135deg,#0B45AB,#082B73);box-shadow:0 8px 20px -6px rgba(11,69,171,.55)}
/* TRENDING — pink/orange */
.hjc-app .course-card__badge--trend{background:linear-gradient(135deg,#0AC7E5,#0AC7E5);box-shadow:0 8px 20px -6px rgba(236,72,153,.55)}
/* LIMITED — red/black */
.hjc-app .course-card__badge--limited{background:linear-gradient(135deg,#1f2937,#dc2626);box-shadow:0 8px 20px -6px rgba(220,38,38,.55)}

/* ── body ── */
.hjc-app .course-card__body{position:relative;z-index:5;padding:18px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.hjc-app .course-card__level{font-size:11px;font-weight:800;color:var(--orange);letter-spacing:1.2px;text-transform:uppercase;margin:0}
/* Full product name, never truncated. The old -webkit-line-clamp:2 + overflow:hidden
   cut long course titles off with an ellipsis; the title now wraps to as many lines
   as it needs and the card grows. Font-size and line-height are trimmed slightly to
   claw back some of that height. min-height (NOT max-height) still reserves two
   lines so short titles don't make a row look ragged — it's a floor, not a cap.
   Card footers stay aligned because .course-card__footer has margin-top:auto and
   grid items stretch to equal height. */
.hjc-app .course-card__title{font-size:15.5px;font-weight:800;color:var(--p-navy);line-height:1.28;letter-spacing:-.2px;margin:0;
  min-height:2.56em;overflow-wrap:break-word}
.hjc-app .course-card__faculty{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--gray-500);font-weight:500;margin:0}
.hjc-app .course-card__faculty svg{width:14px;height:14px;color:var(--gray-400);flex-shrink:0}

/* meta row: rating (the enrolled-students badge was removed; these rules are still
   used by the star/rating pill, so none of them are dead) */
.hjc-app .course-card__meta{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0}
.hjc-app .course-card__stat{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--gray-700);
  background:var(--gray-50);padding:4px 10px;border-radius:999px;border:1px solid var(--gray-200);white-space:nowrap}
.hjc-app .course-card__stat svg{width:11px;height:11px;color:var(--orange)}
.hjc-app .course-card__stat small{font-weight:600;color:var(--gray-400)}
.hjc-app .course-card__stat--star svg{color:#0AC7E5}

/* footer (pricing) */
.hjc-app .course-card__footer{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:12px;margin-top:auto;border-top:1px solid var(--gray-100)}
.hjc-app .course-card__pricing{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.hjc-app .course-card__price{font-size:23px;font-weight:900;letter-spacing:-.4px;line-height:1;
  background:linear-gradient(120deg,var(--p-navy),var(--p-royal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hjc-app .course-card__mrp{font-size:13px;color:var(--gray-400);text-decoration:line-through;font-weight:600}
.hjc-app .course-card__discount{font-size:11px;font-weight:800;color:#0B45AB;background:linear-gradient(120deg,#E6F9FD,#C9F1F9);
  padding:4px 10px;border-radius:999px;border:1px solid rgba(11,69,171,.28);white-space:nowrap}

/* CTA pill */
.hjc-app .course-card__cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;
  margin-top:14px;padding:12px 18px;border-radius:13px;
  background:linear-gradient(135deg,var(--p-orange),#5AD9EF);color:#fff;
  font-size:13.5px;font-weight:800;letter-spacing:.3px;
  box-shadow:0 12px 24px -10px rgba(10,199,229,.6);
  overflow:hidden;position:relative;isolation:isolate;
  transition:transform .3s var(--p-ease),box-shadow .3s,filter .3s}
.hjc-app .course-card__cta svg{width:15px;height:15px;transition:transform .3s var(--p-ease)}
.hjc-app .course-card__cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-130%) skewX(-18deg)}
.hjc-app .course-card:hover .course-card__cta{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 30px -10px rgba(10,199,229,.75);filter:brightness(1.06)}
.hjc-app .course-card:hover .course-card__cta svg{transform:translateX(4px)}
.hjc-app .course-card:hover .course-card__cta::before{animation:p-shine 1s ease}

/* loading skeleton */
.hjc-app .course-card--skel{background:rgba(255,255,255,.85);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 42px -28px rgba(11,31,58,.4);pointer-events:none}
.hjc-app .course-card--skel::before,.hjc-app .course-card--skel::after{display:none}

/* ============================================================
   MODE OF TEACHING
   ============================================================ */
.hjc-app .mode-grid{gap:clamp(16px,2.4vw,24px)}
.hjc-app .mode-card{
  position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--gray-200);border-radius:20px;
  padding:38px 26px;background:linear-gradient(180deg,#fff,#fbfcfe);
  transition:transform .4s var(--p-ease),box-shadow .4s var(--p-ease),border-color .4s}
.hjc-app .mode-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(80% 60% at 50% 0%,rgba(11,69,171,.10),transparent 70%)}
.hjc-app .mode-card:hover{transform:translateY(-8px);box-shadow:var(--p-shadow);border-color:rgba(11,69,171,.25)}
.hjc-app .mode-card:hover::before{opacity:1}
.hjc-app .mode-card__icon{
  width:72px;height:72px;margin:0 auto 18px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  color:#fff;position:relative;box-shadow:0 14px 28px -12px rgba(11,31,58,.5)}
.hjc-app .mode-card__icon svg{width:32px;height:32px;position:relative;z-index:1}
.hjc-app .mode-card__icon::after{content:"";position:absolute;inset:0;border-radius:20px;background:inherit;filter:blur(14px);opacity:.55;z-index:0;transition:opacity .4s}
.hjc-app .mode-card:hover .mode-card__icon::after{opacity:.9}
.hjc-app .mode-card__icon--live{background:linear-gradient(135deg,#0AC7E5,#0AA9C4)}
.hjc-app .mode-card__icon--rec{background:linear-gradient(135deg,#0AC7E5,#0AA9C4)}
.hjc-app .mode-card__icon--f2f{background:linear-gradient(135deg,#0AC7E5,#0AA9C4)}
.hjc-app .mode-card h3{font-size:19px;letter-spacing:-.3px}
.hjc-app .mode-card p{font-size:14px;line-height:1.65}
.hjc-app .mode-card__icon--live::before{ /* live ping */
  content:"";position:absolute;top:14px;right:14px;width:9px;height:9px;border-radius:50%;background:#fff;z-index:2;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:p-pulseGlow 1.8s ease infinite}

/* ============================================================
   FACULTY
   ============================================================ */
.hjc-app .faculty-grid{gap:clamp(14px,2vw,22px)}
.hjc-app .faculty-card{
  position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--gray-200);border-radius:20px;padding:28px 18px;
  background:#fff;transition:transform .4s var(--p-ease),box-shadow .4s var(--p-ease),border-color .4s}
.hjc-app .faculty-card::before{content:"";position:absolute;left:50%;top:-40%;width:160%;height:160%;transform:translateX(-50%);z-index:-1;opacity:0;transition:opacity .45s;
  background:radial-gradient(circle at 50% 0,rgba(10,199,229,.14),transparent 60%)}
.hjc-app .faculty-card:hover{transform:translateY(-7px);box-shadow:var(--p-shadow);border-color:rgba(10,199,229,.3)}
.hjc-app .faculty-card:hover::before{opacity:1}
.hjc-app .faculty-card__ring{width:96px;height:96px;margin:0 auto 14px;border-radius:50%;padding:3px;
  background:conic-gradient(from 180deg,var(--p-orange),var(--p-royal),var(--p-green),var(--p-orange));
  display:flex;align-items:center;justify-content:center;transition:transform .5s var(--p-ease)}
.hjc-app .faculty-card:hover .faculty-card__ring{transform:rotate(8deg) scale(1.05)}
.hjc-app .faculty-card__avatar{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:800;color:#fff;border:3px solid #fff;margin:0}
.hjc-app .faculty-card h4{font-size:15px;font-weight:700;color:var(--p-navy);margin-top:4px}
.hjc-app .faculty-card p{font-size:12.5px;color:var(--gray-500);margin-top:4px;line-height:1.5}

/* ============================================================
   FACULTY SHOWCASE — header pill, big title, premium card v2
   ============================================================ */

/* ── section sizing override: wider container + safe gutters that fit the chevrons ── */
.hjc-app .fcs-section .section__inner{max-width:1600px;padding:0 clamp(16px,3vw,32px);width:100%;box-sizing:border-box}
/* global guard against any rogue horizontal overflow caused by background blobs / decorations */
.hjc-app{overflow-x:clip}

/* section header — clean typography, no decorative underline */
.hjc-app .fcs-header{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:clamp(20px,2.6vw,30px)}
.hjc-app .fcs-trustpill{display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(120deg,#E6F9FD,#C9F1F9);color:var(--p-navy);
  border:1px solid rgba(11,69,171,.25);
  padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:700;
  box-shadow:0 8px 20px -10px rgba(10,199,229,.4),inset 0 0 0 1px rgba(255,255,255,.6)}
.hjc-app .fcs-trustpill svg{width:15px;height:15px;color:var(--orange)}
.hjc-app .fcs-title{font-size:clamp(36px,5vw,64px);font-weight:900;letter-spacing:-1.5px;line-height:1.05;color:var(--p-navy);margin:0;max-width:980px}
.hjc-app .fcs-subtitle{font-size:clamp(15px,1.6vw,17px);color:var(--gray-500);line-height:1.6;max-width:780px;margin:0}

/* top badges row inside each card */
.hjc-app .fcs-card__top{position:relative;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}
.hjc-app .fcs-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.1;border:1px solid transparent;backdrop-filter:blur(6px)}
.hjc-app .fcs-pill svg{width:13px;height:13px;flex-shrink:0}
.hjc-app .fcs-pill--verified{background:#e0ecff;color:#1d4ed8;border-color:#bfd1ff}
.hjc-app .fcs-pill--verified svg{color:#2563eb}
.hjc-app .fcs-pill--rating{background:#E6F9FD;color:var(--p-navy);border-color:rgba(10,199,229,.35)}
.hjc-app .fcs-pill--rating svg{color:#f59e0b}

/* subject chips — one filled orange, others outlined */
.hjc-app .fcs-card__subjects{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 14px}
.hjc-app .fcs-card__subjects>span{font-size:11.5px;font-weight:700;color:var(--gray-700);background:#fff;border:1.5px solid var(--gray-200);
  padding:5px 12px;border-radius:999px;transition:background .2s,color .2s,border-color .2s}
.hjc-app .fcs-card__subjects>span.is-active{background:linear-gradient(135deg,var(--p-orange),#5AD9EF);color:#fff;border-color:transparent;box-shadow:0 6px 14px -6px rgba(10,199,229,.55)}

/* three stat boxes side-by-side */
.hjc-app .fcs-card__statbox{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:6px 0 14px}
.hjc-app .fcs-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 4px 12px;
  background:linear-gradient(160deg,#fff,#E6F9FD 110%);border:1px solid rgba(10,199,229,.22);border-radius:14px;
  box-shadow:0 4px 12px -6px rgba(10,199,229,.18);transition:transform .25s var(--p-ease),box-shadow .25s}
.hjc-app .fcs-card:hover .fcs-stat{transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(10,199,229,.35)}
.hjc-app .fcs-stat__ico{width:18px;height:18px;color:var(--orange);margin-bottom:1px}
.hjc-app .fcs-stat__num{font-size:14px;font-weight:800;color:var(--p-navy);letter-spacing:-.3px;line-height:1.1}
.hjc-app .fcs-stat__label{font-size:10.5px;font-weight:600;color:var(--gray-500);letter-spacing:.2px}

/* full-width gradient CTA — overrides the earlier inline-flex pill */
.hjc-app .fcs-card__cta{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:auto;padding:12px 18px;border-radius:13px;
  font-size:14px;font-weight:800;letter-spacing:.3px;color:#fff;align-self:stretch;
  background:linear-gradient(135deg,var(--p-orange),#5AD9EF);
  box-shadow:0 12px 24px -8px rgba(10,199,229,.6);
  overflow:hidden;position:relative;isolation:isolate;
  transition:transform .3s var(--p-ease),box-shadow .3s,filter .3s}
.hjc-app .fcs-card__cta svg{width:15px;height:15px;transition:transform .3s var(--p-ease)}
.hjc-app .fcs-card__cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-130%) skewX(-18deg)}
.hjc-app .fcs-card:hover .fcs-card__cta{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 30px -10px rgba(10,199,229,.75);filter:brightness(1.06)}
.hjc-app .fcs-card:hover .fcs-card__cta svg{transform:translateX(4px)}
.hjc-app .fcs-card:hover .fcs-card__cta::before{animation:p-shine 1s ease}

/* ============================================================
   FACULTY SHOWCASE — premium glass cards (ultra-premium tier)
   ============================================================ */
@property --fcs-angle{syntax:"<angle>";inherits:false;initial-value:0deg}

/* section — soft tinted gradient + ambient lighting layer */
.hjc-app .fcs-section{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#fbfdff,#eef3fb)}
.hjc-app .fcs-section::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(10,199,229,.10) 0%, transparent 55%),
    radial-gradient(circle at 88% 78%, rgba(11,69,171,.10) 0%, transparent 55%),
    radial-gradient(circle at 70% 12%, rgba(10,199,229,.08) 0%, transparent 55%)}
.hjc-app .fcs-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hjc-app .fcs-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.hjc-app .fcs-blob--orange{width:380px;height:380px;left:-100px;top:-60px;background:radial-gradient(circle,#A8E9F5,transparent 70%);animation:p-floatBlob 18s ease-in-out infinite}
.hjc-app .fcs-blob--blue{width:420px;height:420px;right:-100px;bottom:-80px;background:radial-gradient(circle,#a8c5ff,transparent 70%);animation:p-floatBlob 22s ease-in-out infinite reverse}

/* ── viewport + scroll track ──
   The viewport sits *inside* section__inner's 16-32px gutter. Chevrons live in that gutter so they
   never overlap a card. Cards always fit the available width — the gap math is shared with the JS
   that advances scrollLeft, so the carousel steps land exactly on card boundaries. */
.hjc-app .fcs-viewport{position:relative;margin-top:8px;width:100%}
.hjc-app .fcs-grid{
  display:flex;gap:24px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 2px 18px;scrollbar-width:none;-ms-overflow-style:none;width:100%;box-sizing:border-box}
.hjc-app .fcs-grid::-webkit-scrollbar{display:none}

/* Desktop: 4 cards. (100% − 72px) / 4 with 24px×3 gaps = exact fit. */
.hjc-app .fcs-card{flex:0 0 calc((100% - 72px)/4);scroll-snap-align:start;min-width:0}
/* Tablet: 2 cards centred (gap 20px, so subtract 20px once). */
@media(max-width:1023px){.hjc-app .fcs-grid{gap:20px}.hjc-app .fcs-card{flex:0 0 calc((100% - 20px)/2)}}
/* Phone: 1 card, snap-center for swipe. */
@media(max-width:639px){.hjc-app .fcs-grid{gap:16px}.hjc-app .fcs-card{flex:0 0 92%;scroll-snap-align:center}}

/* ── prev/next chevrons — sit in the section gutter, never overlap cards ──
   On desktop they overshoot the grid by 26px into section__inner's padding (which we set at
   16-32px). On tablets the gutter is too small, so they tuck in 4px. On phones they hide. */
.hjc-app .fcs-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--p-navy);cursor:pointer;padding:0;
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border:1px solid var(--gray-200);
  box-shadow:0 14px 28px -10px rgba(11,31,58,.45);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s,background .25s,box-shadow .25s,color .25s}
.hjc-app .fcs-nav svg{width:22px;height:22px}
.hjc-app .fcs-viewport.is-active .fcs-nav{opacity:1;visibility:visible}
.hjc-app .fcs-nav:hover{background:#fff;transform:translateY(-50%) scale(1.1);box-shadow:0 18px 34px -10px rgba(11,31,58,.6);color:var(--orange)}
.hjc-app .fcs-nav--prev{left:-26px}
.hjc-app .fcs-nav--next{right:-26px}
.hjc-app .fcs-viewport.is-edge-start .fcs-nav--prev{opacity:.3;pointer-events:none}
.hjc-app .fcs-viewport.is-edge-end .fcs-nav--next{opacity:.3;pointer-events:none}
@media(max-width:1023px){.hjc-app .fcs-nav--prev{left:4px}.hjc-app .fcs-nav--next{right:4px}}
@media(max-width:639px){.hjc-app .fcs-nav{display:none}}

/* ── glass card ── */
.hjc-app .fcs-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:34px 22px 24px;border-radius:22px;
  background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 18px 50px -26px rgba(11,31,58,.55), inset 0 1px 0 rgba(255,255,255,.85);
  text-decoration:none;color:inherit;overflow:hidden;isolation:isolate;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s cubic-bezier(.2,.7,.2,1),background .55s,border-color .4s}

/* rotating gradient border (uses @property; falls back to a static gradient) */
.hjc-app .fcs-card::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1.6px;pointer-events:none;opacity:.35;transition:opacity .45s;z-index:4;
  background:conic-gradient(from var(--fcs-angle), var(--p-orange), var(--p-royal), var(--p-green), var(--p-orange));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:p-borderSpin 6s linear infinite}
.hjc-app .fcs-card:hover::before{opacity:1;animation-duration:3s}
@keyframes p-borderSpin{to{--fcs-angle:360deg}}

/* shine sweep (diagonal light) */
.hjc-app .fcs-card::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-130%) skewX(-18deg);pointer-events:none;z-index:2;border-radius:22px}
.hjc-app .fcs-card:hover::after{animation:p-shine 1.1s ease}

/* card lift */
.hjc-app .fcs-card:hover{transform:translateY(-10px) scale(1.015);
  box-shadow:0 36px 70px -28px rgba(11,31,58,.65), inset 0 1px 0 rgba(255,255,255,.9);
  background:rgba(255,255,255,.88)}

/* ── per-card backlight: a soft radial glow that lights up under the card ── */
.hjc-app .fcs-card__glow{position:absolute;left:50%;top:-18%;transform:translateX(-50%);
  width:130%;height:65%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(10,199,229,.22),transparent 60%);
  opacity:.7;transition:opacity .5s,transform .5s}
.hjc-app .fcs-card:hover .fcs-card__glow{opacity:1;transform:translateX(-50%) translateY(-3%) scale(1.07)}
/* vary the backlight colour per card so the row feels alive */
.hjc-app .fcs-card:nth-child(5n+2) .fcs-card__glow{background:radial-gradient(ellipse at 50% 50%,rgba(11,69,171,.22),transparent 60%)}
.hjc-app .fcs-card:nth-child(5n+3) .fcs-card__glow{background:radial-gradient(ellipse at 50% 50%,rgba(90,217,239,.24),transparent 60%)}
.hjc-app .fcs-card:nth-child(5n+4) .fcs-card__glow{background:radial-gradient(ellipse at 50% 50%,rgba(11,69,171,.18),transparent 60%)}
.hjc-app .fcs-card:nth-child(5n) .fcs-card__glow{background:radial-gradient(ellipse at 50% 50%,rgba(8,43,115,.18),transparent 60%)}

/* spotlight: appears on hover, sits behind the photo */
.hjc-app .fcs-card__spotlight{position:absolute;left:50%;top:6%;transform:translateX(-50%) scale(.6);
  width:180px;height:180px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 65%);
  opacity:0;transition:opacity .5s,transform .55s var(--p-ease)}
.hjc-app .fcs-card:hover .fcs-card__spotlight{opacity:.9;transform:translateX(-50%) scale(1)}

/* ── photo — large hero element with halo + spinning ring ── */
.hjc-app .fcs-card__photo-wrap{position:relative;width:148px;height:148px;margin:6px auto 18px;z-index:3;
  animation:fcs-imgfloat 6s ease-in-out infinite}
@keyframes fcs-imgfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hjc-app .fcs-card:nth-child(2) .fcs-card__photo-wrap{animation-delay:-1.4s}
.hjc-app .fcs-card:nth-child(3) .fcs-card__photo-wrap{animation-delay:-2.7s}
.hjc-app .fcs-card:nth-child(4) .fcs-card__photo-wrap{animation-delay:-4.1s}
.hjc-app .fcs-card:nth-child(5) .fcs-card__photo-wrap{animation-delay:-1.1s}
.hjc-app .fcs-card:nth-child(6) .fcs-card__photo-wrap{animation-delay:-3.5s}

/* large outer glow halo around the photo */
.hjc-app .fcs-card__halo{position:absolute;inset:-22px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(10,199,229,.35),transparent 65%);
  filter:blur(14px);opacity:.55;transition:opacity .5s,transform .5s}
.hjc-app .fcs-card:hover .fcs-card__halo{opacity:1;transform:scale(1.12)}

/* spinning conic ring */
.hjc-app .fcs-card__ring{position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--p-orange),var(--p-royal),var(--p-green),var(--p-orange));
  animation:p-spinSlow 16s linear infinite;
  transition:transform .55s var(--p-ease),filter .35s,animation-duration .35s}
.hjc-app .fcs-card:hover .fcs-card__ring{transform:scale(1.06);filter:drop-shadow(0 8px 22px rgba(10,199,229,.55));animation-duration:5s}

/* photo image (or initials disc) */
.hjc-app .fcs-card__photo{position:relative;width:100%;height:100%;border-radius:50%;border:4px solid #fff;object-fit:cover;background:var(--gray-100);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.06);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .4s,box-shadow .4s;z-index:1}
.hjc-app .fcs-card:hover .fcs-card__photo{transform:scale(1.08) rotate(2deg);filter:brightness(1.05) saturate(1.05);box-shadow:inset 0 2px 8px rgba(0,0,0,.06),0 16px 36px -16px rgba(11,31,58,.55)}
.hjc-app .fcs-card__photo--initials{display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--navy-dark,#082B73),var(--navy-light,#0A5BCF))}

/* ── text block ── */
.hjc-app .fcs-card__name{position:relative;z-index:3;font-size:16px;font-weight:800;color:var(--p-navy);margin:2px 0 4px;letter-spacing:-.3px;line-height:1.25}
.hjc-app .fcs-card__role{position:relative;z-index:3;font-size:11px;font-weight:800;color:var(--orange);letter-spacing:.55px;text-transform:uppercase;margin-bottom:12px}

/* subjects */
.hjc-app .fcs-card__subjects{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:10px}
.hjc-app .fcs-card__subjects>span{font-size:10.5px;font-weight:600;color:var(--gray-700);background:rgba(255,255,255,.7);padding:3px 10px;border-radius:999px;border:1px solid var(--gray-200);backdrop-filter:blur(6px)}

/* stat chips — glass with hover lift */
.hjc-app .fcs-card__stats{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px}
.hjc-app .fcs-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--p-navy);
  background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
  padding:5px 11px;border-radius:999px;border:1px solid rgba(10,199,229,.28);line-height:1.1;white-space:nowrap;
  box-shadow:0 2px 6px rgba(11,31,58,.06);
  transition:transform .25s var(--p-ease),box-shadow .25s,background .25s,border-color .25s}
.hjc-app .fcs-chip:hover{transform:translateY(-2px);background:#fff;border-color:rgba(10,199,229,.55);box-shadow:0 10px 20px -10px rgba(10,199,229,.45)}
.hjc-app .fcs-chip svg{width:11px;height:11px;color:var(--orange)}
.hjc-app .fcs-chip--star{background:linear-gradient(120deg,#E6F9FD,#C9F1F9);color:#0B45AB;border-color:rgba(11,69,171,.35)}
.hjc-app .fcs-chip--star:hover{background:#E6F9FD}

/* tagline */
.hjc-app .fcs-card__tagline{position:relative;z-index:3;font-size:13px;color:var(--gray-600);line-height:1.55;text-align:center;margin:0 0 18px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-style:normal}

/* CTA — premium gradient pill with shine sweep */
.hjc-app .fcs-card__cta{position:relative;z-index:3;margin-top:auto;display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.3px;color:#fff;align-self:center;
  background:linear-gradient(135deg,var(--p-orange),#5AD9EF);
  box-shadow:0 10px 22px -8px rgba(10,199,229,.65);
  overflow:hidden;isolation:isolate;
  transition:transform .3s var(--p-ease),box-shadow .3s,filter .3s}
.hjc-app .fcs-card__cta svg{width:14px;height:14px;transition:transform .3s var(--p-ease)}
.hjc-app .fcs-card__cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-130%) skewX(-18deg)}
.hjc-app .fcs-card:hover .fcs-card__cta{transform:translateY(-2px) scale(1.04);box-shadow:0 16px 30px -10px rgba(10,199,229,.85);filter:brightness(1.06)}
.hjc-app .fcs-card:hover .fcs-card__cta svg{transform:translateX(3px)}
.hjc-app .fcs-card:hover .fcs-card__cta::before{animation:p-shine 1s ease}

/* loading skeleton */
.hjc-app .fcs-skel{padding:34px 22px 24px;border-radius:22px;background:rgba(255,255,255,.7);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 50px -28px rgba(11,31,58,.4)}

/* mobile photo scaling */
@media(max-width:639px){.hjc-app .fcs-card__photo-wrap{width:140px;height:140px}.hjc-app .fcs-card{padding:30px 20px 22px}}
@media(min-width:640px) and (max-width:1023px){.hjc-app .fcs-card__photo-wrap{width:152px;height:152px}}

/* desktop: bump the photo a touch */
@media(min-width:1024px){
  .hjc-app .fcs-card__photo-wrap{width:160px;height:160px}
}

/* ── floating decorations: book / cap / pencil / open-book / star ── */
.hjc-app .fcs-deco{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hjc-app .fcs-deco__item{position:absolute;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 12px 26px -12px rgba(11,31,58,.18);
  animation:fcs-deco-float 9s ease-in-out infinite}
.hjc-app .fcs-deco__item svg{width:24px;height:24px}
@keyframes fcs-deco-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(6deg)}}
.hjc-app .fcs-deco__item--1{top:32%;left:3.5%;color:var(--p-orange);animation-delay:-1.2s}
.hjc-app .fcs-deco__item--2{top:54%;left:6%;color:var(--p-green);animation-duration:11s;animation-delay:-3.4s}
.hjc-app .fcs-deco__item--3{top:62%;right:6%;color:var(--p-royal);animation-duration:10s;animation-delay:-5.1s}
.hjc-app .fcs-deco__item--4{top:36%;right:3.5%;color:var(--p-orange);animation-delay:-2.6s;animation-duration:12s}
.hjc-app .fcs-deco__item--5{top:18%;left:48%;color:#f59e0b;animation-duration:8s;animation-delay:-4s;width:38px;height:38px}
.hjc-app .fcs-deco__item--5 svg{width:18px;height:18px}
.hjc-app .fcs-deco__item--6{display:none}
@media(max-width:1023px){.hjc-app .fcs-deco__item--1,.hjc-app .fcs-deco__item--2,.hjc-app .fcs-deco__item--3,.hjc-app .fcs-deco__item--4{width:38px;height:38px}
  .hjc-app .fcs-deco__item svg{width:18px;height:18px}}
@media(max-width:639px){.hjc-app .fcs-deco{opacity:.6}}

/* ── pagination dots under the carousel ── */
.hjc-app .fcs-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:18px;height:14px}
.hjc-app .fcs-dot{width:8px;height:8px;border-radius:50%;background:var(--gray-300);cursor:pointer;border:0;padding:0;
  transition:transform .25s var(--p-ease),background .25s,width .25s var(--p-ease)}
.hjc-app .fcs-dot:hover{background:var(--gray-400);transform:scale(1.2)}
.hjc-app .fcs-dot.is-active{background:linear-gradient(135deg,var(--p-orange),#5AD9EF);width:26px;border-radius:5px;box-shadow:0 4px 10px -3px rgba(10,199,229,.55)}

/* stronger gradient border on cards to match the reference */
.hjc-app .fcs-card::before{opacity:.55;background:linear-gradient(135deg,var(--p-orange) 0%,#5AD9EF 30%,var(--p-royal) 70%,#2563eb 100%);padding:2px}
.hjc-app .fcs-card:hover::before{opacity:1}

/* ============================================================
   STATS / HIGHLIGHTS (glow KPI)
   ============================================================ */
.hjc-app .highlights-grid{gap:clamp(16px,2.4vw,24px)}
.hjc-app .highlight-item{
  position:relative;overflow:hidden;padding:34px 22px;border-radius:20px;
  background:linear-gradient(180deg,#fff,#f6f9ff);border:1px solid var(--gray-200);
  box-shadow:0 1px 2px rgba(11,31,58,.04);transition:transform .4s var(--p-ease),box-shadow .4s}
.hjc-app .highlight-item::before{content:"";position:absolute;top:-50px;left:50%;transform:translateX(-50%);width:160px;height:120px;
  background:radial-gradient(circle,rgba(10,199,229,.18),transparent 70%)}
.hjc-app .highlight-item:hover{transform:translateY(-6px);box-shadow:var(--p-shadow)}
.hjc-app .highlight-item__number{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-1px;
  background:linear-gradient(120deg,var(--p-orange),#5AD9EF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hjc-app .highlight-item__label{font-size:13.5px;color:var(--gray-600);margin-top:6px;font-weight:500}

/* ============================================================
   TESTIMONIALS — auto-scroll marquee, glass cards
   ============================================================ */
.hjc-app .tm-marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hjc-app .tm-track{display:flex;gap:18px;width:max-content;animation:p-marquee 42s linear infinite}
.hjc-app .tm-marquee:hover .tm-track{animation-play-state:paused}
.hjc-app .tm-card{
  flex:0 0 auto;width:min(380px,82vw);padding:26px 24px;border-radius:20px;
  background:linear-gradient(180deg,#fff,#f7faff);border:1px solid var(--gray-200);box-shadow:0 14px 36px -22px rgba(11,31,58,.4);
  position:relative;overflow:hidden}
/* was font-family:Georgia,serif — the site now uses a single typeface, so this
   decorative quote glyph renders in Manrope like everything else */
.hjc-app .tm-card__quote{position:absolute;top:10px;right:16px;font-family:inherit;font-size:78px;line-height:1;color:rgba(10,199,229,.16)}
.hjc-app .tm-card__stars{color:#0AC7E5;font-size:14px;letter-spacing:2px;margin-bottom:10px}
.hjc-app .tm-card__text{font-size:14.5px;color:var(--gray-700);line-height:1.65;font-style:italic;position:relative;z-index:1}
.hjc-app .tm-card__author{display:flex;align-items:center;gap:12px;margin-top:18px}
.hjc-app .tm-card__avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;flex-shrink:0;box-shadow:0 6px 14px -6px rgba(11,31,58,.5)}
.hjc-app .tm-card__name{font-size:14px;font-weight:700;color:var(--p-navy)}
.hjc-app .tm-card__score{font-size:12px;color:var(--orange);font-weight:600}

/* ============================================================
   BLOG TILES
   ============================================================ */
.hjc-app .blog-grid{gap:clamp(14px,2vw,22px)}
.hjc-app .blog-tile{border-radius:18px;overflow:hidden;border:1px solid var(--gray-200);background:#fff;
  transition:transform .4s var(--p-ease),box-shadow .4s var(--p-ease)}
.hjc-app .blog-tile:hover{transform:translateY(-7px);box-shadow:var(--p-shadow)}
.hjc-app .blog-tile__image{height:140px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff}
.hjc-app .blog-tile__image svg{width:42px;height:42px;position:relative;z-index:1;transition:transform .5s var(--p-ease)}
.hjc-app .blog-tile:hover .blog-tile__image svg{transform:scale(1.15) rotate(-4deg)}
.hjc-app .blog-tile__image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.18))}
.hjc-app .blog-tile__body{padding:16px}
.hjc-app .blog-tile__title{font-size:14px;font-weight:700;color:var(--p-navy);line-height:1.45}
.hjc-app .blog-tile__date{font-size:11.5px;color:var(--gray-400);margin-top:8px;display:flex;align-items:center;gap:5px}
.hjc-app .blog-tile__date svg{width:13px;height:13px}

/* ============================================================
   MAP
   ============================================================ */
.hjc-app .map-container{border-radius:22px;height:360px;box-shadow:var(--p-shadow);border:1px solid var(--gray-200);position:relative}
.hjc-app .map-container::after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.hjc-app .map-container iframe{filter:grayscale(.2) contrast(1.05)}

/* ============================================================
   CTA BANNER
   ============================================================ */
.hjc-app .cta-banner{position:relative;overflow:hidden;isolation:isolate;padding:clamp(32px,3.6vw,52px) 20px;
  background:linear-gradient(120deg,#0AC7E5,#5AD9EF,#0AC7E5);background-size:200% 200%;animation:p-grad 12s ease infinite;color:#fff}
.hjc-app .cta-banner::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(40% 80% at 15% 50%,rgba(255,255,255,.22),transparent 60%),radial-gradient(40% 80% at 85% 30%,rgba(11,31,58,.22),transparent 60%)}
.hjc-app .cta-banner h2{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.6px;margin-bottom:10px}
.hjc-app .cta-banner p a{font-weight:700}
.hjc-app .cta-banner .btn-primary{background:#fff;color:var(--orange);box-shadow:0 16px 34px -14px rgba(0,0,0,.5)}
.hjc-app .cta-banner .btn-primary:hover{background:#fff;transform:translateY(-3px) scale(1.03);color:var(--orange-dark)}

/* ============================================================
   FOOTER
   ============================================================ */
.hjc-app .footer{position:relative;background:linear-gradient(180deg,#082B73,#081726);padding-top:clamp(28px,3.4vw,44px)}
.hjc-app .footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--p-orange),var(--p-royal),var(--p-green),var(--p-orange));background-size:200% 100%;animation:p-grad 8s linear infinite}
.hjc-app .footer__newsletter{background:rgba(255,255,255,.05);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:20px;box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
.hjc-app .footer__newsletter-text h4{display:flex;align-items:center;gap:8px}
.hjc-app .footer__newsletter-text h4 svg{width:18px;height:18px;color:var(--p-orange2)}
.hjc-app .footer__newsletter-form .btn-primary{background:linear-gradient(135deg,var(--p-orange),#5AD9EF)}
.hjc-app .footer__col h4{position:relative;padding-bottom:8px}
.hjc-app .footer__col a{position:relative;width:fit-content;transition:color .2s,transform .2s,padding-left .2s}
.hjc-app .footer__col a:hover{color:#fff;transform:translateX(3px)}
.hjc-app .footer__phones a,.hjc-app .footer__col a[href^="mailto"]{display:inline-flex;align-items:center;gap:7px}
.hjc-app .footer__phones svg,.hjc-app .footer__col a[href^="mailto"] svg{width:14px;height:14px;color:var(--p-orange2)}
.hjc-app .footer__bottom a{color:var(--p-orange2)}

/* ============================================================
   FLOATING DOCK
   ============================================================ */
.hjc-app .floating-btns{right:16px;bottom:24px;gap:12px;padding:8px;border-radius:999px;
  background:rgba(255,255,255,.65);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 40px -18px rgba(11,31,58,.5)}
.hjc-app .float-btn{position:relative;width:50px;height:50px;border-radius:50%;box-shadow:0 10px 22px -10px rgba(0,0,0,.5);
  transition:transform .3s var(--p-ease),box-shadow .3s}
.hjc-app .float-btn:hover{transform:translateY(-3px) scale(1.08)}
.hjc-app .float-btn--call{background:linear-gradient(135deg,#0B45AB,#082B73)}
.hjc-app .float-btn--whatsapp{background:linear-gradient(135deg,#25D366,#128C7E);animation:p-pulseGlow 2.6s ease infinite}
.hjc-app .float-btn--telegram{background:linear-gradient(135deg,#37AEE2,#1E96C8)}
.hjc-app .float-btn__label{position:absolute;right:62px;top:50%;transform:translateY(-50%) translateX(8px);white-space:nowrap;
  background:var(--p-navy);color:#fff;font-size:12px;font-weight:600;padding:6px 11px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:var(--p-shadow)}
.hjc-app .float-btn__label::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:var(--p-navy)}
.hjc-app .float-btn:hover .float-btn__label{opacity:1;transform:translateY(-50%) translateX(0)}

/* ============================================================
   FOMO TOAST (glass)
   ============================================================ */
/* ── FOMO toast: very small / minimal ── */
.hjc-app .fomo-toast{left:14px;bottom:84px;max-width:230px;padding:8px 36px 9px 10px;gap:8px;border-radius:12px;border-left:none;
  background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 14px 36px -18px rgba(11,31,58,.45);overflow:hidden;animation:p-fomoIn .5s var(--p-ease)}
@keyframes p-fomoIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.hjc-app .fomo-toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#0B45AB,#0AC7E5)}
.hjc-app .fomo-toast::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;transform-origin:left;
  background:linear-gradient(90deg,#0B45AB,#0AC7E5);animation:p-fomoBar 6s linear infinite}
.hjc-app .fomo-toast__ico{width:26px;height:26px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#0AC7E5,#0AA9C4)}
.hjc-app .fomo-toast__ico svg{width:14px;height:14px}
.hjc-app .fomo-toast__text{font-size:11px;line-height:1.35}
.hjc-app .fomo-toast__time{font-size:9.5px;display:flex;align-items:center;gap:3px;margin-top:1px}
.hjc-app .fomo-toast__time svg{width:10px;height:10px;flex-shrink:0}
/* Glass-matched dismiss chip. Kept above the ::before accent rail and the ::after
   progress bar so the tap always lands on the button. */
.hjc-app .fomo-toast__close{top:5px;right:5px;z-index:2;width:26px;height:26px;padding:0;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(11,31,58,.06);border:1px solid rgba(11,31,58,.10);color:var(--gray-500);
  transition:background .2s,color .2s,transform .25s var(--p-ease)}
.hjc-app .fomo-toast__close:hover{background:rgba(11,31,58,.13);color:var(--navy);transform:rotate(90deg)}
.hjc-app .fomo-toast__close:active{transform:scale(.92)}

/* ============================================================
   ENQUIRY MODAL
   ============================================================ */
.hjc-app .enquiry-modal{border-radius:20px;box-shadow:var(--p-shadow-lg);animation:p-modalIn .3s var(--p-ease);position:relative}
@keyframes p-modalIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.hjc-app .enquiry-modal__header{background:linear-gradient(135deg,#082B73,#0A5BCF);position:relative;overflow:hidden}
.hjc-app .enquiry-modal__header::after{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 30% 20%,rgba(10,199,229,.4),transparent 55%);animation:p-grad 10s ease infinite;pointer-events:none}
/* ── close button: bring above the gradient header + soft glass hover ── */
.hjc-app .enquiry-modal__close{position:absolute;top:12px;right:12px;z-index:5;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.18);
  color:#fff;font-size:16px;cursor:pointer;line-height:1;backdrop-filter:blur(6px);transition:background .2s,transform .25s var(--p-ease),border-color .2s}
.hjc-app .enquiry-modal__close:hover{background:rgba(255,255,255,.35);border-color:rgba(255,255,255,.6);transform:rotate(90deg)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .hjc-app .course-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .hjc-app .hero__stats{gap:10px}
  .hjc-app .hero__stats .stat{min-width:0;flex:1 1 30%;padding:14px 10px}
  .hjc-app .mode-grid{grid-template-columns:1fr}
  .hjc-app .blog-grid{grid-template-columns:1fr 1fr}
  .hjc-app .floating-btns{flex-direction:column}
}
@media(max-width:560px){
  .hjc-app .course-grid{grid-template-columns:1fr}
  .hjc-app .hero__course-btn{min-width:0;width:100%}
  .hjc-app .blog-grid{grid-template-columns:1fr}
  /* Mobile placement: 16px off the bottom, 12px off the left, auto width capped at
     320px — and never wider than the space left of the floating action buttons. */
  .hjc-app .fomo-toast{left:12px;right:auto;bottom:16px;width:auto;max-width:min(320px,calc(100vw - 84px));
    padding:9px 38px 10px 10px;border-radius:14px;box-shadow:0 12px 32px -14px rgba(11,31,58,.42)}
  .hjc-app .fomo-toast__close{top:6px;right:6px;width:30px;height:30px;font-size:13px}
}

/* ============================================================
   FLOATING GLASS NAVBAR — ultra-premium card treatment
   (overrides the earlier header rules; later in cascade)
   ============================================================ */
.hjc-app .header{position:sticky;top:0;z-index:100;background:transparent;border:none;box-shadow:none;
  padding:10px clamp(12px,3vw,28px);transition:transform .42s var(--p-ease),padding .32s var(--p-ease)}
.hjc-app .header::after{display:none}
.hjc-app .header__inner{position:relative;max-width:1200px;height:64px;padding:0 14px 0 10px;border-radius:18px;gap:8px;
  background:rgba(255,255,255,.72);backdrop-filter:saturate(190%) blur(20px);border:1px solid rgba(255,255,255,.55);
  box-shadow:0 20px 50px -26px rgba(7,20,38,.55),inset 0 1px 0 rgba(255,255,255,.7);
  transition:height .32s var(--p-ease),background .32s,box-shadow .32s}
/* animated gradient border (masked) */
.hjc-app .header__inner::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1.5px;pointer-events:none;opacity:.6;
  background:linear-gradient(120deg,var(--p-orange),var(--p-royal),var(--p-green),var(--p-orange));background-size:300% 100%;animation:p-grad 9s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* ambient glow */
.hjc-app .header__inner::after{content:"";position:absolute;inset:0;border-radius:18px;z-index:-1;pointer-events:none;
  box-shadow:0 0 50px -6px rgba(255,122,24,.22),0 0 60px -12px rgba(11,69,171,.18)}

/* scroll: shrink + hide-on-down / reveal-on-up */
.hjc-app .header.is-scrolled{padding:6px clamp(12px,3vw,28px);background:transparent;box-shadow:none;backdrop-filter:none}
.hjc-app .header.is-scrolled .header__inner{height:58px;background:rgba(255,255,255,.86);box-shadow:0 24px 54px -28px rgba(7,20,38,.78),inset 0 1px 0 rgba(255,255,255,.7)}
.hjc-app .header.is-hidden{transform:translateY(-140%)}

/* logo plate + shine sweep */
.hjc-app .header__logo{position:relative;overflow:hidden;border-radius:12px;padding:3px 8px;transition:background .3s}
.hjc-app .header__logo:hover{background:rgba(11,69,171,.06)}
.hjc-app .header__logo::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-130%) skewX(-18deg)}
.hjc-app .header__logo:hover::after{animation:p-shine 1.1s ease}

/* expanding glass search */
.hjc-app .header__search{display:flex;align-items:center}
.hjc-app .header__search-input{width:0;opacity:0;height:40px;padding:0;border:none;outline:none;background:var(--gray-100);border-radius:999px;font-size:13.5px;color:var(--p-navy);
  transition:width .35s var(--p-ease),opacity .25s,padding .35s var(--p-ease),box-shadow .25s}
.hjc-app .header__search.is-open .header__search-input{width:clamp(150px,18vw,230px);opacity:1;padding:0 16px;margin-right:4px;box-shadow:0 0 0 3px rgba(11,69,171,.14),inset 0 0 0 1px var(--gray-200)}
.hjc-app .header__search.is-open .header__search-input:focus{box-shadow:0 0 0 3px rgba(10,199,229,.22),inset 0 0 0 1px var(--p-orange)}
.hjc-app .header__search.is-open .header__search-btn{color:var(--p-royal);background:rgba(11,69,171,.08)}

/* dropdown rows: leading dot that grows on hover */
.hjc-app .hnav-drop__link{display:flex;align-items:center;gap:9px}
.hjc-app .hnav-drop__link::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gray-300);flex-shrink:0;transition:background .2s,transform .2s}
.hjc-app .hnav-drop__link:hover::before{background:var(--p-orange);transform:scale(1.5)}

/* ============================================================
   PREMIUM SHOPPING CART
   ============================================================ */
.hjc-app .cart-pro{position:relative;min-height:80vh;isolation:isolate;
  background:radial-gradient(120% 80% at 50% 0%,rgba(11,69,171,.06),transparent 60%),linear-gradient(180deg,#f7fafd,#eef3fb)}
.hjc-app .cart-pro::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(circle at 18% 12%,rgba(10,199,229,.07),transparent 55%),
             radial-gradient(circle at 82% 88%,rgba(11,69,171,.08),transparent 55%)}
.hjc-app .cart-pro__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hjc-app .cart-pro__blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45}
.hjc-app .cart-pro__blob--blue{width:380px;height:380px;left:-100px;top:6%;background:radial-gradient(circle,#a8c5ff,transparent 70%);animation:p-floatBlob 20s ease-in-out infinite}
.hjc-app .cart-pro__blob--orange{width:340px;height:340px;right:-100px;bottom:-80px;background:radial-gradient(circle,#A8E9F5,transparent 70%);animation:p-floatBlob 24s ease-in-out infinite reverse}

.hjc-app .cart-pro__inner{max-width:1320px;margin:0 auto;padding:24px clamp(16px,3vw,32px) 56px;position:relative;z-index:1}

/* breadcrumb */
.hjc-app .cart-pro__bc{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--gray-500);margin-bottom:14px;flex-wrap:wrap}
.hjc-app .cart-pro__bc a{color:var(--gray-500);text-decoration:none;transition:color .2s}
.hjc-app .cart-pro__bc a:hover{color:var(--orange)}
.hjc-app .cart-pro__bc-current{color:var(--p-navy);font-weight:600}

/* page header */
.hjc-app .cart-pro__header{margin-bottom:28px}
.hjc-app .cart-pro__title{display:inline-flex;align-items:center;gap:14px;font-size:clamp(28px,4vw,42px);font-weight:900;letter-spacing:-1px;color:var(--p-navy);line-height:1.1;margin:0}
.hjc-app .cart-pro__title svg{width:34px;height:34px;color:var(--orange);flex-shrink:0;padding:8px;background:linear-gradient(135deg,#E6F9FD,#C9F1F9);border-radius:14px;box-sizing:content-box;border:1px solid rgba(10,199,229,.25);box-shadow:0 6px 18px -6px rgba(10,199,229,.4)}
.hjc-app .cart-pro__sub{font-size:15.5px;color:var(--gray-500);margin:10px 0 0;max-width:640px;line-height:1.6}

/* 2-column layout */
.hjc-app .cart-pro__layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,32%,400px);gap:clamp(20px,2.5vw,32px);align-items:start;animation:p-fadeUp .5s var(--p-ease) both}
@keyframes p-fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:1023px){.hjc-app .cart-pro__layout{grid-template-columns:1fr}}

.hjc-app .cart-pro__left{display:flex;flex-direction:column;gap:16px;min-width:0}
.hjc-app .cart-pro__count{font-size:13.5px;color:var(--gray-500);padding:0 4px}
.hjc-app .cart-pro__count strong{color:var(--p-navy);font-weight:800}

/* ── cart-item card (glass premium) ── */
.hjc-app .cart-pro__item{position:relative;display:grid;grid-template-columns:130px minmax(0,1fr);gap:20px;
  padding:22px;border-radius:24px;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(18px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 16px 40px -22px rgba(11,31,58,.4),inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .35s var(--p-ease),box-shadow .35s,border-color .35s,background .35s;
  overflow:hidden;isolation:isolate}
.hjc-app .cart-pro__item::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(135deg,var(--p-orange),var(--p-royal));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:3}
.hjc-app .cart-pro__item:hover{transform:translateY(-3px);box-shadow:0 24px 52px -22px rgba(11,31,58,.55),inset 0 1px 0 rgba(255,255,255,.9);border-color:transparent;background:rgba(255,255,255,.94)}
.hjc-app .cart-pro__item:hover::before{opacity:.55}

/* item thumbnail */
.hjc-app .cart-pro__item-thumb{position:relative;width:130px;height:130px;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,#082B73,#0A5BCF);display:flex;align-items:center;justify-content:center}
.hjc-app .cart-pro__item-thumb--inter{background:linear-gradient(135deg,#0B45AB,#0A5BCF)}
.hjc-app .cart-pro__item-thumb--final{background:linear-gradient(135deg,#0A5BCF,#3D9BE9)}
.hjc-app .cart-pro__item-thumb--books{background:linear-gradient(135deg,#082B73,#0A5BCF)}
.hjc-app .cart-pro__item-thumb-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:18px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);color:#fff;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .4s var(--p-ease)}
.hjc-app .cart-pro__item:hover .cart-pro__item-thumb-icon{transform:scale(1.08) rotate(-3deg)}
.hjc-app .cart-pro__item-thumb-icon svg{width:32px;height:32px}
.hjc-app .cart-pro__item-qty{position:absolute;bottom:8px;right:8px;background:linear-gradient(135deg,var(--p-orange),#5AD9EF);color:#fff;
  font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;box-shadow:0 6px 14px -4px rgba(10,199,229,.6);letter-spacing:.3px}

/* item body */
.hjc-app .cart-pro__item-body{display:flex;flex-direction:column;gap:6px;min-width:0;padding-right:36px}
.hjc-app .cart-pro__item-level{font-size:10.5px;font-weight:800;color:var(--orange);text-transform:uppercase;letter-spacing:1.2px;line-height:1}
.hjc-app .cart-pro__item-title{font-size:16px;font-weight:800;color:var(--p-navy);line-height:1.3;letter-spacing:-.2px;text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.hjc-app .cart-pro__item-title:hover{color:var(--p-royal)}
.hjc-app .cart-pro__item-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--gray-500);font-weight:500;margin-top:2px}
.hjc-app .cart-pro__item-by,.hjc-app .cart-pro__item-mode{display:inline-flex;align-items:center;gap:6px}
.hjc-app .cart-pro__item-by svg{width:14px;height:14px;color:var(--gray-400)}
.hjc-app .cart-pro__item-mode svg{width:14px;height:14px;color:var(--orange)}
.hjc-app .cart-pro__item-attrs{font-size:12px;color:var(--gray-500);margin:0;font-style:italic}

/* pricing */
.hjc-app .cart-pro__item-pricing{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-top:6px}
.hjc-app .cart-pro__item-price{font-size:22px;font-weight:900;letter-spacing:-.4px;line-height:1;
  background:linear-gradient(120deg,var(--p-navy),var(--p-royal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hjc-app .cart-pro__item-mrp{font-size:14px;color:var(--gray-400);text-decoration:line-through;font-weight:600}
.hjc-app .cart-pro__item-disc{font-size:11px;font-weight:800;color:#0B45AB;background:linear-gradient(120deg,#E6F9FD,#C9F1F9);
  padding:3px 10px;border-radius:999px;border:1px solid rgba(11,69,171,.28);line-height:1.2;text-transform:uppercase;letter-spacing:.4px}
.hjc-app .cart-pro__item-save{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#0B45AB;margin-top:4px}
.hjc-app .cart-pro__item-save svg{width:12px;height:12px;color:#0AC7E5}

/* remove button */
.hjc-app .cart-pro__remove{position:absolute;top:14px;right:14px;z-index:5;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--gray-200);background:#fff;color:var(--gray-400);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -8px rgba(11,31,58,.3);
  transition:transform .25s var(--p-ease),color .25s,background .25s,border-color .25s,box-shadow .25s}
.hjc-app .cart-pro__remove svg{width:16px;height:16px}
.hjc-app .cart-pro__remove:hover{color:#dc2626;border-color:#fecaca;background:#fef2f2;transform:scale(1.1);box-shadow:0 10px 22px -8px rgba(220,38,38,.45)}

/* ── coupon panel ── */
.hjc-app .cart-pro__coupon{padding:22px;border-radius:24px;
  background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(18px);
  border:1px dashed rgba(10,199,229,.4);
  box-shadow:0 14px 36px -22px rgba(11,31,58,.35),inset 0 1px 0 rgba(255,255,255,.85)}
.hjc-app .cart-pro__coupon-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.hjc-app .cart-pro__coupon-icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(135deg,var(--p-orange),#5AD9EF);flex-shrink:0;
  box-shadow:0 10px 22px -6px rgba(10,199,229,.55)}
.hjc-app .cart-pro__coupon-icon svg{width:22px;height:22px}
.hjc-app .cart-pro__coupon-head h3{font-size:15px;font-weight:800;color:var(--p-navy);margin:0;letter-spacing:-.2px}
.hjc-app .cart-pro__coupon-head p{font-size:12.5px;color:var(--gray-500);margin:2px 0 0}
.hjc-app .cart-pro__coupon-row{display:flex;gap:10px;flex-wrap:wrap}
.hjc-app .cart-pro__coupon-input{flex:1;min-width:200px;padding:13px 16px;border-radius:13px;font-size:14px;font-weight:600;
  border:1.5px solid var(--gray-200);background:#fff;color:var(--p-navy);outline:none;letter-spacing:.5px;text-transform:uppercase;
  transition:border-color .2s,box-shadow .2s}
.hjc-app .cart-pro__coupon-input::placeholder{font-weight:500;color:var(--gray-400);text-transform:none;letter-spacing:normal}
.hjc-app .cart-pro__coupon-input:focus{border-color:var(--p-orange);box-shadow:0 0 0 3px rgba(10,199,229,.18)}
.hjc-app .cart-pro__coupon-apply{display:inline-flex;align-items:center;gap:6px;padding:13px 22px;border-radius:13px;
  background:linear-gradient(135deg,var(--p-orange),#5AD9EF);color:#fff;font-weight:800;font-size:14px;letter-spacing:.3px;
  border:none;cursor:pointer;box-shadow:0 10px 22px -8px rgba(10,199,229,.55);
  overflow:hidden;position:relative;isolation:isolate;
  transition:transform .25s var(--p-ease),box-shadow .25s,filter .25s}
.hjc-app .cart-pro__coupon-apply svg{width:14px;height:14px;transition:transform .25s}
.hjc-app .cart-pro__coupon-apply::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-130%) skewX(-18deg)}
.hjc-app .cart-pro__coupon-apply:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(10,199,229,.7);filter:brightness(1.05)}
.hjc-app .cart-pro__coupon-apply:hover svg{transform:translateX(3px)}
.hjc-app .cart-pro__coupon-apply:hover::before{animation:p-shine 1s ease}

.hjc-app .cart-pro__coupon-msg{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:600;padding:8px 14px;border-radius:11px;line-height:1.4}
.hjc-app .cart-pro__coupon-msg svg{width:16px;height:16px;flex-shrink:0}
.hjc-app .cart-pro__coupon-msg--ok{color:#0B45AB;background:#E6F9FD;border:1px solid rgba(11,69,171,.3)}
.hjc-app .cart-pro__coupon-msg--err{color:#b91c1c;background:#fee2e2;border:1px solid rgba(220,38,38,.3)}

/* ── order summary (sticky) ── */
.hjc-app .cart-pro__summary{position:sticky;top:96px;display:flex;flex-direction:column;padding:24px;border-radius:24px;
  background:rgba(255,255,255,.90);backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 22px 50px -26px rgba(11,31,58,.5),inset 0 1px 0 rgba(255,255,255,.85)}
@media(max-width:1023px){.hjc-app .cart-pro__summary{position:relative;top:0}}
.hjc-app .cart-pro__summary-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--gray-100)}
.hjc-app .cart-pro__summary-head h3{font-size:17px;font-weight:800;color:var(--p-navy);margin:0;letter-spacing:-.2px}
.hjc-app .cart-pro__summary-count{font-size:12.5px;color:var(--gray-500);font-weight:600}

.hjc-app .cart-pro__rows{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.hjc-app .cart-pro__row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.hjc-app .cart-pro__row .label{color:var(--gray-600);font-weight:500}
.hjc-app .cart-pro__row .label small{color:var(--gray-400);font-weight:500}
.hjc-app .cart-pro__row .value{font-weight:700;color:var(--p-navy)}
.hjc-app .cart-pro__row--ok .value{color:#0B45AB}
.hjc-app .cart-pro__row code{font-family:inherit;font-size:11px;font-weight:800;color:#0B45AB;background:#E6F9FD;padding:2px 8px;border-radius:6px;margin-left:6px;letter-spacing:.4px}

.hjc-app .cart-pro__total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 0;border-top:2px solid var(--gray-100);border-bottom:1px solid var(--gray-100)}
.hjc-app .cart-pro__total-label{font-size:15px;font-weight:800;color:var(--p-navy)}
.hjc-app .cart-pro__total-value{font-size:30px;font-weight:900;letter-spacing:-.6px;line-height:1;
  background:linear-gradient(120deg,var(--p-navy),var(--p-royal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* savings success box */
.hjc-app .cart-pro__save-box{display:flex;align-items:center;gap:13px;margin:14px 0 0;padding:14px 16px;border-radius:16px;
  background:linear-gradient(135deg,#E6F9FD,#C9F1F9);border:1px solid rgba(11,69,171,.24);
  box-shadow:0 10px 22px -10px rgba(11,69,171,.35);
  animation:p-savePulse 2.4s ease-in-out infinite}
@keyframes p-savePulse{0%,100%{box-shadow:0 10px 22px -10px rgba(11,69,171,.35)}50%{box-shadow:0 14px 28px -8px rgba(11,69,171,.55)}}
.hjc-app .cart-pro__save-ico{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(135deg,#0AC7E5,#0B45AB);flex-shrink:0}
.hjc-app .cart-pro__save-ico svg{width:18px;height:18px}
.hjc-app .cart-pro__save-box strong{display:block;font-size:13.5px;font-weight:800;color:#0B45AB;line-height:1.2}
.hjc-app .cart-pro__save-box span{display:block;font-size:12.5px;color:#0A3A8F;font-weight:500;line-height:1.4;margin-top:2px}
.hjc-app .cart-pro__save-box b{font-weight:800}

/* checkout CTA */
.hjc-app .cart-pro__checkout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:58px;
  margin-top:16px;border-radius:18px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--p-orange),#5AD9EF);color:#fff;
  font-size:15.5px;font-weight:800;letter-spacing:.3px;
  box-shadow:0 16px 30px -10px rgba(10,199,229,.65);
  overflow:hidden;position:relative;isolation:isolate;
  transition:transform .3s var(--p-ease),box-shadow .3s,filter .3s}
.hjc-app .cart-pro__checkout svg{width:18px;height:18px;transition:transform .3s var(--p-ease)}
.hjc-app .cart-pro__checkout::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-130%) skewX(-18deg)}
.hjc-app .cart-pro__checkout::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(10,199,229,.6);animation:p-ctaPulse 2.2s ease-in-out infinite}
@keyframes p-ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(10,199,229,.5)}50%{box-shadow:0 0 0 14px rgba(10,199,229,0)}}
.hjc-app .cart-pro__checkout:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 22px 38px -12px rgba(10,199,229,.85);filter:brightness(1.06)}
.hjc-app .cart-pro__checkout:hover svg{transform:translateX(5px)}
.hjc-app .cart-pro__checkout:hover::before{animation:p-shine 1s ease}

.hjc-app .cart-pro__continue{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 6px;
  color:var(--gray-500);font-size:13px;font-weight:600;text-decoration:none;transition:color .2s,gap .2s}
.hjc-app .cart-pro__continue svg{width:14px;height:14px;transition:transform .25s}
.hjc-app .cart-pro__continue:hover{color:var(--p-navy);gap:9px}
.hjc-app .cart-pro__continue:hover svg{transform:translateX(-3px)}

/* trust strip */
.hjc-app .cart-pro__trust{display:flex;flex-direction:column;gap:7px;margin-top:16px;padding-top:14px;border-top:1px solid var(--gray-100)}
.hjc-app .cart-pro__trust-item{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--gray-600);font-weight:600}
.hjc-app .cart-pro__trust-item svg{width:15px;height:15px;color:#0AC7E5;flex-shrink:0}

/* payment logos */
.hjc-app .cart-pro__pay{margin-top:14px;padding-top:14px;border-top:1px solid var(--gray-100)}
.hjc-app .cart-pro__pay-label{display:block;font-size:11px;color:var(--gray-400);font-weight:700;text-transform:uppercase;letter-spacing:1.4px;margin-bottom:10px}
.hjc-app .cart-pro__pay-logos{display:flex;flex-wrap:wrap;gap:6px}
.hjc-app .cart-pro__pay-logo{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.4px;
  padding:5px 11px;border-radius:7px;background:#fff;border:1px solid var(--gray-200);color:var(--gray-700);
  box-shadow:0 2px 5px rgba(11,31,58,.04);transition:transform .2s,box-shadow .2s}
.hjc-app .cart-pro__pay-logo:hover{transform:translateY(-1px);box-shadow:0 6px 14px -4px rgba(11,31,58,.18)}
.hjc-app .cart-pro__pay-logo--rzp{color:#072654;background:linear-gradient(120deg,#fff,#eef3ff);border-color:#c9d8ff}
.hjc-app .cart-pro__pay-logo--upi{color:#0B45AB;background:linear-gradient(120deg,#fff,#E6F9FD);border-color:#9DDFEF}
.hjc-app .cart-pro__pay-logo--visa{color:#1a1f71;background:linear-gradient(120deg,#fff,#eef0ff);border-color:#c0c5e8}
.hjc-app .cart-pro__pay-logo--mc{color:#cc0000;background:linear-gradient(120deg,#fff,#ffeded);border-color:#f4b4b4}
.hjc-app .cart-pro__pay-logo--rupay{color:#b25b00;background:linear-gradient(120deg,#fff,#fff3e0);border-color:#f3c891}

/* ── empty / loading state ── */
.hjc-app .cart-pro__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;
  padding:60px clamp(20px,4vw,40px);border-radius:28px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 22px 50px -26px rgba(11,31,58,.4),inset 0 1px 0 rgba(255,255,255,.85);max-width:560px;margin:24px auto 0}
.hjc-app .cart-pro__empty-ico{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--orange);
  background:linear-gradient(135deg,#E6F9FD,#C9F1F9);border:1px solid rgba(10,199,229,.25);
  box-shadow:0 16px 36px -12px rgba(10,199,229,.5)}
.hjc-app .cart-pro__empty-ico svg{width:42px;height:42px}
.hjc-app .cart-pro__empty h2{font-size:24px;font-weight:800;color:var(--p-navy);letter-spacing:-.4px;margin:6px 0 0}
.hjc-app .cart-pro__empty p{font-size:14.5px;color:var(--gray-500);line-height:1.6;margin:0;max-width:420px}
.hjc-app .cart-pro__btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:14px;
  font-size:14px;font-weight:800;text-decoration:none;letter-spacing:.3px;
  transition:transform .25s var(--p-ease),box-shadow .25s,filter .25s;cursor:pointer;border:none}
.hjc-app .cart-pro__btn svg{width:16px;height:16px;transition:transform .25s}
.hjc-app .cart-pro__btn--primary{color:#fff;background:linear-gradient(135deg,var(--p-orange),#5AD9EF);
  box-shadow:0 14px 28px -10px rgba(10,199,229,.65)}
.hjc-app .cart-pro__btn--primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 34px -10px rgba(10,199,229,.8);filter:brightness(1.06)}
.hjc-app .cart-pro__btn--primary:hover svg{transform:translateX(3px)}

.hjc-app .cart-pro__loading{padding:30px;border-radius:24px;background:rgba(255,255,255,.85);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.7);margin-top:24px}

/* ── quantity stepper + line total ── */
.hjc-app .cart-pro__item-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--gray-200)}
.hjc-app .cart-pro__qtystepper{display:inline-flex;align-items:center;gap:0;padding:4px;
  background:linear-gradient(135deg,#fff,#f6f9ff);border:1.5px solid rgba(11,69,171,.25);border-radius:16px;
  box-shadow:0 6px 14px -8px rgba(11,69,171,.25);
  transition:border-color .25s,box-shadow .25s,opacity .25s}
.hjc-app .cart-pro__qtystepper:hover{border-color:rgba(10,199,229,.5);box-shadow:0 10px 22px -10px rgba(10,199,229,.4)}
.hjc-app .cart-pro__qtystepper.is-busy{opacity:.7;border-color:var(--gray-300)}
.hjc-app .cart-pro__qtybtn{width:34px;height:34px;border-radius:11px;border:0;background:transparent;color:var(--p-navy);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:transform .2s var(--p-ease),background .2s,color .2s}
.hjc-app .cart-pro__qtybtn svg{width:16px;height:16px}
.hjc-app .cart-pro__qtybtn:hover:not(:disabled){background:linear-gradient(135deg,var(--p-orange),#5AD9EF);color:#fff;transform:scale(1.08)}
.hjc-app .cart-pro__qtybtn:active:not(:disabled){transform:scale(.94)}
.hjc-app .cart-pro__qtybtn:disabled{opacity:.35;cursor:not-allowed}
.hjc-app .cart-pro__qtyval{min-width:38px;text-align:center;font-size:15px;font-weight:800;color:var(--p-navy);
  padding:0 6px;letter-spacing:-.3px;animation:p-qtypop .2s ease-out;display:flex;align-items:center;justify-content:center}
@keyframes p-qtypop{from{transform:scale(.85);opacity:.5}to{transform:scale(1);opacity:1}}
.hjc-app .cart-pro__qtyspin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(11,31,58,.2);border-top-color:var(--p-orange);animation:p-spin .7s linear infinite}
@keyframes p-spin{to{transform:rotate(360deg)}}

.hjc-app .cart-pro__item-line{display:flex;flex-direction:column;align-items:flex-end;gap:0;line-height:1.1}
.hjc-app .cart-pro__item-line .lbl{font-size:10.5px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:1px}
.hjc-app .cart-pro__item-line .val{font-size:19px;font-weight:900;letter-spacing:-.3px;
  background:linear-gradient(120deg,var(--p-navy),var(--p-royal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── coupon applied chip ── */
.hjc-app .cart-pro__coupon-active{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;
  background:linear-gradient(135deg,#E6F9FD,#C9F1F9);border:1px solid rgba(11,69,171,.28);
  box-shadow:0 12px 26px -12px rgba(22,163,74,.45);
  animation:p-couponIn .35s var(--p-ease) both}
@keyframes p-couponIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hjc-app .cart-pro__coupon-active-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(135deg,#0AC7E5,#0B45AB);flex-shrink:0;
  box-shadow:0 8px 18px -6px rgba(22,163,74,.55)}
.hjc-app .cart-pro__coupon-active-icon svg{width:20px;height:20px}
.hjc-app .cart-pro__coupon-active-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hjc-app .cart-pro__coupon-active-row{display:flex;align-items:center;gap:8px}
.hjc-app .cart-pro__coupon-active-label{font-size:11.5px;font-weight:800;color:#0B45AB;text-transform:uppercase;letter-spacing:1px;line-height:1}
.hjc-app .cart-pro__coupon-active-status{font-size:10.5px;font-weight:800;color:#fff;background:#0B45AB;padding:2px 8px;border-radius:6px;letter-spacing:.4px;line-height:1.2}
.hjc-app .cart-pro__coupon-active-code{font-size:18px;font-weight:900;color:#14532d;letter-spacing:1.5px;line-height:1.1;font-family:inherit}
.hjc-app .cart-pro__coupon-active-msg{font-size:12px;color:#0B45AB;font-weight:500;margin-top:1px}
.hjc-app .cart-pro__coupon-remove{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:11px;
  background:#fff;border:1px solid rgba(11,69,171,.32);color:#0B45AB;font-weight:700;font-size:12.5px;cursor:pointer;
  transition:transform .2s,background .2s,color .2s,border-color .2s,box-shadow .2s}
.hjc-app .cart-pro__coupon-remove svg{width:13px;height:13px}
.hjc-app .cart-pro__coupon-remove:hover{background:#dc2626;border-color:#dc2626;color:#fff;transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(220,38,38,.55)}

/* ── motivational nudge above the Checkout CTA ── */
.hjc-app .cart-pro__motivate{position:relative;display:flex;align-items:flex-start;gap:14px;
  margin:16px 0 0;padding:14px 16px;border-radius:16px;isolation:isolate;
  background:linear-gradient(135deg,rgba(255,247,237,.85),rgba(239,246,255,.85));backdrop-filter:saturate(180%) blur(10px);
  box-shadow:0 12px 26px -16px rgba(11,31,58,.35);
  transition:transform .3s var(--p-ease),box-shadow .3s var(--p-ease)}
/* soft orange → blue gradient border, masked */
.hjc-app .cart-pro__motivate::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,var(--p-orange) 0%,#5AD9EF 35%,#2563eb 100%);opacity:.55;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .3s}
.hjc-app .cart-pro__motivate:hover{transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(11,31,58,.5)}
.hjc-app .cart-pro__motivate:hover::before{opacity:.95}

/* rocket icon — floating + gentle pulse every ~3s */
.hjc-app .cart-pro__motivate-ico{width:38px;height:38px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--p-orange),#5AD9EF);
  box-shadow:0 10px 22px -8px rgba(10,199,229,.55);
  animation:p-rocketFloat 3.6s ease-in-out infinite,p-rocketPulse 3s ease-in-out infinite}
.hjc-app .cart-pro__motivate-ico svg{width:20px;height:20px;display:block}
@keyframes p-rocketFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes p-rocketPulse{0%,55%,100%{box-shadow:0 10px 22px -8px rgba(10,199,229,.55)}65%{box-shadow:0 10px 22px -8px rgba(10,199,229,.55),0 0 0 8px rgba(10,199,229,.18)}}

.hjc-app .cart-pro__motivate-body{flex:1;min-width:0}
.hjc-app .cart-pro__motivate-title{margin:0;font-size:16px;font-weight:700;color:#0F2D52;line-height:1.3;letter-spacing:-.2px}
.hjc-app .cart-pro__motivate-sub{margin:4px 0 0;font-size:13px;color:#6B7280;line-height:1.6}

@media(max-width:639px){
  .hjc-app .cart-pro__motivate{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .hjc-app .cart-pro__motivate-ico{width:42px;height:42px}
  .hjc-app .cart-pro__motivate-ico svg{width:22px;height:22px}
}

/* ── floating cart-page toast ── */
.hjc-app .cart-pro__toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1000;
  display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:14px;font-size:14px;font-weight:700;
  backdrop-filter:blur(14px);border:1px solid;box-shadow:0 18px 40px -14px rgba(11,31,58,.45);
  animation:p-toastIn .35s var(--p-ease) both,p-toastOut .4s var(--p-ease) 2.1s both}
.hjc-app .cart-pro__toast svg{width:18px;height:18px;flex-shrink:0}
.hjc-app .cart-pro__toast--ok{background:rgba(230,249,253,.96);color:#0B45AB;border-color:rgba(11,69,171,.4)}
.hjc-app .cart-pro__toast--err{background:rgba(254,226,226,.95);color:#b91c1c;border-color:rgba(220,38,38,.45)}
@keyframes p-toastIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes p-toastOut{to{opacity:0;transform:translate(-50%,16px)}}

/* ── mobile compact ── */
@media(max-width:639px){
  .hjc-app .cart-pro__item{grid-template-columns:90px minmax(0,1fr);gap:14px;padding:16px}
  .hjc-app .cart-pro__item-actions{justify-content:center;flex-direction:column-reverse;gap:10px}
  .hjc-app .cart-pro__qtystepper{width:100%;justify-content:center}
  .hjc-app .cart-pro__qtybtn{width:40px;height:40px}
  .hjc-app .cart-pro__qtyval{font-size:16px}
  .hjc-app .cart-pro__coupon-active{flex-wrap:wrap;gap:10px}
  .hjc-app .cart-pro__coupon-remove{width:100%;justify-content:center;order:99}
  .hjc-app .cart-pro__item-thumb{width:90px;height:90px;border-radius:14px}
  .hjc-app .cart-pro__item-thumb-icon{width:48px;height:48px;border-radius:14px}
  .hjc-app .cart-pro__item-thumb-icon svg{width:24px;height:24px}
  .hjc-app .cart-pro__item-body{padding-right:32px}
  .hjc-app .cart-pro__remove{width:32px;height:32px;top:10px;right:10px}
  .hjc-app .cart-pro__remove svg{width:14px;height:14px}
  .hjc-app .cart-pro__summary{padding:18px}
  .hjc-app .cart-pro__title svg{width:28px;height:28px;padding:6px}
  .hjc-app .cart-pro__coupon-apply{flex:1}
}

/* ============================================================
   BATCH STATUS BADGE — single source of truth for the visual.
   Canonical shape per the design spec: pill, padding 8/16, font 700,
   inline-flex, gap 8. Used inline on the Product Detail page, Cart,
   Checkout, and the recommendation rows.
   For storefront cards (CourseCard) the .bs-badge--overlay variant
   absolutely-positions the pill on top-left of the cover image.
   Colour palette: Upcoming/Ongoing/Pre-Recorded/Coming Soon/Out Of Stock.
   ============================================================ */
.hjc-app .bs-badge{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;padding:8px 16px;font-weight:700;
  font-size:12px;letter-spacing:.4px;text-transform:uppercase;line-height:1.2;
  border:1px solid transparent;
  box-shadow:0 4px 12px -6px rgba(11,31,58,.18);
  animation:bs-fadein .4s var(--p-ease) both;
  white-space:nowrap;
}
.hjc-app .bs-badge__dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:bs-pulse 2.2s ease-in-out infinite;flex:none}
@keyframes bs-fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes bs-pulse{0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 0 5px transparent}}

/* Card-overlay variant — used by CourseCard so the pill floats on the image. */
.hjc-app .bs-badge--overlay{position:absolute;top:10px;left:10px;z-index:4;
  padding:5px 12px 5px 10px;font-size:10px;letter-spacing:.6px;
  backdrop-filter:saturate(180%) blur(8px)}

/* New palette per spec (single source of truth — do NOT redefine elsewhere). */
.hjc-app .bs-badge--upcoming{background:#E6F9FD;color:#0AA9C4;border-color:rgba(10,199,229,.28)}
/* Ongoing takes the DEEP brand blue rather than the azure used by --upcoming:
   the two badges sit side by side in a course grid, so they still have to read
   as different statuses at a glance. */
.hjc-app .bs-badge--ongoing {background:#E8F1FF;color:#0B45AB;border-color:rgba(11,69,171,.24)}
.hjc-app .bs-badge--prerec  {background:#EFF6FF;color:#2563EB;border-color:rgba(37,99,235,.22)}
.hjc-app .bs-badge--soon    {background:#F5F3FF;color:#0B45AB;border-color:rgba(11,69,171,.22)}
.hjc-app .bs-badge--oos     {background:#FEF2F2;color:#DC2626;border-color:rgba(220,38,38,.25)}

.hjc-app .course-card:hover .bs-badge--overlay{transform:translateY(-1px) scale(1.05);transition:transform .25s var(--p-ease)}
@media(max-width:639px){
  .hjc-app .bs-badge{font-size:11px;padding:6px 12px;gap:6px}
  .hjc-app .bs-badge--overlay{font-size:9px;padding:4px 8px}
}

/* ============================================================
   📦 ESTIMATED DELIVERY INFORMATION
   Single visual system used by:
     • Product Detail page  → .ed-card (full glass card)
     • Cart line item       → .ed-mini (compact per-line block)
     • Checkout review      → .ed-mini.ed-mini--checkout (slim, no border)
   Palette is hard-baked: orange tone for Lecture Access, blue for
   Notes Dispatch — matching the rocket/box iconography. All text is
   sourced from Product.LectureAccessTiming / NotesDispatchTimeline /
   EstimatedDeliveryMessage so there are no hardcoded copy strings.
   ============================================================ */
.hjc-app .ed-card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFDFF 100%);
  border:1px solid rgba(15,23,42,.06);
  border-radius:20px;padding:22px 22px 20px;
  margin-top:22px;
  box-shadow:0 18px 44px -28px rgba(15,23,42,.45), 0 2px 6px rgba(15,23,42,.04);
  animation:ed-fadein .55s var(--p-ease) both;
  transition:transform .28s var(--p-ease),box-shadow .28s var(--p-ease),border-color .28s var(--p-ease);
}
.hjc-app .ed-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,rgba(10,199,229,.35),rgba(37,99,235,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .28s var(--p-ease);
}
.hjc-app .ed-card:hover{transform:translateY(-2px);box-shadow:0 24px 56px -28px rgba(15,23,42,.55), 0 4px 10px rgba(15,23,42,.05);border-color:rgba(10,199,229,.18)}
.hjc-app .ed-card:hover::before{opacity:1}
@keyframes ed-fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.hjc-app .ed-card__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.hjc-app .ed-card__rocket{
  flex:none;width:46px;height:46px;border-radius:14px;
  background:linear-gradient(135deg,#E6F9FD,#C9F1F9);
  display:inline-flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:0 6px 14px -8px rgba(10,199,229,.5);
}
.hjc-app .ed-card__title{font-size:17px;font-weight:800;color:#0F172A;letter-spacing:-.2px;margin:0 0 2px}
.hjc-app .ed-card__sub{font-size:13px;color:#64748B;margin:0;line-height:1.45}

.hjc-app .ed-card__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hjc-app .ed-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid transparent;transition:transform .2s,box-shadow .2s}
.hjc-app .ed-row:hover{transform:translateY(-1px)}
.hjc-app .ed-row__ico{flex:none;width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
.hjc-app .ed-row__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.hjc-app .ed-row__label{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#64748B}
.hjc-app .ed-row__value{font-size:14.5px;font-weight:800;color:#0F172A;line-height:1.3;word-break:break-word}
/* Both tiles share the brand light-blue tint (#E6F9FD — the same wash used by
   the SAVE/% OFF badges, the course-inclusion chips and the Added To Cart
   confirmation). The modifier names --orange/--blue are kept so the Razor
   markup is untouched; they no longer describe a hue. */
.hjc-app .ed-row--orange,
.hjc-app .ed-row--blue{background:#E6F9FD;border-color:rgba(11,69,171,.16)}
.hjc-app .ed-row--orange .ed-row__ico,
.hjc-app .ed-row--blue .ed-row__ico{background:#C9F1F9;color:#0B45AB;box-shadow:0 4px 10px -6px rgba(11,69,171,.45)}
.hjc-app .ed-row--orange:hover,
.hjc-app .ed-row--blue:hover{box-shadow:0 10px 22px -14px rgba(11,69,171,.5)}

/* Additional Information note panel */
.hjc-app .ed-card__note{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:14px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(180deg,#F8FAFC,#F1F5F9);
  border:1px solid rgba(15,23,42,.06);
}
.hjc-app .ed-card__note-ico{flex:none;width:30px;height:30px;border-radius:10px;background:#E0E7FF;color:#4F46E5;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.hjc-app .ed-card__note-title{display:block;font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#475569;margin-bottom:4px}
.hjc-app .ed-card__note-body{font-size:13.5px;color:#334155;line-height:1.6;margin:0;white-space:pre-wrap}

@media(max-width:639px){
  .hjc-app .ed-card{padding:18px 18px 16px;border-radius:18px}
  .hjc-app .ed-card__grid{grid-template-columns:1fr;gap:10px}
  .hjc-app .ed-card__rocket{width:42px;height:42px;border-radius:12px;font-size:20px}
  .hjc-app .ed-card__title{font-size:16px}
}

/* ── Cart / Checkout mini delivery block — compact, two-row, same palette ── */
.hjc-app .ed-mini{display:flex;flex-direction:column;gap:6px;margin:8px 0;padding:10px 12px;border-radius:12px;background:#F8FAFC;border:1px solid rgba(15,23,42,.06)}
.hjc-app .ed-mini__row{display:flex;align-items:center;gap:8px;font-size:13px;color:#0F172A;line-height:1.4}
.hjc-app .ed-mini__ico{flex:none;width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.hjc-app .ed-mini__row--orange .ed-mini__ico{background:#E6F9FD;color:#0B45AB}
.hjc-app .ed-mini__row--blue   .ed-mini__ico{background:#DBEAFE;color:#2563EB}
.hjc-app .ed-mini__label{font-weight:600;color:#64748B}
.hjc-app .ed-mini__value{font-weight:800;color:#0F172A;word-break:break-word}
.hjc-app .ed-mini--checkout{background:transparent;border:0;padding:6px 0;margin:4px 0 0}
@media(max-width:639px){
  .hjc-app .ed-mini{padding:9px 10px}
  .hjc-app .ed-mini__row{font-size:12.5px;gap:7px}
  .hjc-app .ed-mini__ico{width:20px;height:20px;font-size:12px}
}

/* respect reduced-motion */
@media(prefers-reduced-motion:reduce){
  .hjc-app *,.hjc-app *::before,.hjc-app *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hjc-app .reveal{opacity:1;transform:none}
}

/* ============================================================
   PREMIUM HEADER POLISH (v2) — refinements layered last so they
   win the cascade. Visual only; structure/behaviour unchanged.
   ============================================================ */
/* Container — warm-white glass, more present brand gradient border + layered glow */
.hjc-app .header__inner{border-radius:20px;border:1px solid rgba(255,255,255,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,251,247,.74))}
.hjc-app .header__inner::before{opacity:.9}
.hjc-app .header__inner::after{box-shadow:0 0 56px -8px rgba(10,199,229,.24),0 0 68px -14px rgba(11,69,171,.18),0 26px 50px -26px rgba(7,20,38,.55)}
.hjc-app .header.is-scrolled .header__inner{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,251,247,.9));box-shadow:0 26px 56px -26px rgba(7,20,38,.8),inset 0 1px 0 rgba(255,255,255,.75)}

/* Logo — more breathing room, subtle green accent glow on its side, divider before the nav */
.hjc-app .header__logo{padding:4px 10px;border-radius:14px;box-shadow:-9px 0 30px -14px rgba(10,199,229,.4)}
.hjc-app .header__nav{margin-left:16px;padding-left:20px;border-left:1px solid rgba(15,23,42,.08)}

/* Main nav — premium hover + an elegant, softly-glowing active pill */
.hjc-app .header__link{padding:9px 15px;border-radius:12px;color:var(--p-navy);font-weight:600;letter-spacing:.1px}
.hjc-app .header__link:hover{background:rgba(10,199,229,.09);color:var(--p-orange);transform:translateY(-1px)}
.hjc-app .header__link.active{color:var(--p-navy);background:linear-gradient(180deg,rgba(10,199,229,.15),rgba(10,199,229,.06));
  box-shadow:inset 0 0 0 1px rgba(10,199,229,.2),0 8px 18px -10px rgba(10,199,229,.6)}
.hjc-app .header__link::after{left:15px;right:15px;bottom:5px;height:2.5px;box-shadow:0 0 8px rgba(10,199,229,.55)}

/* Dropdown chevron — clean, spaced, orange when active/open */
.hjc-app .hnav-caret{font-size:11px;margin-left:3px;color:var(--gray-400);font-weight:400}
.hjc-app .header__link.active .hnav-caret,.hjc-app .hnav-item:hover .header__link .hnav-caret{color:var(--p-orange)}

/* Right action cluster — tight, unified, orange hover, softer divider */
.hjc-app .header__actions{gap:6px}
.hjc-app .header__icon:hover{background:rgba(10,199,229,.1);color:var(--p-orange);transform:translateY(-2px)}
.hjc-app .header__divider{opacity:.5;height:26px;margin:0 7px}
/* Search — a touch more prominent: soft navy ring, navy-fill on hover */
.hjc-app .header__search-btn{box-shadow:inset 0 0 0 1px var(--gray-200)}
.hjc-app .header__search-btn:hover{background:var(--p-navy);color:#fff;box-shadow:inset 0 0 0 1px var(--p-navy),0 8px 18px -10px rgba(11,31,58,.6)}
/* Count badges — small, premium */
.hjc-app .header__cart-badge{min-width:18px;height:18px;font-size:10.5px;box-shadow:0 0 0 2px #fff,0 4px 10px -3px rgba(10,199,229,.85)}

/* Admin chip — compact deep-navy gradient, orange shield, soft lift */
.hjc-app .header__chip{height:40px;border-radius:12px;box-shadow:0 10px 22px -12px rgba(11,31,58,.85),inset 0 1px 0 rgba(255,255,255,.14)}
.hjc-app .header__chip svg{color:var(--p-orange2)}

/* Profile — soft blue-grey pill, one unified component */
.hjc-app .header__user{height:46px;background:linear-gradient(180deg,#f4f7fb,#eef2f8);border:1px solid rgba(15,23,42,.08)}
.hjc-app .header__user:hover,.hjc-app .header__user.is-open{background:#fff;box-shadow:0 12px 26px -14px rgba(11,31,58,.65)}

/* ============================================================
   MOBILE HEADER  (< tablet only — desktop & tablet untouched)

   Order on screen:  hamburger -> logo -> search -> cart
   The DOM order (logo, nav, actions, hamburger) is left alone and reordered
   with flex `order`, so no markup restructuring and no risk to the desktop
   layout. Scoped to max-width:767.98px; the tablet view at 768px keeps the
   existing header exactly as-is.
   ============================================================ */
@media (max-width:767.98px){

  /* Container: the fixed bar sits on a soft tint so the white header reads as a
     rounded card with a real shadow (on a pure-white bar the radius is invisible). */
  .site-topbar{background:var(--gray-50,#f8fafc)}
  /* the mobile card layout makes the bar 124px, not the 126px desktop default —
     keep the fixed-content offset exact so there's no stray gap */
  .hjc-app{--topbar-h:124px}
  .hjc-app .header{padding:0;background:transparent;box-shadow:none;border-bottom:none}
  .hjc-app .header::after{display:none}      /* drop the desktop gradient hairline */
  .hjc-app .header__inner{
    height:64px;
    gap:9px;
    margin:8px 10px 10px;
    padding:0 10px;              /* spec: 12–16px total with the card inset */
    background:#fff;
    border:1px solid rgba(11,31,58,.06);
    border-radius:16px;
    box-shadow:0 10px 26px -14px rgba(11,31,58,.30), 0 1px 2px rgba(11,31,58,.05);
  }
  .hjc-app .header__inner::before,
  .hjc-app .header__inner::after{display:none}   /* desktop pill glow/border off */

  /* 1 ── hamburger (far left) */
  .hjc-app .header__hamburger{
    order:1; flex:0 0 auto;
    width:44px; height:44px; border-radius:12px;
    background:#fff; border:1px solid var(--gray-200);
    box-shadow:0 1px 2px rgba(11,31,58,.05);
    margin-left:0;
  }
  .hjc-app .header__hamburger span{left:12px;right:12px}
  .hjc-app .header__hamburger span:nth-child(1){top:15px}
  .hjc-app .header__hamburger span:nth-child(2){top:21px}
  .hjc-app .header__hamburger span:nth-child(3){top:27px}
  .hjc-app .header__hamburger.is-open span:nth-child(1),
  .hjc-app .header__hamburger.is-open span:nth-child(3){top:21px}

  /* 2 ── logo */
  .hjc-app .header__logo{order:2;flex:0 0 auto;padding:0}
  .hjc-app .header__logo img{height:36px}      /* spec: 34–40px */

  /* nav stays hidden on mobile (it lives in the drawer) */
  .hjc-app .header__nav{display:none}

  /* 3+4 ── actions row: search grows, cart pinned right.
     app.css hides .header__actions entirely below 768px; re-shown here. */
  .hjc-app .header__actions{
    order:3;
    display:flex; align-items:center; gap:8px;
    flex:1 1 auto; min-width:0; margin-left:0;
  }

  /* everything except search + cart belongs in the drawer on mobile */
  .hjc-app .header__actions .header__chip,
  .hjc-app .header__actions .header__divider,
  .hjc-app .header__actions .header__profile,
  .hjc-app .header__actions .header__login{display:none}

  /* 3 ── search: always expanded, icon on the left */
  .hjc-app .header__search{
    position:relative;
    flex:1 1 auto; min-width:0;
    display:flex; align-items:center;
  }
  .hjc-app .header__search-input,
  .hjc-app .header__search.is-open .header__search-input{
    /* min-width:0 is essential — an <input> has an intrinsic min-content width
       (~170px) and as a flex item would otherwise refuse to shrink, shoving the
       cart off the right edge. */
    width:100%; min-width:0; opacity:1;
    height:46px; margin:0;                    /* spec: 44–48px */
    padding:0 40px 0 42px;                    /* room for icon left, clear right */
    border-radius:999px;
    background:#fff;
    font-size:14.5px; font-weight:500; letter-spacing:-.1px;
    color:var(--p-navy);
    box-shadow:inset 0 0 0 1px var(--gray-200), 0 1px 2px rgba(11,31,58,.04);
    transition:box-shadow .25s var(--p-ease), background .25s;
  }
  .hjc-app .header__search-input::placeholder{color:var(--gray-400);font-weight:500}
  /* NOTE: padding is deliberately CONSTANT in both states. An earlier
     :placeholder-shown rule shrank padding-right to 14px while empty and restored
     40px once text existed — a real 26px padding change that reflowed the field the
     moment you typed. The clear button's 40px lane is now always reserved. */
  .hjc-app .header__search-input:focus,
  .hjc-app .header__search.is-open .header__search-input:focus{
    background:#fff;
    box-shadow:inset 0 0 0 1.5px var(--p-orange), 0 0 0 4px rgba(10,199,229,.14),
               0 6px 16px -8px rgba(10,199,229,.45);
  }
  /* suppress the native WebKit clear affordance — we render our own */
  .hjc-app .header__search-input::-webkit-search-cancel-button,
  .hjc-app .header__search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}

  /* the existing toggle/submit button becomes the leading magnifier */
  .hjc-app .header__search-btn,
  .hjc-app .header__search.is-open .header__search-btn{
    position:absolute; left:5px; top:50%; transform:translateY(-50%);
    width:34px; height:34px; border-radius:50%;
    background:transparent; box-shadow:none; color:var(--gray-500);
    transition:color .2s, background .2s;
    z-index:2;
  }
  .hjc-app .header__search-btn svg{width:17px;height:17px}
  .hjc-app .header__search:focus-within .header__search-btn{color:var(--p-orange)}

  /* clear (X) — always present and always in the same place; only its VISIBILITY
     changes. transform stays a constant translateY(-50%) (no scale keyframe), so the
     button can never appear to move, and only opacity/visibility animate.
     visibility:hidden also keeps it out of the tab order while empty. */
  .hjc-app .header__search-clear{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; padding:0;
    border:none; border-radius:50%;
    background:var(--gray-100); color:var(--gray-500);
    cursor:pointer; z-index:3;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, visibility .18s ease, background .18s, color .18s;
  }
  .hjc-app .header__search.has-text .header__search-clear{
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .hjc-app .header__search-clear:hover,
  .hjc-app .header__search-clear:active{background:var(--p-orange);color:#fff}
  .hjc-app .header__search-clear svg{width:13px;height:13px}

  /* 4 ── cart (far right) */
  .hjc-app .header__actions .header__cart{
    order:9; flex:0 0 auto;
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:14px;
    background:#fff; border:1px solid rgba(11,31,58,.08);
    color:var(--p-navy);
    box-shadow:0 6px 16px -10px rgba(11,31,58,.45), 0 1px 2px rgba(11,31,58,.05);
    transition:transform .18s var(--p-ease), box-shadow .18s;
  }
  .hjc-app .header__actions .header__cart:active{transform:scale(.95)}
  .hjc-app .header__actions .header__cart svg{width:20px;height:20px;display:block}

  /* badge is always visible on mobile, including the empty "0" */
  .hjc-app .header__cart-badge.is-zero{display:inline-flex}
  .hjc-app .header__cart-badge{
    top:-6px; right:-6px;
    min-width:20px; height:20px; padding:0 5px;
    border-radius:999px;
    font-size:11px; font-weight:800; color:#fff;
    background:linear-gradient(135deg,var(--p-orange),#38D4EE);
    box-shadow:0 0 0 2px #fff, 0 4px 10px -3px rgba(10,199,229,.8);
    animation:none;                       /* no pulse on mobile — calmer */
  }
}

/* Small phones (≤400px): claw back a little width so the full
   "Search Courses..." placeholder fits instead of clipping mid-word. */
@media (max-width:400px){
  .hjc-app .header__inner{gap:7px;padding:0 8px;margin:8px 8px 10px}
  /* padding stays constant in both states here too — only the left inset and font
     tighten for small phones. */
  .hjc-app .header__search-input,
  .hjc-app .header__search.is-open .header__search-input{font-size:13.5px;padding-left:38px;padding-right:36px}
  .hjc-app .header__search-clear{right:4px;width:26px;height:26px}
  .hjc-app .header__search-btn,
  .hjc-app .header__search.is-open .header__search-btn{left:3px;width:32px;height:32px}
}

/* Desktop / tablet keep the original behaviour: no badge when the cart is empty,
   and no clear button (it is a mobile-only affordance — the rule above re-shows it
   below 768px). Without this the button would render unstyled in the desktop header
   as soon as the user typed. */
.header__cart-badge.is-zero{display:none}
.header__search-clear{display:none}

/* ============================================================
   FACULTY — COMPACT MOBILE DIRECTORY  (≤768px)

   Replaces the desktop carousel card (photo + verified/rating pills + subjects +
   Years/Students/Courses stats + bio + "View Full Profile" button) with a plain
   3-up directory: circular avatar, name, expertise. Everything dropped is hidden
   here rather than removed from the DOM, so the ≥769px carousel, the /faculty
   listing and every other page are untouched.

   No extra data is fetched — the same facultyList is reused and capped at nine
   entries with nth-child, so the markup and the request are unchanged.
   ============================================================ */

/* The footer link belongs to the mobile directory only — the desktop carousel
   already pages through the full list. Declared BEFORE the media query so the
   display:flex inside it wins at equal specificity. */
.hjc-app .fcs-more{display:none}

@media (max-width:768px){

  /* 3-column directory, not a scroller */
  .hjc-app .fcs-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    overflow:visible;
    scroll-snap-type:none;
    padding:2px 0 4px;
    width:100%;
  }
  .hjc-app .fcs-nav,
  .hjc-app .fcs-dots{display:none}                 /* nothing left to page through */
  .hjc-app .fcs-grid > .fcs-card:nth-child(n+10){display:none}   /* first 9 only */

  /* the tile itself is the link — no card chrome at all */
  .hjc-app .fcs-card{
    flex:none;width:auto;min-width:0;height:auto;
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:0;background:none;border:0;border-radius:0;
    box-shadow:none;backdrop-filter:none;
    scroll-snap-align:none;
  }
  .hjc-app .fcs-card::before,
  .hjc-app .fcs-card::after{display:none}          /* rotating gradient border */
  .hjc-app .fcs-card:hover{transform:none;box-shadow:none}

  /* everything the brief strips on mobile */
  .hjc-app .fcs-card__top,          /* verified + rating pills */
  .hjc-app .fcs-card__role,         /* designation — expertise line is used instead */
  .hjc-app .fcs-card__statbox,      /* Years / Students / Courses */
  .hjc-app .fcs-card__tagline,      /* bio */
  .hjc-app .fcs-card__cta,          /* "View Full Profile" */
  .hjc-app .fcs-card__glow,
  .hjc-app .fcs-card__spotlight,
  .hjc-app .fcs-card__halo,
  .hjc-app .fcs-card__ring{display:none}

  /* circular avatar — identical size on every tile */
  .hjc-app .fcs-card__photo-wrap{
    width:72px;height:72px;aspect-ratio:1/1;
    margin:0 auto 8px;animation:none;flex:none;
    border-radius:50%;
    overflow:hidden;   /* a missing image renders its alt text — keep it inside the circle */
  }
  .hjc-app .fcs-card__photo{
    width:100%;height:100%;
    border-radius:50%;border:none;
    object-fit:cover;object-position:center top;
    box-shadow:none;
  }
  /* initials fallback keeps its generated colour, just circular */
  .hjc-app .fcs-card__photo--initials{border-radius:50%;font-size:22px}
  .hjc-app .fcs-card:hover .fcs-card__photo{transform:none;filter:none;box-shadow:none}

  /* name — 16 / 600, max 2 lines */
  .hjc-app .fcs-card__name{
    font-size:16px;font-weight:600;line-height:1.25;letter-spacing:normal;
    margin:0 0 2px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* expertise — the subject pills become plain comma-separated text, 2 lines max */
  .hjc-app .fcs-card__subjects{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-size:12.5px;font-weight:400;line-height:1.35;color:var(--gray-500);
    margin:0;padding:0;gap:0;text-align:center;
  }
  /* .is-active carries the orange pill treatment at (0,3,1) in the base rules,
     so it has to be named here or the first subject keeps its chip. */
  .hjc-app .fcs-card__subjects span,
  .hjc-app .fcs-card__subjects span.is-active{
    display:inline;background:none;border:0;box-shadow:none;
    padding:0;margin:0;border-radius:0;
    font-size:inherit;font-weight:400;color:inherit;letter-spacing:normal;
  }
  .hjc-app .fcs-card__subjects span:not(:last-child)::after{content:", "}

  /* footer link to the full listing */
  .hjc-app .fcs-more{display:flex;justify-content:center;margin-top:16px}
  .hjc-app .fcs-more__btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 18px;border-radius:999px;
    font-size:13px;font-weight:600;
    color:var(--p-navy,#082B73);background:#fff;
    border:1px solid rgba(11,31,58,.14);text-decoration:none;
  }

  .hjc-app .fcs-skel{padding:0}
}


/* ============================================================
   BLOG — MOBILE TILE GRID  (≤768px, EVERY .pb-grid)

   The shared .pb-grid drops to a single column below 600px, which left one
   oversized card (489px tall, measured on /blog) filling the screen.

   This was previously scoped to .pb-grid--home so only the homepage section got
   the tile treatment; it is now unscoped, so the homepage section, the /blog
   listing and the related-posts strip on a post page all render the SAME compact
   2-up tile. One definition, every blog grid.

   Desktop/tablet are untouched — the whole block only exists below 769px.
   ============================================================ */
@media (max-width:768px){

  .hjc-app .pb-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));   /* ≈48% per card + the gap */
    gap:10px;
    align-items:stretch;                             /* equal height per row */
  }

  .hjc-app .pb-grid .pb-card{
    border-radius:16px;
    box-shadow:0 8px 22px -14px rgba(11,31,58,.40), 0 1px 2px rgba(11,31,58,.05);
  }
  /* hover lift is desktop-only — on touch it sticks after a tap */
  .hjc-app .pb-grid .pb-card:hover{transform:none}

  /* image: 4:3, inset so the radius reads, cover, identical height per row */
  .hjc-app .pb-grid .pb-card__media{
    aspect-ratio:4/3;
    margin:8px 8px 0;
    border-radius:12px;
    overflow:hidden;
  }
  .hjc-app .pb-grid .pb-card__img{border-radius:12px;object-fit:cover}
  .hjc-app .pb-grid .pb-card:hover .pb-card__img{transform:none}
  .hjc-app .pb-grid .pb-card__ph svg{width:26px;height:26px}

  /* small category badge, top-left */
  .hjc-app .pb-grid .pb-card__badge{
    top:7px; left:7px; max-width:calc(100% - 14px);
    padding:2px 7px; border-radius:999px;
    font-size:8.5px; letter-spacing:.3px;
  }

  /* tighter body */
  .hjc-app .pb-grid .pb-card__body{
    padding:9px 10px 11px;
    gap:4px;
  }

  /* title: 2-line clamp, min-height so 1-line and 2-line tiles match */
  .hjc-app .pb-grid .pb-card__title{
    font-size:13.5px; line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:2.6em;
  }
  /* excerpt: exactly 2 short lines */
  .hjc-app .pb-grid .pb-card__excerpt{
    font-size:10.5px; line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:2.9em;
  }
  /* meta: date + reading time + views — ALL THREE stay visible.
     The previous max-height:1.5em clipped the row at 14px while its content was
     40px tall, so "views" was rendered but cut off entirely. The cap is gone;
     the row wraps to a second line instead, and since every card carries the
     same three items they wrap identically, so tile heights stay equal. */
  .hjc-app .pb-grid .pb-card__meta{
    gap:2px 7px; padding-top:2px; font-size:8.5px;
    max-height:none; overflow:visible;
  }
  .hjc-app .pb-grid .pb-card__meta-item{line-height:1.25}
  .hjc-app .pb-grid .pb-card__meta-item svg{width:9px;height:9px}

  /* CTA: full width inside the card, compact height */
  .hjc-app .pb-grid .pb-card__cta{
    align-self:stretch; width:100%; justify-content:center;
    margin-top:2px; padding:7px 10px;
    font-size:10.5px; gap:5px; border-radius:9px;
  }
  .hjc-app .pb-grid .pb-card:hover .pb-card__cta{box-shadow:none}
  .hjc-app .pb-grid .pb-card:hover .pb-card__cta-arrow{transform:none}

  /* section footer button */
  .hjc-app .pb-grid + .pb-more{margin-top:16px}
  .hjc-app .pb-grid + .pb-more .pb-btn{padding:10px 20px;font-size:13px}
}

/* ============================================================
   PRODUCT CARD — MOBILE TILE GRID  (≤768px)

   ONE definition, applied to every .course-grid on the site, so the homepage,
   All Courses, category/sub-category, search and related-products all render the
   identical tile. The shared markup already comes from Components/Shared/
   CourseCard.razor — this block only changes how that one card LAYS OUT below
   769px. Desktop and tablet (≥769px) are untouched.

   What this replaces: at ≤639px .course-grid was flipped into a horizontal
   scroll-snap carousel with .course-card{flex:0 0 86%} (see the rule near the
   top of this file). That is what put a single oversized card on screen and
   required sideways swiping. Everything that made it a carousel is reset here.
   ============================================================ */
@media (max-width:768px){

  /* ── the grid: true 2-up, no carousel, no horizontal scroll ── */
  .hjc-app .course-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));  /* minmax(0,·) lets tiles shrink below content width */
    gap:10px;
    overflow:visible;            /* kills the carousel's overflow-x:auto */
    scroll-snap-type:none;
    margin:0;
    padding:0;
  }
  /* The related-products strip sets .pd-related .course-grid from a page-scoped
     <style> — same specificity as .hjc-app .course-grid but later in the
     document, so it would win. One extra class outranks it. */
  .hjc-app .pd-related .course-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

  /* ── the tile ── */
  .hjc-app .course-card{
    flex:none;                   /* was flex:0 0 86% (carousel cell) */
    scroll-snap-align:none;
    border-radius:14px;
    box-shadow:0 6px 18px -12px rgba(11,31,58,.40), 0 1px 2px rgba(11,31,58,.05);
  }
  /* Decorative desktop-only layers: gradient border, shine sweep, colour glow.
     They cost paint on every tile and read as noise at this size. */
  .hjc-app .course-card::before,
  .hjc-app .course-card::after,
  .hjc-app .course-card__glow{display:none}
  .hjc-app .course-card:hover{transform:none;box-shadow:0 6px 18px -12px rgba(11,31,58,.40)}

  /* ── image well ──
     Was a fixed 120px band with object-fit:cover. The course artwork is square
     (measured: 1080x1080 and 1600x1600), so a square source in a 168x120
     landscape box had ~30% of its height thrown away — the bottom of every
     poster was cut off.

     The well now matches the artwork's own 1:1 ratio, which is also what desktop
     uses, so a square image fills it exactly: nothing cropped, nothing
     letterboxed, nothing stretched. aspect-ratio (not a px height) means both
     columns are always identical — they share a grid track width — and the well
     scales with the card instead of being pinned to one screen size.

     object-fit:contain is the guarantee for anything NOT square: a wide banner
     letterboxes inside the well rather than being cropped. */
  .hjc-app .course-card__image{
    aspect-ratio:1 / 1;
    width:100%;
    height:auto;
    /* No max-height, no fixed height, no transform, no absolute positioning —
       any of those would re-introduce a crop. overflow:hidden stays only to clip
       the rounded top corners; with object-fit:contain the picture can never
       exceed the well, so there is nothing for it to cut off. */
    max-height:none;
    border-radius:12px 12px 0 0;
    overflow:hidden;
  }
  .hjc-app .course-card__photo{
    width:100%;height:100%;
    object-fit:contain;          /* never crop — matches desktop */
    object-position:center;
    transform:none;
  }
  /* Backdrop for a non-square image's letterbox bars. The well's default is the
     dark level gradient, which is the fallback ILLUSTRATION's background — behind
     a photo it would read as a heavy frame. :has() applies the light backdrop
     only to wells that actually contain a photo; browsers without :has() simply
     keep the gradient, which is the current behaviour, so nothing regresses. */
  @supports selector(:has(*)) {
    .hjc-app .course-card__image:has(.course-card__photo){background:#fff}
  }
  .hjc-app .course-card:hover .course-card__photo{transform:none;filter:none}
  .hjc-app .course-card__image::after{display:none}   /* sheen overlay */
  /* fallback illustration scaled to the shorter band */
  .hjc-app .course-card__ico{width:48px;height:48px;border-radius:14px}
  .hjc-app .course-card__ico svg{width:24px;height:24px}
  .hjc-app .course-card__illustration{gap:7px}
  .hjc-app .course-card__illustration-label{font-size:8.5px;letter-spacing:1px}

  /* ── badges: kept (batch status + admin badge), scaled down ──
     .bs-badge--overlay and .course-card__badge are BOTH anchored top-left in the
     desktop rules, so they sit on top of each other whenever a product has an
     admin badge as well as a batch status. On a 170px tile that overlap is
     unreadable. Side-by-side does not fit either: at 360px the tile is 155px and
     a "Upcoming Batch" pill alone measures 103px. So they are separated
     vertically instead — batch status in the top-left, the admin badge in the
     bottom-left of the artwork band, which is empty in every layout.
     (Desktop is left as-is — see the note in the handover.) */
  .hjc-app .course-card__badge{
    top:auto;bottom:7px;left:7px;
    padding:2px 7px;border-radius:999px;
    font-size:8.5px;letter-spacing:.3px;
    max-width:calc(100% - 14px);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .hjc-app .course-card__badge--live::before{width:5px;height:5px}
  .hjc-app .course-card .bs-badge--overlay{
    padding:2px 6px;font-size:8px;border-radius:999px;gap:3px;
    max-width:calc(100% - 14px);
  }
  .hjc-app .course-card .bs-badge--overlay .bs-badge__dot{width:4px;height:4px}

  /* ── body: tight, no dead space ── */
  .hjc-app .course-card__body{padding:9px 10px 11px;gap:4px}

  /* Category / level eyebrow */
  .hjc-app .course-card__level{font-size:8.5px;letter-spacing:.7px}

  /* Title: exactly 2 lines, smaller type rather than a taller tile */
  /* FULL course name — no clamp, no ellipsis, wraps freely.
     min-height reserves three lines so short and long names share one rhythm;
     beyond that the title grows and the tile grows with it. Equal heights are
     already guaranteed two ways: grid items stretch to the tallest card in their
     row, and .course-card__footer{margin-top:auto} pins price + CTA to the
     bottom, so a taller title never pushes them out of the card. */
  .hjc-app .course-card__title{
    font-size:14px;line-height:1.35;letter-spacing:-.1px;
    display:block;-webkit-line-clamp:none;overflow:visible;
    white-space:normal;word-break:break-word;overflow-wrap:anywhere;
    min-height:4.05em;           /* 3 lines at 1.35 */
  }

  /* Faculty: one line, small, grey — icon dropped (spec: no extra icons) */
  .hjc-app .course-card__faculty{
    font-size:10px;gap:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
  }
  .hjc-app .course-card__faculty svg{display:none}

  /* Ratings / enrolled counts / other metadata: off on mobile */
  .hjc-app .course-card__meta{display:none}

  /* ── price row: price + MRP + discount, wraps neatly ──
     min-height reserves the wrapped (two-line) case for every tile, so a card
     whose price row happens to fit on one line — or that has no discount badge
     at all — still ends up exactly as tall as its neighbours. Without it, rows
     landed at 304px and 282px depending on price length. */
  .hjc-app .course-card__footer{padding-top:7px;gap:4px;flex-wrap:wrap;align-items:center;min-height:44px}
  .hjc-app .course-card .bs-badge--overlay{top:7px;left:7px}
  .hjc-app .course-card__pricing{gap:5px}
  .hjc-app .course-card__price{font-size:15px;letter-spacing:-.2px}
  .hjc-app .course-card__mrp{font-size:10px}
  .hjc-app .course-card__discount{font-size:8.5px;padding:1px 5px;border-radius:999px}

  /* ── CTA: compact, full width, rounded ── */
  .hjc-app .course-card__cta{
    margin-top:6px;
    padding:7px 8px;border-radius:9px;
    font-size:10.5px;letter-spacing:.1px;gap:4px;
  }
  .hjc-app .course-card:hover .course-card__cta{transform:none;box-shadow:none;filter:none}
  /* responsive-normalize.css clamps loose <svg> to 16–22px with a (0,3,1)
     selector, which outranks the usual .hjc-app .course-card__cta svg. The extra
     class here takes it to (0,4,0) so the arrow stays proportional to 10.5px text. */
  .hjc-app .course-grid .course-card .course-card__cta svg{width:11px;height:11px}

  /* loading skeletons share the tile footprint so the grid doesn't jump */
  .hjc-app .course-card--skel .skel:first-child{height:120px}

  /* ── Sibling product listings that are their own components (different data
     and actions, so they are not the shared CourseCard) — matched to the same
     2-up compact rhythm so no listing on the site shows one giant card per row.
     .reco-grid  = "Offer / Combo Recommendations" on the product page
     .fp-courses = "Courses by <faculty>" on the faculty page          ── */
  .hjc-app .reco-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hjc-app .reco-card{padding:9px;border-radius:14px;gap:6px}
  /* same full-title treatment; the page-scoped .reco-card__title carries a
     -webkit-line-clamp:2, which this outranks with the extra .hjc-app class */
  .hjc-app .reco-card__title{
    font-size:14px;line-height:1.35;min-height:4.05em;
    display:block;-webkit-line-clamp:none;overflow:visible;
    white-space:normal;word-break:break-word;overflow-wrap:anywhere;
  }
  .hjc-app .reco-card__cat{font-size:8.5px;letter-spacing:.7px}
  .hjc-app .reco-card__faculty{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hjc-app .reco-card__price{font-size:15px}
  .hjc-app .reco-card__mrp{font-size:10px}
  .hjc-app .reco-card__disc{font-size:8.5px;padding:1px 5px}
  .hjc-app .reco-card__actions{flex-direction:column;gap:5px}
  .hjc-app .reco-card__details,
  .hjc-app .reco-card__add{padding:7px 8px;font-size:10.5px;border-radius:9px}
  .hjc-app .reco-card__badge{top:7px;right:7px;padding:2px 7px;font-size:8.5px}

  .hjc-app .fp-courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hjc-app .fp-course-row{grid-template-columns:1fr;border-radius:14px}
  .hjc-app .fp-course-thumb{height:120px;border-radius:12px 12px 0 0;font-size:10px}
  .hjc-app .fp-course-row__main{padding:9px 10px 11px;gap:3px}
  .hjc-app .fp-course-row__cat{font-size:8.5px;letter-spacing:.7px}
  .hjc-app .fp-course-row__title{
    font-size:14px;line-height:1.35;min-height:4.05em;
    display:block;-webkit-line-clamp:none;overflow:visible;text-overflow:clip;
    white-space:normal;word-break:break-word;overflow-wrap:anywhere;
  }
  .hjc-app .fp-course-row__meta{font-size:10px;white-space:nowrap;overflow:hidden}
  .hjc-app .fp-course-row__arrow{display:none}
}

/* ============================================================
   FLOATING CONTACT DOCK — MINIMIZE / EXPAND  (mobile only, ≤768px)

   The dock markup gained two controls (Components/Layout/FloatingButtons.razor):
     .float-min  — the "−" chip on the pill's top-right corner (expanded mode)
     .float-fab  — the single bubble that remains (collapsed mode)
   Both are display:none by default and only switch on below 769px, so desktop and
   tablet render the dock exactly as before — the collapsed state simply has no
   effect there, which also means resizing a collapsed phone view up to desktop
   shows the full dock rather than a stranded bubble.

   The three contact links are untouched.
   ============================================================ */
.float-min,
.float-fab{display:none}

@media (max-width:768px){

  /* ── the collapse chip, pinned to the pill's top-right corner ──
     .floating-btns is position:fixed, so it is already a containing block for
     an absolutely-positioned child — the chip costs no layout height. */
  .hjc-app .float-min{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:-7px;right:-7px;z-index:2;
    width:26px;height:26px;padding:0;
    border-radius:50%;border:1px solid rgba(255,255,255,.85);
    background:var(--p-navy,#082B73);color:#fff;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    box-shadow:0 6px 14px -6px rgba(11,31,58,.85);
    transition:transform .2s var(--p-ease),background .2s;
  }
  .hjc-app .float-min:active{transform:scale(.9)}
  /* responsive-normalize.css clamps loose <svg> to 16–22px via a (0,3,1)
     selector; one extra class here keeps the glyph proportional to the chip. */
  .hjc-app .floating-dock .float-min svg{width:13px;height:13px}

  /* ── the collapsed-state bubble ── */
  .hjc-app .float-fab{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:16px;bottom:24px;z-index:90;
    width:54px;height:54px;padding:0;
    border-radius:50%;border:none;
    background:linear-gradient(135deg,#0AC7E5,#0AC7E5);
    color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;
    box-shadow:0 14px 30px -10px rgba(10,199,229,.75),0 2px 6px rgba(11,31,58,.18);
  }
  .hjc-app .floating-dock .float-fab svg{width:24px;height:24px}
  .hjc-app .float-fab:active{transform:scale(.94)}

  /* ── the 300ms slide + fade, both directions ──
     visibility is transitioned alongside opacity so the hidden layer stops
     receiving taps the moment it finishes fading, instead of sitting invisible
     on top of the page. */
  .hjc-app .floating-dock .floating-btns,
  .hjc-app .floating-dock .float-fab{
    transition:opacity .3s var(--p-ease,ease),transform .3s var(--p-ease,ease),visibility .3s;
  }

  /* expanded (default): dock shown, bubble parked */
  .hjc-app .floating-dock .float-fab{
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(14px) scale(.85);
  }

  /* collapsed: dock slides down + fades out, bubble takes its place */
  .hjc-app .floating-dock--collapsed .floating-btns{
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(14px) scale(.94);
  }
  .hjc-app .floating-dock--collapsed .float-fab{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:none;
  }

  /* the WhatsApp glow pulse is distracting behind a fade — stop it mid-collapse */
  .hjc-app .floating-dock--collapsed .float-btn--whatsapp{animation:none}
}

@media (max-width:768px) and (prefers-reduced-motion:reduce){
  .hjc-app .floating-dock .floating-btns,
  .hjc-app .floating-dock .float-fab{transition:opacity .01s,visibility .01s;transform:none}
}

/* ============================================================
   MODE OF TEACHING — COMPACT MOBILE LAYOUT  (≤768px)

   Was: .mode-grid dropped to a single column below 769px, so three 38px-padded
   cards with 72px icons stacked to roughly a full phone screen for a section
   that is only supporting content.

   Now: a 2-up grid with the third card spanning the full width underneath, each
   card ~120px tall. Same cards, same copy, same gradients, same rounded/shadow
   treatment — only the density changes. Desktop and tablet ≥769px are untouched.
   ============================================================ */
@media (max-width:768px){

  /* 2 columns; the odd third card spans the row so nothing is left ragged. */
  .hjc-app .mode-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .hjc-app .mode-grid > .mode-card:nth-child(3){grid-column:1 / -1}

  /* ── the card: same premium shell, tighter box ── */
  .hjc-app .mode-card{
    padding:14px 10px;
    border-radius:16px;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  }
  /* Hover lift is desktop-only — on touch it sticks after a tap. */
  .hjc-app .mode-card:hover{transform:none;box-shadow:none;border-color:var(--gray-200)}
  .hjc-app .mode-card:hover::before{opacity:0}

  /* ── icon: 72 → 40, blur halo dialled back to match ── */
  .hjc-app .mode-card__icon{
    width:40px;height:40px;margin:0 auto 8px;border-radius:12px;
    box-shadow:0 8px 16px -8px rgba(11,31,58,.5);
  }
  .hjc-app .mode-card__icon::after{border-radius:12px;filter:blur(9px);opacity:.45}
  /* responsive-normalize.css clamps loose <svg> to 16–22px with a (0,3,1)
     selector; the extra class here keeps the glyph sized to the 40px tile. */
  .hjc-app .mode-grid .mode-card__icon svg{width:20px;height:20px}
  /* the "live" ping dot, rescaled for the smaller tile */
  .hjc-app .mode-card__icon--live::before{top:7px;right:7px;width:6px;height:6px}

  /* ── type: smaller title, description hard-clamped to 2 lines ── */
  .hjc-app .mode-card h3{font-size:13px;letter-spacing:-.1px;margin-bottom:3px;line-height:1.25}
  .hjc-app .mode-card p{
    font-size:10.5px;line-height:1.4;margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* ── section chrome: less air above, below and under the heading ── */
  .hjc-app .section--modes{padding-top:18px;padding-bottom:18px}
  .hjc-app .section--modes .section__header{margin-bottom:12px}
}

/* ============================================================
   TYPOGRAPHY SCALE  (site-wide)

   Family, weights, smoothing and line-height are set globally on <body>
   (app.css). This block only sets the SIZE/WEIGHT scale.

   The scale below is the DESKTOP baseline and is therefore gated to ≥769px:
   responsive-normalize.css already drives h1/h2/h3 and body text down through
   the ≤768px, ≤480px and ≤360px breakpoints, and the mobile card/tile rules
   earlier in this file set their own compact sizes. Forcing 56px hero titles or
   18px product names onto a 390px screen would undo that work, so mobile and
   tablet keep their responsive sizes and only the family changes there.
   ============================================================ */

/* Headings: requested letter-spacing:normal, replacing the previous negative
   tracking (-1.5px on the hero, -0.8px on section titles). */
.hjc-app h1,.hjc-app h2,.hjc-app h3,.hjc-app h4,
.hjc-app .hero__title,.hjc-app .section__title,
.hjc-app .course-card__title,.hjc-app .pb-card__title{letter-spacing:normal}

/* Body copy — 16px/400, line-height inside the requested 1.6–1.8 band. */
.hjc-app p,.hjc-app li{line-height:1.7}

/* ── Weight hierarchy (applies at EVERY width — only sizes flex responsively) ──
   Hero 800 · headings/section titles 700 · product & faculty names 600 ·
   buttons 600 · menu 500 · body/descriptions/small 400 · captions 300.        */
.hjc-app .hero__title{font-weight:800}                       /* hero heading */
.hjc-app h1,.hjc-app h2,.hjc-app h3,
.hjc-app .section__title,.hjc-app .page-hero h1{font-weight:700}   /* headings + section titles */
.hjc-app .course-card__title,.hjc-app .pb-card__title,
.hjc-app .reco-card__title,.hjc-app .fp-course-row__title,
.hjc-app .hj-subcat-card__title{font-weight:600}             /* product names */
.hjc-app .fcs-card__name,.hjc-app .fp-hero__name,
.hjc-app .faculty-card__name{font-weight:600}                /* faculty names */
.hjc-app .btn,.hjc-app button.btn,.hjc-app .course-card__cta,
.hjc-app .pb-card__cta{font-weight:600}                      /* buttons */
.hjc-app .header__link,.hjc-app .hnav-drop__link,
.hjc-app .drawer__link{font-weight:500}                      /* menu */
.hjc-app p,.hjc-app li,.hjc-app .section__subtitle,
.hjc-app .course-card__faculty,.hjc-app .pb-card__excerpt{font-weight:400}  /* body + descriptions */
.hjc-app .hero__note,.hjc-app .fomo-toast__time,
.hjc-app .pb-card__meta{font-weight:300}                     /* captions */

@media (min-width:769px){

  /* Hero title — 56px / 700 (clamped so it still scales between 769px and
     desktop rather than jumping). */
  .hjc-app .hero__title{font-size:clamp(40px,5vw,56px);font-weight:800;line-height:1.12}

  /* Section titles — 40px / 700 */
  .hjc-app .section__title{font-size:clamp(30px,3.4vw,40px);font-weight:700;line-height:1.2}
  .hjc-app .section__subtitle{font-size:16px;font-weight:400;line-height:1.7}

  /* Card titles — 22px / 600 (blog cards, faculty cards, sub-category cards) */
  .hjc-app .pb-card__title{font-size:22px;font-weight:600;line-height:1.35}
  .hjc-app .hj-subcat-card__title{font-size:22px;font-weight:600;line-height:1.35}

  /* Product names — 18px / 600 */
  .hjc-app .course-card__title{font-size:18px;font-weight:600;line-height:1.45}
  .hjc-app .reco-card__title{font-size:18px;font-weight:600;line-height:1.45}
  .hjc-app .fp-course-row__title{font-size:18px;font-weight:600;line-height:1.45}

  /* Body text — 16px / 400 */
  .hjc-app p,.hjc-app .pb-card__excerpt,.hjc-app .hj-subcat-card__desc{font-size:16px;font-weight:400;line-height:1.7}

  /* Small labels — 14px / 500. The uppercase eyebrow badges keep their tracking
     on purpose; letter-spacing:normal on all-caps text closes the letters up and
     reads as a defect rather than a fix. */
  .hjc-app .form-label,
  .hjc-app .course-card__level,
  .hjc-app .course-card__faculty,
  .hjc-app .pb-card__meta,
  .hjc-app .reco-card__faculty{font-size:14px;font-weight:500}
  .hjc-app .form-input{font-size:16px}   /* ≥16px stops iOS zooming the field on focus */
}

/* ============================================================
   CONTACT STRIP — RESPONSIVE SOCIAL ICONS  (≤768px)

   Measured before this block at 320px: the three phone numbers at 12px took
   272px of a 320px viewport, so the social row started at x=292 and ran to
   x=392 — Instagram ended exactly on the viewport edge while YouTube (328–356)
   and Telegram (364–392) were entirely outside it. At 360px Telegram was still
   clipped. The strip never scrolled, so those icons were simply unreachable.

   Fix: tighten the type and spacing, then drop icons by PRIORITY rather than by
   whatever happens to be last in the DOM — Instagram and Telegram/WhatsApp are
   the ones that must survive, so YouTube is what gets hidden on the narrowest
   screens. Targeting aria-label keeps that priority explicit and order-proof.
   Desktop (>1024px) and tablet (769–1024px) are untouched.
   ============================================================ */
@media (max-width:768px){
  .hjc-app .contact-strip{padding:6px 0}
  .hjc-app .contact-strip__inner{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:nowrap;                /* single row, always */
    gap:8px;padding:0 12px;
  }
  /* Phones take the slack; the icon row never shrinks, so it can't be squeezed
     off the edge. */
  .hjc-app .contact-strip__phones{flex:1 1 auto;min-width:0;gap:8px}
  .hjc-app .contact-strip__phones a{font-size:11px;white-space:nowrap}
  .hjc-app .contact-strip__phones>svg{width:12px;height:12px;flex-shrink:0}
  .hjc-app .contact-strip__social{flex:0 0 auto;gap:6px}
  .hjc-app .contact-strip__social a{width:30px;height:30px;border-radius:8px;flex-shrink:0}
}

/* Very small phones (320–400px): last squeeze — 10px numbers, 4px gaps, and the
   lowest-priority icon steps out so the rest stay fully inside the viewport. */
@media (max-width:400px){
  .hjc-app .contact-strip__inner{gap:6px;padding:0 10px}
  .hjc-app .contact-strip__phones{gap:6px}
  .hjc-app .contact-strip__phones a{font-size:10px}
  .hjc-app .contact-strip__phones>svg{width:11px;height:11px}
  .hjc-app .contact-strip__social{gap:4px}
  .hjc-app .contact-strip__social a{width:30px;height:30px}
}

/* Only the narrowest class of device drops an icon. Measured budget at this
   size: 20px padding + ~194px of numbers + 6px gap + 98px for three icons =
   318px, which only "fits" 320px by 2px — far too tight to rely on across font
   stacks. Below 360px the lowest-priority icon steps out; at 360px and above all
   three fit with room to spare (102px of slack measured at 390px).
   Priority kept explicit: Instagram + Telegram/WhatsApp always survive. */
@media (max-width:359.98px){
  .hjc-app .contact-strip__social a[aria-label="YouTube"]{display:none}
}

/* ============================================================
   HERO CTA BUTTONS — 2×2 GRID  (mobile only, ≤768px)

   The four CTAs were set to width:100% below 768px (app.css) and again below
   560px (earlier in this file), so they stacked one per row — roughly 250px of
   hero height for the button block alone. Two per row halves that to ~118px and
   brings "Most Popular Courses" up the page.

   Layout only: colours, gradients, icons, shadows, radius, the shine sweep and
   the hover/magnetic effects are all inherited untouched from the base rules.
   Desktop and tablet (≥769px) keep the horizontal row.
   ============================================================ */
@media (max-width:768px){

  .hjc-app .hero__course-btns{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));  /* always 2 per row, equal width */
    gap:10px;
    margin-inline:0;                 /* clears the ≥1160px negative-margin trick */
    max-width:440px;                 /* keeps the pair readable on wide phones */
    margin-left:auto;margin-right:auto;
  }

  .hjc-app .hero__course-btn{
    width:100%;min-width:0;          /* min-width:210px would force overflow here */
    min-height:54px;                 /* equal height; comfortably tappable */
    padding:9px 10px;
    font-size:15px;font-weight:600;line-height:1.2;
    display:flex;align-items:center;justify-content:center;gap:6px;
    text-align:center;
  }

  /* responsive-normalize.css clamps loose svg elements with a (0,3,1) selector,
     which outranks .hjc-app .hero__course-btn svg — hence the extra depth. */
  .hjc-app .hero .hero__course-btns .hero__course-btn svg{width:16px;height:16px;flex-shrink:0}

  /* Trim the hero's lower padding so the next section arrives sooner. */
  .hjc-app .hero{padding-bottom:clamp(26px,4vw,38px)}
}

/* Small phones (≤360px): at 320px a 135px-wide button gave the label only 93px,
   so "CA Foundation Courses" needed three lines and its row grew taller than the
   other. A slightly smaller label holds every CTA to two lines, which is what
   keeps all four buttons the same height. */
@media (max-width:360px){
  .hjc-app .hero__course-btns{gap:8px}
  .hjc-app .hero__course-btn{font-size:13.5px;padding:8px;gap:5px}
  .hjc-app .hero .hero__course-btns .hero__course-btn svg{width:14px;height:14px}
}

/* ============================================================
   "Learn The Way That Suits You" — one line on mobile (≤768px)

   responsive-normalize.css sizes h2 at clamp(20px,4.4vw,26px) below 769px, which
   at 390px lands on 26px — wide enough to wrap this 28-character heading onto a
   second line. Scoped to .section--modes so every other section title keeps its
   current wrapping behaviour.

   The size is tied to the viewport rather than fixed, because the line's width
   scales with the font size: min(Xvw, 26px) means it shrinks just enough to fit
   on any narrow screen and stops growing once it reaches the normal 26px. No
   <br>, no shortened text, no change to family, weight or colour.
   ============================================================ */
@media (max-width:768px){
  .hjc-app .section--modes .section__title{
    white-space:nowrap;
    font-size:min(5.6vw,26px);
    letter-spacing:-.3px;
    text-align:center;
  }
}

/* ============================================================
   "Meet Our Expert Faculty" — compact single-line heading (≤768px)

   The base rule is clamp(36px,5vw,64px) at weight 900 in --p-navy (#082B73).
   Below 769px the 5vw term is far under the 36px floor, so every phone got the
   full 36px extra-bold — wide enough to wrap onto a second line and heavy enough
   to overpower the faculty grid beneath it.

   font-size is tied to the viewport rather than fixed: the line's width scales
   with the type size, so min(6.7vw,28px) shrinks exactly as much as a narrow
   screen needs and stops at 28px once there is room. Only the heading's own
   typography changes — background, subtitle, grid, cards and section spacing
   are untouched, and ≥769px keeps the large display treatment.
   ============================================================ */
@media (max-width:768px){
  .hjc-app .fcs-title{
    font-size:min(6.7vw,28px);   /* ≈26px at 390px, capped at 28px */
    font-weight:700;             /* was 900 */
    line-height:1.15;
    letter-spacing:-.3px;
    color:var(--navy,#0B45AB);   /* lighter than --p-navy #082B73, already in the palette */
    white-space:nowrap;
  }
}

/* ============================================================
   BRAND THEME — Primary Blue #0B45AB + Azure Haze #0AC7E5

   Scoped to .hjc-app, which is the PUBLIC layout wrapper (MainLayout.razor).
   AdminLayout does not carry that class, so every admin rule keeps resolving
   these variables from :root and the admin panel is untouched — including the
   shared rules in app.css, where var(--orange) inside a public element picks up
   the value below while the same rule on an admin element does not.

   This is the single place to adjust the brand palette. Semantic colours are
   deliberately preserved: success green, error red, the red LIVE badge and the
   gold BESTSELLER badge still mean what they meant before.
   ============================================================ */
.hjc-app{
  /* primary */
  --navy:#0B45AB;          /* Primary Blue   — headers, buttons, titles, links */
  --navy-light:#0A5BCF;    /* hover / lighter primary                          */
  --navy-dark:#082B73;     /* deep blue      — footer, dark sections           */
  /* accent */
  --orange:#0AC7E5;        /* Azure Haze     — accents, focus, chips, hovers   */
  --orange-dark:#0AA9C4;   /* azure pressed                                    */
  /* premium-theme aliases used throughout home-premium.css */
  --p-navy:#0B45AB;
  --p-navy2:#0A5BCF;
  --p-royal:#0B45AB;
  --p-orange:#0AC7E5;
  --p-orange2:#5AD9EF;
  /* brand tokens for anything added later */
  --brand-blue:#0B45AB;
  --brand-blue-hover:#0A5BCF;
  --brand-blue-deep:#082B73;
  --brand-azure:#0AC7E5;
  --brand-gradient:linear-gradient(135deg,#0B45AB,#0AC7E5);
  /* app.css drives ~20 public elements off --green (savings rows, verified
     badges, progress bars, done-steps, success banners…). Rebinding the token
     here converts all of them at once. Admin never carries .hjc-app, so the
     :root green in app.css still applies there — untouched. */
  --green:#0B45AB;
  --green-light:#E6F9FD;
}

/* Buttons — primary solid blue, secondary white with a blue border that turns
   azure on hover. Only colour changes; padding, radius and size are inherited. */
.hjc-app .btn-primary{background:var(--brand-blue);color:#fff}
.hjc-app .btn-primary:hover{background:var(--brand-blue-hover)}
.hjc-app .btn-outline{background:#fff;border-color:var(--brand-blue);color:var(--brand-blue)}
.hjc-app .btn-outline:hover{border-color:var(--brand-azure);color:var(--brand-azure)}

/* Footer — premium deep blue with azure icon/link hovers. */
.hjc-app .footer{background:var(--brand-blue-deep)}
.hjc-app .footer h4{color:#fff}
.hjc-app .footer a:hover{color:var(--brand-azure)}
.hjc-app .footer__social a:hover,
.hjc-app .footer__phones svg,
.hjc-app .footer__col a[href^="mailto"] svg{color:var(--brand-azure)}

/* Inputs / search — azure focus ring everywhere a field can take focus. */
.hjc-app .form-input:focus,
.hjc-app .filter-search:focus-within,
.hjc-app .search-box input:focus,
.hjc-app .coupon-input input:focus{
  border-color:var(--brand-azure);
  box-shadow:0 0 0 3px rgba(10,199,229,.18);
}

/* ============================================================
   GLOBAL TITLE CASE — frontend presentation only (≥ all breakpoints)

   Capitalises the first letter of every word across the public site. Applied as
   a render-time transform rather than by rewriting strings, which means:
     • database values (product names, faculty, blog titles) are displayed in
       Title Case but STORED exactly as they are — no data migration, no API or
       admin change;
     • acronyms survive untouched — text-transform:capitalize only uppercases the
       first letter of a word and never lowercases the rest, so CA, CMA, CS,
       ACCA, US CMA, GST, DT, IDT and QA stay as-is;
     • it is scoped to .hjc-app, the public layout wrapper, so the admin panel
       is unaffected.

   Opt-outs below cover the places where forcing capitals would be wrong.
   ============================================================ */
.hjc-app{text-transform:capitalize}

/* Typed input must render exactly what the user typed — capitalising it would
   make emails and passwords look altered mid-entry. Values submitted are never
   affected by text-transform, but the display must stay honest. Placeholders
   are separately capitalised, since those ARE static UI copy. */
.hjc-app input,
.hjc-app textarea,
.hjc-app select,
.hjc-app option{text-transform:none}
.hjc-app input::placeholder,
.hjc-app textarea::placeholder{text-transform:capitalize}

/* Machine-readable strings stay verbatim: email addresses, phone numbers,
   coupon codes and any inline code. */
.hjc-app a[href^="mailto:"],
.hjc-app a[href^="tel:"],
.hjc-app code,
.hjc-app pre,
.hjc-app .cart-pro__coupon-active-code{text-transform:none}

/* ============================================================
   FLOATING LAYER — no overlap on mobile/tablet (≤768px)

   Three fixed overlays share the bottom of the screen: the contact dock
   (right), the sales notification (left) and, while the hero is in view, the
   hero CTA grid underneath them. This block fixes the stacking and spacing so
   they can never sit on top of each other. Desktop (≥769px) is untouched.
   ============================================================ */
@media (max-width:768px){

  /* 1. Contact dock stays right and ALWAYS above the notification. */
  .hjc-app .floating-dock,
  .hjc-app .floating-btns,
  .hjc-app .float-fab{z-index:1200}

  /* 2. Notification sits at the bottom, below the dock in stacking order, and
        honours the device's bottom safe area (iPhone home indicator). */
  .hjc-app .fomo-toast{
    z-index:1100;
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    transition:bottom .3s var(--p-ease,ease);
    animation:p-fomoIn .5s var(--p-ease,ease);   /* original slide-in-from-left + fade — unchanged */
  }


  /* 4. Keep the horizontal lane clear too, so even mid-transition the toast can
        never slide under the dock. */
  .hjc-app .fomo-toast{max-width:min(320px,calc(100vw - 110px))}  /* 12px left inset + 68px dock + 16px right inset + 14px gap */
}

/* Slide-up entrance (replaces the horizontal slide on small screens). */
@keyframes p-fomoUp{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:none}
}


/* ============================================================
   HERO CTA BUTTONS — GLASS STYLE (all devices)

   Replaces the four solid gradient fills (cyan / green / blue / glass-grey)
   with one glassmorphism treatment over the hero's blue background, on desktop,
   tablet and mobile alike.

   Appearance only. The 2×2 mobile grid, the desktop four-across row, button
   sizes, gaps, font sizes and icon sizes are all left exactly as they were —
   the only box-model touch is a 1px padding trim per breakpoint, which gives
   back the space the new 1px border takes from the content box (box-sizing is
   border-box) so the rendered button heights do not move.
   ============================================================ */

/* Each variant carries its own gradient + coloured shadow, so all four are
   named here to override them at equal specificity. */
.hjc-app .hero__course-btn,
.hjc-app .hero__course-btn--foundation,
.hjc-app .hero__course-btn--inter,
.hjc-app .hero__course-btn--final,
.hjc-app .hero__course-btn--books{
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  color:#fff;
  border-radius:18px;
  text-align:center;
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
}

/* Hover / tap */
.hjc-app .hero__course-btn:hover,
.hjc-app .hero__course-btn:active,
.hjc-app .hero__course-btn--books:hover{
  background:rgba(255,255,255,.22);
  transform:translateY(-2px);
  filter:none;
}
/* .magnetic:hover is (0,3,0) and would otherwise reinstate its scale transform */
.hjc-app .hero__course-btn.magnetic:hover{
  transform:translateY(-2px);
  filter:none;
}

/* Icons stay white at every size (sizes themselves are untouched). */
.hjc-app .hero .hero__course-btns .hero__course-btn svg{color:#fff}

/* Desktop / tablet: 15px → 14px vertical padding offsets the new 1px border. */
@media (min-width:769px){
  .hjc-app .hero__course-btn{padding:14px 30px}
}

/* Mobile: 9px → 8px for the same reason, holding every button at 54px. */
@media (max-width:768px){
  .hjc-app .hero__course-btn{padding:8px 10px;font-weight:600}
}

/* ============================================================
   SALES NOTIFICATION — RESPONSIVE POSITION (all devices)

   The popup is never hidden by CSS at any width; it stays fixed bottom-left on
   desktop, tablet and mobile. This block only sets the shared stacking order and
   the desktop/tablet inset. The ≤768px rules earlier in this file (safe-area
   inset and the lift when the contact dock is expanded) still apply on top.
   ============================================================ */

/* Stacking, every breakpoint: dock above popup, popup above page content. */
.hjc-app .floating-dock,
.hjc-app .floating-btns,
.hjc-app .float-fab{z-index:1200}
.hjc-app .fomo-toast{z-index:1100}

/* Desktop and tablet (≥769px): bottom-left with a comfortable 24px inset.
   Nothing is docked bottom-left at these widths, so it can never be clipped. */
@media (min-width:769px){
  .hjc-app .fomo-toast{
    left:20px;
    right:auto;
    bottom:calc(20px + env(safe-area-inset-bottom,0px));
  }
}

/* Tablet (769–1023px): a touch narrower so it never crowds the content column. */
@media (min-width:769px) and (max-width:1023px){
  .hjc-app .fomo-toast{max-width:260px}
}

/* ============================================================
   SALES NOTIFICATION — CONTENT VISIBILITY GUARD

   Defensive rules for the "card renders but is empty" failure mode. The toast
   carries backdrop-filter plus two decorative pseudo-elements (::before accent
   rail, ::after progress bar); backdrop-filter establishes a stacking context,
   so if the content ever loses the paint order it can end up behind them and
   the card reads as an empty blurred panel.

   These rules pin the content above the decoration and make its colours
   explicit, so nothing can inherit a white-on-white text colour. Layout,
   position, timing and content are unchanged.
   ============================================================ */
.hjc-app .fomo-toast > *:not(.fomo-toast__close){position:relative;z-index:2}
/* The close button must keep its own position:absolute top-right placement —
   a blanket position:relative on the children turned it into a flex item. */
.hjc-app .fomo-toast__close{z-index:3}
.hjc-app .fomo-toast::before,
.hjc-app .fomo-toast::after{z-index:0}

/* Explicit colours — never inherited, so a theme change upstream cannot make
   the text invisible against the light card. */
.hjc-app .fomo-toast__text{color:var(--gray-600,#4B5563)}
.hjc-app .fomo-toast__text strong{color:var(--p-navy,#0B45AB)}
.hjc-app .fomo-toast__time{color:var(--gray-400,#9CA3AF)}
.hjc-app .fomo-toast__close{color:var(--gray-500,#6B7280)}
.hjc-app .fomo-toast__ico{color:#fff}

/* The card must never collapse to an empty box. */
.hjc-app .fomo-toast{min-height:56px}
.hjc-app .fomo-toast__text,
.hjc-app .fomo-toast__time{overflow:visible}

/* ============================================================
   MOBILE COMPACT PASS — contact dock + sales notification (≤768px)

   The dock now starts COLLAPSED (FloatingButtons.razor), so a phone shows one
   50px bubble until it is tapped. Both overlays are also scaled down ~25–30%
   so they take far less of the screen. Desktop and tablet (≥769px) keep the
   existing widget and popup untouched — every rule here is inside the query.
   ============================================================ */
@media (max-width:768px){

  /* ── contact dock: 50×50 buttons, tighter gaps, lighter shadow ── */
  .hjc-app .floating-btns{gap:8px;padding:6px;right:14px;bottom:20px}
  .hjc-app .float-btn{
    width:50px;height:50px;
    box-shadow:0 6px 14px -8px rgba(11,31,58,.55);
  }
  .hjc-app .floating-dock .floating-btns .float-btn svg{width:20px;height:20px}

  /* single collapsed bubble — same 50px footprint */
  .hjc-app .float-fab{
    width:50px;height:50px;right:14px;bottom:20px;
    box-shadow:0 8px 18px -8px rgba(10,199,229,.7),0 2px 5px rgba(11,31,58,.16);
  }
  .hjc-app .floating-dock .float-fab svg{width:22px;height:22px}

  /* collapse chip scaled with the smaller pill */
  .hjc-app .float-min{width:24px;height:24px;top:-6px;right:-6px}
  .hjc-app .floating-dock .float-min svg{width:12px;height:12px}

  /* expand / collapse transition — scale + fade + slide, 260ms */
  .hjc-app .floating-dock .floating-btns,
  .hjc-app .floating-dock .float-fab{
    transition:opacity .26s var(--p-ease,ease),transform .26s var(--p-ease,ease),visibility .26s;
  }
  .hjc-app .floating-dock .float-fab{transform:translateY(12px) scale(.85)}
  .hjc-app .floating-dock--collapsed .floating-btns{transform:translateY(12px) scale(.92)}
  .hjc-app .floating-dock--collapsed .float-fab{transform:none}

  /* ── sales notification: ~28% smaller, sitting lower ── */
  .hjc-app .fomo-toast{
    left:10px;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    max-width:min(270px,calc(100vw - 84px));
    min-height:0;
    padding:7px 30px 8px 8px;
    gap:7px;
    border-radius:12px;
    box-shadow:0 8px 22px -12px rgba(11,31,58,.38);
  }
  .hjc-app .fomo-toast__ico{width:22px;height:22px;border-radius:6px}
  .hjc-app .floating-dock ~ * .fomo-toast__ico svg,
  .hjc-app .fomo-toast__ico svg{width:12px;height:12px}
  .hjc-app .fomo-toast__text{font-size:10px;line-height:1.3}
  .hjc-app .fomo-toast__time{font-size:8.5px;gap:3px}
  .hjc-app .fomo-toast__time svg{width:8px;height:8px}
  .hjc-app .fomo-toast__close{width:24px;height:24px;font-size:11px;top:5px;right:5px}
  .hjc-app .fomo-toast::after{height:1px}          /* thinner progress bar */
  .hjc-app .fomo-toast::before{width:2.5px}        /* thinner accent rail */

}


/* ============================================================
   MOBILE — FIXED POPUP + UPWARD-EXPANDING CONTACT WIDGET (≤768px)

   The notification is pinned at left:10 / bottom:10 and NEVER moves: all the
   earlier "lift when the dock expands" rules are gone. Instead the dock is
   bottom-anchored, so adding the three buttons grows the stack UPWARD from the
   main bubble and can never reach down over the popup. The two also occupy
   different horizontal lanes, so neither state can overlap.
   Desktop and tablet (≥769px) are untouched.
   ============================================================ */
@media (max-width:768px){

  /* ── notification: permanently bottom-left ── */
  .hjc-app .fomo-toast{
    left:10px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    max-width:min(270px,calc(100vw - 80px));
    z-index:1100;
  }

  /* ── contact widget: 46px buttons, bottom-anchored so it opens upward ── */
  .hjc-app .floating-btns{
    right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    top:auto;                       /* bottom-anchored: growth goes up, not down */
    gap:8px;
    padding:5px;                    /* narrower container */
    transform-origin:bottom right;  /* scale animation grows from the bubble */
    z-index:1200;
  }
  .hjc-app .float-btn{width:46px;height:46px}
  .hjc-app .floating-dock .floating-btns .float-btn svg{width:20px;height:20px}

  .hjc-app .float-fab{
    right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    width:46px;height:46px;
    transform-origin:bottom right;
    z-index:1200;
  }
  .hjc-app .floating-dock .float-fab.float-fab svg{width:20px;height:20px}

  .hjc-app .float-min{width:22px;height:22px;top:-5px;right:-5px}
  .hjc-app .floating-dock .float-min svg{width:11px;height:11px}

  /* ── expand / collapse: scale + fade + slide up, 250ms both ways ── */
  .hjc-app .floating-dock .floating-btns,
  .hjc-app .floating-dock .float-fab{
    transition:opacity .25s var(--p-ease,ease),transform .25s var(--p-ease,ease),visibility .25s;
  }
  .hjc-app .floating-dock .float-fab{transform:translateY(10px) scale(.85)}
  .hjc-app .floating-dock--collapsed .floating-btns{transform:translateY(10px) scale(.9)}
  .hjc-app .floating-dock--collapsed .float-fab{transform:none}
}

/* ============================================================
   CONTACT WIDGET — COMPACT GLASS (mobile only, ≤768px)

   42px circular buttons in a translucent glass tray, flat brand colours and a
   much lighter shadow. Positioning stays where the previous block put it —
   bottom-right, bottom-anchored so the stack opens upward and never reaches
   down over the notification. Desktop and tablet (≥769px) are untouched.
   ============================================================ */
@media (max-width:768px){

  /* ── glass tray ── */
  .hjc-app .floating-btns{
    gap:6px;
    padding:6px;
    right:12px;
    border-radius:999px;
    background:rgba(255,255,255,.42);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    backdrop-filter:blur(16px) saturate(160%);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 6px 16px -10px rgba(11,31,58,.35);   /* was a heavy 40px drop */
  }

  /* ── 42px circular buttons, flat brand colours, soft shadow ── */
  .hjc-app .float-btn{
    width:42px;height:42px;border-radius:50%;
    box-shadow:0 3px 8px -4px rgba(11,31,58,.4);
  }
  .hjc-app .float-btn--call{background:#0B45AB}
  .hjc-app .float-btn--whatsapp{background:#25D366;animation:none}
  .hjc-app .float-btn--telegram{background:#29A9EA}
  .hjc-app .floating-dock .floating-btns .float-btn svg{width:16px;height:16px}

  /* ── collapsed toggle bubble, same 42px footprint ── */
  .hjc-app .float-fab{
    width:42px;height:42px;right:12px;
    box-shadow:0 5px 14px -7px rgba(10,199,229,.75),0 1px 4px rgba(11,31,58,.14);
  }
  .hjc-app .floating-dock .float-fab.float-fab svg{width:18px;height:18px}

  /* collapse chip scaled to the smaller tray */
  .hjc-app .float-min{width:20px;height:20px;top:-5px;right:-5px}
  .hjc-app .floating-dock .float-min svg{width:10px;height:10px}

  /* ── smooth easing on expand / collapse ── */
  .hjc-app .floating-dock .floating-btns,
  .hjc-app .floating-dock .float-fab{
    transition:opacity .25s cubic-bezier(.22,.9,.3,1),
               transform .25s cubic-bezier(.22,.9,.3,1),
               visibility .25s;
  }
}

/* ============================================================
   FACULTY — COMPACT DIRECTORY ON DESKTOP & TABLET (≥769px)

   Replaces the horizontal carousel of large profile cards with the same clean
   tile grid the phone already uses: circular photo, name, subjects. Everything
   dropped (verified/rating pills, Years/Students/Courses stats, bio, "View Full
   Profile") is hidden rather than removed from the DOM, so no markup, routing,
   data or API changes are involved — the whole tile is still the existing
   <a href="/faculty/{code}">.

     ≥1200px : 5 columns × 2 rows = 10 faculty
     769–1199 : 4 columns × 2 rows = 8 faculty
     ≤768px  : unchanged (3-up mobile directory, capped at 9)
   ============================================================ */
@media (min-width:769px){

  /* grid, not a scroller */
  .hjc-app .fcs-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));   /* tablet default */
    gap:22px 18px;
    overflow:visible;
    scroll-snap-type:none;
    padding:2px 0 4px;
    width:100%;
  }
  .hjc-app .fcs-nav,
  .hjc-app .fcs-dots{display:none}                   /* carousel controls */
  .hjc-app .fcs-grid > .fcs-card:nth-child(n+9){display:none}   /* 4×2 = 8 */

  /* the tile is the link — no card chrome */
  .hjc-app .fcs-card{
    flex:none;width:auto;min-width:0;height:auto;
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:0;background:none;border:0;border-radius:0;
    box-shadow:none;backdrop-filter:none;scroll-snap-align:none;
  }
  .hjc-app .fcs-card::before,
  .hjc-app .fcs-card::after{display:none}
  .hjc-app .fcs-card:hover{transform:none;box-shadow:none}

  /* stripped: pills, designation, stats, bio, CTA, decorative layers */
  .hjc-app .fcs-card__top,
  .hjc-app .fcs-card__role,
  .hjc-app .fcs-card__statbox,
  .hjc-app .fcs-card__tagline,
  .hjc-app .fcs-card__cta,
  .hjc-app .fcs-card__glow,
  .hjc-app .fcs-card__spotlight,
  .hjc-app .fcs-card__halo,
  .hjc-app .fcs-card__ring{display:none}

  /* circular photo */
  .hjc-app .fcs-card__photo-wrap{
    width:96px;height:96px;aspect-ratio:1/1;
    margin:0 auto 10px;animation:none;flex:none;
    border-radius:50%;overflow:hidden;
  }
  .hjc-app .fcs-card__photo{
    width:100%;height:100%;border-radius:50%;border:none;
    object-fit:cover;object-position:center top;box-shadow:none;
  }
  .hjc-app .fcs-card__photo--initials{border-radius:50%;font-size:30px}
  .hjc-app .fcs-card:hover .fcs-card__photo{transform:none;filter:none;box-shadow:none}
  /* subtle lift is all the hover feedback a tile needs */
  .hjc-app .fcs-card:hover .fcs-card__photo-wrap{transform:translateY(-3px);transition:transform .25s var(--p-ease,ease)}

  /* name: bold, one line where it fits, two at most */
  .hjc-app .fcs-card__name{
    font-size:clamp(14px,1.05vw,16px);font-weight:700;line-height:1.25;
    letter-spacing:normal;margin:0 0 3px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* subjects: plain comma-separated text, 2 lines max */
  .hjc-app .fcs-card__subjects{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-size:12.5px;font-weight:400;line-height:1.4;color:var(--gray-500);
    margin:0;padding:0;gap:0;text-align:center;
  }
  .hjc-app .fcs-card__subjects span,
  .hjc-app .fcs-card__subjects span.is-active{
    display:inline;background:none;border:0;box-shadow:none;
    padding:0;margin:0;border-radius:0;
    font-size:inherit;font-weight:400;color:inherit;letter-spacing:normal;
  }
  .hjc-app .fcs-card__subjects span:not(:last-child)::after{content:", "}

  .hjc-app .fcs-skel{padding:0}
  .hjc-app .fcs-more{display:flex}          /* footer link shows here too */
}

/* Desktop: 5 across, 10 faculty. */
@media (min-width:1200px){
  .hjc-app .fcs-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 20px}
  .hjc-app .fcs-grid > .fcs-card:nth-child(n+9){display:flex}    /* undo the 8-cap */
  .hjc-app .fcs-grid > .fcs-card:nth-child(n+11){display:none}   /* 5×2 = 10 */
  .hjc-app .fcs-card__photo-wrap{width:104px;height:104px}
}

/* ── Section heading: smaller, lighter, brand blue, tighter ── */
.hjc-app .fcs-title{
  font-weight:700;                                   /* was 900 */
  color:var(--brand-blue,#0B45AB);
  letter-spacing:normal;
  line-height:1.15;
  margin:0 0 6px;
}
@media (min-width:769px){
  /* ~18% down from the old clamp(36px,5vw,64px) cap, and held to one line */
  .hjc-app .fcs-title{font-size:clamp(30px,3.4vw,52px);white-space:nowrap}
  .hjc-app .fcs-subtitle{
    font-size:15px;line-height:1.6;color:var(--gray-500);
    margin:0 auto;max-width:660px;
  }
  /* tighter section rhythm — the main source of the old vertical bulk */
  .hjc-app .fcs-header{margin-bottom:20px}
  .hjc-app .fcs-section{padding-top:38px;padding-bottom:38px}
  .hjc-app .fcs-trustpill{margin-bottom:10px}
}

/* "View All Faculty" — primary blue pill with azure hover, all breakpoints. */
.hjc-app .fcs-more{display:flex;justify-content:center;margin-top:18px}
.hjc-app .fcs-more__btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 26px;border-radius:999px;
  font-size:14px;font-weight:600;
  color:#fff;background:var(--brand-blue,#0B45AB);
  border:1px solid transparent;text-decoration:none;
  box-shadow:0 8px 20px -12px rgba(11,69,171,.75);
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
}
.hjc-app .fcs-more__btn:hover{
  background:var(--brand-azure,#0AC7E5);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -12px rgba(10,199,229,.8);
}

/* A faculty photo that fails to load renders its alt text, which spills out of
   the round frame. Suppressing the visual text leaves a clean circle instead;
   the alt attribute is untouched, so screen readers still announce it, and the
   name is right underneath anyway. */
.hjc-app .fcs-card__photo-wrap{overflow:hidden;border-radius:50%}
.hjc-app img.fcs-card__photo{font-size:0;color:transparent}

/* Ratings — every star on the public frontend uses the azure highlight rather
   than the old amber. Scoped to .hjc-app so the admin panel keeps its own
   colours; app.css itself is left alone. */
.hjc-app .stars,
.hjc-app .star-input__btn.on,
.hjc-app .star-input__btn:hover,
.hjc-app .fcs-pill--rating svg,
.hjc-app .course-card__stat--star svg,
.hjc-app .tm-card__stars{color:#0AC7E5}
.hjc-app .rating-bar__fill{background:#0AC7E5}

/* ============================================================
   FACULTY SECTION — trust pill + decorative icons

   1. "India's Trusted CA Faculty" pill: the peach gradient (#fff7ed → #ffe4cd)
      was the last warm surface in the section. It is now white on a brand-blue
      border with blue text and a blue star.
   2. The floating background icons (book / pencil / cap / star) sat behind the
      heading and the faculty tiles and overlapped the text on narrow screens.
      They are decorative only (aria-hidden), so they are removed.
   ============================================================ */
.hjc-app .fcs-trustpill{
  background:#fff;
  color:var(--brand-blue,#0B45AB);
  border:1px solid rgba(11,69,171,.28);
  box-shadow:0 6px 16px -10px rgba(11,69,171,.45);
}
.hjc-app .fcs-trustpill svg{color:var(--brand-blue,#0B45AB)}

/* decorative floating icons — removed */
.hjc-app .fcs-deco,
.hjc-app .fcs-deco__item{display:none}

/* ============================================================
   HEADER NAV — force-close after navigation

   The dropdowns open on :hover / :focus-within with no state class, so once a
   link is clicked the panel stays up: the anchor keeps focus and the pointer is
   still over the menu. hjc.closeNav (App.razor) blurs the anchor and stamps
   .is-navigating on the nav; this rule beats both triggers until the pointer
   leaves, after which hover behaves normally again.
   ============================================================ */
.hjc-app .header__nav.is-navigating .hnav-drop,
.hjc-app .header__nav.is-navigating .hnav-fly,
.hjc-app .header__nav.is-navigating .hnav-item:hover > .hnav-drop,
.hjc-app .header__nav.is-navigating .hnav-item:focus-within > .hnav-drop,
.hjc-app .header__nav.is-navigating .hnav-sub:hover > .hnav-fly,
.hjc-app .header__nav.is-navigating .hnav-sub:focus-within > .hnav-fly{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .17s ease,transform .17s ease,visibility 0s linear .17s;   /* quick fade, no flicker */
}

/* "Added To Cart" confirmation — brand blue on an azure tint, matching the
   SAVE / % OFF badges. Scoped to .hjc-app so app.css (shared with admin) is
   untouched. The inline check replaces the ✅ emoji, which rendered as a
   different colour glyph on every OS. */
.hjc-app .added-msg{
  background:#E6F9FD;
  color:var(--brand-blue,#0B45AB);
  border:1px solid rgba(11,69,171,.20);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:100%;
}
/* The :not() chain matches responsive-normalize's generic svg clamp, which is
   (0,3,1) and would otherwise size this icon at ~20px. */
.hjc-app .added-msg svg:not([width]):not([data-large]):not(.svg-noclamp){
  width:16px;height:16px;flex:none;color:var(--brand-azure,#0AC7E5);
}
.hjc-app .added-msg a{color:var(--brand-blue,#0B45AB);text-decoration:underline;font-weight:700}
.hjc-app .added-msg a:hover{color:var(--brand-azure,#0AC7E5)}

/* ============================================================
   HEADER — SEARCH AS AN OVERLAY (DESKTOP + TABLET, >=768px)
   ------------------------------------------------------------
   The old behaviour grew .header__search-input inline to
   clamp(150px,18vw,230px). Inside a fixed max-width:1200px flex row that
   width has to come from somewhere, and below ~1024px it came out of the
   nav: measured at 900px and 820px the nav box went 42px -> 66px, i.e. the
   link labels ("Test Series", "Books") wrapped onto a second line and the
   whole menu shifted up. Exactly the reported breakage.

   Fix: on >=768px the input is ALWAYS out of flow (position:absolute,
   anchored to the position:relative .header__inner) and .header__search is
   pinned to a constant 42px -- the width of the magnifier alone. Opening the
   search therefore changes zero geometry: no reflow is even possible,
   because the growing element is no longer a flex item.

   Mobile (<=767.98px) has its own always-expanded search bar and is not
   touched -- every rule below is inside @media (min-width:768px).
   ============================================================ */
@media (min-width:768px){

  /* --- 0. reclaim the 768px dead zone --- */
  /* app.css:347 hides .header__nav/.header__actions at max-width:768px
     (inclusive), but the mobile header block starts at 767.98px. At exactly
     768px -- iPad portrait -- that left a header with no nav AND no actions.
     Re-assert the desktop row here; below 768px this block does not apply, so
     the mobile drawer/hamburger is unaffected. */
  .hjc-app .header__nav{display:flex}
  .hjc-app .header__actions{display:flex;margin-left:auto}
  .hjc-app .header__hamburger{display:none}

  /* --- 1. the row can never wrap, and the nav can never be squeezed --- */
  .hjc-app .header__inner{flex-wrap:nowrap;overflow:visible}
  .hjc-app .header__nav{flex:0 0 auto;flex-wrap:nowrap;white-space:nowrap;min-width:0}
  .hjc-app .header__nav .header__link,
  .hjc-app .header__nav .hnav-top,
  .hjc-app .header__nav .hnav-item{white-space:nowrap;flex:0 0 auto}
  .hjc-app .header__actions{flex:0 0 auto;flex-wrap:nowrap}
  .hjc-app .header__logo{flex:0 0 auto}

  /* --- 2. the search slot is a fixed 42px lane in BOTH states --- */
  /* position:static so the absolute children below anchor to .header__inner
     rather than to this box. */
  .hjc-app .header__search{position:static;flex:0 0 42px;width:42px;height:42px}

  /* --- 3. the overlay panel (a pseudo-element: no extra markup) --- */
  /* inset:2px keeps the animated gradient hairline on .header__inner::before
     visible as a ring around the open overlay. */
  .hjc-app .header__search::before{
    content:"";position:absolute;inset:2px;border-radius:16px;z-index:5;
    background:rgba(255,255,255,.99);
    -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
    box-shadow:inset 0 0 0 1px rgba(11,69,171,.10);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s var(--p-ease),visibility 0s linear .25s;
  }
  .hjc-app .header__search.is-open::before{
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .25s var(--p-ease),visibility 0s linear 0s;
  }

  /* --- 4. the field itself, floating on the panel --- */
  /* right:106px reserves the lane for the magnifier + close buttons. */
  .hjc-app .header__search-input,
  .hjc-app .header__search.is-open .header__search-input{
    position:absolute;left:24px;right:106px;top:50%;
    width:auto;min-width:0;height:44px;margin:0;
    padding:0 46px 0 20px;                 /* right pad = the clear button's lane */
    border:none;outline:none;border-radius:999px;
    background:var(--gray-100);
    font-size:14.5px;font-weight:500;color:var(--p-navy);
    z-index:6;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-50%) translateY(4px);
    /* visibility flips with 0s duration -- NOT interpolated. Blazor's
       FocusAsync() fires in OnAfterRender, one tick after .is-open lands; if
       visibility were mid-transition the element would still compute as
       hidden and focus() would silently no-op (the caller swallows it in a
       catch). The .25s delay applies on CLOSE only, so the fade still reads. */
    transition:opacity .25s var(--p-ease),transform .25s var(--p-ease),
               box-shadow .25s var(--p-ease),visibility 0s linear .25s;
  }
  .hjc-app .header__search.is-open .header__search-input{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateY(-50%);
    box-shadow:inset 0 0 0 1px var(--gray-200);
    transition:opacity .25s var(--p-ease),transform .25s var(--p-ease),
               box-shadow .25s var(--p-ease),visibility 0s linear 0s;
  }
  .hjc-app .header__search.is-open .header__search-input:focus{
    background:#fff;
    box-shadow:inset 0 0 0 1.5px var(--brand-azure,#0AC7E5),0 0 0 4px rgba(10,199,229,.16);
  }
  .hjc-app .header__search-input::placeholder{color:var(--gray-400);font-weight:500}
  .hjc-app .header__search-input::-webkit-search-cancel-button,
  .hjc-app .header__search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}

  /* --- 5. magnifier: in flow when closed, pinned right when open --- */
  /* Because .header__search has an explicit 42px width, the button leaving flow
     on open does not resize the slot -- cart and Login stay put. */
  .hjc-app .header__search.is-open .header__search-btn{
    position:absolute;right:58px;top:50%;transform:translateY(-50%);
    z-index:7;margin:0;
  }

  /* --- 6. the close affordance --- */
  .hjc-app .header__search-close{
    position:absolute;right:14px;top:50%;transform:translateY(-50%);
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:12px;border:none;cursor:pointer;
    background:rgba(11,69,171,.06);color:var(--brand-blue,#0B45AB);
    z-index:7;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s var(--p-ease),background .2s,color .2s,
               visibility 0s linear .25s;
  }
  .hjc-app .header__search.is-open .header__search-close{
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .25s var(--p-ease),background .2s,color .2s,
               visibility 0s linear 0s;
  }
  .hjc-app .header__search-close:hover{background:var(--brand-blue,#0B45AB);color:#fff}
  /* matches the responsive-normalize svg clamp (0,3,1) so 18px actually sticks */
  .hjc-app .header__search-close svg:not([width]):not([data-large]):not(.svg-noclamp){
    width:18px;height:18px;flex:none;
  }

  /* --- 7. clear ✕, riding inside the field's right padding --- */
  .hjc-app .header__search.has-text.is-open .header__search-clear{
    display:inline-flex;align-items:center;justify-content:center;
    position:absolute;right:116px;top:50%;transform:translateY(-50%);
    width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
    background:var(--gray-200);color:var(--gray-600);z-index:7;
    transition:background .2s,color .2s;
  }
  .hjc-app .header__search.has-text.is-open .header__search-clear:hover{
    background:var(--brand-azure,#0AC7E5);color:#fff;
  }
  .hjc-app .header__search-clear svg:not([width]):not([data-large]):not(.svg-noclamp){
    width:13px;height:13px;flex:none;
  }
}

/* Tablet / small desktop: buy back horizontal room so the single row has
   slack even with the longest menu. Text sizes are untouched -- only the
   padding and the nav's left inset tighten. */
@media (min-width:768px) and (max-width:1199.98px){
  .hjc-app .header__nav{margin-left:10px;padding-left:12px;gap:2px}
  .hjc-app .header__link{padding:9px 10px}
  .hjc-app .header__link::after{left:10px;right:10px}
  .hjc-app .header__actions{gap:4px}
  .hjc-app .header__search-input{left:18px}
}
@media (min-width:768px) and (max-width:899.98px){
  .hjc-app .header__nav{margin-left:6px;padding-left:8px}
  .hjc-app .header__link{padding:9px 8px;font-size:13.5px}
  .hjc-app .header__link::after{left:8px;right:8px}
  .hjc-app .header__logo img{height:38px}
}
/* Tightest supported desktop row. Measured with the full production menu
   (Home / Courses / Test Series / Books / Blog / Contact): at 768px the row
   needed 746px against 722px of usable width, so this tier buys back ~45px.
   Below 768px the mobile drawer takes over and none of this applies. */
@media (min-width:768px) and (max-width:849.98px){
  .hjc-app .header__nav{margin-left:4px;padding-left:6px;gap:0}
  .hjc-app .header__link{padding:8px 6px;font-size:12.8px}
  .hjc-app .header__link::after{left:6px;right:6px}
  .hjc-app .header__logo img{height:34px}
  .hjc-app .header__actions{gap:2px}
  .hjc-app .header__divider{display:none}
  .hjc-app .header__icon{width:38px;height:38px}
  .hjc-app .header__search{flex:0 0 38px;width:38px;height:38px}
  .hjc-app .header__search-input{left:14px;right:96px}
  .hjc-app .header__search.is-open .header__search-btn{right:52px}
  .hjc-app .header__search-close{right:12px;width:36px;height:36px}
  .hjc-app .header__search.has-text.is-open .header__search-clear{right:104px}
}

/* Base state for the overlay's close ✕: hidden everywhere, exactly like
   .header__search-clear. The @media (min-width:768px) block above re-displays
   it with a (0,2,0) selector, so it appears only on desktop/tablet — the
   mobile search bar is permanently expanded and has nothing to dismiss. */
.header__search-close{display:none}

/* ============================================================
   BLOG LISTING (/blog) — 4 CARDS PER ROW + SMALLER META ICONS
   ------------------------------------------------------------
   .pb-grid is shared by three places: the homepage teaser section
   (.pb-grid--home), the related-posts strip on a post page, and the /blog
   listing. Everything here is scoped to .blog-page — the wrapper on
   BlogList.razor only — so the other two keep their 3-up layout untouched.
   ============================================================ */

/* Meta icons (calendar / clock / views). The 4-class selector plus the :not()
   chain is required: responsive-normalize.css loads AFTER this file and clamps
   bare svgs to clamp(16px,1.4vw,22px) at (0,3,1), so a 3-class selector ties
   and loses. */
/* Gated to >768px on purpose. These selectors outrank the mobile tile block
   above, which deliberately drops the meta icons to 9px for the 2-up phone
   tile; without the gate they would silently override it. */
@media (min-width:769px){
  .hjc-app .blog-page .pb-grid .pb-card__meta-item svg:not([width]):not([data-large]):not(.svg-noclamp){
    width:12px;height:12px;flex:none;
  }
  .hjc-app .blog-page .pb-grid .pb-card__meta{gap:5px 12px;font-size:11.5px}
}

@media (min-width:1180px){
  .hjc-app .blog-page .pb-grid{grid-template-columns:repeat(4,1fr);gap:20px}

  /* Cards are ~25% narrower at 4-up, so the interior scales with them.
     Titles keep their 2-line clamp and excerpts their 3-line clamp, which is
     what holds the rows to an equal height. */
  .hjc-app .blog-page .pb-grid .pb-card__body{padding:16px 16px 18px;gap:9px}
  .hjc-app .blog-page .pb-grid .pb-card__title{font-size:15.5px;line-height:1.32}
  .hjc-app .blog-page .pb-grid .pb-card__excerpt{font-size:12.5px;line-height:1.55}
  .hjc-app .blog-page .pb-grid .pb-card__badge{top:10px;left:10px;padding:5px 10px;font-size:10px}
  .hjc-app .blog-page .pb-grid .pb-card__cta{padding:8px 15px;font-size:12.5px;gap:6px}
  .hjc-app .blog-page .pb-grid .pb-card__cta svg:not([width]):not([data-large]):not(.svg-noclamp){
    width:13px;height:13px;flex:none;
  }
  .hjc-app .blog-page .pb-grid .pb-card__ph svg:not([width]):not([data-large]):not(.svg-noclamp){
    width:36px;height:36px;flex:none;
  }
}

/* Mobile blog tiles — make the meta-icon reduction actually apply.
   The rule in the ≤768px tile block above asks for 9px, but at (0,3,1) it TIES
   with responsive-normalize.css's `svg:not([width]):not([data-large])
   :not(.svg-noclamp)` clamp — and that file is linked after this one, so the
   tie went to the clamp and the icons rendered at 18px against 10px text
   (which also pushed the views count onto its own line). Four class-level
   selectors plus the same :not() chain settle it at (0,7,1).
   11px rather than the original 9px: sized to the meta text, without dropping
   into sub-10px mush on a 178px-wide tile. */
@media (max-width:768px){
  .hjc-app .blog-page .pb-grid .pb-card__meta-item svg:not([width]):not([data-large]):not(.svg-noclamp),
  .hjc-app .pb-grid .pb-card__meta .pb-card__meta-item svg:not([width]):not([data-large]):not(.svg-noclamp){
    width:11px;height:11px;flex:none;
  }
}

/* ============================================================
   GREEN / MULTI-COLOUR ACCENT SWEEP  —  PUBLIC FRONTEND ONLY
   ------------------------------------------------------------
   Rebinding --green above catches every var(--green) consumer, but app.css
   pairs it with a hardcoded #2d8a27 second stop in several gradients, which
   the token can't reach. Those are re-declared here, .hjc-app-scoped so admin
   keeps its own palette.
   ============================================================ */
.hjc-app .btn-green:hover,
.hjc-app .btn-success:hover{background:var(--brand-blue-hover,#0A5BCF)}
/* NOTE: .hero__course-btn--inter deliberately NOT listed here. The four hero
   CTAs are glass (see the hero CTA block above) and must stay transparent at
   every breakpoint — giving --inter a solid background here would land after
   that block and silently re-solidify just that one button. */
.hjc-app .course-mode-btn--fastrack,
.hjc-app .receipt-banner--ok{background:linear-gradient(135deg,#0B45AB,#0A5BCF)}
.hjc-app .progress-bar__fill{background:linear-gradient(90deg,#0B45AB,#0AC7E5)}

/* Blog image placeholders cycled navy → orange → green → navy. Now four blue
   shades, so a grid of imageless posts still varies without leaving the theme. */
.hjc-app .pb-grid .pb-card:nth-child(4n+2) .pb-card__media{background:linear-gradient(135deg,#0AC7E5,#0AA9C4)}
.hjc-app .pb-grid .pb-card:nth-child(4n+3) .pb-card__media{background:linear-gradient(135deg,#0A5BCF,#0B45AB)}
.hjc-app .pb-grid .pb-card:nth-child(4n+4) .pb-card__media{background:linear-gradient(135deg,#082B73,#0B45AB)}

/* Batch badges — five statuses that must stay tellable apart, so they differ by
   depth of blue rather than by hue. --oos keeps red: it blocks a purchase and
   must not read as just another status. */
.hjc-app .bs-badge--prerec{background:#EAF6FB;color:#0A5BCF;border-color:rgba(10,91,207,.24)}
.hjc-app .bs-badge--soon  {background:#EEF2FA;color:#082B73;border-color:rgba(8,43,115,.24)}