/* ==========================================================================
   Naturalistico course detail (PDP) — v3 design
   --------------------------------------------------------------------------
   Loaded ONLY by lms/learn/course_detail_v3.blade.php, which serves both the
   live product page (/{locale}/learn/course/{course_id}/{slug}, while
   HomeController::COURSE_DETAIL_LIVE_VIEW points at it) and its preview
   (/en/learn/course-v3/{course_id}/{slug}). The original design,
   course_detail.blade.php, keeps its own inline <style> block and is not
   touched by anything in here — so flipping the constant back is safe.

   THIS FILE IS A SUPPLEMENT, NOT A STANDALONE SHEET.
   The view loads lms/css/home_v3.css first and this file second. That is
   deliberate:
     - every design token (--sky, --ink, --radius, --shadow, …) is declared
       there, on .nlp-page, and simply inherited here;
     - the shared component library — .wrap, .sec, .kicker, .sec-head, .btn,
       .card, .rail / .rail-band / .cc, .faq, .stat, .why, .close-band — is
       already written there and is reused verbatim, so a PDP rail and a
       homepage rail cannot drift apart. home_v3.js drives both.
   Only what the homepage has no equivalent for is written below.

   Scope: every rule is under .nlp-page for the same two reasons home_v3.css
   gives — the page runs inside lms/layouts/learn_school.blade.php with
   Bootstrap + Nifty + front.css loaded, and (0,2,x) beats the theme's
   (0,1,x) without a single !important.

   Two kinds of selector appear here:
     1. .pd-*  — markup this view owns. Free to change.
     2. legacy names (.learn-faq-item, .learn-bvb-*, .lp-strip, .pcard, …) —
        markup that comes from SHARED partials the live page also renders.
        Those partials are included unchanged and restyled from here, which is
        what keeps the twin from needing forked copies of them. Do not rename
        anything in group 2 without checking the live page.
   ========================================================================== */

.nlp-page {
  /* The v3 header is sticky and ~67px tall. The sticky buy card and the
     in-page section nav both park below it, and an anchor jumped to from that
     nav clears both. One number moves the set. */
  --pd-head-offset: 86px;
  --pd-nav-h: 54px;
  --pd-aside: 372px;
}

/* ==========================================================================
   1. Page shell
   ========================================================================== */

/* The two-column spine: content on the left, the buy card on the right.
   Runs from the hero all the way past the reviews, exactly as the live page
   does, so the card is beside every section a visitor might decide on.

   Three areas rather than two columns, because the stacking order has to change
   at the breakpoint. Desktop puts the card beside both rows; one column would
   otherwise stack it AFTER every section, which on a phone buries the price and
   the enrol button under the whole page — and takes the sticky-bar trigger down
   there with it. Named areas let the mobile order be hero → card → content. */
.nlp-page .pd-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pd-aside);
  grid-template-areas:
    "hero  aside"
    "main  aside";
  gap: 0 46px;
  align-items: start;
  /* Stacking context for the three areas. Without it the hero's full-bleed
     band — .pd-hero is position:relative, so it paints in the positioned
     layer — covered the top of the buy card, which is not positioned and
     therefore paints underneath. It cost the price row and the guarantee line
     on every viewport where the card is NOT sticky (sticky positions it and
     accidentally hid the bug on desktop). Explicit z-index on all three areas
     decides the order here instead of leaving it to paint-order trivia. */
  position: relative;
  z-index: 0;
}

.nlp-page .pd-hero {
  grid-area: hero;
  z-index: 0;
}

.nlp-page .pd-main {
  grid-area: main;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* padding-top matches .pd-hero's, so the card's top edge lines up with the
   breadcrumb rather than sitting flush against the category rail. It also makes
   the resting state agree with the stuck state, which already clears the header
   by --pd-head-offset — without it the card gained a gap only once you scrolled. */
.nlp-page .pd-aside {
  grid-area: aside;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding-top: 26px;
}

/* Sticky needs three things and misses silently without any of them:
   - the column must STRETCH (align-items:start above would shrink it to its
     content and leave the card no distance to travel);
   - the sticky element's own parent must be full height for the same reason;
   - #container must not be overflow:hidden — header_v3.css switches it to
     overflow:clip precisely so this works, which is why the view sets
     $v3_shell. */
@media (min-width: 1081px) {
  .nlp-page .pd-aside {
    align-self: stretch;
  }

  .nlp-page .pd-sticky {
    height: 100%;
  }

  .nlp-page .pd-buy {
    position: sticky;
    top: var(--pd-head-offset);
  }
}

/* ==========================================================================
   2. Hero
   ========================================================================== */

/* The tinted band behind the hero is its OWN grid item, spanning row 1 across
   every column, rather than a pseudo-element on .pd-hero.

   The pseudo-element version could not bleed correctly. `left: 50%` +
   `translateX(-50%)` + `100vw` centres a band on its own element, and .pd-hero
   is the LEFT COLUMN — not the middle of the page. So the band came out
   centred on the hero copy and stopped short of the right edge by half the
   aside column plus the gap: invisible at 1440, a wide white strip at 1840.

   As a grid item spanning `1 / -1` its area IS the full .wrap content width,
   and .wrap is centred on the viewport, so a percentage margin resolves
   against the right box: `calc(50% - 50vw)` on both sides widens it to exactly
   100vw with its edges on the viewport, at any width.

   Height comes for free — row 1 is the hero row — and align-self:stretch plus
   a negative bottom margin lets it run past the hero without changing the row.
   The overshoot is clipped by .nlp-page's overflow-x: clip. */
.nlp-page .pd-band {
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: stretch;
  margin-inline: calc(50% - 50vw);
  margin-bottom: -70px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 0%, rgba(63, 169, 232, .10), rgba(63, 169, 232, 0) 62%),
    linear-gradient(180deg, #EDF6FC 0%, #F7FBFD 62%, var(--paper) 100%);
}

/* Positioned, so it paints above the band without needing a z-index of its own
   (.pd-shell is the stacking context that decides the order). */
.nlp-page .pd-hero {
  position: relative;
  padding: 26px 0 40px;
}

/* breadcrumbs */
.nlp-page .pd-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-soft);
  margin-bottom: 20px;
}

