/* =============================================================================
   The Academy — landing page
   Served at /en/academy by HomeController@academy, view
   resources/views/frontend/academy.blade.php.

   THREE RULES THIS FILE KEEPS
   ---------------------------
   1. EVERYTHING IS SCOPED TO .nlp-academy. The page runs inside the ordinary
      Naturalistico shell (lms.layouts.learn_school), which already loads
      bootstrap.min.css, nifty.css and front.css. Those three declare bare
      element rules — section, h2, ul, table, summary — so an unscoped rule
      here would either lose to them or leak onto every other page.

   2. TOKENS ARE PREFIXED --ac-. front.css declares its own :root variables
      (--green, --dark, --primary); an unprefixed --line or --ink here would
      silently repaint any front.css rule that reaches an element inside the
      page. The shell's own --nlp-* tokens are READ, never redefined —
      --nlp-promo-h in particular is measured at runtime by lms/js/header_v3.js.

   3. NO !important. Where a shell rule has to be beaten the fix is a more
      specific selector — .nlp-academy is already one class in hand.

   THIS IS THE NATURALISTICO v3 SYSTEM, NOT A SEPARATE ONE
   -------------------------------------------------------
   The palette, the 1320px/30px rail, Inter 16px body copy, Fraunces 600
   headings with an italic accent <em>, Poppins kickers and pill buttons, the
   18px card radius and the teal-tinted shadows are all lifted straight from
   about_v3.css / our_impact_v3.css so the page sits inside the site rather
   than beside it.

   The Academy's own signature is ONE indirection, borrowed from our_impact:
   --ac-accent is TEAL where most pages are sky-led. Kickers, buttons, rules
   and the italic in every heading follow the accent, so the page reads as a
   distinct product without inventing a second design language — which also
   means re-skinning it for another brand later is one token, not a rewrite.
   A single warm gold-tint band (.ac-strip) is the only other departure.

   Fraunces, Inter and Poppins are ALREADY in the shell's single css2 request
   (see $nlp_font_families in learn_school.blade.php). Do not add a font link.
   ========================================================================= */

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

  /* The Academy is teal-led. Every accent on the page reads this, so the
     whole surface re-skins from one line. */
  --ac-accent: var(--ac-teal);
  --ac-accent-deep: var(--ac-teal-deep);
  --ac-accent-tint: var(--ac-teal-tint);
  --ac-accent-line: var(--ac-teal-line);

  /* 1320px with 30px gutters, matching .ab-wrap / .im-wrap / .nlp-page .wrap
     AND the header row itself. A narrower rail leaves the content visibly
     inset inside the nav above it, which reads as the page being zoomed out. */
  --ac-max: 1320px;
  --ac-gut: clamp(20px, 4vw, 30px);

  /* Clearance for the sticky v3 chrome. The header measures 67px pinned; the
     promo strip pins with it, and its measured height arrives as
     --nlp-promo-h (0px when there is no strip). */
  --ac-head-offset: calc(88px + var(--nlp-promo-h, 0px));

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

  /* NOT decorative — this is what makes the page visible inside the student
     shell. nifty.css paints a 165px band across the top of the content area:

         #content-container:before { position:absolute; height:165px; z-index:0 }

     An absolutely-positioned pseudo-element paints ABOVE static in-flow
     content, so anything unpositioned in the first 165px of a student page is
     covered by an opaque rectangle. Every other page escapes it because the
     theme positions its own wrappers two rules later —
     `#page-head, #page-content { position: relative }` — and nifty's panels
     are relative too. The Academy views put their own markup straight into
     @yield('usercontent'), so they need to say it themselves.

     Inert on the landing page, which renders in the frontend shell where no
     such band exists. Every absolutely-positioned child on this page already
     has its own relative parent, so this does not steal a containing block. */
  position: relative;
  z-index: 1;
}

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

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

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

.nlp-academy h1 {
  font-size: clamp(32px, 4.1vw, 52px);
}

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

.nlp-academy h3 {
  font-size: 18px;
  line-height: 1.35;
}

.nlp-academy h1 em,
.nlp-academy h2 em {
  font-style: italic;
  color: var(--ac-accent);
}

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

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

.nlp-academy :focus-visible {
  outline: 2px solid var(--ac-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Bootstrap makes every <label> bold; nifty indents <blockquote>. Neither is
   used on this page, but front.css also gives <ul> a left pad the lists here
   undo locally rather than globally. */
.nlp-academy ul {
  list-style: none;
}

/* =========================== layout primitives ========================== */
.nlp-academy .ac-wrap {
  max-width: var(--ac-max);
  margin: 0 auto;
  padding-left: var(--ac-gut);
  padding-right: var(--ac-gut);
}

.nlp-academy .ac-narrow {
  max-width: 860px;
}

.nlp-academy .ac-sec {
  padding: clamp(52px, 6vw, 78px) 0;
}

.nlp-academy .ac-sec[id] {
  scroll-margin-top: var(--ac-head-offset);
}

.nlp-academy .ac-rule {
  height: 1px;
  background: var(--ac-line);
  max-width: var(--ac-max);
  margin: 0 auto;
}

/* The official lockup. Sized by WIDTH with height following the intrinsic
   ratio — the file is a fixed 800x128 and the width/height attributes on the
   tag reserve the space, so the headline does not jump as it loads.
   No filter, no recolour: it is supplied artwork and the brand blue is not the
   page's teal on purpose. */
.nlp-academy .ac-hero-logo {
  display: block;
  width: 260px;
  max-width: 72%;
  height: auto;
  margin-bottom: 26px;
}

.nlp-academy .ac-kicker {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ac-accent);
  margin-bottom: 10px;
}

.nlp-academy .ac-lede {
  font-size: 16.5px;
  color: var(--ac-text-soft);
  margin-top: 14px;
  max-width: 62ch;
}

/* ================================ buttons =============================== */
.nlp-academy .ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--ac-accent);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 26px;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
  box-shadow: 0 6px 16px -6px rgba(15, 110, 120, .45);
}

.nlp-academy .ac-btn:hover,
.nlp-academy .ac-btn:focus {
  background: var(--ac-accent-deep);
  color: #fff;
  text-decoration: none;
}

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

