/* Alternate flow content is absent from the desktop layout and reading order. */
.data-flow-mobile { display: none; }

/* Keep all existing desktop rules intact. Mobile previews reflow at their
   available width instead of shrinking or clipping a desktop-sized canvas. */
@media (max-width: 760px), (max-width: 980px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  html.home-paged { --home-page-top: 56px; }

  .product-story .story-controls,
  .product-story .story-stage,
  .product-story .story-runtime-wrap { min-width: 0; }
  .product-story #story-panel { min-height: 0 !important; }
  .product-story .story-copy h3 { margin-inline: auto; }
  .product-story .story-copy p { white-space: normal; }
  .product-story .story-grid { gap: 20px; }
  .product-story .story-tabs {
    --story-tab-width: clamp(140px, 40vw, 160px);
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
    margin-top: 20px;
    padding-inline: calc((100% - var(--story-tab-width)) / 2);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .product-story .story-tabs::-webkit-scrollbar { display: none; }
  .product-story .story-tab {
    flex: 0 0 var(--story-tab-width);
    width: var(--story-tab-width);
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    scroll-snap-align: center;
  }
  .product-story .story-tab-label { white-space: nowrap; }
  .product-story .story-tab::after { inset-inline: 8px; bottom: 0; }
  .product-story .story-copy--top,
  .product-story .story-stage { touch-action: pan-y; }
  .product-story .story-grid.is-page-leaving .story-runtime-card {
    animation-name: story-mobile-leave;
  }
  .product-story .story-grid.is-page-entering .story-runtime-card {
    animation-name: story-mobile-enter;
  }
  .product-story .story-showcase {
    height: auto;
    min-height: 420px;
    padding: clamp(12px, 3vw, 20px);
    justify-items: center;
    border-radius: 22px;
  }
  .product-story .story-runtime-wrap {
    width: min(100%, 540px);
    max-width: 100%;
    margin-inline: auto;
  }
  .product-story .story-runtime-card { padding: 0; border-radius: 16px; }
  .agent-runtime {
    --agent-type-header: 13px;
    --agent-type-prompt: 12px;
    --agent-type-section: 12px;
    --agent-type-title: 14px;
    --agent-type-answer: 15px;
    --agent-type-body: 12px;
    --agent-type-meta: 11px;
    --agent-type-label: 11px;
    --agent-type-value: 13px;
    min-height: 0;
  }
  .agent-runtime-head { padding-inline: 10px; }
  .agent-runtime-chat { padding: 8px 12px 16px; }
  .agent-runtime-result.is-visible { max-height: none; }
  .agent-result-heading { flex-wrap: wrap; row-gap: 4px; }
  .agent-result-heading-meta { margin-inline-start: 0; }
  .agent-result-surface { padding: 12px; }
  .agent-food-head { grid-template-columns: 108px minmax(0, 1fr); }
  .agent-food-visual { min-height: 104px; height: 104px; }
  .agent-food-thumb { min-height: 0; height: 88px; }
  .agent-food-copy { padding: 12px; }
  .agent-food-overview {
    grid-column: 1 / -1;
    padding: 8px 10px;
  }
  .agent-food-signal-top { display: flex; flex-wrap: wrap; gap: 6px; }
  .agent-food-detail-head { flex-wrap: wrap; gap: 4px; }
  .agent-overview-scores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent-overview-score {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 3px;
    min-height: 48px;
    padding: 5px 6px 9px;
  }
  .agent-overview-score > span { font-size: 10px; white-space: normal; }
  .agent-food-ingredient-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-ai-summary { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .agent-reaction-head { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
  .agent-reaction-thumb { width: 44px; height: 44px; }
  .agent-reaction-impact { grid-column: 1 / -1; }
  .agent-reaction-details { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .agent-stats-chart-head { flex-wrap: wrap; gap: 8px; }
  .agent-stats-summary-line { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .agent-stats-chart-tooltip { position: relative; left: auto !important; top: auto !important; bottom: auto; width: 100%; max-width: 100%; margin-top: 10px; transform: none; }
  .agent-stats-chart-tooltip::before { display: none; }
  .agent-stats-latest-label { font-size: 10px; }
  .agent-stats-latest-values { font-size: 10px; gap: 6px; }
  .agent-comparison-context,
  .agent-weekly-layout,
  .agent-clinician-layout { grid-template-columns: minmax(0, 1fr); }
  .agent-weekly-recipe-head { flex-wrap: wrap; gap: 4px; }
  .agent-weekly-recipe-head span { white-space: normal; }
  .agent-weekly-recipe-copy p,
  .agent-weekly-recipe-head span,
  .agent-weekly-grocery-line strong { font-size: 11px; line-height: 1.5; }
  .agent-comparison-evidence { flex-wrap: wrap; }

  .data-flow-viewport {
    width: 100%;
    margin-inline: 0;
    padding: 16px 0 0;
    overflow: visible;
  }
  .data-flow-canvas,
  .home-paged .data-flow-canvas { display: none; }
  .data-flow-mobile { display: block; width: min(calc(100% - 16px), 360px); margin-inline: auto; }
  .mobile-flow-steps { list-style: none; margin: 0; padding: 0; }
  .mobile-flow-card {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
  }
  .mobile-flow-card header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
  .mobile-flow-card h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
  .mobile-flow-example {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.4;
    margin-inline-start: auto;
  }
  .mobile-flow-example img { width: 18px; height: 14px; border-radius: 3px; object-fit: cover; }
  .mobile-flow-card dl { display: grid; gap: 8px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--component-border); }
  .mobile-flow-card dl > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: baseline; }
  .mobile-flow-card dt { color: var(--text-secondary); font-size: 11px; }
  .mobile-flow-card dd { margin: 0; color: var(--text-primary); font-size: 12px; line-height: 1.45; text-align: end; overflow-wrap: anywhere; }
  .mobile-flow-output { padding-top: 8px; border-top: 1px solid var(--component-border); }
  .mobile-flow-output dd { font-weight: 600; }
  .mobile-flow-connector { position: relative; display: flex; justify-content: center; align-items: center; min-height: 44px; }
  .mobile-flow-connector::before { content: ""; position: absolute; inset-block: 0 4px; inset-inline-start: 50%; border-inline-start: 1px dashed var(--border); }
  .mobile-flow-connector::after { content: ""; position: absolute; bottom: 2px; left: calc(50% - 3px); width: 7px; height: 7px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); }
  .mobile-flow-connector span { position: relative; padding: 4px 10px; border-radius: 6px; background: #E0F2F1; color: #2F7867; font-size: 11px; line-height: 1.4; }
  .mobile-flow-connector--food span { background: #F3F8E6; color: #5E6F18; }
  .mobile-flow-connector--risk span { background: #FFF8E1; color: #A85B00; }
  .mobile-flow-return { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin-top: 16px; padding: 10px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface); color: var(--text-secondary); font-size: 12px; text-decoration: none; }
  .mobile-flow-return svg { display: block; flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-flow-return span { display: block; line-height: 18px; }
  .mobile-flow-note { margin: 12px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; text-align: center; }

  .life-link-header { text-align: start; }
  .life-link-visual { width: min(100%, 440px); padding: 24px 0 16px; }
  .life-link-source { height: auto; }
  .life-link-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .life-link-connectors,
  .life-link-bridge { display: none; }
  .life-link-card { height: auto; min-height: 260px; padding: 14px; }
  .life-link-card-head { flex-wrap: wrap; }
  .life-link-card-head strong { white-space: normal; }
  .care-portal-records { margin-top: 0; }
  .life-link-feedback { flex-direction: column; gap: 10px; margin-top: 28px; }

  .comparison-table-wrap { width: 100%; margin-inline: 0; padding-inline: 0; }
  .comparison-table { min-width: 0; }
  .comparison-table col:first-child { width: 42%; }
  .comparison-table col:nth-child(2),
  .comparison-table col:nth-child(3) { width: 29%; }
  .comparison-table thead th { padding: 0 6px 12px; font-size: 16px; overflow-wrap: anywhere; }
  .comparison-table tbody th,
  .comparison-table tbody td { padding: 12px 6px; line-height: 1.45; overflow-wrap: anywhere; }
  .comparison-table tbody th { font-size: 12px; }
  .comparison-table tbody td { font-size: 11px; }
  .comparison-product-heading { display: inline; }
  .comparison-product-heading::before { display: inline-block; width: 6px; height: 6px; margin-inline-end: 4px; vertical-align: middle; }
  #diet-management .articles-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  #diet-management .section-title { font-size: clamp(30px, 8.5vw, 36px); }

  /* The Care page keeps the same mock records, with room for their labels. */
  .care-agentic .site-header { top: 0; left: 0; right: 0; min-height: 76px; padding: 10px 20px; background: rgba(16, 21, 18, .94); }
  .care-agentic .story-scene { scroll-padding-block-start: 88px; }
  .care-agentic .mobile-nav:not([hidden]) { top: 76px; max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; }
  .care-agentic .portal-figure { width: 100%; max-width: 560px; margin-inline: auto; }
  .care-agentic .portal-window { height: auto; min-height: 0; --portal-label: 11px; --portal-body: 12px; --portal-heading: 13px; }
  .care-agentic .portal-topline { height: auto; min-height: 40px; flex-wrap: wrap; padding: 10px 12px; }
  .care-agentic .portal-person { flex-wrap: wrap; }
  .care-agentic .portal-person > small { margin-inline-start: 0; }
  .care-agentic .portal-tabs { flex-wrap: wrap; overflow: visible; gap: 0 8px; }
  .care-agentic .portal-tabs span { min-height: 32px; padding-inline: 3px; font-size: 10px; }
  .care-agentic .portal-card-heading { flex-wrap: wrap; gap: 4px 10px; }
  .care-agentic .portal-card-heading small { white-space: normal; }
  .care-agentic .profile-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .care-agentic .profile-grid strong { font-size: 12px; }
  .care-agentic .portal-metrics { grid-template-columns: minmax(0, 1fr); padding: 0 12px; }
  .care-agentic .portal-metrics > div { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 12px 0; border-inline-end: 0; }
  .care-agentic .portal-metrics > div + div { border-top: 1px solid var(--portal-line); }
  .care-agentic .portal-metrics span { grid-column: 1 / -1; }
  .care-agentic .portal-metrics strong { font-size: 13px; white-space: normal; text-align: end; }
  .care-agentic .portal-metrics small,
  .care-agentic .portal-metrics span { font-size: 11px; }
  .care-agentic .coverage-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; font-size: 11px; }
  .care-agentic .coverage-row strong { font-size: 11px; }
  .care-agentic .coverage-row i { grid-column: 1 / -1; }
  .care-agentic .meal-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .care-agentic .meal-grid strong { font-size: 13px; }
  .care-agentic .meal-grid span { font-size: 11px; }
  .care-agentic .chart-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .care-agentic .chart-grid > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
  .care-agentic .chart-grid > div > small { grid-column: 1 / -1; }
  .care-agentic .donut { width: 88px; margin: 0; }
  .care-agentic .chart-legend { min-width: 0; margin: 0; }
  .care-agentic .chart-legend span { white-space: normal; gap: 3px; }
  .care-agentic .legend-dot { flex-shrink: 0; }
  .care-agentic .checkin-table > div { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-block: 8px; font-size: 10px; }
  .care-agentic .checkin-table span:last-child { grid-column: 1 / -1; white-space: normal; overflow: visible; }
  .care-agentic .checkin-head span:last-child { display: none; }
  .care-agentic .checkin-table > div:not(.checkin-head) span:last-child::before { content: "Patient context: "; color: var(--portal-muted); }
  .care-agentic .timeline-legend { font-size: 10px; gap: 8px 12px; }
  .care-agentic .message-layout { grid-template-columns: minmax(0, 1fr); }
  .care-agentic .message-layout .portal-card { min-height: 0; }
  .care-agentic .care-loop { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; }
  .care-agentic .care-loop li { grid-area: auto; min-height: 0; padding: 24px 16px; border: 0; }
  .care-agentic .care-loop li + li { border-top: 1px solid #dce2d3; }
  .care-agentic .care-loop strong { max-width: none; margin-top: 14px; }
}

@keyframes story-mobile-leave {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(calc(var(--story-page-direction) * -32px)) scale(.985); }
}

@keyframes story-mobile-enter {
  from { opacity: 0; transform: translateX(calc(var(--story-page-direction) * 32px)) scale(.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}