/* =========================================================
   Patient Education — only what this page does not share with
   the other product pages. Everything general lives in
   ../products.css under pr-.

   THE PHONE IS THE PAGE. Patient Education is the one product
   a patient touches directly, so the product UI here is a
   patient's phone rather than a staff console, and it appears
   four times: the question before the visit, the summary after
   the consultation, the reminders that follow, and the chronic
   conversation. One component, .pe-phone, with size modifiers.
   Nothing in it is a working control — it is a picture of the
   product, so the audio row is rendered in its playing state
   rather than as a button that would do nothing.
   ========================================================= */

/* ---------- the phone ---------- */
.pe-phone { width: calc(360 * var(--u)); border: 1px solid var(--rule); border-radius: calc(28 * var(--u)); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.pe-phone.lg { width: calc(400 * var(--u)); }
.pe-phone.wide { width: 100%; max-width: calc(760 * var(--u)); border-radius: var(--r-card); }
.pe-phone__top { display: flex; align-items: center; gap: calc(11 * var(--u)); padding: calc(15 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--rule); background: #fcfcfb; }
.pe-phone__top > div > b { display: block; font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
/* > div > span, not `span`: a bare descendant selector is (0,1,1) and
   silently beats .pe-mark (0,1,0), which turned the mark into a flex
   row and knocked its letter out of the centre */
.pe-phone__top > div > span { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(2 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--muted); }
.pe-mark { display: grid; place-items: center; flex: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--lime); font-size: calc(13 * var(--u)); font-weight: 700; }
.pe-dot { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--lime-ico); }
.pe-phone__body { display: grid; gap: calc(12 * var(--u)); padding: calc(18 * var(--u)); background: var(--grey); }
.pe-phone.wide .pe-phone__body { gap: calc(14 * var(--u)); }

/* ---------- conversation ---------- */
/* block + fit-content, not an inline span: an inline bubble whose text
   wraps paints one background box per line, offset from each other,
   and spills out of whatever holds it. margin-left:auto rather than
   justify-self so it aligns the same inside a grid and outside one. */
.pe-bub { display: block; width: fit-content; max-width: 88%; padding: calc(13 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); }
.pe-bub.out { margin-left: auto; border-bottom-right-radius: calc(5 * var(--u)); background: var(--ink); color: #fff; }
.pe-bub.in { margin-right: auto; border-bottom-left-radius: calc(5 * var(--u)); border: 1px solid var(--rule); background: #fff; }
.pe-bub.sm { max-width: 100%; margin: 0; font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); }
.pe-by { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-bottom: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lime-ink); }
.pe-by .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.pe-more { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 600; color: var(--lime-ink); }
.pe-more .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.pe-bub .pe-more { display: flex; }

.pe-typing { justify-self: start; display: inline-flex; gap: calc(5 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: calc(16 * var(--u)); border-bottom-left-radius: calc(5 * var(--u)); background: #fff; }
.pe-typing i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--divider); }

.pe-chips { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); }
.pe-chips span { padding: calc(7 * var(--u)) calc(13 * var(--u)); border: 1px solid var(--lime-ico); border-radius: 999px; background: var(--lime-soft); font-size: calc(13 * var(--u)); font-weight: 600; color: var(--lime-ink); }
.pe-handoff { display: flex; align-items: center; gap: calc(8 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 1px solid var(--rule); font-size: calc(13.5 * var(--u)); font-weight: 600; color: var(--muted); }
.pe-handoff .i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: var(--lime-ink); }

/* ---------- the visit summary ---------- */
.pe-summary { display: grid; gap: calc(12 * var(--u)); }
.pe-summary > div { padding: calc(14 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }
.pe-summary dt { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.pe-summary dt .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--lime-ink); }
.pe-summary dd { margin-top: calc(6 * var(--u)); font-size: calc(15.5 * var(--u)); line-height: calc(23 * var(--u)); font-weight: 500; }

/* the audio row is a picture of playback, not a control: there is no
   audio to play, so it carries no button affordance */
