/* Mobile is a document, not a viewport-sized animation stage. */
@media (max-width:760px), (pointer:coarse) {
 html.mode-flow { scroll-padding-top:16px; }
 html.mode-flow body>.site-navbar.topbar { position:relative; inset:auto; min-height:0; }
 html.mode-flow main { padding-top:0; }
 html.mode-flow .stage { position:relative; height:auto; overflow:visible; }
 html.mode-flow .intro { position:relative; inset:auto; padding:28px var(--pad) 40px; }
 html.mode-flow .hero-copy .hl { font-size:clamp(36px,10vw,64px); line-height:1; }
 html.mode-flow .hero-copy .persona-job,
 html.mode-flow .hero-copy .future-job { height:auto; min-height:44px; overflow-wrap:anywhere; }
 html.mode-flow .steps { position:static; padding:0 var(--pad); }
 html.mode-flow .step { position:relative; inset:auto; display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:'cap' 'board' 'duo'; gap:20px; height:auto; max-height:none; overflow:visible; padding:36px 0; scroll-margin-top:16px; opacity:1; visibility:visible; transform:none; }
 html.mode-flow .step .cap { max-width:none; width:100%; }
 html.mode-flow .cap h2 { font-size:clamp(28px,7.5vw,40px); line-height:1.08; }
 html.mode-flow .say,html.mode-flow .duo dd { font-size:16px; line-height:1.5; }
 html.mode-flow .duo { width:100%; max-width:none; gap:12px; }
 html.mode-flow .step .board { width:100%; height:auto; min-height:0; max-height:none; overflow:visible; padding:16px; gap:16px; }
 html.mode-flow .board-head { flex-wrap:wrap; gap:12px; }
 html.mode-flow .board-head .b-label { flex-basis:100%; }
 html.mode-flow .hotspot-trigger { max-width:100%; min-height:44px; font-size:12px; }
 html.mode-flow .b-label,html.mode-flow .board-head .b-label { font-size:11px; line-height:1.5; }
 html.mode-flow .mini,html.mode-flow .b-foot { font-size:12px; line-height:1.5; }
 html.mode-flow .scorebar,html.mode-flow .demo-cursor { display:none; }
 html.mode-flow .process-help small { display:none; }

 /* Source material cards get their own rows, so translations cannot overlap. */
 html.mode-flow .expert-kit { display:grid; gap:16px; height:auto; min-height:0; container-type:normal; }
 html.mode-flow .profile-sheet,html.mode-flow .kit-collected { display:none; }
 html.mode-flow .expert-kit>.kit-photo,
 html.mode-flow .expert-kit>.kit-heading,
 html.mode-flow .expert-kit>.kit-material { position:relative; inset:auto; width:100%; height:auto; opacity:1; transform:none; box-shadow:none; }
 html.mode-flow .kit-photo { aspect-ratio:4/3; }
 html.mode-flow .kit-photo img { display:block; width:100%; height:100%; object-fit:cover; }
 html.mode-flow .kit-photo figcaption { font-size:11px; padding:8px; }
 html.mode-flow .kit-heading { gap:8px; }
 html.mode-flow .kit-heading strong { font-size:26px; line-height:1.1; }
 html.mode-flow .kit-heading>span:last-child { font-size:14px; line-height:1.5; }
 html.mode-flow .kit-material { padding:16px; }
 html.mode-flow .material-tag,html.mode-flow .voice-disclosure,html.mode-flow .style-caption { font-size:11px; line-height:1.5; }
 html.mode-flow .offer-mini strong { font-size:24px; line-height:1.15; }
 html.mode-flow .offer-link { display:block; font-size:11px; }
 html.mode-flow .kit-voice p,html.mode-flow .question-message { font-size:15px; line-height:1.5; }
 html.mode-flow .voice-length { display:block; font-size:11px; }
 html.mode-flow .voice-play { min-width:44px; }
 html.mode-flow .kit-progress { display:block; font-size:22px; line-height:1.2; min-height:0; }
 html.mode-flow .kit-phase-in { display:none; }
 html.mode-flow .kit-phase-out { opacity:1; }
 html.mode-flow .kit-insight,html.mode-flow .kit-disclaimer { font-size:13px; line-height:1.5; }

 /* Content, not available viewport height, determines every card's height. */
 html.mode-flow .understand-board .brief { grid-template-columns:minmax(0,1fr); grid-template-rows:none; gap:14px; }
 html.mode-flow .understand-board .brief-tile { grid-template-rows:auto auto auto; height:auto; min-height:0; overflow:visible; padding:16px; }
 html.mode-flow .understand-board .row .v { font-size:16px; line-height:1.5; }
 html.mode-flow .understand-board .row .src { font-size:11px; line-height:1.5; }
 html.mode-flow .brief-profile { flex-wrap:wrap; }
 html.mode-flow .brief-profile div>span:last-child { font-size:11px; line-height:1.4; }
 html.mode-flow .understand-board .brief::before,
 html.mode-flow .understand-board .brief-profile::after { display:none; }
 html.mode-flow .topic-stage .topics { height:auto; display:grid; grid-template-columns:1fr; grid-template-rows:none; gap:12px; padding:0; }
 html.mode-flow .topics-board .topics li { min-height:100px; transform:none; opacity:1; }
 html.mode-flow .topics-board .tt { font-size:20px; line-height:1.15; }
 html.mode-flow .topics-board .sel-l { font-size:10px; line-height:1.4; }
 html.mode-flow .story-grid { grid-template-columns:minmax(0,1fr); grid-template-rows:none; gap:16px; }
 html.mode-flow .story-card { opacity:1; transform:none; }
 html.mode-flow .shot-thumb { flex:none; min-height:0; height:auto; aspect-ratio:4/3; padding:12px; }
 html.mode-flow .shot-overlay { font-size:24px; line-height:1.1; }
 html.mode-flow .story-card figcaption { min-height:0; padding:14px; }
 html.mode-flow .story-card figcaption>span { font-size:11px; }
 html.mode-flow .story-card figcaption p { font-size:16px; line-height:1.5; }
 html.mode-flow .review-workspace { grid-template-columns:minmax(0,1fr); min-height:0; gap:20px; }
 html.mode-flow .review-shot { min-height:0; aspect-ratio:9/16; }
 html.mode-flow .review-thread { gap:16px; }
 html.mode-flow .client-bubble,html.mode-flow .editor-response { padding:16px; }
 html.mode-flow .client-bubble p,html.mode-flow .editor-response p { font-size:15px; line-height:1.5; }
 html.mode-flow .comment-author,html.mode-flow .comment-author small { font-size:11px; line-height:1.4; }
 html.mode-flow .review-caption { font-size:25px; }
 html.mode-flow .revision-diff,html.mode-flow .review-status { display:block; font-size:13px; line-height:1.5; }
 html.mode-flow .gate { flex-wrap:wrap; font-size:20px; line-height:1.15; }
 html.mode-flow .gate .g { font-size:11px; line-height:1.5; }

 html.mode-flow .edit-layout,html.mode-flow .delivery-layout { grid-template-columns:minmax(0,1fr); min-height:0; overflow:visible; gap:20px; flex:auto; }
 html.mode-flow .render-layout { grid-template-columns:minmax(0,1fr); min-height:0; gap:16px; }
 html.mode-flow .render-arrow { text-align:center; transform:rotate(90deg); }
 html.mode-flow .reel-frame,html.mode-flow .before-frame { width:min(100%,280px); height:auto; max-height:none; aspect-ratio:9/16; justify-self:center; }
 html.mode-flow .reel-caption { font-size:24px; line-height:1.12; }
 html.mode-flow .reel-graphic { top:auto; bottom:33%; }
 html.mode-flow .reel-caption { bottom:4%; }
 html.mode-flow .before-frame .reel-caption { bottom:12%; }
 html.mode-flow .reel-tag,html.mode-flow .before-frame figcaption { font-size:10px; line-height:1.4; }
 html.mode-flow .before-frame .reel-caption { font-size:24px; }
 html.mode-flow .edit-side { gap:16px; }
 html.mode-flow .edit-timeline>div { font-size:12px; }
 html.mode-flow .calendar-demo { padding:16px; }
 html.mode-flow .calendar-demo>p { font-size:15px; line-height:1.5; }
 html.mode-flow .render-controls { flex-direction:column; align-items:flex-start; }
 html.mode-flow .render-controls .mini { max-width:100%; }
 html.mode-flow .render-controls .textbtn,html.mode-flow .textbtn { font-size:13px; min-height:44px; white-space:normal; line-height:1.5; }
 html.mode-flow .cover-preview { height:auto; aspect-ratio:4/3; }
 html.mode-flow .cover-preview figcaption { font-size:24px; line-height:1.1; }
 html.mode-flow .pack-files { font-size:15px; line-height:1.4; }
 html.mode-flow .pack-files li { min-height:44px; padding:12px 0; }
 html.mode-flow .pack-files span,html.mode-flow .pack-label { font-size:11px; }
 html.mode-flow .cap-actions .btn { width:100%; white-space:normal; line-height:1.2; padding:16px; }
}