/* academy-newcourses-cards-r1
   Typography + premium 3D course cards for new-courses.html (EN/FR/AR).
   Category colours and illustrations come from academy-illus-r1 tokens
   (--illus-accent, --illus-tint, --illus-panel, --illus-text, --illus-art).
   Does not touch Stripe, checkout, certificates, verify, or consent flows.
   Does not bundle academy-illus-r1 assets; those must already be live. */
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b){
  --ncc-header-clear:calc(env(safe-area-inset-top,0px) + 80px);
  --ncc-dock-clear:calc(env(safe-area-inset-bottom,0px) + 108px);
  --ncc-ink:#1A1630;
  --ncc-muted:#5B5670;
  --ncc-pearl:#F6F1E8;
  --ncc-ease:cubic-bezier(.22,1,.36,1);
}
@media(min-width:900px){
  html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b){--ncc-header-clear:calc(env(safe-area-inset-top,0px) + 92px)}
}

html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) body{
  padding-top:var(--ncc-header-clear)!important;
  padding-bottom:var(--ncc-dock-clear)!important;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif!important;
  scroll-padding-top:var(--ncc-header-clear);
  scroll-padding-bottom:var(--ncc-dock-clear);
}
html[data-ncc="r1"][lang="ar"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) body,
html[data-ncc="r1"][dir="rtl"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) body{
  font-family:"Noto Sans Arabic","Plus Jakarta Sans","Segoe UI",system-ui,sans-serif!important;
}

/* Compact header title is a truncated duplicate of the page h1 ("New …").
   Hide it on these pages so the real, wrapping h1 can sit clear of the bar. */
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .site-header .page-title{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
}

html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .tool-head{
  overflow:visible!important;
  min-height:0!important;
  padding:4px 4px 18px!important;
  margin-bottom:8px!important;
}
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .tool-head h1,
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .tool-head h1 .gx,
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) #main-content h1,
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) #main-content h1 .gx{
  max-width:none!important;
  width:auto!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:unset!important;
  overflow-wrap:anywhere;
  word-break:break-word;
  font-family:inherit!important;
  font-size:clamp(1.55rem,6.8vw,2.4rem)!important;
  line-height:1.2!important;
  letter-spacing:-.03em;
  color:var(--ncc-ink);
}
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .tool-head .sub,
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) #main-content .sub{
  font-family:inherit!important;
  font-size:clamp(.9rem,3.5vw,1.05rem)!important;
  line-height:1.5!important;
  max-width:42rem;
  white-space:normal!important;
  overflow:visible!important;
  color:var(--ncc-muted);
}

html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .sec h2,
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) #main-content .sec h2{
  font-family:inherit!important;
  font-size:clamp(1.2rem,5vw,1.55rem)!important;
  line-height:1.3!important;
  font-weight:700!important;
  letter-spacing:-.02em;
  max-width:none!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:unset!important;
  overflow-wrap:anywhere;
  scroll-margin-top:calc(var(--ncc-header-clear) + 8px);
  scroll-margin-bottom:var(--ncc-dock-clear);
  margin:1.35rem 0 .75rem!important;
  padding:0!important;
  color:var(--ncc-ink);
  position:static!important;
}

html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .field-grid{
  perspective:1100px;
  gap:16px!important;
  padding-bottom:12px;
  align-items:stretch;
}
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .sec:last-of-type{
  padding-bottom:12px;
}

