/* ==========================================================================
   LEARNING PATH HUB — v3   (/{locale}/learning-paths/{slug})

   Loaded by resources/views/learning-paths/show_v3.blade.php alone, pushed into
   the head after front.css so its rules win on order as well as on specificity.

   Design donor: public/frontend-test/css/learning-path.css, the prototype twin
   still served at /en/learning-paths-test/{slug}. That file is NOT imported and
   is not a live dependency — it scopes everything to .nlp-page, which never
   matches here, and it leans on the sandbox layout's base.css for its shell
   primitives, which this page does not load. So the shell half below is
   lms/css/all_courses_v3.css (the same one lms/css/learning_paths_v3.css uses),
   and only the hub furniture is ported across.

   Three rules carried over from the index port, for the same reasons:

     1. SCOPE. Everything is under .nlp-hub, the class on #page-content. Two
        classes deep beats every theme rule below it, so there is not one
        !important in this file. .nlp-hub, not .nlp-path: a class one letter off
        the index's .nlp-paths is a bug waiting to happen.

     2. TOKENS ARE PREFIXED --ph-. front.css declares its own :root --green,
        --dark and --primary; an unprefixed token on a container here would
        silently repaint any front.css rule that reaches an element inside the
        page.

     3. BUTTONS ARE .ph-btn, NOT .btn.small. front.css declares
        .small { font-size: 11px !important } — a rule no amount of specificity
        can beat. .btn itself is left alone: the layout's cart and header
        controls use it.

   One thing the twin has no equivalent of: the course cards carry the live
   add-to-cart overlay (.show_add_cart / .learn-course-hover-content /
   .add_cart), because the original hub had it and the sandbox layout could not
   — it loads no jQuery. Those class names are the live ones, so the layout's
   delegated handler keeps working untouched; only the look is set here.

   Course covers are treated as posters throughout, not photographs: several
   carry the course title and the accreditation marks inside the artwork. So
   every cover on this page is `contain` on a tint rather than cropped to fill,
   the same call the index's spotlight makes.

   Order matters: the shell primitives come before the page furniture, because
   .ph-router-sec, .ph-path-sec, .ph-courses-sec, .ph-compare-sec and
   .ph-about-sec each re-set the section padding .sec gives them at equal
   specificity. Keep the halves in this order.
   ========================================================================== */

/* ============ tokens ============ */
.nlp-hub {
  --ph-sky: #3FA9E8;
  --ph-sky-deep: #2286C7;
  --ph-sky-tint: #EDF6FC;
  --ph-sky-line: #D3E9F8;
  --ph-ink: #12303B;
  --ph-teal: #0F6E78;
  --ph-teal-deep: #0A4F57;
  --ph-teal-tint: #EAF4F3;
  --ph-teal-line: #CFE5E2;
  --ph-paper: #FDFEFE;
  --ph-mist: #F6FAFA;
  --ph-line: #E6EDEC;
  --ph-white: #ffffff;
  --ph-text: #3D5058;
  --ph-text-soft: #66787E;
  --ph-gold: #F0C033;
  --ph-gold-deep: #B08A3E;
  --ph-green: #2EA194;
  --ph-green-soft: #E7F3F0;
  --ph-green-deep: #1F7A6F;
  --ph-radius: 18px;
  --ph-shadow: 0 1px 2px rgba(15, 80, 95, .04), 0 8px 24px -10px rgba(15, 80, 95, .09);
  --ph-shadow-lift: 0 3px 6px rgba(15, 80, 95, .05), 0 18px 40px -14px rgba(15, 80, 95, .16);

  /* Height of the v3 sticky chrome. The header is 13px padding either side of a
     40px row plus its 1px border = 67px, measured, and the same number the
     prototype used. Since 2026-08-31 the promo strip sticks with it inside
     .nlp-topbar, so its measured height counts too — lms/js/header_v3.js
     publishes it as --nlp-promo-h and header_v3.css defaults it to 0px, which
     is what a page with no banner and the static category rail below the header
     both come to. The jump bar parks under all of it and every anchored section
     clears the pair. */
  --ph-bar: calc(67px + var(--nlp-promo-h, 0px));
  --ph-jump: 49px;
}

