/* ================================================================
   SKILLFLO LEARN
   A nocturnal rehearsal room built around the real deck.
   ================================================================ */

body.learn-page {
  --learn-night: oklch(18% .025 258);
  --learn-night-2: oklch(22% .03 258);
  --learn-night-3: oklch(28% .032 258);
  --learn-white: oklch(97% .008 92);
  --learn-blue: oklch(57% .2 264);
  --learn-red: oklch(64% .18 30);
}

.learn-page #why,
.learn-page #setup,
.learn-page #pressure,
.learn-page #behavior,
.learn-page #trust {
  scroll-margin-top: 92px;
}

.learn-page .product-hero::before {
  background:
    radial-gradient(circle at 77% 34%, rgba(30, 72, 194, .14), transparent 27%),
    linear-gradient(90deg, transparent 0 44.95%, var(--hairline-soft) 44.95% 45.05%, transparent 45.05% 100%);
}

.learn-page .product-hero__title strong { color: var(--cobalt); }

.learn-hero {
  min-height: max(760px, 100svh);
  padding-bottom: clamp(4rem, 7vw, 7rem);
}

.learn-hero__grid {
  grid-template-columns: minmax(0, .78fr) minmax(560px, 1.22fr);
  gap: clamp(2.5rem, 5vw, 6rem);
}

.learn-hero__copy { position: relative; z-index: 2; }
.learn-hero__copy .product-hero__title { max-width: 10.2ch; }

.learn-call-frame {
  position: relative;
  margin: 0;
  transform: rotate(.35deg);
}

.learn-call-frame::before {
  content: '';
  position: absolute;
  inset: 10% -5% -8% 8%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(30, 72, 194, .13);
  filter: blur(36px);
}

.learn-call {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: var(--learn-night);
  box-shadow: 0 38px 88px -44px rgba(8, 11, 20, .72), 0 14px 38px -25px rgba(8, 11, 20, .72);
  color: var(--learn-white);
}

.learn-call__topbar,
.learn-call__controls {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 48px;
  padding: .65rem .85rem;
  background: var(--learn-night-2);
}

.learn-call__topbar { border-bottom: 1px solid rgba(255, 255, 255, .09); }

.learn-call__buyer {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: .65rem;
}

.learn-call__buyer b {
  color: rgba(255, 255, 255, .9);
  font-weight: 500;
}

.learn-call__buyer em {
  color: rgba(255, 255, 255, .42);
  font-style: normal;
}

.learn-call__pulse {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
}

.learn-call__pulse i {
  width: 2px;
  height: 5px;
  border-radius: 3px;
  background: var(--learn-blue);
}

.learn-call__pulse i:nth-child(2) { height: 13px; }
.learn-call__pulse i:nth-child(3) { height: 9px; }
.learn-call__pulse i:nth-child(4) { height: 16px; }

.learn-call__rec {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  margin-left: auto;
  color: rgba(255, 255, 255, .55);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .08em;
}

.learn-call__rec i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--learn-red);
  box-shadow: 0 0 0 4px rgba(212, 75, 64, .12);
}

.learn-call__room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .28fr);
  min-height: clamp(390px, 39vw, 520px);
}

.learn-call__deck {
  position: relative;
  display: grid;
  align-items: center;
  padding: clamp(1.3rem, 3.6vw, 3.4rem);
  background:
    linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px),
    var(--learn-night);
  background-size: 28px 28px;
}

.learn-call__deck-label {
  position: absolute;
  left: 1rem;
  bottom: .8rem;
  color: rgba(255, 255, 255, .34);
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .05em;
}

.learn-slide {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: clamp(1.1rem, 2.5vw, 2.2rem);
  background: var(--learn-white);
  color: var(--ink);
  box-shadow: 0 25px 55px -34px rgba(0, 0, 0, .78);
}

.learn-slide::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20%;
  height: 7px;
  background: var(--cobalt);
}

.learn-slide__meta {
  display: flex;
  justify-content: space-between;
  color: var(--ink-38);
  font-family: var(--font-mono);
  font-size: clamp(.42rem, .65vw, .62rem);
  letter-spacing: .12em;
}