.nlp-page .pd-crumbs a {
  text-decoration: none;
}

.nlp-page .pd-crumbs a:hover {
  color: var(--sky-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nlp-page .pd-crumbs .sep {
  color: var(--sky-line);
}

.nlp-page .pd-crumbs .cur {
  color: var(--ink);
  font-weight: 600;
}

.nlp-page .pd-crumbs .home-ic {
  width: 15px;
  height: 15px;
  display: block;
}

/* chips: best-seller / new, students, last updated, school */
.nlp-page .pd-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.nlp-page .pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--text-soft);
  text-decoration: none;
}

.nlp-page .pd-chip svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.nlp-page .pd-chip.best {
  background: var(--gold);
  border-color: transparent;
  color: #4A3A06;
  font-weight: 700;
}

.nlp-page .pd-chip.newc {
  background: var(--green-soft);
  border-color: var(--teal-line);
  color: var(--green-deep);
  font-weight: 700;
}

.nlp-page .pd-chip.students {
  color: var(--ink);
}

.nlp-page a.pd-chip:hover {
  border-color: var(--sky-line);
  color: var(--sky-deep);
}

.nlp-page .pd-hero h1 {
  font-size: clamp(30px, 3.9vw, 48px);
  font-weight: 500;
  margin: 0 0 16px;
  max-width: 17ch;
}

/* Course titles are set by editors and often run long; 17ch is a target, not
   a cap, so let a single long word break rather than widen the column. */
.nlp-page .pd-hero h1 {
  overflow-wrap: break-word;
}

.nlp-page .pd-lede {
  font-size: 16.5px;
  color: var(--text-soft);
  max-width: 62ch;
}

.nlp-page .pd-lede p {
  margin: 0 0 .7em;
}

.nlp-page .pd-lede>*:last-child {
  margin-bottom: 0;
}

.nlp-page .pd-lede a {
  color: var(--sky-deep);
  font-weight: 600;
}

/* "read more" on phones, where the lede is clamped */
.nlp-page .pd-lede.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nlp-page .pd-lede-more {
  background: none;
  border: 0;
  padding: 4px 0 0;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--sky-deep);
}

.nlp-page .pd-lede-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- trust row ---------- */
.nlp-page .pd-trust {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.nlp-page .pd-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}

.nlp-page a.pd-trust-item:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.nlp-page .pd-trust-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.nlp-page .pd-trust-sub {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-soft);
}

.nlp-page .pd-tp-stars {
  display: inline-flex;
  gap: 2px;
}

.nlp-page .pd-tp-stars svg {
  width: 17px;
  height: 17px;
  display: block;
}

.nlp-page .pd-laurel {
  width: 26px;
  height: auto;
  opacity: .75;
  flex: 0 0 auto;
}

.nlp-page .pd-trust-item .stars {
  color: var(--gold);
  letter-spacing: 1px;
  font-size: 12px;
  display: block;
}

/* ---------- mobile hero art (desktop shows it inside the buy card) ---------- */
.nlp-page .pd-hero-art {
  display: none;
}

/* ==========================================================================
   3. Buy card
   ========================================================================== */

.nlp-page .pd-buy {
  overflow: hidden;
}

.nlp-page .pd-buy-art {
  position: relative;
  display: block;
  background: #F5F1E6;
}

.nlp-page .pd-buy-art img {
  width: 100%;
  height: auto;
  display: block;
}

.nlp-page .pd-buy-art.is-video {
  cursor: pointer;
}

.nlp-page .pd-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 45, 55, .18);
  transition: background .2s ease;
}

.nlp-page .pd-buy-art:hover .pd-play {
  background: rgba(10, 45, 55, .3);
}

.nlp-page .pd-play i {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--sky-deep);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lift);
  transition: transform .2s ease;
}

.nlp-page .pd-buy-art:hover .pd-play i {
  transform: scale(1.06);
}

.nlp-page .pd-play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.nlp-page .pd-buy-body {
  padding: 18px 20px 20px;
}

/* price */
.nlp-page .pd-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.nlp-page .pd-now {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

.nlp-page .pd-was {
  font-size: 14px;
  color: var(--text-soft);
  text-decoration: line-through;
}

.nlp-page .pd-off {
  background: #FDEBD7;
  color: var(--orange-deep);
  font: 700 11px/1 'Poppins', sans-serif;
  padding: 5px 8px;
  border-radius: 6px;
}

.nlp-page .pd-guarantee {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-soft);
  margin-top: 9px;
}

