/* ==========================================================================
   Naturalistico homepage — v3 design
   --------------------------------------------------------------------------
   Ported from the naturalistico-public-v3 prototype onto the live homepage.

   EVERY rule is scoped under .nlp-page. Two reasons:
     1. The page runs inside lms/layouts/learn_school.blade.php, which loads
        Bootstrap + Nifty + front.css. Generic prototype names (.btn, .card,
        .stat, .rail) would otherwise collide site-wide.
     2. Scoping gives us (0,2,x) specificity against the theme's (0,1,x), so
        we win the cascade WITHOUT !important anywhere in this file.

   The shell (promo bar, header, category nav, footer) is NOT here — the live
   layout owns those, and only page content lives in this file. The promo bar,
   header and category rail were ported separately into lms/css/header_v3.css
   (scoped .nlp-shell on #container) so they apply on every page of that
   layout, not just the homepage. The footer is still the original.
   ========================================================================== */

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

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.nlp-page *,
.nlp-page *::before,
.nlp-page *::after {
  box-sizing: border-box;
}

.nlp-page h1,
.nlp-page h2,
.nlp-page h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.012em;
  font-weight: 600;
  margin: 0;
}

.nlp-page p {
  margin: 0;
}

.nlp-page a {
  color: inherit;
  text-decoration: none;
}

.nlp-page img {
  max-width: 100%;
  display: block;
}

.nlp-page button {
  font-family: inherit;
  cursor: pointer;
}

.nlp-page :focus-visible {
  outline: 2px solid var(--sky-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

.nlp-page .caveat {
  font-family: 'Caveat', cursive;
  color: var(--teal);
  font-weight: 700;
}

/* ============ buttons ============
   Bootstrap also defines .btn — .nlp-page .btn outranks it. */
.nlp-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--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;
  white-space: nowrap;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px -6px rgba(63, 169, 232, .45);
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
}

.nlp-page .btn:hover,
.nlp-page .btn:focus {
  background: var(--sky-deep);
  color: #fff;
}

.nlp-page .btn:active {
  transform: scale(.985);
}

.nlp-page .btn.small {
  padding: 8px 17px;
  font-size: 13px;
  box-shadow: none;
}

.nlp-page .btn.ghost {
  background: transparent;
  color: var(--sky-deep);
  box-shadow: inset 0 0 0 1.5px var(--sky-deep);
}

.nlp-page .btn.ghost:hover {
  background: var(--sky-tint);
  color: var(--sky-deep);
}

.nlp-page .btn.gold-btn {
  background: var(--gold);
  color: #4A3A06;
  box-shadow: 0 6px 16px -6px rgba(240, 192, 51, .5);
}

.nlp-page .btn.gold-btn:hover,
.nlp-page .btn.gold-btn:focus {
  background: #E5B62B;
  color: #4A3A06;
}

/* ============ layout primitives ============ */
.nlp-page .wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 30px;
}

.nlp-page .sec {
  padding: 74px 0 10px;
}

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

.nlp-page .kicker.green {
  color: var(--green-deep);
}

.nlp-page .sec-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 26px;
}

.nlp-page .sec-head h2 {
  font-size: clamp(27px, 3.2vw, 38px);
}

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

.nlp-page .sec-head .side {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--text-soft);
}

.nlp-page .sec-head .side a {
  color: var(--sky-deep);
  font-weight: 700;
  text-decoration: none;
}

.nlp-page .sec-head .side a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bootstrap .card is a flex column with its own border-radius — override fully. */
.nlp-page .card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* centred "view all" under a rail */
.nlp-page .sec-foot {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

/* ============ motion ============ */
@keyframes nlp-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes nlp-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

@keyframes nlp-drift {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

/* The hero entrance is gated on the media query, NOT on a JS-added body class.
   nlp-rise starts at opacity:0 and the rules below use fill-mode backwards, so
   whatever carries them is invisible until its delay elapses. When a class had
   to arrive first, that flip landed only after every deferred script had run --
   several seconds into a throttled mobile load -- which blanked the <h1> and the
   hero art long after they had already painted. An element sitting at opacity:0
   is not an eligible LCP candidate, so Lighthouse finished the trace having
   never recorded one and reported NO_LCP. Keeping the gate in CSS means the
   animation runs at first paint and the hero is opaque within .7s of it. */
@media (prefers-reduced-motion: no-preference) {
  .nlp-page .hero .h-copy>* {
    animation: nlp-rise .55s ease backwards;
  }

  .nlp-page .hero .h-copy>*:nth-child(2) {
    animation-delay: .07s;
  }

  .nlp-page .hero .h-copy>*:nth-child(3) {
    animation-delay: .14s;
  }

  .nlp-page .hero .h-copy>*:nth-child(4) {
    animation-delay: .21s;
  }

  .nlp-page .hero .h-copy>*:nth-child(5) {
    animation-delay: .28s;
  }

  .nlp-page .hero .h-copy>*:nth-child(6) {
    animation-delay: .34s;
  }

  .nlp-page .hero .h-art {
    animation: nlp-rise .7s ease .12s backwards;
  }
}

/* ============ hero ============ */
.nlp-page .hero {
  position: relative;
  overflow: clip;
  background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
}

.nlp-page .hero .h-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 64px 30px 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

.nlp-page .hero .h-copy h1 {
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 500;
  margin: 14px 0 18px;
}

.nlp-page .hero .h-copy h1 em {
  font-style: italic;
  color: var(--teal);
  position: relative;
  white-space: nowrap;
  font-weight: 500;
}

.nlp-page .hero .h-copy h1 em svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  width: 100%;
  height: 12px;
  color: var(--gold);
}

.nlp-page .hero .sub {
  font-size: 17px;
  color: var(--text-soft);
  max-width: 50ch;
}

.nlp-page .hero .cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.nlp-page .hero .price-line {
  font-size: 14px;
  color: var(--text);
}

.nlp-page .hero .price-line b {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  color: var(--ink);
}

.nlp-page .subscribe {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  max-width: 470px;
}

.nlp-page .subscribe input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 19px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  background: var(--white);
  height: auto;
  box-shadow: none;
}