html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) a.card.ncc-card{
  display:flex!important;
  flex-direction:column;
  align-items:stretch;
  padding:0!important;
  margin:0;
  border-radius:28px!important;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background:
    linear-gradient(165deg,color-mix(in srgb,var(--illus-panel,var(--ncc-pearl)) 88%,#fff),#fff 58%);
  border:1px solid color-mix(in srgb,var(--illus-accent,#3B4BB3) 22%,transparent)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 1px 2px rgba(26,22,48,.04),
    0 10px 28px rgba(26,22,48,.08);
  transform:translateZ(0);
  transform-style:preserve-3d;
  transition:transform .4s var(--ncc-ease),box-shadow .4s var(--ncc-ease);
  min-height:0;
}
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) a.card.ncc-card:not([data-cat]){
  --illus-accent:#3B4BB3;
  --illus-tint:#ECE8F0;
  --illus-panel:#F6F1E8;
  --illus-text:#1A1630;
}

html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .ncc-art{
  display:block;
  flex:0 0 auto;
  height:104px;
  background-color:var(--illus-tint,var(--ncc-pearl));
  background-image:var(--illus-art);
  background-repeat:no-repeat;
  background-position:center 58%;
  background-size:118px auto;
  border-bottom:1px solid color-mix(in srgb,var(--illus-accent,#3B4BB3) 14%,transparent);
}
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) a.card.ncc-card:not([data-cat]) .ncc-art{
  background-image:
    radial-gradient(circle at 72% 28%,color-mix(in srgb,var(--illus-accent) 26%,transparent),transparent 58%),
    radial-gradient(circle at 28% 80%,color-mix(in srgb,var(--illus-accent) 16%,transparent),transparent 55%);
}

html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .ncc-body{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:16px 18px 18px;
}
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) a.card.ncc-card h3{
  margin:0 0 8px!important;
  font-family:inherit!important;
  font-size:clamp(1rem,3.7vw,1.16rem)!important;
  line-height:1.32!important;
  font-weight:700!important;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:unset!important;
  color:var(--illus-text,var(--ncc-ink))!important;
}
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .ncc-meta{
  margin:0 0 12px!important;
  font-size:clamp(.75rem,3vw,.86rem);
  line-height:1.4;
  color:var(--ncc-muted);
  white-space:normal!important;
}
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .ncc-price{
  display:inline-flex;
  flex-wrap:wrap;
  align-self:flex-start;
  gap:0 .2em;
  max-width:100%;
  margin:auto 0 0;
  padding:6px 11px;
  border-radius:999px;
  background:color-mix(in srgb,var(--illus-accent,#3B4BB3) 14%,#fff);
  color:var(--illus-text,var(--ncc-ink));
  border:1px solid color-mix(in srgb,var(--illus-accent,#3B4BB3) 22%,transparent);
  font-size:clamp(.72rem,3vw,.84rem);
  font-weight:650;
  line-height:1.4;
  white-space:normal!important;
  overflow-wrap:anywhere;
}

@media(hover:hover) and (pointer:fine){
  @media(prefers-reduced-motion:no-preference){
    html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) a.card.ncc-card:hover,
    html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) a.card.ncc-card:focus-visible{
      transform:perspective(1100px) rotateX(4deg) rotateY(-6deg) translateY(-6px) scale(1.012);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 18px 40px rgba(26,22,48,.14),
        0 4px 10px rgba(26,22,48,.06);
    }
  }
}
@media(prefers-reduced-motion:reduce){
  html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) a.card.ncc-card,
  html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) a.card.ncc-card:hover,
  html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) a.card.ncc-card:focus-visible{
    transform:none!important;
    transition:none!important;
  }
}

html[data-theme="dark"][data-ncc="r1"] body,
html[data-theme="pitch"][data-ncc="r1"] body{
  --ncc-ink:#F4F0EA;
  --ncc-muted:#C4BDD0;
  --ncc-pearl:#1A1630;
}
html[data-theme="dark"][data-ncc="r1"] a.card.ncc-card,
html[data-theme="pitch"][data-ncc="r1"] a.card.ncc-card{
  background:linear-gradient(165deg,var(--illus-panel,#241E3A),color-mix(in srgb,var(--illus-panel,#241E3A) 70%,#000));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 28px rgba(0,0,0,.35);
}
html[data-theme="dark"][data-ncc="r1"] a.card.ncc-card:not([data-cat]),
html[data-theme="pitch"][data-ncc="r1"] a.card.ncc-card:not([data-cat]){
  --illus-tint:#241E3A;
  --illus-panel:#1C1730;
  --illus-text:#C9C0E0;
  --illus-accent:#7C7AE0;
}
html[data-theme="dark"][data-ncc="r1"] .ncc-price,
html[data-theme="pitch"][data-ncc="r1"] .ncc-price{
  background:color-mix(in srgb,var(--illus-accent,#7C7AE0) 22%,transparent);
}

/* Explicit type stack (beat Inter Tight / Poppins / Noto Kufi !important skins). */
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) body,
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) body :is(.tool-head, .tool-head h1, .tool-head h1 .gx, .tool-head .sub, .crumb, .sec, .sec h2, .ncc-card, .ncc-card h3, .ncc-meta, .ncc-price, #main-content, #main-content h1, #main-content h2){
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif!important;
}
html[data-ncc="r1"][lang="ar"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) body,
html[data-ncc="r1"][dir="rtl"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) body,
html[data-ncc="r1"][lang="ar"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) body :is(.tool-head, .tool-head h1, .tool-head h1 .gx, .tool-head .sub, .crumb, .sec, .sec h2, .ncc-card, .ncc-card h3, .ncc-meta, .ncc-price, #main-content, #main-content h1, #main-content h2),
html[data-ncc="r1"][dir="rtl"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) body :is(.tool-head, .tool-head h1, .tool-head h1 .gx, .tool-head .sub, .crumb, .sec, .sec h2, .ncc-card, .ncc-card h3, .ncc-meta, .ncc-price, #main-content, #main-content h1, #main-content h2){
  font-family:"Noto Sans Arabic","Plus Jakarta Sans","Segoe UI",system-ui,sans-serif!important;
}

/* Hide the compact header title duplicate completely (it is an h1.page-title). */
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .site-header .hdr-context,
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .site-header h1.page-title{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
  font-size:1px!important;
}

html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b){scroll-padding-top:var(--ncc-header-clear);scroll-padding-bottom:var(--ncc-dock-clear);}

/* Keep the page paintable: overflow-x:clip + 3D transforms can drop layers in Chromium. */
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b),
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) body{
  overflow-x:visible!important;
}
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .field-grid{
  perspective:none;
}
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) a.card.ncc-card{
  transform:none;
  transform-style:flat;
}
@media(hover:hover) and (pointer:fine){
  @media(prefers-reduced-motion:no-preference){
    html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .field-grid{
      perspective:1100px;
    }
    html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) a.card.ncc-card:hover,
    html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) a.card.ncc-card:focus-visible{
      transform-style:preserve-3d;
    }
  }
}

/* 1031kp: an inline IntersectionObserver on these pages sets style.opacity=0 on
   .card and section > * with threshold:0.1. The .sec > .wrap that holds all
   42 cards is taller than 10% of the viewport, so isIntersecting never fires
   and the grid stays invisible. Force the content to paint. */
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .sec > *,
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .field-grid,
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) a.card.ncc-card{
  opacity:1 !important;
}
/* 1031kp: mp-shell .mpw-winsec { overflow:hidden } clips the hero window
   (purple control at the bottom-right). Name the window class and drop any
   fixed height. */
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .tool-head.mpw-winsec,
html[data-ncc="r1"]:root:not(#mp0):not(#mp1):not(#b55a):not(#b55b) .mpw-winsec{
  overflow:visible !important;
  height:auto !important;
  max-height:none !important;
}