.nlp-academy .ac-sub-cta {
  font-size: 13.5px;
  color: var(--ac-text-soft);
  margin-top: 14px;
}

/* ====================== private-preview bar =============================
   Only rendered while config('academy.published') is false. Deliberately
   outside the design language: if this bar is on screen the page is private,
   and nobody should have to wonder which it is. */
.nlp-academy .ac-preview {
  background: var(--ac-ink);
  color: #FFE9A8;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  padding: 9px var(--ac-gut);
}

/* ========================= the stripped header ==========================
   THE ONE EXCEPTION TO RULE 1. Every other rule in this file is scoped to
   .nlp-academy, the page wrapper. These are scoped to .nlp-academy-shell,
   which lms.layouts.learn_school puts on #container when the view sets
   $academy_chrome — i.e. on this page and nowhere else, so it is just as
   narrow a scope, it simply sits one level further out because the header is
   the shell's markup and not the page's.

   Much of the traffic arrives from the other companies, so the header must
   not announce Naturalistico. The blade does the removing (site nav, search,
   cart, language pill, mobile drawer, category rail are not rendered at all,
   not hidden) and swaps the wordmark for the Academy lockup. What is left for
   CSS is sizing that lockup, because it is a different shape from the one the
   shell is built around.

   Beating header_v3.css needs no !important: #container carries .nlp-shell
   and .nlp-academy-shell together, so .nlp-shell.nlp-academy-shell is one
   class more specific than the rule it overrides, and this file loads after
   header_v3.css (the layout's @stack('css') is below that <link>). */

/* 800x120 at 31px tall is 207px wide, against the Naturalistico wordmark's
   136px. With the nav row gone there is room for it, and it needs the size:
   it is the only brand mark left on the page. .h-right already has
   margin-left:auto, so the two survivors sit at opposite ends by themselves —
   nothing here has to lay the row out. */
.nlp-shell.nlp-academy-shell .wordmark img {
  height: 31px;
}

/* The lockup is wordmark-plus-rule, so it keeps reading down to a fairly
   small size — but at 207px it is over half of a 360px screen, sharing the
   row with a sign-in button that has to stay tappable. 26px/174px is what
   keeps both at their real size with the shell's 20px gutters. */
@media (max-width: 480px) {
  .nlp-shell.nlp-academy-shell .wordmark img {
    height: 26px;
  }
}

/* ================================= hero ================================= */
.nlp-academy .ac-hero {
  padding: 58px 0 6px;
}

.nlp-academy .ac-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 50px;
  align-items: center;
}

.nlp-academy .ac-hero h1 {
  margin-top: 12px;
  max-width: 16ch;
}

.nlp-academy .ac-hero .ac-lede {
  margin-top: 18px;
  max-width: 52ch;
}

.nlp-academy .ac-hero .ac-btn {
  margin-top: 28px;
}

/* NO CARD TREATMENT on the hero art.
   The border, shadow and mist fill were designed for a photograph of a
   practitioner, where a framed card reads as a portrait. The artwork that
   arrived is a watercolour on white — and the page itself is #FDFEFE, so a
   bordered box around it would draw a line around nothing and read as an empty
   card. Unframed, a white-background illustration blends into the page and
   floats beside the copy, which is what the composition was drawn for.

   The placeholder below KEEPS its frame: an empty slot does need an edge. */
.nlp-academy .ac-hero-art {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* The artwork is composed at 4/3 with the compass centred and even margins —
   the same aspect the frame declares — so cover has nothing to crop at any
   width and the image needs no nudging.

   This carried object-position:right until 11 Sep, because the supplied file
   had the compass at 71% across with 43% of the canvas empty on the left. That
   only held while the frame kept one shape; on a phone it still read as a
   drifting image with dead space. Fixed in the asset instead — do not
   reintroduce a nudge here, it would push a centred compass off to one side. */
.nlp-academy .ac-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.nlp-academy .ac-hero-art.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  /* The frame lives on the placeholder only — an empty slot needs an edge to
     read as a slot rather than as a gap in the page. */
  background: var(--ac-mist);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow);
}

.nlp-academy .ac-hero-art.is-empty span {
  font-size: 12.5px;
  color: var(--ac-text-soft);
  letter-spacing: .04em;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .nlp-academy .ac-hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* Phone running order:
         lockup · positioning line · HEADLINE · artwork · body · CTA
     The page opens on the proposition, and the compass sits directly under the
     headline it illustrates rather than stranded at the foot of the section
     where nobody scrolling past would reach it.

     The artwork is a SIBLING of the copy column, not one of its children, so
     `order` alone cannot interleave it — order only sorts among siblings.
     display:contents on the copy column dissolves that wrapper at this
     breakpoint, promoting its children to items of the hero grid so the art can
     be ordered among them. The wrapper is a plain layout div carrying no
     semantics, which is the case display:contents is safe for.

     Desktop is untouched: the two-column grid and the source order both stand,
     and that source order is what a screen reader follows. */
  .nlp-academy .ac-hero-grid {
    display: flex;
    flex-direction: column;
    /* gap:0, NOT the 30px this grid uses in two columns. Dissolving the copy
       wrapper makes every paragraph a flex item, and a container gap would then
       land between all of them on top of their own margins. The existing
       margins already set the rhythm; only the artwork needs spacing of its
       own, below. */
    gap: 0;
  }

  .nlp-academy .ac-hero-copy {
    display: contents;
  }

  .nlp-academy .ac-hero-copy .ac-hero-logo {
    order: 1;
  }

  .nlp-academy .ac-hero-copy .ac-kicker {
    order: 2;
  }

  .nlp-academy .ac-hero-copy h1 {
    order: 3;
  }

  /* Breathing room either side, since the container gap is off. */
  .nlp-academy .ac-hero-art {
    order: 4;
    margin: 14px 0 2px;
  }

  .nlp-academy .ac-hero-copy .ac-lede {
    order: 5;
  }

  /* align-self is set with the centring rules below, not here. */
  .nlp-academy .ac-hero-copy .ac-btn {
    order: 6;
  }

  .nlp-academy .ac-hero-copy .ac-sub-cta {
    order: 7;
  }

  /* TIGHTER RHYTHM ON A PHONE.
     The desktop margins were set against a two-column hero where the copy has a
     tall image beside it to balance. Stacked into one column they total roughly
     194px of gap before any text is drawn, which pushes the CTA off the first
     screen. Halved here; the desktop values are untouched. */
  .nlp-academy .ac-hero {
    padding-top: 30px;
  }

  .nlp-academy .ac-hero-copy .ac-hero-logo {
    margin-bottom: 12px;
  }

  .nlp-academy .ac-hero-copy .ac-kicker {
    margin-bottom: 8px;
  }

  .nlp-academy .ac-hero h1 {
    margin-top: 6px;
  }

  .nlp-academy .ac-hero .ac-lede {
    margin-top: 12px;
  }

  .nlp-academy .ac-hero .ac-btn {
    margin-top: 20px;
  }

  .nlp-academy .ac-hero .ac-sub-cta {
    margin-top: 10px;
  }

  /* CENTRED ON A PHONE.
     One column with no facing image to align against, so a left edge has
     nothing to hold onto; centred reads as composed rather than as text that
     ran out of room.

     text-align alone is not enough for the headline and the body: both carry a
     max-width (16ch / 52ch), so their BOX stays left even when the text inside
     it centres. The auto side margins centre the box itself. The lockup needs
     the same treatment for the same reason, and the button is a flex item so it
     is centred with align-self, not text-align. */
  .nlp-academy .ac-hero-copy .ac-kicker,
  .nlp-academy .ac-hero h1,
  .nlp-academy .ac-hero .ac-lede,
  .nlp-academy .ac-hero .ac-sub-cta {
    text-align: center;
  }

  .nlp-academy .ac-hero h1,
  .nlp-academy .ac-hero .ac-lede {
    margin-left: auto;
    margin-right: auto;
  }

  .nlp-academy .ac-hero-copy .ac-hero-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .nlp-academy .ac-hero-copy .ac-btn {
    align-self: center;
  }

  /* The art follows the copy in source order and stays there on a phone, so the
     page opens on the lockup and the headline rather than on a picture. It used
     to carry order:-1 and lead — which pushed the proposition below the fold and
     made the first screen say nothing.
     A wider, shallower crop here: a 4/3 image at full phone width is tall enough
     to fill the screen on its own. */
  .nlp-academy .ac-hero-art {
    aspect-ratio: 16 / 10;
  }
}

