/* Plethora landing — phone story (<= 720px).
 *
 * Linked with media="(max-width: 720px)", so desktop never parses it. The
 * markup it styles is section#mobileBitStory in Plethora 4.html; the driver
 * is assets/landing-mobile.js. Layout does not depend on JavaScript: only the
 * reveal/stagger *initial* states are gated on html.mobile-story-ready, which
 * the driver adds, so the content is readable even if the script never runs.
 *
 * Brand: bg #000/#030303, ink #f5f4ee, accent #8dfc63, Inter 900 display,
 * Space Mono body — the same voice as the desktop story.
 */

.mobile-bit-story {
  display: none;
}

@media (max-width: 720px) {
  /* ---- page scroll: the hero is screen one, the story scrolls under it ---- */
  html {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: none;
    background: #000;
  }

  body {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow: visible;
    background: #000;
    touch-action: pan-y pinch-zoom;
  }

  /* The hero is a flow box that fills the small viewport and grows past it when
     the content is taller (short phones, Safari's Smart App Banner). */
  #experience {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
  }

  .landing-page.active {
    position: relative;
    inset: auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  .landing-page,
  .landing-page img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .desktop-bit-scroll {
    display: none !important;
  }

  .mobile-bit-story {
    --mobile-ink: #f5f4ee;
    --mobile-muted: rgba(245, 244, 238, 0.58);
    --mobile-line: rgba(245, 244, 238, 0.14);
    --mobile-green: #8dfc63;
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    background: #000;
    color: var(--mobile-ink);
    font-family: "Space Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
    isolation: isolate;
  }

  .mobile-bit-story *,
  .mobile-bit-story *::before,
  .mobile-bit-story *::after {
    box-sizing: border-box;
  }

  /* ---- hero: touch wording, scroll cue ---- */
  .interaction-hint-coarse[hidden] {
    display: none;
  }

  #mobileScrollIndicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: opacity 0.4s ease;
  }

  #mobileScrollIndicator > span {
    display: block;
    color: rgba(245, 244, 238, 0.62);
    font-family: "Space Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: lowercase;
  }

  #mobileScrollIndicator::after {
    content: "scroll down to know more";
    display: block;
    color: rgba(245, 244, 238, 0.42);
    font-family: "Space Mono", monospace;
    font-size: 10px;
    line-height: 1;
    letter-spacing: -0.02em;
    animation: mobile-cue-bob 2.4s ease-in-out infinite;
  }

  .mobile-progress-segment.is-excluded {
    display: none !important;
  }

  html.has-scrolled #mobileScrollIndicator {
    opacity: 0;
    pointer-events: none;
  }

  @keyframes mobile-cue-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
  }

  /* ---- shared section rhythm ---- */
  .mobile-story-section {
    position: relative;
    width: 100%;
    padding-right: max(22px, env(safe-area-inset-right));
    padding-left: max(22px, env(safe-area-inset-left));
    scroll-margin-top: 24px;
  }

  .mobile-story-kicker {
    margin: 0 0 20px;
    color: var(--mobile-green);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
  }

  [data-mobile-reveal] {
    transition: opacity 0.76s cubic-bezier(0.22, 0.78, 0.24, 1), transform 0.92s cubic-bezier(0.18, 0.82, 0.2, 1);
    will-change: opacity, transform;
  }

  html.mobile-story-ready [data-mobile-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }

  html.mobile-story-ready [data-mobile-reveal].is-visible {
    opacity: 1;
    transform: translateZ(0);
  }

  /* ---- bits intro: "Content that responds. We call them BITS {}" ---- */
  .mobile-bit-intro {
    display: flex;
    min-height: 92svh;
    align-items: center;
    padding-top: 92px;
    padding-bottom: 92px;
    background:
      linear-gradient(rgba(141, 252, 99, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(141, 252, 99, 0.035) 1px, transparent 1px),
      #000;
    background-size: 28px 28px;
  }

  .mobile-bit-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, #000 0%, transparent 18%, transparent 80%, #000 100%);
  }

  .mobile-bit-intro-inner {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  .mobile-bit-intro h2 {
    max-width: 10ch;
    margin: 0;
    color: var(--mobile-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 3rem;
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.03em;
  }

  .mobile-bit-intro h2 > span {
    display: block;
  }

  .mobile-bit-intro h2 > span + span {
    margin-top: 10px;
  }

  .mobile-bit-name-row {
    display: flex !important;
    width: max-content;
    max-width: 100%;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
  }

  .mobile-bits-wordmark {
    display: block;
    width: 112px;
    height: auto;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.16));
  }

  .mobile-bit-brace {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(245, 244, 238, 0.42);
    border-radius: 8px;
    color: #fff;
    font-family: "Space Mono", monospace;
    font-size: 1rem;
    font-style: normal;
    transform: rotate(6deg);
  }

  .mobile-bit-intro-copy {
    max-width: 33ch;
    margin: 34px 0 0;
    color: var(--mobile-muted);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.8;
  }

  /* ---- categories: swipe gallery ---- */
  .mobile-category-section {
    padding: 76px 0 112px;
    background: #000;
  }

  .mobile-category-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 26px;
    padding-right: max(22px, env(safe-area-inset-right));
    padding-left: max(22px, env(safe-area-inset-left));
  }

  .mobile-category-header h3 {
    max-width: 11ch;
    margin: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
  }

  .mobile-card-count {
    flex: 0 0 auto;
    padding-bottom: 3px;
    color: rgba(245, 244, 238, 0.42);
    font-size: 0.75rem;
    line-height: 1;
  }

  .mobile-card-count strong {
    color: var(--mobile-ink);
    font-weight: 400;
  }

  .mobile-card-scroller {
    display: flex;
    width: 100%;
    gap: 14px;
    padding: 0 max(22px, env(safe-area-inset-right)) 12px max(22px, env(safe-area-inset-left));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: max(22px, env(safe-area-inset-left));
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
  }

  .mobile-card-scroller::-webkit-scrollbar {
    display: none;
  }

  .mobile-story-card {
    position: relative;
    flex: 0 0 82vw;
    max-width: 336px;
    height: clamp(430px, 66svh, 560px);
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(245, 244, 238, 0.2);
    border-radius: 8px;
    background: #080a08;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform: translateZ(0);
  }

  .mobile-story-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.88)),
      linear-gradient(90deg, rgba(141, 252, 99, 0.04), transparent 30%);
  }

  .mobile-story-card video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 0.68;
    filter: saturate(0.9) brightness(0.72);
    transition: opacity 0.5s ease, filter 0.5s ease;
  }

  .mobile-story-card.is-current video {
    opacity: 0.9;
    filter: saturate(1.08) brightness(0.9);
  }

  .mobile-story-card-meta {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    pointer-events: none;
  }

  .mobile-story-card-tag {
    width: max-content;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(141, 252, 99, 0.24);
    border-radius: 999px;
    background: rgba(11, 31, 18, 0.78);
    color: rgba(245, 244, 238, 0.86);
    font-size: 0.6875rem;
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .mobile-story-card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }

  .mobile-story-card-bottom p {
    max-width: 24ch;
    margin: 0;
    color: rgba(245, 244, 238, 0.74);
    font-size: 0.75rem;
    line-height: 1.6;
  }

  .mobile-story-card-index {
    color: rgba(245, 244, 238, 0.36);
    font-size: 0.6875rem;
    line-height: 1;
  }

  .mobile-card-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding-right: max(22px, env(safe-area-inset-right));
    padding-left: max(22px, env(safe-area-inset-left));
  }

  .mobile-card-dots {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
  }

  .mobile-card-dot {
    position: relative;
    width: 22px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .mobile-card-dot::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background: rgba(245, 244, 238, 0.18);
    transform: translateY(-50%);
    transition: background-color 0.24s ease, transform 0.24s ease;
  }

  .mobile-card-dot.is-active::after {
    background: var(--mobile-green);
    transform: translateY(-50%) scaleY(1.5);
  }

  .mobile-card-gesture {
    color: rgba(245, 244, 238, 0.34);
    font-size: 0.625rem;
    line-height: 1.4;
    text-align: right;
  }

  /* ---- create: the agent headline, same lowercase Inter 900 as desktop ---- */
  .mobile-creator-section {
    display: grid;
    align-content: center;
    min-height: 84svh;
    padding-top: 56px;
    padding-bottom: 72px;
    background: #000;
  }

  .mobile-creator-shell {
    display: grid;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #f5f4ee;
  }

  .mobile-creator-shell h2 {
    max-width: 11ch;
    margin: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    color: #f5f4ee;
  }

  /* The agent has just finished typing: a block caret after "plethora" (negative margin keeps it off the line width). */
  .mobile-creator-shell h2::after {
    content: "";
    display: inline-block;
    width: 0.44em;
    height: 0.74em;
    margin: 0 -0.7em 0 0.14em;
    vertical-align: -0.02em;
    background: var(--mobile-green);
    box-shadow: 0 0 18px rgba(141, 252, 99, 0.42);
    animation: mobile-creator-caret 1.1s steps(1, end) infinite;
  }

  @keyframes mobile-creator-caret {
    0%, 54% { opacity: 1; }
    55%, 100% { opacity: 0; }
  }

  /* A deck of bit tiles: the {} glyph from the bits intro on the desktop blueprint grid, bottom-right of the statement. */
  .mobile-creator-stack {
    position: relative;
    justify-self: end;
    width: min(46vw, 182px);
    aspect-ratio: 1;
    margin: 58px 30px 22px 0;
    transform: rotate(12deg);
    animation: mobile-creator-float 6s ease-in-out infinite alternate;
    pointer-events: none;
    transition-delay: 0.22s;
  }

  html.mobile-story-ready .mobile-creator-stack {
    transition: opacity 0.9s cubic-bezier(0.22, 0.78, 0.24, 1) 0.22s;
    transform: rotate(12deg);
  }

  html.mobile-story-ready .mobile-creator-stack.is-visible {
    transform: rotate(12deg);
  }

  @keyframes mobile-creator-float {
    from { transform: rotate(12deg) translateY(4px); }
    to { transform: rotate(12deg) translateY(-7px); }
  }

  .mobile-creator-tile {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(141, 252, 99, 0.2);
    border-radius: 22%;
    background:
      linear-gradient(rgba(141, 252, 99, 0.06) 1px, transparent 1px) 0 0 / 18px 18px,
      linear-gradient(90deg, rgba(141, 252, 99, 0.06) 1px, transparent 1px) 0 0 / 18px 18px,
      #030403;
    box-shadow: 0 0 34px rgba(141, 252, 99, 0.08);
    color: var(--mobile-ink);
    font-family: "Space Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 4.5rem;
    font-style: normal;
    line-height: 1;
  }

  .mobile-creator-tile:nth-child(1) {
    transform: translate(-17%, -15%) scale(0.9);
    opacity: 0.42;
  }

  .mobile-creator-tile:nth-child(2) {
    transform: translate(-8.5%, -7.5%) scale(0.95);
    opacity: 0.68;
  }

  .mobile-creator-tile:nth-child(3) {
    border-color: rgba(141, 252, 99, 0.34);
    box-shadow:
      0 22px 54px rgba(0, 0, 0, 0.55),
      0 0 44px rgba(141, 252, 99, 0.14),
      0 0 0 1px rgba(141, 252, 99, 0.05) inset;
  }

  .mobile-creator-tile span {
    transform: translateY(-0.06em);
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.24);
  }

  /* ---- mission: word-by-word reveal ---- */
  .mobile-mission-section {
    min-height: 110svh;
    display: flex;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 100px;
    overflow: hidden;
    background: #000;
  }

  .mobile-mission-bits {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    perspective: 900px;
  }

  .mobile-mission-bits i {
    position: absolute;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(141, 252, 99, 0.32);
    background: rgba(141, 252, 99, 0.09);
    box-shadow: 0 0 14px rgba(141, 252, 99, 0.12);
    transform: scale(var(--bit-scale, 1)) rotate(var(--bit-rotation, 0deg));
    opacity: var(--bit-opacity, 0.3);
  }

  .mobile-mission-bits i:nth-child(1) { left: 8%; top: 17%; --bit-scale: 0.5; --bit-opacity: 0.22; }
  .mobile-mission-bits i:nth-child(2) { left: 72%; top: 11%; --bit-scale: 1.3; --bit-rotation: 18deg; }
  .mobile-mission-bits i:nth-child(3) { left: 89%; top: 33%; --bit-scale: 0.7; --bit-rotation: 32deg; }
  .mobile-mission-bits i:nth-child(4) { left: 18%; top: 48%; --bit-scale: 1.1; --bit-rotation: -14deg; }
  .mobile-mission-bits i:nth-child(5) { left: 63%; top: 58%; --bit-scale: 0.55; --bit-opacity: 0.2; }
  .mobile-mission-bits i:nth-child(6) { left: 84%; top: 76%; --bit-scale: 1.4; --bit-rotation: 8deg; }
  .mobile-mission-bits i:nth-child(7) { left: 12%; top: 84%; --bit-scale: 0.8; --bit-rotation: 26deg; }
  .mobile-mission-bits i:nth-child(8) { left: 46%; top: 91%; --bit-scale: 0.5; --bit-opacity: 0.18; }

  .mobile-mission-inner {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  .mobile-mission-mark {
    width: 68px;
    height: 68px;
    display: block;
    margin: 0 auto 48px;
    filter: drop-shadow(0 0 18px rgba(141, 252, 99, 0.1));
    transition: opacity 0.76s ease, transform 1.1s cubic-bezier(0.18, 0.82, 0.2, 1);
  }

  html.mobile-story-ready .mobile-mission-mark {
    opacity: 0;
    transform: scale(0.72);
  }

  html.mobile-story-ready .mobile-mission-inner.is-visible .mobile-mission-mark {
    opacity: 1;
    transform: scale(1);
  }

  .mobile-mission-copy {
    margin: 0;
    color: rgba(245, 244, 238, 0.92);
    font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: center;
  }

  .mobile-mission-word {
    display: inline;
    transition: color 0.52s ease;
    transition-delay: calc(var(--mobile-word-index) * 24ms + 0.42s);
  }

  html.mobile-story-ready .mobile-mission-word {
    color: rgba(245, 244, 238, 0.2);
  }

  html.mobile-story-ready .mobile-mission-inner.is-visible .mobile-mission-word {
    color: rgba(245, 244, 238, 0.92);
  }

  /* ---- download: same headline as desktop, badges, in-tab store hop ---- */
  .mobile-download-section {
    padding-top: 28px;
    padding-bottom: 90px;
    background: #000;
  }

  .mobile-download-panel {
    position: relative;
    overflow: hidden;
    padding: 32px 22px;
    border: 1px solid rgba(141, 252, 99, 0.17);
    border-radius: 10px;
    background: #0a140d;
  }

  .mobile-download-panel::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -32px;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(141, 252, 99, 0.13);
    transform: rotate(12deg);
  }

  .mobile-download-panel > * {
    position: relative;
    z-index: 1;
  }

  /* The desktop's phone-hand art, rasterised (73 KB) instead of the 2.2 MB SVG. */
  .mobile-download-panel > .mobile-download-art {
    position: absolute;
    top: 50%;
    right: -12%;
    z-index: 0;
    width: 58%;
    height: auto;
    transform: translateY(-46%) rotate(-8deg);
    opacity: 0.42;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%);
    mask-image: linear-gradient(90deg, transparent 0, #000 45%);
  }

  .mobile-download-panel h2 {
    max-width: 12ch;
    margin: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }

  .mobile-download-panel p {
    max-width: 28ch;
    margin: 18px 0 26px;
    color: var(--mobile-muted);
    font-size: 0.75rem;
    line-height: 1.7;
  }

  .mobile-download-button {
    width: 100%;
    min-height: 54px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: var(--mobile-ink);
    color: #050705;
    font-family: "Space Mono", monospace;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mobile-store-badges {
    width: 206px;
    max-width: 76%;
    height: auto;
    display: block;
    margin: 22px 0 0;
    opacity: 0.74;
  }

  /* ---- footer ---- */
  .mobile-site-footer {
    padding: 54px max(22px, env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
    border-top: 1px solid var(--mobile-line);
    background: #000;
  }

  .mobile-footer-logo {
    width: 154px;
    display: block;
  }

  .mobile-footer-logo img {
    width: 100%;
    height: auto;
    display: block;
  }

  .mobile-footer-description {
    max-width: 32ch;
    margin: 24px 0 0;
    color: rgba(245, 244, 238, 0.46);
    font-size: 0.75rem;
    line-height: 1.7;
  }

  .mobile-footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 42px 20px;
    margin-top: 54px;
  }

  .mobile-footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .mobile-footer-column h3 {
    margin: 0 0 3px;
    color: rgba(245, 244, 238, 0.82);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .mobile-footer-column a {
    min-height: 24px;
    color: rgba(245, 244, 238, 0.46);
    font-size: 0.75rem;
    line-height: 1.5;
    text-decoration: none;
  }

  /* Five networks sit on one row under the two link columns. */
  .mobile-footer-column-social {
    grid-column: 1 / -1;
  }

  .mobile-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .mobile-footer-social {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(245, 244, 238, 0.16);
    border-radius: 6px;
  }

  .mobile-footer-social svg {
    width: 17px;
    height: 17px;
  }

  .mobile-footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 54px;
    padding-top: 24px;
    border-top: 1px solid var(--mobile-line);
    color: rgba(245, 244, 238, 0.36);
    font-size: 0.6875rem;
    line-height: 1.5;
  }

  .mobile-footer-legal {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mobile-footer-legal a {
    color: inherit;
    text-decoration: none;
  }
}


/* ---- scroll-pinned choreography (html.mobile-scroll-story, set by the driver) ----
 * A [data-mobile-pin] section is a tall runway; its [data-mobile-pin-stage] sticks
 * to the top for the whole runway while the driver scrubs the content with the
 * page's scroll progress, the way the desktop story pins its sections. */
@media (max-width: 720px) {
  html.mobile-scroll-story [data-mobile-pin] {
    height: calc(var(--mobile-runway, 3.5) * 100vh);
    min-height: 0;
    display: block;
    padding: 0;
    /* A clipping ancestor would turn the sticky stage into a no-op. */
    overflow: visible;
    contain: none;
  }

  html.mobile-scroll-story [data-mobile-pin="mission"] {
    --mobile-runway: 2.8;
  }

  /* 100vh is the large viewport on iOS and Android, so the stage is never shorter
     than what is visible once the browser's toolbars collapse mid-scroll (100svh
     left a black band and a clipping line across the screen on a real iPhone). */
  html.mobile-scroll-story .mobile-pin-stage {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    padding: max(28px, env(safe-area-inset-top)) 0 max(22px, env(safe-area-inset-bottom));
  }

  /* The bits stage clips sideways only: the rising track starts below the screen
     and must never be cut by the stage's own bottom edge. */
  @supports (overflow: clip) {
    html.mobile-scroll-story [data-mobile-pin="bits"] .mobile-pin-stage {
      overflow-x: clip;
      overflow-y: visible;
    }
  }

  /* bits: header on top, the track rises in and scrubs sideways, dots below */
  html.mobile-scroll-story .mobile-category-header {
    margin-bottom: 18px;
  }

  html.mobile-scroll-story .mobile-card-scroller {
    flex: 0 0 auto;
    gap: 14px;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    touch-action: pan-y;
    will-change: transform;
  }

  html.mobile-scroll-story .mobile-story-card {
    flex: 0 0 auto;
    width: auto;
    max-width: 82vw;
    height: min(62svh, 520px);
    aspect-ratio: 9 / 19.5;
    will-change: opacity;
  }

  /* Dots and the scroll hint wait until the first card has fully risen. */
  html.mobile-scroll-story .mobile-card-controls {
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  html.mobile-scroll-story .mobile-pin-stage.is-revealed .mobile-card-controls {
    opacity: 1;
  }

  html.mobile-scroll-story .mobile-card-controls {
    margin-top: 22px;
  }

  html.mobile-scroll-story .mobile-gesture-swipe,
  html:not(.mobile-scroll-story) .mobile-gesture-scroll {
    display: none;
  }

  /* mission: the pixel field and the mark grow in, then the copy lights up */
  html.mobile-scroll-story .mobile-mission-section .mobile-pin-stage {
    align-items: center;
    padding-left: max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
  }

  html.mobile-scroll-story .mobile-mission-bits {
    opacity: 0;
    will-change: opacity;
  }

  html.mobile-scroll-story .mobile-mission-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.mobile-scroll-story .mobile-mission-mark {
    width: 92px;
    height: 92px;
    margin: 0 auto 40px;
    opacity: 0;
    transform: scale(0.58);
    transition: none;
    will-change: transform, opacity;
  }

  html.mobile-scroll-story .mobile-mission-copy {
    opacity: 0.16;
    will-change: opacity;
  }

  html.mobile-scroll-story .mobile-mission-word {
    color: rgba(245, 244, 238, 0.17);
    transition: none;
  }

  /* hero copy dims and lifts as the story takes over, like desktop-scroll-active */
  html.mobile-scroll-story .landing-content {
    will-change: opacity, translate;
  }
}

/* Touch devices read a touch instruction; tablets with a mouse keep "click". */
@media (max-width: 720px) and (hover: none) {
  .interaction-hint-fine {
    display: none;
  }

  .interaction-hint-coarse[hidden] {
    display: inline;
  }
}

/* Small phones */
@media (max-width: 380px) {
  .mobile-bit-intro h2 {
    font-size: 2.625rem;
  }

  .mobile-story-card {
    flex-basis: 84vw;
    height: clamp(410px, 64svh, 500px);
  }

  .mobile-mission-copy {
    font-size: 1.5625rem;
  }
}

/* Phones in landscape: the hero grows with its content instead of clipping. */
@media (max-width: 720px) and (max-height: 480px) {
  /* The hero content's landscape overrides live in the page's inline
     plethora-mobile-hero-overrides block, which comes later in the cascade. */

  #mobileScrollIndicator {
    display: none;
  }

  .mobile-story-card {
    height: clamp(280px, 80svh, 420px);
  }
}

@media (max-width: 720px) and (max-height: 600px) {
  #mobileScrollIndicator::after {
    display: none;
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .mobile-bit-story *,
  .mobile-bit-story *::before,
  .mobile-bit-story *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  html.mobile-story-ready [data-mobile-reveal],
  html.mobile-story-ready .mobile-mission-mark {
    opacity: 1;
    transform: none;
  }

  html.mobile-story-ready .mobile-mission-word {
    color: rgba(245, 244, 238, 0.92);
  }

  #mobileScrollIndicator::after,
  .mobile-creator-shell h2::after,
  .mobile-creator-stack {
    animation: none;
  }
}