/* ==========================================================================
   ARTICLE PAGE — v3  (the live /{locale}/learn/blog/{slug}, and its preview at
   /en/learn/blog-test-v3/{slug})

   Loaded by resources/views/lms/learn/blog_detail_v3.blade.php alone, pushed
   into the head after front.css so it wins on order as well as specificity.

   Ported on 2026-08-25 from the /learn/blog-test twin — frontend-test/css/
   base.css (the parts an article uses) plus frontend-test/css/article.css,
   merged into one file. That folder is the design donor and NOT a dependency:
   nothing at this URL loads from public/frontend-test/.

   Three things changed in the port, all of them because this page runs on the
   real learn_school layout — Bootstrap, Nifty and front.css are all present,
   which the twin's standalone shell did not have:

     1. SCOPE. Everything is under .nlp-article, the class on #page-content,
        instead of the twin's .nlp-page. Two classes deep beats every theme
        rule below it on specificity, so there is not one !important here.

     2. TOKENS ARE PREFIXED --at-. The twin's tokens are unprefixed (--sky,
        --ink, --green…), and front.css defines its own :root --green, --dark,
        --primary and friends. An unprefixed --green declared on a container
        would silently repaint any front.css rule that reaches an element
        inside the article. Same reasoning, and the same fix, as the --nlp-
        prefix in lms/css/header_v3.css.

     3. THE BUTTON IS .at-btn, NOT .btn.small. front.css declares
        .small { font-size: 11px !important } — a rule no amount of specificity
        can beat — so the theme's utility class is dropped from the markup
        rather than fought with a second !important.

   Order matters in two places and is deliberate: the shell primitives (.sec,
   .card, .kicker…) come before the article furniture, because .at-head,
   .at-faq, .at-courses and .at-more each re-set the section padding .sec gives
   them at equal specificity. Keep the halves in this order.

   Two halves after that: the furniture (masthead, contents, share, cards) and
   .at-prose, the typography for the article body. The body is editor HTML
   written over several years, so it is styled by element — the controller has
   already stripped the inline styling that would outrank these rules
   (HomeController@articleSandboxProse), which is the other reason this file
   needs no !important.
   ========================================================================== */

/* Contents links jump to a heading, so the jump is eased rather than snapped.
   This declaration is global by nature, but the file it lives in is loaded on
   this page alone. */
html {
  scroll-behavior: smooth;
}

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

  /* The v3 header is sticky and roughly 67px tall (13px padding, a 40px
     control row, 13px, 1px border). The contents rail parks below it and a
     heading jumped to from that rail clears it by the same amount. Both are
     driven from here so one number moves them together. */
  --at-head-offset: 86px;
}

/* ============ reset ============ */
/* Bootstrap already box-sizes everything; repeated here so the port behaves
   identically if this page is ever lifted onto a layout that does not. */
.nlp-article *,
.nlp-article *::before,
.nlp-article *::after {
  box-sizing: border-box;
}

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

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

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

.nlp-article a {
  color: inherit;
}

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

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

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

/* Screen-reader-only. Used by the copy-link fallback in blog_detail_v3.js,
   which parks a textarea off-screen; named at-* because that textarea is
   appended to <body>, outside .nlp-article, so it cannot rely on the scope. */
.at-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============ theme neutralisers ============ */
/* front.css gives every .card an 8px radius, a grey shadow and 20px of bottom
   margin, and rounds the first and last child to 2px. This page's cards get
   their radius and shadow from the tokens above, and their spacing from the
   grid gaps around them, so all of that is undone here rather than worked
   around in the components. */
.nlp-article .card {
  background: var(--at-white);
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius);
  box-shadow: var(--at-shadow);
  margin-bottom: 0;
}

.nlp-article .card> :first-child,
.nlp-article .card> :last-child {
  border-radius: 0;
}

/* ============ buttons ============ */
/* .at-btn, not .btn — see note 3 in the file header. */
.nlp-article .at-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--at-sky);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 26px;
  text-decoration: none;
  flex: 0 0 auto;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px -6px rgba(63, 169, 232, .45);
}

.nlp-article .at-btn-sm {
  padding: 8px 17px;
  font-size: 13px;
  box-shadow: none;
}

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

/* The only .at-btn on the page is a <span> inside the course card's <a>, so it
   lights up with the card rather than on its own hover. */
.nlp-article .at-course:hover .at-btn-gold {
  background: #E5B62B;
}

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

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

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

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

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

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

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

/* Lighter heading for a strip inside a section — "keep reading" sits under one. */
.nlp-article .ns-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 13px;
}

.nlp-article .ns-head .k {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--at-green-deep);
}

.nlp-article .ns-head .side {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--at-text-soft);
}

/* ============ faq accordion ============ */
/* <details>/<summary>, so it opens and closes with no JavaScript at all. */
.nlp-article .faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: 34px;
  align-items: start;
}

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

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

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

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

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

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

.nlp-article .faq summary .q {
  flex: 1;
  min-width: 0;
}

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

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

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

