.experience-stage {
  position: relative;
  width: min(1080px, calc(100% - 32px));   /* Max, Jul 19: demo pulled in from 1440px */
  margin: 0 auto;
  padding: 0;
  min-height: 720px;
}
.experience-fallback { display: grid; justify-items: center; gap: 20px; }
.experience-fallback[hidden] { display: none; }
.experience-fallback img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  display: block;
  height: auto;
  object-fit: cover;
  background: #171719;
}
[data-experience-host]:not(:empty) + template,
[data-experience-host]:not(:empty) ~ template { display: none; }
.mobile-aha {
  display: grid;
  justify-items: start;
  gap: 16px;
  max-width: 680px;
  margin: 0 auto;
  /* D115: 60px of dead air above the kicker pushed the headline down a
     screen that has none to spare */
  padding: 24px 0 44px;
}
.mobile-aha h2 {
  font-size: clamp(40px, 11vw, 68px);
  line-height: .98;
  letter-spacing: -.055em;
}
.mobile-aha > p { color: var(--secondary); font-size: 17px; line-height: 1.55; }
/* D115: a thumb-width button in a full-width column read as an afterthought */
.mobile-aha .cta { width: 100%; margin-top: 8px; }
.category-reset-copy { color: var(--text) !important; font-weight: 650; }
.handoff-microcopy,
.handoff-status { font-size: 13px !important; }
.handoff-fallback {
  display: grid;
  justify-items: start;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
}
.handoff-fallback[hidden] { display: none; }
.handoff-fallback input { width: 100%; min-height: 44px; margin: 8px 0; }
.handoff-url {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}
.handoff-url:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.handoff-mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.handoff-mail:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* D112 (Max: "the site dimensions are a problem - too big"): the editorial
   scale pulled in ~30% - presence without the billboard */