.learn-slide > p {
  margin-top: clamp(1.4rem, 3vw, 3rem);
  color: var(--cobalt);
  font-family: var(--font-mono);
  font-size: clamp(.45rem, .72vw, .68rem);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.learn-slide h3 {
  max-width: 10ch;
  margin-top: .45rem;
  font-size: clamp(1rem, 2.1vw, 2.15rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.04em;
}

.learn-slide__diagram {
  position: absolute;
  right: clamp(1.1rem, 2.5vw, 2.2rem);
  bottom: clamp(1.3rem, 2.8vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: clamp(.28rem, .7vw, .7rem);
  color: var(--ink-55);
  font-family: var(--font-mono);
  font-size: clamp(.38rem, .58vw, .54rem);
  text-transform: uppercase;
}

.learn-slide__diagram i {
  width: clamp(12px, 2vw, 28px);
  height: 1px;
  background: var(--cobalt);
}

.learn-call__transcript {
  overflow: hidden;
  padding: 1rem .8rem;
  border-left: 1px solid rgba(255, 255, 255, .09);
  background: var(--learn-night-2);
}

.learn-call__transcript-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--font-mono);
  font-size: .58rem;
}

.learn-call__transcript-head b { font-weight: 500; }
.learn-call__transcript-head span { color: var(--learn-blue); }

.learn-call__transcript p {
  margin-top: 1rem;
  color: rgba(255, 255, 255, .55);
  font-size: clamp(.58rem, .75vw, .72rem);
  line-height: 1.55;
}

.learn-call__transcript p strong {
  display: block;
  margin-bottom: .25rem;
  color: rgba(255, 255, 255, .88);
  font-family: var(--font-mono);
  font-size: .53rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.learn-call__transcript p.is-buyer { color: rgba(255, 255, 255, .78); }

.learn-call__controls {
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.learn-call__control,
.learn-call__slide-control,
.learn-call__end,
.learn-call__slide-count {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .65rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 2px;
  color: rgba(255, 255, 255, .48);
  font-family: var(--font-mono);
  font-size: .52rem;
}

.learn-call__slide-control { width: 26px; padding: 0; }
.learn-call__slide-count { border-color: transparent; padding: 0 .15rem; }

.learn-call__control.is-active {
  border-color: rgba(95, 132, 240, .4);
  color: rgba(255, 255, 255, .84);
  background: rgba(30, 72, 194, .22);
}

.learn-call__end {
  margin-left: auto;
  border-color: rgba(212, 75, 64, .32);
  color: oklch(78% .12 25);
}

.learn-call-frame figcaption {
  display: flex;
  justify-content: flex-end;
  gap: .8rem;
  margin-top: .8rem;
  color: var(--ink-38);
  font-family: var(--font-mono);
  font-size: .62rem;
}

.learn-call-frame figcaption::before {
  content: '';
  width: 38px;
  height: 1px;
  margin-top: .6em;
  background: var(--cobalt);
}

/* ---------- Manifesto ---------- */
.learn-manifesto {
  padding: clamp(5.5rem, 9.5vw, 8.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--hairline);
}

.learn-manifesto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .72fr);
  gap: clamp(3rem, 9vw, 9rem);
  align-items: start;
}

.learn-manifesto h2 {
  max-width: 10ch;
  font-size: clamp(2.8rem, 4.2vw, 4.4rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.055em;
}

.learn-manifesto h2 strong { color: var(--cobalt); font-weight: inherit; }

.learn-manifesto__copy {
  padding-top: .65rem;
  color: var(--ink-55);
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  line-height: 1.65;
}

.learn-manifesto__copy p + p { margin-top: 1.4rem; }

.learn-manifesto__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.learn-manifesto__facts div {
  padding: 1.4rem 1.6rem 1.5rem 0;
}

.learn-manifesto__facts div + div {
  padding-left: 1.6rem;
  border-left: 1px solid var(--hairline);
}

.learn-manifesto__facts dt {
  color: var(--ink-38);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.learn-manifesto__facts dd {
  margin-top: .55rem;
  color: var(--ink);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 550;
}

/* ---------- Setup proof ---------- */
.learn-setup { padding: clamp(5.5rem, 9.5vw, 8.5rem) 0; }

.learn-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .55fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
}

.learn-section-head h2,
.learn-trust__head h2 {
  max-width: 15ch;
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  font-weight: 600;
  line-height: .97;
  letter-spacing: -.052em;
}

.learn-section-head > p,
.learn-trust__head > p {
  padding-bottom: .35rem;
  color: var(--ink-55);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.65;
}

.learn-setup__proof {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .48fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
}

.learn-setup-screen {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  background: var(--paper-2);
  box-shadow: 0 36px 76px -52px rgba(26, 22, 17, .55);
}

.learn-setup-screen__bar {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
}

.learn-setup-screen__bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(26, 22, 17, .13);
}

.learn-setup-screen__bar i:first-child { background: var(--cobalt); opacity: .72; }

.learn-setup-screen__bar em {
  margin-left: auto;
  color: var(--ink-38);
  font-family: var(--font-mono);
  font-size: .57rem;
  font-style: normal;
  letter-spacing: .08em;
}

.learn-setup-screen__viewport {
  overflow: hidden;
  aspect-ratio: 1.34 / 1;
  background: #060b17;
}

.learn-setup-screen__viewport img {
  width: auto;
  max-width: none;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: left top;
}

.learn-setup-screen figcaption {
  padding: .8rem 1rem;
  border-top: 1px solid var(--hairline);
  color: var(--ink-55);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .03em;
}

.learn-setup__steps { list-style: none; }

.learn-setup__steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 1rem;
  padding: 1.45rem 0;
  border-top: 1px solid var(--hairline);
}