/* ============ reading progress ============ */
/* Fixed to the very top of the viewport rather than under the sticky header:
   the header is translucent and ~67px tall, and a bar tucked below it reads as
   part of the page instead of part of the window. z-index clears the v3
   header's 90. */
.nlp-article .at-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 95;
  background: transparent;
  pointer-events: none;
}

.nlp-article .at-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--at-sky) 0%, var(--at-teal) 100%);
  transition: width .1s linear;
}

/* ============ masthead ============ */
.nlp-article .at-head {
  padding-top: 30px;
}

.nlp-article .at-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--at-text-soft);
  margin-bottom: 24px;
}

.nlp-article .at-crumbs a {
  text-decoration: none;
}

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

.nlp-article .at-crumbs a:last-child {
  color: var(--at-ink);
  font-weight: 600;
}

.nlp-article .at-crumbs span {
  color: var(--at-sky-line);
}

.nlp-article .at-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 42px;
  align-items: center;
}

.nlp-article .at-head-copy h1 {
  font-size: clamp(30px, 4vw, 47px);
  line-height: 1.1;
  margin-top: 10px;
  max-width: 20ch;
}

.nlp-article .at-deck {
  font-size: 17px;
  line-height: 1.62;
  color: var(--at-text-soft);
  margin-top: 16px;
  max-width: 52ch;
}

.nlp-article .at-byline {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--at-line);
}

.nlp-article .at-by {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}

.nlp-article .at-by img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.nlp-article .at-by b {
  display: block;
  font-size: 14px;
  color: var(--at-ink);
  line-height: 1.35;
}

.nlp-article a.at-by:hover b {
  color: var(--at-sky-deep);
}

.nlp-article .at-by-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--at-text-soft);
}

.nlp-article .at-by-meta>span+span::before {
  content: "·";
  margin-right: 8px;
  color: var(--at-sky-line);
}

.nlp-article .at-updated {
  margin-top: 12px;
  font-size: 12px;
  color: var(--at-text-soft);
  font-style: italic;
}

.nlp-article .at-head-art {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.nlp-article .at-head-art img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.nlp-article .at-cat {
  background: var(--at-sky-tint);
  color: var(--at-sky-deep);
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11.5px;
}

.nlp-article .at-head-art .at-cat {
  position: absolute;
  left: 14px;
  top: 14px;
  background: rgba(255, 255, 255, .95);
  color: var(--at-ink);
  box-shadow: var(--at-shadow);
  font-size: 11px;
}

/* ============ share ============ */
.nlp-article .at-share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.nlp-article .at-share-label {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--at-text-soft);
  margin-right: 3px;
}

.nlp-article .at-share-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  border: 1px solid var(--at-line);
  background: var(--at-white);
  color: var(--at-text-soft);
  padding: 0;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .1s ease;
}

.nlp-article .at-share-btn svg {
  width: 15px;
  height: 15px;
}

.nlp-article .at-share-btn:hover {
  color: var(--at-teal);
  border-color: var(--at-teal-line);
  background: var(--at-teal-tint);
}

.nlp-article .at-share-btn:active {
  transform: scale(.94);
}

.nlp-article .at-copy.is-done {
  color: var(--at-green-deep);
  border-color: var(--at-green-soft);
  background: var(--at-green-soft);
}

/* The copy confirmation is a label, not a toast: it replaces nothing and
   disappears on its own once blog_detail_v3.js drops the class. */
.nlp-article .at-copy {
  position: relative;
}

.nlp-article .at-copy.is-done::after {
  content: attr(data-copied);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--at-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  padding: 5px 10px;
  white-space: nowrap;
}

/* ============ body + aside ============ */
.nlp-article .at-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 54px;
  align-items: start;
  margin-top: 44px;
}

.nlp-article .at-main {
  min-width: 0;
}

.nlp-article .at-aside {
  min-width: 0;
}

.nlp-article .at-sticky {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The card sticks, the contents rail above it does not — the prototype's rule,
   and the reason for it is height: contents (capped at 52vh) plus the full
   sales card is taller than a laptop viewport, so pinning the pair would push
   the CTA permanently below the fold. Pinning the card alone keeps the buy
   path reachable for the whole article.
   .at-aside has to stretch for that to work at all: .at-body sets
   align-items:start, which would otherwise shrink the column to its content
   and leave a sticky child no distance to travel.
   #container.nlp-shell is overflow:clip rather than overflow:hidden precisely
   so this can stick — see the note in lms/css/header_v3.css. */
@media (min-width: 1081px) {
  .nlp-article .at-aside {
    align-self: stretch;
  }

  /* The stretch above is not enough on its own: a sticky element may only
     travel inside its own PARENT's box, and .at-sticky is content-height, so
     the card had nowhere to go and rode the page up under the header. Handing
     the wrapper the column's full height gives it the whole article to travel,
     and the travel ends where .at-body ends — the card releases once the
     author box has passed instead of overlapping the sections after it. */
  .nlp-article .at-sticky {
    height: 100%;
  }

  .nlp-article .at-course {
    position: sticky;
    top: var(--at-head-offset);
  }
}

/* ---------- contents ---------- */
/* Hidden until blog_detail_v3.js has found headings to put in it. */
.nlp-article .at-toc {
  display: none;
  border-left: 2px solid var(--at-line);
  padding-left: 18px;
}

.nlp-article .at-toc.is-ready {
  display: block;
}

.nlp-article .at-toc-title {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--at-text-soft);
  margin-bottom: 12px;
}