.editorial-stage { padding: clamp(72px, 8vw, 120px) 0; }
.editorial-copy { max-width: 980px; }
.editorial-stage h2 {
  max-width: 1100px;
  font-size: clamp(34px, 4.2vw, 56px);   /* D112 pass 3 (Max): was 104px, then 76px */
  line-height: 1.02;
  letter-spacing: -.04em;
}
.editorial-stage p {
  max-width: 720px;
  margin-top: 22px;
  color: var(--secondary);
  font-size: 18px;
  line-height: 1.65;
}
.editorial-stage .kicker { margin-top: 0; color: var(--accent-text); font-size: 12px; line-height: 1; }
.editorial-copy > .cta { margin-top: 30px; }
.stage-research,
.stage-local { color: rgba(255,255,255,.93); background: #131315; }
.stage-research p,
.stage-local p { color: rgba(255,255,255,.58); }
.stage-research .kicker,
.stage-local .kicker { color: #a77cff; }
.mechanism,
.research-receipts,
.local-pipeline {
  list-style: none;
  margin-top: 56px;
  display: grid;
  gap: 16px;
}
.mechanism,
.local-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mechanism li,
.local-pipeline li,
.research-receipts article {
  padding: 26px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(255,255,255,.045);
}
.mechanism strong,
.local-pipeline strong { display: block; margin-bottom: 12px; }
.mechanism span,
.local-pipeline span { color: rgba(255,255,255,.58); line-height: 1.5; }
.research-receipts article {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 24px;
}
.research-receipts article > strong { font-size: 38px; color: #a77cff; }   /* D112 */
.research-receipts article p { margin: 0; font-size: 16px; }
.research-receipts article a { color: rgba(255,255,255,.7); }
.evidence-boundary { font-size: 13px !important; color: rgba(255,255,255,.46) !important; }
.coexistence-layout {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 64px;
  align-items: center;
}
.stage-compatibility a { color: var(--accent-text); }
.integration-icons { list-style: none; display: grid; gap: 14px; }
.integration-icons li {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 16px;
  min-height: 72px;
}
/* all three are full-bleed iOS app-icon squircles - one footprint, one corner
   radius so they read as a matched set regardless of each PNG's baked corners */
.integration-icons img { width: 56px; height: 56px; object-fit: cover; border-radius: 13px; }
.endorsement-note { grid-column: 1 / -1; font-size: 12px !important; }
.mobile-story { display: none; }
.progress-instrument {
  margin-top: 50px;
  padding: 34px;
  border: 1px solid var(--hairline);
  border-radius: 26px;
  background: linear-gradient(180deg, var(--raised), var(--plane));
  box-shadow: var(--shadow-big);
}
.instrument-label { color: var(--tertiary); font-size: 12px; }
.progress-instrument ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 36px;
  gap: 18px;
}
/* the stagger is layout (margin), not transform - transforms overflowed the
   card because they never grow the container */
.progress-instrument li {
  min-height: 180px;
  padding: 24px;
  border-radius: 18px;
  background: var(--chip-bg);
}
.progress-instrument li:nth-child(2) { margin-top: 18px; }
.progress-instrument li:nth-child(3) { margin-top: 36px; }
.progress-instrument strong,
.progress-instrument span { display: block; }
.progress-instrument span { margin-top: 10px; color: var(--secondary); }
.pi-num {
  display: block;
  margin-bottom: 12px;
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pi-num small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--tertiary); margin-left: 6px; }
.progress-instrument li:nth-child(3) .pi-num { color: var(--accent-text); }
.cta.desktop-only-cta { display: none; }
.touch-only-cta { min-height: 44px; }
.nav-handoff { position: relative; }
.nav-handoff > .cta { margin: 0; white-space: nowrap; }
.nav-handoff > .handoff-fallback {
  position: absolute;
  z-index: 50;
  top: calc(100% + 10px);
  right: 0;
  width: min(300px, calc(100vw - 32px));
  color: var(--text);
  background: var(--raised);
  box-shadow: var(--shadow-card);
}
.mobile-price-handoff { margin-top: 24px; justify-items: center; gap: 12px; }
.mobile-price-handoff > p { max-width: 480px; }
#pricing .fine { color: var(--secondary) !important; }

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .experience-stage {
    display: grid;
    min-height: 0;
  }
  .experience-stage::before,
  .experience-stage > [data-experience-fallback],
  .experience-stage > [data-experience-host] { grid-area: 1 / 1; }
  .experience-stage::before {
    content: "";
    width: calc(100% - 48px);
    margin: 44px 24px 0;
    aspect-ratio: 756 / 491;
  }
  .experience-stage > [data-experience-fallback] {
    position: relative;
    width: calc(100% - 48px);
    margin: 44px 24px 0;
    aspect-ratio: 756 / 491;
    overflow: hidden;
    border-radius: 20px;
  }
  .experience-stage > [data-experience-fallback] img {
    height: 100%;
    aspect-ratio: 756 / 491;
  }
  .experience-stage > [data-experience-fallback] .cta {
    position: absolute;
    right: 24px;
    bottom: 24px;
  }
  .cta.desktop-only-cta { display: inline-block; }
  .touch-only-cta,
  .cta.touch-only-cta { display: none; }
}