.nlp-page .pd-guarantee i {
  font-style: normal;
  color: var(--sky-line);
  font-size: 7px;
}

/* ctas — .btn comes from home_v3.css, only the block behaviour is added */
.nlp-page .pd-cta {
  width: 100%;
  margin-top: 15px;
}

.nlp-page .pd-cta.ghost {
  margin-top: 9px;
}

/* feature checklist */
.nlp-page .pd-feats {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nlp-page .pd-feats li {
  position: relative;
  padding-left: 24px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.45;
}

.nlp-page .pd-feats li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--green-deep);
  font-weight: 800;
  font-size: 13px;
}

/* payments */
.nlp-page .pd-pay {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px dashed var(--line);
}

.nlp-page .pd-pay-label {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.nlp-page .pd-pay-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.nlp-page .pd-pay-row img {
  height: 21px;
  width: auto;
}

/* ==========================================================================
   4. Stat band + section nav
   ========================================================================== */

/* One column per stat, however many the view built. The band is 4 tiles at most
   but drops the audio tile on a course with no clips and the rating tile on one
   with no usable score, so a fixed repeat(4, …) left a blank cell on the right
   for every such course. grid-auto-flow: column sizes the track list from the
   child count instead, and needs no per-count class. */
.nlp-page .pd-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 30px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.nlp-page .pd-stat {
  background: var(--white);
  padding: 18px 14px;
  text-align: center;
}

.nlp-page .pd-stat b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 27px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.nlp-page .pd-stat span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* In-page nav. Sticks under the header and scroll-spies the sections, which
   is the PDP's version of the article twin's contents rail. */
.nlp-page .pd-nav {
  position: sticky;
  top: var(--pd-head-offset);
  z-index: 20;
  margin: 26px 0 0;
  background: rgba(253, 254, 254, .92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.nlp-page .pd-nav-in {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  height: var(--pd-nav-h);
}

.nlp-page .pd-nav-in::-webkit-scrollbar {
  display: none;
}

.nlp-page .pd-nav a {
  flex: 0 0 auto;
  text-decoration: none;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  padding: 8px 14px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}

.nlp-page .pd-nav a:hover {
  color: var(--ink);
  background: var(--mist);
}

.nlp-page .pd-nav a.is-on {
  color: var(--sky-deep);
  background: var(--sky-tint);
}

/* ==========================================================================
   5. Sections in the main column
   ========================================================================== */

/* .sec (home_v3) is 74px of top padding, right for full-width bands but too
   airy for stacked blocks inside one column. */
.nlp-page .pd-sec {
  padding-top: 52px;
  scroll-margin-top: calc(var(--pd-head-offset) + var(--pd-nav-h) + 12px);
}

.nlp-page .pd-sec>.kicker {
  display: block;
}

.nlp-page .pd-sec>h2 {
  font-size: clamp(24px, 2.7vw, 32px);
  margin: 8px 0 6px;
}

.nlp-page .pd-sec>h2 em {
  font-style: italic;
  color: var(--teal);
}

.nlp-page .pd-sec-sub {
  font-size: 14.5px;
  color: var(--text-soft);
  margin: 0 0 22px;
  max-width: 60ch;
}

/* .sec-head is a baseline-aligned row (heading left, .side pushed right). A
   full sentence does not belong on that right edge, so a section that needs a
   standfirst stacks instead. */
.nlp-page .sec-head.pd-head-stack {
  display: block;
  margin-bottom: 22px;
}

.nlp-page .sec-head.pd-head-stack .pd-sec-sub {
  margin: 8px 0 0;
}

.nlp-page .pd-sec>h2:last-child {
  margin-bottom: 22px;
}

.nlp-page .pd-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 52px 0 0;
}

/* ---------- "this course includes" ---------- */
.nlp-page .pd-incl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.nlp-page .pd-incl-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 17px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.nlp-page .pd-incl-item:hover {
  border-color: var(--sky-line);
  box-shadow: var(--shadow);
}

.nlp-page .pd-incl-ic {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--sky-tint);
  display: grid;
  place-items: center;
}

.nlp-page .pd-incl-ic img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.nlp-page .pd-incl-item b {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.35;
}

.nlp-page .pd-incl-item span {
  display: block;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
  margin-top: 2px;
}

/* ---------- overview prose (shared partial: course_landing_content) ---------- */
.nlp-page .pd-prose {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--text);
  overflow-wrap: break-word;
}

.nlp-page .pd-prose .learn-course-detail-item {
  margin-bottom: 18px;
}

.nlp-page .pd-prose .learn-course-detail-item:last-child {
  margin-bottom: 0;
}

.nlp-page .pd-prose .learn-course-detail-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin: 30px 0 10px;
}

.nlp-page .pd-prose .learn-course-detail-item.title:first-child .learn-course-detail-title {
  margin-top: 0;
}

.nlp-page .pd-prose .learn-course-detail-text {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--text);
}

.nlp-page .pd-prose .learn-course-detail-item.image img {
  border-radius: 14px;
  margin: 6px 0;
}

.nlp-page .pd-prose .learn-course-detail-item.image img.pull-left {
  margin-right: 22px;
}

.nlp-page .pd-prose .learn-course-detail-item.image img.pull-right {
  margin-left: 22px;
}