.nlp-page .subscribe input:focus {
  border-color: var(--sky-line);
  box-shadow: none;
}

.nlp-page .sub-note {
  font-size: 12.5px;
  color: var(--text-soft);
  margin-top: 9px;
}

.nlp-page .accred {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.nlp-page .accred span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.nlp-page .accred img {
  height: 42px;
  width: auto;
}

.nlp-page .hero .h-art {
  position: relative;
  min-width: 0;
  isolation: isolate;
}

/* --- watercolour feather ---------------------------------------------------
   The hero artwork ships with a rectangular pale wash baked into the .webp.
   Rather than re-cutting the asset we dissolve it with an irregular alpha
   mask: a union of off-centre ellipses, so the edge never reads as straight.
   Tune by editing --tree-feather only; each layer is one soft blob.
   -------------------------------------------------------------------------- */
.nlp-page .hero .h-art img.trees {
  width: 108%;
  max-width: none;
  height: auto;
  margin-left: -4%;
  position: relative;
  z-index: 1;
  --tree-feather:
    radial-gradient(54% 60% at 52% 55%, #000 38%, rgba(0, 0, 0, .88) 58%, rgba(0, 0, 0, .42) 80%, transparent 100%),
    radial-gradient(34% 40% at 56% 45%, #000 58%, rgba(0, 0, 0, .7) 82%, transparent 100%),
    radial-gradient(42% 27% at 53% 84%, #000 52%, rgba(0, 0, 0, .6) 80%, transparent 100%),
    radial-gradient(23% 27% at 30% 63%, rgba(0, 0, 0, .8) 26%, transparent 100%),
    radial-gradient(21% 25% at 78% 51%, rgba(0, 0, 0, .72) 26%, transparent 100%),
    radial-gradient(18% 21% at 35% 27%, rgba(0, 0, 0, .5) 18%, transparent 100%),
    radial-gradient(15% 18% at 71% 24%, rgba(0, 0, 0, .4) 16%, transparent 100%);
  -webkit-mask-image: var(--tree-feather);
  mask-image: var(--tree-feather);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* soft atmospheric glow sitting behind the tree, no geometry of its own */
.nlp-page .hero .h-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 4% -5% 4% -3%;
  pointer-events: none;
  background:
    radial-gradient(46% 50% at 50% 52%, rgba(63, 169, 232, .14), rgba(63, 169, 232, 0) 72%),
    radial-gradient(40% 44% at 61% 66%, rgba(46, 161, 148, .13), rgba(46, 161, 148, 0) 74%),
    radial-gradient(30% 30% at 36% 38%, rgba(143, 174, 155, .10), rgba(143, 174, 155, 0) 76%);
  filter: blur(44px);
}

.nlp-page .hero .h-art .bird {
  position: absolute;
  z-index: 2;
  color: var(--sky-deep);
  opacity: .55;
  animation: nlp-drift 5.5s ease-in-out infinite;
}

.nlp-page .hero .h-art .bird svg {
  width: 26px;
  height: 18px;
}

.nlp-page .hero .h-art .bird.b1 {
  left: 6%;
  top: 8%;
}

.nlp-page .hero .h-art .bird.b2 {
  left: 22%;
  top: 20%;
  animation-delay: 1.4s;
}

.nlp-page .hero .h-art .bird.b2 svg {
  width: 18px;
  height: 13px;
}

.nlp-page .hero .h-art .float-chip {
  position: absolute;
  z-index: 2;
  left: 4%;
  bottom: 12%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-lift);
  padding: 10px 17px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
}

.nlp-page .hero .h-art .float-chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: nlp-pulse 2.2s ease infinite;
}

/* ============ stat band ============ */
.nlp-page .stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.nlp-page .stats .s-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 26px 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.nlp-page .stat {
  text-align: center;
}

.nlp-page .stat b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 36px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.nlp-page .stat span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.nlp-page .stat+.stat {
  border-left: 1px solid var(--line);
}

/* ============ brand strip ============ */
.nlp-page .brands {
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}

.nlp-page .brands .b-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.nlp-page .brands>.b-in>span {
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 600;
}

.nlp-page .brands img {
  height: 27px;
  width: auto;
  opacity: .55;
  filter: none;
  transition: all .2s ease;
}

.nlp-page .brands img:hover {
  opacity: 1;
}

/* ============ manifesto ============ */
.nlp-page .manifesto {
  text-align: center;
  padding: 88px 0 74px;
  position: relative;
  overflow: clip;
}

.nlp-page .manifesto::before,
.nlp-page .manifesto::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%;
  pointer-events: none;
}

.nlp-page .manifesto::before {
  left: -140px;
  top: 20px;
  background: var(--teal-tint);
  opacity: .7;
}

.nlp-page .manifesto::after {
  right: -150px;
  bottom: -60px;
  background: var(--sky-tint);
  opacity: .8;
}

.nlp-page .manifesto .m-in {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  padding: 0 30px;
}

.nlp-page .manifesto h2 {
  font-size: clamp(28px, 3.8vw, 46px);
  font-weight: 500;
  line-height: 1.25;
}

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

.nlp-page .manifesto .hand {
  font-size: clamp(22px, 2.6vw, 30px);
  margin-top: 18px;
  display: block;
}

.nlp-page .manifesto p.small {
  font-size: 15px;
  color: var(--text-soft);
  margin-top: 20px;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

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

.nlp-page .cat-card {
  text-decoration: none;
  text-align: center;
  padding: 26px 18px 20px;
  display: block;
  transition: box-shadow .2s ease, transform .2s ease;
}

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

.nlp-page .cat-card img {
  width: 118px;
  height: 118px;
  object-fit: contain;
  margin: 0 auto 14px;
}

.nlp-page .cat-card b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.3;
}

.nlp-page .cat-card>span {
  display: block;
  font-size: 12.5px;
  color: var(--text-soft);
}

/* ============ course cards ============ */
.nlp-page .cc {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
  position: relative;
}

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

/* Course covers are square (800x800) with the certification name baked into
   the artwork. A 16/12 box would crop that title off, so the art box is
   square too and nothing is ever cut. */
.nlp-page .cc .art {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #F5F1E6;
  display: block;
}

.nlp-page .cc .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}