@media (max-width: 899px), (hover: none), (pointer: coarse) {
  .hero.wrap { display: none; }
  .experience-stage { width: min(100% - 24px, 680px); min-height: 0; }
  /* D112 pass 2: mobile pulled in to match the desktop restraint - a 15-word
     h2 at 12vw ate a full screen */
  .editorial-stage { padding: 52px 0; }
  .editorial-stage h2 { font-size: clamp(34px, 9vw, 52px); }
  .editorial-stage p { margin-top: 16px; }
  .mechanism,
  .local-pipeline,
  .coexistence-layout,
  .progress-instrument ol { grid-template-columns: minmax(0, 1fr); }
  .research-receipts article { grid-template-columns: minmax(0, 1fr); }
  /* D115: stacked, the three steps and the three receipts became six
     identical rounded cards in a row, 2.2 screens of the same shape. The
     steps lose their box and read as a list, so the receipts are the only
     cards left and the two groups stop competing. */
  .mechanism,
  .research-receipts,
  .local-pipeline { margin-top: 30px; }
  .mechanism { gap: 0; }
  .mechanism li {
    padding: 15px 0;
    border: 0;
    border-top: 1px solid var(--hairline);
    border-radius: 0;
    background: none;
  }
  .mechanism strong { margin-bottom: 4px; }
  .research-receipts article { padding: 20px; gap: 8px; }
  .research-receipts article > strong { font-size: 32px; line-height: 1.1; }
  /* D115: 18 tap targets were under Apple's 44px minimum, the whole footer
     among them. The links left under 44px are inline inside running
     sentences (citations, "3-day full trial"), where a 44px box would break
     the line box it sits in. The standalone controls get the real fix: the
     theme toggle keeps its 34px circle and grows only its hit area. */
  footer .row a { display: inline-flex; align-items: center; min-height: 44px; }
  .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .theme-btn { position: relative; }
  .theme-btn::after { content: ""; position: absolute; inset: -5px; }
  /* D115: the story was four full-height screens for four sentences
     (min-height:100svh each = 3368px, 4.1 phone screens). Panels now size to
     their content and the sequence reads as one continuous story. */
  .mobile-story { display: block; }
  .mobile-story article {
    padding: 30px 20px 34px;
    display: grid;
    gap: 16px;
    overflow: clip;
  }
  .mobile-story img {
    width: calc(100% + 40px);
    margin-inline: -20px;      /* full bleed: the stills are the proof, give them the screen */
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0;
  }
  /* D115: two of the four stills frame their subject in dead space (catch
     fills 44% of its square, progress 37%), which is why they read as an
     empty black box with a speck in it. Crop those two to their content
     rather than re-rendering the assets. Measured content boxes:
     catch y188-504, progress y204-468 of 720, both safely inside a 16/9 crop. */
  .mobile-story article:first-child img,
  .mobile-story article:last-child img { aspect-ratio: 16 / 9; }
  .mobile-story article > div { display: grid; gap: 6px; }
  /* the step index reads as an editorial marker, not a stray digit */
  .mobile-story article > div > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    color: var(--accent);
  }
  .mobile-story article > div > span::after {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
  }
  .mobile-story h2 { font-size: 36px; line-height: 1.02; letter-spacing: -.04em; }
  .mobile-story p { margin-top: 0; color: var(--secondary); }

  /* D115 pass 2: the instrument's whole point is a rate FALLING, and stacked
     it was three identical boxes that showed no fall at all (also a card
     inside a card). The boxes become hairline rows carrying a bar whose
     length is the rate itself: 6.1 / 4.3 / 2.4 of 6.1. */
  .progress-instrument { padding: 20px; }
  .progress-instrument ol { margin-top: 22px; gap: 0; }
  .progress-instrument li {
    min-height: 0;
    padding: 18px 0 20px;
    border-radius: 0;
    background: none;
    border-top: 1px solid var(--hairline);
  }
  .progress-instrument li:first-child { border-top: 0; }
  .progress-instrument li:nth-child(2),
  .progress-instrument li:nth-child(3) { margin-top: 0; }
  .progress-instrument li::after {
    content: "";
    display: block;
    height: 6px;
    margin-top: 14px;
    border-radius: 3px;
    background: var(--bar);
  }
  .progress-instrument li:nth-child(1)::after { width: 100%; }
  .progress-instrument li:nth-child(2)::after { width: 70.5%; }
  .progress-instrument li:nth-child(3)::after { width: 39.3%; background: var(--accent); }

  /* three apps across instead of a tall sparse column of icon + name */
  .coexistence-layout { gap: 30px; }   /* the desktop 64px left craters here */
  .integration-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .integration-icons li {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 10px;
    min-height: 0;
    text-align: center;
  }
  .integration-icons li span { font-size: 14px; color: var(--secondary); }
  .mobile-price-handoff { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-story img { transform: none; }
  /* the instrument stagger is static margin now - composition, not motion */
}