.learn-setup__steps li:last-child { border-bottom: 1px solid var(--hairline); }

.learn-setup__steps > li > span {
  padding-top: .17rem;
  color: var(--cobalt);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
}

.learn-setup__steps h3 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.learn-setup__steps p {
  margin-top: .45rem;
  color: var(--ink-55);
  font-size: .91rem;
  line-height: 1.55;
}

/* ---------- Three rooms ---------- */
.learn-pressure {
  position: relative;
  background: var(--learn-night);
  color: var(--learn-white);
}

.learn-pressure__pin {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding: clamp(5.5rem, 9vw, 8rem) 0;
  background: var(--learn-night);
}

.learn-pressure__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, .46fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
}

.learn-pressure .product-kicker { color: rgba(255, 255, 255, .42); }
.learn-pressure .product-kicker::before { background: var(--learn-blue); box-shadow: 0 0 0 5px rgba(95, 132, 240, .14); }

.learn-pressure__head h2 {
  max-width: 13ch;
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 600;
  line-height: .94;
  letter-spacing: -.052em;
}

.learn-pressure__head > p {
  padding-bottom: .3rem;
  color: rgba(255, 255, 255, .52);
  font-size: clamp(.98rem, 1.25vw, 1.12rem);
  line-height: 1.65;
}

.learn-pressure__selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: clamp(2.8rem, 5vw, 4.5rem) 0 1rem;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .11);
  border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.learn-pressure__selector li {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-areas: 'n name' 'n tone';
  padding: 1rem 1.2rem 1.05rem 0;
  color: rgba(255, 255, 255, .34);
  transition: color .24s ease;
}

.learn-pressure__selector li + li {
  padding-left: 1.2rem;
  border-left: 1px solid rgba(255, 255, 255, .1);
}

.learn-pressure__selector li::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--learn-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.learn-pressure__selector li[aria-current='step'] { color: rgba(255, 255, 255, .92); }
.learn-pressure__selector li[aria-current='step']::after { transform: scaleX(1); }

/* When the viewport is too short for the pinned focus sequence, the three
   buyers are shown together in normal document flow. Give that overview
   equal emphasis instead of making two visible scenes look unavailable. */
html:not(.learn-motion-ready) .learn-pressure__selector li {
  color: rgba(255, 255, 255, .72);
}

.learn-pressure__selector span {
  grid-area: n;
  padding-top: .15rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  color: currentColor;
  opacity: .65;
}

.learn-pressure__selector b {
  grid-area: name;
  font-size: .94rem;
  font-weight: 550;
}

.learn-pressure__selector em {
  grid-area: tone;
  margin-top: .18rem;
  font-family: var(--font-mono);
  font-size: .56rem;
  font-style: normal;
  letter-spacing: .05em;
  opacity: .62;
}

.learn-pressure-room {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 6px;
  background: var(--learn-night-2);
}

.learn-pressure-room__top {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: .55rem .85rem;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .4);
  font-family: var(--font-mono);
  font-size: .57rem;
  letter-spacing: .04em;
}

.learn-pressure-room__body {
  display: grid;
  grid-template-columns: minmax(340px, .92fr) minmax(340px, 1fr);
  min-height: 420px;
}

.learn-pressure__deck {
  position: relative;
  display: grid;
  align-items: center;
  padding: clamp(2rem, 4vw, 4rem);
  border-right: 1px solid rgba(255, 255, 255, .09);
  background:
    linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px),
    var(--learn-night);
  background-size: 28px 28px;
}

