/* ============================================================
   learn.css — THE Learn system (r90b, Giovani 2026-08-18).
   One sheet owns all three course pages. Fresh ln-* components,
   the homepage's dialect: centred heads with one accent word,
   hover-dim grids, cinematic plates, uniform tokens throughout.
   course-next.css no longer loads on these routes.
   ============================================================ */

/* ---- the head system: identical voice to the home sections ---- */
.kls-learn .ln-head {
  margin: 0 auto clamp(2.2rem, 4.5vh, 3.4rem);
  max-width: 56rem;
  text-align: center;
}
/* r91 (Giovani): the label voice is the trusted-strip's — quiet cream,
   never accent. Section heads no longer carry kickers at all (sub-lines
   under the headline serve instead); the survivors are the hero and
   plate context labels. */
.kls-learn .ln-kicker {
  margin: 0 0 0.6rem;
  color: rgb(244 241 235 / 0.66);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.kls-learn .ln-head h2 {
  margin: 0;
  font-family: var(--int-display);
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.kls-learn .ln-head h2 em,
.kls-learn .ln-hero h1 em {
  font-style: italic;
  color: rgb(var(--kls-accent-rgb) / 0.95);
}
.kls-learn .ln-head .ln-sub {
  margin: 0.9rem auto 0;
  max-width: 40rem;
  color: rgba(244, 241, 235, 0.66);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* ---- sections: one rhythm ---- */
.kls-learn .ln-section {
  padding: clamp(4.5rem, 9vh, 7.5rem) var(--int-pad);
}
.kls-learn .ln-inner { max-width: 76rem; margin: 0 auto; }

/* ---- buttons: the site's pair ---- */
.kls-learn .ln-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid rgba(244, 241, 235, 0.28);
  background: transparent;
  color: var(--int-paper);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, transform 220ms var(--int-ease);
}
.kls-learn .ln-btn:hover { background: var(--int-paper); color: var(--int-bg); transform: translateY(-2px); }
.kls-learn .ln-btn.is-solid { background: var(--int-paper); color: var(--int-bg); border-color: var(--int-paper); }
.kls-learn .ln-btn.is-solid:hover { background: transparent; color: var(--int-paper); }

/* 8/31: the hero's Watch The Film is a BUTTON living inside a
   display:contents .ln-vcard (the theater delegate needs that wrapper) -
   but ".ln-vcard button" is the film-card block recipe, so the pill was
   rendering as a bare 16:9 slab in the actions row. A .ln-btn inside an
   actions row is a pill, full stop. */
.kls-learn .ln-actions .ln-vcard button.ln-btn {
  display: inline-flex;
  width: auto;
  aspect-ratio: auto;
  padding: 0.9rem 1.5rem;
  border: 1px solid rgba(244, 241, 235, 0.28);
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.kls-learn .ln-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

/* ---- hero: cinematic, centred, the fold floor ---- */
.kls-learn .ln-hero {
  position: relative;
  display: grid;
  place-items: center;
  /* r94 (Giovani): the feature film sat too far under the fold - the hero
     gives back a slice of height so the video's top edge is a visible
     invitation right below the CTAs. */
  min-height: 76dvh;
  padding: clamp(7rem, 14vh, 9rem) var(--int-pad) clamp(2.2rem, 4.5vh, 3.2rem);
  overflow: hidden;
  text-align: center;
}
.kls-learn .ln-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.6);
}
.kls-learn .ln-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgb(6 7 10 / 0.1), rgb(6 7 10 / 0.55) 78%),
    linear-gradient(to bottom, rgb(6 7 10 / 0.55), transparent 30%, transparent 62%, rgb(6 7 10 / 0.96));
}
.kls-learn .ln-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 54rem;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
}
.kls-learn .ln-hero h1 {
  margin: 0;
  font-family: var(--int-display);
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.kls-learn .ln-hero .ln-lede {
  margin: 0;
  max-width: 40rem;
  color: rgba(244, 241, 235, 0.78);
  font-size: 1.05rem;
  line-height: 1.65;
}
.kls-learn .ln-hero .ln-meta {
  margin: 0.4rem 0 0;
  color: rgba(244, 241, 235, 0.5);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---- editorial split ---- */
.kls-learn .ln-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.kls-learn .ln-split img {
  width: 100%;
  height: auto;
  border-radius: 0.35rem;
  box-shadow: 0 1.4rem 3.25rem rgb(0 0 0 / 0.42);
}
.kls-learn .ln-split h2 {
  margin: 0 0 1rem;
  font-family: var(--int-display);
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
}
.kls-learn .ln-split h2 em { font-style: italic; color: rgb(var(--kls-accent-rgb) / 0.95); }
.kls-learn .ln-split p { color: rgba(244, 241, 235, 0.72); line-height: 1.7; }
.kls-learn .ln-split p strong { color: var(--int-paper); font-weight: 500; }

/* ---- proof frames: the film-frame language, lights dim around
   the one you read ---- */
.kls-learn .ln-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.kls-learn .ln-proof figure {
  margin: 0;
  transition: opacity 380ms ease, transform 420ms var(--int-ease);
}
.kls-learn .ln-proof:hover figure:not(:hover) { opacity: 0.5; }
.kls-learn .ln-proof figure:hover { transform: translateY(-5px); }
.kls-learn .ln-proof img {
  width: 100%;
  height: auto;
  border-radius: 0.35rem;
  box-shadow: 0 1.1rem 2.75rem rgb(0 0 0 / 0.4);
}
.kls-learn .ln-proof figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0.2rem 0;
}
.kls-learn .ln-proof .label {
  color: rgba(244, 241, 235, 0.5);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.kls-learn .ln-proof .fig {
  font-family: var(--int-display);
  font-size: 1.15rem;
  color: rgb(var(--kls-accent-rgb) / 0.95);
}

/* ---- the offer: serif sub-heads + orange checks, two columns ---- */
.kls-learn .ln-offer {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.kls-learn .ln-offer h3 {
  margin: 1.7rem 0 0.45rem;
  font-family: var(--int-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.kls-learn .ln-offer h3:first-child { margin-top: 0; }
.kls-learn .ln-offer p { margin: 0 0 0.4rem; color: rgba(244, 241, 235, 0.68); line-height: 1.65; font-size: 0.98rem; }
.kls-learn .ln-checks {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: clamp(1.6rem, 3vw, 2.75rem);
}
.kls-learn .ln-checks li {
  position: relative;
  break-inside: avoid;
  padding: 0.42rem 0 0.42rem 1.5rem;
  color: rgba(244, 241, 235, 0.78);
  font-size: 0.95rem;
  line-height: 1.55;
}
.kls-learn .ln-checks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: rgb(var(--kls-accent-rgb) / 0.95);
  font-weight: 600;
}

/* ---- membership: two cards, the VIP wears the accent ring ---- */
.kls-learn .ln-tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 62rem;
  margin: 0 auto;
}
.kls-learn .ln-tier {
  display: flex;
  flex-direction: column;
  /* r94 (Giovani): headline, price and the sign-up door centre on desktop
     too - the list keeps its left rag inside the centred card. */
  align-items: center;
  text-align: center;
  padding: clamp(1.9rem, 3.2vw, 2.9rem);
  border-radius: 0.55rem;
  /* r95f (Kyle 8/24): solid - stars never show through a card */
  background: #0d0f14;
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.08);
  transition: transform 420ms var(--int-ease), box-shadow 300ms ease;
}
.kls-learn .ln-tier:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.14), 0 1.6rem 3.5rem rgb(0 0 0 / 0.42);
}
.kls-learn .ln-tier.is-feature {
  background: #0d0f14;
  box-shadow: 0 0 0 1px rgb(var(--kls-accent-rgb) / 0.5);
}
.kls-learn .ln-tier.is-feature:hover {
  box-shadow: 0 0 0 1px rgb(var(--kls-accent-rgb) / 0.7), 0 1.6rem 3.5rem rgb(0 0 0 / 0.42);
}
.kls-learn .ln-tier h3 {
  margin: 0;
  font-family: var(--int-display);
  font-size: 1.45rem;
  font-weight: 400;
}
.kls-learn .ln-tier .ln-badge {
  margin: 0 0 0.8rem;
  color: rgb(var(--kls-accent-rgb) / 0.9);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.kls-learn .ln-price {
  margin: 0.8rem 0 1.3rem;
  color: rgba(244, 241, 235, 0.55);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kls-learn .ln-price strong {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--int-display);
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--int-paper);
  letter-spacing: -0.012em;
}
.kls-learn .ln-tier ul {
  margin: 0 auto 1.6rem;
  padding: 0;
  list-style: none;
  width: 100%;
  /* r95n2 (Giovani, pre-call): the card centres its HEAD (name, price);
     the reading matter rags LEFT inside a centred measure - centred
     multi-line bullets with far-left checks read as the mess they were. */
  max-width: 30rem;
  text-align: left;
}
.kls-learn .ln-tier > p:not(.ln-price) {
  max-width: 30rem;
  margin-inline: auto;
  text-align: left;
}
.kls-learn .ln-tier li {
  position: relative;
  padding: 0.42rem 0 0.42rem 1.5rem;
  color: rgba(244, 241, 235, 0.78);
  font-size: 0.95rem;
  line-height: 1.55;
}
.kls-learn .ln-tier li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: rgb(var(--kls-accent-rgb) / 0.95);
  font-weight: 600;
}
.kls-learn .ln-tier .ln-btn { margin-top: auto; }