.nlp-article .at-toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 52vh;
  overflow-y: auto;
}

.nlp-article .at-toc-list a {
  display: block;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.45;
  color: var(--at-text-soft);
  padding: 5px 0 5px 2px;
  border-left: 2px solid transparent;
  margin-left: -20px;
  padding-left: 18px;
  transition: color .15s ease, border-color .15s ease;
}

.nlp-article .at-toc-list a:hover {
  color: var(--at-ink);
}

.nlp-article .at-toc-list a.is-on {
  color: var(--at-teal);
  font-weight: 600;
  border-left-color: var(--at-teal);
}

.nlp-article .at-toc-list .at-toc-sub a {
  padding-left: 30px;
  font-size: 12.5px;
}

/* ---------- main course card ---------- */
/* The full sales card from the prototype's nx- layer, renamed into this file's
   at- system so the page has one naming scheme. Not a link as a whole — it
   contains a Trustpilot link, a certification link and the CTA — so the hover
   lift is on the card and the colour change is on the title alone. */
.nlp-article .at-course {
  display: block;
  overflow: hidden;
}

.nlp-article .at-course-art {
  display: block;
  position: relative;
  background: #F5F1E6;
}

.nlp-article .at-course-art img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
}

/* Best-seller flag. Only rendered on the fallback card — see the view. */
.nlp-article .at-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--at-gold);
  color: #4A3A06;
  font: 700 10px/1 'Poppins', sans-serif;
  letter-spacing: .08em;
  padding: 6px 9px;
  border-radius: 7px;
}

.nlp-article .at-course-body {
  display: block;
  padding: 16px 18px 18px;
}

.nlp-article .at-course-body .kicker {
  display: block;
  font-size: 10px;
  letter-spacing: .14em;
  margin-bottom: 6px;
}

.nlp-article .at-course-title {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--at-ink);
  line-height: 1.28;
  text-decoration: none;
  margin-bottom: 8px;
}

.nlp-article .at-course-title:hover {
  color: var(--at-teal);
}

/* rating */
.nlp-article .at-stars {
  color: #E9A83A;
  letter-spacing: 1.5px;
  font-size: 13px;
}

.nlp-article .at-course-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.nlp-article .at-course-rating b {
  font-size: 14px;
  color: var(--at-ink);
}

.nlp-article .at-course-rating a {
  color: var(--at-text-soft);
  text-decoration: none;
}

.nlp-article .at-course-rating a:hover {
  color: var(--at-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* accreditation pills */
.nlp-article .at-accred {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}

.nlp-article .at-accred-item {
  font: 700 10px/1 'Poppins', sans-serif;
  letter-spacing: .06em;
  background: var(--at-teal-tint);
  color: var(--at-teal-deep);
  border: 1px solid var(--at-teal-line);
  padding: 5px 8px;
  border-radius: 6px;
}

.nlp-article .at-accred-item.is-gold {
  background: #FBF3D9;
  color: #8A6118;
  border-color: #EBDCA8;
}

/* feature checklist */
.nlp-article .at-course-feats {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 12.5px;
  color: var(--at-text);
}

.nlp-article .at-course-feats li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
  line-height: 1.45;
}

.nlp-article .at-course-feats li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--at-green-deep);
  font-weight: 700;
}

/* price */
.nlp-article .at-course-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.nlp-article .at-was {
  font-size: 13px;
  color: var(--at-text-soft);
  text-decoration: line-through;
}

.nlp-article .at-now {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--at-ink);
}

/* .at-now is this card's price; .at-price is the smaller one on the
   related-course cards further down. Both live here so the two never drift. */
.nlp-article .at-price {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--at-ink);
}

.nlp-article .at-off {
  background: #FDEBD7;
  color: #B9700E;
  font: 700 11px/1 'Poppins', sans-serif;
  padding: 4px 7px;
  border-radius: 6px;
}

.nlp-article .at-guarantee {
  font-size: 11.5px;
  color: var(--at-text-soft);
  margin-bottom: 12px;
}

/* ctas */
.nlp-article .at-btn-block {
  display: flex;
  width: 100%;
  text-align: center;
}

.nlp-article .at-cert-link {
  display: block;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--at-teal);
  margin-top: 9px;
  text-decoration: none;
}

.nlp-article .at-cert-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the article's author vouching for the course */
.nlp-article .at-author-rec {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--at-mist);
  border: 1px solid var(--at-line);
  border-radius: 12px;
  padding: 11px;
  margin-top: 14px;
}