.nlp-page .cc:hover .art img {
  transform: scale(1.035);
}

/* Pills sit at the TOP of the artwork, matching the v3 prototype, and are kept
   deliberately small because of what is underneath them. These covers are not
   the prototype's blank placeholder: every one carries the certification name
   baked into the top band of the image (roughly 3%-20% down, spanning the
   middle ~60% of the width) and an accreditation strip or strapline across the
   bottom. There is no free corner, so the pills are sized to fit the gutters
   either side of the title rather than moved off it — the title is the thing
   that must stay readable. Keep them narrow: every extra character eats into
   the course name. That is also why .students shows a glyph and a figure
   instead of spelling out "54 Students". */
.nlp-page .cc .flag {
  position: absolute;
  left: 7px;
  top: 7px;
  z-index: 2;
  font-family: 'Poppins', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 7px;
}

/* Rank-only chip on the numbered bestsellers rail — "02", not
   "02 · BEST SELLER". Tabular figures so 01-10 are all the same width. */
.nlp-page .cc .flag.rank {
  font-size: 9.5px;
  padding: 2px 7px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.nlp-page .cc .flag.best {
  background: var(--gold);
  color: #4A3A06;
}

.nlp-page .cc .flag.newc {
  background: var(--green-soft);
  color: var(--green-deep);
}

.nlp-page .cc .flag.trend {
  background: var(--white);
  color: var(--sky-deep);
  box-shadow: var(--shadow);
}

.nlp-page .cc .students {
  position: absolute;
  right: 7px;
  top: 7px;
  z-index: 2;
  background: rgba(255, 255, 255, .94);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  border-radius: 999px;
  padding: 2px 7px 2px 5px;
  font-variant-numeric: tabular-nums;
}

.nlp-page .cc .students svg {
  width: 10px;
  height: 10px;
  flex: none;
  fill: var(--text-soft);
}

.nlp-page .cc .cc-body {
  padding: 14px 17px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.nlp-page .cc .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-soft);
}

.nlp-page .cc .meta .school {
  background: var(--sky-tint);
  color: var(--sky-deep);
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
}

/* Enrolled cards put the course category in the slot the catalogue cards give
   the school name. Same pill, honest class name. */
