/* ====================================================================
   PG-LESSON.CSS  (round 9, page builder "lessons")
   Scope: the four Heart School lessons only, every rule below hangs off
   body.pg-lesson. Pages: issue-non-obstructive-plaque.html,
   issue-slow-breathing.html, issue-short-sleep.html,
   issue-blood-pressure-technique.html.
   Loads after fable.css, motion-kit.css, illus-kit.css, pg-learn.css and
   kit4.css. It reuses kit4's M1 gradient text (.k4-grad) and M2 buttons
   (.k4-btn) and never edits a shared file. pg-learn.css still supplies the
   citation popover mechanics and the drop cap; both are restyled here.

   Page anatomy
     .lh   hero, flat navy, fills the first screen: one real medical plate
           at real scale with its own motion that carries the lesson
     .rd   reading column on flat paper: standfirst, 37rem measure, a
           full-bleed navy figure band (.rfb) and a full-bleed navy quote
     .rr   sources: one ledger, each row one link
     .rx   closing band, flat navy: the education note, the CTA, the door
           to the next lesson

   Rules kept: no photographs on these pages, no glow, grain, scrim or
   gradient fade on any plate, no decorative lines, boxes answer hover and
   focus with the shared motion-kit ring only (never write a :hover for a
   box), loops are transform and opacity, paused off screen (.is-live comes
   from pg-lesson.js), hover only under (hover:hover) and (pointer:fine)
   with :focus-visible twins, the finished state with reduced motion and
   with no JS (hidden start states only exist under .js and html.lh-ready).
   Zero em dashes or en dashes anywhere, comments included.
   ==================================================================== */

/* ---------------------------------------------------------------
   0. TOKENS
   --------------------------------------------------------------- */
.pg-lesson{
  --lh-gut:clamp(1.25rem,5vw,4.5rem);
  --lh-navy:#0C1833;
  --lh-navy-2:#101F42;
  --lh-crim:#E23A46;
  --lh-coral:#FF6B75;
  --lh-deep:#9C1B27;
  --lh-white:#F4F7FB;
  --lh-ink:#0B1B33;
  --lh-ink-soft:#42506B;
  --lh-ease:cubic-bezier(.16,1,.3,1);
  --lh-soft:cubic-bezier(.4,0,.15,1);
  --lh-box-r:14px;
  --lh-stage-r:20px;
  --lh-line-dark:rgb(244 247 251 / .16);
  --lh-line-light:rgb(11 27 51 / .14);
  /* the heading scale (round 11, S3): fluid from 390 to 1920, display type stays tight */
  --lh-fs-h1:clamp(2.75rem,7.2vw,7.25rem);
  --lh-fs-h2:clamp(2.4rem,6vw,5.75rem);
  --lh-fs-h3:clamp(1.35rem,2.6vw,2.25rem);
  --lh-fs-stack:clamp(2.75rem,8.5vw,4.75rem);
}

/* ---------------------------------------------------------------
   1. HERO SHELL (shared by all four)
   The hero is the first screen: flat navy, never shorter than the
   window, copy on the same left edge as the nav brand.
   --------------------------------------------------------------- */
.pg-lesson .ipage{padding-top:0;}
.pg-lesson .lh{
  position:relative;isolation:isolate;overflow:hidden;color:var(--lh-white);
  background:var(--lh-navy);
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  padding:clamp(6rem,8vw,6.8rem) 0 0;
}
.pg-lesson .lh__inner{
  position:relative;z-index:2;flex:1 1 auto;
  width:100%;max-width:none;margin:0;padding-inline:var(--lh-gut);
  display:grid;grid-template-columns:var(--lh-cols,minmax(0,1fr) minmax(0,1fr));
  gap:clamp(2rem,4vw,4.5rem);align-items:center;
}
.pg-lesson .lh__text{min-width:0;position:relative;z-index:2;}

/* the one quiet row above the headline: back link, lesson number */
.pg-lesson .lh__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.5rem;margin:0 0 1.4rem;}
.pg-lesson .lh .iback{
  display:inline-flex;align-items:center;gap:.45rem;
  font:500 .95rem/1.2 var(--body);letter-spacing:0;text-transform:none;color:rgb(244 247 251 / .8);
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:.3em;
  transition:text-decoration-color .2s ease,transform .3s var(--lh-ease);
}
@media (hover:hover) and (pointer:fine){
  .pg-lesson .lh .iback:hover{text-decoration-color:var(--lh-coral);transform:translateX(-4px);}
}
.pg-lesson .lh .iback:focus-visible{text-decoration-color:var(--lh-coral);transform:translateX(-4px);outline:2px solid var(--lh-coral);outline-offset:4px;border-radius:4px;}
.pg-lesson .lh__k{
  display:inline-flex;align-items:baseline;gap:.5rem;margin:0;
  font:600 .95rem/1.2 var(--body);letter-spacing:0;text-transform:none;color:rgb(244 247 251 / .8);
}
.pg-lesson .lh__no{
  font:800 1.7rem/1 var(--display);letter-spacing:-.02em;text-transform:none;color:var(--lh-coral);
}
.pg-lesson .lh__t{
  margin:0;font:800 var(--lh-fs-h1)/1.02 var(--display);letter-spacing:-.035em;
  color:var(--lh-white);text-wrap:balance;max-width:none;
}
.pg-lesson .lh__d{
  margin:1.3rem 0 0;max-width:44ch;
  font:400 clamp(1.04rem,1.4vw,1.2rem)/1.6 var(--body);color:rgb(232 237 244 / .9);
}
.pg-lesson .lh__meta{
  display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;margin:1.5rem 0 0;
  font:500 .9rem/1.4 var(--body);letter-spacing:0;text-transform:none;color:#C9D3E6;
}
.pg-lesson .lh__cta{margin:1.8rem 0 0;}