.nlp-page .pd-prose .benefit_item {
  align-items: flex-start;
  gap: 2px;
  margin-top: 9px;
}

.nlp-page .pd-prose .benefit_item img {
  width: 19px;
  height: 19px;
  margin-top: 4px;
}

.nlp-page .pd-prose .benefit_item_name {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

.nlp-page .pd-prose .learn-course-detail-item.drop_point {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
}

.nlp-page .pd-explore {
  font-size: 14.5px;
  color: var(--text-soft);
  margin-top: 22px;
}

.nlp-page .pd-explore a {
  color: var(--sky-deep);
  font-weight: 600;
}

.nlp-page .pd-explore a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nlp-page #landing_gif img {
  border-radius: var(--radius);
  margin: 0 auto;
}

/* ---------- accordions (shared markup: .learn-faq-item) ----------
   One treatment covers BOTH the syllabus and the FAQ: both come from partials
   built out of .learn-faq-item / .learn-faq-question / .learn-faq-answer, and
   both are opened by the same delegated jQuery handler the live page uses (it
   toggles inline display plus .is-open). Nothing here touches that contract.

   Every selector is qualified with #course_syllabus / #faq on purpose. front.css
   already styles these two blocks through ID selectors — `#faq .learn-faq-item`
   is (1,1,0) and beats a plain `.nlp-page .learn-faq-item` (0,2,0) — so an
   unqualified rule here would simply never apply. The numbered counter badge and
   the +/− control ARE front.css's, kept because they are good; only the palette,
   radius and type are brought onto the v3 scale. */
.nlp-page #course_syllabus .learn-faq-item,
.nlp-page #faq .learn-faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 14px 18px;
  margin-bottom: 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.nlp-page #course_syllabus .learn-faq-item:hover,
.nlp-page #faq .learn-faq-item:hover {
  border-color: var(--sky-line);
}

.nlp-page #course_syllabus .learn-faq-item.is-open,
.nlp-page #faq .learn-faq-item.is-open {
  background: var(--white);
  border-color: var(--sky-line);
  box-shadow: var(--shadow);
}

.nlp-page #course_syllabus .learn-faq-question,
.nlp-page #faq .learn-faq-question {
  gap: 14px;
}

.nlp-page #course_syllabus .learn-faq-question::before,
.nlp-page #faq .learn-faq-question::before {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--sky-tint);
  border-color: var(--sky-line);
  color: var(--sky-deep);
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.nlp-page #course_syllabus .learn-faq-question-title,
.nlp-page #faq .learn-faq-question-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
}

.nlp-page #course_syllabus .panel-module-duration,
.nlp-page #faq .panel-module-duration {
  flex: 0 0 auto;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.nlp-page #course_syllabus .faq-keyboard-arrow,
.nlp-page #faq .faq-keyboard-arrow {
  float: none;
  width: 28px;
  height: 28px;
  border-color: var(--line);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.nlp-page #course_syllabus .learn-faq-item.is-open .faq-keyboard-arrow,
.nlp-page #faq .learn-faq-item.is-open .faq-keyboard-arrow {
  border-color: var(--sky-line);
  background: var(--sky-tint);
}

.nlp-page #course_syllabus .faq-keyboard-arrow::before,
.nlp-page #faq .faq-keyboard-arrow::before {
  color: var(--sky-deep);
  font-size: 18px;
}

.nlp-page #course_syllabus .learn-faq-answer,
.nlp-page #faq .learn-faq-answer {
  padding: 4px 8px 6px 48px;
}

.nlp-page #course_syllabus .learn-faq-answer p,
.nlp-page #faq .learn-faq-answer p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-soft);
  text-align: left;
}

.nlp-page .learn-faq-answer .chatgpt-audio {
  margin-top: 12px;
}

/* syllabus summary line, injected by the inline script under the heading */
.nlp-page #course_syllabus .course-syllabus-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--text-soft);
  margin: 0 0 20px;
}

/* ---------- why choose (own markup, home_v3 .why vocabulary) ---------- */
.nlp-page .pd-why {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.nlp-page .pd-why-card {
  padding: 22px 24px;
}

.nlp-page .pd-why-ic {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
}

.nlp-page .pd-why-ic .material-icons {
  font-size: 22px;
  color: #fff;
}

.nlp-page .pd-why-ic.t1 {
  background: var(--sky);
}

.nlp-page .pd-why-ic.t2 {
  background: var(--green);
}

.nlp-page .pd-why-ic.t3 {
  background: var(--teal);
}

.nlp-page .pd-why-ic.t4 {
  background: var(--gold-deep);
}

.nlp-page .pd-why-card b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 17.5px;
  color: var(--ink);
  margin-bottom: 5px;
  line-height: 1.3;
}

.nlp-page .pd-why-card p {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.62;
}

/* ---------- headings that live inside shared partials ----------
   The syllabus, certificate, reviews, bonuses and FAQ blocks carry their own
   eyebrow + heading, and for three of them that heading is INSIDE the
   conditional — a course with no reviews renders no "Course reviews" title at
   all. Hiding them and re-authoring the headings in this view would have
   printed a title above an empty section on those courses, so the partial's
   markup is restyled into the v3 kicker/h2 pair instead. */
.nlp-page .learn-headline-label {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sky-deep);
  margin: 0 0 8px;
}