/* ============ reset ============ */
.nlp-hub *,
.nlp-hub *::before,
.nlp-hub *::after { box-sizing: border-box; }

.nlp-hub h1, .nlp-hub h2, .nlp-hub h3,
.nlp-hub p, .nlp-hub ul, .nlp-hub ol { margin: 0; padding: 0; }

.nlp-hub {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ph-text);
  font-size: 16px;
  line-height: 1.65;
  background: var(--ph-paper);
  -webkit-font-smoothing: antialiased;
}

.nlp-hub h1,
.nlp-hub h2,
.nlp-hub h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ph-ink);
  line-height: 1.14;
  letter-spacing: -0.012em;
  font-weight: 600;
}
.nlp-hub a { color: inherit; text-decoration: none; }
.nlp-hub img { max-width: 100%; display: block; }
.nlp-hub button { font-family: inherit; cursor: pointer; }
.nlp-hub :focus-visible { outline: 2px solid var(--ph-sky-deep); outline-offset: 2px; border-radius: 6px; }

/* ============ theme neutralisers ============ */
/* front.css gives every .card an 8px radius, a grey shadow and 20px of bottom
   margin, and rounds the first and last child to 2px. */
.nlp-hub .card {
  background: var(--ph-white);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  box-shadow: var(--ph-shadow);
  margin-bottom: 0;
}
.nlp-hub .card > :first-child,
.nlp-hub .card > :last-child { border-radius: 0; }

/* Bootstrap gives tables their own borders, padding and caption side. */
.nlp-hub table { width: 100%; max-width: none; margin: 0; background: transparent; }

/* ============ buttons ============ */
.nlp-hub .ph-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; background: var(--ph-sky); color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14.5px;
  padding: 13px 26px; text-decoration: none; flex: 0 0 auto;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px -6px rgba(63, 169, 232, .45);
}
.nlp-hub .ph-btn:hover,
.nlp-hub .ph-btn:focus { background: var(--ph-sky-deep); color: #fff; }
.nlp-hub .ph-btn:active { transform: scale(.985); }
.nlp-hub .ph-btn-sm { padding: 9px 19px; font-size: 13px; box-shadow: none; }
.nlp-hub .ph-btn-gold { background: var(--ph-gold); color: #4A3A06; box-shadow: 0 6px 16px -6px rgba(240, 192, 51, .5); }
.nlp-hub .ph-btn-gold:hover,
.nlp-hub .ph-btn-gold:focus { background: #E5B62B; color: #4A3A06; }
.nlp-hub .ph-btn-ghost {
  background: var(--ph-white); color: var(--ph-ink);
  border: 1.5px solid var(--ph-line); box-shadow: none;
}
.nlp-hub .ph-btn-ghost:hover,
.nlp-hub .ph-btn-ghost:focus { border-color: var(--ph-sky); color: var(--ph-sky-deep); background: var(--ph-white); }

/* ============ layout primitives ============ */
.nlp-hub .wrap { max-width: 1320px; margin: 0 auto; padding: 0 30px; }
.nlp-hub .sec { padding: 74px 0 10px; }
.nlp-hub .kicker {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ph-sky-deep);
}
.nlp-hub .sec-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 8px 0 26px; }
.nlp-hub .sec-head h1,
.nlp-hub .sec-head h2 { font-size: clamp(27px, 3.2vw, 38px); }
.nlp-hub .sec-head h1 em,
.nlp-hub .sec-head h2 em { font-style: italic; color: var(--ph-teal); }
.nlp-hub .sec-head .side { margin-left: auto; font-size: 13.5px; color: var(--ph-text-soft); }

/* ============ breadcrumb ============ */
.nlp-hub .ph-crumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 18px 0 0; font-size: 12.5px; color: var(--ph-text-soft);
}
.nlp-hub .ph-crumb a:hover { color: var(--ph-sky-deep); text-decoration: underline; text-underline-offset: 3px; }
.nlp-hub .ph-crumb span { color: var(--ph-sky-line); }
.nlp-hub .ph-crumb b { color: var(--ph-ink); font-weight: 600; }