.learn-slide--pressure { width: min(100%, 590px); margin: auto; }

.learn-pressure__deck-note {
  position: absolute;
  left: 1rem;
  bottom: .8rem;
  color: rgba(255, 255, 255, .3);
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .06em;
}

.learn-pressure__scenes {
  position: relative;
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, .08);
}

.learn-pressure-scene {
  min-width: 0;
  padding: clamp(1.6rem, 3vw, 3rem);
  background: var(--learn-night-2);
}

.learn-pressure-scene__person {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: .85rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.learn-pressure-scene__avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(95, 132, 240, .42);
  border-radius: 50%;
  background: rgba(30, 72, 194, .19);
  color: rgba(255, 255, 255, .88);
  font-family: var(--font-mono);
  font-size: .64rem;
}

.learn-pressure-scene__person p {
  color: rgba(255, 255, 255, .94);
  font-size: .96rem;
  font-weight: 550;
}

.learn-pressure-scene__person div span {
  display: block;
  margin-top: .2rem;
  color: rgba(255, 255, 255, .38);
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .05em;
}

.learn-pressure-scene__person em {
  color: var(--learn-blue);
  font-family: var(--font-mono);
  font-size: .56rem;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.learn-pressure-scene__behavior {
  max-width: 37rem;
  margin-top: 1.35rem;
  color: rgba(255, 255, 255, .57);
  font-size: clamp(.94rem, 1.25vw, 1.1rem);
  line-height: 1.58;
}

.learn-pressure-scene__trace {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.learn-pressure-scene__trace svg {
  width: 100%;
  height: 84px;
  display: block;
  overflow: visible;
}

.learn-pressure-scene__trace path {
  fill: none;
  stroke: rgba(95, 132, 240, .75);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.learn-pressure-scene__trace circle { fill: var(--learn-red); }

.learn-pressure-scene__trace span,
.learn-pressure-scene__trace b {
  position: absolute;
  top: .55rem;
  color: rgba(255, 255, 255, .3);
  font-family: var(--font-mono);
  font-size: .49rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.learn-pressure-scene__trace span { left: 0; }
.learn-pressure-scene__trace b { right: 0; color: rgba(255, 255, 255, .56); }

.learn-pressure-scene blockquote {
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -.025em;
}

.learn-pressure-scene blockquote span {
  display: block;
  margin-bottom: .55rem;
  color: rgba(255, 255, 255, .34);
  font-family: var(--font-mono);
  font-size: .53rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.learn-pressure-room figcaption {
  padding: .72rem .85rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .34);
  font-family: var(--font-mono);
  font-size: .57rem;
  letter-spacing: .04em;
}

/* JavaScript adds this enhancement only on large screens. */
@media (min-width: 901px) {
  .learn-motion-ready .learn-pressure__pin {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 5rem 0 1.5rem;
  }

  .learn-motion-ready .learn-pressure__inner { width: 100%; }

  .learn-motion-ready .learn-pressure .product-kicker { margin-bottom: 1.15rem; }

  .learn-motion-ready .learn-pressure__head h2 {
    font-size: clamp(3rem, 3.9vw, 4rem);
  }

  .learn-motion-ready .learn-pressure__selector {
    margin: 1.7rem 0 .75rem;
  }

  .learn-motion-ready .learn-pressure__scenes {
    display: block;
    min-height: 420px;
    background: var(--learn-night-2);
  }

  .learn-motion-ready .learn-pressure-scene {
    position: absolute;
    inset: 0;
  }
}

@media (min-width: 901px) and (max-height: 959px) {
  .learn-motion-ready .learn-pressure__pin {
    padding: 4.25rem 0 .25rem;
  }

  .learn-motion-ready .learn-pressure .product-kicker {
    margin-bottom: .75rem;
  }

  .learn-motion-ready .learn-pressure__head h2 {
    font-size: clamp(2.9rem, 3.7vw, 3.7rem);
  }

  .learn-motion-ready .learn-pressure__selector {
    margin: .75rem 0 .25rem;
  }
}

/* ---------- Natural opening ---------- */
.learn-floor { padding: clamp(6rem, 10vw, 8.5rem) 0; }
.learn-section-head--floor { align-items: center; }

.learn-floor__trace {
  position: relative;
  margin-top: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--hairline);
}

.learn-floor__trace > svg {
  width: 100%;
  height: clamp(110px, 14vw, 150px);
  display: block;
  overflow: visible;
}

.learn-floor__baseline,
.learn-floor__path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.learn-floor__baseline { stroke: var(--hairline); stroke-width: 1; }
.learn-floor__path { stroke: var(--cobalt); stroke-width: 1.7; }

.learn-floor__marker {
  position: absolute;
  top: clamp(36px, 5.3vw, 57px);
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  border: 1px solid rgba(30, 72, 194, .23);
  border-radius: 2px;
  background: var(--paper);
  color: var(--cobalt);
  font-family: var(--font-mono);
  font-size: .53rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  will-change: transform;
}

.learn-floor__marker i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blush);
}

.learn-floor__trace ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.learn-floor__trace li {
  min-height: 132px;
  padding: 1.25rem 1.15rem 1.35rem 0;
}

.learn-floor__trace li + li {
  padding-left: 1.15rem;
  border-left: 1px solid var(--hairline);
}

.learn-floor__trace li > span {
  color: var(--cobalt);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .1em;
}

.learn-floor__trace li b {
  display: block;
  margin-top: .95rem;
  font-size: .94rem;
  font-weight: 600;
}

.learn-floor__trace li p {
  margin-top: .38rem;
  color: var(--ink-55);
  font-size: .85rem;
  line-height: 1.5;
}

.learn-floor__note {
  max-width: 51rem;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0 auto;
  color: var(--ink-55);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.65;
}

/* ---------- Trust rail ---------- */
.learn-trust {
  padding: clamp(5rem, 10vw, 9rem) 0;
  border-top: 1px solid var(--hairline);
  background: var(--paper-2);
}

.learn-trust__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .46fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
}