/* ==================== proof + brand strip (the warm band) ================
   The page's one gold-tinted surface, and the Academy's only departure from
   the standard palette besides the teal accent. It carries the Trustpilot
   proof, so warmth here reads as reassurance rather than decoration. */
.nlp-academy .ac-strip {
  background: var(--ac-gold-tint);
  border-top: 1px solid rgba(176, 138, 62, .18);
  border-bottom: 1px solid rgba(176, 138, 62, .18);
}

.nlp-academy .ac-strip-in {
  padding: 26px var(--ac-gut);
  max-width: var(--ac-max);
  margin: 0 auto;
  text-align: center;
}

.nlp-academy .ac-proof-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ac-gold-deep);
  margin-bottom: 8px;
}

/* The Trustpilot lockup, between the kicker and the rating line. Sized in
   ch-independent px so it stays the same next to any translation, and capped
   so it reads as a mark of provenance rather than as the loudest thing in the
   band — the sentence under it is what actually carries the claim. */
.nlp-academy .ac-proof-logo {
  margin-bottom: 10px;
  line-height: 1;
}

.nlp-academy .ac-proof-logo img {
  height: 26px;
  width: auto;
}

.nlp-academy .ac-proof-logo a {
  display: inline-block;
}

.nlp-academy .ac-proof-line {
  font-size: 16px;
  color: var(--ac-ink);
  margin-bottom: 4px;
}

.nlp-academy .ac-proof-link {
  color: var(--ac-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nlp-academy .ac-proof-link:hover {
  color: var(--ac-ink);
}

.nlp-academy .ac-lineage {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac-text-soft);
  margin-top: 14px;
}

/* ======================= Naturalistico in numbers =======================
   Sits directly under the trust strip and continues its job, so it stays on
   the page ground rather than taking a tint of its own — two stacked tinted
   bands would read as two unrelated claims.

   Four columns that collapse to two on a phone, never one: these are short
   figures, and a single column turns a compact proof point into a long scroll.
   The dividers are drawn with a left border on all but the first of each row,
   which is why the grid is fixed rather than auto-flow. */
.nlp-academy .ac-numbers {
  background: #fff;
  border-bottom: 1px solid var(--ac-line);
}

.nlp-academy .ac-numbers-in {
  max-width: var(--ac-max);
  margin: 0 auto;
  padding: 30px var(--ac-gut);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.nlp-academy .ac-num {
  text-align: center;
  padding: 4px 10px;
}

.nlp-academy .ac-num+.ac-num {
  border-left: 1px solid var(--ac-line);
}

.nlp-academy .ac-num b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ac-ink);
}

.nlp-academy .ac-num span {
  display: block;
  margin-top: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ac-text-soft);
}

/* ---- school logo strip ---- */
.nlp-academy .ac-brands {
  background: var(--ac-mist);
  border-bottom: 1px solid var(--ac-line);
}

.nlp-academy .ac-brands-in {
  max-width: var(--ac-max);
  margin: 0 auto;
  padding: 18px var(--ac-gut);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 30px;
}

.nlp-academy .ac-brands-in span {
  font-size: 14px;
  color: var(--ac-text-soft);
}

/* The logos are supplied at mixed sizes; height alone normalises them without
   distorting any one lockup. */
.nlp-academy .ac-brands-in img {
  height: 27px;
  width: auto;
  opacity: .85;
  /* These logos are school uploads served from the Filestack CDN, not repo
     files — a bad one cannot be fixed from here, only by re-uploading it in
     admin. The Efficient Coach lockup is 8-bit RGB with NO alpha channel at
     all (the rest are RGBA), so its white background paints a hard box on
     this band.

     multiply makes white the identity colour: every white pixel resolves to
     whatever is behind it, so the box disappears into --ac-mist while the
     dark lockup is left essentially untouched (a #F6FAFA multiplicand shifts
     it by ~3%, which is below the threshold of noticing). It costs nothing on
     the logos that are already transparent — their transparent pixels have no
     colour to blend — and it keeps working if another white-boxed logo is
     uploaded later, which a per-file fix would not.

     This is a repair, not the cure: the cure is re-uploading that logo with
     an alpha channel, which also fixes the homepage's copy of this strip.
     When that lands, this declaration can go. */
  mix-blend-mode: multiply;
}