/* ============ hero ============ */
.nlp-hub .ph-hero { padding: 30px 0 8px; }
.nlp-hub .ph-hero-in {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 48px; align-items: center;
}
.nlp-hub .ph-hero-copy h1 { font-size: clamp(34px, 4.4vw, 52px); margin: 10px 0 16px; }
.nlp-hub .ph-lede { font-size: 16.5px; color: var(--ph-text-soft); max-width: 46ch; }

.nlp-hub .ph-chips { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.nlp-hub .ph-chip {
  background: var(--ph-mist); border: 1px solid var(--ph-line); border-radius: 999px;
  padding: 6px 15px; font-size: 12.5px; font-weight: 600; color: var(--ph-text);
}
.nlp-hub .ph-hero-cta { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 26px; }

/* ---------- featured course ---------- */
.nlp-hub .ph-feat { overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.nlp-hub .ph-feat:hover { box-shadow: var(--ph-shadow-lift); transform: translateY(-3px); }
.nlp-hub .ph-feat-link { display: block; text-decoration: none; }
.nlp-hub .ph-feat-body { display: flex; flex-direction: column; gap: 9px; padding: 22px 26px 16px; }
.nlp-hub .ph-feat-body h2 { font-size: clamp(20px, 2.2vw, 25px); line-height: 1.24; }
.nlp-hub .ph-feat:hover .ph-feat-body h2 { color: var(--ph-teal); }
/* The two controls sit OUTSIDE .ph-feat-link — a <button> cannot live inside an
   <a> — so they carry the card's bottom padding and the body gives it up. No
   z-index needed here: unlike the catalogue and category cards, this card's link
   wraps its content rather than covering it with an overlay. */
.nlp-hub .ph-feat-actions { display: flex; gap: 9px; padding: 0 26px 22px; }
.nlp-hub .ph-feat-actions .ph-btn { flex: 1 1 0; min-width: 0; padding-left: 14px; padding-right: 14px; }

/* ============ shared card furniture ============ */
/* The art box is taken out of flow at a fixed ratio: at their natural height
   these portrait posters ran a card 200px past the end of the copy beside it. */
.nlp-hub .ph-art {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(150deg, var(--ph-teal-tint), var(--ph-sky-tint));
}
.nlp-hub .ph-art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; padding: 16px;
  transition: transform .4s ease;
}
.nlp-hub .ph-feat:hover .ph-art img,
.nlp-hub .ph-card:hover .ph-art img { transform: scale(1.03); }
/* Cover for a course with no artwork — the title fills the frame. */
.nlp-hub .ph-art-text {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 30px 26px; text-align: center;
  font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 600;
  color: var(--ph-teal-deep); line-height: 1.25;
}
/* The featured card keeps the wide "46 Students" pill at the foot of its
   artwork — it has room, and it is the one card on the page big enough to spell
   the figure out. The grid cards below use .students instead (see next rule),
   exactly the split the category page makes between .ct-feat-students and
   .cc .students. */
.nlp-hub .ph-pill {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(255, 255, 255, .95); color: var(--ph-ink);
  border-radius: 999px; padding: 3px 11px;
  font-size: 11px; font-weight: 700; box-shadow: var(--ph-shadow);
}
/* Grid-card students badge — top right, a glyph and a figure. Same rule the
   catalogue and category grids carry: these covers bake the certification name
   into their top band across the middle ~60% of the width, so the badge is
   sized to fit the gutter beside it rather than moved off it. Spelling out
   "46 Students" here eats into the course name underneath. */
.nlp-hub .ph-card .students {
  position: absolute; right: 7px; top: 7px; z-index: 2;
  background: rgba(255, 255, 255, .94); color: var(--ph-ink);
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: 999px; padding: 2px 7px 2px 5px;
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.nlp-hub .ph-card .students svg { width: 10px; height: 10px; flex: none; fill: var(--ph-text-soft); }
.nlp-hub .ph-flag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: var(--ph-gold); color: #4A3A06; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 13px;
  box-shadow: var(--ph-shadow);
}
.nlp-hub .ph-blurb {
  font-size: 13.5px; color: var(--ph-text-soft); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nlp-hub .ph-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 600; color: var(--ph-text-soft);
}
.nlp-hub .ph-meta > span + span::before {
  content: "\00B7"; margin-right: 8px; color: var(--ph-sky-line);
}
.nlp-hub .ph-price { display: flex; align-items: baseline; gap: 9px; }
.nlp-hub .ph-price del { font-size: 13px; color: #9AABB1; }
.nlp-hub .ph-price b {
  font-family: 'Fraunces', Georgia, serif; font-size: 22px;
  font-weight: 600; color: var(--ph-ink);
}
.nlp-hub .ph-go {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--ph-line);
  font-size: 12.5px; font-weight: 700; color: var(--ph-sky-deep);
}

/* ============ stat band ============ */
.nlp-hub .ph-stats { margin-top: 34px; }
.nlp-hub .ph-stats-in {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; padding: 22px 0; border-top: 1px solid var(--ph-line);
  border-bottom: 1px solid var(--ph-line);
}
.nlp-hub .ph-stat { text-align: center; }
.nlp-hub .ph-stat b {
  display: block; font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(26px, 3vw, 34px); font-weight: 500; color: var(--ph-ink);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.nlp-hub .ph-stat span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ph-text-soft); }