.nlp-article .at-author-rec img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.nlp-article .at-author-rec p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--at-text);
  margin: 0;
}

.nlp-article .at-author-rec b {
  display: block;
  font: 700 10px/1.4 'Poppins', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--at-text-soft);
  margin-bottom: 3px;
}

/* rotating five-star review. min-height holds the box steady so a shorter
   quote swapping in cannot make the card jump. */
.nlp-article .at-mini-review {
  border-top: 1px dashed var(--at-line);
  margin-top: 13px;
  padding-top: 11px;
  min-height: 78px;
}

.nlp-article .at-mini-review p {
  font-size: 12.5px;
  font-style: italic;
  color: var(--at-text);
  margin: 4px 0 3px;
  line-height: 1.5;
  transition: opacity .35s ease;
}

.nlp-article .at-mini-review.is-fading p,
.nlp-article .at-mini-review.is-fading .at-mini-name {
  opacity: 0;
}

.nlp-article .at-mini-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--at-ink);
  transition: opacity .35s ease;
}

/* ============ prose ============
   The article body. Editor HTML, so every rule targets an element, and the
   scale below is the only typography an article gets. */
/* overflow-wrap: an article that quotes a bare URL should not widen the page. */
.nlp-article .at-prose {
  font-size: 17px;
  line-height: 1.78;
  color: var(--at-text);
  overflow-wrap: break-word;
}

.nlp-article .at-prose>*:first-child {
  margin-top: 0;
}

.nlp-article .at-prose p {
  margin: 0 0 1.15em;
}

/* Standfirst: the opening paragraph carries the reader in. */
.nlp-article .at-prose>p:first-of-type {
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--at-ink);
}

.nlp-article .at-prose h2,
.nlp-article .at-prose h3,
.nlp-article .at-prose h4,
.nlp-article .at-prose h5 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--at-ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  /* Room for the sticky header when a contents link jumps here. */
  scroll-margin-top: calc(var(--at-head-offset) + 10px);
}

.nlp-article .at-prose h2 {
  font-size: clamp(24px, 2.6vw, 30px);
  margin: 1.9em 0 .55em;
}

.nlp-article .at-prose h3 {
  font-size: clamp(20px, 2.1vw, 23px);
  margin: 1.7em 0 .5em;
}

.nlp-article .at-prose h4 {
  font-size: 18px;
  margin: 1.5em 0 .45em;
}

.nlp-article .at-prose h5 {
  font-size: 16px;
  margin: 1.4em 0 .4em;
}

/* A heading straight after a heading is a subtitle, not a new section. */
.nlp-article .at-prose h2+h3,
.nlp-article .at-prose h3+h4 {
  margin-top: .6em;
}

.nlp-article .at-prose a {
  color: var(--at-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--at-teal-line);
}

.nlp-article .at-prose a:hover {
  color: var(--at-teal-deep);
  text-decoration-color: var(--at-teal);
}

.nlp-article .at-prose strong,
.nlp-article .at-prose b {
  color: var(--at-ink);
  font-weight: 700;
}

.nlp-article .at-prose em,
.nlp-article .at-prose i {
  font-style: italic;
}

.nlp-article .at-prose ul,
.nlp-article .at-prose ol {
  margin: 0 0 1.2em;
  padding-left: 1.35em;
}

.nlp-article .at-prose ul {
  list-style: disc;
}

.nlp-article .at-prose ol {
  list-style: decimal;
}

.nlp-article .at-prose li {
  margin-bottom: .5em;
  padding-left: .2em;
}

.nlp-article .at-prose li::marker {
  color: var(--at-sky);
}

.nlp-article .at-prose ol li::marker {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--at-teal);
}

.nlp-article .at-prose li>ul,
.nlp-article .at-prose li>ol {
  margin: .5em 0 .2em;
}

.nlp-article .at-prose blockquote {
  margin: 1.7em 0;
  padding: 20px 26px;
  border-left: 3px solid var(--at-teal);
  background: var(--at-teal-tint);
  border-radius: 0 14px 14px 0;
  font-size: 17.5px;
  line-height: 1.66;
  color: var(--at-ink);
  font-style: italic;
}

.nlp-article .at-prose blockquote p:last-child {
  margin-bottom: 0;
}

.nlp-article .at-prose img,
.nlp-article .at-prose video {
  border-radius: 16px;
  margin: 1.6em 0;
  box-shadow: var(--at-shadow);
}

.nlp-article .at-prose figure {
  margin: 1.6em 0;
}

.nlp-article .at-prose figure img {
  margin: 0;
}

.nlp-article .at-prose figcaption {
  font-size: 12.5px;
  color: var(--at-text-soft);
  margin-top: 9px;
  text-align: center;
}

.nlp-article .at-prose iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 16px;
  margin: 1.6em 0;
  display: block;
}

.nlp-article .at-prose hr {
  border: 0;
  border-top: 1px solid var(--at-line);
  margin: 2.2em 0;
}

/* blog_detail_v3.js wraps every table so a wide one scrolls inside the column
   instead of pushing the page sideways. */