@media (max-width: 760px) {
  .nlp-academy .ac-numbers-in {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 22px;
  }

  /* Re-draw the dividers for a 2-up grid: the third cell starts a new row, so
     its left border would otherwise hang under nothing. */
  .nlp-academy .ac-num+.ac-num {
    border-left: 0;
  }

  .nlp-academy .ac-num:nth-child(even) {
    border-left: 1px solid var(--ac-line);
  }
}

/* ======================= tinted sections (gap, keynotes) =================
   The teal band our_impact uses for its closing section, reused here for the
   two passages that carry the argument rather than the offer. */
.nlp-academy .ac-band {
  background: var(--ac-teal-deep);
}

.nlp-academy .ac-band h2,
.nlp-academy .ac-band h3 {
  color: #fff;
}

.nlp-academy .ac-band p {
  color: #C8DEDF;
}

.nlp-academy .ac-band .ac-kicker {
  color: #7FD3D8;
}

.nlp-academy .ac-band .ac-lede {
  color: #C8DEDF;
}

.nlp-academy .ac-gap h2 {
  max-width: 22ch;
}

.nlp-academy .ac-gap p {
  margin-top: 16px;
}

.nlp-academy .ac-gap .ac-beat {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  color: #7FD3D8;
  margin: 26px 0;
  line-height: 1.3;
}

/* The closing line now carries the treatment .ac-beat used to.
   The rewrite removed the standalone line that sat mid-section, so the one
   change of voice moves to the end — same Fraunces italic and same light teal,
   so the section still has a moment that steps out of the body copy, just in a
   different place. Declared alongside .ac-beat rather than copied, so the two
   cannot drift if the accent is ever retuned. */
.nlp-academy .ac-gap .ac-last {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  color: #7FD3D8;
  line-height: 1.3;
  margin-top: 30px;
}

/* ============================ what you get ==============================
   Standard v3 cards: white, hairline border, 18px radius, soft teal shadow.
   Replaces the hairline lattice the prototype used — the lattice belonged to
   a document, the cards belong to this site. */
.nlp-academy .ac-get {
  background: var(--ac-mist);
}

.nlp-academy .ac-get-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}

.nlp-academy .ac-get-item {
  background: var(--ac-white);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow);
  padding: 26px 24px;
}

.nlp-academy .ac-get-item .ac-n {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ac-accent);
  display: block;
  margin-bottom: 10px;
}

.nlp-academy .ac-get-item b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ac-ink);
  margin-bottom: 8px;
  letter-spacing: -0.012em;
}

.nlp-academy .ac-get-item span {
  color: var(--ac-text);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .nlp-academy .ac-get-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .nlp-academy .ac-get-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================== keynotes =============================== */
.nlp-academy .ac-kn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}

.nlp-academy .ac-spk {
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  border-radius: var(--ac-radius);
  padding: 20px;
}

.nlp-academy .ac-spk-img {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, .06);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}

.nlp-academy .ac-spk-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nlp-academy .ac-spk-img span {
  font-size: 11px;
  color: rgba(200, 222, 223, .55);
  letter-spacing: .12em;
}

.nlp-academy .ac-spk h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.nlp-academy .ac-spk p {
  font-size: 13.5px;
  color: #A6C2C4;
}

/* The bio. Quieter and looser than the role/session line above it so the card
   still reads name-first — this is the paragraph you go on to read, not the
   label you scan. Separated by a rule rather than more space, which keeps the
   cards the same height whether a speaker has a bio yet or not. */
.nlp-academy .ac-spk-bio {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13.5px;
  line-height: 1.7;
  color: #B9D2D3;
}

.nlp-academy .ac-spk-tbc {
  border-style: dashed;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px;
}

.nlp-academy .ac-spk-tbc span {
  color: rgba(200, 222, 223, .6);
  font-size: 14px;
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
}

@media (max-width: 900px) {
  .nlp-academy .ac-kn-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================= how it works ============================= */
.nlp-academy .ac-how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 34px;
}

.nlp-academy .ac-how-step {
  position: relative;
  padding-top: 46px;
}

.nlp-academy .ac-how-step .ac-s-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--ac-accent-tint);
  color: var(--ac-accent);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nlp-academy .ac-how-step h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.nlp-academy .ac-how-step p {
  font-size: 15px;
  color: var(--ac-text);
}

@media (max-width: 900px) {
  .nlp-academy .ac-how-steps {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* ============================= the year map ============================= */
.nlp-academy .ac-year-head {
  margin-bottom: 34px;
}

.nlp-academy .ac-phase {
  margin-bottom: 30px;
}

.nlp-academy .ac-phase-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.nlp-academy .ac-phase-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 22px;
  color: var(--ac-accent);
  white-space: nowrap;
}

.nlp-academy .ac-phase-strap {
  font-size: 13.5px;
  color: var(--ac-text-soft);
  white-space: nowrap;
}

.nlp-academy .ac-phase-line {
  flex: 1;
  height: 1px;
  background: var(--ac-line);
  min-width: 20px;
}

.nlp-academy .ac-phase-months {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--ac-text-soft);
  letter-spacing: .12em;
  white-space: nowrap;
}

.nlp-academy .ac-month {
  display: grid;
  grid-template-columns: 44px 1fr 1.5fr;
  gap: 18px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--ac-line);
}

.nlp-academy .ac-m-num {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ac-text-soft);
  font-variant-numeric: tabular-nums;
}

.nlp-academy .ac-m-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--ac-ink);
  letter-spacing: -0.012em;
}

.nlp-academy .ac-m-focus {
  color: var(--ac-text);
  font-size: 14.5px;
  line-height: 1.55;
}

.nlp-academy .ac-pillar {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 9px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* The four pillars stay inside the site palette: teal, green, gold, sky. */
.nlp-academy .ac-pillar.is-identity {
  background: var(--ac-teal);
}

.nlp-academy .ac-pillar.is-clients {
  background: #2EA194;
}

.nlp-academy .ac-pillar.is-practice {
  background: var(--ac-gold-deep);
}

.nlp-academy .ac-pillar.is-business {
  background: var(--ac-sky-deep);
}

.nlp-academy .ac-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--ac-text-soft);
}

