/* PackBuddy's mobile product story.
 *
 * The established desktop stage remains in styles.css. This file is a
 * touch-device composition of the same six beats: the same card stack and
 * alternating throws, the same two-phone Studio handoff, and the same
 * three-part posting finale. Geometry is bounded by both viewport width and
 * stable viewport height so Safari chrome cannot force any scene to overlap.
 */

.mobile-story {
  display: none;
}

/* The hero hint is mobile-only. The established external hint remains the
 * sole desktop control and keeps its original document-flow spacing. */
.scroll-hint--hero-mobile {
  display: none;
}

@media (max-width: 960px) and (hover: none) and (pointer: coarse) {
  .demo-stage {
    display: none;
  }

  .mobile-story {
    --mobile-story-canvas: calc(100svh - var(--site-header-height));
    --mobile-story-device-width: clamp(164px, min(55vw, 27svh), 216px);
    --mobile-story-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    display: block;
    min-height: 1px;
    background: #ffffff;
    isolation: isolate;
  }

  .mobile-story__pin {
    position: sticky;
    top: var(--site-header-height);
    z-index: 2;
    display: grid;
    grid-template-rows:
      clamp(64px, 11svh, 88px)
      minmax(0, 1fr)
      clamp(78px, 13svh, 104px);
    width: 100%;
    height: var(--mobile-story-canvas);
    min-height: 0;
    padding:
      clamp(8px, 1.5svh, 14px)
      max(12px, var(--safe-area-right))
      max(8px, var(--safe-area-bottom))
      max(12px, var(--safe-area-left));
    overflow: hidden;
    opacity: 1;
    transition: none;
  }

  .mobile-story__headline,
  .mobile-story__caption {
    position: relative;
    z-index: 12;
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    text-align: center;
    pointer-events: none;
  }

  .mobile-story__headline > h2 {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
  }

  .mobile-story__caption {
    align-items: start;
    padding-top: clamp(8px, 1.5svh, 14px);
  }

  .mobile-story__headline [data-mobile-copy],
  .mobile-story__caption [data-mobile-copy] {
    grid-area: 1 / 1;
    display: block;
    max-width: min(100%, 18ch);
    margin: 0;
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 340ms ease,
      transform 480ms var(--mobile-story-ease);
  }

  .mobile-story__headline [data-mobile-copy] {
    padding: 0.08em 0.03em 0.12em;
    white-space: nowrap;
    font-size: clamp(42px, 12.5vw, 58px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.055em;
    color: var(--text);
  }

  .mobile-story__headline [data-mobile-copy~="record"] {
    font-size: clamp(40px, 11.7vw, 54px);
  }

  .mobile-story__headline [data-mobile-copy~="post"] {
    font-size: clamp(44px, 13vw, 60px);
  }

  .mobile-story__caption [data-mobile-copy] {
    font-size: clamp(21px, 6.7vw, 29px);
    font-weight: 820;
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: var(--text);
  }

  .mobile-story__caption .accent,
  .mobile-story__headline .accent {
    color: var(--accent-deep);
  }

  .mobile-story[data-mobile-scene="rip"] [data-mobile-copy~="rip"],
  .mobile-story[data-mobile-scene="scan-second"] [data-mobile-copy~="scan-second"],
  .mobile-story[data-mobile-scene="scan-third"] [data-mobile-copy~="scan-third"],
  .mobile-story[data-mobile-scene="record"] [data-mobile-copy~="record"],
  .mobile-story[data-mobile-scene="record-finish"] [data-mobile-copy~="record-finish"],
  .mobile-story[data-mobile-scene="post"] [data-mobile-copy~="post"] {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-story__visual {
    position: relative;
    z-index: 2;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  /* Same CSS-drawn iPhone-style frame recipe as styles.css: rounded
   * overflow clip = chassis, titanium-rail box-shadow ring, bezel =
   * the screen layer's giant shadow spread, ::after strips mask
   * exiting cards, .pb-island pill on top. No hardware artwork. */
  .mobile-story__device {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--mobile-story-device-width);
    aspect-ratio: 1239 / 2616;
    border-radius: 14.6% / 6.91%;
    box-shadow:
      0 0 0 1px rgba(233, 237, 243, 0.18),
      0 0 0 2.5px #61666e;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.94) rotate(0deg);
    transform-origin: 50% 50%;
    transition:
      left 680ms var(--mobile-story-ease),
      opacity 460ms ease,
      transform 680ms var(--mobile-story-ease);
  }

  .mobile-story__device::before {
    content: "";
    position: absolute;
    top: 1.15%;
    left: 2.42%;
    z-index: 0;
    width: 95.16%;
    height: 97.71%;
    border-radius: 12.8% / 5.9%;
    background: #ffffff;
    box-shadow: 0 0 0 200px #0a0d12;
  }

  .mobile-story__device::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: 14.6% / 6.91%;
    background:
      linear-gradient(#0a0d12, #0a0d12) left center / 2.46% 100% no-repeat,
      linear-gradient(#0a0d12, #0a0d12) right center / 2.46% 100% no-repeat,
      linear-gradient(#0a0d12, #0a0d12) center top / 100% 1.18% no-repeat,
      linear-gradient(#0a0d12, #0a0d12) center bottom / 100% 1.18% no-repeat;
    pointer-events: none;
  }

  /* Rip and Scan: one full-size phone, with the real three-card stack. */
  .mobile-story[data-mobile-scene="rip"] .mobile-story__device--scan,
  .mobile-story[data-mobile-scene="scan-second"] .mobile-story__device--scan,
  .mobile-story[data-mobile-scene="scan-third"] .mobile-story__device--scan {
    left: 50%;
    z-index: 4;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  /* Record: retain the pulled card on the left while Studio arrives right. */
  .mobile-story[data-mobile-scene="record"] .mobile-story__device--scan,
  .mobile-story[data-mobile-scene="record-finish"] .mobile-story__device--scan {
    left: 27%;
    z-index: 3;
    opacity: 0.52;
    transform: translate(-50%, -50%) scale(0.66) rotate(-3deg);
  }

  .mobile-story[data-mobile-scene="record"] .mobile-story__device--record,
  .mobile-story[data-mobile-scene="record-finish"] .mobile-story__device--record {
    left: 73%;
    z-index: 5;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.7) rotate(0deg);
  }

  /* Post: preserve the full left-to-right desktop narrative in miniature. */
  .mobile-story[data-mobile-scene="post"] .mobile-story__device--scan {
    left: 12%;
    z-index: 2;
    opacity: 0.38;
    transform: translate(-50%, -50%) scale(0.4) rotate(-4deg);
  }

  .mobile-story[data-mobile-scene="post"] .mobile-story__device--record {
    left: 39%;
    z-index: 4;
    opacity: 0.74;
    transform: translate(-50%, -50%) scale(0.46) rotate(0deg);
  }

  /* Cards keep the desktop stack depth and alternate their exit direction. */
  .mobile-story__card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72%;
    height: auto;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    border-radius: 4.5%;
    opacity: 1;
    filter: drop-shadow(0 12px 20px rgba(15, 20, 25, 0.24));
    transition:
      opacity 400ms cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .mobile-story__card--first {
    z-index: 3;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }

  .mobile-story__card--second {
    z-index: 2;
    transform: translate(calc(-50% + 6px), calc(-50% - 3px)) rotate(3deg) scale(0.98);
  }

  .mobile-story__card--third {
    z-index: 1;
    transform: translate(calc(-50% - 6px), calc(-50% - 3px)) rotate(-3deg) scale(0.96);
  }

  .mobile-story[data-mobile-scene="scan-second"] .mobile-story__card--first,
  .mobile-story[data-mobile-scene="scan-third"] .mobile-story__card--first,
  .mobile-story[data-mobile-scene="record"] .mobile-story__card--first,
  .mobile-story[data-mobile-scene="record-finish"] .mobile-story__card--first,
  .mobile-story[data-mobile-scene="post"] .mobile-story__card--first {
    opacity: 0;
    transform: translate(-145%, calc(-50% + 24px)) rotate(-22deg) scale(0.88);
  }

  .mobile-story[data-mobile-scene="scan-second"] .mobile-story__card--second {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }

  .mobile-story[data-mobile-scene="scan-second"] .mobile-story__card--third {
    transform: translate(calc(-50% + 6px), calc(-50% - 3px)) rotate(3deg) scale(0.98);
  }

  .mobile-story[data-mobile-scene="scan-third"] .mobile-story__card--second,
  .mobile-story[data-mobile-scene="record"] .mobile-story__card--second,
  .mobile-story[data-mobile-scene="record-finish"] .mobile-story__card--second,
  .mobile-story[data-mobile-scene="post"] .mobile-story__card--second {
    opacity: 0;
    transform: translate(45%, calc(-50% + 24px)) rotate(22deg) scale(0.88);
  }

  .mobile-story[data-mobile-scene="scan-third"] .mobile-story__card--third,
  .mobile-story[data-mobile-scene="record"] .mobile-story__card--third,
  .mobile-story[data-mobile-scene="record-finish"] .mobile-story__card--third,
  .mobile-story[data-mobile-scene="post"] .mobile-story__card--third {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }

  /* The compact strip remains inside the phone and travels with its card. */
  .mobile-story .scan-overlay {
    left: 10%;
    right: 10%;
    bottom: 11.5%;
    z-index: 5;
    gap: 5px;
    min-height: 0;
    padding: 5px 7px;
    border-radius: 8px;
    border-color: rgba(92, 171, 240, 0.92);
    background: rgba(15, 20, 25, 0.68);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 0;
    transform: translateY(5px);
    transition:
      opacity 380ms ease,
      transform 480ms var(--mobile-story-ease);
  }

  .mobile-story[data-mobile-scene="rip"] .scan-overlay--1,
  .mobile-story[data-mobile-scene="scan-second"] .scan-overlay--2,
  .mobile-story[data-mobile-scene="scan-third"] .scan-overlay--3,
  .mobile-story[data-mobile-scene="record"] .scan-overlay--3,
  .mobile-story[data-mobile-scene="record-finish"] .scan-overlay--3,
  .mobile-story[data-mobile-scene="post"] .scan-overlay--3 {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-story[data-mobile-scene="rip"] .scan-overlay--1 .scan-overlay__value,
  .mobile-story[data-mobile-scene="scan-second"] .scan-overlay--2 .scan-overlay__value,
  .mobile-story[data-mobile-scene="scan-third"] .scan-overlay--3 .scan-overlay__value,
  .mobile-story[data-mobile-scene="record"] .scan-overlay--3 .scan-overlay__value,
  .mobile-story[data-mobile-scene="record-finish"] .scan-overlay--3 .scan-overlay__value,
  .mobile-story[data-mobile-scene="post"] .scan-overlay--3 .scan-overlay__value {
    animation-play-state: running;
  }

  /* Studio reuses the existing editor component and keeps its effects alive
   * through the posting finale, exactly as the desktop story does. */
  .mobile-story .studio {
    z-index: 1;
  }

  .mobile-story .studio__caption {
    font-size: clamp(12px, 3.6vw, 16px);
  }

  .mobile-story .studio__pricetag {
    opacity: 0;
    animation: none;
    transform: translate(-50%, -50%) rotate(-15deg) scale(0.45);
    transition:
      opacity 280ms ease 200ms,
      transform 600ms var(--mobile-story-ease) 200ms;
  }

  .mobile-story[data-mobile-scene="record"] .studio__pricetag,
  .mobile-story[data-mobile-scene="record-finish"] .studio__pricetag,
  .mobile-story[data-mobile-scene="post"] .studio__pricetag {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-15deg) scale(1);
  }

  .mobile-story .studio__pricetag-inner {
    font-size: clamp(27px, 8.8vw, 37px);
    animation-play-state: paused;
  }

  .mobile-story[data-mobile-scene="record"] .studio__pricetag-inner,
  .mobile-story[data-mobile-scene="record-finish"] .studio__pricetag-inner,
  .mobile-story[data-mobile-scene="post"] .studio__pricetag-inner {
    animation-play-state: running;
  }

  .mobile-story .studio__caption,
  .mobile-story .studio__exclamation {
    opacity: 0;
  }

  .mobile-story .studio__exclamation {
    top: 20%;
    right: 7%;
    font-size: clamp(50px, 16vw, 68px);
  }

  .mobile-story[data-mobile-scene="record-finish"] .studio__caption,
  .mobile-story[data-mobile-scene="post"] .studio__caption {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .mobile-story[data-mobile-scene="record-finish"] .studio__exclamation,
  .mobile-story[data-mobile-scene="post"] .studio__exclamation {
    opacity: 1;
    transform: rotate(6deg) scale(1);
  }

  .mobile-story[data-mobile-scene="record"] .studio__playhead,
  .mobile-story[data-mobile-scene="record-finish"] .studio__playhead,
  .mobile-story[data-mobile-scene="post"] .studio__playhead {
    animation-play-state: running;
  }

  /* Unencircled chevron between the pull and Studio phones. */
  .mobile-story__pipeline {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 8;
    width: 18px;
    height: 18px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
    transition:
      left 650ms var(--mobile-story-ease),
      opacity 360ms ease,
      transform 560ms var(--mobile-story-ease);
  }

  .mobile-story__pipeline::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-top: 3px solid var(--accent-deep);
    border-right: 3px solid var(--accent-deep);
    border-radius: 2px;
    transform: rotate(45deg);
  }

  .mobile-story[data-mobile-scene="record"] .mobile-story__pipeline,
  .mobile-story[data-mobile-scene="record-finish"] .mobile-story__pipeline {
    left: 50%;
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }

  .mobile-story[data-mobile-scene="post"] .mobile-story__pipeline {
    left: 25.5%;
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(0.72);
  }

  /* The complete Post frame retains both phones, then adds the pipeline at
   * the right. Its compact typography is sized for a 320px-wide iPhone. */
  .mobile-story__share {
    position: absolute;
    top: 50%;
    left: 86%;
    z-index: 7;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.4svh, 12px);
    width: clamp(112px, 40%, 156px);
    padding-left: 22px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) translateX(22px) scale(0.94);
    transition:
      left 650ms var(--mobile-story-ease),
      opacity 400ms ease,
      transform 620ms var(--mobile-story-ease);
  }

  .mobile-story[data-mobile-scene="post"] .mobile-story__share {
    left: 77%;
    opacity: 1;
    transform: translate(-50%, -50%) translateX(0) scale(1);
  }

  .mobile-story .mobile-story__share .demo-share__fork {
    width: 22px;
  }

  .mobile-story .mobile-story__share .demo-share__dest {
    gap: 5px;
    width: 100%;
    min-width: 0;
    padding: 6px;
    border-radius: 11px;
    opacity: 0;
    transform: translateX(18px);
    box-shadow: 0 8px 18px -14px rgba(15, 20, 25, 0.42);
  }

  .mobile-story .mobile-story__share .demo-share__badge {
    width: 27px;
    height: 27px;
    border-radius: 7px;
    font-size: 14px;
  }

  .mobile-story .mobile-story__share .demo-share__glyph {
    width: 15px;
    height: 15px;
  }

  .mobile-story .mobile-story__share .demo-share__glyph--yt {
    width: 19px;
    height: 19px;
  }

  .mobile-story .mobile-story__share .demo-share__name {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-story .mobile-story__share .demo-share__sub {
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-story .mobile-story__share .demo-share__check {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .mobile-story[data-mobile-scene="post"] .mobile-story__share .demo-share__dest {
    opacity: 1;
    transform: translateX(0);
  }

  .mobile-story[data-mobile-scene="post"] .demo-share__dest--ig {
    transition-delay: 120ms;
  }

  .mobile-story[data-mobile-scene="post"] .demo-share__dest--tt {
    transition-delay: 240ms;
  }

  .mobile-story[data-mobile-scene="post"] .demo-share__dest--yt {
    transition-delay: 360ms;
  }

  .mobile-story .mobile-story__share .demo-share__pulse {
    opacity: 0;
  }

  .mobile-story[data-mobile-scene="post"] .mobile-story__share .demo-share__pulse {
    opacity: 0.9;
    animation: wire-flow 1.7s linear infinite;
  }

  .mobile-story[data-mobile-scene="post"] .demo-share__pulse--tt {
    animation-delay: 0.28s;
  }

  .mobile-story[data-mobile-scene="post"] .demo-share__pulse--yt {
    animation-delay: 0.56s;
  }

  .mobile-story[data-mobile-scene="post"] .mobile-story__share .demo-share__check {
    opacity: 1;
    transform: scale(1);
  }

  .mobile-story[data-mobile-scene="post"] .demo-share__dest--ig .demo-share__check {
    transition-delay: 620ms;
  }

  .mobile-story[data-mobile-scene="post"] .demo-share__dest--tt .demo-share__check {
    transition-delay: 760ms;
  }

  .mobile-story[data-mobile-scene="post"] .demo-share__dest--yt .demo-share__check {
    transition-delay: 900ms;
  }

  /* Six real beats. The long final step provides a complete Post hold before
   * the sticky plane releases into the separate download CTA. */
  .mobile-story__steps {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--mobile-story-canvas));
    pointer-events: none;
  }

  .mobile-story__step {
    height: 104vh;
    height: 104svh;
  }

  .mobile-story__step--final {
    height: 220vh;
    height: 220svh;
  }

  .mobile-story.is-paused .scan-overlay__value,
  .mobile-story.is-paused .studio__pricetag-inner,
  .mobile-story.is-paused .studio__playhead,
  .mobile-story.is-paused .demo-share__pulse {
    animation-play-state: paused !important;
  }

  /* Use the exact same sticky plane as the story above. The shared mobile
   * layer already adds the safe-area inset as padding, so subtracting it
   * from the height again lets the footer enter early on notched iPhones. */
  .download-cta__inner {
    margin-top: -18svh;
    height: calc(100vh - var(--download-header-offset));
    height: calc(100svh - var(--download-header-offset));
  }

  /* A clipped overflow ancestor can destabilize sticky release in WebKit. */
  .download-cta {
    height: calc(220vh - var(--download-header-offset));
    height: calc(220svh - var(--download-header-offset));
    overflow-x: visible;
    padding-top: 1px;
    padding-bottom: 0;
    background: #ffffff;
  }

  /* Mobile timing begins as the actual copy enters view. The headline leads,
   * then the App Store action follows in the same composed transition. */
  .download-cta.is-reveal-ready h2 {
    transform: translate3d(0, 52px, 0) scale(0.94);
    transition:
      opacity 800ms ease-out,
      transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .download-cta.is-reveal-ready.is-visible h2 {
    transition-delay: 80ms, 80ms;
  }

  .download-cta.is-reveal-ready .download-cta__action {
    transform: translate3d(0, 40px, 0) scale(0.94);
    transition:
      opacity 600ms ease-out 300ms,
      transform 720ms cubic-bezier(0.2, 0.9, 0.3, 1) 300ms;
  }

  .download-cta.is-reveal-ready.is-visible .download-cta__action {
    animation: none;
  }

  .download-cta.is-reveal-ready.is-visible .download-cta__arrow {
    animation: download-cta-arrow-bounce 1600ms ease-in-out 1500ms infinite;
  }
}

@media (max-width: 960px) and (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .mobile-story__pin {
    transition: none;
  }

}

/* Portrait hero: let the product lead. The App Store badge already carries
 * the download message, so the supporting sentence stays desktop-only. */
@media (max-width: 960px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-height: calc(100svh - var(--site-header-height));
    padding-block: clamp(18px, 3svh, 28px);
    gap: clamp(12px, 2svh, 18px);
    text-align: center;
  }

  .hero__copy {
    display: contents;
  }

  .hero h1 {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }

  .hero p.lead {
    display: none;
  }

  .hero__visual {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: clamp(220px, min(74vw, 32svh), 290px);
  }

  .hero__cta-row {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    justify-content: center;
  }

  .hero__cta-row .app-store-badge--download {
    gap: 10px;
    padding: 11px 17px;
  }

  .hero__cta-row .app-store-badge__apple {
    width: 28px;
    height: 28px;
  }

  .hero__cta-row .app-store-badge__big {
    font-size: 22px;
  }

  /* Anchor the mobile hint to the badge instead of estimating its location
   * from viewport height. Absolute positioning keeps the hero rows unchanged;
   * left includes half the 48px control because bounce owns `transform`. */
  .hero__cta-row .scroll-hint--hero-mobile {
    position: absolute;
    top: calc(100% + clamp(6px, 1svh, 10px));
    left: calc(50% - 24px);
    z-index: 3;
    display: flex;
    width: 48px;
    height: 48px;
    margin: 0;
  }

  /* Preserve the existing spacer before the story while exposing only the
   * button-anchored control to touch, focus, and assistive technology. */
  .scroll-hint--external {
    visibility: hidden;
    pointer-events: none;
    animation-play-state: paused;
  }
}

@media (max-width: 360px) and (hover: none) and (pointer: coarse) {
  .mobile-story {
    --mobile-story-device-width: clamp(154px, min(58vw, 28svh), 190px);
  }

  .mobile-story__pin {
    grid-template-rows: 58px minmax(0, 1fr) 76px;
    padding-inline-start: max(8px, var(--safe-area-left));
    padding-inline-end: max(8px, var(--safe-area-right));
  }

  .mobile-story__headline [data-mobile-copy] {
    font-size: clamp(38px, 12.5vw, 46px);
  }

  .mobile-story__headline [data-mobile-copy~="record"] {
    font-size: clamp(36px, 11.5vw, 43px);
  }

  .mobile-story__headline [data-mobile-copy~="post"] {
    font-size: clamp(39px, 12.7vw, 47px);
  }

  .mobile-story__caption [data-mobile-copy] {
    max-width: 16ch;
    font-size: clamp(19px, 6.5vw, 24px);
  }

  .mobile-story[data-mobile-scene="record"] .mobile-story__device--scan,
  .mobile-story[data-mobile-scene="record-finish"] .mobile-story__device--scan {
    left: 27%;
    transform: translate(-50%, -50%) scale(0.63) rotate(-3deg);
  }

  .mobile-story[data-mobile-scene="record"] .mobile-story__device--record,
  .mobile-story[data-mobile-scene="record-finish"] .mobile-story__device--record {
    left: 73%;
    transform: translate(-50%, -50%) scale(0.66) rotate(0deg);
  }

  .mobile-story[data-mobile-scene="post"] .mobile-story__device--scan {
    left: 12%;
    transform: translate(-50%, -50%) scale(0.4) rotate(-4deg);
  }

  .mobile-story[data-mobile-scene="post"] .mobile-story__device--record {
    left: 40%;
    transform: translate(-50%, -50%) scale(0.46) rotate(0deg);
  }

  .mobile-story__share {
    width: clamp(108px, 41%, 132px);
    padding-left: 20px;
  }

  .mobile-story .mobile-story__share .demo-share__fork {
    width: 20px;
  }
}

@media (max-height: 700px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .hero {
    min-height: auto;
    padding-block: 18px;
    gap: 12px;
  }

  .hero__visual {
    width: clamp(170px, min(68vw, 30svh), 225px);
  }

  .mobile-story__pin {
    grid-template-rows: 58px minmax(0, 1fr) 74px;
    padding-block: 6px max(6px, var(--safe-area-bottom));
  }

  .mobile-story__headline [data-mobile-copy] {
    font-size: clamp(38px, 11.8vw, 48px);
  }

  .mobile-story__headline [data-mobile-copy~="record"] {
    font-size: clamp(36px, 11vw, 44px);
  }

  .mobile-story__headline [data-mobile-copy~="post"] {
    font-size: clamp(39px, 12vw, 48px);
  }

  .mobile-story__caption [data-mobile-copy] {
    font-size: clamp(18px, 6vw, 23px);
  }
}

@media (max-width: 960px) and (max-height: 520px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .mobile-story {
    --mobile-story-device-width: clamp(112px, 29svh, 138px);
  }

  .mobile-story__pin {
    grid-template-rows: 40px minmax(0, 1fr) 44px;
    padding-block: 3px max(3px, var(--safe-area-bottom));
  }

  .mobile-story__headline [data-mobile-copy] {
    font-size: clamp(27px, 8svh, 36px);
  }

  .mobile-story__headline [data-mobile-copy~="record"] {
    font-size: clamp(25px, 7.4svh, 34px);
  }

  .mobile-story__headline [data-mobile-copy~="post"] {
    font-size: clamp(27px, 8svh, 36px);
  }

  .mobile-story__caption {
    padding-top: 2px;
  }

  .mobile-story__caption [data-mobile-copy] {
    max-width: 28ch;
    font-size: clamp(14px, 4.2svh, 18px);
  }

  .mobile-story[data-mobile-scene="record"] .mobile-story__device--scan,
  .mobile-story[data-mobile-scene="record-finish"] .mobile-story__device--scan {
    left: 37%;
    transform: translate(-50%, -50%) scale(0.78) rotate(-3deg);
  }

  .mobile-story[data-mobile-scene="record"] .mobile-story__device--record,
  .mobile-story[data-mobile-scene="record-finish"] .mobile-story__device--record {
    left: 63%;
    transform: translate(-50%, -50%) scale(0.82) rotate(0deg);
  }

  .mobile-story[data-mobile-scene="post"] .mobile-story__device--scan {
    left: 25%;
    transform: translate(-50%, -50%) scale(0.62) rotate(-4deg);
  }

  .mobile-story[data-mobile-scene="post"] .mobile-story__device--record {
    left: 48%;
    transform: translate(-50%, -50%) scale(0.68) rotate(0deg);
  }

  .mobile-story[data-mobile-scene="post"] .mobile-story__pipeline {
    left: 36.5%;
  }

  .mobile-story__share {
    width: 150px;
  }

  .mobile-story[data-mobile-scene="post"] .mobile-story__share {
    left: 72%;
  }

  .mobile-story__step {
    height: 104svh;
  }

  .mobile-story__step--final {
    height: 220svh;
  }
}

/* Portrait story composition: size the visual track to the unchanged full
 * phone silhouette instead of allowing it to absorb every spare viewport
 * pixel. Smaller Record and Post silhouettes then receive proportional copy
 * insets, keeping the words optically attached to their visual without
 * changing any device, card, or transition geometry. */
@media (max-width: 960px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .mobile-story {
    --mobile-story-full-visual-height: clamp(322px, min(111.4vw, 54.7svh), 437px);
    --mobile-story-copy-inset: 0px;
  }

  .mobile-story[data-mobile-scene="record"],
  .mobile-story[data-mobile-scene="record-finish"] {
    --mobile-story-copy-inset: clamp(50px, 8.5svh, 66px);
  }

  .mobile-story[data-mobile-scene="post"] {
    --mobile-story-copy-inset: clamp(66px, 12svh, 101px);
  }

  .mobile-story__pin {
    grid-template-rows: auto var(--mobile-story-full-visual-height) auto;
    align-content: center;
    row-gap: clamp(10px, 1.5svh, 14px);
  }

  .mobile-story__headline,
  .mobile-story__caption {
    transition: transform 600ms var(--mobile-story-ease);
  }

  .mobile-story__headline {
    transform: translateY(var(--mobile-story-copy-inset));
  }

  .mobile-story__caption {
    padding-top: 0;
    transform: translateY(calc(-1 * var(--mobile-story-copy-inset)));
  }

  .mobile-story__caption .accent {
    white-space: nowrap;
  }

  .mobile-story__caption [data-mobile-copy~="rip"] {
    font-size: clamp(23px, 7.2vw, 31px);
  }
}

@media (max-width: 360px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .mobile-story__caption [data-mobile-copy~="rip"] {
    font-size: clamp(21px, 7vw, 26px);
  }
}

@media (max-height: 700px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .mobile-story__caption [data-mobile-copy~="rip"] {
    font-size: clamp(20px, 6.6vw, 26px);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 960px) and (hover: none) and (pointer: coarse) {
  .mobile-story {
    display: none;
  }

  #demo-story-summary {
    position: static !important;
    width: min(100% - 40px, 620px) !important;
    height: auto !important;
    margin: 48px auto !important;
    padding: 24px !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    background: var(--panel);
  }
}