.nlp-page .cc .meta .cat {
  background: var(--sky-tint);
  color: var(--sky-deep);
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
}

.nlp-page .cc h3 {
  font-size: 17px;
  line-height: 1.3;
}

.nlp-page .cc .foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-top: 5px;
  flex-wrap: wrap;
}

.nlp-page .cc .price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

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

/* Progress footer — enrolled cards only. Occupies the row a catalogue card
   gives the price, so the card outline stays identical to the other rails.
   .prog-fill's width comes from data-pct via home_v3.js; a course at 0% still
   shows a visible nub so the bar never reads as missing. */
.nlp-page .cc .foot.prog {
  align-items: center;
  gap: 11px;
}

.nlp-page .cc .prog-track {
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.nlp-page .cc .prog-fill {
  display: block;
  height: 100%;
  width: 0;
  min-width: 6px;
  border-radius: 999px;
  background: var(--green);
  transition: width .4s ease;
}

.nlp-page .cc .prog-pct {
  flex: 0 0 auto;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* whole-card link, sitting under the hover overlay so the buttons stay clickable */
.nlp-page .cc .cc-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- hover overlay -------------------------------------------------------
   Reuses the live class names (.show_add_cart / .learn-course-hover-content /
   .add_cart) so the jQuery handler in learn_school.blade.php keeps working
   untouched. Only the look changes here.
   ------------------------------------------------------------------------ */
.nlp-page .cc.show_add_cart::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 0;
  background: rgba(10, 45, 55, .55);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.nlp-page .cc.show_add_cart:hover::before {
  opacity: 1;
}

.nlp-page .cc .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-page .cc.show_add_cart:hover .learn-course-hover-content {
  opacity: 1;
  visibility: visible;
}

.nlp-page .cc .learn-view-detail-btn,
.nlp-page .cc .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-page .cc .learn-view-detail-btn {
  background: var(--white);
  color: var(--ink);
}

.nlp-page .cc .learn-view-detail-btn:hover,
.nlp-page .cc .learn-view-detail-btn:focus {
  background: var(--sky-tint);
  color: var(--sky-deep);
}

.nlp-page .cc .learn-add-cart-btn {
  background: var(--gold);
  color: #4A3A06;
}

.nlp-page .cc .learn-add-cart-btn:hover,
.nlp-page .cc .learn-add-cart-btn:focus {
  background: #E5B62B;
  color: #4A3A06;
}

/* ============ horizontal course rails ============ */
.nlp-page .rail-outer {
  position: relative;
}

/* The element is .wrap.rail-sub, and .wrap's `margin: 0 auto` is what centres
   it on the 1320px rail. This rule is the same specificity and comes later, so
   a shorthand `margin: 26px 0 14px` here silently reset those auto sides and
   left-aligned the whole strip against the viewport — the label ended up far
   left of the cards it belongs to. Keep `auto` in the shorthand. */
.nlp-page .rail-sub {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 26px auto 14px;
}

/* Matches .kicker exactly: this reads as the same kind of section eyebrow as
   "just planted" above the new-courses rail. */
.nlp-page .rail-label {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sky-deep);
}

.nlp-page .rail-nav {
  margin-left: auto;
  display: flex;
  gap: 9px;
  align-self: center;
  flex: 0 0 auto;
}

.nlp-page .rail-nav button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  padding: 0;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.nlp-page .rail-nav button:hover:not(:disabled) {
  background: var(--sky-tint);
  color: var(--sky-deep);
}

.nlp-page .rail-nav button:disabled {
  opacity: .28;
  cursor: default;
  box-shadow: none;
}

.nlp-page .rail-nav svg {
  width: 15px;
  height: 15px;
}

.nlp-page .sec-head .rail-nav {
  align-self: center;
  margin-left: 14px;
}

.nlp-page .rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-block: 6px 30px;
  padding-inline: max(30px, calc((100% - 1320px) / 2 + 30px));
  scroll-padding-inline-start: max(30px, calc((100% - 1320px) / 2 + 30px));
}

.nlp-page .rail>.cc {
  flex: 0 0 clamp(248px, 24vw, 312px);
  scroll-snap-align: start;
}

.nlp-page .rail.inset {
  padding-inline: 38px;
  scroll-padding-inline-start: 38px;
  padding-bottom: 14px;
}

/* Visible horizontal scrollbar, matching the learning-paths strip on the course
   detail page. It is the only scroll affordance under 640px, where .rail-nav
   is hidden -- a rail that gives no sign it scrolls just looks cut off. */
.nlp-page .rail {
  scrollbar-width: thin;
  scrollbar-color: #B7D4EA #E1EDF7;
}

.nlp-page .rail::-webkit-scrollbar {
  height: 6px;
}

.nlp-page .rail::-webkit-scrollbar-track {
  background: #E1EDF7;
  border-radius: 999px;
}

.nlp-page .rail::-webkit-scrollbar-thumb {
  background: #B7D4EA;
  border-radius: 999px;
}

