/* MRVËY mobile autopilot
   Native scroll chooses the chapter. Short, finite timelines tell the story. */

@media (max-width: 899px), (max-width: 1023px) and (pointer: coarse) {
  html.mobile-autopilot {
    --mobile-route-progress: 0;
    --mobile-nav-height: 62px;
    --mobile-heading-copy-gap: clamp(28px, 7vw, 36px);
  }

  html.mobile-autopilot body {
    overflow-x: clip;
    overflow-y: visible;
  }

  html.mobile-autopilot.mrv-menu-open body {
    overflow: hidden;
  }

  /* A visual-only seam tracks the journey without adding labels or UI noise. */
  .mobile-route-stitch {
    position: fixed;
    top: calc(var(--mobile-nav-height) + 11px);
    right: max(5px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 38;
    width: 3px;
    overflow: hidden;
    pointer-events: none;
    border-radius: 999px;
    background: rgba(16, 18, 15, .14);
    opacity: .82;
    transform: translateZ(0);
  }

  .mobile-route-stitch::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to bottom, var(--brand-green, #9be879) 0 72%, var(--brand-acid, #c5ff32) 72% 100%);
    transform: scaleY(var(--mobile-route-progress));
    transform-origin: center top;
    will-change: transform;
  }

  .mobile-autopilot main > section,
  .mobile-autopilot .founder-story__beat,
  .mobile-autopilot .founder-proof article,
  .mobile-autopilot .founder-origin__essay p {
    scroll-margin-top: calc(var(--mobile-nav-height) + 14px);
  }

  /* Sticky chapter descendants must not inherit a clipped scroll container on iOS. */
  .mobile-autopilot .story-page,
  .mobile-autopilot .customization-studio-page .studio-page,
  .customization-studio-page .mobile-autopilot .studio-page {
    overflow: visible;
  }

  /* The dedicated runtime owns phone reveals. Legacy reveal systems stay final-state. */
  .mobile-autopilot.story-motion .story-reveal,
  .mobile-autopilot .story-motion .story-reveal,
  .mobile-autopilot .qv2-motion [data-qv2-reveal],
  .mobile-autopilot .reveal {
    opacity: 1;
    visibility: visible;
    transform: none;
    clip-path: none;
    transition: none;
  }

  .mobile-autopilot .mobile-directed-section {
    isolation: isolate;
  }

  .mobile-autopilot .mobile-directed-section::after {
    transition-duration: .82s;
  }

  /* Homepage phone hero: one garment crosses an acid seam into a campaign frame.
     Native scroll only chooses the scene; the finite timeline completes itself. */
  .mobile-autopilot .exp-home #hero.mobile-hero-campaign {
    height: 220svh;
    min-height: 0;
    overflow: visible;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
    overflow: clip;
    perspective: 1200px;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__intro,
  .mobile-autopilot .mobile-hero-campaign .exp-hero__material-panel {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__intro {
    z-index: 4;
    padding: calc(var(--mobile-nav-height) + 34px) 18px 20px;
    pointer-events: auto;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__intro h1,
  .mobile-autopilot :lang(fr) .mobile-hero-campaign .exp-hero__intro h1 {
    width: 100%;
    max-width: 9.2ch;
    margin: 0;
    font-size: clamp(52px, 15vw, 70px);
    line-height: .82;
    letter-spacing: -.067em;
  }

  .mobile-autopilot :lang(fr) .mobile-hero-campaign .exp-hero__intro h1 {
    max-width: 10.5ch;
    font-size: clamp(46px, 12.8vw, 62px);
    line-height: .86;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__lede {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 96px;
    z-index: 5;
    max-width: 34ch;
    margin: 0;
    padding: 8px 0 0;
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.38;
    text-shadow: 0 1px 16px rgba(244, 246, 242, .98), 0 0 30px rgba(244, 246, 242, .92);
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__actions {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__garment {
    position: absolute;
    left: 69%;
    top: 47svh;
    z-index: 3;
    width: clamp(260px, 72vw, 340px);
    margin: 0;
    transform-origin: 50% 72%;
    transform-style: preserve-3d;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__garment img {
    animation: none !important;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__material-panel {
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    min-height: 0;
    padding: calc(var(--mobile-nav-height) + 24px) 18px max(36px, env(safe-area-inset-bottom));
    overflow: hidden;
    color: var(--brand-paper, #f4f5f0);
    background: radial-gradient(72% 48% at 0 0, rgba(155, 232, 121, .12), transparent 72%), var(--brand-ink, #10120f);
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__material-panel::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--brand-acid, #c5ff32);
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__material {
    width: 100%;
    max-width: none;
    padding-top: 51svh;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__material h2 {
    max-width: 10.5ch;
    font-size: clamp(38px, 10.7vw, 55px);
    line-height: .91;
    color: var(--brand-paper, #f4f5f0);
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__material > p:not(.exp-hero__kicker) {
    max-width: 34ch;
    margin-top: var(--mobile-heading-copy-gap);
    font-size: 14px;
    line-height: 1.46;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__material > a {
    min-height: 42px;
    margin-top: 18px;
    color: var(--brand-paper, #f4f5f0);
  }

  .mobile-autopilot .exp-hero__garment img,
  .mobile-autopilot .story-campaign img,
  .mobile-autopilot .qv2-hero__stage img,
  .mobile-autopilot .commerce-product__image,
  .mobile-autopilot .logo-preview__garment-img {
    transform-origin: 50% 72%;
    backface-visibility: hidden;
  }

  /* Restore campaign-card staging for the founder story on phones. */
  .mobile-autopilot .founder-story--woven .founder-story__stack {
    display: block;
    overflow: visible;
    background: var(--brand-ink, #10120f);
  }

  .mobile-autopilot .founder-story--woven {
    overflow: visible;
  }

  .mobile-autopilot .founder-story--woven .founder-story__beat {
    position: sticky;
    top: var(--mobile-nav-height);
    z-index: var(--mobile-beat, 1);
    display: grid;
    align-content: center;
    min-height: calc(100svh - var(--mobile-nav-height));
    padding: clamp(62px, 10vh, 90px) 18px max(44px, env(safe-area-inset-bottom));
    overflow: hidden;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .15), 0 -24px 60px rgba(9, 12, 9, .13);
  }

  .mobile-autopilot .founder-story--woven .founder-story__beat:nth-child(1) { --mobile-beat: 1; }
  .mobile-autopilot .founder-story--woven .founder-story__beat:nth-child(2) { --mobile-beat: 2; }
  .mobile-autopilot .founder-story--woven .founder-story__beat:nth-child(3) { --mobile-beat: 3; }
  .mobile-autopilot .founder-story--woven .founder-story__beat:nth-child(4) { --mobile-beat: 4; }

  .mobile-autopilot .founder-story--woven .founder-story__beat h2 {
    max-width: 11.5ch;
  }

  .mobile-autopilot .founder-story--woven .founder-story__beat p {
    max-width: 33ch;
  }

  /* One editorial rhythm between a claim and its evidence across phone pages. */
  .mobile-autopilot .story-hero__copy h1 + .story-hero__lede,
  .mobile-autopilot .qv2-hero__copy h1 + p,
  .mobile-autopilot .story-section-head h2 + p,
  .mobile-autopilot .story-small-order__copy h2 + p,
  .mobile-autopilot .story-contact h2 + p,
  .mobile-autopilot .qv2-section-head h2 + p,
  .mobile-autopilot .qv2-assurance__intro h2 + p,
  .mobile-autopilot .founder-story__beat h2 + p,
  .mobile-autopilot .founder-close h2 + p {
    margin-top: var(--mobile-heading-copy-gap) !important;
  }

  .mobile-autopilot .founder-story--about .founder-story__beat h2 + p {
    margin-top: 0 !important;
  }

  .mobile-autopilot .capsule-home-console__head,
  .mobile-autopilot .exp-home #products .section-header {
    gap: var(--mobile-heading-copy-gap);
  }

  /* Auto demonstrations are visible as a controlled focus, never as clickable cards. */
  .mobile-autopilot .is-mobile-demoing {
    --mobile-demo-ring: var(--brand-green, #9be879);
  }

  .mobile-autopilot [data-commerce-product-stage].is-mobile-demoing .commerce-product-media,
  .mobile-autopilot [data-finish-showcase].is-mobile-demoing .finish-showcase__media,
  .mobile-autopilot [data-home-capsule].is-mobile-demoing .capsule-home-preview {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mobile-demo-ring) 46%, transparent);
  }

  /* Price levels read as a sequence. The recommended level gets one textile sweep. */
  .mobile-autopilot .commerce-tier {
    position: relative;
    overflow: hidden;
  }

  .mobile-autopilot .commerce-tier--signature::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0 35%, rgba(255, 255, 255, .34) 48%, transparent 61%);
    transform: translate3d(-120%, 0, 0);
  }

  .mobile-autopilot .commerce-tier--signature.is-mobile-featured::after {
    animation: mobile-textile-pass .92s cubic-bezier(.22, 1, .36, 1) both;
  }

  .mobile-autopilot .commerce-tier > * {
    position: relative;
    z-index: 1;
  }

  @keyframes mobile-textile-pass {
    to { transform: translate3d(120%, 0, 0); }
  }

  /* Each process proof now performs after the scroll-selected chapter changes. */
  .mobile-autopilot .story-process__proof.is-active > * {
    backface-visibility: hidden;
  }

  .mobile-autopilot .story-process__chapter.is-active {
    opacity: 1;
  }

  /* Tactile feedback is brief and limited to explicit controls. */
  .mobile-autopilot button:not(.nav-mobile-toggle):active,
  .mobile-autopilot a[class*='button']:active,
  .mobile-autopilot a[class*='btn-']:active {
    transform: scale(.985);
    transition-duration: .08s;
  }
}

@media (max-width: 899px) and (orientation: landscape), (max-width: 1023px) and (pointer: coarse) and (orientation: landscape) {
  html.mobile-autopilot {
    --mobile-nav-height: 58px;
  }

  .mobile-route-stitch {
    top: calc(var(--mobile-nav-height) + 7px);
    bottom: max(7px, env(safe-area-inset-bottom));
  }

  .mobile-autopilot .exp-hero__intro {
    min-height: 100svh;
    padding-bottom: 14px;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__intro h1,
  .mobile-autopilot :lang(fr) .mobile-hero-campaign .exp-hero__intro h1 {
    max-width: 43vw;
    font-size: clamp(42px, 8vw, 64px);
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__garment {
    left: 70%;
    top: 55svh;
    width: min(35vw, 280px);
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__lede,
  .mobile-autopilot .mobile-hero-campaign .exp-hero__actions {
    right: auto;
    width: 43vw;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__lede span:first-child {
    display: none;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__lede span:last-child {
    margin-top: 0;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__material {
    width: 47vw;
    margin-left: auto;
    padding-top: 0;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__material h2 {
    font-size: clamp(30px, 4.6vw, 40px);
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__material > p:not(.exp-hero__kicker) {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.35;
  }

  .mobile-autopilot .mobile-hero-campaign .exp-hero__material > a {
    min-height: 36px;
    margin-top: 10px;
  }

  .mobile-autopilot .founder-story--woven .founder-story__beat {
    min-height: max(410px, calc(100svh - var(--mobile-nav-height)));
    padding: 56px max(22px, env(safe-area-inset-left)) 34px;
  }

}

@media (max-width: 899px) and (prefers-reduced-motion: reduce), (max-width: 1023px) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .mobile-route-stitch {
    display: none;
  }

  .exp-home .founder-story--woven .founder-story__beat {
    position: relative;
    top: auto;
  }
}