/* ---- comparison ---- */
.kls-learn .ln-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 62rem;
  margin: 0 auto;
}
.kls-learn .ln-compare-col {
  padding: clamp(1.9rem, 3.2vw, 2.6rem);
  border-radius: 0.55rem;
  background: rgb(244 241 235 / 0.03);
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.08);
}
.kls-learn .ln-compare-col.is-featured { box-shadow: 0 0 0 1px rgb(var(--kls-accent-rgb) / 0.5); background: rgb(244 241 235 / 0.05); }
.kls-learn .ln-compare-col h3 {
  margin: 0 0 1.3rem;
  font-family: var(--int-display);
  font-size: 1.4rem;
  font-weight: 400;
}
.kls-learn .ln-compare-col dl { margin: 0; display: grid; gap: 0.85rem; }
.kls-learn .ln-compare-col dt {
  color: rgba(244, 241, 235, 0.5);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.kls-learn .ln-compare-col dd { margin: 0.15rem 0 0; color: rgba(244, 241, 235, 0.85); font-size: 0.98rem; line-height: 1.5; }

/* ---- testimonials: the swipe rail (drag / swipe / snap), masked
   at both edges like every rail on the site ---- */
.kls-learn .ln-swipe-wrap {
  position: relative;
  margin: 0 calc(-1 * var(--int-pad));
}
.kls-learn .ln-swipe {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto;
  padding: 0.5rem var(--int-pad) 1.25rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  cursor: grab;
}
.kls-learn .ln-swipe::-webkit-scrollbar { display: none; }
.kls-learn .ln-swipe.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.kls-learn .ln-vcard {
  flex: 0 0 auto;
  width: min(21rem, 74vw);
  margin: 0;
  scroll-snap-align: center;
  transition: opacity 380ms ease;
}
.kls-learn .ln-swipe:hover .ln-vcard:not(:hover) { opacity: 0.55; }
.kls-learn .ln-vcard button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 0.35rem;
  overflow: hidden;
  background: #0b0c0f;
  cursor: pointer;
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.4);
}
.kls-learn .ln-vcard button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--int-ease), filter 400ms ease;
}
.kls-learn .ln-vcard button:hover img { transform: scale(1.04); filter: saturate(1.1); }
.kls-learn .ln-vcard .ln-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgb(6 7 10 / 0.55);
  color: rgb(244 241 235 / 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.5);
  pointer-events: none;
}
.kls-learn .ln-vcard .ln-play svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.3rem;
  height: 1.3rem;
  transform: translate(-50%, -50%);
}
.kls-learn .ln-vcard iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.kls-learn .ln-vcard figcaption { padding: 0.8rem 0.2rem 0; }
.kls-learn .ln-vcard figcaption strong {
  display: block;
  font-family: var(--int-display);
  font-size: 1.05rem;
  font-weight: 400;
}
.kls-learn .ln-vcard figcaption span {
  color: rgba(244, 241, 235, 0.6);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ---- member stories: natural-ratio phone frames, quiet ---- */
.kls-learn .ln-stories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}
.kls-learn .ln-stories figure { margin: 0; transition: opacity 380ms ease, transform 420ms var(--int-ease); }
.kls-learn .ln-stories:hover figure:not(:hover) { opacity: 0.5; }
.kls-learn .ln-stories figure:hover { transform: translateY(-5px); }
.kls-learn .ln-stories img {
  width: 100%;
  height: auto;
  border-radius: 0.55rem;
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.4);
}
.kls-learn .ln-stories figcaption {
  padding: 0.6rem 0.2rem 0;
  color: rgba(244, 241, 235, 0.5);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---- the plate: full-bleed cinema + centred voice ---- */
.kls-learn .ln-plate {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 62dvh;
  padding: clamp(5rem, 10vh, 8rem) var(--int-pad);
  overflow: hidden;
  text-align: center;
}
.kls-learn .ln-plate-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.42);
}
.kls-learn .ln-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(6 7 10 / 0.85), rgb(6 7 10 / 0.25) 40%, rgb(6 7 10 / 0.9));
}
.kls-learn .ln-plate-inner {
  position: relative;
  z-index: 2;
  max-width: 50rem;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
}
.kls-learn .ln-plate h2 {
  margin: 0;
  font-family: var(--int-display);
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
}
.kls-learn .ln-plate h2 em { font-style: italic; color: rgb(var(--kls-accent-rgb) / 0.95); }
.kls-learn .ln-plate p { margin: 0; max-width: 38rem; color: rgba(244, 241, 235, 0.75); line-height: 1.65; }

/* ---- phone ---- */
@media (max-width: 900px) {
  .kls-learn .ln-split,
  .kls-learn .ln-offer { grid-template-columns: 1fr; }
  .kls-learn .ln-proof { grid-template-columns: 1fr; max-width: 26rem; margin: 0 auto; }
  .kls-learn .ln-tiers,
  .kls-learn .ln-compare { grid-template-columns: 1fr; }
  .kls-learn .ln-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kls-learn .ln-checks { columns: 1; }
}

/* ---- curriculum modules: quiet cards, the compare-col voice ---- */
.kls-learn .ln-modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.kls-learn .ln-module {
  padding: clamp(1.7rem, 2.8vw, 2.4rem);
  border-radius: 0.55rem;
  background: #0d0f14; /* r95f: solid over the stars */
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.08);
  transition: transform 420ms var(--int-ease), box-shadow 300ms ease, opacity 380ms ease;
}
.kls-learn .ln-modules:hover .ln-module:not(:hover) { opacity: 0.55; }
.kls-learn .ln-module:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.14), 0 1.4rem 3rem rgb(0 0 0 / 0.4);
}
.kls-learn .ln-module h3 {
  margin: 0 0 0.6rem;
  font-family: var(--int-display);
  font-size: 1.3rem;
  font-weight: 400;
}
.kls-learn .ln-module p { margin: 0; color: rgba(244, 241, 235, 0.68); font-size: 0.95rem; line-height: 1.65; }
@media (max-width: 900px) { .kls-learn .ln-modules { grid-template-columns: 1fr; } }

/* ---- r90g: type never loses to a bright frame. Deeper grade on
   heroes and plates + a shadow floor under the voice; the accent
   wears a quiet bloom. ---- */
.kls-learn .ln-hero-img { filter: saturate(0.9) brightness(0.48); }
.kls-learn .ln-hero::after {
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgb(6 7 10 / 0.28), rgb(6 7 10 / 0.68) 78%),
    linear-gradient(to bottom, rgb(6 7 10 / 0.6), rgb(6 7 10 / 0.22) 30%, rgb(6 7 10 / 0.22) 62%, rgb(6 7 10 / 0.96));
}
/* 9/1 PM (Kyle on the Loom: the BTS plates were too dark and the
   vignetting too strong; Giovani asked again today). The image comes up
   from 36% to 55% and the scrim below loosens with it; the plates still
   melt fully into the ground at both edges. */
.kls-learn .ln-plate-bg { filter: saturate(0.92) brightness(0.55); }
.kls-learn .ln-plate::after {
  background: linear-gradient(to bottom, rgb(6 7 10 / 0.88), rgb(6 7 10 / 0.4) 40%, rgb(6 7 10 / 0.92));
}
.kls-learn .ln-hero h1,
.kls-learn .ln-plate h2 {
  text-shadow: 0 2px 26px rgb(6 7 10 / 0.8), 0 1px 4px rgb(6 7 10 / 0.55);
}
.kls-learn .ln-hero .ln-lede,
.kls-learn .ln-plate p,
.kls-learn .ln-hero .ln-meta,
.kls-learn .ln-hero .ln-kicker,
.kls-learn .ln-plate .ln-kicker {
  text-shadow: 0 1px 14px rgb(6 7 10 / 0.85);
}
/* the accent's bloom — everywhere the orange speaks on Learn
   (r91: kickers left the accent family, so they left the bloom) */
.kls-learn .ln-head h2 em,
.kls-learn .ln-hero h1 em,
.kls-learn .ln-split h2 em,
.kls-learn .ln-plate h2 em,
.kls-learn .ln-proof .fig {
  text-shadow: 0 0 20px rgb(var(--kls-accent-rgb) / 0.4);
}

/* r90h: the solo price card */
.kls-learn .ln-tiers.is-solo { grid-template-columns: minmax(0, 30rem); justify-content: center; }

/* ============================================================ */
/* r90k — the Learn components, composed (Giovani):              */
/* icon cards in the homepage's square voice, dims reserved for  */
/* portfolio, real galaxy sections, plates that melt, swipe     */
/* arrows on the testimonial rail.                               */
/* ============================================================ */

/* ---- the galaxy sections: int-sky finally PAINTS here (the star
   recipe is the footer's, masked at both edges so it melts). ---- */
.kls-learn .ln-section.int-sky { position: relative; overflow: hidden; }
.kls-learn .ln-section.int-sky > * { position: relative; z-index: 1; }
.kls-learn .ln-section.int-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 22%, rgba(199, 218, 255, 0.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 34%, rgba(247, 234, 210, 0.4) 0 1px, transparent 1.8px),
    radial-gradient(circle at 48% 75%, rgba(199, 218, 255, 0.32) 0 1px, transparent 1.7px),
    radial-gradient(ellipse 74% 46% at 50% 34%, rgba(46, 62, 100, 0), transparent 76%),
    radial-gradient(ellipse 60% 40% at 50% 88%, rgba(38, 52, 86, 0), transparent 74%);
  background-size: 170px 170px, 230px 230px, 290px 290px, auto, auto;
  animation: int-sky-drift 76s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent);
}

/* ---- the module cards join the homepage's square voice: centred,
   compact, icon-led. No portfolio dim here. ---- */
.kls-learn .ln-modules {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.1rem, 2vw, 1.6rem);
}
.kls-learn .ln-module {
  flex: 0 1 15.5rem;
  padding: clamp(1.6rem, 2.4vw, 2.1rem) 1.3rem;
  text-align: center;
}
.kls-learn .ln-modules:hover .ln-module:not(:hover) { opacity: 1; }
.kls-learn .ln-module h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
/* r96i (Giovani: "UI breaks - think through the entire section"): the
   Automation Station carried a 14-item inventory as a flex SIBLING - its
   row stretched three short squares into empty voids and left an orphan
   card on a third row. The squares stay compact peers; the Station stands
   alone under them as a full-width plate, inventory in the house
   two-column checklist. (Community card retired - Kyle 8/25, 59:48.) */
.kls-learn .ln-module.is-station {
  flex: 1 1 100%;
  max-width: 62rem;
  padding: clamp(2rem, 3.4vw, 2.9rem) clamp(1.6rem, 3vw, 2.8rem);
}
.kls-learn .ln-module.is-station > p {
  max-width: 38rem;
  margin: 0 auto;
}
.kls-learn .ln-module.is-station .ln-checks {
  margin-top: 1.3rem;
  text-align: left;
}
.kls-learn .ln-module p { font-size: 0.88rem; line-height: 1.6; }
.kls-learn .ln-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgb(var(--kls-accent-rgb) / 0.12);
  color: var(--kls-accent);
}
.kls-learn .ln-icon svg { width: 1.35rem; height: 1.35rem; display: block; }

/* ---- the dim is a PORTFOLIO effect — everything else keeps its
   light (Giovani) ---- */
.kls-learn .ln-swipe:hover .ln-vcard:not(:hover) { opacity: 1; }
.kls-learn .ln-proof:hover figure:not(:hover) { opacity: 1; }
.kls-learn .ln-stories:hover figure:not(:hover) { opacity: 1; }

/* ---- the swipe rail wears its arrows ---- */
.kls-learn .ln-swipe-wrap { position: relative; }
.kls-learn .ln-swipe-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translateY(-70%);
  background: rgb(6 7 10 / 0.72);
  color: rgb(244 241 235 / 0.9);
  cursor: pointer;
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.5);
  transition: background 200ms ease, color 200ms ease, transform 220ms var(--int-ease);
}
.kls-learn .ln-swipe-nav:hover { background: rgb(6 7 10 / 0.92); color: rgb(244 241 235); transform: translateY(-70%) scale(1.07); }
.kls-learn .ln-swipe-nav.is-prev { left: clamp(0.6rem, 2vw, 1.6rem); }
.kls-learn .ln-swipe-nav.is-next { right: clamp(0.6rem, 2vw, 1.6rem); }
.kls-learn .ln-swipe-nav svg { width: 1.05rem; height: 1.05rem; display: block; }

/* ---- plates melt into the ground at BOTH edges, fully ---- */
.kls-learn .ln-plate::after {
  background: linear-gradient(to bottom, rgb(6 7 10 / 1) 0%, rgb(6 7 10 / 0.26) 30%, rgb(6 7 10 / 0.26) 64%, rgb(6 7 10 / 1) 100%);
}
.kls-learn .ln-hero::after {
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgb(6 7 10 / 0.28), rgb(6 7 10 / 0.68) 78%),
    linear-gradient(to bottom, rgb(6 7 10 / 0.6), rgb(6 7 10 / 0.22) 30%, rgb(6 7 10 / 0.22) 62%, rgb(6 7 10 / 1) 100%);
}

/* ---- r90m: the offer breathes — four icon cards, and the Automation
   Station inventory as quiet chips instead of a checkmark wall. ---- */
