/* ============================================
   Workers' comp journey pages
   (journey.html, journey-acdf.html)
   Builds on style.css tokens and referrals.css hero/buttons
   ============================================ */

.jr-section {
  scroll-margin-top: 90px;
  padding: clamp(var(--space-12), 6vw, var(--space-20)) 0;
}

.jr-section--alt {
  background: var(--color-surface-2);
}

.jr-intro {
  max-width: 62ch;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: var(--space-10);
}

.jr-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.jr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-light);
  color: var(--color-accent-hover);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.jr-badge--navy {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.jr-badge--green {
  background: #E6F2EA;
  color: #2F6B45;
}

.jr-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
}

.jr-link:hover {
  color: var(--color-accent-hover);
}

.jr-narrow {
  max-width: 880px;
  margin-inline: auto;
}

.jr-h2--spaced {
  margin-top: var(--space-4);
}

.jr-back {
  display: block;
  width: fit-content;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.jr-back:hover {
  color: #E3C677;
}

.jr-scroll {
  overflow-x: auto;
}

/* ---------- At-a-glance strip ---------- */

.jr-glance {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.jr-glance a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  text-decoration: none;
  color: #fff;
}

.jr-glance a::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: #E3C677;
  margin-bottom: var(--space-2);
  box-shadow: 0 0 0 4px rgba(227, 198, 119, 0.2);
}

.jr-glance a::after {
  content: '';
  position: absolute;
  top: calc(var(--space-3) + 5px);
  left: 20px;
  right: 6px;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
}

.jr-glance li:last-child a::after {
  display: none;
}

.jr-glance strong {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
}

.jr-glance span {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
}

.jr-glance a:hover strong {
  color: #E3C677;
}

/* ---------- Flowchart ---------- */

.jflow {
  max-width: 880px;
  margin: 0 auto;
}

.jflow__step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-5);
  padding-bottom: var(--space-8);
}

/* Vertical connector running down the rail */
.jflow__step::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: 0;
  width: 2px;
  background: var(--color-divider);
}

.jflow__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  box-shadow: 0 0 0 6px var(--color-bg);
}

.jflow__num svg {
  width: 24px;
  height: 24px;
}

.jflow__card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 120px;
}

.jflow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.jflow__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--color-text);
  margin-right: auto;
}

.jflow__card p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.jflow__card p + p,
.jflow__card p + ul,
.jflow__card ul + p {
  margin-top: var(--space-3);
}

.jflow__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
}

.jflow__list--single {
  grid-template-columns: 1fr;
}

.jflow__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text);
}

.jflow__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.jflow__more {
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-3);
}

.jflow__more summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.jflow__more[open] summary {
  margin-bottom: var(--space-3);
}

.jflow__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Decision point */
.jflow__decision {
  position: relative;
  scroll-margin-top: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: var(--space-8);
}

.jflow__decision::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: var(--space-8);
  background: var(--color-divider);
}

.jflow__diamond {
  position: relative;
  width: 132px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.jflow__diamond::before {
  content: '';
  position: absolute;
  inset: 18px;
  transform: rotate(45deg);
  background: var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.jflow__diamond svg {
  position: relative;
  width: 50px;
  height: 50px;
  color: #fff;
  transform: rotate(180deg); /* one path splitting into the two branches below */
}

.jflow__question {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  max-width: 28ch;
}

.jflow__decision p {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 52ch;
}

/* Two branches */
.jflow__fork {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  padding-top: var(--space-8);
}

/* Horizontal bar joining the two branches under the decision */
.jflow__fork::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(25% - var(--space-6) / 4);
  right: calc(25% - var(--space-6) / 4);
  height: 2px;
  background: var(--color-divider);
}

.jflow__branch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.jflow__branch::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-8));
  left: 50%;
  width: 2px;
  height: var(--space-8);
  background: var(--color-divider);
}

.jflow__branch-label {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
}

.jflow__branch--yes .jflow__branch-label {
  background: #E6F2EA;
  color: #2F6B45;
}

