/* ============================================================
   ASK MAX — Mobile overrides
   Below 980px (tablets) and below 640px (phones).
   Drops the 1920x1080 master + transform:scale approach.
   Slides become naturally-flowing single-column documents.
   ============================================================ */

@media (max-width: 980px) {
  html { scroll-snap-type: none; }
  body { overflow-y: auto !important; height: auto !important; }

  /* Force all animation classes visible — IntersectionObserver doesn't
     reliably fire on stacked mobile layout, so reveal everything by default. */
  .anim-fade, .anim-up, .anim-up-lg, .anim-up-sm,
  .anim-scale, .anim-left, .anim-right, .anim-blur {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .anim-draw-line { transform: scaleX(1) !important; }

  .deck-slide {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0;
    display: block !important;
    overflow: visible !important;
    scroll-snap-align: none !important;
  }
  .deck-slide + .deck-slide { border-top: 1px solid rgba(15,28,22,0.08); }
  .deck-slide .stage {
    width: 100%;
    height: auto;
    min-height: 0;
    transform: none !important;
    box-shadow: none;
    padding: 40px 20px 48px;
    overflow: visible;
    background: var(--srf-page);
    border-radius: 0;
  }
  /* Dark slides keep their dark background on mobile */
  .s1 .stage, .s6 .stage { background: var(--am-forest-deep) !important; }
  .s1 .stage, .s1 .stage *, .s6 .stage, .s6 .stage * { color: var(--ink-on-dark, #F5F3EE); }

  /* Hide the side nav and progress bar on mobile */
  .deck-nav, .deck-help, .deck-progress { display: none !important; }
  .floating-dot, .pulse-ring { display: none !important; }

  /* Eyebrows + page numbers flow naturally */
  .slide-eyebrow-mark {
    position: static !important;
    margin-bottom: 12px;
    font-size: 9px;
    display: block;
  }
  .slide-eyebrow-mark.dark { color: var(--ink-mut); }
  .slide-pageno {
    position: static !important;
    margin-top: 24px;
    text-align: right;
    font-size: 9px;
  }
  .slide-pageno.dark { color: var(--ink-mut); }

  /* Headlines — softer ramp for narrow viewports */
  .slide-headline, .thesis-line, .meet-headline,
  .s13 .omx-h2, .market-headline h2,
  .benefit-headline h2, .diff-headline h2, .arch-headline h2,
  .s8 .right-flow h2, .s12 .right-chat h2 {
    font-size: clamp(28px, 7vw, 44px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.012em !important;
    text-align: left !important;
    max-width: 100% !important;
    position: static !important;
  }

  .thesis {
    position: static !important;
    text-align: left;
    padding: 0;
  }

  /* Vector grids stack 1-col */
  .vector-grid {
    position: static !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
    margin-top: 24px;
  }
  .vector-tile {
    padding: 18px 16px;
    min-height: 0;
  }
  .vector-tile .vector-icon { width: 36px; height: 36px; }
  .vector-tile .vector-icon .lucide { width: 28px; height: 28px; }
  .vector-tile .vector-label { font-size: 17px; }
  .vector-tile .vector-quote { font-size: 13px; }

  /* Strap lines flow */
  .strap, .s9 .strap, .s10 .strap, .s2 .strap, .s4 .strap,
  .s7 .strap, .s8 .strap, .s11 .strap-block, .s13-strap {
    position: static !important;
    margin-top: 24px;
    text-align: left !important;
    font-size: 16px !important;
    padding: 0 !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
  }
  .s11 .strap-block .top { font-size: 22px !important; line-height: 1.2 !important; }
  .s11 .strap-block .bot { font-size: 14px !important; }

  /* Slide 1 — cover */
  .s1 .hero-photo {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 240px !important;
    margin-bottom: 16px;
  }
  .s1 .hero-vignette { display: none; }
  .s1 .cover-mark {
    position: absolute !important;
    top: 16px;
    left: 20px;
    font-size: 9px;
    color: rgba(245,243,238,0.85) !important;
  }
  .s1 .cover-text {
    position: static !important;
    padding: 16px 0 0;
  }
  .s1 .cover-line {
    font-size: clamp(32px, 9vw, 52px) !important;
    line-height: 1.1 !important;
    color: var(--ink-pri) !important;
  }
  .s1 .cover-line strong { color: var(--am-forest) !important; }
  .s1 .cover-subline { color: var(--ink-mut) !important; font-size: 11px !important; }

  /* Slide 2 problem - eyebrow flow */
  .s2 .thesis-line em, .s3 .thesis-line em { color: var(--am-forest); }

  /* Slide 4 — market */
  .market-headline { position: static !important; margin-bottom: 24px; }
  .nz-map { display: none; }
  .stat-tiles {
    position: static !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .stat-tile { padding: 24px 20px; }
  .stat-figure { font-size: 44px !important; }

  /* Slide 5 — workplaces tagline */
  .s5 .hero-photo {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 220px !important;
    margin-bottom: 16px;
  }
  .s5 .hero-vignette { display: none; }
  .s5 .hero-photo-mid, .s5 .hero-photo-detail { display: none !important; }
  .s5 .tagline-block {
    position: static !important;
    text-align: left !important;
  }
  .s5 .tagline-eyebrow {
    color: var(--am-forest) !important;
    margin-bottom: 16px;
  }
  .s5 .tagline {
    font-size: clamp(48px, 12vw, 80px) !important;
    color: var(--ink-pri) !important;
    line-height: 0.95 !important;
  }
  .s5 .tagline strong { color: var(--am-forest) !important; }
  .s5 .tagline-sub {
    position: static !important;
    top: auto !important; left: auto !important;
    margin: 24px 0 0 !important;
    max-width: 100% !important;
    text-align: left !important;
    font-size: clamp(22px, 5.5vw, 32px) !important;
    color: var(--ink-pri) !important;
    line-height: 1.2 !important;
  }
  .s5 .tagline-sub strong { color: var(--am-forest) !important; }

  /* Slide 6 — Meet Max */
  .s6 .meet-headline { position: static !important; font-size: clamp(56px, 16vw, 96px) !important; left: auto !important; top: auto !important; }
  .s6 .meet-bodyline { position: static !important; font-size: 16px !important; max-width: 100% !important; margin-top: 16px; }
  .composite-stage {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    inset: auto !important;
    padding: 16px 0;
    display: block !important;
  }
  .composite-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9;
    border-width: 4px !important;
  }
  .s6 .callout { display: none !important; }
  .meet-final-caption {
    position: static !important;
    margin: 16px 0 0 !important;
    font-size: 14px !important;
    text-align: left !important;
  }

  /* Slide 7 — mind-map flattens to vertical list */
  .ask-headline { position: static !important; }
  .ask-headline h2 { font-size: clamp(22px, 6vw, 32px) !important; line-height: 1.2; }
  .mindmap-stage {
    position: static !important;
    inset: auto !important;
    padding: 16px 0;
    display: block !important;
  }
  .mindmap {
    width: 100% !important;
    height: auto !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .mindmap-lines { display: none; }
  .mindmap-centre {
    position: static !important;
    transform: none !important;
    text-align: center;
    margin: 0 0 24px;
  }
  .mindmap-ball {
    margin: 0 auto !important;
    width: 140px !important;
    height: 140px !important;
  }
  .mindmap-ball::before, .mindmap-ball::after { display: none; }
  .mindmap-centre .label { position: static !important; transform: none !important; margin-top: 12px; }
  .branch {
    position: static !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    transform: none !important;
    width: 100% !important;
  }

  /* Slide 8 + 12 — image-left/right-content stacks */
  .s8 .left-photo, .s12 .left-photo {
    position: static !important;
    width: 100% !important;
    height: 240px !important;
    margin-bottom: 16px;
    inset: auto !important;
  }
  .s8 .right-flow, .s12 .right-chat {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    inset: auto !important;
  }
  .flow-step { padding: 14px 16px; }
  .chat-stream { gap: 8px; }
  .chat-turn { max-width: 92%; font-size: 13px; }

  /* Slide 9 — benefit cards stack */
  .benefit-headline { position: static !important; padding: 0; }
  .benefit-cards {
    position: static !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
    margin-top: 16px;
  }
  .benefit-card { padding: 24px 20px; }
  .benefit-card .what { font-size: 24px !important; }
  .benefit-card .body { font-size: 14px; }

  /* Slide 10 — diff table scrolls horizontally */
  .diff-headline { position: static !important; }
  .diff-table {
    position: static !important;
    margin-top: 16px;
    overflow-x: auto;
  }
  .diff-row {
    grid-template-columns: 180px 70px 70px 70px 120px !important;
    min-width: 510px;
  }

  /* Slide 11 — architecture pipeline stacks */
  .arch-headline { position: static !important; }
  .pipeline {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    gap: 16px;
    margin-top: 16px;
  }
  .arch-col { display: flex; flex-direction: column; gap: 10px; }
  .arch-col .col-label { padding-bottom: 8px; }
  .arch-arrow {
    padding: 0 !important;
    height: 24px;
    flex: 0 0 24px;
  }
  .arch-arrow::after { font-size: 22px; transform: rotate(90deg); display: inline-block; }
  .arch-tile { padding: 14px 16px; }

  /* Slide 13 — roadmap timeline scrolls horizontally */
  .omx-timeline-head { position: static !important; }
  .omx-eyebrow { padding-bottom: 6px; }
  .omx-timeline.six {
    position: static !important;
    grid-template-columns: repeat(6, minmax(170px, 1fr));
    overflow-x: auto;
    padding: 16px 4px;
    gap: 10px;
  }
  .omx-stage { padding: 14px 12px; }
  .omx-stage.hero { transform: none; }
  .ask-nested-label, .ask-nested {
    position: static !important;
    margin-top: 24px;
  }
  .ask-nested {
    flex-direction: column;
    gap: 10px;
  }
  .an-arrow { transform: rotate(90deg); align-self: center; }
}

@media (max-width: 640px) {
  /* Phone-only tightening */
  .deck-slide { padding: 16px 0; }
  .deck-slide .stage { padding: 20px 16px; }

  .vector-tile .vector-label { font-size: 16px; }
  .vector-tile .vector-quote { font-size: 12px; }
  .stat-figure { font-size: 36px !important; }
  .benefit-card .what { font-size: 22px !important; }

  .diff-row {
    grid-template-columns: 150px 60px 60px 60px 110px !important;
    min-width: 440px;
    font-size: 11px;
  }
  .diff-row > div { padding: 8px 10px; }
  .diff-row.head > div { padding: 8px 10px; font-size: 9px; }

  .omx-timeline.six { grid-template-columns: repeat(6, minmax(140px, 1fr)); }
  .omx-stage .os-name { font-size: 13px !important; }
  .an-phase .an-figure { font-size: 18px !important; }
}