.kls-learn .ln-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  max-width: 56rem;
  margin: clamp(1.8rem, 3.5vh, 2.6rem) auto 0;
}
.kls-learn .ln-tag {
  padding: 0.48rem 0.95rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.14);
  color: rgba(244, 241, 235, 0.72);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color 200ms ease, box-shadow 200ms ease;
}
.kls-learn .ln-tag:hover {
  color: rgba(244, 241, 235, 0.95);
  box-shadow: 0 0 0 1px rgb(var(--kls-accent-rgb) / 0.55);
}

/* ============================================================ */
/* r91 — the Learn pages, completed against Kyle's live site     */
/* (Giovani 2026-08-19): nothing his page says goes missing.     */
/* ============================================================ */

/* ---- the feature film: the $100K video under its own claim ---- */
.kls-learn .ln-feature-video {
  max-width: 58rem;
  margin: 0 auto;
}
.kls-learn .ln-feature-video .ln-vcard { width: 100%; }
.kls-learn .ln-feature-video .ln-vcard button { box-shadow: 0 1.6rem 3.6rem rgb(0 0 0 / 0.5); }
.kls-learn .ln-feature-video .ln-play { width: 4rem; height: 4rem; }
.kls-learn .ln-feature-video .ln-play svg { width: 1.3rem; height: 1.3rem; }

/* 8/31 (Giovani): the ambient GLOW - a blurred copy of the loop behind
   the frame throws the film's own color past the edges, so the lesson
   footage's pillarboxing reads as a staged screen instead of dead bars.
   Fine pointers only: a second decoding video is a battery tax phones
   don't pay (the deep box-shadow carries the depth there). */
.kls-learn .ln-feature-video .ln-vcard { position: relative; }
.kls-learn .ln-feature-video .ln-vcard button { position: relative; z-index: 1; }
.kls-learn .ln-vcard .ln-glow {
  position: absolute;
  inset: -4% -3.2%;
  width: 106.4%;
  height: 108%;
  object-fit: cover;
  filter: blur(52px) saturate(1.4) brightness(0.85);
  opacity: 0;
  transition: opacity 1200ms ease;
  z-index: 0;
  pointer-events: none;
}
.kls-learn .ln-vcard .ln-glow.is-showing { opacity: 0.55; }
@media (pointer: coarse), (max-width: 760px) {
  .kls-learn .ln-vcard .ln-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kls-learn .ln-vcard .ln-glow { display: none; }
}

/* the native feature film - same surface the data-yt iframe takes */
.kls-learn .ln-vcard video.ln-native-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  z-index: 3;
}

/* ---- alternating offer rows: the real screens beside the real
   words. Night-keyed mockups sit bare on the ground; white-ground
   art rides the card treatment. ---- */
.kls-learn .ln-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.2rem, 4.5vw, 4.5rem);
  align-items: center;
}
.kls-learn .ln-row + .ln-row { margin-top: clamp(3.2rem, 6.5vh, 5.2rem); }
.kls-learn .ln-row.is-flip > figure { order: 2; }
.kls-learn .ln-row > figure { margin: 0; }
.kls-learn .ln-row figure img { width: 100%; height: auto; }
.kls-learn .ln-row figure.is-night img { filter: drop-shadow(0 1.2rem 2.6rem rgb(0 0 0 / 0.55)); }
.kls-learn .ln-row figure.is-card img {
  border-radius: 0.45rem;
  box-shadow: 0 1.4rem 3.25rem rgb(0 0 0 / 0.42);
}
.kls-learn .ln-row h3 {
  margin: 0 0 0.8rem;
  font-family: var(--int-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
}
.kls-learn .ln-row h3 em { font-style: italic; color: rgb(var(--kls-accent-rgb) / 0.95); text-shadow: 0 0 20px rgb(var(--kls-accent-rgb) / 0.4); }
.kls-learn .ln-row p { margin: 0 0 0.9rem; color: rgba(244, 241, 235, 0.72); line-height: 1.7; font-size: 0.98rem; }
.kls-learn .ln-row p strong { color: var(--int-paper); font-weight: 500; }
.kls-learn .ln-row .ln-checks { margin-top: 0.4rem; }
.kls-learn .ln-row .ln-btn { margin-top: 0.9rem; }

/* ---- the badge is a RIBBON now, riding the featured edge ---- */
.kls-learn .is-ribboned { position: relative; }
.kls-learn .ln-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.42rem 1.05rem;
  border-radius: 999px;
  background: var(--kls-accent);
  color: #140903;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgb(var(--kls-accent-rgb) / 0.35);
}

/* ---- the comparison joins into one plate — twins no more ---- */
.kls-learn .ln-compare.is-joined {
  gap: 0;
  border-radius: 0.55rem;
  background: rgb(244 241 235 / 0.03);
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.08);
  overflow: visible;
}
.kls-learn .ln-compare.is-joined .ln-compare-col { background: transparent; box-shadow: none; border-radius: 0; }
.kls-learn .ln-compare.is-joined .ln-compare-col.is-featured {
  border-radius: 0.55rem;
  background: rgb(var(--kls-accent-rgb) / 0.07);
  box-shadow: 0 0 0 1px rgb(var(--kls-accent-rgb) / 0.55), 0 1.4rem 3rem rgb(0 0 0 / 0.35);
}

/* ---- the opt-in: his real lead capture, in the system's ink ---- */
.kls-learn .ln-optin { display: grid; gap: 0.85rem; margin-top: 1.2rem; max-width: 26rem; }
.kls-learn .ln-optin .ln-optin-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.kls-learn .ln-optin input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(244 241 235 / 0.22);
  border-radius: 2px;
  background: rgb(244 241 235 / 0.04);
  color: var(--int-paper);
  font: inherit;
  font-size: 0.92rem;
}
.kls-learn .ln-optin input::placeholder { color: rgb(244 241 235 / 0.42); }
.kls-learn .ln-optin input:focus-visible { outline: 1px solid rgb(var(--kls-accent-rgb) / 0.8); outline-offset: 2px; }
.kls-learn .ln-optin .ln-btn { justify-content: center; }

/* ---- member stories: the FULL wall, compact masonry, click to
   read (Giovani: "the size of our Instagram grid") ---- */
.kls-learn .ln-stories {
  display: block;
  columns: 5;
  column-gap: clamp(0.7rem, 1.2vw, 1rem);
}
@media (max-width: 1100px) { .kls-learn .ln-stories { columns: 3; } }
.kls-learn .ln-stories figure {
  margin: 0 0 clamp(0.8rem, 1.4vw, 1.1rem);
  break-inside: avoid;
}
.kls-learn .ln-stories figcaption { display: none; }
.kls-learn .ln-stories button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0.45rem;
  overflow: hidden;
  background: #0b0c0f;
  cursor: zoom-in;
  box-shadow: 0 0.7rem 1.8rem rgb(0 0 0 / 0.38);
  transition: transform 380ms var(--int-ease), box-shadow 300ms ease;
}
.kls-learn .ln-stories button:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 1.1rem 2.6rem rgb(0 0 0 / 0.5); }
.kls-learn .ln-stories button img { display: block; width: 100%; height: auto; }
.kls-learn .ln-lightbox {
  position: fixed;
  inset: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: clamp(1rem, 4vh, 3rem);
  border: 0;
  display: none;
  place-items: center;
  background: rgb(4 5 8 / 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.kls-learn .ln-lightbox[open] { display: grid; }
.kls-learn .ln-lightbox::backdrop { background: transparent; }
.kls-learn .ln-lightbox img {
  max-width: min(94vw, 34rem);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 0.55rem;
  box-shadow: 0 2rem 5rem rgb(0 0 0 / 0.7);
}
.kls-learn .ln-lightbox button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 1px solid rgb(244 241 235 / 0.28);
  border-radius: 50%;
  background: rgb(6 7 10 / 0.55);
  color: rgb(244 241 235 / 0.95);
  font-size: 1.1rem;
  cursor: pointer;
}
.kls-learn .ln-lightbox button:hover { background: rgb(244 241 235 / 0.2); }
.kls-learn .ln-lightbox .lb-x { top: 1rem; right: 1rem; }
.kls-learn .ln-lightbox .lb-nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  line-height: 1;
  padding-bottom: 0.2rem;
}
.kls-learn .ln-lightbox .lb-prev { left: clamp(0.6rem, 2.5vw, 2rem); }
.kls-learn .ln-lightbox .lb-next { right: clamp(0.6rem, 2.5vw, 2rem); }

/* ---- cross-sell trio: his product art, real doors, a hover that
   actually answers the hand ---- */
.kls-learn .ln-sell {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
}
.kls-learn .ln-sell a {
  display: flex;
  flex-direction: column;
  border-radius: 0.55rem;
  overflow: hidden;
  background: rgb(244 241 235 / 0.03);
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.08);
  color: inherit;
  text-decoration: none;
  transition: transform 420ms var(--int-ease), box-shadow 300ms ease;
}
.kls-learn .ln-sell a:hover {
  transform: translateY(-7px) scale(1.012);
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.16), 0 1.8rem 3.8rem rgb(0 0 0 / 0.5);
}
.kls-learn .ln-sell .ln-sell-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0c0f; }
.kls-learn .ln-sell .ln-sell-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) brightness(0.88);
  transition: transform 700ms var(--int-ease), filter 400ms ease;
}
.kls-learn .ln-sell a:hover .ln-sell-media img { transform: scale(1.055); filter: saturate(1.05) brightness(1); }
.kls-learn .ln-sell .ln-sell-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.5rem; }
.kls-learn .ln-sell h3 {
  margin: 0 0 0.5rem;
  font-family: var(--int-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
}
.kls-learn .ln-sell p { margin: 0 0 1.1rem; color: rgba(244, 241, 235, 0.68); font-size: 0.92rem; line-height: 1.6; }
.kls-learn .ln-sell .ln-sell-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(244 241 235 / 0.85);
  transition: color 200ms ease;
}
.kls-learn .ln-sell a:hover .ln-sell-cta { color: var(--kls-accent); }

/* ---- podcast: the cover finally sits beside the words ---- */
.kls-learn .ln-podcast-art img {
  width: 100%;
  max-width: 24rem;
  height: auto;
  border-radius: 0.55rem;
  box-shadow: 0 1.6rem 3.6rem rgb(0 0 0 / 0.5);
}

/* ---- phone ---- */
@media (max-width: 900px) {
  .kls-learn .ln-row { grid-template-columns: 1fr; gap: 1.6rem; }
  .kls-learn .ln-row.is-flip > figure { order: 0; }
  .kls-learn .ln-stories { columns: 2; }
  .kls-learn .ln-sell { grid-template-columns: 1fr; max-width: 26rem; margin: 0 auto; }
  .kls-learn .ln-optin { max-width: none; }
  .kls-learn .ln-podcast-art { text-align: center; }
}

/* ---- r91: the syllabus — the five modules with their full voice,
   numbered, no boxes; rhythm does the separating ---- */