.pe-audio { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--lime-ico); border-radius: var(--r); background: var(--lime-soft); }
.pe-audio b { font-size: calc(14 * var(--u)); font-weight: 600; color: var(--lime-ink); }
.pe-audio__play { display: grid; place-items: center; flex: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: var(--lime); color: var(--ink); }
.pe-audio__play .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.pe-audio__t { margin-left: auto; font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--lime-ink); font-variant-numeric: tabular-nums; }
.pe-wave { display: flex; align-items: center; gap: calc(3 * var(--u)); height: calc(20 * var(--u)); }
.pe-wave i { width: calc(2.5 * var(--u)); height: 30%; border-radius: 999px; background: var(--lime-ink); opacity: .55; }
.pe-note { font-size: calc(12.5 * var(--u)); line-height: calc(19 * var(--u)); color: var(--muted); }

/* ---------- reminder cards inside the phone ---------- */
.pe-card { padding: calc(15 * var(--u)) calc(17 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }
.pe-card__t { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pe-card__t .i { color: var(--lime-ink); }
.pe-card p + p, .pe-card__t + p { margin-top: calc(6 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: calc(22 * var(--u)); color: var(--muted); }

/* ---------- hero: the patient, and what is on her phone ---------- */
.pe-hero__stage { position: relative; min-height: calc(480 * var(--u)); }
.pe-person { position: absolute; left: calc(-16 * var(--u)); bottom: calc(-52 * var(--u)); width: calc(300 * var(--u)); }
.pe-person img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, .8) 82%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, .8) 82%, rgba(0, 0, 0, 0) 100%);
}
.pe-hero__phone { position: relative; margin-left: auto; }