.learn-trust__rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.learn-trust__rail div { padding: 1.4rem 1.5rem 1.55rem 0; }

.learn-trust__rail div + div {
  padding-left: 1.5rem;
  border-left: 1px solid var(--hairline);
}

.learn-trust__rail dt {
  color: var(--cobalt);
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.learn-trust__rail dd {
  margin-top: .7rem;
  color: var(--ink-55);
  font-size: .91rem;
  line-height: 1.55;
}

.learn-finale { overflow: hidden; }
.learn-finale__trace { opacity: .72; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .learn-hero__grid { grid-template-columns: minmax(0, .72fr) minmax(520px, 1.28fr); gap: 2.5rem; }
  .learn-call__room { min-height: 400px; }
  .learn-call__control:nth-last-of-type(2) { display: none; }
  .learn-pressure-room__body { grid-template-columns: minmax(320px, .82fr) minmax(340px, 1fr); }
}

@media (max-width: 980px) {
  .learn-hero { min-height: auto; }
  .learn-hero__grid { grid-template-columns: 1fr; }
  .learn-hero__copy { max-width: 760px; }
  .learn-hero__copy .product-hero__title { max-width: 11ch; }
  .learn-hero__visual { width: min(100%, 820px); margin: 1rem auto 0; }

  .learn-manifesto__grid,
  .learn-section-head,
  .learn-pressure__head,
  .learn-trust__head { grid-template-columns: 1fr; gap: 2rem; }

  .learn-manifesto__copy { max-width: 620px; padding-top: 0; }
  .learn-section-head > p,
  .learn-pressure__head > p,
  .learn-trust__head > p { max-width: 620px; padding-bottom: 0; }

  .learn-setup__proof { grid-template-columns: 1fr; }
  .learn-setup__steps { display: grid; grid-template-columns: repeat(3, 1fr); }
  .learn-setup__steps li { display: block; padding: 1.25rem 1.1rem 1.3rem 0; border-bottom: 1px solid var(--hairline); }
  .learn-setup__steps li + li { padding-left: 1.1rem; border-left: 1px solid var(--hairline); }
  .learn-setup__steps > li > span { display: block; margin-bottom: .85rem; }

  .learn-pressure-room__body { grid-template-columns: 1fr; }
  .learn-pressure__deck { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }

  .learn-call__rec,
  .learn-pressure-room__top,
  .learn-pressure-room figcaption,
  .learn-pressure__deck-note,
  .learn-pressure__selector span,
  .learn-pressure__selector em,
  .learn-pressure-scene__person div span,
  .learn-pressure-scene__person em,
  .learn-pressure-scene__trace span,
  .learn-pressure-scene__trace b,
  .learn-pressure-scene blockquote span { font-size: max(.6rem, 9.6px); }

  /* The fixed header remains the primary way out of a long product page on
     touch devices. Keep its two controls comfortably tappable in portrait
     and short landscape layouts. */
  .learn-page .nav__brand,
  .learn-page .nav__actions .btn {
    min-width: 44px;
    min-height: 44px;
  }

  .learn-page .footer__col a,
  .learn-page .footer__base a,
  .learn-page .product-switcher__head .textlink {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 720px) {
  .learn-call-frame { transform: none; }
  .learn-call__room { grid-template-columns: 1fr; min-height: auto; }
  .learn-call__deck { min-height: 330px; padding: 2rem; }
  .learn-call__transcript { display: none; }
  .learn-call__control { display: none; }
  .learn-call__controls { justify-content: flex-start; }
  .learn-call__end { display: inline-flex; }

  .learn-manifesto__facts,
  .learn-pressure__selector,
  .learn-floor__trace ol,
  .learn-trust__rail { grid-template-columns: 1fr; }

  .learn-manifesto__facts div,
  .learn-manifesto__facts div + div,
  .learn-trust__rail div,
  .learn-trust__rail div + div {
    padding: 1.1rem 0 1.2rem;
    border-left: 0;
  }

  .learn-manifesto__facts div + div,
  .learn-trust__rail div + div { border-top: 1px solid var(--hairline); }

  .learn-setup-screen__viewport { aspect-ratio: 1.16 / 1; }
  .learn-setup__steps { grid-template-columns: 1fr; }
  .learn-setup__steps li,
  .learn-setup__steps li + li { padding: 1.2rem 0; border-left: 0; }
  .learn-setup__steps li + li { border-top: 0; }

  .learn-pressure__selector li,
  .learn-pressure__selector li + li {
    padding: .9rem 0 .95rem;
    border-left: 0;
  }

  .learn-pressure__selector li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
  .learn-pressure__selector li::after { display: none; }
  .learn-pressure-room__body { min-height: 0; }
  .learn-pressure__deck { min-height: 310px; padding: 2rem; }
  .learn-pressure-scene__person { grid-template-columns: 38px 1fr; }
  .learn-pressure-scene__person em { grid-column: 2; }

  .learn-floor__trace > svg { height: 100px; }
  .learn-floor__marker { top: 32px; }
  .learn-floor__trace li,
  .learn-floor__trace li + li {
    min-height: 0;
    padding: 1rem 0 1.1rem;
    border-left: 0;
  }
  .learn-floor__trace li + li { border-top: 1px solid var(--hairline); }
}

@media (max-width: 480px) {
  .learn-call__topbar { padding-inline: .7rem; }
  .learn-call__buyer em { display: none; }
  .learn-call__deck { min-height: 260px; padding: 1.25rem; }
  .learn-call__deck-label { display: none; }
  .learn-call__controls { gap: .4rem; padding-inline: .6rem; }
  .learn-slide { padding: 1rem; }
  .learn-slide > p { margin-top: 1.1rem; }
  .learn-slide h3 { font-size: 1rem; }
  .learn-slide__diagram { right: 1rem; bottom: 1rem; }

  /* Keep the miniature room UI legible without letting its labels compete
     with the surrounding marketing copy. */
  .learn-call__buyer,
  .learn-call__rec,
  .learn-call__control,
  .learn-call__slide-control,
  .learn-call__end,
  .learn-call__slide-count,
  .learn-call-frame figcaption { font-size: .625rem; }

  .learn-slide__meta,
  .learn-slide > p,
  .learn-slide__diagram { font-size: .56rem; }

  .learn-setup-screen__bar em { display: none; }
  .learn-setup-screen__viewport { aspect-ratio: 1 / 1; }
  .learn-pressure__deck { min-height: 250px; padding: 1.25rem; }
  .learn-pressure-scene { padding: 1.35rem 1.1rem; }
  .learn-pressure-scene__trace svg { height: 70px; }

  .learn-pressure-room__top,
  .learn-pressure-room figcaption,
  .learn-pressure__deck-note,
  .learn-pressure__selector span,
  .learn-pressure__selector em,
  .learn-pressure-scene__person div span,
  .learn-pressure-scene__person em,
  .learn-pressure-scene__trace span,
  .learn-pressure-scene__trace b,
  .learn-pressure-scene blockquote span { font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .learn-call-frame,
  .learn-floor__marker,
  .learn-pressure-scene,
  .learn-pressure__selector li::after { transform: none !important; }

  .learn-pressure-scene {
    position: relative !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .learn-floor__path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .learn-floor__marker { opacity: 1 !important; }
}