.kls-learn .ln-syllabus {
  max-width: 54rem;
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 4vh, 2.9rem);
}
.kls-learn .ln-syllabus article {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 1.3rem;
  align-items: start;
}
.kls-learn .ln-syllabus .ln-num {
  margin: 0.15rem 0 0;
  font-family: var(--int-display);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  color: rgb(var(--kls-accent-rgb) / 0.95);
  text-shadow: 0 0 20px rgb(var(--kls-accent-rgb) / 0.4);
}
.kls-learn .ln-syllabus h3 {
  margin: 0 0 0.45rem;
  font-family: var(--int-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.kls-learn .ln-syllabus p { margin: 0; color: rgba(244, 241, 235, 0.7); font-size: 0.96rem; line-height: 1.7; }
@media (max-width: 900px) {
  .kls-learn .ln-syllabus article { grid-template-columns: 2.4rem 1fr; gap: 1rem; }
  .kls-learn .ln-syllabus .ln-num { font-size: 1.5rem; }
}

/* ============================================================ */
/* r92 — Giovani's page-by-page pass (2026-08-19, round two).    */
/* ============================================================ */

/* ---- the course-page constitution zeroes every p margin at
   0-2-2; these components need their rhythm back at 0-3-1 ---- */
body.definitive-interior.kls-learn .ln-row p,
body.definitive-interior.kls-learn .ln-split p,
body.definitive-interior.kls-learn .ln-sell p {
  margin: 0 0 0.95rem;
}
body.definitive-interior.kls-learn .ln-sell p { margin-bottom: 1.2rem; }
body.definitive-interior.kls-learn .ln-row p:last-child,
body.definitive-interior.kls-learn .ln-split p:last-child { margin-bottom: 0; }
body.definitive-interior.kls-learn .ln-row .ln-btn { margin-top: 1.1rem; }

/* ---- the ambient film: his program video PLAYING quietly under
   the fold, the homepage studio section's language. Click keeps
   opening the full film with sound. ---- */
.kls-learn .ln-section.is-tight { padding-top: clamp(0.4rem, 1.2vh, 1rem); }

/* r94: the feature film arrives on its own deeper curve - a longer rise
   from below with a settle out of soft focus, so the first scroll reads
   as the film surfacing rather than a block appearing. */
body.motion-ready .kls-learn .ln-feature-video.reveal {
  transform: translateY(84px) scale(0.976);
  transition: opacity 1350ms var(--ease), transform 1600ms cubic-bezier(0.22, 1, 0.36, 1), filter 1350ms var(--ease);
}
body.motion-ready .kls-learn .ln-feature-video.reveal.is-revealed {
  transform: translateY(0) scale(1);
}

/* r94: "What Members Say" runs as a double marquee - two rows drifting in
   opposite directions, pausing under the pointer. learn.js builds the rows
   (and duplicates the set for the seamless loop); without JS or with
   reduced motion the original single swipe row stands. */
.kls-learn .ln-swipe.is-dual {
  display: block;
  overflow: hidden;
  scroll-snap-type: none;
  padding-left: 0;
  padding-right: 0;
}
.kls-learn .ln-mrow {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  width: max-content;
  animation: kls-marquee-l 64s linear infinite;
}
.kls-learn .ln-mrow + .ln-mrow { margin-top: clamp(1rem, 2vw, 1.6rem); animation-name: kls-marquee-r; }
.kls-learn .ln-swipe.is-dual:hover .ln-mrow,
.kls-learn .ln-swipe.is-dual.is-held .ln-mrow { animation-play-state: paused; }
.kls-learn .ln-mrow .ln-vcard { flex: 0 0 auto; width: clamp(15rem, 22vw, 21rem); }
@keyframes kls-marquee-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes kls-marquee-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.kls-learn .ln-vcard button video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) brightness(0.82);
}
.kls-learn .is-ambient .ln-vcard button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(6 7 10 / 0.22), rgb(6 7 10 / 0) 30%, rgb(6 7 10 / 0) 70%, rgb(6 7 10 / 0.38));
}
.kls-learn .is-ambient .ln-chip {
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgb(6 7 10 / 0.62);
  color: rgb(244 241 235 / 0.92);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
  transition: background 220ms ease;
}
.kls-learn .is-ambient .ln-vcard button:hover .ln-chip { background: rgb(6 7 10 / 0.85); }
.kls-learn .is-ambient .ln-play { display: none; }

/* ---- the overview manifest: numbered ledger, two columns —
   the checks stay with the offer rows, this speaks its own
   voice ---- */
.kls-learn .ln-manifest {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem clamp(2.2rem, 4.5vw, 4rem);
  max-width: 62rem;
  margin: 0 auto;
}
.kls-learn .ln-manifest > div {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.9rem;
  align-items: start;
}
.kls-learn .ln-manifest .ln-mnum {
  margin: 0.05rem 0 0;
  font-family: var(--int-display);
  font-size: 1.3rem;
  line-height: 1.2;
  color: rgb(var(--kls-accent-rgb) / 0.95);
  text-shadow: 0 0 20px rgb(var(--kls-accent-rgb) / 0.4);
}
.kls-learn .ln-manifest p { margin: 0; color: rgba(244, 241, 235, 0.8); font-size: 0.98rem; line-height: 1.6; }
.kls-learn .ln-manifest p strong { color: var(--int-paper); font-weight: 500; }
@media (max-width: 900px) { .kls-learn .ln-manifest { grid-template-columns: 1fr; } }

/* ---- the row head: headline + support line INSIDE the text
   column (the free-template section's voice) ---- */
.kls-learn .ln-row .ln-rowsub {
  margin: 0 0 1.1rem;
  color: rgba(244, 241, 235, 0.55);
  font-size: 1rem;
  line-height: 1.5;
}
.kls-learn .ln-optin { gap: 1rem; margin-top: 1.4rem; max-width: 27rem; }
.kls-learn .ln-optin .ln-optin-pair { gap: 1rem; }
.kls-learn .ln-optin input { padding: 0.95rem 1.05rem; }
.kls-learn .ln-optin .ln-btn { justify-self: start; }

/* ---- member stories, smaller still (Giovani round two): the
   IG-thumbnail scale ---- */
.kls-learn .ln-stories { columns: 6; column-gap: 0.7rem; max-width: 72rem; margin: 0 auto; }
.kls-learn .ln-stories figure { margin-bottom: 0.7rem; }
@media (max-width: 1200px) { .kls-learn .ln-stories { columns: 4; } }
@media (max-width: 900px) { .kls-learn .ln-stories { columns: 3; } }

/* ---- the coach plate: Kyle introduced in the site's own
   cinema — ambient film ground, credentials, the three real
   figures ---- */
.kls-learn .ln-plate.is-coach { min-height: 68dvh; }
.kls-learn video.ln-plate-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.4);
}
.kls-learn .is-coach .ln-plate-inner { max-width: 56rem; }
.kls-learn .ln-coach-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.8rem, 5vw, 4.5rem);
  margin-top: 1.6rem;
}
.kls-learn .ln-coach-stats strong {
  display: block;
  font-family: var(--int-display);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 400;
  color: rgb(var(--kls-accent-rgb) / 0.95);
  text-shadow: 0 0 20px rgb(var(--kls-accent-rgb) / 0.4);
}
.kls-learn .ln-coach-stats span {
  display: block;
  margin-top: 0.3rem;
  color: rgba(244, 241, 235, 0.62);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---- entrances, the homepage's cinema (Giovani: "really cool
   animations... similar to how we did the homepage"). The base
   reveal rises 30px; here the grids CASCADE and the rows slide
   in from their image's side. Reduced-motion is honoured by the
   base system (script.js reveals everything instantly). ---- */
body.motion-ready.kls-learn .reveal {
  transition-duration: 820ms, 820ms;
}
body.motion-ready.kls-learn .ln-row.reveal > figure,
body.motion-ready.kls-learn .ln-row.reveal > div {
  opacity: 0;
  transform: translateX(-34px);
  transition: opacity 860ms var(--int-ease), transform 860ms var(--int-ease);
}
body.motion-ready.kls-learn .ln-row.reveal > div,
body.motion-ready.kls-learn .ln-row.is-flip.reveal > figure { transform: translateX(34px); }
body.motion-ready.kls-learn .ln-row.is-flip.reveal > div { transform: translateX(-34px); }
body.motion-ready.kls-learn .ln-row.reveal.is-revealed > figure,
body.motion-ready.kls-learn .ln-row.reveal.is-revealed > div {
  opacity: 1;
  transform: none;
}
body.motion-ready.kls-learn .ln-row.reveal.is-revealed > div { transition-delay: 120ms; }
/* sibling cards cascade — each .reveal in a grid takes a later beat */
body.motion-ready.kls-learn .ln-modules > .reveal:nth-child(2),
body.motion-ready.kls-learn .ln-sell > .reveal:nth-child(2),
body.motion-ready.kls-learn .ln-tiers > .reveal:nth-child(2),
body.motion-ready.kls-learn .ln-proof > .reveal:nth-child(2),
body.motion-ready.kls-learn .ln-syllabus > .reveal:nth-child(2) { transition-delay: 110ms; }
body.motion-ready.kls-learn .ln-modules > .reveal:nth-child(3),
body.motion-ready.kls-learn .ln-sell > .reveal:nth-child(3),
body.motion-ready.kls-learn .ln-proof > .reveal:nth-child(3),
body.motion-ready.kls-learn .ln-syllabus > .reveal:nth-child(3) { transition-delay: 220ms; }
body.motion-ready.kls-learn .ln-modules > .reveal:nth-child(4),
body.motion-ready.kls-learn .ln-syllabus > .reveal:nth-child(4) { transition-delay: 330ms; }
body.motion-ready.kls-learn .ln-syllabus > .reveal:nth-child(5) { transition-delay: 440ms; }

/* ---- r94: the curriculum — his ten milestones with their images,
   numbers in the syllabus voice, no boxes ---- */
.kls-learn .ln-course {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.4rem, 4.5vw, 3.8rem) clamp(1.6rem, 3vw, 2.6rem);
}
.kls-learn .ln-course figure { margin: 0 0 1rem; }
.kls-learn .ln-course figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0.45rem;
  box-shadow: 0 1.1rem 2.75rem rgb(0 0 0 / 0.4);
  filter: saturate(0.94);
}
.kls-learn .ln-course .ln-course-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin: 0 0 0.5rem;
}
.kls-learn .ln-course .ln-num { margin: 0; font-size: 1.5rem; }
.kls-learn .ln-course h3 {
  margin: 0;
  font-family: var(--int-display);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.kls-learn .ln-course p { margin: 0; color: rgba(244, 241, 235, 0.7); font-size: 0.95rem; line-height: 1.68; }
@media (max-width: 900px) { .kls-learn .ln-course { grid-template-columns: 1fr; } }
/* the coach, plainly: words left, the man right */
.kls-learn .ln-split.is-coach img { border-radius: 0.45rem; }

/* ============================================================ */
/* r90-call (Kyle, 2026-08-21): upsell breakers, the story       */
/* marquee, louder rail arrows.                                  */
/* ============================================================ */

/* ---- the coaching upsell: a centred section-breaker ---- */
.kls-learn .ln-upsell-wrap { padding-top: clamp(2.5rem, 5vh, 4rem); padding-bottom: clamp(2.5rem, 5vh, 4rem); }
.kls-learn .ln-upsell {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
}
.kls-learn .ln-upsell h3 {
  margin: 0;
  font-family: var(--int-display);
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  font-weight: 400;
  line-height: 1.12;
}
.kls-learn .ln-upsell h3 em { font-style: italic; color: rgb(var(--kls-accent-rgb) / 0.95); text-shadow: 0 0 20px rgb(var(--kls-accent-rgb) / 0.4); }
.kls-learn .ln-upsell p { margin: 0; max-width: 34rem; color: rgba(244, 241, 235, 0.7); font-size: 0.98rem; line-height: 1.65; }
.kls-learn .ln-upsell .ln-btn { margin-top: 0.4rem; }

/* ---- member stories as the reviews-style drift: two rows,
   opposite directions, full bleed, hover eases (JS engine) ---- */
.kls-learn .ln-stories.is-marquee {
  columns: auto;
  column-gap: 0;
  display: grid;
  /* the wall's two-up column template reaches down here and would seat
     both rows side by side in ONE track - the shingle glitch */
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  gap: clamp(0.8rem, 1.4vw, 1.1rem);
  max-width: none;
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50dvw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.kls-learn .ln-storyrow {
  display: flex;
  gap: clamp(0.8rem, 1.4vw, 1.1rem);
  width: max-content;
  will-change: transform;
}
.kls-learn .ln-stories.is-marquee figure { margin: 0; break-inside: auto; flex: 0 0 auto; }
.kls-learn .ln-stories.is-marquee button { height: clamp(16rem, 32vh, 20rem); width: auto; }
.kls-learn .ln-stories.is-marquee button img { height: 100%; width: auto; }
.kls-learn .ln-stories.is-marquee figure:hover { transform: none; }
.kls-learn .ln-stories.is-marquee button:hover { transform: scale(1.012); box-shadow: 0 0.9rem 2.2rem rgb(0 0 0 / 0.45); }
@media (max-width: 720px) {
  .kls-learn .ln-stories.is-marquee button { height: 12rem; }
}

/* ---- the testimonial rail's arrows: unmissable now, and the
   edge peek reads as "there is more" ---- */
.kls-learn .ln-swipe-nav {
  width: 3.4rem;
  height: 3.4rem;
  background: rgb(244 241 235 / 0.94);
  color: #0a0c11;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.55);
}
.kls-learn .ln-swipe-nav:hover { background: #fff; color: #0a0c11; }
.kls-learn .ln-swipe-nav svg { width: 1.25rem; height: 1.25rem; }
.kls-learn .ln-swipe {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent);
}

/* ============================================================ */
/* r90-call-2 - Giovani's screenshot round.                      */
/* ============================================================ */

/* ---- the coaching upsell steps into a lit frame: one accent-
   edged plate so the breaker reads as a door, not a caption ---- */
.kls-learn .ln-upsell {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.2rem, 4.5vh, 3.2rem) clamp(1.6rem, 4vw, 3.4rem);
  border-radius: 0.7rem;
  background:
    radial-gradient(120% 160% at 50% 0%, rgb(var(--kls-accent-rgb) / 0.10), rgb(var(--kls-accent-rgb) / 0.02) 55%, transparent),
    rgb(244 241 235 / 0.02);
  box-shadow: 0 0 0 1px rgb(var(--kls-accent-rgb) / 0.30), 0 1.4rem 3.2rem rgb(0 0 0 / 0.35);
}
.kls-learn .ln-upsell p { margin-left: auto; margin-right: auto; }

/* ---- films arrive, they do not pop: every ambient loop fades
   up only once its first frames are truly ready ---- */
.kls-learn video[data-ambient] {
  opacity: 0;
  transition: opacity 720ms ease;
}
.kls-learn video[data-ambient].is-showing { opacity: 1; }

/* ---- the testimonial rail drifts on its own: the engine moves
   the cards into a doubled track and eases it along; the hand,
   the arrows, and play still rule it ---- */
.kls-learn .ln-swipe.is-drift {
  overflow: hidden;
  scroll-snap-type: none;
  /* pan-y: a horizontal pull belongs to the rail, a vertical one to the
     page - iOS never drags the page sideways from here */
  touch-action: pan-y;
}
.kls-learn .ln-swipe-track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  user-select: none;
  -webkit-user-select: none;
}
.kls-learn .ln-swipe-track img { -webkit-user-drag: none; }
/* the coaching anchor lands with air under the fixed nav */
.kls-learn #coaching { scroll-margin-top: 5.5rem; }

