/* Keep the full desktop service content readable on a narrow screen. */
@media (max-width: 760px) {
  .s2 { padding-inline: 16px; }
  .showroom { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .showroom > div { min-width: 0; }
  .showroom-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .showroom-tabs button { min-height: 48px; padding: 11px 10px; font-size: 13px; line-height: 1.5; }
  .showroom .phone {
    width: 100%; max-width: none; min-height: 0; margin: 0;
    border: 1px solid #72849b; border-radius: 14px; box-shadow: none;
    overflow: hidden;
  }
  .showroom .phone-ribbon { padding: 10px 12px; font-size: 11px; line-height: 1.65; }
  .showroom .phone .phone-screen {
    width: 100%; height: auto; min-height: 0; overflow: visible !important;
    scrollbar-width: auto;
  }
  .showroom .showroom-static-screen { width: 100%; height: auto !important; min-height: 0; }
  .showroom .phone-meta { font-size: 12px; line-height: 1.75; margin-top: 12px; }
  .showroom .demo-title { font-size: 25px; line-height: 1.45; }
  .showroom .demo-lead { font-size: 15px; line-height: 1.85; }
  .showroom .note { font-size: 13px; line-height: 1.8; }
  .showroom .guide-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .showroom .guide-button { min-height: 56px; padding: 14px; gap: 12px; }
  .showroom .guide-button em { width: 28px; height: 28px; font-size: 12px; }
  .showroom .guide-button b { font-size: 15px; line-height: 1.6; }
  .showroom .guide-button p { font-size: 14px; line-height: 1.8; }
  .showroom .buttons { align-items: stretch; }
  .showroom .buttons .btn { min-height: 48px; padding: 12px 14px; font-size: 14px; line-height: 1.6; }

  /* The draggable deck needs a viewport; text-based detail pages do not. */
  .showroom[data-active-demo="card"] .phone .phone-screen {
    height: clamp(650px, 88svh, 820px); overflow: hidden !important;
  }
  .showroom[data-active-demo="card"] .actual-swipe-mount,
  .showroom[data-active-demo="card"] .actual-swipe-frame { height: 100%; }
  .showroom[data-active-demo="nest"] .showroom-static-screen > iframe {
    width: 100% !important; max-width: none !important; height: 760px !important;
  }

  .showroom .reference-picture { aspect-ratio: auto !important; }
  .showroom .reference-picture .source-reference-cover { min-height: 0; height: auto; }
  .showroom .reference-picture .source-reference-art { flex: none; min-height: 0; height: 270px; padding: 18px; }
  .showroom .reference-picture .source-reference-art > img { max-height: 240px; }
  .showroom .reference-picture .source-reference-copy { padding: 18px; }
  .showroom .source-reference-copy > strong { font-size: 19px; }
  .showroom .source-reference-copy > p { font-size: 14px; }
  .showroom .source-reference-copy > small { font-size: 12px; }
  .showroom .source-reference-link { min-height: 48px; font-size: 14px; padding: 13px 14px; }

  .showroom .map-benefit-screen { min-height: 0; }
  .showroom .map-benefit-screen > header { padding: 16px; font-size: 19px; }
  .showroom .map-benefit-screen > header small { font-size: 13px; }
  .showroom .tourist-task-map { height: clamp(400px, 62svh, 560px); }
  .showroom .map-task-link { min-height: 64px; padding: 14px; font-size: 14px; }
  .showroom .map-task-link b { font-size: 16px; }
  .showroom .map-task-link small { font-size: 13px; line-height: 1.65; }
  .showroom .map-benefits span { font-size: 12px; padding: 8px; }
  .showroom .map-route-link { min-height: 48px; padding: 13px; font-size: 14px; line-height: 1.6; }

  .showroom .nlrr { font-size: 14px; }
  .showroom .nlrr .nlrr-header { padding: 16px; }
  .showroom .nlrr .nlrr-header strong { font-size: 21px; }
  .showroom .nlrr .nlrr-header small,
  .showroom .nlrr .nlrr-area { font-size: 12px; }
  .showroom .nlrr .nlrr-map { height: clamp(400px, 62svh, 560px); }
  .showroom .nlrr .nlrr-map-meta { padding: 12px; font-size: 12px; }
  .showroom .nlrr .nlrr-map-meta button { min-height: 48px; font-size: 12px; }
  .showroom .nlrr .nlrr-content { padding: 14px; }
  .showroom .nlrr .nlrr-filters button { min-height: 48px; font-size: 14px; }
  .showroom .nlrr .nlrr-route-card { padding: 14px; }
  .showroom .nlrr .nlrr-route-card strong { font-size: 16px; }
  .showroom .nlrr .nlrr-route-card small,
  .showroom .nlrr .nlrr-selected { font-size: 12px; }
  .showroom .nlrr .nlrr-stops summary { min-height: 48px; font-size: 15px; }
  .showroom .nlrr .nlrr-stops summary > b,
  .showroom .nlrr .nlrr-list-intro { font-size: 12px; }
  .showroom .nlrr .nlrr-stop-line b { font-size: 14px; }
  .showroom .nlrr .nlrr-stop-line small { font-size: 12px; }
  .showroom .nlrr .nlrr-activity { min-height: 64px; padding: 12px; }
  .showroom .nlrr .nlrr-activity b { font-size: 15px; }
  .showroom .nlrr .nlrr-activity small { font-size: 12px; }
  .showroom .nlrr .nlrr-demo,
  .showroom .nlrr .nlrr-footer > p,
  .showroom .nlrr .nlrr-along > p { font-size: 12px; }
  .showroom .nlrr .nlrr-navigation { min-height: 48px; font-size: 15px !important; }

  .showroom .ar-demo { width: 100%; max-width: none; min-height: 0; border: 0; border-radius: 0; }
  .showroom .ar-demo .ar-header { padding: 17px 16px; }
  .showroom .ar-demo .ar-content { padding: 16px 16px 0; }
  .showroom .ar-demo .ar-brand h4 { font-size: 23px; }
  .showroom .ar-demo .ar-reset { width: 48px; height: 48px; flex-basis: 48px; }
  .showroom .ar-demo .ar-brand small,
  .showroom .ar-demo .ar-badge { font-size: 12px; }
  .showroom .ar-demo .ar-greeting { font-size: 18px; line-height: 1.55; }
  .showroom .ar-demo .ar-prompts button { min-height: 48px; padding: 10px; font-size: 13px; }
  .showroom .ar-demo .ar-user p,
  .showroom .ar-demo .ar-answer-copy,
  .showroom .ar-demo .ar-drawer p,
  .showroom .ar-demo .ar-unavailable p { font-size: 14px; line-height: 1.85; }
  .showroom .ar-demo .ar-conditions > span { font-size: 12px; padding: 5px 7px; }
  .showroom .ar-demo .ar-card-hero { height: 230px; }
  .showroom .ar-demo .ar-card-hero img { height: 210px; }
  .showroom .ar-demo .ar-card-body { padding: 16px; }
  .showroom .ar-demo .ar-card-title h5 { font-size: 23px; }
  .showroom .ar-demo .ar-save { min-height: 48px; padding: 8px; font-size: 12px; }
  .showroom .ar-demo .ar-match,
  .showroom .ar-demo .ar-entrance small,
  .showroom .ar-demo .ar-activity small,
  .showroom .ar-demo .ar-source { font-size: 12px; line-height: 1.75; }
  .showroom .ar-demo .ar-entrance strong,
  .showroom .ar-demo .ar-activity strong { font-size: 14px; }
  .showroom .ar-demo .ar-card-actions { grid-template-columns: minmax(0, 1fr); }
  .showroom .ar-demo .ar-primary,
  .showroom .ar-demo .ar-sns,
  .showroom .ar-demo .ar-activity { min-height: 48px; padding: 12px; font-size: 14px; }
  .showroom-static-screen[data-agent-focus="question"] .ar-user,
  .showroom-static-screen[data-agent-focus="benefits"] .ar-place-card,
  .showroom-static-screen[data-agent-focus="routes"] .ar-card-actions,
  .showroom-static-screen[data-agent-focus="tasting"] .ar-activity { outline: 3px solid #326ac4; outline-offset: 3px; }
  .showroom .ar-demo .ar-feedback button { min-height: 48px; font-size: 13px; }
  .showroom .ar-demo .ar-status { font-size: 12px; line-height: 1.75; }
  .showroom .ar-demo .ar-composer { padding: 14px 16px; }
  .showroom .ar-demo .ar-composer input { height: 48px; font-size: 16px; }
  .showroom .ar-demo .ar-composer form button { width: 48px; height: 48px; flex-basis: 48px; }
  .showroom .ar-demo .ar-preset { min-height: 48px; font-size: 12px; }
  .showroom .ar-demo .ar-drawer-head button { width: 48px; height: 48px; flex-basis: 48px; }

  /* Show the complete navigation viewport before its controls and explanation. */
  .nj-section { padding-inline: 16px; }
  .nj-showcase { display: flex; flex-direction: column; min-width: 0; background: #fff; color: #23364d; }
  .nj-showcase > .nj-stage { display: contents; }
  .nj-showcase .nj-visual { order: 0; width: 100%; }
  .nj-showcase > .nj-stepper {
    order: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    margin: 0; padding: 12px; background: #f3f7fc; color: #23364d;
  }
  .nj-showcase .nj-stepper button { min-height: 64px; padding: 9px; }
  .nj-showcase .nj-stepper b { font-size: 12px; line-height: 1.5; }
  .nj-showcase .nj-stepper i { font-size: 11px; margin-bottom: 5px; }
  .nj-showcase .nj-story { order: 2; width: 100%; padding: 16px; }
  .nj-showcase .nj-phone { width: 100%; max-width: none; min-height: 0; }
  .nj-showcase .nj-caption { margin: 0; padding: 10px 12px; }
  .showroom .nj-phone { width: 100%; max-width: none; min-height: 0; border: 0; border-radius: 0; }
  .showroom .nj-story > .eyebrow { color: #2857a4; font-size: 12px; }
  .showroom .nj-story h3 { color: #23364d; font-size: 24px; }
  .showroom .nj-caption { margin: 0; padding: 12px 16px; font-size: 12px; color: #607087; background: #fff; }
  .showroom .nj-route-choices { grid-template-columns: minmax(0, 1fr); }
  .showroom .nj-route-choices > button,
  .showroom .nj-experience-modes > button { min-height: 64px; padding: 14px; }
  .showroom .nj-route-choices span { font-size: 12px; }
  .showroom .nj-route-choices strong,
  .showroom .nj-experience-modes b { font-size: 16px; }
  .showroom .nj-story-lead,
  .showroom .nj-muted,
  .showroom .nj-ui-body p,
  .showroom .nj-route-outcome p,
  .showroom .nj-walk-hint p { font-size: 14px; line-height: 1.85; }
  .showroom .nj-app-head { padding: 16px; }
  .showroom .nj-app-head > b { font-size: 16px; }
  .showroom .nj-app-head .nj-badge { font-size: 11px; }
  .showroom .nj-ui-body { padding: 16px; }
  .showroom .nj-route-preview,
  .showroom .nj-route-activity small { font-size: 12px; }
  .showroom .nj-route-activity b { font-size: 15px; }
  .showroom .nj-button { min-height: 48px; padding: 12px 14px; font-size: 14px; }
  .showroom .nj-live-state { font-size: 13px; line-height: 1.75; }

  /* Merchant service screens retain every desktop panel in document flow. */
  .ar-section .ar-related { padding-inline: 0; border-inline: 0; border-radius: 0; }
  .nl-vp { padding: 18px 0; }
  .nl-vp .vp-scene-layout,
  .nl-vp .vp-modal .vp-scene-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .nl-vp .vp-tabs { flex-direction: column; gap: 8px; }
  .nl-vp .vp-tabs > button { flex-direction: row; align-items: center; padding: 12px 14px; min-height: 48px; font-size: 14px; }
  .nl-vp .vp-tab-number { font-size: 12px; }
  .nl-vp .vp-scene-heading h3 { font-size: 22px; }
  .nl-vp .vp-zoom { min-width: 48px; min-height: 48px; }
  .nl-vp .ps-app { width: 100%; max-width: none; border-radius: 12px; box-shadow: none; }
  .nl-vp .ps-app-header { padding: 15px 13px; }
  .nl-vp .ps-app-header > strong { font-size: 19px; flex-wrap: wrap; }
  .nl-vp .ps-app-header strong > span { font-size: 12px; }
  .nl-vp .ps-demo-badge { font-size: 11px; }
  .nl-vp .ps-app-tabs { padding: 0 5px; gap: 3px; }
  .nl-vp .ps-app-tabs button { min-height: 48px; padding: 11px 5px; font-size: 12px; }
  .nl-vp .ps-page-body { padding: 13px; min-height: 0; }
  .nl-vp .ps-title { font-size: 21px; }
  .nl-vp .ps-subtitle,
  .nl-vp .ps-muted,
  .nl-vp .ps-list { font-size: 13px; line-height: 1.8; }
  .nl-vp .ps-grid,
  .nl-vp .ps-capture-layout,
  .nl-vp .ps-recommend-card { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .nl-vp .ps-card { padding: 14px; }
  .nl-vp .ps-card > h4,
  .nl-vp .ps-card h5,
  .nl-vp .ps-delivery-item h5 { font-size: 16px; }
  .nl-vp .ps-card p,
  .nl-vp .ps-bubble,
  .nl-vp .ps-row,
  .nl-vp .ps-checklist label { font-size: 14px; line-height: 1.85; }
  .nl-vp .ps-row { flex-direction: column; gap: 5px; }
  .nl-vp .ps-row strong { text-align: left; }
  .nl-vp .ps-bubble { max-width: 100%; padding: 13px; }
  .nl-vp .ps-bubble small,
  .nl-vp .ps-chat-person small,
  .nl-vp .ps-focus-label,
  .nl-vp .ps-badge,
  .nl-vp .ps-message-status { font-size: 12px; }
  .nl-vp .ps-chat-person strong { font-size: 15px; }
  .nl-vp .ps-slot-grid { grid-template-columns: minmax(0, 1fr); }
  .nl-vp .ps-slot { min-height: 60px; padding: 14px; }
  .nl-vp .ps-slot strong { font-size: 14px; }
  .nl-vp .ps-slot small { font-size: 12px; }
  .nl-vp .ps-button { min-height: 48px; padding: 12px; font-size: 14px; }
  .nl-vp .ps-actions { gap: 9px; align-items: stretch; }
  .nl-vp .ps-actions > .ps-button { flex: 1 1 180px; }
  .nl-vp .ps-photo-grid { grid-template-columns: minmax(0, 1fr); }
  .nl-vp .ps-photo-grid img { width: 100%; height: auto; max-height: none; object-fit: contain; }
  .nl-vp .ps-photo-grid figcaption,
  .nl-vp .ps-credit { font-size: 12px; line-height: 1.8; }
  .nl-vp .ps-screen-capture { width: 100%; max-width: none; }
  .nl-vp .ps-screen-capture > img,
  .nl-vp .ps-capture-image { width: 100%; height: auto; object-fit: contain; }
  .nl-vp .ps-platform-fields > div { font-size: 13px; }
  .nl-vp .ps-booking-summary strong { font-size: 15px; }
  .nl-vp .ps-booking-summary small,
  .nl-vp .ps-app-footer { font-size: 12px; }
  .nl-vp .ps-delivery-item { flex-direction: column; align-items: flex-start; }
  .nl-vp .ps-subpage-tabs > span { font-size: 12px; }
  .nl-vp .vp-factor { min-height: 56px; padding: 14px; }
  .nl-vp .vp-factor strong { font-size: 15px; }
  .nl-vp .vp-factor-body { font-size: 14px; line-height: 1.85; }
  .nl-vp .vp-factor-number,
  .nl-vp .vp-guide,
  .nl-vp .vp-figure figcaption { font-size: 12px; }

  /* Keep the actual navigation and tasting captures full size, not thumbnails. */
  .nj-stage { padding: 12px; }
  .nj-phone { width: 100%; max-width: none; border-width: 1px; border-radius: 14px; min-height: 0; box-shadow: none; }
  .nj-bagel-intro { padding: 14px; }
  .nj-bagel-cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .nj-bagel-cards figure { display: block; }
  .nj-bagel-cards img { width: 100%; height: auto; max-height: none; object-fit: contain; }
  .nj-bagel-cards figcaption { padding: 16px; }
  .nj-bagel-cards b { font-size: 17px; }
  .nj-bagel-cards p { font-size: 14px; line-height: 1.85; }
  .nj-story-lead,
  .nj-route-choices small,
  .nj-experience-modes span { font-size: 14px; line-height: 1.85; }
  .nj-navigation .nj-button,
  .nj-secondary-actions .nj-button { min-height: 48px; font-size: 14px; }
}

/* Each tourist-map view gets enough room for its own map and readable panel. */
.showroom[data-active-demo="map"] .phone .phone-screen { height: auto; overflow: visible; }
.showroom[data-active-demo="map"] .map-benefit-screen { min-height: 0; }
.showroom[data-active-demo="map"] .tourist-task-map { height: 660px; }
.showroom[data-active-demo="map"] [data-map-stage="activity"] .tourist-task-map { height: 840px; }
.showroom[data-active-demo="map"] .map-benefit-screen > header { padding: 12px 15px; font-size: 15px; }
.showroom[data-active-demo="map"] .map-benefit-screen > header small { font-size: 12px; line-height: 1.6; }
@media (max-width: 760px) {
 .showroom[data-active-demo="map"] .tourist-task-map { height: 660px; }
 .showroom[data-active-demo="map"] [data-map-stage="activity"] .tourist-task-map { height: 840px; }
}