/* the art column */
.pg-lesson .lh__art{margin:0;position:relative;z-index:1;min-width:0;}
.pg-lesson .lh__stage{position:relative;width:100%;aspect-ratio:var(--ar);container-type:inline-size;}
.pg-lesson .lh__credit{margin:0;max-width:62ch;font:400 .8rem/1.55 var(--body);color:#C9D3E6;}
.pg-lesson .lh__credit a{color:#E3EAF6;text-decoration:underline;text-decoration-color:rgb(255 107 117 / .7);text-underline-offset:2px;}
@media (hover:hover) and (pointer:fine){
  .pg-lesson .lh__credit a:hover{text-decoration-color:var(--lh-coral);text-decoration-thickness:2px;}
}
.pg-lesson .lh__credit a:focus-visible{outline:2px solid var(--lh-coral);outline-offset:2px;border-radius:2px;}
/* credit left, controls right: one quiet row under the art */
.pg-lesson .lh__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 2rem;margin:0;
}
.pg-lesson .lh__tools{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.4rem;}
.pg-lesson .lh__tools .k4-btn--text,.pg-lesson .rx .k4-btn--text,.pg-lesson .pc__ctl{color:var(--lh-coral);font-size:.9rem;}
.pg-lesson .lh__tools .k4-btn--text::after,.pg-lesson .rx .k4-btn--text::after,.pg-lesson .pc__ctl::after{background:var(--lh-coral);}
.pg-lesson .rx .k4-btn--text{font-size:1rem;}
@media (pointer:coarse){
  .pg-lesson .lh__tools .k4-btn--text,.pg-lesson .rx .k4-btn--text,.pg-lesson .pc__ctl{min-height:44px;}
}

/* flat labels that sit on the art (not interactive, never under 12px) */
.pg-lesson .lh-tag{
  position:absolute;left:var(--x);top:var(--y);z-index:4;
  transform:translate(var(--tx,0),-50%);
  display:inline-flex;align-items:center;padding:.5em .8em;border-radius:6px;
  background:var(--lh-navy);border:1px solid rgb(255 255 255 / .28);box-shadow:none;
  font:600 clamp(.8rem,1.1vw,.95rem)/1 var(--body);letter-spacing:0;text-transform:none;
  color:var(--lh-white);white-space:nowrap;
}

/* the pause and replay controls only exist when the script that drives them runs */
html:not(.lh-ready) .pg-lesson .lh__ctl,html:not(.lh-ready) .pg-lesson [data-lh-replay],html:not(.lh-ready) .pg-lesson .pc__ctl{display:none;}

/* ---------------------------------------------------------------
   1a. PLAQUE hero: the whole artery as a band that runs off both
   window edges. Blood cells pass the soft plaque at a steady speed
   (flow is normal), a scan sweeps the band, the verdict label arrives
   when the scan edge passes it.
   --------------------------------------------------------------- */
.pg-lesson .lh--plaque .lh__inner{
  --lh-cols:minmax(0,1.22fr) minmax(0,.78fr);
  flex:1 1 auto;align-items:end;column-gap:clamp(2rem,5vw,5rem);row-gap:0;grid-template-rows:auto auto auto auto minmax(0,1fr);
  grid-template-areas:"top ." "h1 dek" "h1 cta" "h1 meta" "art art";
  padding-bottom:0;
}
.pg-lesson .lh--plaque .lh__top{grid-area:top;margin-bottom:1.2rem;}
/* three clean lines, The plaque your / stress test / never saw: line 1 is 6.59em wide, "stress test never" would be 6.94em, so 6.76em breaks right at every size */
.pg-lesson .lh--plaque .lh__t{grid-area:h1;align-self:end;max-width:6.76em;text-wrap:wrap;}
.pg-lesson .lh--plaque .lh__d{grid-area:dek;margin:0;align-self:end;}
.pg-lesson .lh--plaque .lh__cta{grid-area:cta;margin:1.3rem 0 0;}
.pg-lesson .lh--plaque .lh__meta{grid-area:meta;margin:1rem 0 0;}
.pg-lesson .lh--plaque .lh__art{
  grid-area:art;margin:clamp(1.6rem,3.4vw,3rem) calc(-1 * var(--lh-gut)) 0;width:auto;
}
.pg-lesson .lh--plaque .lh__foot{padding:1rem var(--lh-gut) clamp(1.2rem,3.4svh,2.6rem);}
.pg-lesson .lh--plaque .lh__art{align-self:end;margin-top:clamp(1.4rem,3vw,2.6rem);}
.pg-lesson .pl-stage{background:none;overflow:visible;}
.pg-lesson .pl-img{display:block;width:100%;height:auto;}
.pg-lesson .pl-lanes{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
/* a red blood cell: a flat ellipse, no glow, no blend */
.pg-lesson .pl-lanes i{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);height:calc(var(--s) * .6);border-radius:50%;
  transform:translate3d(0,-50%,0);
  background:radial-gradient(ellipse at 40% 35%,#FF6B75 0%,#E23A46 45%,#9C1B27 100%);
  opacity:.95;
}
/* the scan band: cool light behind a glowing leading edge (R8 look, R9 size) */
.pg-lesson .pl-scan{
  position:absolute;left:0;top:19%;width:18%;height:62%;pointer-events:none;opacity:0;
  mix-blend-mode:screen;transform:translate3d(-24cqw,0,0);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  background:linear-gradient(90deg,rgb(150 210 255 / 0) 0%,rgb(150 210 255 / .16) 55%,rgb(200 232 255 / .5) 100%);
}
.pg-lesson .pl-scan::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:3px;border-radius:2px;
  background:linear-gradient(180deg,rgb(235 247 255 / 0),rgb(235 247 255 / .95) 20%,rgb(235 247 255 / .95) 80%,rgb(235 247 255 / 0));
  box-shadow:0 0 14px 3px rgb(170 220 255 / .75);
}
/* the risk glow: once the scan has passed, both plaque bulges light up and breathe (R8 pl-glow, placed on the R9 plate) */
.pg-lesson .pl-glows{position:absolute;inset:0;pointer-events:none;}
.pg-lesson .pl-glow{
  position:absolute;border-radius:50%;opacity:.7;
  background:radial-gradient(closest-side,rgb(255 224 140 / .95),rgb(255 170 90 / .62) 50%,rgb(255 130 80 / 0) 100%);
  filter:blur(16px);
}
.pg-lesson .pl-glow--top{left:20%;top:7%;width:54%;height:36%;}
.pg-lesson .pl-glow--bot{left:21%;top:57%;width:54%;height:36%;}
.js.lh-ready .pl-stage:not(.is-scanned) .pl-glows{opacity:0;}
.pg-lesson .pl-stage.is-scanned .pl-glows{transition:opacity 1.2s var(--lh-soft);}
.pg-lesson .pl-tag--plaque{--x:37%;--y:25.5%;}
.pg-lesson .pl-tag--flow{--x:70%;--y:50%;--tx:-50%;}
.pg-lesson .pl-stage.is-scanned .pl-tag--flow{transition:opacity .6s var(--lh-soft);}
.js.lh-ready .pl-stage:not(.is-scanned) .pl-tag--flow{opacity:0;}

@media (prefers-reduced-motion:no-preference){
  .js .reveal-sec:not(.is-in) .pl-stage{opacity:0;transform:translate3d(-6%,0,0);}
  .js .reveal-sec.is-in .pl-stage{transition:opacity 1s var(--lh-soft),transform 1.1s var(--lh-ease);}
  .pg-lesson .pl-lanes i{
    animation:plRun var(--t) linear var(--d) infinite;animation-play-state:paused;
  }
  .pg-lesson .lh__art.is-live:not(.is-paused) .pl-lanes i{animation-play-state:running;}
  .pg-lesson .pl-stage.is-scan .pl-scan{animation:plScan 3.6s cubic-bezier(.5,0,.22,1) .3s 1 both;}
  .pg-lesson .lh__art.is-paused .pl-scan{animation-play-state:paused;}
  .pg-lesson .pl-glow{animation:plGlow 4.6s ease-in-out infinite alternate;animation-play-state:paused;}
  .pg-lesson .pl-glow--bot{animation-delay:-2.1s;}
  .pg-lesson .lh__art.is-live:not(.is-paused) .pl-glow{animation-play-state:running;}
}
@keyframes plGlow{0%{opacity:.4;}100%{opacity:1;}}
@keyframes plRun{
  0%{transform:translate3d(calc(-1 * var(--x) - 4cqw),-50%,0);opacity:0;}
  6%{opacity:.95;}
  94%{opacity:.95;}
  100%{transform:translate3d(calc(104cqw - var(--x)),-50%,0);opacity:0;}
}
@keyframes plScan{
  0%{transform:translate3d(-20cqw,0,0);opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  100%{transform:translate3d(104cqw,0,0);opacity:0;}
}

/* ---------------------------------------------------------------
   1b. BREATHING hero: the chest swells from the diaphragm on the
   lesson's own four, two, six rhythm (12 s cycle); the heart picks up
   speed on the breath in and slows on the breath out; a counter names
   the phase. The plate runs off the bottom edge of the page.
   --------------------------------------------------------------- */
.pg-lesson .lh--breath{--lh-cols:minmax(0,1fr) minmax(0,1fr);}
.pg-lesson .lh--breath .lh__t{font-size:clamp(2.75rem,7vw,7rem);}
.pg-lesson .lh--breath .lh__inner{align-items:stretch;}
.pg-lesson .lh--breath .lh__text{align-self:center;padding-bottom:4.5rem;}
.pg-lesson .lh--breath .lh__foot{margin-top:2rem;flex-direction:column;align-items:flex-start;gap:.5rem;}
.pg-lesson .lh--breath .lh__art{align-self:end;display:flex;flex-direction:column;min-width:0;}
.pg-lesson .br-stage{width:100%;max-width:min(100%,820px);margin-left:auto;margin-bottom:-6%;}
.pg-lesson .br-chest{position:absolute;inset:0;transform-origin:50% 100%;will-change:transform;}
.pg-lesson .br-img{display:block;width:100%;height:auto;}
/* the heart: the same plate again over the heart only, a small beat whose speed follows the phase */
.pg-lesson .br-beat{
  position:absolute;left:44%;top:46%;width:25%;height:37%;overflow:hidden;pointer-events:none;
  transform-origin:55% 65%;
  -webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent);mask-image:radial-gradient(closest-side,#000 64%,transparent);
}
.pg-lesson .br-beat img{position:absolute;left:-176%;top:-124.3%;width:400%;height:auto;max-width:none;}
/* the heart glow: rises over the breath in, holds, and eases away over the long breath out (R8 br-heart) */
.pg-lesson .br-heart{
  position:absolute;left:56.5%;top:64.5%;width:34%;height:40%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:radial-gradient(closest-side,rgb(255 150 140 / .9),rgb(255 90 100 / .45) 52%,rgb(226 58 70 / 0) 100%);
  filter:blur(6px);
}
.pg-lesson .br-count{
  order:-1;display:grid;grid-template-columns:minmax(0,1fr);row-gap:.6rem;align-items:center;
  width:100%;max-width:min(100%,820px);margin:0 0 1.5rem auto;padding:0;background:none;border:0;box-shadow:none;
}
html.lh-live-count .pg-lesson .br-count{grid-template-columns:auto minmax(0,1fr);column-gap:1.2rem;}
.pg-lesson .br-count__now{display:none;grid-row:1 / span 2;align-items:baseline;gap:.9rem;margin:0;min-width:7.5rem;}
html.lh-live-count .pg-lesson .br-count__now{display:flex;}
.pg-lesson .br-count__n{
  font:800 clamp(4.6rem,7vw,6rem)/.9 var(--display);letter-spacing:-.04em;min-width:.62em;font-variant-numeric:tabular-nums;
  background-image:linear-gradient(100deg,#FF6B75,#FF8F6B 60%,#FF6B75);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.pg-lesson .br-count__w{font:700 clamp(1.1rem,1.6vw,1.4rem)/1 var(--body);letter-spacing:0;text-transform:none;color:var(--lh-coral);}
/* the numeral and the word follow the phase: coral on the way in, white on the hold, crimson on the way out */
.pg-lesson .br-count[data-phase="Hold"] .br-count__n{background-image:none;-webkit-text-fill-color:currentColor;color:#F4F7FB;}
.pg-lesson .br-count[data-phase="Hold"] .br-count__w{color:#F4F7FB;}
.pg-lesson .br-count[data-phase="Exhale"] .br-count__n{background-image:linear-gradient(100deg,#E23A46,#FF6B75 70%,#E23A46);}
.pg-lesson .br-count[data-phase="Exhale"] .br-count__w{color:#FF6B75;}
.pg-lesson .br-count__bar{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:0;padding:0;list-style:none;align-self:end;}
.pg-lesson .br-count__bar li{
  height:8px;border-radius:4px;background:rgb(255 255 255 / .16);
  transition:background-color .25s var(--lh-soft),transform .25s var(--lh-soft);
}
.pg-lesson .br-count__bar li.in{background:rgb(255 107 117 / .34);}
.pg-lesson .br-count__bar li.hold{background:rgb(244 247 251 / .3);}
.pg-lesson .br-count__bar li.out{background:rgb(226 58 70 / .34);}
.pg-lesson .br-count__bar li.is-done.in,.pg-lesson .br-count__bar li.is-now.in{background:#FF8F6B;}
.pg-lesson .br-count__bar li.is-done.hold,.pg-lesson .br-count__bar li.is-now.hold{background:#F4F7FB;}
.pg-lesson .br-count__bar li.is-done.out,.pg-lesson .br-count__bar li.is-now.out{background:#E23A46;}
.pg-lesson .br-count__bar li.is-now{transform:scaleY(1.7);}
.pg-lesson .br-count__key{
  display:grid;grid-template-columns:4fr 2fr 6fr;gap:4px;margin:0;
  font:600 .85rem/1.25 var(--body);letter-spacing:0;text-transform:none;color:#C9D3E6;
}
.pg-lesson .br-count__key span{display:flex;flex-wrap:nowrap;white-space:nowrap;gap:.1rem .4rem;min-width:0;}
.pg-lesson .br-count__key b{color:var(--lh-white);font-weight:700;}
.pg-lesson .br-count__key i{font-style:normal;}
html:not(.lh-live-count) .pg-lesson .br-count__key{margin-top:.1rem;}
/* the art column is under 480px wide here, so the numeral sits above the bar and the 2 s hold label keeps its room */
@media (min-width:761px) and (max-width:1150px){
  html.lh-live-count .pg-lesson .lh--breath .br-count{grid-template-columns:minmax(0,1fr);}
  .pg-lesson .lh--breath .br-count__now{grid-row:auto;}
}
@media (max-width:560px){
  html.lh-live-count .pg-lesson .br-count{grid-template-columns:minmax(0,1fr);}
  .pg-lesson .br-count__now{grid-row:auto;}
}
@media (prefers-reduced-motion:no-preference){
  .js .reveal-sec:not(.is-in) .br-stage{opacity:0;transform:scale(.94);}
  .js .reveal-sec.is-in .br-stage{transition:opacity 1.1s var(--lh-soft),transform 1.1s var(--lh-ease);}
  .pg-lesson .br-chest{animation:brBreath 12s linear infinite;animation-play-state:paused;}
  .pg-lesson .br-beat{animation:brBeat 1.3s ease-in-out infinite;animation-play-state:paused;}
  .pg-lesson .br-heart{animation:brHeart 12s linear infinite;animation-play-state:paused;}
  .pg-lesson .lh__art.is-live:not(.is-paused) .br-chest,
  .pg-lesson .lh__art.is-live:not(.is-paused) .br-beat,
  .pg-lesson .lh__art.is-live:not(.is-paused) .br-heart{animation-play-state:running;}
}
/* inhale 4 s (0 to 33.3%), hold 2 s (to 50%), exhale 6 s (to 100%) */
@keyframes brBreath{
  0%{transform:scale(1);animation-timing-function:cubic-bezier(.45,0,.4,1);}
  33.333%{transform:scale(1.045);}
  50%{transform:scale(1.045);animation-timing-function:cubic-bezier(.4,0,.5,1);}
  100%{transform:scale(1);}
}
@keyframes brBeat{0%,100%{transform:scale(1);}35%{transform:scale(1.016);}}
@keyframes brHeart{
  0%{opacity:.22;animation-timing-function:ease-in-out;}
  33.333%{opacity:.95;}
  50%{opacity:1;animation-timing-function:cubic-bezier(.3,0,.6,1);}
  100%{opacity:.22;}
}
@media (prefers-reduced-motion:reduce){
  .pg-lesson .br-count__bar li.in{background:#FF8F6B;}
  .pg-lesson .br-count__bar li.hold{background:#F4F7FB;}
  .pg-lesson .br-count__bar li.out{background:#E23A46;}
  .pg-lesson .br-beat{display:none;}
  .pg-lesson .br-heart{opacity:.6;}
}

/* ---------------------------------------------------------------
   1c. SLEEP hero: the night heart as a plate on the right half, a
   24 hour dial with six hours lit and a seventh outlined, the lesson's
   48 percent as a count up, a heart that beats twice on a 2.2 s cycle
   --------------------------------------------------------------- */
.pg-lesson .lh--sleep{justify-content:center;}
.pg-lesson .lh--sleep .lh__inner{flex:0 0 auto;display:block;position:static;padding-bottom:clamp(1.8rem,3vw,2.6rem);}
.pg-lesson .lh--sleep .lh__text{max-width:min(46vw,58rem);}
.pg-lesson .lh--sleep .lh__t{max-width:none;}
.pg-lesson .sl-heart{
  position:absolute;right:-17%;bottom:-6%;height:min(108%,128cqw);width:auto;aspect-ratio:1501 / 1800;
  transform-origin:48% 68%;will-change:transform;
}
.pg-lesson .sl-stage{--sl-d:clamp(200px,34cqw,300px);--sl-top:clamp(6.5rem,11vw,8rem);--sl-left:clamp(1.5rem,3.6vw,3.5rem);}
.pg-lesson .sl-dial{position:absolute;left:var(--sl-left);top:var(--sl-top);width:var(--sl-d);aspect-ratio:1;z-index:2;}
.pg-lesson .sl-dial svg{display:block;width:100%;height:100%;overflow:visible;}
.pg-lesson .sl-t{stroke:rgb(200 214 245 / .24);stroke-width:7;stroke-linecap:round;fill:none;}
.pg-lesson .sl-t--on{stroke:url(#slGrad);filter:drop-shadow(0 0 5px rgb(255 107 117 / .7));}
/* moonlight: a soft cool pool behind the dial that slowly brightens and dims (R8 sl-moon) */
.pg-lesson .sl-moon{
  position:absolute;left:calc(var(--sl-left) + var(--sl-d) / 2);top:calc(var(--sl-top) + var(--sl-d) / 2);
  width:calc(var(--sl-d) * 2.3);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(150 185 255 / .2),rgb(110 150 255 / .08) 55%,rgb(110 150 255 / 0) 100%);
}
.pg-lesson .sl-ghost{fill:rgb(255 143 107 / .22);stroke:#FF8F6B;stroke-width:2.4;}
.pg-lesson .sl-dial__num{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);text-align:center;
}
.pg-lesson .sl-dial__big{
  display:block;font:800 clamp(2rem,9cqw,3.2rem)/.9 var(--display);letter-spacing:-.04em;color:var(--lh-crim);
}
.pg-lesson .sl-dial__sm{
  display:block;margin-top:.45rem;font:600 .85rem/1.2 var(--body);letter-spacing:0;text-transform:none;color:#C9D3E6;
}
/* the note sits right under the outlined hour (the tick is at about 92 percent across, 56 percent down the dial) */
.pg-lesson .sl-note{
  position:absolute;left:var(--sl-left);top:calc(var(--sl-top) + var(--sl-d) + .6rem);
  width:calc(var(--sl-d) * .92);margin:0;z-index:2;text-align:left;
  font:500 .9rem/1.45 var(--body);color:var(--lh-white);
}
.pg-lesson .sl-note b{font-weight:700;color:#FF8F6B;}
.pg-lesson .sl-stat{
  display:flex;align-items:center;gap:1.4rem;margin:1.8rem 0 0;max-width:34rem;padding:0;
  background:none;border:0;box-shadow:none;border-radius:0;
}
.pg-lesson .sl-stat__n{
  flex:none;font:800 clamp(4rem,8vw,7rem)/.9 var(--display);letter-spacing:-.04em;
  background-image:linear-gradient(100deg,#FF6B75,#E23A46 55%,#FF8F6B);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums;min-width:1.9em;
}
.pg-lesson .sl-stat__t{display:block;font:500 clamp(1.05rem,1.4vw,1.2rem)/1.42 var(--body);color:#E3E9F4;}
.pg-lesson .sl-stat__src{display:block;margin-top:.5rem;font:500 .82rem/1.35 var(--body);letter-spacing:0;text-transform:none;color:#C9D3E6;}
.pg-lesson .lh--sleep .lh__art{position:absolute;inset:0 0 0 46%;z-index:1;}
.pg-lesson .lh--sleep .lh__stage{position:absolute;inset:0;aspect-ratio:auto;}
.pg-lesson .lh--sleep .lh__foot{margin-top:1.3rem;flex-direction:column;align-items:flex-start;gap:.5rem;}
html.lh-ready .pg-lesson .sl-stage:not(.is-arrived) .sl-t--on{opacity:.12;}
.pg-lesson .sl-stage.is-arrived .sl-t--on{transition:opacity .55s var(--lh-soft) calc(.5s + var(--i) * .15s);}
@media (prefers-reduced-motion:no-preference){
  .js .reveal-sec:not(.is-in) .sl-stage{opacity:0;}
  .js .reveal-sec.is-in .sl-stage{transition:opacity 1s var(--lh-soft);}
  .pg-lesson .sl-heart{animation:slBeat 2.2s ease-in-out infinite;animation-play-state:paused;}
  .pg-lesson .sl-ghost{animation:slGhost 3.6s ease-in-out 2s infinite;animation-play-state:paused;}
  .pg-lesson .sl-moon{animation:slMoon 9s ease-in-out infinite;animation-play-state:paused;}
  .pg-lesson .lh__art.is-live:not(.is-paused) .sl-heart,
  .pg-lesson .lh__art.is-live:not(.is-paused) .sl-ghost,
  .pg-lesson .lh__art.is-live:not(.is-paused) .sl-moon{animation-play-state:running;}
}
/* two beats then a rest */
@keyframes slBeat{0%{transform:scale(1);}8%{transform:scale(1.03);}16%{transform:scale(1);}26%{transform:scale(1.018);}36%,100%{transform:scale(1);}}
@keyframes slGhost{0%,100%{opacity:.55;}50%{opacity:1;}}
@keyframes slMoon{0%,100%{opacity:.7;}50%{opacity:1;}}

/* ---------------------------------------------------------------
   1d. BLOOD PRESSURE hero: the real cuff inflates, a needle settles
   on the real gauge, the four named factors take turns (or are pinned
   by hover, focus or a click). The art runs off the right edge.
   --------------------------------------------------------------- */
.pg-lesson .lh--bp{display:grid;align-items:center;padding-bottom:clamp(2.5rem,5vw,4rem);}
.pg-lesson .lh--bp .lh__inner{display:block;flex:none;position:static;}
.pg-lesson .lh--bp .lh__text{max-width:min(46vw,62rem);}
/* four lines, Your blood / pressure may / not be your / blood pressure: "blood pressure" is 6.24em, "not be your blood" would be 7.17em */
.pg-lesson .lh--bp .lh__t{max-width:6.7em;text-wrap:wrap;font-size:clamp(2.75rem,7vw,7rem);}
.pg-lesson .lh--bp .lh__art{position:absolute;right:-10px;bottom:clamp(2.5rem,5vw,4rem);width:min(48vw,900px);margin:0;}
.pg-lesson .lh--bp .lh__foot{margin-top:.9rem;padding-right:calc(var(--lh-gut) + 10px);justify-content:flex-end;gap:.2rem 1.6rem;}
.pg-lesson .bp-stage{overflow:visible;aspect-ratio:auto;}
.pg-lesson .bp-art{position:relative;width:100%;aspect-ratio:var(--ar);}
.pg-lesson .bp-img{display:block;width:100%;height:auto;}
.pg-lesson .bp-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.pg-lesson .bp-cuff{
  transform-box:view-box;transform-origin:1232px 399px;
  transition:transform .8s cubic-bezier(.34,1.45,.64,1);
}
.pg-lesson .bp-stage[data-act="cuff"] .bp-cuff{transform:scale(1.09);}
.pg-lesson .bp-stage[data-act="arm"] .bp-cuff,
.pg-lesson .bp-stage[data-act="bladder"] .bp-cuff,
.pg-lesson .bp-stage[data-act="talking"] .bp-cuff{transform:scale(1.05);}
.pg-lesson .bp-ol{
  fill:none;stroke:var(--lh-coral);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
  transition:stroke-dashoffset .45s ease,opacity .35s ease;
}
.pg-lesson .bp-stage[data-act="cuff"] .bp-ol--cuff,
.pg-lesson .bp-stage[data-act="arm"] .bp-ol--arm{stroke-dashoffset:0;opacity:1;}
.pg-lesson .bp-needle{
  transform-box:view-box;transform-origin:1180px 183px;transform:rotate(var(--na,-110deg));
  transition:transform .9s cubic-bezier(.34,1.56,.64,1);
}
.pg-lesson .bp-needle line{stroke:#9C1B27;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.pg-lesson .bp-needle circle{fill:#9C1B27;}
.pg-lesson .bp-stage[data-act="cuff"]{--na:40deg;}
.pg-lesson .bp-stage[data-act="arm"]{--na:40deg;}
.pg-lesson .bp-stage[data-act="bladder"]{--na:52deg;}
.pg-lesson .bp-stage[data-act="talking"]{--na:46deg;}
.pg-lesson .bp-panel{
  position:absolute;left:0;top:0;z-index:3;width:33.4%;min-height:54%;margin:0;
  background:var(--lh-navy-2);border:1px solid var(--lh-line-dark);border-radius:var(--lh-box-r);
  padding:clamp(.9rem,2.2cqw,2rem);display:flex;flex-direction:column;gap:clamp(.4rem,1.3cqw,1.2rem);
}
.pg-lesson .bp-panel__k{margin:0;font:500 clamp(.82rem,1.9cqw,1.2rem)/1.3 var(--body);letter-spacing:0;text-transform:none;color:#C9D3E6;}
.pg-lesson .bp-rows{margin:0;padding:0;list-style:none;display:grid;gap:clamp(.3rem,1cqw,.9rem);}
.pg-lesson .bp-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "b b";align-items:baseline;gap:.3rem .5rem;
  width:100%;margin:0;padding:clamp(.35rem,1.1cqw,.9rem) clamp(.5rem,1.5cqw,1.2rem) clamp(.4rem,1.3cqw,1rem);
  border:1.5px solid rgb(255 255 255 / .13);border-radius:10px;
  background:none;color:var(--lh-white);text-align:left;font:inherit;cursor:pointer;
  transition:border-color .2s ease;
}
.pg-lesson .bp-row__l{grid-area:l;font:600 clamp(.875rem,2.3cqw,1.5rem)/1.2 var(--body);}
.pg-lesson .bp-row__v{grid-area:v;font:500 clamp(.75rem,1.6cqw,1.05rem)/1 var(--body);color:#FFC9CD;white-space:nowrap;}
.pg-lesson .bp-row__v b{font:800 clamp(1.1rem,3.2cqw,2.2rem)/1 var(--display);letter-spacing:-.02em;color:var(--lh-white);font-variant-numeric:tabular-nums;transition:color .2s ease;}
.pg-lesson .bp-row__bar{grid-area:b;height:clamp(4px,.6cqw,7px);border-radius:4px;background:rgb(255 255 255 / .12);overflow:hidden;}
.pg-lesson .bp-row__bar i{display:block;height:100%;width:calc(var(--w) * 1%);border-radius:4px;background:linear-gradient(90deg,#E23A46,#FF8F6B);transform-origin:left;}
.pg-lesson .bp-row:focus-visible{outline:none;}
.pg-lesson .bp-row.is-act,.pg-lesson .bp-row[aria-pressed="true"],
.pg-lesson .bp-row:focus-visible{border-color:var(--lh-coral);}
.pg-lesson .bp-row.is-act .bp-row__v b,.pg-lesson .bp-row[aria-pressed="true"] .bp-row__v b{color:#FF8F8F;}
@media (hover:hover) and (pointer:fine){
  .pg-lesson .bp-row:hover{border-color:var(--lh-coral);}
}
@media (prefers-reduced-motion:no-preference){
  .js .reveal-sec:not(.is-in) .bp-stage{opacity:0;}
  .js .reveal-sec.is-in .bp-stage{transition:opacity 1s var(--lh-soft);}
  html.lh-ready .bp-stage:not(.is-arrived) .bp-row__bar i{transform:scaleX(0);}
  .pg-lesson .bp-stage.is-arrived .bp-row__bar i{transition:transform .7s var(--lh-ease) calc(var(--i) * 120ms);}
}

/* hero: finished state with reduced motion (nothing loops, nothing hidden) */
@media (prefers-reduced-motion:reduce){
  .pg-lesson .pl-stage .pl-tag--flow{opacity:1 !important;}
  .pg-lesson .pl-scan{display:none;}
  .pg-lesson .sl-t--on{opacity:1 !important;}
  .pg-lesson .bp-stage{--na:40deg;}
  .pg-lesson .bp-cuff{transform:scale(1.05);}
  .pg-lesson .bp-needle,.pg-lesson .bp-cuff,.pg-lesson .bp-ol{transition:none;}
  .pg-lesson .lh__ctl,.pg-lesson [data-lh-replay]{display:none;}
}

/* ---------------------------------------------------------------
   2. READING COLUMN: one centred 37rem measure, no rail
   --------------------------------------------------------------- */
.pg-lesson .rd{position:relative;background:#F4F7FB;overflow-x:clip;}
/* the navy bands sit above the margin rail: the rail slips behind them instead of printing dark ink on navy */
.pg-lesson .rfb__band{position:relative;z-index:1;}
.pg-lesson .rd__wrap{
  width:min(37rem,calc(100% - 2 * var(--lh-gut)));margin-inline:auto;
  display:block;padding:clamp(3.4rem,7vw,6rem) 0 clamp(2.6rem,5vw,4rem);
}
.pg-lesson .ibody{max-width:none;margin:0;min-width:0;}
.pg-lesson .ibody > p{max-width:37rem;}
.pg-lesson .ibody > p{
  font:500 clamp(1.1rem,.55vw + .95rem,1.25rem)/1.7 var(--body);color:var(--lh-ink);margin:0 0 1.45rem;
}
.pg-lesson .ibody > p strong{font-weight:700;color:var(--lh-ink);}
/* the standfirst: the first paragraph, with its drop cap */
.pg-lesson .ibody > p:first-of-type{font-size:clamp(1.3rem,2.1vw,1.6rem);line-height:1.5;font-weight:500;}
.pg-lesson .ibody > p:first-of-type::first-letter{
  font-family:'Newsreader',Georgia,serif;font-weight:600;
  background:none;-webkit-text-fill-color:currentColor;color:#E23A46;margin-right:.08em;
}
.pg-lesson .ibody > h3{
  position:relative;scroll-margin-top:7rem;margin:clamp(4rem,8vw,6.5rem) 0 clamp(1.2rem,2vw,1.8rem);max-width:37rem;
  font:800 var(--lh-fs-h2)/1.04 var(--display);letter-spacing:-.03em;color:var(--lh-ink);text-wrap:balance;
}
/* from 900px up the subhead may run past the 37rem measure to the right (it starts on the column's left edge), so it reads in two lines, not four */
@media (min-width:900px){
  .pg-lesson .ibody > h3{max-width:none;width:min(calc(50vw + 18.5rem - var(--lh-gut)),60rem);}
}
/* pg-learn.css paints a ghost 02 above the second heading: gone */
.pg-lesson .ibody > h3::before,.pg-lesson .ibody > h3:nth-of-type(2)::before{content:none;display:none;}
/* ---------------------------------------------------------------
   2a. READING RAIL (R8 rd__rail), in the left margin of the 37rem column on wide screens only.
   In this lesson, the fill that follows the read, the section being read lit (pg-lesson.js section 9).
   --------------------------------------------------------------- */
.pg-lesson .rd__wrap{position:relative;}
.pg-lesson .rd__rail{display:none;}
@media (min-width:1100px){
  .pg-lesson .rd__rail{
    display:block;position:absolute;z-index:0;top:0;bottom:0;
    right:calc(100% + 2.25rem);width:min(13rem,calc((100vw - 37rem) / 2 - var(--lh-gut) - 2.25rem));
  }
  .pg-lesson .rd__rail-in{position:sticky;top:7.2rem;padding-top:.4rem;transition:opacity .25s var(--lh-soft);}
  /* while a navy band passes behind, the rail is gone for the eye and for the Tab key (visibility turns off after the fade) */
  .pg-lesson .rd__rail-in.is-under{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .25s var(--lh-soft),visibility 0s linear .25s;}
  .pg-lesson .rd__lbl{margin:0 0 .8rem;font:600 .95rem/1.2 var(--body);letter-spacing:0;text-transform:none;color:#5A6880;}
  .pg-lesson .rd__toc{margin:0;padding:0;list-style:none;display:grid;gap:.15rem;}
  .pg-lesson .rd__toc a{
    display:block;padding:.5rem .7rem .5rem 0;font:500 .95rem/1.35 var(--body);color:var(--lh-ink-soft);text-decoration:none;
    transition:color .25s var(--lh-soft),transform .3s var(--lh-ease);
  }
  .pg-lesson .rd__toc a.is-on{color:var(--lh-ink);font-weight:700;}
  .pg-lesson .rd__track{
    display:block;position:relative;width:4px;height:7.5rem;margin:1.2rem 0 1rem;border-radius:2px;
    background:rgb(11 27 51 / .12);overflow:hidden;
  }
  .pg-lesson .rd__fill{
    position:absolute;inset:0;border-radius:2px;transform-origin:50% 0;transform:scaleY(var(--p,0));
    background:linear-gradient(180deg,#9C1B27,#E23A46 60%,#FF6B75);
  }
  .pg-lesson .rd__time{margin:0;font:500 .9rem/1.2 var(--body);letter-spacing:0;text-transform:none;color:#5A6880;}
}
html:not(.lh-ready) .pg-lesson .rd__track{display:none;}
@media (min-width:1100px) and (hover:hover) and (pointer:fine){
  .pg-lesson .rd__toc a:hover{color:#A5202A;transform:translateX(4px);}
}
@media (min-width:1100px){
  .pg-lesson .rd__toc a:focus-visible{color:#A5202A;transform:translateX(4px);outline:2px solid #A5202A;outline-offset:2px;border-radius:3px;}
}

/* key figures already in the sentence: flat crimson, no box */
.pg-lesson .ibody .num{font-weight:700;color:#A5202A;}
@media (min-width:1600px){
  .pg-lesson .ibody > p{font-size:1.24rem;}
  .pg-lesson .ibody > p:first-of-type{font-size:1.65rem;}
}

/* the pull quote: its own full-bleed navy band, lights word by word as it is read */
.pg-lesson .ibody > p.ipull{
  position:relative;width:100vw;max-width:none;margin:clamp(3.5rem,8vw,6.5rem) calc(50% - 50vw);
  padding:clamp(3.5rem,8vw,6.5rem) max(var(--lh-gut),calc((100vw - 1180px) / 2));
  background:var(--lh-navy);color:var(--lh-white);z-index:1;
  font:600 clamp(2.4rem,6vw,5.2rem)/1.08 'Newsreader',Georgia,serif;letter-spacing:-.015em;text-wrap:balance;
}
.pg-lesson .ibody > p.ipull::first-letter{font:inherit;color:inherit;-webkit-text-fill-color:currentColor;margin:0;float:none;initial-letter:normal;}
.pg-lesson .ibody > p.ipull .k4-grad{font-weight:600;}

/* citation numerals: a plain crimson superscript that fills crimson on hover and focus, as in R8 (popover from pg-learn.js stays) */
.pg-lesson .cite{
  position:relative;display:inline;margin:0 -.4em 0 -.3em;padding:.35em .4em;border-radius:6px;
  font:700 .68em/1 var(--body);vertical-align:super;color:#A5202A;background:none;
  text-decoration:none;
  cursor:pointer;transition:background-color .2s var(--lh-soft),color .2s var(--lh-soft);
}
@media (hover:hover) and (pointer:fine){
  .pg-lesson .cite:hover{background:#A5202A;color:#fff;}
}
.pg-lesson .cite:focus-visible{background:#A5202A;color:#fff;outline:2px solid #E23A46;outline-offset:2px;}
.pg-lesson .cite__pop{
  background:var(--lh-navy-2);color:#DCE3F0;border:1px solid var(--lh-line-dark);border-radius:12px;
  font:400 .8rem/1.55 var(--body);letter-spacing:0;text-transform:none;vertical-align:baseline;
  text-decoration:none;box-shadow:none;
}

/* ---------------------------------------------------------------
   3. FIGURE BANDS (.rfb): flat navy, full bleed, not interactive.
   The caption sits under the band in the 37rem column.
   --------------------------------------------------------------- */
.pg-lesson .rfb{margin:clamp(3rem,7vw,5.5rem) 0;max-width:none;}
.pg-lesson .rfb__band{
  width:100vw;margin-inline:calc(50% - 50vw);background:var(--lh-navy);color:var(--lh-white);
  padding:clamp(3rem,7vw,5.5rem) var(--lh-gut);
}
.pg-lesson .rfb__in{width:min(1180px,100%);margin:0 auto;}
.pg-lesson .rfb__cap{margin:1.1rem 0 0;display:grid;gap:.4rem;}
.pg-lesson .rfb__cap > span:first-child{font:500 1rem/1.5 var(--body);color:var(--lh-ink-soft);max-width:60ch;}
.pg-lesson .rfb__credit{font:400 .8rem/1.5 var(--body);color:#5A6880;}
.pg-lesson .rfb__credit a{color:var(--lh-ink);text-decoration:underline;text-underline-offset:2px;}
@media (hover:hover) and (pointer:fine){
  .pg-lesson .rfb__credit a:hover{text-decoration-color:#E23A46;text-decoration-thickness:2px;}
}
.pg-lesson .rfb__credit a:focus-visible{outline:2px solid #E23A46;outline-offset:2px;border-radius:2px;}
.pg-lesson .rfb__t{
  margin:0 0 clamp(1.6rem,3vw,2.6rem);font:800 clamp(1.6rem,3vw,2.4rem)/1.12 var(--display);letter-spacing:-.02em;
  color:var(--lh-white);text-wrap:balance;max-width:26ch;
}

/* 3a. PLAQUE: the progression plate, six stages left to right, and the one stat block */
.pg-lesson .pr-stage{position:relative;container-type:inline-size;}
.pg-lesson .pr-stage img{display:block;width:100%;height:auto;}
.pg-lesson .pr-tag{
  position:absolute;left:var(--x);top:var(--y);z-index:2;display:flex;align-items:center;gap:.55rem;
  transform:translate(-.3rem,-50%);
  font:600 clamp(.85rem,1.5vw,1.1rem)/1 var(--body);letter-spacing:0;text-transform:none;color:#fff;white-space:nowrap;
  text-shadow:0 1px 8px rgb(12 24 51 / .7);
}
.pg-lesson .pr-tag i{flex:none;width:.62rem;height:.62rem;border-radius:50%;background:#fff;border:2px solid var(--lh-navy);box-sizing:content-box;}
.pg-lesson .pr-tag--cap{--x:82%;--y:41%;flex-direction:row-reverse;transform:translate(calc(-100% + .3rem),-50%);}
.pg-lesson .pr-tag--clot{--x:87.3%;--y:36%;}
.pg-lesson .pl-stat{margin:2.4rem 0 2.6rem;max-width:37rem;}
.pg-lesson .pl-stat__n{
  margin:0;font:800 clamp(4.5rem,11vw,8rem)/.9 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.pg-lesson .pl-stat__bar{position:relative;height:10px;margin:1.1rem 0 .75rem;border-radius:5px;background:rgb(11 27 51 / .12);overflow:hidden;}
.pg-lesson .pl-stat__bar i{position:absolute;inset:0 auto 0 0;width:33%;border-radius:5px;background:linear-gradient(90deg,#E23A46,#FF6B75);transform-origin:left;}
.pg-lesson .pl-stat__t{margin:0;font:500 .95rem/1.4 var(--body);color:var(--lh-ink-soft);}
@media (prefers-reduced-motion:no-preference){
  html.lh-ready .pg-lesson .pl-stat:not(.lh-in) .pl-stat__bar i{transform:scaleX(0);}
  .pg-lesson .pl-stat.lh-in .pl-stat__bar i{transition:transform 1.4s var(--lh-ease);}
  html.lh-ready .pg-lesson .rfb--rupture:not(.lh-in) .pr-img{clip-path:inset(0 100% 0 0);}
  html.lh-ready .pg-lesson .rfb--rupture:not(.lh-in) .pr-tag{opacity:0;}
  .pg-lesson .rfb--rupture .pr-img{clip-path:inset(0 0 0 0);}
  .pg-lesson .rfb--rupture.lh-in .pr-img{transition:clip-path calc(var(--pr-n,6) * .4s) steps(var(--pr-n,6),jump-start);}
  .pg-lesson .rfb--rupture.lh-in .pr-tag{transition:opacity .5s var(--lh-soft) calc(var(--pr-n,6) * .4s + .25s);}
}
@media (max-width:700px){
  .pg-lesson .rfb--rupture{--pr-n:3;}
  .pg-lesson .pr-tag--cap{--x:66.5%;}
  .pg-lesson .pr-tag--clot{--x:76.3%;}
}

/* 3b. BREATHING: the pacer. A solid coral 5, the 4:2:6 curve, a dot that rides it, the active phase counted. */
.pg-lesson .pc{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;}
.pg-lesson .pc__big{display:grid;gap:.2rem;justify-items:start;}
.pg-lesson .pc__big b{font:800 clamp(5rem,12vw,9rem)/.85 var(--display);letter-spacing:-.04em;color:var(--lh-coral);}
.pg-lesson .pc__big span{font:600 1.05rem/1.2 var(--body);color:#DCE3F0;}
.pg-lesson .pc__chart{min-width:0;}
.pg-lesson .pc__phases,.pg-lesson .pc__ticks{display:grid;grid-template-columns:4fr 2fr 6fr;margin:0;padding:0;list-style:none;}
.pg-lesson .pc__phases li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .5rem;padding:0 0 .8rem .2rem;}
.pg-lesson .pc__phases b{font:600 clamp(.9rem,1.2vw,1.05rem)/1.2 var(--body);color:#DCE3F0;transition:color .2s ease;}
.pg-lesson .pc__phases i{font:500 clamp(.85rem,1.1vw,.95rem)/1.2 var(--body);font-style:normal;color:#DCE3F0;}
.pg-lesson .pc__phases li.is-on b{color:#fff;}
.pg-lesson .pc__ticks li{padding-top:.7rem;font:500 clamp(.85rem,1.1vw,.95rem)/1 var(--body);color:#DCE3F0;}
.pg-lesson .pc__ticks li:last-child{display:flex;justify-content:space-between;padding-right:.2rem;}
.pg-lesson .pc__plot{position:relative;height:clamp(220px,34vw,420px);}
.pg-lesson .pc__svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;}
.pg-lesson .pc__band{fill:rgb(255 255 255 / .05);}
.pg-lesson .pc__lit{fill:rgb(255 107 117 / .15);opacity:0;transition:opacity .25s ease;}
.pg-lesson .pc__lit--hold{fill:rgb(244 247 251 / .1);}
.pg-lesson .pc__lit--out{fill:rgb(226 58 70 / .17);}
.pg-lesson .pc__lit.is-on{opacity:1;}
.pg-lesson .pc__line{fill:none;stroke:url(#pcGrad);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.pg-lesson .pc__ax{stroke:rgb(255 255 255 / .28);stroke-width:1;vector-effect:non-scaling-stroke;}
.pg-lesson .pc__dot{
  position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;
  transform:translate3d(0,0,0);will-change:transform;
}
.pg-lesson .pc__cnt{
  position:absolute;bottom:1rem;display:none;font:800 clamp(2.4rem,5vw,4rem)/1 var(--display);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;
  transform:translateX(-50%);
}
.pg-lesson .pc__cnt.is-on{display:block;}
.pg-lesson .pc__foot{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;align-items:center;}
.pg-lesson .pc__ctl{cursor:pointer;}
html:not(.lh-ready) .pg-lesson .pc__dot,html:not(.lh-ready) .pg-lesson .pc__cnt{display:none;}
/* arrival: the 4, 2, 6 curve draws left to right once, then the phase names and seconds fade in (R8 dg-draw, dg-fade) */
@media (prefers-reduced-motion:no-preference){
  html.lh-ready .pg-lesson .rfb--pacer:not(.lh-in) .pc__line{clip-path:inset(-20% 100% -20% 0);}
  html.lh-ready .pg-lesson .rfb--pacer:not(.lh-in) :is(.pc__phases,.pc__ticks){opacity:0;}
  .pg-lesson .rfb--pacer .pc__line{clip-path:inset(-20% 0 -20% 0);}
  .pg-lesson .rfb--pacer.lh-in .pc__line{transition:clip-path 1.9s var(--lh-ease) .35s;}
  .pg-lesson .rfb--pacer.lh-in :is(.pc__phases,.pc__ticks){transition:opacity 1.2s var(--lh-soft) .9s;}
}
.pg-lesson .pc__dot{left:100%;top:var(--py,81%);}
html.lh-ready .pg-lesson .pc__dot{left:0;top:0;}
@media (prefers-reduced-motion:reduce){
  .pg-lesson .pc__ctl{display:none;}
  .pg-lesson .pc__lit{opacity:0 !important;}
}
@media (max-width:760px){
  .pg-lesson .pc{grid-template-columns:minmax(0,1fr);gap:1.2rem;}
  .pg-lesson .pc__big{grid-template-columns:auto 1fr;align-items:end;gap:.9rem;}
}

/* 3c. SLEEP: the hypnogram band, title above, stage labels you can point at */
.pg-lesson .hyp{max-width:1000px;margin-inline:auto;}
.pg-lesson .hyp__svg{display:block;width:100%;height:auto;overflow:visible;}
.pg-lesson .hyp__svg text{font-family:var(--body);fill:#DCE3F0;}
.pg-lesson .dg-shade{fill:rgb(255 255 255 / .05);}
.pg-lesson .dg-ax{stroke:rgb(255 255 255 / .28);stroke-width:1;}
.pg-lesson .dg-line{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s ease;}
.pg-lesson .dg-line--a{stroke:url(#dgGrad);}
.pg-lesson .dg-line--hyp{stroke-width:4.5;}
.pg-lesson .dg-line--dim{stroke:rgb(180 195 225 / .45);}
.pg-lesson .dg-stage{fill:none;stroke:#FF6B75;stroke-width:7;stroke-linecap:round;opacity:0;transition:opacity .2s ease;pointer-events:none;}
.pg-lesson .dg-cut{stroke:#FF6B75;stroke-width:1.6;}
.pg-lesson .dg-cut--7{stroke:rgb(255 255 255 / .5);}
.pg-lesson .dg-hl{font-size:7.4px;font-weight:600;letter-spacing:0;text-transform:none;}
.pg-lesson .dg-hot{fill:#FF8F6B !important;font-weight:700;}
.pg-lesson .dg-hl.dg-cutlab{font-size:9px;}
.pg-lesson .dg-lab{cursor:pointer;outline:none;}
.pg-lesson .dg-lab text{transition:fill .2s ease;}
.pg-lesson .dg-lab:focus-visible text{fill:#fff;}
.pg-lesson .dg-lab:focus-visible .dg-lab__hit{stroke:var(--lh-coral);stroke-width:1.5;}
.pg-lesson .dg-lab__hit{fill:transparent;stroke:transparent;}
.pg-lesson .hyp:has(.dg-lab--rem:focus-visible) .dg-stage--rem,
.pg-lesson .hyp:has(.dg-lab--awake:focus-visible) .dg-stage--awake,
.pg-lesson .hyp:has(.dg-lab--light:focus-visible) .dg-stage--light,
.pg-lesson .hyp:has(.dg-lab--deep:focus-visible) .dg-stage--deep{opacity:1;}
.pg-lesson .hyp:has(.dg-lab:focus-visible) .dg-line{opacity:.35;}
@media (hover:hover) and (pointer:fine){
  .pg-lesson .hyp:has(.dg-lab--rem:hover) .dg-stage--rem,
  .pg-lesson .hyp:has(.dg-lab--awake:hover) .dg-stage--awake,
  .pg-lesson .hyp:has(.dg-lab--light:hover) .dg-stage--light,
  .pg-lesson .hyp:has(.dg-lab--deep:hover) .dg-stage--deep{opacity:1;}
  .pg-lesson .hyp:has(.dg-lab:hover) .dg-line{opacity:.35;}
  .pg-lesson .dg-lab:hover text{fill:#fff;}
}
.pg-lesson .dg-draw{stroke-dasharray:1;stroke-dashoffset:0;}
.pg-lesson .hyp__note{margin:1.1rem 0 0;font:400 .82rem/1.5 var(--body);color:#B9C4DA;max-width:62ch;}
@media (prefers-reduced-motion:no-preference){
  html.lh-ready .pg-lesson .rfb:not(.lh-in) .dg-draw{stroke-dashoffset:1;}
  .pg-lesson .rfb.lh-in .dg-draw{transition:stroke-dashoffset 1.9s var(--lh-ease) .35s;}
  .pg-lesson .rfb.lh-in .dg-draw--2{transition-delay:1.15s;}
  html.lh-ready .pg-lesson .rfb:not(.lh-in) .dg-fade{opacity:0;}
  .pg-lesson .rfb.lh-in .dg-fade{transition:opacity 1.2s var(--lh-soft) .9s;}
}
@media (max-width:620px){
  .pg-lesson .hyp__svg .dg-line--hyp{stroke-width:4.2;}
  .pg-lesson .hyp__svg .dg-hl{font-size:19px;}
  .pg-lesson .hyp__svg .dg-hl.dg-cutlab{font-size:21px;}
  .pg-lesson .rfb__band{padding-inline:16px;}
}

/* 3d. BLOOD PRESSURE: three bars on one scale, the numbers roll to their value */
.pg-lesson .bb__k{margin:0 0 clamp(1.6rem,3vw,2.4rem);font:700 1.15rem/1.3 var(--body);color:var(--lh-white);}
.pg-lesson .bb__rows{margin:0;padding:0;list-style:none;display:grid;gap:1.8rem;}
.pg-lesson .bb__row{display:grid;gap:.7rem;}
.pg-lesson .bb__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1.5rem;}
.pg-lesson .bb__who{font:500 1.05rem/1.3 var(--body);letter-spacing:0;text-transform:none;color:#DCE3F0;}
.pg-lesson .bb__val{font:500 1rem/1 var(--body);color:#DCE3F0;white-space:nowrap;}
.pg-lesson .bb__val b{
  font:800 clamp(2.2rem,4.6vw,3.6rem)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-right:.3rem;
  background-image:linear-gradient(100deg,#FF6B75,#E23A46 60%,#FF8F6B);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.pg-lesson .bb__val--lo b{background-image:none;-webkit-text-fill-color:currentColor;color:#F4F7FB;}
.pg-lesson .bb__bar{position:relative;height:20px;border-radius:10px;background:rgb(255 255 255 / .08);}
.pg-lesson .bb__bar::after{content:"";position:absolute;left:32%;top:-4px;bottom:-4px;width:2px;background:rgb(255 255 255 / .38);}
.pg-lesson .bb__fill{position:absolute;top:0;bottom:0;border-radius:10px;transform-origin:var(--o,left);}
.pg-lesson .bb__fill--hi{left:32%;width:calc(var(--w) * 1%);background:linear-gradient(90deg,#E23A46,#FF6B75);--o:left;}
.pg-lesson .bb__fill--lo{right:68%;width:calc(var(--w) * 1%);background:#F4F7FB;--o:right;}
.pg-lesson .bb__unit{margin:1.2rem 0 0 32%;font:500 .9rem/1.5 var(--body);color:#C9D3E6;}
@media (prefers-reduced-motion:no-preference){
  html.lh-ready .pg-lesson .rfb:not(.lh-in) .bb__fill{transform:scaleX(0);}
  .pg-lesson .rfb.lh-in .bb__fill{transition:transform 1.3s var(--lh-ease) calc(.2s + var(--i) * .2s);}
}
@media (max-width:620px){.pg-lesson .bb__unit{margin-left:0;}}

/* inline stat gauges (R8 lede-gauge, sleep only): a flat navy pill right after the sentence that states the number; its bar fills when it scrolls in.
   The base rules (R8 fable.css 387 to 393) were purged from the shared file, so they live here. */
.pg-lesson .ibody .lede-gauge{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 .12em 0 .55em;padding:.2rem .8rem .2rem .7rem;border-radius:999px;vertical-align:.1em;
  background:#0E1C3C;color:var(--lh-white);white-space:nowrap;line-height:1.2;
}
.pg-lesson .ibody .lede-gauge__lbl{font:600 .85rem/1 var(--body);letter-spacing:0;text-transform:none;color:#C9D3E6;}
.pg-lesson .ibody .lede-gauge__track{position:relative;width:58px;height:5px;border-radius:3px;background:rgb(255 255 255 / .18);overflow:hidden;}
.pg-lesson .ibody .lede-gauge__fill{
  position:absolute;inset:0;width:var(--pct,0%);border-radius:inherit;background:linear-gradient(90deg,#E23A46,#FF8F6B);transform-origin:left;
}
.pg-lesson .ibody .lede-gauge__num{font:700 .95rem/1 var(--body);color:#FFB3B8;font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion:no-preference){
  html.lh-ready .pg-lesson .lede-gauge:not(.lh-in) .lede-gauge__fill{transform:scaleX(0);}
  .pg-lesson .lede-gauge.lh-in .lede-gauge__fill{transition:transform 1s var(--lh-ease);}
}
@media (max-width:520px){.pg-lesson .ibody .lede-gauge{white-space:normal;}}

/* highlighter phrases (bp): a one-time sweep under the key words */
.pg-lesson .ib-hl{
  background:linear-gradient(rgb(226 58 70 / .16),rgb(226 58 70 / .16)) 0 100% / 0% 100% no-repeat;
  color:#9C1B27;font-weight:700;padding:0 .12em;margin:0 -.12em;
  transition:background-size .9s cubic-bezier(.2,.7,.2,1);
}
.pg-lesson .ib-hl.lh-in{background-size:100% 100%;}
html:not(.lh-ready) .pg-lesson .ib-hl{background-size:100% 100%;}

/* ---------------------------------------------------------------
   4. SOURCES: one ledger. The whole row is the link; the shared
   ring from motion-kit is the only answer to hover and focus.
   --------------------------------------------------------------- */
.pg-lesson .rr{position:relative;scroll-margin-top:6.5rem;}
.pg-lesson .rr.sec-paper{background:#EEF1F6;}
.pg-lesson .rr .irefs{
  width:min(1180px,calc(100% - 2 * var(--lh-gut)));max-width:none;margin:0 auto;border:0;
  display:block;padding:clamp(3rem,6vw,4.6rem) 0 clamp(3rem,6vw,4.6rem);
}
.pg-lesson .irefs__k{
  margin:0 0 clamp(1.6rem,3vw,2.6rem);color:var(--lh-ink);
  font:800 var(--lh-fs-h2)/1.04 var(--display);letter-spacing:-.03em;text-transform:none;
}
.pg-lesson .irefs ol{margin:0;padding:0;list-style:none;counter-reset:rf;display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;}
.pg-lesson .irefs li{
  position:relative;counter-increment:rf;margin:0;border-radius:var(--lh-box-r);
  display:grid;grid-template-columns:3.6rem minmax(0,1fr) auto;column-gap:clamp(1.2rem,3vw,2.6rem);align-items:center;
  grid-template-areas:"n ti a" "n au a" "n jo a";
  padding:1.5rem 1.7rem;background:#fff;border:1px solid var(--lh-line-light);box-shadow:none;
  font:400 .94rem/1.58 var(--body);color:var(--lh-ink-soft);cursor:pointer;
  transition:none;
}
.pg-lesson .irefs li::before{
  content:counter(rf);grid-area:n;align-self:start;
  font:800 clamp(2.8rem,4vw,3.6rem)/1 var(--display);letter-spacing:-.03em;color:#A5202A;
}
.pg-lesson .irefs li.is-lit{background:#fff;border-color:#E23A46;box-shadow:inset 0 0 0 1px #E23A46;}
@media (prefers-reduced-motion:no-preference){
  html.lh-ready .pg-lesson .irefs:not(.lh-in) li{opacity:0;transform:translateY(22px);}
  .pg-lesson .irefs.lh-in li{transition:opacity .6s var(--lh-soft) calc(var(--i) * .1s),transform .6s var(--lh-ease) calc(var(--i) * .1s);}
}
.pg-lesson .rf-ti,.pg-lesson .rf-au,.pg-lesson .rf-jo{overflow-wrap:break-word;word-break:normal;text-wrap:pretty;}
.pg-lesson .rf-ti{grid-area:ti;display:block;font:800 clamp(1.35rem,2.4vw,2.1rem)/1.14 var(--display);letter-spacing:-.02em;color:var(--lh-ink);text-wrap:balance;}
.pg-lesson .rf-au{grid-area:au;display:block;margin-top:.5rem;font:500 .875rem/1.5 var(--body);letter-spacing:0;color:var(--lh-ink-soft);}
.pg-lesson .rf-jo{grid-area:jo;display:block;margin-top:.15rem;font:italic 500 .9375rem/1.5 var(--body);color:var(--lh-ink-soft);}
.pg-lesson .irefs li a{
  grid-area:a;align-self:end;position:static;display:inline-flex;align-items:center;gap:.4rem;margin:0;padding:0;border:0;
  font:600 .9rem/1 var(--body);color:#A5202A;text-decoration:none;white-space:nowrap;
}
.pg-lesson .irefs li a::before{content:none;}
.pg-lesson .irefs li a::after{content:"";position:absolute;inset:0;border-radius:inherit;}
.pg-lesson .irefs li a:focus-visible{outline:none;}
.pg-lesson .rf-arr{display:inline-block;font-size:1.05em;line-height:1;transition:transform .3s var(--lh-ease);}
/* inside the row: the underline draws under the link text and the arrow nudges (R8 irefs li a); the row itself only gets the shared ring */
.pg-lesson .rf-lbl{
  padding-bottom:.28rem;background:linear-gradient(90deg,#9C1B27,#E23A46,#FF6B75) 0 100% / 0% 2px no-repeat;
  transition:background-size .35s var(--lh-ease);
}
@media (hover:hover) and (pointer:fine){
  .pg-lesson .irefs li:hover .rf-lbl{background-size:100% 2px;}
  .pg-lesson .irefs li:hover .rf-arr{transform:translate(3px,-3px);}
}
.pg-lesson .irefs li:has(a:focus-visible) .rf-lbl{background-size:100% 2px;}
.pg-lesson .irefs li:has(a:focus-visible) .rf-arr{transform:translate(3px,-3px);}
@media (pointer:coarse){.pg-lesson .irefs li a{min-height:44px;}}
@media (max-width:760px){
  .pg-lesson .rf-ti{text-wrap:pretty;}
  .pg-lesson .irefs li{
    grid-template-columns:minmax(0,1fr);grid-template-areas:"n" "ti" "au" "jo" "a";row-gap:.35rem;padding:1.2rem 1.1rem;
  }
  .pg-lesson .irefs li::before{font-size:2.4rem;}
  .pg-lesson .irefs li a{margin-top:.5rem;min-height:44px;align-self:start;}
}
@media (prefers-reduced-motion:reduce){
  .pg-lesson .irefs li{transition:none;}
}

/* ---------------------------------------------------------------
   5. CLOSE: the education note, the CTA, the door to the next lesson
   --------------------------------------------------------------- */
.pg-lesson .rx{position:relative;isolation:isolate;overflow:hidden;background:var(--lh-navy);}
.pg-lesson .rx__wrap{
  position:relative;z-index:1;width:min(1180px,calc(100% - 2 * var(--lh-gut)));margin-inline:auto;
  display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4rem);padding:clamp(4.5rem,8vw,7.5rem) 0;
}
.pg-lesson .rx__row{display:grid;grid-template-columns:minmax(0,calc(var(--lh-fs-h2) * 6.7)) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:end;}
.pg-lesson .rx__h{
  margin:0;font:800 var(--lh-fs-h2)/1.04 var(--display);letter-spacing:-.03em;color:var(--lh-white);text-wrap:balance;max-width:none;
}
.pg-lesson .rx__h em{font-style:normal;color:inherit;-webkit-text-fill-color:currentColor;background:none;}
.pg-lesson .rx__note{
  margin:0;max-width:34ch;font:500 clamp(1.15rem,1.5vw,1.45rem)/1.5 var(--body);font-style:normal;color:var(--lh-white);
}
.pg-lesson .rx__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin:1.8rem 0 0;}
.pg-lesson .rx__next{
  position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;
  min-height:clamp(320px,30vw,440px);padding:clamp(1.75rem,3.5vw,3rem);
  border-radius:var(--lh-stage-r);border:1px solid var(--lh-line-dark);background:var(--lh-navy-2);
  text-decoration:none;color:var(--lh-white);overflow:hidden;box-shadow:none;
}
.pg-lesson .rx__txt{position:relative;z-index:1;display:block;min-width:0;}
.pg-lesson .rx__nrow{display:flex;align-items:baseline;gap:.7rem;}
.pg-lesson .rx__nk{font:600 .95rem/1 var(--body);letter-spacing:0;text-transform:none;color:#C5CFE0;}
.pg-lesson .rx__nn{font:800 1.6rem/1 var(--display);letter-spacing:-.02em;color:var(--lh-coral);}
.pg-lesson .rx__nt{display:block;margin-top:1rem;font:800 clamp(1.8rem,3.3vw,2.9rem)/1.06 var(--display);letter-spacing:-.025em;text-wrap:balance;max-width:20ch;}
.pg-lesson .rx__nd{display:block;margin-top:.9rem;font:400 1.05rem/1.55 var(--body);color:rgb(232 237 244 / .82);max-width:42ch;}
.pg-lesson .rx__ng{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;font:600 1rem/1 var(--body);color:var(--lh-coral);}
.pg-lesson .rx__nl{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:.3em;transition:text-decoration-color .2s ease;}
@media (hover:hover) and (pointer:fine){
  .pg-lesson .rx__next:hover .rx__nl{text-decoration-color:currentColor;}
}
.pg-lesson .rx__next:focus-visible .rx__nl{text-decoration-color:currentColor;}
.pg-lesson .rx__ng i{display:inline-block;font-style:normal;transition:transform .3s var(--lh-ease);}
.pg-lesson .rx__art{transition:scale .7s var(--lh-ease);}
@media (hover:hover) and (pointer:fine){
  .pg-lesson .rx__next:hover .rx__ng i{transform:translateX(5px);}
  .pg-lesson .rx__next:hover .rx__art{scale:1.04;}
}
.pg-lesson .rx__next:focus-visible .rx__ng i{transform:translateX(5px);}
.pg-lesson .rx__next:focus-visible .rx__art{scale:1.04;}
/* the door art: the next lesson's own plate, fully inside the box (the cuff and the artery run off its edge) */
.pg-lesson .rx__art{
  position:absolute;right:clamp(1rem,4vw,3rem);top:1.5rem;bottom:1.5rem;height:calc(100% - 3rem);width:auto;max-width:44%;
  object-fit:contain;pointer-events:none;
}
.pg-lesson .rx__art--sleep{right:-1.5%;top:-6%;height:112%;bottom:auto;}
.pg-lesson .rx__art--lungs{top:1.5rem;bottom:auto;height:calc(100% - 1.5rem + 7%);width:auto;max-width:none;object-fit:initial;}
/* a hard-edged picture panel on the right of the door; the art fills it edge to edge */
.pg-lesson .rx__panel{position:absolute;right:0;top:0;bottom:0;width:40%;overflow:hidden;background:var(--lh-navy);}
.pg-lesson .rx__panel .rx__art{position:absolute;inset:0;right:auto;top:auto;bottom:auto;width:100%;max-width:none;height:100%;object-fit:cover;}
.pg-lesson .rx__art--artery{object-position:42% 50%;}
.pg-lesson .rx__art--cuff{object-position:60% 45%;}
.pg-lesson .rx__credit{margin:0;font:400 .8rem/1.5 var(--body);color:rgb(232 237 244 / .6);max-width:70ch;}
.pg-lesson .rx__credit a{color:rgb(232 237 244 / .8);text-decoration:underline;text-underline-offset:2px;}
@media (hover:hover) and (pointer:fine){
  .pg-lesson .rx__credit a:hover{text-decoration-color:var(--lh-coral);text-decoration-thickness:2px;}
}
.pg-lesson .rx__credit a:focus-visible{outline:2px solid var(--lh-coral);outline-offset:2px;border-radius:2px;}
@media (prefers-reduced-motion:no-preference){
  .js .reveal-sec:not(.is-in) .rx__next{opacity:0;transform:translate3d(28px,0,0);}
  .js .reveal-sec.is-in .rx__next{transition:opacity .7s var(--lh-ease),transform .7s var(--lh-ease);transition-delay:.15s;}
  .pg-lesson .rx__art--breathe{transform-origin:50% 60%;animation:rxBreathe 12s linear infinite;animation-play-state:paused;}
  .pg-lesson .rx__art--cuff{transform-origin:62% 58%;animation:rxCuff 6s ease-in-out infinite;animation-play-state:paused;}
  .pg-lesson .rx__next.is-live .rx__art--breathe,.pg-lesson .rx__next.is-live .rx__art--cuff{animation-play-state:running;}
}
/* four, two, six: in over 4 s, hold 2 s, out over 6 s */
@keyframes rxBreathe{0%{transform:scale(1);}33.333%{transform:scale(1.035);}50%{transform:scale(1.035);}100%{transform:scale(1);}}
@keyframes rxCuff{0%{transform:scale(1);}40%{transform:scale(1.035);}47%{transform:scale(1.035);}100%{transform:scale(1);}}

/* ---------------------------------------------------------------
   6. NARROW SCREENS
   --------------------------------------------------------------- */
@media (max-width:1000px){
  .pg-lesson .lh--breath{--lh-cols:minmax(0,1fr) minmax(0,1fr);}
}
@media (max-width:900px){
  .pg-lesson .lh__inner{grid-template-columns:minmax(0,1fr);gap:1.8rem;}
  .pg-lesson .lh__t{font-size:var(--lh-fs-stack);max-width:none;}
  /* plaque: headline and dek, then the band, then the button */
  .pg-lesson .lh--plaque .lh__inner{grid-template-areas:"top" "h1" "dek" "art" "cta" "meta";grid-template-rows:none;row-gap:0;flex:0 0 auto;}
  .pg-lesson .lh--plaque .lh__t{max-width:none;font-size:var(--lh-fs-stack);text-wrap:balance;}
  .pg-lesson .lh--plaque .lh__d{margin-top:1.2rem;}
  .pg-lesson .lh--plaque .lh__art{margin-top:2rem;margin-bottom:0;}
  .pg-lesson .lh--plaque .lh__cta{margin-top:1.6rem;}
  .pg-lesson .lh--plaque .lh__meta{margin-top:1.1rem;padding-bottom:2.2rem;}
  .pg-lesson .lh--plaque .lh__foot{padding-bottom:0;}
  /* breathing keeps two columns down to 761px so tablets still see the plate in the first screen */
  .pg-lesson .lh--breath .lh__inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.5rem;}
  .pg-lesson .lh--breath .lh__t{font-size:clamp(2.75rem,6vw,3.75rem);}
  /* sleep: the plate first, the dial over its top left, then the words */
  .pg-lesson .lh--sleep .lh__inner{display:flex;flex-direction:column;align-items:stretch;gap:2rem;}
  .pg-lesson .lh--sleep .lh__text{max-width:none;}
  .pg-lesson .lh--sleep .lh__art{
    order:-1;position:relative;inset:auto;margin:-6rem calc(-1 * var(--lh-gut)) 0;height:calc(clamp(430px,58vw,560px) + 6rem);overflow:hidden;
  }
  .pg-lesson .sl-heart{right:-8%;top:-3%;bottom:auto;height:96%;}
  .pg-lesson .sl-stage{--sl-d:min(40%,200px);--sl-top:calc(6rem + .8rem);--sl-left:var(--lh-gut);}
  .pg-lesson .sl-dial{width:min(40%,200px);}
  .pg-lesson .sl-note{top:auto;bottom:.5rem;left:var(--lh-gut);width:calc(100% - 2 * var(--lh-gut));text-align:left;}
  /* the close */
  .pg-lesson .rx__row{grid-template-columns:minmax(0,1fr);align-items:start;}
  .pg-lesson .rx__next{grid-template-columns:minmax(0,1fr);padding:0;min-height:0;}
  .pg-lesson .rx__txt{padding:1.25rem;order:2;}
  .pg-lesson .rx__art--sleep,.pg-lesson .rx__art--lungs{
    position:relative;order:1;inset:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:none;
    height:clamp(220px,62vw,300px);object-fit:contain;
  }
  .pg-lesson .rx__art--lungs{object-position:50% 100%;}
  .pg-lesson .rx__panel{position:relative;order:1;width:100%;height:clamp(220px,62vw,300px);}
  .pg-lesson .rx__cta .k4-btn--primary{width:100%;justify-content:center;}
  .pg-lesson .rx__cta .k4-btn--text{min-height:44px;}
}
@media (max-width:900px){
  .pg-lesson .lh--bp{display:block;padding-bottom:0;}
  .pg-lesson .lh--bp .lh__inner{display:flex;flex-direction:column;align-items:stretch;gap:0;}
  .pg-lesson .lh--bp .lh__text{display:contents;max-width:none;}
  .pg-lesson .lh--bp .lh__top{order:1;}
  .pg-lesson .lh--bp .lh__t{order:2;max-width:none;text-wrap:balance;font-size:var(--lh-fs-stack);}
  .pg-lesson .lh--bp .lh__d{order:3;margin-top:1.2rem;}
  .pg-lesson .lh--bp .lh__art{order:4;position:relative;right:auto;bottom:auto;width:auto;margin:2rem calc(-1 * var(--lh-gut)) 0;}
  .pg-lesson .lh--bp .lh__meta{order:5;}
  .pg-lesson .lh--bp .lh__cta{order:6;padding-bottom:2.4rem;}
  .pg-lesson .bp-panel{position:static;width:auto;min-height:0;margin:1rem var(--lh-gut) 0;}
  .pg-lesson .bp-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;}
  .pg-lesson .bp-row__l{font-size:.95rem;}
  .pg-lesson .bp-row__v b{font-size:1.3rem;}
  .pg-lesson .bp-panel__k{font-size:.9rem;}
  .pg-lesson .lh--bp .lh__foot{padding:1rem var(--lh-gut) 0;justify-content:flex-start;}
  .pg-lesson .lh--bp .lh__meta,.pg-lesson .lh--bp .lh__cta{padding-inline:0;}
}
@media (max-width:760px){
  /* breathing: text, then the plate edge to edge, counter above it, bleeding off the bottom */
  .pg-lesson .lh--breath .lh__inner{grid-template-columns:minmax(0,1fr);gap:1.8rem;}
  .pg-lesson .lh--breath .lh__t{font-size:var(--lh-fs-stack);}
  .pg-lesson .lh--breath .lh__text{padding-bottom:0;}
  .pg-lesson .lh--breath .lh__art{margin-inline:calc(-1 * var(--lh-gut));}
  .pg-lesson .br-count{padding-inline:var(--lh-gut);margin:0 0 1.2rem;max-width:none;}
  .pg-lesson .br-stage{max-width:none;margin-left:0;}
}
@media (max-width:440px){
  /* phones: the container is under 8.5em wide at the 44px minimum, so the measured widths decide the breaks (see 1a and 1d) */
  .pg-lesson .lh--plaque .lh__t{max-width:6.76em;text-wrap:wrap;}
  .pg-lesson .lh--bp .lh__t{max-width:6.7em;text-wrap:wrap;}
}
@media (max-width:700px){
  /* sleep: a smaller plate so the dial never covers it */
  .pg-lesson .lh--sleep .lh__art{height:calc(min(54svh,430px) + 6rem);}
  .pg-lesson .sl-heart{right:-18%;top:-3%;height:84%;}
  /* plaque: the artery turns to run top to bottom so it can fill a phone, with the pinch in the middle of the window */
  .pg-lesson .pl-win{position:relative;width:100vw;height:min(62svh,560px);overflow:hidden;margin-inline:calc(50% - 50vw);}
  .pg-lesson .pl-stage{position:absolute;left:50%;top:50%;width:calc(100vw * 3.25);transform:translate(-50%,-50%) rotate(90deg);}
  .pg-lesson .pl-stage .lh-tag{transform:translate(var(--tx,0),-50%) rotate(-90deg);}
  .pg-lesson .pl-tag--plaque{--y:28%;}
  .pg-lesson .pl-tag--flow{--x:56%;}
  .pg-lesson .lh--plaque .lh__foot{padding-top:.8rem;}
  .js .reveal-sec:not(.is-in) .pl-stage{transform:translate(-50%,-50%) rotate(90deg);}
  /* blood pressure: on a phone the art is cropped to cuff, gauge and stethoscope (about 1.6x larger) */
  .pg-lesson .lh--bp .lh__art{overflow:hidden;}
  .pg-lesson .bp-stage{width:calc(100vw * 1400 / 860);margin-left:calc(-100vw * 540 / 860);}
  .pg-lesson .bp-panel{margin:1rem 0 0 calc(100vw * 540 / 860 + var(--lh-gut));width:calc(100vw - 2 * var(--lh-gut));}
}

/* ---------------------------------------------------------------
   7. REDUCED MOTION: the finished state, nothing hidden, nothing loops
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html.lh-ready .pg-lesson .rfb:not(.lh-in) .dg-draw{stroke-dashoffset:0;}
  html.lh-ready .pg-lesson .rfb:not(.lh-in) .dg-fade{opacity:1;}
  html.lh-ready .pg-lesson .rfb:not(.lh-in) .bb__fill{transform:none;}
  html.lh-ready .pg-lesson .rfb--rupture:not(.lh-in) .pr-img{clip-path:none;}
  html.lh-ready .pg-lesson .rfb--rupture:not(.lh-in) .pr-tag{opacity:1;}
  html.lh-ready .pg-lesson .pl-stat:not(.lh-in) .pl-stat__bar i{transform:none;}
  html.lh-ready .pg-lesson .bp-stage:not(.is-arrived) .bp-row__bar i{transform:none;}
  .pg-lesson .rfb .dg-draw,.pg-lesson .bb__fill,.pg-lesson .pl-stat__bar i,.pg-lesson .rfb--rupture .pr-img{transition:none;}
  .pg-lesson .ib-hl{background-size:100% 100%;transition:none;}
  html.lh-ready .pg-lesson .lede-gauge:not(.lh-in) .lede-gauge__fill{transform:none;}
  .pg-lesson .rd__rail-in,.pg-lesson .rd__rail-in.is-under,.pg-lesson .lede-gauge__fill,.pg-lesson .rx__ng i,.pg-lesson .rx__art,.pg-lesson .rf-lbl,.pg-lesson .rf-arr,.pg-lesson .lh .iback,.pg-lesson .rd__toc a{transition:none;}
  .pg-lesson .rx__next:hover .rx__art,.pg-lesson .rx__next:focus-visible .rx__art{scale:1;}
  .pg-lesson .pl-glow{opacity:.6;}
}

/* ALTERNATION:BEGIN (Dev 2026-10-07: "make alternating sections light and dark so that the paper cut design is smooth and doesnt
   look like its tweaking"). A lesson now runs navy hero, light reading, NAVY references, LIGHT close, navy footer, so every join
   tears between two different grounds (the shared PAPERCUT engine in fable.js draws the tears and papers every box).
   References: navy ground, the heading in paper ink; the rows stay white and become white torn sheets on navy (ink unchanged).
   Close: light ground and navy ink; the text links go deep crimson (coral is 2.6:1 on light); the next lesson card keeps its navy
   (class on-dark in the markup) and becomes a navy torn sheet on the light ground, so its plate keeps the grade it was made for. */
.pg-lesson .rr.sec-dark{background:var(--lh-navy);}
.pg-lesson .rr.sec-dark .irefs__k{color:var(--lh-white);}
.pg-lesson .rx.sec-paper{background:var(--lh-white);}
.pg-lesson .rx.sec-paper :is(.rx__h,.rx__note){color:var(--lh-ink);}
.pg-lesson .rx.sec-paper .rx__cta .k4-btn--text{color:#C9303D;}
.pg-lesson .rx.sec-paper .rx__cta .k4-btn--text::after{background:#C9303D;}
.pg-lesson .rx.sec-paper .rx__cta .k4-btn--text:focus-visible{outline-color:#9C1B27;}
.pg-lesson .rx.sec-paper .rx__credit{color:rgb(11 27 51 / .7);}
.pg-lesson .rx.sec-paper .rx__credit a{color:var(--lh-ink);}
@media (hover:hover) and (pointer:fine){
  .pg-lesson .rx.sec-paper .rx__credit a:hover{text-decoration-color:#C9303D;}
}
.pg-lesson .rx.sec-paper .rx__credit a:focus-visible{outline-color:#9C1B27;}

/* the torn edges are drawn where the bands are measured, so the full bleed bands never rise in with the paragraphs round them
   (a 16px rise left a navy strip and a flat light strip between the band and its tear until the next rebuild) */
.pg-lesson .ibody > p.ipull.mkx-para{opacity:1;transform:none;transition:none;}
/* keep clear of the tears: the rail starts level with the standfirst (not under the hero's tear), and a band's caption starts
   below the band's torn bottom edge (clamp(30px,3.4vw,52px) deep) */
.pg-lesson .rd__rail{top:clamp(3.4rem,7vw,6rem);}
.pg-lesson .rfb__cap{margin-top:clamp(2.4rem,3.6vw,3.4rem);}
/* ALTERNATION:END */

/* PASS1-LESSON:BEGIN (Dev 2026-10-07, the 100x skill on the papercut pages, pass 1)
   1. the references are separate torn slips on the navy, with navy between them (at .8rem their rims met in a jagged dark crack)
   2. the two plate labels on the rupture figure are hidden for real (visibility) until they fade in, so they are never an invisible
      stop for a screen reader or a sweep
   3. blood pressure hero: the four factor rows are boxes, so they are torn paper too (data-paper="on" in the markup); the active
      factor's coral border becomes a coral rim (the engine reads it), and the rows keep their bars and numbers */
.pg-lesson .rr .irefs ol{gap:clamp(1.2rem,2.2vw,1.8rem);}
@media (prefers-reduced-motion:no-preference){
  html.lh-ready .pg-lesson .rfb--rupture:not(.lh-in) .pr-tag{visibility:hidden;}
  .pg-lesson .rfb--rupture.lh-in .pr-tag{visibility:visible;transition:opacity .5s var(--lh-soft) calc(var(--pr-n,6) * .4s + .25s),visibility 0s linear calc(var(--pr-n,6) * .4s + .25s);}
}
.pg-lesson .bp-rows{gap:clamp(.55rem,1.7cqw,1.25rem);}
/* the border colour switches at once, so the engine reads the new colour when the active factor moves (the rim itself eases) */
.pg-lesson .bp-row{transition:none;}
/* 4. the References heading is as wide as its word, so its arrival shine crosses the word instead of 600px of empty navy */
.pg-lesson .irefs__k{width:fit-content;max-width:100%;}
/* PASS1-LESSON:END */

/* PASS2-LESSON:BEGIN (Dev 2026-10-07, the 100x skill, pass 2: what still read unfinished)
   1. the 33 percent numeral sits on the light reading paper: its gradient runs deep crimson to crimson (3.9:1 and up on #F4F7FB),
      never out to coral (2.6:1); it keeps the kit's shine
   2. inner panels that are not controls (the blood pressure panel round the four factor rows) carry data-box="off" in the markup, so
      only the row under the pointer answers with its rim, never the panel round it as well */
.pg-lesson .pl-stat__n.k4-grad{background-image:linear-gradient(100deg,#9C1B27 0%,#C9303D 35%,#E23A46 55%,#C9303D 75%,#9C1B27 100%);}
/* PASS2-LESSON:END */