/* ---- pre-entrance side-slides must never widen the page: on a phone
   the ln-row's held 34px offset poked past the edge and gave the whole
   page a 14px sideways wiggle. The main column clips it flat. ---- */
.kls-learn main { overflow-x: hidden; overflow-x: clip; }

/* ---- r90-call-6: a phone reads the course pages centred. Stacked
   rows, card bodies, tiers, captions - all on the page's axis; the
   checklists stay left-reading rows inside a centred block, and the
   opt-in form keeps its left field labels. Desktop keeps the
   editorial left-beside-image voice. ---- */
@media (max-width: 900px) {
  .kls-learn .ln-row > div { text-align: center; }
  .kls-learn .ln-split { text-align: center; }
  .kls-learn .ln-split form { text-align: left; }
  .kls-learn .ln-sell-body { text-align: center; }
  .kls-learn .ln-tier { text-align: center; }
  .kls-learn .ln-checks,
  .kls-learn .ln-tier ul {
    display: inline-block;
    text-align: left;
    max-width: 100%;
  }
  .kls-learn .ln-proof figcaption,
  .kls-learn .ln-vcard figcaption { text-align: center; }
  /* the tier card is a flex column pinned to its left edge; and the
     sell card's CTA is a block-level span text-align cannot reach */
  .kls-learn .ln-tier { align-items: center; }
  .kls-learn .ln-sell-body > :last-child { margin-inline: auto; }
  .kls-learn .ln-sell > a > :last-child { align-self: center; }
}

/* ---- r90-call-15 (real-iPhone pass): the course hero's two actions
   happened to fill the phone's line edge to edge and read as a stretched
   bar. They stack centred at their own width now, exactly like the
   homepage fold (no full-width buttons, ever). ---- */
@media (max-width: 720px) {
  .kls-learn .ln-hero .ln-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
  }
}

/* r95u: Course FAQ — quiet accordion in the card language */
.kls-learn .ln-faq { max-width: 46rem; margin: 0 auto; }
.kls-learn .ln-faq details {
  border-bottom: 1px solid rgb(244 241 235 / 0.12);
  padding: 0.4rem 0;
}
.kls-learn .ln-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 2rem 0.9rem 0;
  position: relative;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.08rem;
  color: rgb(244 241 235 / 0.92);
}
.kls-learn .ln-faq summary::-webkit-details-marker { display: none; }
.kls-learn .ln-faq summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--kls-accent, #fb5607);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.1rem;
  transition: transform 260ms var(--int-ease);
}
.kls-learn .ln-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.kls-learn .ln-faq details p {
  margin: 0 0 1.1rem;
  max-width: 42rem;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgb(244 241 235 / 0.72);
}

/* ============================================================ */
/* 8/31 (Giovani, the Kolder read) — THE RAISED HERO             */
/* + the scroll-expanding film panel + ONE laptop frame.         */
/*                                                               */
/* Kolder puts the h1 right under the nav, the sub tight under   */
/* it, the two CTAs immediately below, then an inset video panel */
/* that widens toward full bleed on the first stretch of scroll. */
/* Same idea, our grammar: Playfair + italic accent, Plex Mono   */
/* small caps on the pills, hairlines, SQUARE frames, night      */
/* ground. No rounded corners, no borrowed glow.                 */
/* ============================================================ */

/* ---- 1. the hero rises ---- */
.kls-learn .ln-hero.is-raised {
  display: block;
  place-items: initial;
  min-height: 0;
  /* 9/1 PM (Giovani, off Kolder): the headline was hard to read over the
     full-bleed plate, and it sat too close under the header. The hero is
     pure night now - the page's own starfield behind it (int-sky, mounted
     by sky.js like the three sections below) - and the headline gets the
     air Kolder gives it: ~120px under the bar instead of 61. The film panel
     below is untouched; it is the one picture in the fold. */
  padding: clamp(5.5rem, 12vh, 8.5rem) var(--int-pad) clamp(1rem, 2.2vh, 1.8rem);
  background: #06070a;
}
.kls-learn .ln-hero.is-raised .ln-hero-img,
.kls-learn .ln-hero.is-raised::after { display: none; }
.kls-learn .ln-hero.is-raised.int-sky { padding-top: clamp(5.5rem, 12vh, 8.5rem); }
.definitive-interior .ln-hero.is-raised.int-sky > .int-sky-canvas {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}
/* the BTS plate is now a TOP-ANCHORED backdrop that melts into the
   ground before the panel: the film expands against clean night. */
.kls-learn .ln-hero.is-raised .ln-hero-img,
.kls-learn .ln-hero.is-raised::after {
  height: clamp(21rem, 44vh, 32rem);
  bottom: auto;
}
.kls-learn .ln-hero.is-raised .ln-hero-img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 40%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 0, #000 40%, transparent 97%);
}
/* r90g's law still rules: type never loses to a bright frame. The plate
   is short now, so the scrim over it is deeper than the tall hero's. */
.kls-learn .ln-hero.is-raised::after {
  background:
    radial-gradient(ellipse 92% 96% at 50% 26%, rgb(6 7 10 / 0.46), rgb(6 7 10 / 0.8) 82%),
    linear-gradient(to bottom, rgb(6 7 10 / 0.68), rgb(6 7 10 / 0.44) 32%, rgb(6 7 10 / 0.99));
}
.kls-learn .ln-hero.is-raised .ln-hero-inner {
  margin: 0 auto;
  gap: 0.9rem;
  text-align: center;
}
.kls-learn .ln-hero.is-raised .ln-actions { margin-top: 0.5rem; }

/* ---- 2. the film panel: inset at rest, wider as you scroll ----
   The STAGE reserves the expanded box so the section below is never
   overlapped; the PANEL is the only thing that moves, and it moves on
   a transform only — no width, no layout write, one compositor job
   (the iOS-smoothness law). learn.js writes --film-x off a scroll-fed
   rAF, clamped and reversible. */
.kls-learn .ln-hero-film {
  position: relative;
  z-index: 2;
  max-width: 76rem;
  margin: clamp(2.1rem, 4.4vh, 3.2rem) auto 0;
}
.kls-learn .ln-filmstage {
  position: relative;
  width: 96%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}
.kls-learn .ln-filmpanel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 77.084%; /* = 74% of the container, the rest size */
  margin-inline: auto;
  transform: scale(var(--film-x, 1));
  transform-origin: 50% 0%;
  backface-visibility: hidden;
}
.kls-learn .ln-filmpanel.is-live { will-change: transform; }
/* SQUARE, hairline, no borrowed glow */
.kls-learn .ln-filmpanel .ln-vcard { width: 100%; }
.kls-learn .ln-filmpanel .ln-vcard button {
  border-radius: 0;
  background: #06070a;
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.14), 0 1.9rem 4.2rem rgb(0 0 0 / 0.6);
}
.kls-learn .ln-filmpanel .ln-vcard button video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kls-learn .ln-filmpanel .ln-play { width: 4rem; height: 4rem; }
.kls-learn .ln-filmpanel .ln-play svg { width: 1.3rem; height: 1.3rem; }
/* r95t's law stands: on FINE pointers the cursor IS the play button and
   site-shell hides every static badge !important - we do not fight that.
   On COARSE there is no cursor, and .is-ambient's own rule (above) would
   otherwise leave the hero's centrepiece with no affordance at all. */
@media (pointer: coarse) {
  .kls-learn .ln-filmpanel.is-ambient .ln-play { display: block; }
}

/* the gate: reduced motion / Save-Data / kls-lowpower ship the panel
   at FULL size, poster only, with no scroll coupling at all. */
.kls-learn .ln-filmstage.is-static {
  width: 100%;
  aspect-ratio: auto;
}
.kls-learn .ln-filmstage.is-static .ln-filmpanel {
  position: static;
  width: 100%;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .kls-learn .ln-filmstage { width: 100%; aspect-ratio: auto; }
  .kls-learn .ln-filmpanel { position: static; width: 100%; transform: none; }
}