.nlp-page .rail::-webkit-scrollbar-thumb:hover {
  background: var(--sky-deep);
}

/* ============ rail band ============
   The tinted panel the trending rail introduced, now the shared treatment for
   every course rail on the page (enrolled, rest-of-top-ten, new, trending). */
.nlp-page .rail-band {
  background: linear-gradient(180deg, #E9F3FC 0%, #F4FAFD 100%);
  border-radius: 30px;
  padding: 46px 0 34px;
  overflow: hidden;
}

.nlp-page .rail-band .rb-head {
  padding: 0 38px;
}

.nlp-page .rail-band .sec-head {
  margin-bottom: 20px;
}

/* the label-only head (rest of the top ten) has no heading above it to space off */
.nlp-page .rail-band .rb-head .rail-sub {
  margin: 0 0 18px;
}

.nlp-page .rail-band .cc {
  border-color: rgba(255, 255, 255, .9);
}

/* the scrollbar track needs to clear the panel's rounded edge */
.nlp-page .rail-band .rail {
  padding-bottom: 10px;
}

.nlp-page .rail-band .rail::-webkit-scrollbar-track {
  background: #DCEAF6;
}

/* Enrolled-courses rail. front.css styles .learn-my-enrolled-course-item as a
   400px-min grid with its own max-height and scroll, which fights the rail, so
   this page uses its own hook instead. /en/homepage-test still uses the old
   class and still needs those front.css rules. */
.nlp-page .nlp-enrolled-rail.hidden {
  display: none;
}

.nlp-page .frontend_loader {
  display: flex;
  justify-content: center;
  padding: 20px 0 8px;
}

.nlp-page .frontend_loader.hidden {
  display: none;
}

/* ============ ranked / featured course ============ */
.nlp-page .rank-lead {
  display: block;
}

.nlp-page .feat {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
  position: relative;
}

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

.nlp-page .feat .art {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #F5F1E6;
  display: block;
}

.nlp-page .feat .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}

.nlp-page .feat:hover .art img {
  transform: scale(1.03);
}

/* Same top placement and the same restraint as the rail cards above — see the
   note there. The lead card's art is only 42% of a full-width card, so its
   pills are proportionally the largest on the page and clear the baked-in
   course name by the smallest margin. */
.nlp-page .feat .rank-flag {
  position: absolute;
  left: 9px;
  top: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .95);
  border-radius: 999px;
  padding: 3px 11px 3px 5px;
  font-family: 'Poppins', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.nlp-page .feat .rank-flag i {
  font-style: normal;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  color: #4A3A06;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 800;
}

.nlp-page .feat .students {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  background: rgba(255, 255, 255, .94);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  border-radius: 999px;
  padding: 2px 7px 2px 5px;
  font-variant-numeric: tabular-nums;
}

.nlp-page .feat .students svg {
  width: 10px;
  height: 10px;
  flex: none;
  fill: var(--text-soft);
}

.nlp-page .feat .f-body {
  padding: 17px 20px 19px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.nlp-page .feat .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-soft);
}

.nlp-page .feat .meta .school {
  background: var(--sky-tint);
  color: var(--sky-deep);
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
}

.nlp-page .feat h3 {
  font-size: 22px;
  line-height: 1.25;
}

.nlp-page .feat .blurb {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.6;
}

.nlp-page .feat .foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
  flex-wrap: wrap;
}

.nlp-page .feat .price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

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

.nlp-page .feat .foot .btn {
  margin-left: auto;
}

/* the number-one card, full width above its rail */
.nlp-page .feat.wide {
  flex-direction: row;
  align-items: stretch;
}

/* square art, so the cover's baked-in title is never cropped sideways */
.nlp-page .feat.wide .art {
  flex: 0 0 42%;
  aspect-ratio: 1/1;
}

.nlp-page .feat.wide .f-body {
  padding: 30px 34px 32px;
  gap: 11px;
  justify-content: center;
}

.nlp-page .feat.wide h3 {
  font-size: clamp(23px, 2.4vw, 30px);
}

.nlp-page .feat.wide .blurb {
  font-size: 14.5px;
  max-width: 54ch;
}

.nlp-page .feat.wide .foot {
  margin-top: 14px;
  padding-top: 0;
}

/* the featured card carries the same hover overlay as the rail cards */
.nlp-page .feat .cc-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Weighted to the bottom instead of a flat wash over the whole card: the
   buttons sit in the bottom-right corner, so the tint only needs to be dark
   where they are. The title, blurb and price stay readable on hover. */
.nlp-page .feat.show_add_cart::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
      rgba(8, 40, 50, .74) 0%,
      rgba(8, 40, 50, .38) 34%,
      rgba(8, 40, 50, .12) 66%,
      rgba(8, 40, 50, 0) 100%);
  opacity: 0;
  transition: opacity .25s ease;
}