.jflow__branch--no .jflow__branch-label {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.jflow__branch--yes .jflow__card {
  border-top: 4px solid #4C9A6A;
}

.jflow__branch--no .jflow__card {
  border-top: 4px solid var(--color-primary);
}

.jflow__branch--no .jflow__card:last-child {
  flex: 1 1 auto;
}

/* The shorter "yes" branch continues as a line down to the merge */
.jflow__branch--yes::after {
  content: '';
  flex: 1 1 auto;
  align-self: center;
  width: 2px;
  min-height: var(--space-6);
  margin-top: calc(-1 * var(--space-5));
  background: var(--color-divider);
}

.jflow__branch--no .jflow__card + .jflow__card {
  position: relative;
}

.jflow__branch--no .jflow__card + .jflow__card::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-5));
  left: 50%;
  width: 2px;
  height: var(--space-5);
  background: var(--color-divider);
}

/* Branches rejoin */
.jflow__merge {
  position: relative;
  height: var(--space-10);
}

.jflow__merge::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(25% - var(--space-6) / 4);
  right: calc(25% - var(--space-6) / 4);
  height: 50%;
  border: 2px solid var(--color-divider);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.jflow__merge::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 50%;
  background: var(--color-divider);
}

.jflow__finish {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.jflow__finish .jflow__card {
  border-top: 4px solid var(--color-accent);
}

.jflow__finish .jflow__head {
  justify-content: center;
}

.jflow__finish .jflow__title {
  margin-right: 0;
}

/* ---------- Tabs (recovery by procedure) ---------- */

.jr-tabs {
  margin-top: var(--space-4);
}

.jr-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.jr-tabs__tab {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
}

.jr-tabs__tab[aria-selected="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.jr-tabs__panel p {
  font-size: var(--text-sm);
}

.jr-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.jr-stat strong {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  color: var(--color-accent-hover);
  line-height: 1;
}

.jr-stat span {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

/* ---------- FAQ + CTA ---------- */

.jr-faq {
  max-width: 880px;
  margin: 0 auto;
}

.jr-faq details {
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-5) 0;
}

.jr-faq--wide {
  max-width: none;
  margin-top: var(--space-12);
}

.jr-faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
}

.jr-faq details p {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.jr-cta {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.jr-cta a {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}

.jr-cta a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.jr-cta span {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E3C677;
}

.jr-cta strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.15;
}

.jr-cta p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Procedure page pieces ---------- */

.jr-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}

.jr-split--reverse .jr-figure {
  order: -1;
}

.jr-split--top {
  align-items: start;
}

.jr-split p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-muted);
}

.jr-split p + p {
  margin-top: var(--space-4);
}

.jr-figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.jr-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.jr-figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-text-faint);
}

.jr-hero-figure {
  max-width: 420px;
}

.ref-hero .jr-split p {
  color: rgba(255, 255, 255, 0.88);
}

.jr-facts {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.jr-facts li {
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.jr-facts strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--color-text);
}

.jr-facts span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Interactive recovery timeline */
.jr-timeline__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--stops, 7), minmax(0, 1fr));
  margin-bottom: var(--space-6);
}

.jr-timeline__track::before {
  content: '';
  position: absolute;
  top: 17px;
  left: 7%;
  right: 7%;
  height: 4px;
  border-radius: 2px;
  background: var(--color-divider);
}

.jr-timeline__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-1);
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: center;
}

.jr-timeline__dot {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 4px solid var(--color-bg);
  background: var(--color-border);
  box-shadow: 0 0 0 2px var(--color-border);
  transition: background var(--transition-interactive), box-shadow var(--transition-interactive);
}

.jr-timeline__stop strong {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.jr-timeline__stop small {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
}

.jr-timeline__stop.is-past .jr-timeline__dot {
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent);
}

.jr-timeline__stop[aria-selected="true"] .jr-timeline__dot {
  background: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 8px rgba(14, 54, 103, 0.12);
}

.jr-timeline__stop[aria-selected="true"] strong {
  color: var(--color-primary);
}

.jr-timeline__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  box-shadow: var(--shadow-sm);
}

.jr-timeline__panel h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.jr-timeline__panel > [role="tabpanel"] > p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.jr-timeline__panel .jflow__list {
  grid-template-columns: 1fr;
  max-width: 72ch;
}

.jr-timeline__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
}

.jr-timeline__nav .btn {
  font-size: var(--text-sm);
  font-weight: 600;
}

.jr-timeline__nav .btn:disabled {
  visibility: hidden;
}

/* Return-to-work table */
.jr-rtw {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.jr-rtw th,
.jr-rtw td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: top;
  font-size: var(--text-sm);
  line-height: 1.6;
  border-bottom: 1px solid var(--color-divider);
}