.nlp-hub .ph-accred {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap; padding: 16px 0 0; font-size: 12.5px; color: var(--ph-text-soft);
}
.nlp-hub .ph-accred img { height: 44px; width: auto; opacity: .85; }

/* ============ jump bar ============ */
/* Sticks under the v3 header. #container.nlp-shell is overflow:clip rather than
   hidden (see header_v3.css), so a nested sticky works here. */
.nlp-hub .ph-jump {
  position: sticky; top: var(--ph-bar); z-index: 80;
  background: rgba(253, 254, 254, .93); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ph-line); margin-top: 18px;
}
.nlp-hub .ph-jump-in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nlp-hub .ph-jump-in::-webkit-scrollbar { display: none; }
.nlp-hub .ph-jump a {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ph-text-soft);
  padding: 14px 14px; border-bottom: 2.5px solid transparent;
}
.nlp-hub .ph-jump a:hover { color: var(--ph-ink); border-bottom-color: var(--ph-sky-line); }
.nlp-hub .ph-jump a.is-on { color: var(--ph-teal); border-bottom-color: var(--ph-teal); }

/* Anchored sections clear the header and the jump bar both. */
.nlp-hub .ph-path-sec,
.nlp-hub .ph-courses-sec,
.nlp-hub .ph-compare-sec,
.nlp-hub .ph-about-sec { scroll-margin-top: calc(var(--ph-bar) + var(--ph-jump) + 14px); }

