/* Mobile refinement, 10.10.2026. Desktop keeps the complete overview. */
.review-content { display:contents; }
.review-content > a { text-decoration:none; white-space:nowrap; }
.review-toggle, .mobile-step-nav, .mobile-setup-nav, .mobile-setup-copy,
.early-outcome, .map-record-control { display:none; }

@media (max-width:700px), (max-width:900px) and (max-height:500px) {
  html { scroll-padding-top:20px; }
  .review-bar { position:relative; min-height:44px; padding:0 5vw; display:block; }
  .review-toggle { display:flex; width:100%; min-height:44px; align-items:center; justify-content:space-between; border:0; color:#dbe5d0; background:transparent; font:500 12px/1.3 Arial,sans-serif; padding:10px 0; }
  .review-toggle span { font-size:20px; transition:transform .3s ease; }
  .review-toggle[aria-expanded=true] span { transform:rotate(45deg); }
  .review-content { display:none; }
  .review-open .review-content { display:flex; flex-wrap:wrap; align-items:center; gap:8px 15px; padding:0 0 12px; }
  .review-content > a, .review-tools > a { display:flex; align-items:center; min-height:44px; font-size:12px; }
  .review-bar nav { flex:1 1 100%; }
  .review-bar nav a, .review-tools .choose { min-height:44px; display:flex; align-items:center; justify-content:center; font-size:11px; }
  .review-tools { flex:1; justify-content:space-between; }
  .site-header { gap:12px; padding:16px 5vw; }
  .site-header .pd-brand-approved { width:min(220px,calc(100% - 86px)); flex-shrink:1; }
  .site-header .menu-toggle { width:74px; min-width:74px; padding:8px 10px; gap:6px; min-height:44px; font-size:11px; }
  .site-header nav { margin:0; }
  .hero-copy > .eyebrow { font-size:10px; letter-spacing:.09em; }
  .hero-package { font-size:12px; line-height:1.6; }
  .image-credit { font-size:9px; }
  .preview-strip { font-size:10px; flex-wrap:wrap; gap:2px 16px; padding:10px 5vw; }
  .preview-strip a { min-height:44px; display:inline-flex; align-items:center; }
  .hero-actions .text-link, .hero-foot a { min-height:44px; display:inline-flex; align-items:center; }

  /* One large scene at a time, controlled without moving the reader's viewport. */
  .flow-theatre .step-nav { display:none; }
  .flow-theatre { padding:16px 14px 12px; }
  .flow-controls { margin-bottom:8px; }
  .flow-controls > span { font-size:12px; }
  .flow-controls .play-toggle { width:44px; height:44px; }
  .mobile-step-nav, .mobile-setup-nav { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:8px; width:100%; }
  .mobile-step-nav button, .mobile-setup-nav button { width:44px; height:44px; border:1px solid #b6c5a7; border-radius:50%; background:transparent; color:#263a23; font-size:23px; line-height:1; cursor:pointer; }
  .mobile-step-nav button:not(:disabled):hover, .mobile-setup-nav button:not(:disabled):hover { background:var(--lime); }
  .mobile-step-nav button:disabled, .mobile-setup-nav button:disabled { opacity:.35; cursor:default; }
  #mobile-step-label { font-size:14px; font-weight:700; text-align:center; letter-spacing:-.01em; }
  .flow-map { display:flex; align-items:center; justify-content:center; height:242px; margin:14px 0 0; padding:38px 14px 14px; overflow:hidden; border-radius:22px; gap:0; }
  .map-room { top:14px; left:0; right:0; font-size:10px; letter-spacing:.06em; text-align:center; }
  .map-path, .map-arrow { display:none; }
  .flow-map .map-capture, .flow-map .map-local, .flow-map .map-result { display:none; width:100%; }
  .flow-theatre[data-step="0"] .map-result,
  .flow-theatre[data-step="1"] .map-capture,
  .flow-theatre[data-step="2"] .map-local,
  .flow-theatre[data-step="3"] .map-result,
  .flow-theatre[data-step="4"] .map-result { display:flex; }
  .flow-map .map-capture > strong, .flow-map .map-local > strong, .flow-map .map-result > strong { font-size:16px; line-height:1.3; }
  .flow-map .map-start { display:none; }
  .flow-map .speakers { width:86px; }
  .flow-map .map-capture .map-mic { width:140px; height:88px; margin:-5px 0 0; }
  .flow-map .map-local .system-device { transform:scale(.82); transform-origin:center; margin:22px 0 -4px; width:185px; height:110px; }
  .flow-map .map-local > span { font-size:13px; max-width:none; margin-top:4px; }
  .flow-map .map-thought { top:0; left:calc(50% - 27px); width:54px; border-radius:9px; padding:9px; }
  .flow-map .map-thought i { height:3px; margin:5px 0; }
  .flow-map .map-window { width:100%; max-width:250px; min-height:126px; border-radius:14px; margin:0 0 12px; box-shadow:4px 5px 0 #aebf9633; }
  .flow-map .map-window-bar { height:28px; padding:8px 10px; gap:4px; }
  .flow-map .map-window-bar i { width:4px; height:4px; }
  .flow-map .map-window-bar span { font-size:11px; margin-left:6px; }
  .flow-map .map-document { padding:12px; min-height:90px; }
  .flow-map .map-document > strong { display:block; font-size:15px; line-height:1.2; margin:5px 0; }
  .flow-map .map-draft { font-size:10px; }
  .flow-map .screen-mobile-title { display:none; }
  .flow-map .map-document > i { height:3px; margin-top:5px; }
  .flow-map .map-check { font-size:12px; margin-top:8px; }
  .flow-map .map-exports { display:none; flex-direction:row; gap:10px; margin-top:0; }
  .flow-map .map-exports > span { font-size:13px; padding:8px 10px; border-radius:10px; }
  .flow-theatre[data-step="0"] .map-document { display:none; }
  .flow-theatre[data-step="0"] .map-record-control { display:flex; align-items:center; justify-content:center; gap:10px; min-height:110px; padding:16px; font-size:15px; font-weight:600; }
  .map-record-control i { width:15px; height:15px; background:#587b33; border:4px solid #c9f75a; border-radius:50%; box-shadow:0 0 0 5px #c9f75a44; }
  .flow-theatre[data-step="0"].running .map-record-control i { animation:map-record 2.8s ease-in-out infinite; }
  .flow-theatre[data-step="0"] .map-result > strong { display:none; }
  .flow-theatre[data-step="4"] .map-result > strong { display:none; }
  .flow-theatre[data-step="4"] .map-exports { display:flex; }
  .flow-theatre[data-step="4"] .map-window { margin-bottom:8px; }
  .flow-theatre .flow-narration, .variant-nahdran .flow-theatre .flow-narration { display:block; min-height:164px; padding:18px 2px 8px; }
  .flow-narration .narration-count { display:none; }
  .flow-narration h3 { font-size:23px; line-height:1.15; }
  .flow-narration p { font-size:14px; line-height:1.55; }
  .flow-theatre:not(.running) .flow-map * { animation-play-state:paused; }
  .flow-tail { font-size:12px; }
  .flow-tail > a { min-height:44px; margin-top:8px; display:inline-flex; align-items:center; }
  .compact-flow .flow-footnote { font-size:11px; line-height:1.5; }

  /* A useful sample appears before the long-form professional story. */
  .early-outcome { display:block; margin-top:20px; padding:23px 20px 19px; border-radius:23px; background:#f5f3ea; color:#17211d; }
  .early-kicker { font-size:10px; letter-spacing:.1em; font-weight:700; color:#5c7346; }
  #early-context { display:block; font-size:12px; margin-top:16px; color:#536647; }
  #early-title { font-size:26px; letter-spacing:-.035em; line-height:1.15; margin:6px 0 15px; }
  #early-text { font-size:16px; line-height:1.5; border-left:3px solid #b4de55; margin:0; padding:0 0 0 13px; }
  #early-next { font-size:13px; line-height:1.6; margin-top:16px; color:#506047; }
  .early-link { display:flex; align-items:center; justify-content:space-between; min-height:48px; font-size:13px; font-weight:700; text-decoration:none; border-bottom:1px solid #b8c4ad; margin-top:12px; }
  .early-outcome small { display:block; margin-top:12px; font-size:10px; line-height:1.5; color:#66745d; }

  /* Four stages in one compact card. Controls, drawing and explanation stay together. */
  .setup-layout, .variant-nahdran .setup-layout { display:grid; grid-template-columns:1fr; gap:14px; margin-top:24px; padding:16px 12px 8px; border:1px solid #c4d1b4; border-radius:24px; background:#edf0e0; }
  .mobile-setup-nav { order:0; }
  .mobile-setup-nav label { min-width:0; }
  .mobile-setup-nav select { width:100%; min-height:48px; padding:8px 5px; border:0; border-radius:10px; background:transparent; color:#263a23; font-size:16px; font-weight:600; text-align:center; }
  .setup-art, .variant-nahdran .setup-art { order:1; height:242px; border:0; border-radius:18px; }
  .setup-steps { display:none; }
  .mobile-setup-copy { display:block; order:2; min-height:198px; padding:4px 6px 10px; }
  .mobile-setup-copy h3 { font-size:25px; line-height:1.15; letter-spacing:-.04em; margin-bottom:12px; }
  .mobile-setup-copy p { font-size:14px; line-height:1.6; color:#526247; }
  .setup-art-label { top:10px; left:5px; right:5px; font-size:10px; letter-spacing:.08em; }
  .kit-caption { display:none; }
  .kit-device { left:calc(50% - 66px); top:82px; width:134px; height:80px; }
  .kit-device .system-device { transform:scale(.72); transform-origin:top left; }
  .kit-mic { left:calc(50% - 53px); top:101px; width:106px; }
  .kit-box { left:calc(50% - 100px); top:111px; width:200px; height:100px; border-radius:8px 8px 19px 19px; }
  .kit-box b { font-size:17px; }
  .kit-box .robot { width:30px; height:30px; }
  .kit-lid { top:96px; left:calc(50% - 106px); width:212px; height:22px; }
  .setup-art[data-setup="1"] .kit-device { transform:translate(-27px,-36px) rotate(-4deg); }
  .setup-art[data-setup="1"] .kit-mic { transform:translate(54px,-42px) rotate(6deg); }
  .setup-art[data-setup="1"] .kit-box { transform:translateY(34px); opacity:.4; }
  .setup-art[data-setup="1"] .kit-lid { transform:translateY(-80px) rotate(-9deg); }
  .setup-art[data-setup="2"] .kit-device { transform:translate(-39px,77px); }
  .setup-art[data-setup="2"] .kit-mic { transform:translate(58px,67px); }
  .kit-profile, .setup-art[data-setup="2"] .kit-profile { top:26px; right:12px; width:168px; padding:12px 15px; border-radius:15px; }
  .kit-profile > span { font-size:10px; letter-spacing:.04em; }
  .kit-profile strong { font-size:18px; margin:9px 0; }
  .kit-profile p { font-size:12px; line-height:1.6; padding-top:6px; }
  .kit-profile b { display:none; }
  .setup-art[data-setup="2"] .setup-art-label { visibility:hidden; }
  .setup-art[data-setup="3"] .kit-device { transform:translate(-36px,62px); }
  .setup-art[data-setup="3"] .kit-mic { transform:translate(52px,62px); }
  .kit-done { top:56px; left:calc(50% - 118px); width:236px; gap:13px; }
  .kit-done > b { width:44px; height:44px; font-size:24px; flex-shrink:0; }
  .kit-done span { font-size:20px; }
  .setup-scope { font-size:11px; line-height:1.6; margin-top:18px; }

  .site-footer nav { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; margin:22px 0; }
  .site-footer nav a { display:flex; align-items:center; min-height:44px; padding:10px 0; font-size:13px; line-height:1.4; }
  .case-page-link { min-height:44px; display:inline-flex; align-items:center; font-size:12px; }
  .case-story { scroll-margin-top:20px; }
}

@media (max-width:380px) {
  .mobile-step-nav, .mobile-setup-nav { gap:4px; }
  #mobile-step-label { font-size:13px; }
  .mobile-setup-nav select { font-size:16px; letter-spacing:-.04em; }
  .mobile-setup-copy { min-height:218px; }
  .flow-theatre .flow-narration, .variant-nahdran .flow-theatre .flow-narration { min-height:188px; }
}

@media (prefers-reduced-motion:reduce) {
  .flow-map *, .setup-art *, .review-toggle span { animation:none!important; transition:none!important; }
}

/* Landscape phones: keep the drawing beside its explanation within the short view. */
@media (min-width:701px) and (max-width:900px) and (max-height:500px) {
  .flow-theatre { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
  .flow-controls, .mobile-step-nav { grid-column:1/-1; }
  .flow-map { grid-column:1; height:230px; }
  .flow-theatre .flow-narration, .variant-nahdran .flow-theatre .flow-narration { grid-column:2; min-height:0; align-self:center; }
  .setup-layout, .variant-nahdran .setup-layout { grid-template-columns:1fr 1fr; gap:10px 24px; }
  .mobile-setup-nav { grid-column:1/-1; }
  .setup-art, .variant-nahdran .setup-art { grid-column:1; grid-row:2; }
  .mobile-setup-copy { grid-column:2; grid-row:2; min-height:0; align-self:center; }
  .early-outcome { max-width:650px; }
}