.nlp-academy .ac-legend div {
  display: flex;
  align-items: center;
}

@media (max-width: 820px) {
  .nlp-academy .ac-month {
    grid-template-columns: 34px 1fr;
    gap: 12px;
  }

  .nlp-academy .ac-m-focus {
    grid-column: 2;
    font-size: 14px;
    margin-top: 5px;
  }

  .nlp-academy .ac-phase-strap {
    display: none;
  }
}

/* ============================== the manuals ============================= */
.nlp-academy .ac-man {
  background: var(--ac-mist);
}

.nlp-academy .ac-man-head {
  margin-bottom: 30px;
}

.nlp-academy .ac-man-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.nlp-academy .ac-man-card {
  background: var(--ac-white);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow);
  padding: 14px;
}

/* A4, not 3/4. The covers are artwork for a printed manual and arrive at
   1273x1800 (1:1.414). Against the 3/4 this slot used to declare, object-fit:
   cover cropped ~3% off the top and bottom — nothing was clipped, but it cut
   the 4.8% bottom margin to about 2% and left the composition sitting low.
   Matching the artwork's own ratio shows each cover whole and costs nothing,
   since the placeholder gradient has no shape of its own to preserve. */
.nlp-academy .ac-man-card .ac-man-cover {
  width: 100%;
  aspect-ratio: 1273 / 1800;
  background: linear-gradient(150deg, var(--ac-accent-tint), var(--ac-mist));
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  display: block;
  object-fit: cover;
}

@media (max-width: 820px) {
  .nlp-academy .ac-man-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin: 0 auto;
  }
}

/* =========================== Holistico / tools ========================== */
.nlp-academy .ac-tool-head {
  margin-bottom: 30px;
}

.nlp-academy .ac-pairs {
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  background: var(--ac-white);
  box-shadow: var(--ac-shadow);
  overflow: hidden;
}

.nlp-academy .ac-pair {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr;
  gap: 22px;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--ac-line);
}

.nlp-academy .ac-pair:last-child {
  border-bottom: 0;
}

.nlp-academy .ac-pair-l {
  font-size: 15px;
  color: var(--ac-ink);
  font-weight: 500;
}

.nlp-academy .ac-pair-arrow {
  color: var(--ac-accent);
  font-size: 16px;
  line-height: 1;
}

.nlp-academy .ac-pair-r {
  font-size: 15px;
  color: var(--ac-text);
}

@media (max-width: 760px) {
  .nlp-academy .ac-pair {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 18px;
  }

  .nlp-academy .ac-pair-arrow {
    display: none;
  }
}

.nlp-academy .ac-econ {
  margin-top: 22px;
  border: 1px solid var(--ac-accent-line);
  background: var(--ac-accent-tint);
  border-radius: var(--ac-radius);
  padding: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.nlp-academy .ac-econ>div {
  padding: 0 22px;
}

.nlp-academy .ac-econ .ac-lbl {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac-text-soft);
  margin-bottom: 8px;
}

.nlp-academy .ac-econ .ac-amt {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.1;
  color: var(--ac-ink);
}

.nlp-academy .ac-econ .ac-amt.is-was {
  color: var(--ac-text-soft);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.nlp-academy .ac-econ .ac-amt.is-now {
  color: var(--ac-accent);
}

.nlp-academy .ac-econ .ac-cap {
  font-size: 13.5px;
  color: var(--ac-text-soft);
  margin-top: 6px;
}

.nlp-academy .ac-econ .ac-econ-r {
  border-left: 1px solid var(--ac-accent-line);
}

.nlp-academy .ac-tool-foot {
  margin-top: 16px;
  text-align: center;
  font-size: 14.5px;
  color: var(--ac-text-soft);
}

@media (max-width: 640px) {
  .nlp-academy .ac-econ {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .nlp-academy .ac-econ .ac-econ-r {
    border-left: 0;
    border-top: 1px solid var(--ac-accent-line);
    padding-top: 22px;
  }
}

/* =========================== Client Attraction ========================== */
.nlp-academy .ac-ca-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 50px;
  align-items: center;
}

.nlp-academy .ac-ca p {
  margin-top: 16px;
}

.nlp-academy .ac-ca-badge {
  border: 1px solid var(--ac-line);
  background: var(--ac-white);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow-lift);
  padding: 34px;
  text-align: center;
}

.nlp-academy .ac-ca-badge .ac-big {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 62px;
  color: var(--ac-accent);
  line-height: 1;
  display: block;
}

.nlp-academy .ac-ca-badge .ac-small {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ac-text-soft);
  margin-top: 10px;
  display: block;
}

.nlp-academy .ac-ca-badge .ac-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 21px;
  margin-top: 20px;
  display: block;
  border-top: 1px solid var(--ac-line);
  padding-top: 20px;
  color: var(--ac-ink);
}

.nlp-academy .ac-ca-badge .ac-sep-price {
  display: block;
  font-size: 13.5px;
  color: var(--ac-text-soft);
  margin-top: 6px;
}

@media (max-width: 900px) {
  .nlp-academy .ac-ca-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ============================= who it is for ============================ */
.nlp-academy .ac-who {
  background: var(--ac-mist);
}

.nlp-academy .ac-who ul {
  margin-top: 22px;
}

.nlp-academy .ac-who li {
  padding: 13px 0 13px 30px;
  position: relative;
  border-bottom: 1px solid var(--ac-line);
  font-size: 15.5px;
  color: var(--ac-ink);
}

.nlp-academy .ac-who li:last-child {
  border-bottom: 0;
}

.nlp-academy .ac-who li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--ac-accent);
}

.nlp-academy .ac-who-note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--ac-text-soft);
  max-width: 66ch;
}

/* =============================== the price ============================== */
.nlp-academy .ac-join-head {
  text-align: center;
  margin: 0 auto 34px;
}

.nlp-academy .ac-price-card {
  border: 1px solid var(--ac-line);
  background: var(--ac-white);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow-lift);
  padding: clamp(26px, 4vw, 44px);
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.nlp-academy .ac-price-lock {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac-accent);
  background: var(--ac-accent-tint);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.nlp-academy .ac-price-now {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(52px, 8vw, 70px);
  line-height: 1;
  color: var(--ac-ink);
}