/* the eyebrow icons are a different illustration set from the v3 language */
.nlp-page .learn-headline-label img {
  display: none;
}

.nlp-page .learn-headline-label .ml-1 {
  margin-left: 0;
}

.nlp-page #course_syllabus .hd2_36,
.nlp-page #certificate_content .hd2_36,
.nlp-page #course_review .hd2_36,
.nlp-page #school_bonus .hd2_36,
.nlp-page #faq .hd2_36 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(24px, 2.7vw, 32px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
}

/* ---------- certificate (shared partial) ---------- */
.nlp-page #certificate_content .pt-16 {
  font-size: 15px;
  color: var(--text-soft);
  max-width: 62ch;
}

.nlp-page #certificate_content .row {
  margin: 0 0 22px;
}

.nlp-page #certificate_content .row>[class*="col-"] {
  padding: 0;
  width: auto;
  float: none;
}

.nlp-page .learn-certificate-template-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}

.nlp-page .certificate-shadow-left,
.nlp-page .certificate-shadow-right {
  display: none;
}

/* ---------- instructor / institution (shared partial) ---------- */
.nlp-page .learn-course-instructor-contain,
.nlp-page #instructor_info>.flex {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 28px;
}

.nlp-page #instructor_info>.flex {
  display: flex;
  gap: 22px;
}

.nlp-page .learn-course-instructor-contain .flex {
  gap: 22px;
}

.nlp-page .learn-course-instructor-avatar {
  flex: 0 0 auto;
}

.nlp-page .learn-course-instructor-avatar img {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--white);
  box-shadow: var(--shadow);
}

.nlp-page .learn-course-instructor-avatar.institution img {
  border-radius: 16px;
  object-fit: contain;
  background: var(--mist);
}

.nlp-page .learn-instructor-bio-content {
  min-width: 0;
}

.nlp-page .learn-instructor-bio-content .hd2_36 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 10px;
}

.nlp-page .learn-color-grey {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.nlp-page .learn-instructor-specialize-contain,
.nlp-page .learn-detail-contain-certificate {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}

.nlp-page .learn-instructor-specialize-contain .learn-course-category-item,
.nlp-page .learn-instructor-cert-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  background: var(--sky-tint);
  color: var(--sky-deep);
  border: 1px solid var(--sky-line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  max-width: 100%;
}

.nlp-page .learn-instructor-cert-tag {
  background: var(--teal-tint);
  color: var(--teal-deep);
  border-color: var(--teal-line);
}

.nlp-page .instructor-bio-description {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-soft);
}

/* ---------- reviews (shared partial) ---------- */
.nlp-page .learn-home-review-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nlp-page .learn-home-review-item .pt-15 {
  font-size: 15.5px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.4;
}

.nlp-page .learn-review-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
}

.nlp-page .learn-home-review-item .font-italic {
  font-size: 12px;
  color: var(--text-soft);
}

.nlp-page .learn-home-review-item-student {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.nlp-page .learn-review-placeholder,
.nlp-page .placeholder-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.nlp-page .placeholder-avatar {
  background: var(--sky-tint);
  display: grid;
  place-items: center;
}

.nlp-page .student-name .pt-16 {
  font-size: 14px;
  color: var(--ink);
}

.nlp-page .student-name .pt-13 {
  font-size: 12px;
  color: var(--text-soft);
}

.nlp-page .prev_scroll_control_button img,
.nlp-page .next_scroll_control_button img {
  width: 38px;
  height: 38px;
  cursor: pointer;
}

.nlp-page .learn-contain-holifront_content {
  margin-top: 4px;
}

/* ==========================================================================
   6. Full-width sections below the shell
   ========================================================================== */

/* ---------- compare table ---------- */
.nlp-page .pd-compare-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* the table itself scrolls on narrow viewports; the page never does */
.nlp-page .pd-compare-scroll {
  overflow-x: auto;
}

.nlp-page .pd-compare {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: none;
}

.nlp-page .pd-compare th,
.nlp-page .pd-compare td {
  padding: 15px 18px;
  text-align: left;
  vertical-align: top;
  border: 0;
}

.nlp-page .pd-compare thead th {
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}

.nlp-page .pd-compare .col-feature {
  width: 172px;
}

.nlp-page .pd-compare-badge {
  display: inline-block;
  margin-bottom: 7px;
  font: 700 10px/1 'Poppins', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--gold);
  color: #4A3A06;
  padding: 5px 9px;
  border-radius: 999px;
}

.nlp-page .pd-compare-name {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}

.nlp-page .pd-compare-sub {
  display: block;
  font-size: 12.5px;
  color: var(--text-soft);
  margin-top: 3px;
}

.nlp-page .pd-compare tbody tr+tr td {
  border-top: 1px solid var(--line);
}

.nlp-page .pd-compare .cell-feature {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.nlp-page .pd-compare td {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
}

.nlp-page .pd-compare .is-highlight {
  background: var(--sky-tint);
}

.nlp-page .pd-compare thead .is-highlight {
  background: var(--sky-tint);
}

.nlp-page .pd-compare tbody .is-highlight {
  color: var(--ink);
  font-weight: 600;
}

.nlp-page .pd-compare-foot {
  padding: 22px;
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--mist);
}

/* ---------- instructor team grid ---------- */
.nlp-page .pd-team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.nlp-page .pd-team-card {
  padding: 24px 18px;
  text-align: center;
  transition: box-shadow .2s ease, transform .2s ease;
}