.nlp-article .at-table-scroll {
  overflow-x: auto;
  margin: 1.6em 0;
  border-radius: 14px;
  border: 1px solid var(--at-line);
}

.nlp-article .at-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.nlp-article .at-prose th,
.nlp-article .at-prose td {
  padding: 11px 15px;
  border-bottom: 1px solid var(--at-line);
  text-align: left;
  vertical-align: top;
}

.nlp-article .at-prose th {
  background: var(--at-mist);
  color: var(--at-ink);
  font-weight: 700;
  font-size: 13px;
}

.nlp-article .at-prose tr:last-child td {
  border-bottom: 0;
}

.nlp-article .at-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--at-mist);
  border: 1px solid var(--at-line);
  border-radius: 6px;
  padding: 1px 6px;
}

.nlp-article .at-prose pre {
  background: var(--at-ink);
  color: #E8F1F2;
  border-radius: 14px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 1.6em 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.nlp-article .at-prose pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

/* ============ in-prose call to action ============
   Authored inside the article body by the editor, not by this view:

     <div class="nat-blog-cta" data-cta-position="end-of-article" …>
       <h3>…</h3><p>…</p><a class="nat-blog-cta-button">…</a>
     </div>

   The live article page styles these from css/nat_blog_style.css, which this
   page deliberately does not load (see the file header). Without the rules
   below the block inherits plain prose typography — an h3, a paragraph and a
   text link — so the weakest element on the page lands at exactly the point
   the reader has finished the article and is ready to act.

   Element selectors, like the rest of the prose: the markup is editor HTML and
   cannot be changed from here. Every rule is one class deeper than the prose
   rule it overrides, which is why there is still no !important in this file. */
.nlp-article .at-prose .nat-blog-cta {
  position: relative;
  overflow: hidden;
  margin: 2.7em 0 2.2em;
  padding: 36px 40px 38px;
  border-radius: var(--at-radius);
  background: linear-gradient(135deg, var(--at-ink) 0%, var(--at-teal-deep) 60%, var(--at-teal) 100%);
  box-shadow: var(--at-shadow-lift);
  scroll-margin-top: calc(var(--at-head-offset) + 10px);
}

/* Gold wash top-right — the same accent the sidebar course card's button
   carries, so the two asks on the page read as one offer. */
.nlp-article .at-prose .nat-blog-cta::after {
  content: '';
  position: absolute;
  top: -58%;
  right: -10%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 192, 51, .28) 0%, rgba(240, 192, 51, 0) 70%);
  pointer-events: none;
}

.nlp-article .at-prose .nat-blog-cta>* {
  position: relative;
  z-index: 1;
}

.nlp-article .at-prose .nat-blog-cta h3 {
  margin: 0 0 11px;
  color: var(--at-white);
  font-size: clamp(25px, 3vw, 31px);
  line-height: 1.16;
}

.nlp-article .at-prose .nat-blog-cta p {
  margin: 0 0 24px;
  max-width: 44em;
  font-size: 16.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .82);
}

/* a.nat-blog-cta-button, not .nat-blog-cta-button alone: the prose link rule
   above underlines every <a> in the body, and this has to outrank it. */
.nlp-article .at-prose a.nat-blog-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 34px;
  border-radius: 999px;
  background: var(--at-gold);
  color: #4A3A06;
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(240, 192, 51, .55);
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}

.nlp-article .at-prose a.nat-blog-cta-button:hover {
  background: #F6CD4E;
  color: #4A3A06;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -8px rgba(240, 192, 51, .6);
}

.nlp-article .at-prose a.nat-blog-cta-button:active {
  transform: translateY(0);
}

/* The date the editor prints above that block. The masthead byline already
   carries it, so here it is a quiet stamp closing the body rather than a
   second line of prose at body size. */
.nlp-article .at-prose .nat-blog-published-date {
  margin: 2.2em 0 0;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--at-text-soft);
}

/* ============ article foot ============ */
.nlp-article .at-foot {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--at-line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nlp-article .at-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

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

.nlp-article .at-tag {
  text-decoration: none;
  border: 1px solid var(--at-line);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--at-text);
  background: var(--at-white);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.nlp-article .at-tag:hover {
  border-color: var(--at-sky-line);
  background: var(--at-sky-tint);
  color: var(--at-sky-deep);
}

.nlp-article .at-foot-share {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.nlp-article .at-top-link {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--at-text-soft);
  text-decoration: none;
}

.nlp-article .at-top-link:hover {
  color: var(--at-sky-deep);
}

/* ============ author card ============ */
.nlp-article .at-author {
  display: flex;
  gap: 20px;
  padding: 24px 26px;
  margin-top: 30px;
}

.nlp-article .at-author>img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.nlp-article .at-author-body {
  min-width: 0;
}

.nlp-article .at-author-name {
  display: inline-block;
  margin-top: 6px;
  text-decoration: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--at-ink);
}

.nlp-article a.at-author-name:hover {
  color: var(--at-teal);
}