/* ============ persona router ============ */
.nlp-hub .ph-router-sec { padding-top: 58px; }
.nlp-hub .ph-router-sec .sec-head .side { max-width: 38ch; }
.nlp-hub .ph-router { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.nlp-hub .ph-persona {
  display: flex; flex-direction: column; gap: 9px; padding: 24px 22px 22px;
  text-decoration: none; transition: box-shadow .2s ease, transform .2s ease;
}
.nlp-hub .ph-persona:hover { box-shadow: var(--ph-shadow-lift); transform: translateY(-3px); }
.nlp-hub .ph-persona b {
  font-family: 'Fraunces', Georgia, serif; font-size: 17.5px;
  font-weight: 600; color: var(--ph-ink); line-height: 1.28;
}
.nlp-hub .ph-persona:hover b { color: var(--ph-teal); }
.nlp-hub .ph-persona p { font-size: 13.5px; color: var(--ph-text-soft); line-height: 1.6; flex: 1; }
.nlp-hub .ph-persona:hover .ph-go { color: var(--ph-teal); }
/* The four read as one run, so the accent walks the palette rather than
   repeating the same blue four times. */
.nlp-hub .ph-router .ph-persona:nth-child(2) .ph-go { color: var(--ph-green-deep); }
.nlp-hub .ph-router .ph-persona:nth-child(3) .ph-go { color: var(--ph-gold-deep); }
.nlp-hub .ph-router .ph-persona:nth-child(4) .ph-go { color: var(--ph-teal); }

/* ============ the path ============ */
.nlp-hub .ph-path-sec { padding-top: 58px; }
.nlp-hub .ph-path-sec .sec-head .side { max-width: 38ch; }
.nlp-hub .ph-path { list-style: none; position: relative; margin: 0; padding: 0; }
/* The rail runs behind the markers, stopping short at both ends so it does not
   trail past the first and last stage. */
.nlp-hub .ph-path::before {
  content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--ph-sky-line) 0 6px, transparent 6px 14px);
}
.nlp-hub .ph-stage { position: relative; padding: 0 0 40px 78px; }
.nlp-hub .ph-stage:last-child { padding-bottom: 0; }
.nlp-hub .ph-stage-n {
  position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ph-sky); color: #fff;
  font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-weight: 500;
  border: 5px solid var(--ph-paper);
}
/* Same walk as the persona row, so the two sections read as one system. */
.nlp-hub .ph-stage:nth-child(2) .ph-stage-n { background: var(--ph-green); }
.nlp-hub .ph-stage:nth-child(3) .ph-stage-n { background: var(--ph-gold-deep); }
.nlp-hub .ph-stage-head { margin-bottom: 18px; }
.nlp-hub .ph-stage-label {
  font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ph-text-soft);
}
.nlp-hub .ph-stage-head h3 { font-size: clamp(20px, 2.3vw, 25px); margin: 5px 0 7px; }
.nlp-hub .ph-stage-head p { font-size: 14.5px; color: var(--ph-text-soft); max-width: 62ch; }
.nlp-hub .ph-stage-courses {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 13px;
}
.nlp-hub .ph-mini {
  display: flex; flex-direction: column; gap: 7px; padding: 17px 19px 16px;
  text-decoration: none; transition: box-shadow .2s ease, transform .2s ease;
}
.nlp-hub .ph-mini:hover { box-shadow: var(--ph-shadow-lift); transform: translateY(-3px); }
.nlp-hub .ph-mini b {
  font-family: 'Fraunces', Georgia, serif; font-size: 15.5px;
  font-weight: 600; color: var(--ph-ink); line-height: 1.3;
}
.nlp-hub .ph-mini:hover b { color: var(--ph-teal); }
.nlp-hub .ph-mini:hover .ph-go { color: var(--ph-teal); }