.nlp-page .pd-team-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.nlp-page .pd-team-card img {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 14px;
  border: 3px solid var(--white);
  box-shadow: var(--shadow);
}

.nlp-page .pd-team-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.nlp-page .pd-team-role {
  font-size: 12.5px;
  color: var(--text-soft);
  margin-top: 3px;
}

.nlp-page .pd-li {
  display: inline-flex;
  vertical-align: -2px;
  margin-left: 6px;
  color: #0A66C2;
}

.nlp-page .pd-li svg {
  width: 15px;
  height: 15px;
}

.nlp-page .pd-li:hover {
  color: #004182;
}

/* ---------- certified practitioners marquee (own markup, kept from live) ---------- */
.nlp-page .practitioner-strip__head {
  text-align: center;
  margin-bottom: 20px;
}

.nlp-page .practitioner-strip__eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sky-deep);
  margin: 0;
}

.nlp-page .practitioner-strip__stars {
  display: inline-flex;
  gap: 2px;
  margin-top: 10px;
}

.nlp-page .pstar {
  width: 18px;
  height: 18px;
}

.nlp-page .practitioner-strip__rating-label {
  font-size: 13.5px;
  color: var(--text-soft);
  margin: 5px 0 0;
}

.nlp-page .practitioner-strip__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.nlp-page .practitioner-strip__track {
  display: flex;
  gap: 16px;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  animation: pd-marquee 60s linear infinite;
}

.nlp-page .practitioner-strip__viewport:hover .practitioner-strip__track {
  animation-play-state: paused;
}

@keyframes pd-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.nlp-page .pcard {
  flex: 0 0 auto;
  min-width: 282px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: var(--shadow);
}

.nlp-page .pcard__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .5px;
}

.nlp-page .pcard__check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--white);
}

.nlp-page .pcard__body {
  min-width: 0;
}

.nlp-page .pcard__line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nlp-page .pcard__name {
  font-weight: 700;
  color: var(--ink);
  font-size: 14.5px;
  white-space: nowrap;
}

.nlp-page .pcard__stars {
  display: inline-flex;
  gap: 1px;
}

.nlp-page .pcard__stars .pstar {
  width: 14px;
  height: 14px;
}

.nlp-page .pcard__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-soft);
  white-space: nowrap;
}

.nlp-page .pcard__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--green-deep);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .07em;
}

.nlp-page .pcard__shield {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* ---------- bonuses (shared partial) ---------- */
.nlp-page #school_bonus .learn-course-detail-label-section {
  display: none;
}

.nlp-page #school_bonus .learn-headline-label {
  justify-content: center;
}

.nlp-page #school_bonus .p2_16 {
  font-size: 15px;
  color: var(--text-soft);
}

.nlp-page #school_bonus .grid-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}

.nlp-page .learn-course-detail-bonus-item {
  width: 100%;
  padding: 0;
  margin: 0;
  float: none;
}

.nlp-page .learn-course-detail-bonus-item .card {
  overflow: hidden;
}

.nlp-page .learn-course-detail-bonus-item .grid-card-body {
  padding: 0;
}

.nlp-page .learn-course-detail-bonus-item .flex-grow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
}

.nlp-page .learn-bonus-image-section {
  align-self: stretch;
  background: var(--mist);
}

.nlp-page .learn-bonus-image-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nlp-page .learn-bonus-content {
  padding: 30px 34px;
}

.nlp-page .learn-bonus-tag {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--gold);
  color: #4A3A06;
  border-radius: 999px;
  padding: 5px 12px;
}

.nlp-page .learn-bonus-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 8px;
}

.nlp-page .learn-bonus-description .hd5_16 {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-soft);
}

.nlp-page .learn-course-detail-bonus-item .btn-buy-now {
  border: 0;
  border-radius: 999px;
  background: var(--sky);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  padding: 11px 24px;
  margin-top: 6px;
  box-shadow: 0 6px 16px -6px rgba(63, 169, 232, .45);
}

.nlp-page .learn-course-detail-bonus-item .btn-buy-now:hover {
  background: var(--sky-deep);
  color: #fff;
}

.nlp-page .learn-course-detail-bonus-item .benefit_item_name {
  font-size: 14px;
  color: var(--text-soft);
}

/* alternate the image side so a column of bonuses does not read as a list */
.nlp-page .learn-course-detail-bonus-item:nth-child(even) .learn-bonus-image-section {
  order: 2;
}

.nlp-page .learn-course-detail-bonus-item:nth-child(even) .learn-bonus-content {
  order: 1;
}

/* ---------- bonus value banner (shared partial) ---------- */
/* Flex, not grid, and deliberately so: the wrapper carries Bootstrap's
   .clearfix, whose two pseudo-elements would each take a grid cell. front.css
   already lays this out as a flex row — only the proportions and the type are
   retuned here. */
.nlp-page .learn-bvb-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  display: flex;
  align-items: center;
  color: #fff;
  min-height: 300px;
  margin-top: 0;
}

.nlp-page .learn-bvb-left {
  flex: 0 0 42%;
}

.nlp-page .learn-bvb-right {
  flex: 1;
  min-width: 0;
}