@media (max-width: 760px) {
  .kls-learn .ln-hero.is-raised .ln-hero-img,
  .kls-learn .ln-hero.is-raised::after { height: clamp(18rem, 40vh, 26rem); }
  .kls-learn .ln-filmstage { width: 100%; }
  .kls-learn .ln-filmpanel { width: 86%; }
  .kls-learn .ln-filmpanel .ln-vcard button { box-shadow: 0 0 0 1px rgb(244 241 235 / 0.14), 0 1rem 2.4rem rgb(0 0 0 / 0.55); }
}

/* ---- 3. ONE laptop. ----
   Every real UI screenshot on Learn now lives in this frame instead of
   four different baked composites from four different mockup sources.
   Pure CSS: dark aluminium lid, hairline bezel, a quiet base. Square-ish
   and understated so it reads as our furniture, not a stock mockup. */
.kls-learn .ln-laptop {
  margin: 0;
  display: block;
  width: 100%;
}
.kls-learn .ln-laptop-lid {
  position: relative;
  display: block;
  padding: 0.5rem 0.5rem 0.55rem;
  border-radius: 0.3rem 0.3rem 0 0;
  background: linear-gradient(180deg, #23262d 0%, #191c22 55%, #12151a 100%);
  box-shadow:
    inset 0 0 0 1px rgb(244 241 235 / 0.09),
    0 1.5rem 3.2rem rgb(0 0 0 / 0.55);
}
.kls-learn .ln-laptop-lid::before { /* the camera */
  content: "";
  position: absolute;
  top: 0.21rem;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgb(244 241 235 / 0.2);
}
.kls-learn .ln-laptop-screen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0.06rem;
  background: #06070a;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.7);
}
.kls-learn .ln-laptop-base {
  position: relative;
  display: block;
  width: 110%;
  height: 0.62rem;
  margin: 0 0 0 -5%;
  border-radius: 0 0 0.28rem 0.28rem;
  background: linear-gradient(180deg, #2b2f37 0%, #1c2026 40%, #0f1216 100%);
  box-shadow: 0 0.75rem 1.8rem rgb(0 0 0 / 0.55);
}
.kls-learn .ln-laptop-base::after { /* the lip */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 13%;
  height: 0.19rem;
  border-radius: 0 0 0.18rem 0.18rem;
  transform: translateX(-50%);
  background: rgb(6 7 10 / 0.72);
}
/* the laptop carries its own depth — the row's drop-shadow filter would
   double it and soften the hairline */
.kls-learn .ln-row figure.ln-laptop.is-night img,
.kls-learn .ln-row figure.ln-laptop img { filter: none; }
.kls-learn .ln-split .ln-laptop-screen { border-radius: 0.06rem; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.7); }
@media (max-width: 760px) {
  .kls-learn .ln-laptop-lid { padding: 0.34rem 0.34rem 0.4rem; }
  .kls-learn .ln-laptop-base { height: 0.46rem; }
}
/* the laptop keeps its own frame inside the proof/split/row wrappers */
.kls-learn .ln-proof .ln-laptop-screen,
.kls-learn .ln-row .ln-laptop-screen {
  border-radius: 0.06rem;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.7);
}
.kls-learn .ln-proof figure.ln-laptop:hover { transform: translateY(-5px); }

/* ============================================================ */
/* 8/31 ROUND 2 (Giovani's punch list) — the Learn pages answer  */
/* the second read: the laptops stop disappearing into the       */
/* night, the wall becomes two rows you can actually steer, the  */
/* hero breathes, and the cards grow under the pointer.          */
/* ============================================================ */

/* ---- #7. the raised hero comes DOWN a beat ----
   The Kolder posture stands; it was just sitting too tight under the
   header. +2.5vh of top rail, nothing else moves. */
.kls-learn .ln-hero.is-raised {
  padding-top: clamp(3.4rem, 6.8vh, 4.8rem);
}

/* ---- #2. every laptop throws its own light ----
   Black aluminium on a black ground read as a hole. The lid now sits in
   front of a blurred copy of ITS OWN SCREEN - the mechanism the homepage
   learn cards use (lead.js writes --glow-img off the card's image;
   lead.css blurs it behind), so the colour is always honest to what is
   on the screen.

   Two layers, and the first one matters: our member screens are a DARK
   UI, and a blurred copy of a near-black screenshot is black light. A
   quiet cool wash underneath guarantees the lid separates from the
   ground on ANY screen; the blurred capture on top carries the colour -
   which is what actually lifts the white dashboard crops on Blueprint.

   It is a real element, not ::before: the laptop is a [data-reveal]
   figure and its pseudo lives inside that machinery.

   GATES, the ambient contract: html.kls-lowpower and reduced motion drop
   it (learn.js also declines to arm it under Save-Data), and the phone
   gets a cheaper radius. Nothing here runs per frame. */