.nlp-page .feat.show_add_cart:hover::before {
  opacity: 1;
}

/* Bottom-right, and they rise a few pixels as they fade in so the pair reads
   as one deliberate action cluster rather than something switched on. */
.nlp-page .feat .learn-course-hover-content {
  position: absolute;
  right: 22px;
  bottom: 22px;
  top: auto;
  left: auto;
  z-index: 3;
  display: flex;
  gap: 10px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(7px);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}

.nlp-page .feat.show_add_cart:hover .learn-course-hover-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nlp-page .feat .learn-view-detail-btn,
.nlp-page .feat .learn-add-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  text-decoration: none;
  white-space: nowrap;
  /* lifts the pair off the artwork so they don't read as painted on */
  box-shadow: 0 8px 20px -8px rgba(8, 40, 50, .55);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.nlp-page .feat .learn-view-detail-btn:hover,
.nlp-page .feat .learn-add-cart-btn:hover {
  box-shadow: 0 10px 24px -8px rgba(8, 40, 50, .62);
}

.nlp-page .feat .learn-view-detail-btn {
  background: var(--white);
  color: var(--ink);
}

.nlp-page .feat .learn-view-detail-btn:hover {
  background: var(--sky-tint);
  color: var(--sky-deep);
}

.nlp-page .feat .learn-add-cart-btn {
  background: var(--gold);
  color: #4A3A06;
}

.nlp-page .feat .learn-add-cart-btn:hover {
  background: #E5B62B;
  color: #4A3A06;
}

/* ============ outcomes / written reviews ============ */
.nlp-page .out-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.nlp-page .out {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nlp-page .out .o-top {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 19px 0;
}

.nlp-page .out .o-top img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.nlp-page .out .o-top b {
  display: block;
  font-size: 15px;
  color: var(--ink);
}

.nlp-page .out .o-top span {
  font-size: 12.5px;
  color: var(--text-soft);
}

.nlp-page .out blockquote {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17.5px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  line-height: 1.5;
  padding: 13px 19px 4px;
  border: 0;
  margin: 0;
  background: none;
}

.nlp-page .out .o-now {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 19px 17px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green-deep);
}

.nlp-page .out .o-now i {
  font-style: normal;
}

/* LinkedIn mark beside an instructor's name, same link the course-detail
   team grid offers. Sized to the name, not to a button. */
.nlp-page .out .o-top .o-li {
  display: inline-flex;
  vertical-align: -2px;
  margin-left: 6px;
  color: #0A66C2;
}

.nlp-page .out .o-top .o-li svg {
  width: 14px;
  height: 14px;
}

.nlp-page .out .o-top .o-li:hover {
  color: #004182;
}

/* the instructor bio runs longer than a testimonial, so ease the pull-quote
   size back a little to keep three cards even */
.nlp-page .out blockquote {
  font-size: 15.5px;
}