.nlp-page .learn-bvb-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nlp-page .learn-bvb-left,
.nlp-page .learn-bvb-right {
  position: relative;
  z-index: 1;
  padding: 38px 42px;
  display: block;
}

.nlp-page .learn-bvb-divider {
  position: relative;
  z-index: 1;
  flex: 0 0 1px;
  align-self: stretch;
  margin: 44px 0;
  background: rgba(255, 255, 255, .25);
}

.nlp-page .learn-bvb-offer-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: 6px 13px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}

.nlp-page .learn-bvb-value-label,
.nlp-page .learn-bvb-enroll-label {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

.nlp-page .learn-bvb-price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
  line-height: 1.05;
}

.nlp-page .learn-bvb-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.nlp-page .learn-bvb-enroll-btn {
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: #4A3A06;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 26px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45);
}

.nlp-page .learn-bvb-enroll-btn:hover {
  background: #E5B62B;
  color: #4A3A06;
}

.nlp-page .learn-bvb-right-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 25px;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
}

.nlp-page .learn-bvb-right-desc {
  font-size: 14.5px;
  color: rgba(255, 255, 255, .85);
  margin: 10px 0 16px;
}

.nlp-page .learn-bvb-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.nlp-page .learn-bvb-benefits li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  color: #fff;
}

.nlp-page .learn-bvb-check {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: grid;
  place-items: center;
}

/* ---------- FAQ (shared partial, restyled into the v3 two-column split) ---------- */
.nlp-page #faq .learn-course-detail-label-section {
  display: none;
}

.nlp-page #faq .row {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: 34px;
  align-items: start;
}

.nlp-page #faq .row>[class*="col-"] {
  width: auto;
  float: none;
  padding: 0;
}

.nlp-page #faq .hd2_36 {
  text-align: left;
}

.nlp-page #faq .pt-14 {
  font-size: 15px;
  color: var(--text-soft);
  text-align: left;
  max-width: 34ch;
}

/* ---------- learning-paths strip (shared partial) ----------
   The partial ships its own <style>; those rules are (0,1,x) so these win on
   specificity. Only the frame is retuned — the cards inside are already close
   to the v3 language. */
.nlp-page .lp-strip {
  background: var(--mist);
  border-color: var(--line);
  border-radius: var(--radius);
  margin: 30px 0 0;
}

.nlp-page .lp-strip-head h2 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink);
}

.nlp-page .lp-strip-ic {
  color: var(--sky);
}

.nlp-page .lp-strip-card {
  border-radius: 14px;
}

.nlp-page .lp-strip-body h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink);
}

.nlp-page .lp-strip-meta {
  color: var(--sky-deep);
}

/* ---------- Trustpilot widget ---------- */
.nlp-page .pd-tp-widget {
  margin-top: 26px;
}

/* ==========================================================================
   7. Sticky mobile bar
   ========================================================================== */

/* Off-screen until the reader is past the hero. Same treatment as the article
   twin's bar; z-index 900 keeps it under the layout's scroll-to-top (999). */
.nlp-page .pd-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(15, 80, 95, .12);
  transform: translateY(120%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.nlp-page .pd-bar.is-shown {
  transform: translateY(0);
}

.nlp-page .pd-bar-in {
  max-width: 1118px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 20px;
}

.nlp-page .pd-bar-art {
  flex: 0 0 auto;
}

.nlp-page .pd-bar-art img {
  width: 54px;
  height: 38px;
  object-fit: cover;
  border-radius: 8px;
}

.nlp-page .pd-bar-txt {
  flex: 1;
  min-width: 0;
}

.nlp-page .pd-bar-txt b {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nlp-page .pd-bar-sub {
  display: block;
  font-size: 11.5px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nlp-page .pd-bar-price {
  text-align: right;
  line-height: 1.2;
  flex: 0 0 auto;
}

.nlp-page .pd-bar-price s {
  font-size: 11px;
  color: var(--text-soft);
}

.nlp-page .pd-bar-price b {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: var(--ink);
}

.nlp-page .pd-bar .btn {
  white-space: nowrap;
}

/* ==========================================================================
   8. Theme neutralisers
   ========================================================================== */

/* front.css / Nifty rules this page's markup would otherwise inherit. Each is
   undone once here rather than fought in the component above. */
.nlp-page .card {
  margin-bottom: 0;
}

/* front.css rounds `.card > :first-child` to 2px, which flattens the top of the
   buy card's cover. `inherit` hands it the card's own radius instead.
   :not(img) matters: `.card > :first-child` is (0,3,0) and outranks a component
   rule like `.pd-team-card img` (0,2,1), so without it every avatar that
   happens to be a card's first child would be squared off. */
.nlp-page .card> :first-child:not(img) {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.nlp-page .pd-buy .card-body,
.nlp-page .learn-course-detail-bonus-item .card-body {
  padding: 0;
}

.nlp-page hr {
  border-color: var(--line);
}

/* Bootstrap's .row and .clearfix ship ::before/::after clearfix pseudo-elements.
   In a flex container they collapse to nothing, but a GRID container promotes
   each one to a real grid item that claims a cell — which is exactly what put
   the FAQ heading in the second column and split the bonus banner over two
   rows. Anything this file re-lays-out as a grid has to switch them off. */
.nlp-page #faq .row::before,
.nlp-page #faq .row::after {
  display: none;
}

/* Editors' prose arrives justified (front.css .custom-text-justify plus the
   institution bio). Justification on a narrow measure opens rivers; the v3
   type scale is set left-aligned throughout. */
.nlp-page .custom-text-justify,
.nlp-page .instructor-bio-description,
.nlp-page #certificate_content .pt-16 {
  text-align: left;
}

/* #landing_gif holds a Bootstrap column, so it floats; without this the
   syllabus eyebrow that follows wraps up alongside the banner image. */
.nlp-page #landing_gif {
  display: flow-root;
  margin-top: 26px;
}

.nlp-page #landing_gif>[class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
}