.nlp-article .at-author-bio {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--at-text-soft);
  margin-top: 8px;
}

.nlp-article .at-author-more {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--at-sky-deep);
  text-decoration: none;
}

.nlp-article .at-author-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ faq ============ */
.nlp-article .at-faq {
  padding-top: 66px;
}

/* ============ related courses ============ */
.nlp-article .at-courses {
  padding-top: 58px;
}

.nlp-article .at-course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

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

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

.nlp-article .at-cc-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F5F1E6;
}

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

.nlp-article .at-cc:hover .at-cc-art img {
  transform: scale(1.04);
}

.nlp-article .at-cc-new {
  position: absolute;
  left: 12px;
  top: 12px;
  border-radius: 999px;
  background: var(--at-green-soft);
  color: var(--at-green-deep);
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 11px;
}

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

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

.nlp-article .at-cc-meta>span+span::before {
  content: "·";
  margin-right: 7px;
  color: var(--at-sky-line);
}

.nlp-article .at-cc-body b {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--at-ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nlp-article .at-cc:hover .at-cc-body b {
  color: var(--at-teal);
}

.nlp-article .at-cc-foot {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px dashed var(--at-line);
  display: flex;
  align-items: center;
  gap: 10px;
}

.nlp-article .at-cc-foot .at-price {
  font-size: 15.5px;
}

.nlp-article .at-cc-students {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--at-text-soft);
}

/* --- card actions --------------------------------------------------------
   View + Add to cart on the related-course cards, the same pair the homepage
   rails carry. The class names are the live ones (.show_add_cart on the card,
   .learn-course-hover-content / .learn-view-detail-btn / .learn-add-cart-btn
   inside it) so the delegated .add_cart handler in learn_school.blade.php
   drives them with no JavaScript on this page. Only the look is ours.

   front.css already styles all four classes for the old catalogue card — a
   200px-wide 5px-radius button and display:none until :hover. Every rule below
   is two classes deeper, so it wins on specificity without an !important, and
   `display` is stated here rather than left to the theme's hover toggle: the
   reveal is opacity and visibility, which animate.
   ------------------------------------------------------------------------ */
/* Whole-card link, under the actions so the buttons stay clickable. */
.nlp-article .at-cc .at-cc-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.nlp-article .at-cc.show_add_cart::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 0;
  background: rgba(10, 45, 55, .58);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.nlp-article .at-cc.show_add_cart:hover::before,
.nlp-article .at-cc.show_add_cart:focus-within::before {
  opacity: 1;
}

/* Hidden with opacity and pointer-events rather than visibility or display:
   both of those take the two buttons out of the tab order, which would leave a
   keyboard user unable to reach them at all — and would make the :focus-within
   reveal below unreachable dead code. pointer-events: none is what lets a click
   anywhere on the resting card fall through to .at-cc-link. */
.nlp-article .at-cc .learn-course-hover-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: calc(100% - 40px);
  margin: 0;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.nlp-article .at-cc.show_add_cart:hover .learn-course-hover-content,
.nlp-article .at-cc.show_add_cart:focus-within .learn-course-hover-content {
  opacity: 1;
  pointer-events: auto;
}

.nlp-article .at-cc .learn-view-detail-btn,
.nlp-article .at-cc .learn-add-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  width: 100%;
  margin: 0;
  padding: 11px 18px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s ease, color .15s ease;
}

.nlp-article .at-cc .learn-view-detail-btn {
  background: var(--at-white);
  color: var(--at-ink);
}

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

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

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

/* The card lifts on hover and the title turns teal; behind the scrim neither
   reads, so both are dropped once the actions are up. */
.nlp-article .at-cc.show_add_cart:hover .at-cc-body b {
  color: var(--at-ink);
}

/* ============ keep reading ============ */
.nlp-article .at-more {
  padding-top: 58px;
  padding-bottom: 66px;
}

.nlp-article .at-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.nlp-article .at-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}

.nlp-article .at-post:hover {
  box-shadow: var(--at-shadow-lift);
  transform: translateY(-3px);
}

.nlp-article .at-post-art {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #F5F1E6;
}

.nlp-article .at-post-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.nlp-article .at-post:hover .at-post-art img {
  transform: scale(1.04);
}

.nlp-article .at-post-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 18px 17px;
  flex: 1;
}

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