/* ============ every certification ============ */
.nlp-hub .ph-courses-sec { padding-top: 58px; }
.nlp-hub .ph-courses-sec .sec-head .side { max-width: 36ch; }
.nlp-hub .ph-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: -6px 0 22px; padding-top: 16px; border-top: 1px solid var(--ph-line);
}
.nlp-hub .ph-fbtn {
  border: 1px solid var(--ph-line); background: var(--ph-white); color: var(--ph-text-soft);
  border-radius: 999px; padding: 8px 17px; font-size: 13px; font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nlp-hub .ph-fbtn:hover { border-color: var(--ph-sky-line); color: var(--ph-ink); }
.nlp-hub .ph-fbtn.is-on { background: var(--ph-teal); border-color: var(--ph-teal); color: #fff; }

.nlp-hub .ph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.nlp-hub .ph-card {
  position: relative;
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.nlp-hub .ph-card:hover { box-shadow: var(--ph-shadow-lift); transform: translateY(-3px); }
/* The UA sheet's [hidden] { display: none } loses to the display rule above it. */
.nlp-hub .ph-card[hidden] { display: none; }
/* Whole-card link, under the hover overlay so its buttons stay clickable. */
.nlp-hub .ph-card-link { position: absolute; inset: 0; z-index: 1; }
.nlp-hub .ph-card-body { display: flex; flex-direction: column; gap: 9px; padding: 17px 20px 18px; flex: 1; }
.nlp-hub .ph-card-body h3 {
  font-size: 17.5px; line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nlp-hub .ph-card:hover .ph-card-body h3 { color: var(--ph-teal); }
.nlp-hub .ph-card .ph-price { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--ph-line); }
/* ?focus=<course_id> — the original hub answered the same query string. */
.nlp-hub .ph-card.is-focused { border-color: var(--ph-gold); box-shadow: 0 0 0 3px rgba(240, 192, 51, .45); }

/* --- hover overlay -------------------------------------------------------
   Reuses the live class names (.show_add_cart / .learn-course-hover-content /
   .add_cart) so the delegated jQuery handler in learn_school.blade.php keeps
   working untouched. Only the look changes here.
   ------------------------------------------------------------------------ */
.nlp-hub .ph-card.show_add_cart::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: rgba(10, 45, 55, .55); opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.nlp-hub .ph-card.show_add_cart:hover::before { opacity: 1; }
.nlp-hub .ph-card .learn-course-hover-content {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 3; display: flex; flex-direction: column; gap: 10px; width: calc(100% - 44px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.nlp-hub .ph-card.show_add_cart:hover .learn-course-hover-content { opacity: 1; visibility: visible; }
.nlp-hub .ph-card .learn-view-detail-btn,
.nlp-hub .ph-card .learn-add-cart-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; width: 100%;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13.5px;
  padding: 11px 18px; text-decoration: none; transition: background .15s ease, color .15s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nlp-hub .ph-card .learn-view-detail-btn { background: var(--ph-white); color: var(--ph-ink); }
.nlp-hub .ph-card .learn-view-detail-btn:hover,
.nlp-hub .ph-card .learn-view-detail-btn:focus { background: var(--ph-sky-tint); color: var(--ph-sky-deep); }
.nlp-hub .ph-card .learn-add-cart-btn { background: var(--ph-gold); color: #4A3A06; }
.nlp-hub .ph-card .learn-add-cart-btn:hover,
.nlp-hub .ph-card .learn-add-cart-btn:focus { background: #E5B62B; color: #4A3A06; }

/* ============ compare ============ */
.nlp-hub .ph-compare-sec { padding-top: 58px; }
.nlp-hub .ph-compare-sec .sec-head .side { max-width: 40ch; }
.nlp-hub .ph-compare {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--ph-line) transparent;
}
.nlp-hub .ph-compare::-webkit-scrollbar { height: 7px; }
.nlp-hub .ph-compare::-webkit-scrollbar-thumb { background: var(--ph-line); border-radius: 4px; }
.nlp-hub .ph-compare table { border-collapse: collapse; font-size: 14px; min-width: 700px; }
.nlp-hub .ph-compare th,
.nlp-hub .ph-compare td {
  padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--ph-line);
  border-top: 0; vertical-align: middle; line-height: 1.5;
}
.nlp-hub .ph-compare tbody tr:last-child th,
.nlp-hub .ph-compare tbody tr:last-child td { border-bottom: 0; }
.nlp-hub .ph-compare thead th {
  font-family: 'Fraunces', Georgia, serif; font-size: 15.5px; font-weight: 600;
  color: var(--ph-ink); background: var(--ph-teal-tint);
}
/* The attribute column stays put while the course columns are swiped through. */
.nlp-hub .ph-compare th:first-child,
.nlp-hub .ph-compare td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--ph-white);
  border-right: 1px solid var(--ph-line);
  width: 132px; font-family: 'Poppins', sans-serif; font-size: 10.5px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ph-text-soft);
}
.nlp-hub .ph-compare thead th:first-child { background: var(--ph-teal-tint); }
.nlp-hub .ph-compare .ph-yes { color: var(--ph-green-deep); font-weight: 600; }
.nlp-hub .ph-compare .ph-cprice del { font-size: 12.5px; color: #9AABB1; margin-right: 7px; }
.nlp-hub .ph-compare .ph-cprice b { font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--ph-ink); }
/* The closing row's two buttons, the same pair the course cards offer. They
   stack rather than sitting side by side: the columns are already as narrow as
   the longest course title allows, and two pills in a row forced the table past
   its min-width on every path. Stretched to the column so the pair reads as one
   control, and the ghost sits above the gold — the same order as the card
   overlay, so a visitor moving between the two sees the same shape. */
.nlp-hub .ph-compare .ph-cta-cell { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.nlp-hub .ph-compare .ph-cta-cell .ph-btn { width: 100%; }
.nlp-hub .ph-scroll-hint { margin-top: 11px; font-size: 12.5px; color: var(--ph-text-soft); display: none; }

/* ============ about + faq ============ */
.nlp-hub .ph-about-sec { padding-top: 58px; }
.nlp-hub .faq-grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: 34px; align-items: start;
}
.nlp-hub .faq-intro .sec-head { margin-bottom: 14px; }
.nlp-hub .faq-intro p { font-size: 15px; color: var(--ph-text-soft); margin-top: 8px; max-width: 34ch; }
.nlp-hub .ph-para { font-size: 14.5px; color: var(--ph-text-soft); line-height: 1.7; margin-bottom: 12px; max-width: 48ch; }
.nlp-hub .ph-check {
  margin-top: 18px; padding: 20px 22px; border-radius: 15px;
  background: var(--ph-green-soft); border: 1px solid var(--ph-teal-line);
}
.nlp-hub .ph-check > b {
  display: block; margin-bottom: 11px;
  font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ph-green-deep);
}
.nlp-hub .ph-check ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.nlp-hub .ph-check li {
  display: flex; gap: 10px; font-size: 14px; color: var(--ph-text); line-height: 1.55;
}
.nlp-hub .ph-check li::before { content: "\2713"; color: var(--ph-green-deep); font-weight: 800; flex: 0 0 auto; }

/* <details>/<summary>, so the accordion opens and closes with no JavaScript. */
.nlp-hub .faq-list { display: flex; flex-direction: column; gap: 11px; }
.nlp-hub .faq { border: 1px solid var(--ph-line); border-radius: 15px; background: var(--ph-white); overflow: hidden; }
.nlp-hub .faq summary {
  list-style: none; display: flex; align-items: center; gap: 13px;
  padding: 16px 19px; cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--ph-ink);
}
.nlp-hub .faq summary::-webkit-details-marker { display: none; }
.nlp-hub .faq summary .n {
  font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--ph-sky-deep); flex: 0 0 auto;
}
.nlp-hub .faq summary .q { flex: 1; min-width: 0; }
.nlp-hub .faq summary .pm {
  margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--ph-line); display: grid; place-items: center;
  color: var(--ph-text-soft); font-size: 14px; transition: transform .2s ease;
}
.nlp-hub .faq[open] summary .pm { transform: rotate(45deg); border-color: var(--ph-sky-line); color: var(--ph-sky-deep); }
.nlp-hub .faq .a { padding: 0 19px 17px 48px; font-size: 14px; color: var(--ph-text-soft); line-height: 1.68; }

