/* Only the presentation changes for the homepage. Phone geometry and timeline
   remain the approved prototype, isolated from the website's legacy cascade. */
body[data-home-embed] { background: transparent; }
body[data-home-embed]::before { display: none; }
/* Cap the visible card independently of the iframe viewport so tightening its
   side gutters never selects a smaller phone breakpoint. */
main { max-width: 314px; padding: 0 2px 8px; }
.story {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 18px 14px 22px;
  border: 1px solid #dbe5f3;
  border-radius: 28px;
  background: linear-gradient(145deg, #f6faff, #edf4fe);
  overflow: hidden;
  transition: border-color 450ms var(--ease), box-shadow 450ms var(--ease);
}
/* Follow the existing chapter state, including scrubbing and manual selection.
   Only the outer map card changes; the source-app offer stays neutral. */
main:has([data-chapter="compare"][aria-current="step"]) .story {
  border-color: var(--purple);
  box-shadow: inset 0 0 0 1px #7047eb55;
}
.story::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/assets/generated/rg-map-atmosphere-1536x1024.webp') center / cover;
  opacity: .28;
  pointer-events: none;
}
.narrative { width: 100%; padding: 0; text-align: center; }
.section-label, .narrative-note, .caption .chapter-number, .caption-tags { display: none; }
.captions { display: grid; height: auto; }
/* All captions share one grid cell. The longest caption sets a stable header
   height, without the old fixed-height spacer above a separate phone card. */
.caption { position: relative; inset: auto; grid-area: 1 / 1; align-self: start; }
.caption h2 { font-size: 22px; line-height: 1.17; margin: 0 0 8px; }
.caption p { font-size: 11px; line-height: 1.5; max-width: 365px; margin: auto; }
.visual { width: 100%; }
.scene {
  --phone-width: 344px;
  --phone-height: 618px;
  --phone-scale: .72;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: start center;
  min-height: 0;
  width: 100%;
  height: calc(var(--phone-height) * var(--phone-fit, var(--phone-scale)));
}
.scene-orbit, .scene-label { display: none; }
/* Scale the complete authored phone, not its frame alone. Explicit scene
   height removes the unscaled layout footprint without clipping any scene. */
.phone-wrap {
  width: var(--phone-width);
  max-width: none;
  height: var(--phone-height);
  margin: 0;
  transform: scale(var(--phone-fit, var(--phone-scale)));
  transform-origin: center top;
}
.transport { margin-top: 8px; padding: 8px 12px; border-radius: 18px; }
.chapter-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 8px; }
.chapter-button { min-height: 44px; }
.chapter-button > span:first-child { font-size: 9px; gap: 4px; }
.chapter-button small { display: none; }
.chapter-button > i { margin-top: 7px; }
.playback { gap: 10px; margin-top: 0; }
.playback button { min-height: 44px; padding: 0 10px; }
.demo-details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #5c6d83;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.demo-details > summary::-webkit-details-marker { display: none; }
.demo-details > summary::after { content: '+'; color: var(--blue); font-size: 16px; }
.demo-details[open] > summary::after { content: '−'; }
.demo-details > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.demo-details[open] { padding-bottom: 6px; }
.study-disclosure, .tax-source { font-size: 9px; line-height: 1.55; color: #5c6d83; }
@media (max-width: 389px) {
  .story { padding: 16px 8px 20px; border-radius: 24px; }
  .scene { --phone-width: 312px; --phone-height: 566px; --phone-scale: .78; }
  .caption h2 { font-size: 21px; }
  .caption p { font-size: 10.5px; }
  .chapter-button > span:first-child { font-size: 8px; }
  .timecode { display: none; }
}
@media (max-width: 340px) {
  .scene { --phone-width: 294px; --phone-height: 535px; --phone-scale: .8; }
}
@media (max-width: 310px) {
  .story { padding-inline: 4px; }
  .scene { --phone-width: 278px; --phone-height: 510px; --phone-scale: .82; }
  .chapter-button > span:first-child { font-size: 7.5px; }
  .narrative { padding-inline: 4px; }
}
/* Keep the larger desktop phone centered beneath its caption, with symmetric
   gutters. The whole phone scales together, including its overlays and taps. */
@media (min-width: 500px) {
  main { max-width: 360px; }
  .story {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 14px 18px;
  }
  .narrative { text-align: center; }
  .caption h2 { font-size: 22px; }
  .caption p { font-size: 12px; line-height: 1.55; max-width: 460px; margin: auto; }
  .scene { --phone-scale: .88; }
  .visual { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .story { transition: none; }
}