/* Real vector arrows never turn into coloured emoji on iOS. */
.control-arrow { display: block; width: 1em; height: 1em; overflow: visible; }
.opening-poster img { width: 100%; height: 100%; object-fit: inherit; object-position: inherit; }

/* Consent and scope are reading content, so they keep body-text contrast and
   size even where the surrounding composition uses small editorial labels. */
.experience-page .onboarding-intro > .onboarding-privacy,
html[data-story='ready'] .onboarding-intro > .onboarding-privacy {
  font-size: 12px !important; color: #595959 !important; line-height: 1.65;
}
.experience-page :is(.onboarding-small,.onboarding-scope,.onboarding-answer dt,
  .onboarding-answers-heading>span,.onboarding-kicker,.onboarding-topline,
  .onboarding-start-again) { color: #595959; }
.experience-page :is(.onboarding-small,.onboarding-scope,.onboarding-hint,
  .onboarding-option-detail,.onboarding-plan p,.onboarding-answer dd) {
  font-size: 12px; line-height: 1.65;
}
.experience-page :is(.onboarding-topline,.onboarding-answer dt,.onboarding-kicker,
  .onboarding-answers-heading>span,.onboarding-start-again,.onboarding-edit) { font-size: 11px; }
.experience-page .onboarding-topline { flex-wrap: wrap; gap: 6px 16px; }
.experience-page .onboarding-start-again { min-height: 44px; }
.experience-page .onboarding-edit { min-height: 40px; }

@media (max-width: 760px) {
  /* Keep the intro composed inside the phone's small viewport, with the same
     spacing in the quiet document and the optional stationary scroll story. */
  .experience-page .experience-header { min-height: 64px; padding-inline: 18px; }
  .experience-page .experience-header .brand { font-size: 20px; gap: 6px; }
  .experience-page .experience-header .brand-mark { width: 25px; }
  .experience-page .header-cta { min-height: 40px; font-size: 10px; padding: 9px 12px; }
  .experience-page .motion-toggle { min-height: 44px; bottom: max(12px,env(safe-area-inset-bottom)); font-size: 10px; }
  .experience-page .hero-viewport { height: calc(100svh - 64px); min-height: 530px; }
  html[data-story='ready'] .hero-viewport { height: 100%; min-height: 0; }
  .experience-page .hero-title-wrap { padding-top: 30px; }
  html[data-story='ready'] .hero-title-wrap { padding-top: 94px; }
  .experience-page .hero-title-wrap .eyebrow { max-width: none; font-size: 8px; letter-spacing: .035em; }
  .experience-page .hero-title-wrap h1 { font-size: clamp(46px,14.8vw,79px); margin-block: 22px 19px; }
  .experience-page .hero-positioning { font-size: 12px; line-height: 1.6; background: none; }
  .experience-page .hero-media,
  html[data-story='ready'] .hero-media {
    inset: 42% 2% 19% -56%; max-height: none; opacity: 1;
    mix-blend-mode: normal; mask-image: none; -webkit-mask-image: none;
  }
  html[data-story='ready'] .hero-media { inset-block-start: 48%; }
  /* Phone films have the monochrome grade and paper colour baked in. Avoid
     live colour filters, blend layers and masks on the hardware video plane. */
  .experience-page :is(.hero-media img,.hero-media video,.opening-poster,.opening-film) { filter: none; }
  .experience-page .hero-media :is(img,video) { object-position: right center; }
  .experience-page .hero-bottom,
  html[data-story='ready'] .hero-bottom { bottom: 17px; gap: 12px; }
  .experience-page .hero-bottom .button { min-height: 46px; font-size: 11px; }
  .experience-page .hero-scroll-cue { padding: 4px 0; font-size: 7px; }
  .experience-page .hero-scroll-cue small { display: none; }
  .experience-page .hero-orbits { opacity: .12; }
  .experience-page .opening-scene,
  html[data-story='ready'] .opening-scene { mix-blend-mode: normal; mask-image: none; -webkit-mask-image: none; }

  /* Highlights and translucent gradients retain the glass finish without
     repainting a separate backdrop blur behind every control on a phone. */
  .experience-page :is(.button,.header-cta,.nav-link,.motion-toggle,.text-link,
    .onboarding-primary,.onboarding-secondary,.onboarding-back,.onboarding-edit,
    .onboarding-start-again,.story-planner-dialog-close,.opening-action,
    .footer-top>a,.onboarding-option,.question-list summary,.story-planner-dialog) {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .experience-page .story-planner-dialog { background: #f2f2f2; }

  .experience-page :is(.stories-heading small,.format-note,.offer-details .offer-note,
    .format-list>p>small,.concept-deliverable>p,.footer-top) {
    font-size: 12px; color: #595959; line-height: 1.55;
  }
  html[data-story='ready'] :is(.format-note,.offer-details .offer-note,
    .format-list>p>small,.concept-deliverable>p,.offer-details dl>div) { font-size: 12px; }
  html[data-story='ready'] .offer-details>p { font-size: 13px; }
  .experience-page .hero-title-wrap .eyebrow,
  .experience-page :is(.concept-copy,.stories-heading,.story-endorsement,.format-inner,.offer-section,.opening) .eyebrow,
  html[data-story='ready'] .concept-copy .eyebrow { font-size: 10px; color: #595959; line-height: 1.5; }
  .experience-page .opening-foot,
  html[data-story='ready'] .opening-foot { font-size: 10px; color: #595959; line-height: 1.5; }
  /* Longer service terms remain reachable at narrow widths and large text
     sizes. Only overflowing copy scrolls; the surrounding story stays pinned. */
  html[data-story='ready'] .story-stage > :is(.stories-heading,.format-bridge,.offer-section,.onboarding-section) {
    overflow-y: auto; overscroll-behavior: auto; padding-bottom: 84px;
  }
}

@media (max-width: 360px) {
  .experience-page .experience-header { padding-inline: 14px; gap: 8px; }
  .experience-page .experience-header .brand { font-size: 17px; }
  .experience-page .experience-header .brand-mark { width: 22px; }
  .experience-page .header-cta { font-size: 9px; padding-inline: 10px; gap: 6px; }
}

@media (max-width: 760px) and (max-height: 600px) {
  html[data-story='ready'] .hero-title-wrap { padding-top: 84px; }
  .experience-page .hero-title-wrap h1 { margin-block: 16px; font-size: 14vw; }
  .experience-page .hero-positioning { font-size: 11px; }
  html[data-story='ready'] .hero-media { inset-block: 51% 21%; }
}

@media (max-width: 760px) and (min-height: 601px) and (max-height: 700px) {
  html[data-story='ready'] .opening-scene { inset-block: 61% 9%; }
}