/* ============ close band ============ */
.nlp-hub .close-band {
  position: relative; overflow: hidden; border-radius: 24px; margin: 78px 0 30px;
  background: linear-gradient(140deg, var(--ph-teal) 0%, var(--ph-teal-deep) 60%, #073A40 100%);
  color: #fff; padding: 52px 54px;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; align-items: center;
}
.nlp-hub .close-band::after {
  content: ""; position: absolute; right: -90px; bottom: -120px; width: 340px; height: 340px;
  border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%; background: rgba(143, 174, 155, .18); pointer-events: none;
}
.nlp-hub .close-band::before {
  content: ""; position: absolute; left: 38%; top: -100px; width: 220px; height: 220px;
  border-radius: 55% 45% 42% 58% / 46% 58% 42% 54%; background: rgba(240, 192, 51, .10); pointer-events: none;
}
.nlp-hub .close-band .kicker { color: var(--ph-gold); }
.nlp-hub .close-band h2 {
  color: #fff; font-size: clamp(28px, 3.4vw, 40px); font-weight: 500;
  margin: 12px 0 12px; position: relative; z-index: 1;
}
.nlp-hub .close-band h2 em { font-style: italic; color: var(--ph-gold); }
.nlp-hub .close-band p {
  font-size: 15px; color: rgba(255, 255, 255, .85); max-width: 50ch;
  position: relative; z-index: 1;
}
.nlp-hub .close-panel {
  position: relative; z-index: 1; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 20px; padding: 26px 28px;
  backdrop-filter: blur(4px);
}
.nlp-hub .close-panel .inc {
  list-style: none; margin: 0 0 18px; display: flex; flex-direction: column;
  gap: 8px; font-size: 13.5px;
}
.nlp-hub .close-panel .inc li { display: flex; gap: 9px; }
.nlp-hub .close-panel .inc li::before { content: "\2713"; color: var(--ph-gold); font-weight: 800; }
.nlp-hub .close-panel .ph-btn { width: 100%; }
.nlp-hub .ph-panel-link {
  display: block; text-align: center; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .8);
}
.nlp-hub .ph-panel-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ============ responsive ============ */
@media (max-width: 1080px) {
  .nlp-hub .ph-hero-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .nlp-hub .ph-feat { max-width: 480px; }
  /* .sec-head keeps its side note in a right-hand column via margin-left: auto,
     which strands it mid-row once the heading takes the full width. */
  .nlp-hub .ph-router-sec .sec-head .side,
  .nlp-hub .ph-path-sec .sec-head .side,
  .nlp-hub .ph-courses-sec .sec-head .side,
  .nlp-hub .ph-compare-sec .sec-head .side { margin-left: 0; max-width: none; }
  .nlp-hub .ph-router { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nlp-hub .ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nlp-hub .ph-scroll-hint { display: block; }
  .nlp-hub .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .nlp-hub .close-band { grid-template-columns: minmax(0, 1fr); padding: 36px 32px; }
}
@media (max-width: 640px) {
  .nlp-hub .wrap { padding-left: 16px; padding-right: 16px; }
  .nlp-hub .sec { padding: 48px 0 8px; }
  .nlp-hub .ph-hero { padding-top: 20px; }
  .nlp-hub .ph-feat { max-width: none; }
  .nlp-hub .ph-stats-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .nlp-hub .ph-accred { justify-content: flex-start; }
  .nlp-hub .ph-router { grid-template-columns: minmax(0, 1fr); }
  .nlp-hub .ph-grid { grid-template-columns: minmax(0, 1fr); }
  .nlp-hub .ph-hero-cta .ph-btn { flex: 1 1 auto; }
  /* A 52px marker plus 78px of indent leaves the copy no room at this width. */
  .nlp-hub .ph-path::before { left: 19px; }
  .nlp-hub .ph-stage { padding-left: 58px; }
  .nlp-hub .ph-stage-n { width: 40px; height: 40px; font-size: 17px; border-width: 4px; }
  .nlp-hub .ph-compare table { min-width: 560px; font-size: 13px; }
  .nlp-hub .ph-compare th,
  .nlp-hub .ph-compare td { padding: 12px 14px; }
  .nlp-hub .ph-compare th:first-child,
  .nlp-hub .ph-compare td:first-child { width: 92px; min-width: 92px; font-size: 9.5px; letter-spacing: .07em; }
  .nlp-hub .close-band { padding: 30px 22px; }
}
/* The hover overlay is the only route to "add to cart" on a card, and a touch
   screen has no hover: it would take two taps, the first of which looks like a
   dead tap. On touch the card is a link to the course, and the course page
   carries its own buy button. */
@media (hover: none) {
  .nlp-hub .ph-card.show_add_cart::before,
  .nlp-hub .ph-card .learn-course-hover-content { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nlp-hub *,
  .nlp-hub *::before,
  .nlp-hub *::after { animation: none; transition: none; }
}