.nlp-academy .ac-price-now sup {
  font-size: .42em;
  top: -.72em;
  position: relative;
  color: var(--ac-text-soft);
}

.nlp-academy .ac-price-per {
  font-size: 14.5px;
  color: var(--ac-text-soft);
  margin-top: 4px;
}

.nlp-academy .ac-price-note {
  color: var(--ac-text);
  font-size: 14.5px;
  max-width: 48ch;
  margin: 16px auto 0;
}

.nlp-academy .ac-price-card .ac-btn {
  margin-top: 24px;
  width: 100%;
  max-width: 340px;
}

.nlp-academy .ac-price-incl-h {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac-text-soft);
  margin: 30px 0 4px;
  text-align: left;
  border-top: 1px solid var(--ac-line);
  padding-top: 24px;
}

.nlp-academy .ac-price-incl {
  text-align: left;
}

.nlp-academy .ac-price-incl li {
  padding: 9px 0 9px 30px;
  position: relative;
  font-size: 14.5px;
  color: var(--ac-text);
}

.nlp-academy .ac-price-incl li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--ac-accent);
}

.nlp-academy .ac-price-notes {
  font-size: 12.5px;
  color: var(--ac-text-soft);
  margin-top: 22px;
  text-align: left;
  line-height: 1.65;
}

/* ================================== FAQ =================================
   <details>/<summary> rather than JS: the answers stay in the DOM for search
   and for ctrl-F, and there is no handler to lose if a script fails. */
.nlp-academy .ac-faq-list {
  margin-top: 26px;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  background: var(--ac-white);
  box-shadow: var(--ac-shadow);
  overflow: hidden;
}

.nlp-academy .ac-faq-list details {
  border-bottom: 1px solid var(--ac-line);
}

.nlp-academy .ac-faq-list details:last-child {
  border-bottom: 0;
}

.nlp-academy .ac-faq-list summary {
  padding: 18px 52px 18px 24px;
  cursor: pointer;
  list-style: none;
  position: relative;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ac-ink);
  transition: color .15s;
}

.nlp-academy .ac-faq-list summary::-webkit-details-marker {
  display: none;
}

.nlp-academy .ac-faq-list summary:hover {
  color: var(--ac-accent);
}

.nlp-academy .ac-faq-list summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--ac-accent);
  border-bottom: 2px solid var(--ac-accent);
  transform: rotate(45deg);
  transition: transform .22s ease;
}

.nlp-academy .ac-faq-list details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.nlp-academy .ac-faq-list details p {
  padding: 0 52px 20px 24px;
  color: var(--ac-text);
  font-size: 15px;
}

/* ================================ closing =============================== */
.nlp-academy .ac-close {
  background: var(--ac-accent-tint);
  text-align: center;
}

.nlp-academy .ac-close h2 {
  max-width: 22ch;
  margin: 0 auto;
}

.nlp-academy .ac-close .ac-lede {
  max-width: 60ch;
  margin: 16px auto 0;
  color: var(--ac-text);
}

/* The closing line, in the Fraunces italic it has always had. It is the last
   thing read before the button, so it keeps its own voice rather than being a
   third paragraph of body copy. */
.nlp-academy .ac-close .ac-commit {
  max-width: 56ch;
  margin: 18px auto 26px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ac-ink);
}

/* ========================== the Academy footnote ========================
   NOT the site footer — the shell still renders that below. This is the
   Academy's own strapline and the five links the brief owes the page. */
.nlp-academy .ac-foot {
  padding: 30px 0;
  border-top: 1px solid var(--ac-line);
  font-size: 13.5px;
  color: var(--ac-text-soft);
}

.nlp-academy .ac-foot-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.nlp-academy .ac-foot-mark {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--ac-ink);
  display: block;
  margin-bottom: 2px;
}

.nlp-academy .ac-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.nlp-academy .ac-foot-links a {
  color: var(--ac-text-soft);
}

.nlp-academy .ac-foot-links a:hover {
  color: var(--ac-accent);
}

/* ============================== a11y/motion ============================= */
@media (prefers-reduced-motion: reduce) {

  .nlp-academy .ac-btn,
  .nlp-academy .ac-faq-list summary,
  .nlp-academy .ac-faq-list summary::after {
    transition: none;
  }

  .nlp-academy .ac-btn:active {
    transform: none;
  }
}

/* =============================================================================
   CHECKOUT + MEMBERSHIP (student area)
   Used by student/academy/join.blade.php and membership.blade.php. Same tokens
   and same scope as the landing page above, so the two surfaces stay one
   design — a member who clicks Join should not feel handed to another product.
   ========================================================================= */

.nlp-academy.ac-checkout,
.nlp-academy.ac-memwrap {
  background: transparent;
  padding: 24px 0 60px;
}

.nlp-academy .ac-co-h {
  margin-bottom: 24px;
}

/* The student area does NOT get the landing page's centred 1320px rail.

   A centred rail left a ~115px gap down the left that no neighbouring page
   has, so the card looked adrift rather than aligned. Left-aligned instead.

   ON THE 30px: nifty's own .pad-all is 15px, and a measured probe put a
   standard .panel and this card at an identical 311px from the content
   container — so 15px is genuinely the platform default, not a mistake. It is
   simply too tight for a full-width card that carries no grid column around
   it: a bootstrap panel sits inside a .col with its own internal padding, so
   its CONTENT breathes even when its border does not. This card is the
   outermost element, so the page has to give it the room instead.

   The inner blocks keep their own max-widths (.ac-co-grid, .ac-mem-card), so
   nothing stretches to 1500px on a wide monitor — they just start from the
   left like everything else. */
.nlp-academy.ac-checkout .ac-wrap,
.nlp-academy.ac-memwrap .ac-wrap {
  max-width: none;
  margin: 0;
  padding-left: 30px;
  padding-right: 30px;
}