.kls-learn .ln-laptop { position: relative; }
.kls-learn .ln-laptop-glow {
  position: absolute;
  inset: 7% -4% -7%;
  z-index: 0;
  border-radius: 1.4rem;
  background:
    radial-gradient(ellipse 70% 62% at 50% 48%, rgb(122 146 190 / 0.5), transparent 72%),
    var(--glow-img) center / cover no-repeat;
  filter: blur(40px) saturate(1.6) brightness(1.15);
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.kls-learn .ln-laptop.is-glowing .ln-laptop-glow { opacity: 0.3; }
.kls-learn .ln-laptop-lid,
.kls-learn .ln-laptop-base { z-index: 1; }
@media (max-width: 760px) {
  .kls-learn .ln-laptop-glow { filter: blur(26px) saturate(1.45) brightness(1.18); }
  .kls-learn .ln-laptop.is-glowing .ln-laptop-glow { opacity: 0.26; }
}
html.kls-lowpower .kls-learn .ln-laptop-glow { display: none; }
@media (prefers-reduced-motion: reduce) {
  .kls-learn .ln-laptop-glow { display: none; }
}

/* ---- #10. the feature cards: one line icon, and the pointer ENLARGES ----
   Thin stroke, dim cream, no disc behind it - the icon is a mark, not a
   badge. The lift becomes a scale: the card grows toward you on the
   site's own easing. (The scale is on .ln-module itself so every module
   grid on Learn answers the pointer the same way - one behaviour, not
   one per page.) */
.kls-learn .ln-icon.is-line {
  width: auto;
  height: auto;
  margin: 0 auto 0.95rem;
  border-radius: 0;
  background: none;
  color: rgb(244 241 235 / 0.55);
}
.kls-learn .ln-icon.is-line svg { width: 1.65rem; height: 1.65rem; }
.kls-learn .ln-module { will-change: auto; }
.kls-learn .ln-module:hover {
  transform: scale(1.03);
  box-shadow: 0 0 0 1px rgb(244 241 235 / 0.14), 0 1.4rem 3rem rgb(0 0 0 / 0.4);
}
.kls-learn .ln-module:hover .ln-icon.is-line { color: rgb(244 241 235 / 0.78); }
.kls-learn .ln-icon.is-line { transition: color 320ms ease; }

/* ---- #3. The Library: a smaller screen beside its own contents ----
   5/7, the coach row's proportion. The lid stops rendering a 625px
   capture at 1.18x and lands nearer 1.35x, which is most of why the
   screen read soft. */
.kls-learn .ln-split.is-lib { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.kls-learn .ln-split.is-lib > div > p { margin: 0 0 1.15rem; }
.kls-learn .ln-split.is-lib .ln-checks li { font-size: 0.92rem; }
@media (max-width: 900px) {
  .kls-learn .ln-split.is-lib { grid-template-columns: 1fr; }
}

/* ---- #4 / #6. the testimonial wall: TWO rows, and a hand on both ----
   One shared position drives both lanes in opposite directions (the
   homepage reviews grammar). The rail keeps its single-lane behaviour
   everywhere data-rows is absent. */
.kls-learn .ln-swipe.is-drift.is-rows {
  flex-direction: column;
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
  align-items: stretch;
}
.kls-learn .ln-swipe.is-drift.is-rows .ln-swipe-track { flex: 0 0 auto; }
/* the second lane rides a touch quieter so the pair reads as one object
   instead of two competing rails */
.kls-learn .ln-swipe.is-rows .ln-swipe-track.is-reverse .ln-vcard { opacity: 0.88; }
.kls-learn .ln-swipe.is-rows .ln-swipe-track.is-reverse .ln-vcard:hover { opacity: 1; }
@media (max-width: 760px) {
  .kls-learn .ln-swipe.is-rows .ln-vcard { width: min(17rem, 68vw); }
}

/* ---- #8. the hero film's room light ----
   A 48x27 canvas samples the frames the ambient loop is ACTUALLY
   showing and CSS blur turns them into light behind the panel - the
   round-28 engine from the homepage film rail, not a poster wash. It
   scales with the panel, so the light grows as the frame widens.
   Fine pointers only; lowpower / Save-Data / reduced motion never
   arm it (learn.js), and it parks off screen. */
.kls-learn .ln-filmpanel { isolation: isolate; }
.kls-learn .ln-filmpanel .ln-vcard { position: relative; }
.kls-learn .ln-filmpanel .ln-vcard button { position: relative; z-index: 1; }
.kls-learn .ln-film-ambient {
  position: absolute;
  inset: -14% -10%;
  width: 120%;
  height: 128%;
  z-index: 0;
  filter: blur(58px) saturate(1.85) brightness(1.05);
  opacity: 0;
  transition: opacity 1400ms ease;
  pointer-events: none;
}
.kls-learn .ln-film-ambient.is-showing { opacity: 0.12; } /* 9/1 (Giovani): very, very subtle - the Blueprint Loom's white pages were flooding the rails at .34 */
@media (pointer: coarse), (max-width: 760px) {
  .kls-learn .ln-film-ambient { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kls-learn .ln-film-ambient { display: none; }
}

/* ---- #11 RETIRED by r3 (#21/#22). The case studies no longer wear the
   laptop and no longer stand three across; see THE CASE STACK at the
   bottom of this file. ---- */

/* ---- #14. the proposal decks: type first, iframe on request ----
   Three Canva embeds cost three third-party apps; none of them loads
   until someone asks for one. The resting state is our own frame
   language - square, hairline, night ground. */
.kls-learn .ln-decks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2rem, 4vh, 3.2rem);
}
.kls-learn .ln-deck { margin: 0; }
.kls-learn .ln-deck button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.28rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 0;
  border-radius: 0;
  background: #0d0f14;
  box-shadow: inset 0 0 0 1px rgb(244 241 235 / 0.12);
  color: var(--int-paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 420ms var(--int-ease), box-shadow 300ms ease;
}
.kls-learn .ln-deck button:hover {
  transform: scale(1.02);
  box-shadow: inset 0 0 0 1px rgb(244 241 235 / 0.22), 0 1.2rem 2.6rem rgb(0 0 0 / 0.45);
}
.kls-learn .ln-deck-label {
  color: rgba(244, 241, 235, 0.5);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.kls-learn .ln-deck-name {
  font-family: var(--int-display);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  font-weight: 400;
  line-height: 1.25;
}
.kls-learn .ln-deck-cue {
  margin-top: 0.3rem;
  color: rgb(var(--kls-accent-rgb) / 0.95);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kls-learn .ln-deck.is-live button {
  padding: 0;
  cursor: default;
  transform: none;
}
.kls-learn .ln-deck iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 900px) {
  .kls-learn .ln-decks { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}

/* ---- #12. the Automation Station stops crowding What's Included ---- */
.kls-learn .ln-section.is-parted { padding-top: clamp(7rem, 14vh, 11.5rem); }

/* ---- #15 / #18. the hero film is its own control ----
   No native controls anywhere on Learn: the frame carries
   data-cursor="play" at rest, so the site cursor fills to the PLAY disc
   over it, and drops to the quiet dot while the film runs. The static
   badge (the coarse-pointer affordance) stands down for the same beat. */
.kls-learn .ln-vcard.is-playing .ln-play { display: none !important; }
.kls-learn .ln-vcard video.ln-native-film { z-index: 2; }

/* ---- #17. the phone's two doors stand SIDE BY SIDE ----
   r90-call-15 stacked them because two full-width pills read as a
   stretched bar. They are short labels: on one row at their own width
   they read as a pair, and the tap targets stay at 3rem. */
@media (max-width: 720px) {
  .kls-learn .ln-hero .ln-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.55rem;
  }
  .kls-learn .ln-hero .ln-actions .ln-btn {
    flex: 0 1 auto;
    justify-content: center;
    min-height: 3rem;
    padding: 0.85rem 1.05rem;
    white-space: nowrap;
  }
}
@media (max-width: 400px) {
  .kls-learn .ln-hero .ln-actions .ln-btn {
    padding: 0.85rem 0.75rem;
    font-size: 0.63rem;
    letter-spacing: 0.14em;
  }
}

/* ============================================================ */
/* 8/31 ROUND 3 (Giovani, #19-#27) — the light comes down, the   */
/* money leaves the laptop, and the high-ticket section reads    */
/* one client at a time.                                         */
/* ============================================================ */

/* ---- #20. THE GLOW IS A WHISPER ----
   r2's screen-derived halo was doing the job at 0.3 with a 0.5 core: on
   the white dashboard crops in the high-ticket section that read as a
   lamp behind the page. The mechanism stays (a blurred copy of the
   screen's OWN pixels is the only honest colour to put behind it), the
   volume drops to a hint of separation from the ground - and the cool
   wash that guaranteed a black-UI lid separated at all comes down with
   it so the pair stays in proportion. */
.kls-learn .ln-laptop-glow {
  inset: 10% -2% -6%;
  background:
    radial-gradient(ellipse 66% 58% at 50% 50%, rgb(122 146 190 / 0.22), transparent 74%),
    var(--glow-img) center / cover no-repeat;
  filter: blur(46px) saturate(1.25) brightness(0.98);
}
.kls-learn .ln-laptop.is-glowing .ln-laptop-glow { opacity: 0.12; }
@media (max-width: 760px) {
  .kls-learn .ln-laptop-glow { filter: blur(30px) saturate(1.2) brightness(1); }
  .kls-learn .ln-laptop.is-glowing .ln-laptop-glow { opacity: 0.1; }
}

/* ---- #21 / #22. THE CASE STACK ----
   Kyle's live page runs these ONE AT A TIME under his heading: centred,
   full-width-ish, generous dark space between them. Ours does the same,
   and each client is a single stacked story - the case-study line, the
   money, and the deck that won it, in that order, reading together.

   #21: no laptop on a money shot. The screenshot is presented plainly in
   the page's own frame language: SQUARE corners, ONE hairline at
   rgb(244 241 235 / 0.12), no bevel, no lid, no base. The border sits on
   the figure so it survives the replaced element, and the whisper behind
   it is the same amount of light the laptops now carry - enough that a
   white card is not floating on nothing, never a lamp. */
.kls-learn .ln-cases {
  display: grid;
  gap: clamp(5.5rem, 12vh, 9.5rem);
  max-width: 58rem;
  margin: 0 auto;
}
.kls-learn .ln-case {
  display: grid;
  justify-items: center;
  gap: clamp(1.3rem, 2.6vh, 2rem);
  text-align: center;
}
/* 9/1 PM (Giovani: "this design and stacked look is terrible... a
   regression"): on a wide screen each client is a ROW - the case line
   and the money on the left, the proposal deck itself on the right, its
   real cover showing (the live Canva embed, as on his current site) -
   not a tall stack of three boxes. Phones keep the column. */
@media (min-width: 900px) {
  .kls-learn .ln-case {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas: "head deck" "shot deck";
    align-items: center;
    justify-items: start;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: clamp(1rem, 2vh, 1.4rem);
    text-align: left;
  }
  .kls-learn .ln-case .ln-case-head { grid-area: head; align-self: end; }
  .kls-learn .ln-case .ln-shot { grid-area: shot; align-self: start; width: 100%; }
  .kls-learn .ln-case .ln-deck { grid-area: deck; width: 100%; }
  .kls-learn .ln-cases { max-width: 66rem; }
}
/* the deck IS the embed now: square, one hairline, on the case's measure */
.kls-learn .ln-case .ln-deck .ln-deck-embed {
  /* the retired click-to-load rule positions .ln-deck iframes absolutely
     inside the button; this one is the layout itself, so it flows */
  position: static;
  inset: auto;
  height: auto;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgb(244 241 235 / 0.12);
  border-radius: 0;
  background: #0d0f14;
}
.kls-learn .ln-case-head { display: grid; gap: 0.45rem; }
.kls-learn .ln-case-head .label {
  color: rgba(244, 241, 235, 0.5);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.kls-learn .ln-case-head .fig {
  margin: 0;
  font-family: var(--int-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 400;
  line-height: 1.2;
  /* 9/1 PM (Giovani): the case line is a heading, not an accent - ink */
  color: var(--int-paper);
}
.kls-learn .ln-shot {
  position: relative;
  width: min(100%, 40rem);
  margin: 0;
  border: 1px solid rgb(244 241 235 / 0.12);
  border-radius: 0;
  background: #fff;
}
.kls-learn .ln-shot::before { /* the whisper, not a lamp */
  content: "";
  position: absolute;
  inset: 6% -3% -8%;
  z-index: -1;
  border-radius: 1.2rem;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(214 224 244 / 0.16), transparent 74%);
  filter: blur(38px);
  pointer-events: none;
}
.kls-learn .ln-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}
/* the deck rides the same measure as the shot above it, and its resting
   type centres with the rest of the stack - bottom-left was the r2
   three-across card, and in a centred column it read as a third
   alignment in a story that only has one */
.kls-learn .ln-case .ln-deck { width: min(100%, 40rem); }
.kls-learn .ln-case .ln-deck button {
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (max-width: 900px) {
  /* the r2 three-up rule does not apply to a stack that is already one
     column - it only cost the deck its width */
  .kls-learn .ln-case .ln-deck { max-width: none; margin-inline: 0; }
}
@media (max-width: 760px) {
  .kls-learn .ln-cases { gap: clamp(4rem, 9vh, 6rem); }
  .kls-learn .ln-shot::before { filter: blur(24px); }
}

/* ---- #27. ON A PHONE THE HEADLINE LEADS ----
   Every laptop / screenshot row on Learn puts its media FIRST in the
   source so the desktop grid can seat it left. Collapsed to one column
   that put a picture above the sentence that explains it. The copy
   column splits into a HEAD (the h2/h3 and its lede) and a BODY (the
   list, the door), and the areas re-order on the phone:
       headline -> subheadline -> image -> text
   Desktop is unchanged: media spans both rows on its own side. */
.kls-learn .ln-split.is-ordered,
.kls-learn .ln-row.is-ordered {
  grid-template-areas: "media head" "media body";
  align-content: center;
  /* the column gap is the row's own; the HEAD and BODY are one column of
     prose, so nothing opens between them but the heading's own margin */
  row-gap: 0;
}
.kls-learn .ln-split.is-ordered.is-flip,
.kls-learn .ln-row.is-ordered.is-flip {
  grid-template-areas: "head media" "body media";
}
.kls-learn .ln-split.is-ordered > figure,
.kls-learn .ln-row.is-ordered > figure { grid-area: media; align-self: center; }
.kls-learn .ln-split.is-ordered > .ln-colhead,
.kls-learn .ln-row.is-ordered > .ln-colhead { grid-area: head; align-self: end; }
.kls-learn .ln-split.is-ordered > .ln-colbody,
.kls-learn .ln-row.is-ordered > .ln-colbody { grid-area: body; align-self: start; }
/* the flip rule from r90 targeted a source-order figure; the areas own
   the sides now */
.kls-learn .ln-row.is-ordered.is-flip > figure { order: 0; }

@media (max-width: 900px) {
  /* 9/2: the ROW form was missing here - its two-column areas survived on
     phones, so the head/body landed in an implicit second column, 14px off
     the inset on both sides (the Station list, the Curriculum rows). */
  .kls-learn .ln-split.is-ordered,
  .kls-learn .ln-split.is-ordered.is-flip,
  .kls-learn .ln-row.is-ordered,
  .kls-learn .ln-row.is-ordered.is-flip {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "media" "body";
    row-gap: clamp(1.2rem, 3vh, 1.9rem);
  }
}
@media (max-width: 1044px) {
  .kls-learn .ln-row.is-ordered,
  .kls-learn .ln-row.is-ordered.is-flip {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "media" "body";
    row-gap: clamp(1.2rem, 3vh, 1.9rem);
  }
}
/* ...and the media is INSET, never edge to edge. The section pad already
   holds the column; this is the extra breath a bright screen needs
   against a 390px edge. */
@media (max-width: 640px) {
  .kls-learn .ln-split.is-ordered > figure,
  .kls-learn .ln-row.is-ordered > figure,
  .kls-learn .ln-case .ln-shot,
  .kls-learn .ln-case .ln-deck { width: 92%; margin-inline: auto; }
}


/* ---- 9/1 PM (Giovani): Meet Your Coach wears the homepage's director collage (.kls-dir-cut), reversed - copy left, collage right; the lone video is gone. Ported from lnx.css. ---- */
/* ---- introducing your director, in cutouts (8/31 v2, Giovani's mockup):
   three slanted cuts - one large, two stacked beside it - Kyle in every
   frame. The collage holds a window (~34rem), never the viewport. ---- */
.kls-dir-cut {
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  max-width: 34rem;
}
.kls-learn .ln-split.is-coach .kls-dir-cut img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kls-learn .ln-split.is-coach .kls-dir-cut-a {
  grid-row: 1 / 3;
  min-height: clamp(300px, 40vh, 430px);
  object-position: 50% 18%; /* the portrait is taller than the slot - keep
                               the face and shoulders, crop the knees */
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}
.kls-learn .ln-split.is-coach .kls-dir-cut-b { clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.kls-learn .ln-split.is-coach .kls-dir-cut-c { clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.kls-learn .ln-split.is-coach { align-items: center; }
.kls-learn .ln-split.is-coach .kls-dir-cut { margin: 0; justify-self: end; width: 100%; max-width: 30rem; } /* 9/2 (Giovani): "that grid is too big" - capped on desktop */
.kls-learn .ln-split.is-coach + .lnx-coach-stats { margin-top: clamp(2.6rem, 6vh, 4.5rem); }

/* 9/1 16:50 (Giovani): the collage is the homepage's exact size; what read
   bigger was the gap beside a narrower copy column - tightened to the
   homepage's rhythm. The proof numbers and the brand marks sit together
   under the split, on the section's own measure; the marks drift (the
   homepage's pace) and fade to black at the row's edges. */
.kls-learn .ln-split.is-coach { column-gap: clamp(2rem, 5vw, 4.5rem); }
.kls-learn .ln-split.is-coach + .lnx-coach-stats { margin-bottom: clamp(1.4rem, 3vh, 2.2rem); }
/* phones: lnx.css's `.kls-learn .ln-split.is-coach { 5fr 7fr }` (0-3-0, and
   lnx.css loads AFTER this sheet) was beating the generic phone rule above,
   leaving a 132px copy column beside the collage at 390. Outranked here. */
@media (max-width: 900px) {
  body.kls-learn .ln-split.is-coach { grid-template-columns: 1fr; }
  body.kls-learn .ln-split.is-coach .kls-dir-cut { justify-self: stretch; }
}
.kls-learn .lnx-coach-marks {
  display: block; overflow: hidden; opacity: 0.85; margin: clamp(3.4rem, 6.5vh, 4.8rem) auto 0; max-width: 62rem; /* 9/2 (Giovani): off the numbers */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.kls-learn .lnx-coach-marks-track {
  display: flex; align-items: center; gap: clamp(2.4rem, 5vw, 4.5rem); width: max-content; padding: 0.4rem 0;
  animation: lnx-marks-pan 100s linear infinite; /* 9/2: the homepage strip's pace, so the Timberland opening holds */
}
.kls-learn .lnx-coach-marks-track img { flex: 0 0 auto; }
@keyframes lnx-marks-pan { from { transform: translateX(var(--mk-start, 0px)); } to { transform: translateX(calc(var(--mk-start, 0px) - 50%)); } }
html.kls-lowpower .kls-learn .lnx-coach-marks-track { animation: none; }
@media (prefers-reduced-motion: reduce) { .kls-learn .lnx-coach-marks-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* 9/1 (found while building about.html): lnx.css's .ln-split.is-coach
   {5fr 7fr} (0,3,0) outranks the phone rule for .ln-split (0,2,0), so the
   coach split kept two columns on a phone - 132px of copy beside a 185px
   collage. Same specificity, phone-first. */
@media (max-width: 900px) {
  /* .is-coach twice: lnx.css loads after this sheet on Blueprint, so equal
     specificity lost there */
  .kls-learn .ln-split.is-coach.is-coach { grid-template-columns: 1fr; }
  .kls-learn .ln-split.is-coach .kls-dir-cut { justify-self: stretch; }
}


/* ---- 9/1 PM: the coach proof numbers + marks, moved here from lnx.css (course pages own them now; the homepage sheet is another session's) ---- */
.lnx-coach-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; margin-bottom: clamp(2rem, 4vh, 3rem); }
.lnx-coach-stats > div { padding: 0.4rem 0.8rem; }
.lnx-coach-stats > div + div { border-left: 1px solid rgb(244 241 235 / 0.1); }
.lnx-coach-stats strong { display: block; font-family: var(--int-display, "Playfair Display", serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.9rem); color: rgb(244 241 235); font-variant-numeric: tabular-nums; }
.lnx-coach-stats span { display: block; margin-top: 0.35rem; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: rgb(244 241 235 / 0.55); }
.lnx-coach-marks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.4rem, 3.5vw, 3rem); opacity: 0.85; }
.lnx-coach-marks img { height: 1.4rem; width: auto; }
.lnx-coach-marks img[alt="Pepsi"] { height: 1.85rem; }
.lnx-coach-marks img[alt="Gatorade"] { height: 1.7rem; }
.lnx-coach-marks img[alt="Barilla"] { height: 2.1rem; }
.lnx-coach-marks img[alt="Timberland"] { height: 1.6rem; }
.lnx-coach-marks img[alt="Puma"] { height: 1.25rem; }
.lnx-coach-marks img[alt="Hume Health"] { height: 1.15rem; }
@media (max-width: 720px) {
  .lnx-coach-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
  .lnx-coach-stats > div + div { border-left: 0; }
  .lnx-coach-stats > div:nth-child(even) { border-left: 1px solid rgb(244 241 235 / 0.1); }
}
@media (max-width: 720px) {
  .lnx-coach-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
  .lnx-coach-stats > div + div { border-left: 0; }
  .lnx-coach-stats > div:nth-child(even) { border-left: 1px solid rgb(244 241 235 / 0.1); }
}


/* ---- 9/1 PM mobile pass (Giovani), course pages ---- */
/* the Station inventory: two columns only where there is room */
@media (min-width: 901px) { .kls-learn .ln-checks.is-station { columns: 2; column-gap: 2.4rem; } }
/* the proof numbers ride inside the coach split now: full width under it on
   desktop, and on the phone the order is collage -> numbers -> copy */
.kls-learn .ln-split.is-coach .lnx-coach-stats { grid-column: 1 / -1; margin-top: clamp(2.2rem, 5vh, 3.6rem); margin-bottom: 0; }
@media (max-width: 900px) {
  /* the laptops filled 83% of a phone - "too big" */
  .kls-learn .ln-laptop { max-width: 76%; margin-left: auto; margin-right: auto; }
  /* 9/1 call: collage -> copy + doors -> the numbers under the doors */
  body.kls-learn .ln-split.is-coach .kls-dir-cut { order: -1; }
  body.kls-learn .ln-split.is-coach > div:not(.lnx-coach-stats) { order: 0; }
  body.kls-learn .ln-split.is-coach .lnx-coach-stats { order: 1; margin-top: 1.6rem; }
}

/* ---- 9/1 (Giovani): Member Stories ride the rail, one row. The screenshots
   keep their own (portrait) shape - the 16:9 card law is for films. ---- */
.kls-learn .ln-swipe.is-stories { display: flex; grid-template-columns: none; align-items: flex-start; }
.kls-learn .ln-swipe.is-stories .ln-vcard { width: min(13rem, 54vw); } /* 9/2: a touch smaller */
.kls-learn .ln-swipe.is-stories .ln-vcard button { aspect-ratio: auto; border-radius: 0.55rem; }
.kls-learn .ln-swipe.is-stories .ln-vcard button img { position: static; width: 100%; height: auto; }
.kls-learn .ln-swipe.is-stories figure:hover { transform: none; }


/* ---- 9/2 (Giovani): one film UI everywhere - the rail's bar (lead.css)
   ported for the course pages; learn.js mounts it on the hero film. ---- */
.kls-learn .kls-film-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 2.2rem 1.1rem 0.85rem;
  background: linear-gradient(to top, rgb(4 5 7 / 0.78), rgb(4 5 7 / 0));
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.kls-learn .kls-film-ui.is-live { opacity: 1; pointer-events: auto; }
.kls-learn .kls-film-scrub {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(244 241 235 / 0.28);
  cursor: pointer;
}
.kls-learn .kls-film-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--kls-accent, #fb5607);
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.6);
}
.kls-learn .kls-film-scrub::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--kls-accent, #fb5607);
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.6);
}
.kls-learn .kls-film-time {
  color: rgb(244 241 235 / 0.85);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.7);
  white-space: nowrap;
}
.kls-learn .kls-film-ui .kls-film-toggle,
.kls-learn .ln-vcard .kls-film-ui .kls-film-toggle,
.kls-learn .ln-filmpanel .ln-vcard .kls-film-ui .kls-film-toggle {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  aspect-ratio: auto;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(6 7 10 / 0.6);
  color: rgb(244 241 235 / 0.9);
  cursor: pointer;
  box-shadow: none;
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.7));
  transition: color 200ms ease, background 200ms ease;
}
.kls-learn .kls-film-ui .kls-film-toggle:hover { color: rgb(244 241 235); background: rgb(6 7 10 / 0.85); }
.kls-learn .kls-film-toggle svg { position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem; transform: translate(-50%, -50%); }
.kls-learn .kls-film-toggle .kft-pause { display: none; }
.kls-learn .kls-film-toggle.is-playing .kft-pause { display: block; }
.kls-learn .kls-film-toggle.is-playing .kft-play { display: none; }
.kls-learn .kls-film-ui .kls-rail-mute,
.kls-learn .ln-vcard .kls-film-ui .kls-rail-mute,
.kls-learn .ln-filmpanel .ln-vcard .kls-film-ui .kls-rail-mute {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
  width: auto;
  height: 2rem;
  aspect-ratio: auto;
  overflow: visible;
  margin: 0;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 999px;
  background: rgb(6 7 10 / 0.6);
  color: rgb(244 241 235 / 0.9);
  cursor: pointer;
  box-shadow: none;
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.7));
  transition: color 220ms ease, background 220ms ease;
}
.kls-learn .kls-film-ui .kls-rail-mute:hover { color: rgb(244 241 235); background: rgb(6 7 10 / 0.8); }
.kls-learn .kls-rail-mute .krm-wave { display: block; width: 2.1rem; overflow: hidden; }
.kls-learn .kls-rail-mute .krm-wave svg { display: block; width: 100%; height: 0.7rem; overflow: visible; }
.kls-learn .kls-rail-mute .krm-squiggle { animation: krm-run 1.15s linear infinite; transition: opacity 320ms ease, transform 420ms var(--int-ease, ease); transform-origin: center; }
.kls-learn .kls-rail-mute .krm-flat { opacity: 0; transition: opacity 320ms ease; }
.kls-learn .kls-rail-mute.is-muted .krm-squiggle { opacity: 0; transform: scaleY(0.12); }
.kls-learn .kls-rail-mute.is-muted .krm-flat { opacity: 0.55; }
@keyframes krm-run { from { transform: translateX(0); } to { transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .kls-learn .kls-rail-mute .krm-squiggle { animation: none; } }
.kls-learn .kls-rail-mute .krm-roll { display: block; height: 1em; overflow: hidden; font-family: "IBM Plex Mono", monospace; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; }
.kls-learn .kls-rail-mute .krm-roll i { display: block; font-style: normal; height: 1em; transform: translateY(0); transition: transform 460ms var(--int-ease, ease); }
.kls-learn .kls-rail-mute.is-muted .krm-roll i { transform: translateY(-1em); }
.kls-learn [data-film-host] { position: relative; }
.kls-learn .kls-film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgb(6 7 10 / 0.55);
  color: rgb(244 241 235 / 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.5);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}