.nlp-article .at-post-body b {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--at-ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nlp-article .at-post:hover .at-post-body b {
  color: var(--at-teal);
}

.nlp-article .at-post-blurb {
  font-size: 13px;
  color: var(--at-text-soft);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nlp-article .at-more-all {
  margin-top: 18px;
  text-align: center;
}

.nlp-article .at-more-all a {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--at-sky-deep);
  text-decoration: none;
}

.nlp-article .at-more-all a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ layout's scroll-to-top button ============
   Nifty parks .scroll-top.in at bottom:45px right:15px — exactly where this
   page's chat launcher and panel sit. It is moved to the middle of the right
   edge so the chat is never covered.

   Deliberately NOT scoped to .nlp-article: the button lives in the layout,
   outside #page-content, so it cannot be reached from that class. It does not
   need to be — this stylesheet is pushed by this view alone, so the rule only
   ever loads on this page and every other view keeps Nifty's placement. It
   wins on order (@stack('css') comes after nifty.css) at equal specificity, so
   no !important is involved.

   Centred with auto margins rather than translateY(-50%) on purpose: the
   layout's own script sets `animation: jellyIn .8s` inline every time the
   button appears, and those keyframes animate transform: matrix3d(), which
   would wipe out a translate and drop the button half a viewport mid-animation.
   Nifty's :hover and :active scale() transforms would do the same. Auto margins
   are immune to all three. */
.scroll-top.in {
  top: 0;
  bottom: 0;
  height: -moz-fit-content;
  height: fit-content;
  margin-top: auto;
  margin-bottom: auto;
}

/* ============ author chat ============
   Ported from the prototype's nx- chat. UI only for now: the panel opens and
   closes, the quick replies are inert until the answers are wired up.

   The panel and the launcher are position:fixed, so they escape .nlp-article and
   are laid out against the viewport — which is why these few rules keep the
   scope but cannot rely on it for placement.

   z-index 1000 clears the v3 header (90), this page's progress bar (95) and the
   layout's scroll-to-top button (999) — the chat has to sit above that button,
   not behind it. */
/* pointer-events: none keeps the mark decorative — it takes no click and no
   hover, and clicks land on whatever sits under it instead of dying on a
   launcher that opens nothing. The hover scale below is kept for the day the
   panel is wired up and the element goes back to being a button. */
.nlp-article .at-chat-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: none;
  cursor: default;
  pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(15, 80, 95, .35));
  transition: transform .2s ease;
}

.nlp-article .at-chat-fab:hover {
  transform: scale(1.06);
}

.nlp-article .at-chat-fab img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  display: block;
}

.nlp-article .at-chat-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--at-teal);
  pointer-events: none;
  animation: at-chat-pulse 2s infinite;
}

@keyframes at-chat-pulse {
  0% {
    transform: scale(1);
    opacity: .7;
  }

  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

.nlp-article .at-chat-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--at-gold);
  border: 2.5px solid #fff;
  color: #4A3A06;
  font: 700 10px/12px 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nlp-article .at-chat-fab.is-read .at-chat-dot,
.nlp-article .at-chat-fab.is-read .at-chat-pulse {
  display: none;
}

.nlp-article .at-chat {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 1000;
  width: min(340px, calc(100vw - 32px));
  background: var(--at-paper);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15, 80, 95, .3);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.97);
  transition: opacity .25s ease, transform .25s ease;
}

.nlp-article .at-chat.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.nlp-article .at-chat-head {
  background: var(--at-teal);
  color: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.nlp-article .at-chat-head img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .6);
  object-fit: cover;
}

.nlp-article .at-chat-head b {
  display: block;
  font-size: 14px;
}

.nlp-article .at-chat-head small {
  font-size: 11px;
  color: #CFE7E4;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nlp-article .at-chat-head small::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ADFA4;
}

.nlp-article .at-chat-close {
  margin-left: auto;
  background: none;
  border: 0;
  color: #CFE7E4;
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
}

.nlp-article .at-chat-close:hover {
  color: #fff;
}

.nlp-article .at-chat-msgs {
  padding: 14px;
  height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--at-mist);
}

.nlp-article .at-msg {
  max-width: 86%;
  padding: 9px 13px;
  border-radius: 13px;
  font-size: 13px;
  line-height: 1.5;
}

.nlp-article .at-msg-bot {
  background: var(--at-paper);
  border: 1px solid var(--at-line);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  color: var(--at-text);
}