/* ============ platform teaser ============ */
.nlp-page .plat {
  border-color: var(--sky-line);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.nlp-page .plat .pl-copy {
  padding: 36px 40px;
}

.nlp-page .plat .pl-copy h2 {
  font-size: clamp(24px, 2.8vw, 32px);
  margin: 8px 0 12px;
}

.nlp-page .plat .pl-copy h2 em {
  font-style: italic;
  color: var(--teal);
}

.nlp-page .plat .pl-copy>p {
  font-size: 15px;
  color: var(--text-soft);
  max-width: 48ch;
}

.nlp-page .plat-rows {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.nlp-page .plat-row {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 10px 0;
}

.nlp-page .plat-row+.plat-row {
  border-top: 1px dashed var(--line);
}

.nlp-page .plat-row .ptile {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.nlp-page .plat-row .ptile svg {
  width: 18px;
  height: 18px;
}

.nlp-page .plat-row .ptile.t1 {
  background: var(--sky-tint);
  color: var(--sky-deep);
}

.nlp-page .plat-row .ptile.t2 {
  background: var(--green-soft);
  color: var(--green-deep);
}

.nlp-page .plat-row .ptile.t3 {
  background: #F9F1DA;
  color: var(--orange-deep);
}

.nlp-page .plat-row .ptile.t4 {
  background: var(--teal-tint);
  color: var(--teal);
}

.nlp-page .plat-row .pb {
  min-width: 0;
  line-height: 1.45;
}

.nlp-page .plat-row .pb b {
  font-size: 14.5px;
  color: var(--ink);
}

.nlp-page .plat-row .pb span {
  display: block;
  font-size: 13px;
  color: var(--text-soft);
}

.nlp-page .plat .pl-copy .btn {
  margin-top: 20px;
}

.nlp-page .plat .pl-visual {
  position: relative;
  background: linear-gradient(160deg, var(--sky-tint) 0%, var(--teal-tint) 100%);
  display: grid;
  place-items: center;
  padding: 34px;
}

.nlp-page .mock-feed {
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.nlp-page .mock-post {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 13px 15px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.nlp-page .mock-post img,
.nlp-page .mock-post .mav {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.nlp-page .mock-post .mav {
  background: var(--sky-tint);
  color: var(--sky-deep);
  display: grid;
  place-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 11px;
}

.nlp-page .mock-post .mb {
  min-width: 0;
  line-height: 1.4;
}

.nlp-page .mock-post .mb b {
  font-size: 12.5px;
  color: var(--ink);
  display: block;
}

.nlp-page .mock-post .mb span {
  font-size: 12px;
  color: var(--text-soft);
}

.nlp-page .mock-post.tilt1 {
  transform: rotate(-1.2deg);
}

.nlp-page .mock-post.tilt2 {
  transform: rotate(.9deg);
}

.nlp-page .pl-visual .toast {
  position: absolute;
  right: 7%;
  bottom: 8%;
  background: var(--green-deep);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 15px;
  transform: rotate(1.5deg);
  box-shadow: var(--shadow-lift);
}

/* ============ impact ============ */
.nlp-page .impact {
  overflow: hidden;
  border-color: var(--teal-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  background: linear-gradient(150deg, #F2F9F7 0%, var(--white) 65%);
}

.nlp-page .impact .i-art {
  position: relative;
  min-height: 300px;
}

.nlp-page .impact .i-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nlp-page .impact .i-copy {
  padding: 36px 40px;
}

.nlp-page .impact .i-copy h2 {
  font-size: clamp(24px, 2.8vw, 32px);
  margin: 8px 0 12px;
}

.nlp-page .impact .i-copy h2 em {
  font-style: italic;
  color: var(--green-deep);
}

.nlp-page .impact .i-copy>p {
  font-size: 15px;
  color: var(--text-soft);
  max-width: 50ch;
}

.nlp-page .i-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.nlp-page .i-stat b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 26px;
  color: var(--green-deep);
}

.nlp-page .i-stat span {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
  display: block;
}

.nlp-page .impact .hand-line {
  margin-top: 20px;
  font-size: 21px;
  display: block;
}

/* ============ why ============ */
.nlp-page .why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

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

.nlp-page .why .tile {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--sky-tint);
  color: var(--sky-deep);
  display: grid;
  place-items: center;
  margin-bottom: 13px;
}

.nlp-page .why .tile svg {
  width: 22px;
  height: 22px;
}

.nlp-page .why .tile img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

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

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

.nlp-page .why p .named {
  color: var(--ink);
  font-weight: 600;
}

/* ============ video testimonials ============ */
.nlp-page .tes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.nlp-page .tes {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 9/13;
  border: 0;
  padding: 0;
  background: #223;
  text-align: left;
  display: block;
  width: 100%;
}

.nlp-page .tes img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .97;
  transition: transform .4s ease;
}

.nlp-page .tes:hover img {
  transform: scale(1.03);
}

.nlp-page .tes .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.nlp-page .tes .play i {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .95);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  background: rgba(0, 0, 0, .16);
  backdrop-filter: blur(2px);
}

.nlp-page .tes .who {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 14px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

.nlp-page .tes .who span {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  opacity: .85;
}

/* Testimonials as a rail rather than a fixed grid, so every approved video is
   reachable instead of only the first four. Same track as the course rails, so
   the arrows, scrollbar and wheel handling all apply unchanged.

   Cards are sized to show EXACTLY N per view — no half-card peeking — matching
   the Swiper on the live homepage, whose breakpoints these mirror
   (1 / 700:2 / 1040:3 / 1430:4). The 18px subtrahends are the rail's own gap
   multiplied by the number of gaps between N cards. */
/* contained, not full-bleed: the track width must equal the content width for
   the N-per-view maths below to land on whole cards */
.nlp-page .tes-rail {
  padding-inline: 0;
  scroll-padding-inline-start: 0;
  padding-bottom: 14px;
}

.nlp-page .tes-rail>.tes {
  scroll-snap-align: start;
}

.nlp-page .tes-rail>.tes {
  flex: 0 0 calc((100% - 54px) / 4);
}

/* 4 across, 3 gaps */
@media (max-width: 1430px) {
  .nlp-page .tes-rail>.tes {
    flex-basis: calc((100% - 36px) / 3);
  }

  /* 3 across, 2 gaps */
}

@media (max-width: 1040px) {
  .nlp-page .tes-rail>.tes {
    flex-basis: calc((100% - 18px) / 2);
  }

  /* 2 across, 1 gap */
}

@media (max-width: 700px) {
  .nlp-page .tes-rail>.tes {
    flex-basis: 100%;
  }

  /* 1 across */
}

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

.nlp-page .faq-intro p {
  font-size: 15px;
  color: var(--text-soft);
  margin-top: 8px;
  max-width: 34ch;
}

.nlp-page .faq-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.nlp-page .faq {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--white);
  overflow: hidden;
}

.nlp-page .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(--ink);
}

.nlp-page .faq summary::-webkit-details-marker {
  display: none;
}

.nlp-page .faq summary .n {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--sky-deep);
  flex: 0 0 auto;
}

.nlp-page .faq summary .pm {
  margin-left: auto;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text-soft);
  font-size: 14px;
  transition: transform .2s ease;
}

.nlp-page .faq[open] summary .pm {
  transform: rotate(45deg);
  border-color: var(--sky-line);
  color: var(--sky-deep);
}

.nlp-page .faq .a {
  padding: 0 19px 17px 48px;
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.68;
}

/* ============ close band ============ */
.nlp-page .close-band {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin: 78px 0 30px;
  background: linear-gradient(140deg, var(--teal) 0%, var(--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-page .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-page .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-page .close-band .kicker {
  color: var(--gold);
  position: relative;
  z-index: 1;
}

.nlp-page .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-page .close-band h2 em {
  font-style: italic;
  color: var(--gold);
}

.nlp-page .close-band p {
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
  max-width: 50ch;
  position: relative;
  z-index: 1;
}

.nlp-page .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-page .close-panel .pp {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.nlp-page .close-panel .pp b {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 42px;
  font-weight: 500;
}

.nlp-page .close-panel .pp span {
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
}

.nlp-page .close-panel .inc {
  list-style: none;
  margin: 14px 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
}

.nlp-page .close-panel .inc li {
  display: flex;
  gap: 9px;
}

.nlp-page .close-panel .inc li::before {
  content: "\2713";
  color: var(--gold);
  font-weight: 800;
}

.nlp-page .close-panel .btn {
  width: 100%;
}

.nlp-page .close-panel .first10 {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .75);
  margin-top: 11px;
  text-align: center;
}

.nlp-page .close-panel .first10 b {
  color: var(--gold);
}

/* ============ responsive ============ */
@media (max-width: 1080px) {
  .nlp-page .hero .h-in {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-page .hero .h-art {
    max-width: 580px;
  }

  .nlp-page .hero .h-art img.trees {
    width: 100%;
    margin-left: 0;
  }

  .nlp-page .stats .s-in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .nlp-page .stat+.stat {
    border-left: 0;
  }

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

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

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

  .nlp-page .impact .i-art {
    min-height: 220px;
  }

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

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

  .nlp-page .feat.wide {
    flex-direction: column;
  }

  .nlp-page .feat.wide .art {
    flex: none;
    aspect-ratio: 1/1;
  }

  .nlp-page .feat.wide .f-body {
    padding: 20px 22px 22px;
  }

  .nlp-page .close-band {
    grid-template-columns: minmax(0, 1fr);
    padding: 36px 32px;
  }
}

@media (max-width: 640px) {

  .nlp-page .wrap,
  .nlp-page .brands .b-in,
  .nlp-page .stats .s-in {
    padding-left: 16px;
    padding-right: 16px;
  }

  .nlp-page .hero .h-in {
    padding: 38px 16px 22px;
  }

  .nlp-page .sec {
    padding: 48px 0 8px;
  }

  .nlp-page .manifesto {
    padding: 60px 0 48px;
  }

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

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

  .nlp-page .subscribe {
    flex-direction: column;
  }

  .nlp-page .close-band {
    padding: 30px 22px;
  }

  .nlp-page .rail {
    gap: 13px;
    padding-inline: 16px;
    scroll-padding-inline-start: 16px;
    padding-bottom: 22px;
  }

  .nlp-page .rail>.cc {
    flex-basis: 78%;
  }

  .nlp-page .rail.inset {
    padding-inline: 18px;
    scroll-padding-inline-start: 18px;
  }

  .nlp-page .rail-nav {
    display: none;
  }

  .nlp-page .rail-band {
    border-radius: 22px;
    padding: 32px 0 24px;
  }

  .nlp-page .rail-band .rb-head {
    padding: 0 18px;
  }

  .nlp-page .plat .pl-copy,
  .nlp-page .impact .i-copy {
    padding: 26px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nlp-page * {
    animation: none;
    transition: none;
  }

  .nlp-page .rail {
    scroll-behavior: auto;
  }
}

/* Touch devices have no hover: show the card actions permanently rather than
   leaving them unreachable behind a :hover that never fires. */
@media (hover: none) {

  .nlp-page .cc .learn-course-hover-content,
  .nlp-page .feat .learn-course-hover-content {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    width: auto;
    flex-direction: row;
    padding: 0 17px 15px;
  }

  .nlp-page .cc.show_add_cart::before,
  .nlp-page .feat.show_add_cart::before {
    content: none;
  }

  .nlp-page .cc .learn-view-detail-btn {
    background: var(--sky-tint);
    color: var(--sky-deep);
    flex: 1;
  }

  .nlp-page .cc .learn-add-cart-btn {
    flex: 1;
  }
}