@media (max-width: 767px) {

  /* Phones need the width back more than they need the margin. */
  .nlp-academy.ac-checkout .ac-wrap,
  .nlp-academy.ac-memwrap .ac-wrap {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Left-aligned, but still a sane measure for a card form. */
.nlp-academy.ac-checkout .ac-co-grid {
  max-width: 1100px;
  margin-left: 0;
}

.nlp-academy.ac-memwrap .ac-mem-card {
  margin-left: 0;
}

/* ---- the same checkout, in the GUEST shell ----
   Everything above left-aligns on purpose: inside layouts.student the content
   area sits beside the nav rail, so starting at the left is what every other
   student page does and centring there would look like a mistake.

   A logged-out visitor gets lms.layouts.learn_school instead — a centred
   1320px rail with nothing down the side — and the same rules leave the
   checkout hugging the left edge of a wide page. #container carries
   .nlp-academy-shell only when the view asked for the Academy chrome, which is
   exactly the guest case, so it is the one honest signal for "which shell am I
   in" and costs the signed-in page nothing.

   One class more specific than the rules above, so no !important. */
.nlp-academy-shell .nlp-academy.ac-checkout .ac-wrap {
  max-width: var(--ac-max);
  margin-left: auto;
  margin-right: auto;
}

.nlp-academy-shell .nlp-academy.ac-checkout .ac-co-grid {
  margin-left: auto;
  margin-right: auto;
}

/* The heading above the grid has to travel with it, or the title sits left of
   a centred form. */
.nlp-academy-shell .nlp-academy.ac-checkout .ac-co-h {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.nlp-academy .ac-co-empty {
  border: 1px solid var(--ac-line);
  background: var(--ac-mist);
  border-radius: var(--ac-radius);
  padding: 28px;
  color: var(--ac-text);
}

.nlp-academy .ac-co-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 26px;
  align-items: start;
}

@media (max-width: 900px) {
  .nlp-academy .ac-co-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- summary ---- */
.nlp-academy .ac-co-summary {
  border: 1px solid var(--ac-line);
  background: var(--ac-white);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow);
  padding: 26px;
}

.nlp-academy .ac-co-price {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  color: var(--ac-ink);
  margin-bottom: 6px;
}

.nlp-academy .ac-co-price sup {
  font-size: .42em;
  top: -.7em;
  position: relative;
  color: var(--ac-text-soft);
}

.nlp-academy .ac-co-per {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--ac-text-soft);
  margin-left: 4px;
}

.nlp-academy .ac-co-lock-note {
  font-size: 13px;
  color: var(--ac-text-soft);
  margin-top: 10px;
}

.nlp-academy .ac-co-incl {
  border-top: 1px solid var(--ac-line);
  margin-top: 18px;
  padding-top: 14px;
}

.nlp-academy .ac-co-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--ac-line);
  margin-top: 16px;
  padding-top: 16px;
  font-size: 15px;
  color: var(--ac-ink);
}

.nlp-academy .ac-co-total b {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
}

.nlp-academy .ac-co-billed {
  font-size: 12.5px;
  color: var(--ac-text-soft);
  margin-top: 8px;
}

/* ---- payment ---- */
.nlp-academy .ac-co-pay {
  border: 1px solid var(--ac-line);
  background: var(--ac-white);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow);
  padding: 26px;
}

.nlp-academy .ac-co-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 14.5px;
  cursor: pointer;
  font-weight: 400;
}

.nlp-academy .ac-co-radio input {
  margin: 0;
}

/* The card block is toggled by academy_join.js via data-hidden, so the rule
   lives here rather than as an inline style set from JS. */
.nlp-academy .ac-co-card-fields[data-hidden="1"] {
  display: none;
}

.nlp-academy .ac-co-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.nlp-academy .ac-co-row-2 {
  grid-template-columns: 1fr 1fr;
}

.nlp-academy .ac-co-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 560px) {

  .nlp-academy .ac-co-row-2,
  .nlp-academy .ac-co-row-3 {
    grid-template-columns: 1fr;
  }
}

.nlp-academy .ac-co-field {
  display: block;
  font-weight: 400;
  margin: 0;
  max-width: none;
}

.nlp-academy .ac-co-field>span {
  display: block;
  font-size: 12.5px;
  color: var(--ac-text-soft);
  margin-bottom: 5px;
}

.nlp-academy .ac-co-field input,
.nlp-academy .ac-co-field select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--ac-line);
  border-radius: 8px;
  background: var(--ac-white);
  color: var(--ac-ink);
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
}

.nlp-academy .ac-co-field input:focus,
.nlp-academy .ac-co-field select:focus {
  border-color: var(--ac-accent);
  outline: none;
}

.nlp-academy .ac-co-error {
  color: #B4392F;
  font-size: 13.5px;
  margin: 10px 0 0;
  display: none;
}

.nlp-academy .ac-co-error[data-shown="1"] {
  display: block;
}

.nlp-academy .ac-co-submit {
  width: 100%;
  margin-top: 16px;
}

.nlp-academy .ac-co-submit[disabled] {
  opacity: .6;
  cursor: default;
}

.nlp-academy .ac-co-submit[disabled]:hover {
  background: var(--ac-accent);
  transform: none;
}

/* ---- guest details (the account-free checkout) ----
   Its own panel above the card block so the page reads as two steps —
   who you are, then how you are paying — without being two pages. The
   dashed rule underneath separates them without adding a second box. */
.nlp-academy .ac-co-you {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--ac-line);
}

.nlp-academy .ac-co-you-h {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ac-text-soft);
  margin: 0 0 4px;
}

.nlp-academy .ac-co-you-note {
  font-size: 13px;
  color: var(--ac-text-soft);
  margin: 0 0 14px;
}

/* The "already registered" line. Amber, not red: nothing has gone wrong —
   they have an account, which is good news, and the only action is to sign
   in. Red here would read as a rejection. */
.nlp-academy .ac-co-email-note {
  font-size: 13px;
  color: #8A6100;
  background: #FFF8E6;
  border: 1px solid #F0DFAF;
  border-radius: 8px;
  padding: 9px 12px;
  margin: 10px 0 0;
  display: none;
}

.nlp-academy .ac-co-email-note[data-shown="1"] {
  display: block;
}

.nlp-academy .ac-co-email-note a {
  color: var(--ac-accent);
  font-weight: 600;
  text-decoration: underline;
}