.nlp-page #landing_gif img {
  max-width: 720px;
}

/* Bootstrap's .row is a negative-margin float container; the shared partials
   are built on it, and inside a grid cell that margin punches the content out
   of the column. */
.nlp-page #instructor_info .row,
.nlp-page #course_review .row,
.nlp-page #school_bonus .row {
  margin-left: 0;
  margin-right: 0;
}

.nlp-page #school_bonus .row>[class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* The add-to-cart drawer and the video modal are the layout's own components
   and keep the theme's look — only the drawer heading is brought in line. */
.nlp-page .cart-sidebar-header .modal-title {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink);
}

/* The ONLY unscoped block in this file. The video modal is a Bootstrap modal:
   it is moved to the end of <body> when it opens, so a .nlp-page ancestor
   selector cannot reach it. The live page sizes it with style="" attributes
   instead; the class prefix is unique to this view, so nothing else can be
   caught by these three rules. */
.pd-video-modal .modal-dialog {
  height: 80vh;
}

.pd-video-modal .modal-content {
  height: 100%;
  background-color: transparent;
  box-shadow: none;
  border: 0;
}

.pd-video-modal .learn-video-container {
  height: 100%;
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media (max-width: 1240px) {
  .nlp-page {
    --pd-aside: 330px;
  }

  .nlp-page .pd-shell {
    gap: 32px;
  }

  .nlp-page .pd-team {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {

  /* One column, and the card moves up directly under the hero copy — which is
     where a phone reader expects the price, and what keeps the sticky-bar
     trigger near the top of the page instead of at its foot. */
  .nlp-page .pd-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hero" "aside" "main";
    gap: 26px 0;
  }

  .nlp-page .pd-hero {
    padding-bottom: 8px;
  }

  /* Far enough to run behind the buy card, which is now the next row rather
     than the column beside the hero. The grid gap already spaces the card, so
     the desktop top padding comes off. */
  .nlp-page .pd-band {
    margin-bottom: -190px;
  }

  .nlp-page .pd-aside {
    padding-top: 0;
  }

  .nlp-page .pd-buy {
    max-width: 520px;
  }

  .nlp-page .pd-incl {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-page .pd-why {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-page .pd-team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nlp-page #faq .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .nlp-page .learn-course-detail-bonus-item .flex-grow {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-page .learn-course-detail-bonus-item:nth-child(even) .learn-bonus-image-section {
    order: 0;
  }

  .nlp-page .learn-course-detail-bonus-item:nth-child(even) .learn-bonus-content {
    order: 0;
  }

  .nlp-page .learn-bonus-image-section img {
    max-height: 320px;
  }

  .nlp-page .learn-bvb-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .nlp-page .learn-bvb-left {
    flex: none;
    padding-bottom: 8px;
  }

  .nlp-page .learn-bvb-divider {
    display: none;
  }

  .nlp-page #instructor_info>.flex,
  .nlp-page .learn-course-instructor-contain .flex {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .nlp-page .pd-hero {
    padding-top: 18px;
  }

  .nlp-page .pd-hero h1 {
    max-width: none;
  }

  /* Back to rows on a phone, two per line. An odd count would leave the same
     blank cell the desktop rule avoids, so a lone last tile takes the row. */
  .nlp-page .pd-stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nlp-page .pd-stats>.pd-stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* The hero art moves above the headline on a phone: a course cover is the
     fastest way to confirm you are on the right page. */
  .nlp-page .pd-hero-art {
    display: block;
    margin-bottom: 20px;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
  }

  .nlp-page .pd-hero-art img {
    width: 100%;
    height: auto;
  }

  .nlp-page .pd-buy-art {
    display: none;
  }

  .nlp-page .pd-buy {
    max-width: none;
  }

  .nlp-page .pd-sec {
    padding-top: 40px;
  }

  .nlp-page .pd-team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nlp-page .pd-compare-foot {
    padding: 18px 14px;
  }

  .nlp-page .learn-bonus-content {
    padding: 22px 20px;
  }

  .nlp-page .learn-bvb-left,
  .nlp-page .learn-bvb-right {
    padding: 26px 22px;
  }

  .nlp-page .learn-bvb-price {
    font-size: 38px;
  }

  .nlp-page .pd-bar-art,
  .nlp-page .pd-bar-price {
    display: none;
  }

  .nlp-page .pd-bar-in {
    gap: 10px;
    padding: 8px 12px;
  }

  .nlp-page .learn-course-instructor-contain,
  .nlp-page #instructor_info>.flex {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .nlp-page .pd-team {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-page .pd-now {
    font-size: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nlp-page .practitioner-strip__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .nlp-page .practitioner-strip__track .pcard[aria-hidden="true"] {
    display: none;
  }

  .nlp-page .pd-bar {
    transition: none;
  }
}