.jr-rtw tr:last-child td {
  border-bottom: 0;
}

.jr-rtw thead th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.jr-rtw td:first-child {
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.jr-rtw td {
  color: var(--color-text);
}

.jr-callout {
  border-left: 4px solid #B4412F;
  background: #FBEDEA;
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}

.jr-callout h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  color: #8A2E20;
  margin-bottom: var(--space-3);
}

.jr-callout ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-5);
}

.jr-callout li {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.jr-callout li::before {
  content: '\2022';
  color: #B4412F;
  font-weight: 700;
  margin-right: var(--space-2);
}

.jr-callout p {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.jr-note {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-faint);
}

.jr-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-md);
}

.jr-video__player,
.jr-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Our thumbnail sits over the YouTube player but lets clicks fall through to it,
   so one click starts playback. It fades out once the video is playing. */
.jr-video__poster {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.jr-video:not(.is-ready) .jr-video__poster {
  pointer-events: auto;
  cursor: pointer;
}

.jr-video.is-playing .jr-video__poster {
  opacity: 0;
  visibility: hidden;
}

.jr-video__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  transition: opacity var(--transition-interactive);
}

.jr-video__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-interactive), background var(--transition-interactive);
}

.jr-video__icon svg {
  width: 30px;
  height: 30px;
  margin-left: 4px;
}

.jr-video:hover .jr-video__poster img {
  opacity: 1;
}

.jr-video:hover .jr-video__icon,
.jr-video:focus-within .jr-video__icon {
  transform: scale(1.08);
  background: var(--color-accent);
}

.jflow__more .jr-video {
  margin-top: var(--space-2);
}


/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .jr-glance {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-4);
  }

  .jr-glance li:nth-child(3) a::after {
    display: none;
  }

  .jr-split {
    grid-template-columns: 1fr;
  }

  .jr-split--reverse .jr-figure {
    order: 0;
  }

  .jr-hero-figure {
    max-width: 320px;
  }
}

@media (max-width: 720px) {
  .jr-glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jr-glance li a::after {
    display: none;
  }

  .jflow__step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--space-3);
  }

  .jflow__step::before {
    left: 19px;
    top: 40px;
  }

  .jflow__num {
    width: 40px;
    height: 40px;
    font-size: var(--text-base);
  }

  .jflow__num svg {
    width: 18px;
    height: 18px;
  }

  .jflow__card {
    padding: var(--space-5);
  }

  .jflow__list,
  .jr-cta,
  .jr-facts,
  .jr-callout ul {
    grid-template-columns: 1fr;
  }

  .jflow__fork {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-top: var(--space-6);
  }

  .jflow__fork::before,
  .jflow__merge::before,
  .jflow__branch--yes::after {
    display: none;
  }

  .jflow__branch::before {
    top: calc(-1 * var(--space-6));
    height: var(--space-6);
  }

  .jflow__merge {
    height: var(--space-8);
  }

  .jflow__merge::after {
    top: 0;
    height: 100%;
  }

  .jr-timeline__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-5);
  }

  .jr-timeline__track::before {
    display: none;
  }

  .jr-rtw td:first-child {
    white-space: normal;
  }
}

/* Two videos side by side */
.jr-video-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.jr-video-pair__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--color-text);
}

.jr-video-pair__title span {
  font-family: var(--font-body, inherit);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.jr-figure figcaption a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 720px) {
  .jr-video-pair {
    grid-template-columns: 1fr;
  }
}

.jr-figure--portrait img {
  width: auto;
  max-width: 100%;
  max-height: 620px;
  margin-inline: auto;
}

.jr-tabs__panel .jr-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

/* Procedure links inside the surgery card */
.jflow__procedures {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.jflow__procedures a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  text-decoration: none;
  background: var(--color-surface-2);
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}

.jflow__procedures a:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

.jflow__procedures strong {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
}

.jflow__procedures strong::after {
  content: ' \2192';
}

.jflow__procedures span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* "Medically reviewed by" credit under the page introduction */
.jr-reviewed {
  max-width: 78ch;
  margin: calc(-1 * var(--space-4)) 0 var(--space-6);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.jr-reviewed a {
  color: #E3C677;
  font-weight: 600;
  text-decoration: none;
}

.jr-reviewed a:hover {
  text-decoration: underline;
}