/* ---- the charge is in flight ----
   A card authorisation runs for seconds with nothing moving, which is when
   people reload or click again. The form dims and stops accepting input, the
   button grows a spinner, and a line underneath says to wait. */
.nlp-academy .ac-co-pay form[data-busy="1"] .ac-co-you,
.nlp-academy .ac-co-pay form[data-busy="1"] .ac-co-card-fields,
.nlp-academy .ac-co-pay form[data-busy="1"] .ac-co-radio {
  opacity: .45;
  pointer-events: none;
}

.nlp-academy .ac-co-submit[data-busy="1"] {
  opacity: 1;
  /* Room for the spinner so the label does not jump when it appears. */
  padding-left: 40px;
}

.nlp-academy .ac-co-submit[data-busy="1"]::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: ac-spin .7s linear infinite;
}

/* .ac-btn is the shared pill; it has no positioning of its own, and the
   spinner above is absolute. Scoped to the busy state so the idle button is
   left exactly as the rest of the site draws it. */
.nlp-academy .ac-co-submit[data-busy="1"] {
  position: relative;
}

@keyframes ac-spin {
  to {
    transform: rotate(360deg);
  }
}

/* prefers-reduced-motion: keep the affordance, drop the spin. */
@media (prefers-reduced-motion: reduce) {
  .nlp-academy .ac-co-submit[data-busy="1"]::before {
    animation: none;
  }
}

.nlp-academy .ac-co-busy-note {
  font-size: 13px;
  color: var(--ac-text-soft);
  text-align: center;
  margin: 10px 0 0;
  display: none;
}

.nlp-academy .ac-co-busy-note[data-shown="1"] {
  display: block;
}

/* ---- membership panel ---- */
.nlp-academy .ac-mem-card {
  border: 1px solid var(--ac-line);
  background: var(--ac-white);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow);
  padding: 26px 28px;
  max-width: 720px;
}

.nlp-academy .ac-mem-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ac-line);
  padding-bottom: 16px;
  margin-bottom: 6px;
}

.nlp-academy .ac-mem-cancel {
  border: 0;
  background: transparent;
  color: var(--ac-text-soft);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  cursor: pointer;
}

.nlp-academy .ac-mem-cancel[disabled] {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: none;
}

.nlp-academy .ac-mem-rows {
  margin: 0;
}

.nlp-academy .ac-mem-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--ac-line);
}

.nlp-academy .ac-mem-row:last-child {
  border-bottom: 0;
}

.nlp-academy .ac-mem-row dt {
  color: var(--ac-text-soft);
  font-size: 15px;
  font-weight: 400;
}

.nlp-academy .ac-mem-row dd {
  margin: 0;
  color: var(--ac-ink);
  font-size: 16px;
  font-weight: 600;
}

.nlp-academy .ac-mem-badge {
  display: inline-block;
  margin-left: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ac-accent);
  background: var(--ac-accent-tint);
  padding: 4px 9px;
  border-radius: 999px;
  vertical-align: middle;
}

.nlp-academy .ac-pill {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}

.nlp-academy .ac-pill-ok {
  background: var(--ac-accent-tint);
  color: var(--ac-accent);
}

.nlp-academy .ac-pill-warn {
  background: var(--ac-gold-tint);
  color: var(--ac-gold-deep);
}

/* ---- cancellation ----
   The confirm panel is inside the membership card rather than a modal: the
   student layout's own modal plumbing is jQuery-based and this page carries no
   jQuery of its own, and an inline panel cannot be dismissed by a stray click
   while somebody is reading three sentences about losing their rate. */
.nlp-academy .ac-cancel-panel {
  border-top: 1px solid var(--ac-line);
  margin-top: 20px;
  padding-top: 20px;
}

.nlp-academy .ac-cancel-panel[data-hidden="1"] {
  display: none;
}

.nlp-academy .ac-cancel-panel h3 {
  font-size: 19px;
  margin-bottom: 12px;
}

.nlp-academy .ac-cancel-panel p {
  color: var(--ac-text);
  font-size: 15px;
  margin-bottom: 10px;
}

.nlp-academy .ac-cancel-refund {
  background: var(--ac-gold-tint);
  border: 1px solid rgba(176, 138, 62, .2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ac-ink);
}

.nlp-academy .ac-cancel-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Keeping the membership is the safe path, so it gets the solid button. The
   destructive action is a quieter control — findable, not inviting. */
.nlp-academy .ac-btn-ghost {
  background: transparent;
  color: var(--ac-accent);
  box-shadow: inset 0 0 0 1.5px var(--ac-accent);
}

.nlp-academy .ac-btn-ghost:hover,
.nlp-academy .ac-btn-ghost:focus {
  background: var(--ac-accent-tint);
  color: var(--ac-accent);
}

.nlp-academy .ac-cancel-go {
  border: 0;
  background: transparent;
  color: #B4392F;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 4px;
  cursor: pointer;
}

.nlp-academy .ac-cancel-go[disabled] {
  opacity: .5;
  cursor: default;
}

.nlp-academy .ac-mem-foot {
  border-top: 1px solid var(--ac-line);
  margin-top: 18px;
  padding-top: 18px;
}

/* Practitioner+. Tinted rather than plain so it reads as an included benefit
   waiting to be claimed, not another row of account detail. Sits above the
   annual switch because claiming something already paid for comes before
   being sold anything else. */
.nlp-academy .ac-mem-prac {
  border-top: 1px solid var(--ac-line);
  margin-top: 18px;
  padding-top: 18px;
}

.nlp-academy .ac-mem-prac h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.nlp-academy .ac-mem-prac p {
  color: var(--ac-text);
  font-size: 15px;
  margin-bottom: 14px;
}

/* Switch to annual. An offer, not a warning — tinted rather than bordered in
   red like the cancel panel, and always visible instead of hidden behind a
   confirm step, because it takes nothing away from the member. */
.nlp-academy .ac-mem-switch {
  border-top: 1px solid var(--ac-line);
  margin-top: 18px;
  padding-top: 18px;
}

.nlp-academy .ac-mem-switch h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.nlp-academy .ac-mem-switch p {
  color: var(--ac-text);
  font-size: 15px;
  margin-bottom: 14px;
}

.nlp-academy .ac-mem-switch .ac-co-error[data-shown="0"] {
  display: none;
}