/* ---------- before the visit ---------- */
.pe-before { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(64 * var(--u)); align-items: center; }
.pe-asks { display: grid; gap: calc(2 * var(--u)); border-top: 1px solid var(--rule); }
.pe-asks > li { display: grid; gap: calc(6 * var(--u)); padding: calc(20 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.pe-asks b { font-family: var(--font-head); font-size: calc(22 * var(--u)); line-height: calc(29 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.pe-asks span { max-width: calc(520 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(25 * var(--u)); color: var(--muted); }

.pe-safety { padding-top: calc(72 * var(--u)); margin-top: calc(72 * var(--u)); border-top: 1px solid var(--rule); }
.pe-fork { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: calc(44 * var(--u)); }
.pe-fork::before { content: ""; position: absolute; top: calc(7 * var(--u)); left: calc(8 * var(--u)); right: calc(100% / 4 - 8 * var(--u)); height: 2px; background: var(--divider); }
.pe-fork::after { content: ""; position: absolute; top: calc(7 * var(--u)); left: calc(8 * var(--u)); width: 0; height: 2px; background: var(--lime-ico); transition: width 1.6s var(--ease); }
.pe-fork.is-in::after { width: calc(100% - 100% / 4); }
.pe-fork > li { display: grid; justify-items: start; gap: calc(13 * var(--u)); padding-right: calc(22 * var(--u)); opacity: .4; transition: opacity .5s var(--ease); }
.pe-fork.is-in > li { opacity: 1; transition-delay: calc(var(--i) * 190ms); }
.pe-fork i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; transition: border-color .5s var(--ease), background .5s var(--ease); }
.pe-fork.is-in .on i { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.pe-fork.is-in .split i { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.pe-fork.is-in .warn i { border-color: var(--amber-ink); background: var(--amber); }
.pe-fork b { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pe-fork > li > span { font-size: calc(14 * var(--u)); color: var(--muted); }
.pe-fork .warn b { color: var(--amber-ink); }

/* ---------- during the visit ---------- */
.pe-during { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(56 * var(--u)); align-items: center; }
.pe-scene img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--r-card); }
.pe-scene figcaption { margin-top: calc(16 * var(--u)); max-width: calc(520 * var(--u)); font-size: calc(15.5 * var(--u)); line-height: calc(24 * var(--u)); color: var(--muted); }

/* ---------- after the visit ---------- */
.pe-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.pe-track::before { content: ""; position: absolute; top: calc(7 * var(--u)); left: calc(8 * var(--u)); right: calc(100% / 5 - 8 * var(--u)); height: 2px; background: var(--divider); }
.pe-track::after { content: ""; position: absolute; top: calc(7 * var(--u)); left: calc(8 * var(--u)); width: 0; height: 2px; background: var(--lime-ico); transition: width 1.8s var(--ease); }
.pe-track.is-in::after { width: calc(100% - 100% / 5); }
.pe-track > li { display: grid; justify-items: start; gap: calc(12 * var(--u)); padding-right: calc(22 * var(--u)); opacity: .4; transition: opacity .5s var(--ease); }
.pe-track.is-in > li { opacity: 1; transition-delay: calc(var(--i) * 190ms); }
.pe-track > li > i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; transition: border-color .5s var(--ease), background .5s var(--ease); }
.pe-track.is-in .on > i { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.pe-ic { display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(10 * var(--u)); border: 1px solid var(--rule); background: #fff; color: var(--lime-ink); }
.pe-track b { font-size: calc(16.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pe-track > li > span:last-child { font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: var(--muted); }
.pe-phone.wide { margin-inline: auto; }

/* ---------- ongoing care ---------- */
.pe-chronic { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(64 * var(--u)); align-items: center; }
.pe-portrait img { width: calc(120 * var(--u)); height: calc(120 * var(--u)); object-fit: cover; border-radius: 50%; border: calc(4 * var(--u)) solid #fff; box-shadow: 0 0 0 1px var(--rule); }
.pe-caps { display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)); margin-top: calc(30 * var(--u)); }
.pe-caps > li { padding: calc(8 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(14 * var(--u)); font-weight: 600; color: var(--muted); }

/* ---------- content engine ---------- */
.pe-engine { display: grid; justify-items: center; gap: calc(14 * var(--u)); }
.pe-src { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(10 * var(--u)); width: 100%; }
.pe-src > li { padding: calc(14 * var(--u)) calc(10 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; font-size: calc(14 * var(--u)); font-weight: 600; text-align: center; opacity: .45; transform: translateY(calc(-8 * var(--u))); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.pe-engine.is-in .pe-src > li { opacity: 1; transform: none; transition-delay: calc(var(--i) * 100ms); }
.pe-converge { position: relative; width: 100%; height: calc(42 * var(--u)); }
.pe-converge::before { content: ""; position: absolute; top: calc(20 * var(--u)); left: calc(100% / 12); right: calc(100% / 12); height: 2px; background: var(--divider); }
.pe-converge i { position: absolute; top: 0; width: 2px; height: calc(21 * var(--u)); background: var(--divider); }
.pe-converge i:nth-child(1) { left: calc(100% / 12); }
.pe-converge i:nth-child(2) { left: calc(100% * 3 / 12); }
.pe-converge i:nth-child(3) { left: calc(100% * 5 / 12); }
.pe-converge i:nth-child(4) { left: calc(100% * 7 / 12); }
.pe-converge i:nth-child(5) { left: calc(100% * 9 / 12); }
.pe-converge i:nth-child(6) { right: calc(100% / 12); }
.pe-converge::after { content: ""; position: absolute; top: calc(20 * var(--u)); left: calc(50% - 1px); bottom: 0; width: 2px; background: var(--lime-ico); }
.pe-node { display: inline-flex; align-items: center; gap: calc(11 * var(--u)); padding: calc(14 * var(--u)) calc(28 * var(--u)); border-radius: 999px; background: var(--lime); font-family: var(--font-head); font-size: calc(23 * var(--u)); font-weight: 500; letter-spacing: -.025em; }
.pe-node.out { background: var(--ink); color: #fff; }
.pe-node .i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.pe-node.out .i { color: var(--lime); }
.pe-stem { width: 2px; height: calc(30 * var(--u)); background: linear-gradient(var(--lime-ico), var(--divider)); }
.pe-out { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(9 * var(--u)); margin-top: calc(6 * var(--u)); }
.pe-out > li { padding: calc(8 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(14 * var(--u)); font-weight: 600; color: var(--muted); }

.pe-example { max-width: calc(900 * var(--u)); padding: calc(32 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }
.pe-example .pr-h3 { margin-top: calc(8 * var(--u)); }
.pe-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(16 * var(--u)); margin-top: calc(24 * var(--u)); }
.pe-steps > li { display: grid; align-content: start; gap: calc(6 * var(--u)); padding: calc(18 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: var(--soft); }
.pe-steps .n { font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: .08em; color: var(--lime-ink); }
.pe-steps b { font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pe-steps > li > span:last-child { font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: var(--muted); }
.pe-example__note { margin-top: calc(20 * var(--u)); font-size: calc(15 * var(--u)); color: var(--muted); }

/* ---------- four moments ---------- */
.pe-moments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(20 * var(--u)); }
.pe-moments > li { display: grid; align-content: start; gap: calc(14 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }
.pe-snip { padding: calc(14 * var(--u)); border-radius: var(--r); background: var(--grey); }
/* all four snippets are the same width, so a short question and a long
   one read as the same component rather than two different ones */
.pe-snip .pe-bub { width: 100%; }

/* ---------- human + AI chain ---------- */
.pe-chain { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.pe-chain::before { content: ""; position: absolute; top: calc(7 * var(--u)); left: calc(8 * var(--u)); right: calc(100% / 4 - 8 * var(--u)); height: 2px; background: var(--divider); }
.pe-chain::after { content: ""; position: absolute; top: calc(7 * var(--u)); left: calc(8 * var(--u)); width: 0; height: 2px; background: var(--lime-ico); transition: width 1.6s var(--ease); }
.pe-chain.is-in::after { width: calc(100% - 100% / 4); }
.pe-chain > li { display: grid; justify-items: start; gap: calc(14 * var(--u)); padding-right: calc(22 * var(--u)); opacity: .4; transition: opacity .5s var(--ease); }
.pe-chain.is-in > li { opacity: 1; transition-delay: calc(var(--i) * 190ms); }
.pe-chain i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; transition: border-color .5s var(--ease), background .5s var(--ease); }
.pe-chain.is-in .on i { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.pe-chain b { font-family: var(--font-head); font-size: calc(24 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.pe-chain > li > span { font-size: calc(15 * var(--u)); color: var(--muted); }

/* ---------- Patient OS row ---------- */
.pe-os { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(12 * var(--u)); }
.pe-os > li > * { display: grid; align-content: start; gap: calc(8 * var(--u)); height: 100%; padding: calc(22 * var(--u)) calc(20 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; transition: border-color .2s var(--ease), background .2s var(--ease); }
.pe-os a:hover { border-color: var(--lime-ico); background: var(--lime-soft); }
.pe-os .i { color: var(--faint); }
.pe-os b { font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.pe-os span span, .pe-os a span { font-size: calc(14.5 * var(--u)); line-height: calc(22 * var(--u)); color: var(--muted); }
.pe-os .is-on > span { border-color: var(--lime-ico); background: var(--lime); }
.pe-os .is-on .i, .pe-os .is-on span span { color: var(--lime-ink); }

/* ---------- previous / next ---------- */
.pe-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)); max-width: calc(880 * var(--u)); margin: calc(56 * var(--u)) auto 0; text-align: left; }
.pe-nav a { display: grid; gap: calc(6 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; transition: border-color .2s var(--ease), background .2s var(--ease); }
.pe-nav a:hover { border-color: var(--lime-ico); background: var(--lime-soft); }
.pe-nav b { font-family: var(--font-head); font-size: calc(22 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.pe-nav a > span:last-child { font-size: calc(15 * var(--u)); color: var(--muted); }
.pe-nav__next { text-align: right; justify-items: end; }
.pe-nav__next .pr-k { flex-direction: row-reverse; }

/* =========================================================
   SCREEN MOTION (§9.6) — the phones show themselves working
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .pr-js .pe-phone [data-s] { opacity: 0; transform: translateY(calc(8 * var(--u))); }
  .pr-js .pe-phone.is-played [data-s] { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .pr-js .pe-phone.is-played [data-s="1"] { transition-delay: .5s; }
  .pr-js .pe-phone.is-played [data-s="2"] { transition-delay: 1.35s; }
  .pr-js .pe-phone.is-played [data-s="3"] { transition-delay: 1.8s; }
  .pr-js .pe-phone.is-played [data-s="4"] { transition-delay: 2.5s; }
  .pr-js .pe-phone.is-played [data-s="5"] { transition-delay: 2.9s; }

  /* the typing indicator stands down once the answer has landed */
  .pr-js .pe-phone.is-played .pe-typing { animation: peGone .3s linear 1.35s both; }
  @keyframes peGone { to { opacity: 0; height: 0; padding: 0; border-width: 0; overflow: hidden; } }
  .pe-typing i { animation: peBlink 1.2s ease-in-out infinite; }
  .pe-typing i:nth-child(2) { animation-delay: .18s; }
  .pe-typing i:nth-child(3) { animation-delay: .36s; }
  @keyframes peBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

  /* the waveform moves, because the row is drawn mid-playback */
  .pe-wave i { animation: peWave 1.5s ease-in-out infinite; }
  .pe-wave i:nth-child(2n) { animation-delay: .12s; }
  .pe-wave i:nth-child(3n) { animation-delay: .26s; }
  .pe-wave i:nth-child(5n) { animation-delay: .4s; }
  @keyframes peWave { 0%, 100% { height: 26%; } 50% { height: 92%; } }
}

/* =========================================================
   Below 1180 --u is 1px. Stack, don't shrink (§10).
   ========================================================= */
@media (max-width: 1179px) {
  .pe-phone, .pe-phone.lg { width: 100%; max-width: 420px; margin-inline: auto; }
  .pe-phone.wide { max-width: none; }

  .pe-hero__stage { min-height: 0; margin-top: 32px; display: grid; justify-items: center; }
  .pe-person { position: static; width: min(58%, 220px); }
  .pe-hero__phone { margin: -22px 0 0; }

  .pe-before, .pe-during, .pe-chronic { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .pe-asks b { font-size: 19px; line-height: 26px; }
  .pe-asks span { max-width: none; font-size: 15px; line-height: 23px; }
  .pe-safety { margin-top: 44px; padding-top: 44px; }
  .pe-scene figcaption { max-width: none; font-size: 15px; }
  .pe-portrait img { width: 92px; height: 92px; }

  /* every rail turns vertical */
  .pe-fork, .pe-track, .pe-chain { grid-auto-flow: row; grid-template-columns: none; grid-auto-columns: auto; padding-left: 8px; }
  .pe-fork::before, .pe-track::before, .pe-chain::before { top: 9px; bottom: 9px; left: 8px; right: auto; width: 2px; height: auto; }
  .pe-fork::after, .pe-track::after, .pe-chain::after { top: 9px; left: 8px; width: 2px; height: 0; transition: height 1.7s var(--ease); }
  .pe-fork.is-in::after { width: 2px; height: calc(100% - 100% / 4); }
  .pe-track.is-in::after { width: 2px; height: calc(100% - 100% / 5); }
  .pe-chain.is-in::after { width: 2px; height: calc(100% - 100% / 4); }
  .pe-fork > li, .pe-track > li, .pe-chain > li { grid-template-columns: 16px minmax(0, 1fr); grid-auto-flow: column; align-items: center; gap: 16px; padding: 12px 0; }
  .pe-fork > li > b, .pe-fork > li > span, .pe-chain > li > b, .pe-chain > li > span { grid-column: 2; }
  .pe-track > li > .pe-ic, .pe-track > li > b, .pe-track > li > span:last-child { grid-column: 2; }
  .pe-track > li > .pe-ic { width: 30px; height: 30px; }
  .pe-chain b { font-size: 20px; }

  .pe-src { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-converge { height: 28px; }
  .pe-converge::before, .pe-converge i { display: none; }
  .pe-node { font-size: 18px; padding: 12px 20px; text-align: center; }
  .pe-example { padding: 20px; }
  .pe-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pe-moments { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pe-moments > li { padding: 18px; }

  .pe-os { grid-auto-columns: 74%; overflow-x: auto; margin: 32px -22px 0; padding: 0 22px 6px; scrollbar-width: none; }
  .pe-os::-webkit-scrollbar { display: none; }

  .pe-nav { grid-template-columns: minmax(0, 1fr); max-width: none; margin-top: 36px; }
  .pe-nav a { padding: 18px; }
  .pe-nav__next { text-align: left; justify-items: start; }
  .pe-nav__next .pr-k { flex-direction: row; }
  .pe-nav b { font-size: 19px; }
}