.nlp-article .at-msg-user {
  background: var(--at-teal);
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.nlp-article .at-chat-replies {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 11px 14px;
  background: var(--at-paper);
  border-top: 1px solid var(--at-line);
}

.nlp-article .at-chat-qr {
  background: var(--at-teal-tint);
  border: 1px solid var(--at-teal-line);
  color: var(--at-teal-deep);
  font: 600 12px 'Inter', sans-serif;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  text-decoration: none;
}

.nlp-article .at-chat-qr:hover {
  background: var(--at-teal);
  color: #fff;
}

/* ============ sticky bottom bar ============
   Parked off-screen and slid up by blog_detail_v3.js once the reader is 18%
   through the page. z-index 900 puts it under the chat (1000) and under the
   layout's scroll-to-top button (999) — the bar is the least urgent of the
   three and should never cover either. */
.nlp-article .at-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--at-paper);
  border-top: 1px solid var(--at-line);
  box-shadow: 0 -10px 30px rgba(15, 80, 95, .12);
  transform: translateY(120%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.nlp-article .at-bar.is-shown {
  transform: translateY(0);
}

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

.nlp-article .at-bar-art {
  flex: 0 0 auto;
  display: block;
}

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

.nlp-article .at-bar-txt {
  flex: 1;
  min-width: 0;
}

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

/* One line, clipped rather than wrapped: the bar has to keep its height so it
   never eats the article underneath it. */
.nlp-article .at-bar-sub {
  display: block;
  font-size: 11.5px;
  color: var(--at-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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

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

.nlp-article .at-bar-cta {
  white-space: nowrap;
}

.nlp-article .at-bar-close {
  background: none;
  border: 0;
  font-size: 16px;
  color: var(--at-text-soft);
  cursor: pointer;
  padding: 6px;
}

.nlp-article .at-bar-close:hover {
  color: var(--at-ink);
}

/* While the bar is up, the chat launcher and panel ride above it rather than
   sitting behind its top edge. */
.nlp-article.has-bar .at-chat-fab {
  bottom: 76px;
}

.nlp-article.has-bar .at-chat {
  bottom: 148px;
}

/* ============ responsive ============ */
@media (max-width: 1180px) {
  .nlp-article .at-body {
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 38px;
  }
}

@media (max-width: 1080px) {
  .nlp-article .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-article .at-head-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .nlp-article .at-head-copy h1 {
    max-width: none;
  }

  .nlp-article .at-head-art img {
    aspect-ratio: 16 / 9;
  }

  /* One column: the contents list stops being a rail and the course card
     becomes a full-width footer to the article. */
  .nlp-article .at-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    margin-top: 32px;
  }

  .nlp-article .at-sticky {
    position: static;
  }

  .nlp-article .at-toc {
    border-left: 0;
    border-top: 1px solid var(--at-line);
    padding-left: 0;
    padding-top: 18px;
  }

  .nlp-article .at-toc-list {
    max-height: none;
  }

  .nlp-article .at-toc-list a {
    margin-left: 0;
    padding-left: 12px;
    border-left-width: 2px;
  }

  .nlp-article .at-course-grid,
  .nlp-article .at-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .nlp-article .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

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

  .nlp-article .at-head {
    padding-top: 20px;
  }

  .nlp-article .at-crumbs {
    margin-bottom: 16px;
  }

  .nlp-article .at-byline {
    gap: 14px;
  }

  .nlp-article .at-share-label {
    display: none;
  }

  .nlp-article .at-prose {
    font-size: 16.5px;
  }

  .nlp-article .at-prose>p:first-of-type {
    font-size: 17.5px;
  }

  .nlp-article .at-prose blockquote {
    padding: 16px 18px;
    font-size: 16.5px;
  }

  .nlp-article .at-prose .nat-blog-cta {
    padding: 26px 22px 28px;
  }

  .nlp-article .at-prose .nat-blog-cta p {
    font-size: 15.5px;
    margin-bottom: 20px;
  }

  /* Full-width tap target, and the authored "→" no longer trails off the pill. */
  .nlp-article .at-prose a.nat-blog-cta-button {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }

  .nlp-article .at-author {
    flex-direction: column;
    gap: 14px;
    padding: 20px;
  }

  .nlp-article .at-course-grid,
  .nlp-article .at-more-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-article .at-top-link {
    margin-left: 0;
  }

  /* A phone has no room for a 280px transcript above the quick replies once the
     header and the launcher are accounted for. */
  .nlp-article .at-chat-msgs {
    height: 210px;
  }

  .nlp-article .at-chat-fab {
    width: 52px;
    height: 52px;
    right: 14px;
    bottom: 14px;
  }

  .nlp-article .at-chat-fab img {
    width: 52px;
    height: 52px;
  }

  .nlp-article .at-chat {
    right: 14px;
    bottom: 78px;
  }

  .nlp-article.has-bar .at-chat-fab {
    bottom: 72px;
  }

  .nlp-article.has-bar .at-chat {
    bottom: 136px;
  }

  /* Thumbnail and price go first on a phone — the headline, the course name and
     the CTA are what the strip is for. */
  .nlp-article .at-bar-art,
  .nlp-article .at-bar-price {
    display: none;
  }

  .nlp-article .at-bar-in {
    gap: 10px;
    padding: 8px 12px;
  }
}

/* Touch devices have no hover, so the card actions become a permanent row
   inside the card rather than sitting behind a :hover that never fires. They
   stay position:relative with a z-index rather than going static — .at-cc-link
   is stretched over the whole card, and a static row would paint underneath it
   and hand every tap to the link. */
@media (hover: none) {
  .nlp-article .at-cc.show_add_cart::before {
    content: none;
  }

  .nlp-article .at-cc .learn-course-hover-content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    width: auto;
    flex-direction: row;
    gap: 8px;
    padding: 0 17px 16px;
  }

  .nlp-article .at-cc-body {
    padding-bottom: 12px;
  }

  .nlp-article .at-cc .learn-view-detail-btn,
  .nlp-article .at-cc .learn-add-cart-btn {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 12.5px;
  }

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

@media (prefers-reduced-motion: reduce) {

  .nlp-article *,
  .nlp-article *::before,
  .nlp-article *::after {
    animation: none;
    transition: none;
  }
}