.kls-learn [data-film-host]:hover .kls-film-play { opacity: 1; }
.kls-learn .kls-film-play.is-playing { opacity: 0 !important; }
@media (hover: none) { .kls-learn [data-film-host] .kls-film-play { opacity: 1; width: 3rem; height: 3rem; } .kls-learn .kls-film-play svg { width: 1.1rem; height: 1.1rem; } }
.kls-learn .kls-film-play svg { position: absolute; top: 50%; left: 50%; width: 1.5rem; height: 1.5rem; transform: translate(-50%, -50%); }
.kls-learn .kls-film-play .kfp-pause { display: none; }
@media (max-width: 900px) {
  .kls-learn .kls-film-ui { gap: 0.45rem; padding: 1.5rem 0.6rem 0.55rem; }
  .kls-learn .kls-film-ui .kls-film-toggle { width: 1.85rem; height: 1.85rem; }
  .kls-learn .kls-film-time { font-size: 0.56rem; letter-spacing: 0.04em; }
  .kls-learn .kls-film-ui .kls-rail-mute { height: 1.8rem; padding: 0 0.55rem; gap: 0; }
  .kls-learn .kls-film-ui .kls-rail-mute .krm-roll { display: none; }
}

/* 9/2 (Giovani): no arrows on touch screens - the rails swipe. */
@media (hover: none), (max-width: 900px) {
  .kls-learn .ln-swipe-wrap .ln-swipe-nav { display: none !important; }
}