/* Mobile readability and touch layout. Desktop content and promises stay intact. */
.product-browser[data-protected]::after,
.ai-operations-board[data-protected]::after { pointer-events: none; }

@media (max-width: 1120px) {
  .site-header .main-nav.open {
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 920px) {
  html { scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
  body { overflow-wrap: break-word; --slate-600: #49657c; }
  main, .shell, .contact-form, .contact-card, .form-row,
  .product-browser, .product-caption, .ai-operations-board { min-width: 0; }
  .site-header .main-nav.open { left: 16px; right: 16px; top: 76px; padding: 10px; }
  .site-header .main-nav:not(.open) { display: none; }
  .site-header .main-nav.open { display: flex; flex-direction: column; align-items: stretch; }
  .main-nav.open > a { min-height: 48px; font-size: 16px; }
  .menu-toggle { flex: 0 0 46px; cursor: pointer; }
  .brand { min-height: 44px; }
  .menu-toggle:focus-visible { outline: 3px solid #e39b42; outline-offset: 3px; }

  /* Six visible choices, rather than an almost invisible horizontal tab strip. */
  .product-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 6px;
  }
  .product-tabs button { min-width: 0; min-height: 48px; padding: 11px 8px; font-size: 14px; line-height: 1.4; }
  .product-caption > a, .connected-story-footer > a, .text-link,
  .offer-note > a, .security-home-footer > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    font-size: 14px;
    line-height: 1.6;
  }

  /* Comfortable native inputs, including iPhone focus without tiny text. */
  .contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea {
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    padding: 12px;
    font: 400 16px/1.5 "DM Sans", Arial, sans-serif;
  }
  .contact-form textarea { min-height: 154px; }
  .contact-form label > span { font-size: 14px; line-height: 1.5; }
  .contact-form label > span > small { font-size: 12px; font-weight: 500; }
  .contact-form .consent { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
  .contact-form .consent input { width: 24px; height: 24px; margin: 2px 0 0; }
  .contact-form .consent span { font-size: 14px; line-height: 1.7; }
  .anti-bot-control strong { font-size: 14px; }
  .anti-bot-control small, .form-status { font-size: 13px; line-height: 1.7; }
  .contact-form .button { min-height: 52px; padding: 14px 12px; font-size: 14px; line-height: 1.5; }
  .form-heading span { font-size: 20px; line-height: 1.4; }
  .form-heading small { font-size: 11px; }
  .contact-form :is(input, textarea, select, button):focus-visible {
    outline: 3px solid #2379df;
    outline-offset: 3px;
  }

  .footer-links a, .footer-bottom nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    line-height: 1.6;
  }
  .footer-links { gap: 2px; }
  .footer-links > strong { margin-bottom: 8px; font-size: 12px; }
  .footer-bottom { align-items: flex-start; gap: 12px; }
  .footer-bottom nav { flex-wrap: wrap; gap: 0 18px; }
  .footer-bottom > span, .footer-note p { font-size: 13px; line-height: 1.7; }
  .legal-card { overflow-wrap: anywhere; }
  .legal-card p, .legal-card li { font-size: 16px; line-height: 1.75; }

  /* Also readable in phone landscape and on a small tablet. */
  .button { min-height: 48px; font-size: 14px; line-height: 1.5; }
  .film-transcript summary { min-height: 48px; font-size: 14px; line-height: 1.5; }
  .agent-preview-week header > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
  .agent-preview-week header p, .agent-preview-notice, .planning-explanation,
  .connected-workstation > p, .phone-notification p, .briefing-overlay p,
  .offer-note p, .workflow-route article p, .workflow-panel > footer p,
  .integration-cards p, .home-security-grid p, .security-home-footer p,
  .demo-expectations p { font-size: 14px; line-height: 1.7; }
  .agent-rest, .connected-scene-label { font-size: 12px; line-height: 1.7; }
  .agent-stat b, .agent-stat > small { font-size: 12px; line-height: 1.6; }
  .agent-shift strong, .agent-shift span, .agent-shift small { font-size: 12px; line-height: 1.6; }
  .timeline-person span { font-size: 12px; }
  .essential-note span { font-size: 14px; line-height: 1.7; }
  .essential-note strong { font-size: 15px; line-height: 1.6; }
  .integration-cards small { font-size: 11px; line-height: 1.6; }
  .ai-board-head small, .ai-board-head > b,
  .ai-situation-grid header > span, .ai-situation-grid header b,
  .ai-recommendation small { font-size: 11px; line-height: 1.6; }
  .ai-board-head strong { font-size: 16px; line-height: 1.5; }
  .ai-question-strip { flex-wrap: wrap; overflow: visible; }
  .ai-question-strip span { font-size: 12px; line-height: 1.6; }
  .ai-situation-grid article { min-width: 0; }
  .ai-situation-grid header { flex-wrap: wrap; gap: 8px; }
  .ai-situation-grid article > p, .ai-recommendation p,
  .ai-recommendation strong, .fma-focus li strong,
  .daily-brief p strong { font-size: 14px; line-height: 1.7; }
  .coverage > div small, .skills > em,
  .fma-focus li small, .daily-brief p span { font-size: 12px; line-height: 1.7; }
  .ai-recommendation button { min-height: 44px; font-size: 13px; line-height: 1.5; }
}

@media (min-width: 591px) and (max-width: 920px) {
  .product-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 590px) {
  .shell { width: calc(100% - 32px); }
  .product-tabs, .product-showcase, .workflow-tabs, .workflow-stage,
  .workflow-more, .offer-note, .security-home-footer { width: calc(100% - 32px); }
  .header-inner { min-height: 74px; }
  .presentation-hero { padding-top: 106px; }
  .presentation-hero h1 { font-size: clamp(29px, 7.8vw, 38px); line-height: 1.16; }
  .presentation-hero .hero-lead { font-size: 16px; line-height: 1.75; }
  .presentation-hero .button { min-height: 50px; padding: 13px 12px; font-size: 14px; line-height: 1.5; }
  .presentation-hero .eyebrow { font-size: 11px; line-height: 1.6; }
  .presentation-hero .hero-trust { gap: 12px 16px; font-size: 12px; line-height: 1.5; }
  .film-card figcaption strong, .film-play strong { font-size: 15px; }
  .film-card figcaption p, .film-transcript p { font-size: 14px; line-height: 1.7; }
  .film-play small { font-size: 12px; }
  .film-transcript summary { min-height: 48px; padding: 15px 16px; font-size: 14px; line-height: 1.5; }
  .proof-strip > div { padding: 18px; min-height: 0; }
  .proof-strip strong { font-size: 16px; }
  .proof-strip small { font-size: 13px; line-height: 1.6; }
  .connected-levels p, .connected-levels li small { font-size: 13px; line-height: 1.65; }
  .connected-levels li span { font-size: 11px; }
  .connected-levels ol { column-gap: 14px; }
  .eyebrow { line-height: 1.6; }
  /* Long cards remain readable during fast touch scrolling, without reveal lag. */
  .js .reveal, .js .reveal.visible { opacity: 1; transform: none; transition: none; }
  .product-proof-heading h2, .organisation-heading h2, .connected-story-heading h2,
  .briefing-copy h2, .workflow-heading h2, .centered-heading h2,
  .integration-copy h2, .faq-heading h2, .security-heading h2,
  .deployment-copy h2 { font-size: clamp(28px, 7.8vw, 34px); line-height: 1.18; }
  .product-proof-heading h2 em, .centered-heading h2 em, .workflow-heading h2 em,
  .faq-heading h2 em, .integration-copy h2 em, .deployment-copy h2 em {
    color: #a32860;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  .product-proof-heading > p, .organisation-heading > p, .organisation-options p,
  .connected-story-heading > p, .briefing-copy > p, .essential-copy > p,
  .offer-tier > p, .essential-features p, .difference-grid p,
  .workflow-heading > p, .ai-copy > p, .integration-copy > p,
  .integration-cards p, .security-heading > p, .home-security-grid p,
  .deployment-copy p, .deployment-steps p, .faq-heading > p,
  .faq-list details p, .contact-copy > p { font-size: 16px; line-height: 1.75; }
  .product-caption { padding: 22px 18px; }
  .product-caption p { font-size: 15px; line-height: 1.75; }
  .product-caption > small { font-size: 12px; }
  .product-browser-bar { min-height: 34px; padding-inline: 12px; }

  /* The same seven days become a readable phone agenda, with no sideways swipe. */
  .product-image-wrap.is-agent-preview { padding: 12px; }
  .agent-preview-label { gap: 6px; }
  .agent-preview-label > span, .agent-preview-label small { font-size: 11px; line-height: 1.6; }
  .agent-preview-stats { gap: 8px; }
  .agent-stat { padding: 12px; min-height: 148px; }
  .agent-stat b { font-size: 12px; line-height: 1.5; }
  .agent-stat > small { font-size: 12px; line-height: 1.6; }
  .agent-stat > strong { margin-top: 12px; font-size: 26px; }
  .agent-service > strong { font-size: 20px; }
  .agent-preview-week > header { flex-direction: column; align-items: stretch; padding: 15px 12px; }
  .agent-preview-week header small { font-size: 11px; }
  .agent-preview-week header p { font-size: 13px; line-height: 1.6; }
  .agent-preview-week header > a { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
  .agent-week-scroll { padding: 10px; overflow-x: visible; }
  .agent-week-days { grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 8px; }
  .agent-week-days > li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 70px; padding: 10px; }
  .agent-week-days time { flex-direction: column; justify-content: center; gap: 3px; padding: 0; }
  .agent-week-days time > span { font-size: 11px; }
  .agent-week-days time > b { font-size: 21px; }
  .agent-shift { min-height: 0; padding: 10px; }
  .agent-shift strong { font-size: 14px; line-height: 1.5; }
  .agent-shift span { margin-top: 4px; font-size: 13px; line-height: 1.5; }
  .agent-shift small { margin-top: 4px; font-size: 12px; line-height: 1.6; }
  .agent-rest { margin: 0; font-size: 13px; line-height: 1.6; }
  .agent-preview-week footer > span, .agent-preview-week footer > small,
  .agent-preview-notice { font-size: 12px; line-height: 1.7; }

  .organisation-options h3 { font-size: 18px; line-height: 1.4; }
  .planning-example > header small, .planning-example > header > span { font-size: 11px; line-height: 1.6; }
  .planning-view-tabs button { font-size: 13px; min-height: 48px; }
  .slot-example { grid-template-columns: 60px repeat(3, minmax(0, 1fr)); gap: 4px; }
  .slot-example > *, .slot-example > b { min-height: 48px; padding: 6px 3px; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
  .planning-explanation { min-height: 0; font-size: 14px; line-height: 1.7; }
  .planning-example > footer > span, .planning-example > footer > small { font-size: 12px; line-height: 1.6; }
  .timeline-example { min-height: 0; padding-top: 2px; }
  .timeline-times { display: none; }
  .timeline-person { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
  .timeline-person > b { font-size: 12px; }
  .timeline-person > div { height: auto; background: none; }
  .timeline-person span { position: static; width: 100%; min-height: 46px; padding: 10px 8px; font-size: 13px; line-height: 1.5; letter-spacing: normal; white-space: normal; }
  .planning-lifecycle > strong, .planning-lifecycle li { font-size: 14px; line-height: 1.6; }

  /* Put the controls before the scene, then read manager → message → agent. */
  .connected-story { display: flex; flex-direction: column; }
  .connected-story-heading { order: 0; }
  .connected-story-controls { order: 1; margin-top: 24px; gap: 10px; }
  .connected-stage { order: 2; margin-top: 20px; }
  .connected-story-caption { order: 3; }
  .connected-story-footer { order: 4; }
  .connected-story-tabs button { min-height: 48px; padding: 10px 6px; font-size: 13px; line-height: 1.5; }
  .connected-replay { min-height: 44px; font-size: 13px; }
  .connected-location { max-width: calc(100% - 28px); font-size: 10px; line-height: 1.6; }
  .connected-workstation { order: 1; margin-top: -24px; z-index: 1; }
  .connected-window-bar b, .connected-manager-brand small, .connected-manager-kicker { font-size: 11px; line-height: 1.5; }
  .connected-workstation > p { font-size: 14px; line-height: 1.7; }
  .connected-manager-result b { font-size: 13px; }
  .connected-transfer { order: 2; }
  .connected-phone { order: 3; width: min(292px, calc(100% - 36px)); min-height: 0; margin-top: 18px; padding: 15px 12px 10px; }
  .connected-phone-status, .connected-phone-date > small { font-size: 12px; }
  .phone-notification header { flex-wrap: wrap; }
  .phone-notification header b, .phone-notification header small { font-size: 10px; line-height: 1.5; }
  .phone-notification > strong { font-size: 14px; line-height: 1.5; }
  .phone-notification p { font-size: 13px; line-height: 1.6; }
  .phone-notification:not(.selected) p { display: none; }
  .connected-scene-label { font-size: 12px; line-height: 1.7; }
  .connected-story-caption > small, .connected-story-footer > span { font-size: 13px; line-height: 1.7; }
  .briefing-copy li strong { font-size: 16px; }
  .briefing-copy li p { font-size: 14px; line-height: 1.7; }
  .briefing-visual { padding-bottom: 0; }
  .briefing-overlay { position: relative; inset: auto; margin: -18px 10px 0; z-index: 1; }
  .briefing-overlay small { font-size: 11px; line-height: 1.6; }
  .briefing-overlay strong { font-size: 15px; line-height: 1.5; }
  .briefing-overlay p { font-size: 13px; line-height: 1.7; }

  .essential h2, .ai-copy h2 { font-size: clamp(34px, 10vw, 46px); line-height: 1.12; }
  .essential-features h3 { font-size: 18px; line-height: 1.5; }
  .essential-note span { font-size: 14px; line-height: 1.7; }
  .essential-note strong { font-size: 15px; line-height: 1.6; }
  .offer-tier { padding: 22px; }
  .offer-tier li { font-size: 15px; line-height: 1.7; }
  .offer-tier header small, .module-families section > small, .offer-note > span { font-size: 11px; line-height: 1.6; }
  .module-families p span { font-size: 13px; line-height: 1.6; }
  .offer-note p { font-size: 14px; line-height: 1.7; }
  .difference-grid h3 { font-size: 20px; line-height: 1.4; }
  .workflow-tabs button { min-height: 50px; font-size: 14px; line-height: 1.5; }
  .workflow-route article p { font-size: 14px; line-height: 1.7; }
  .workflow-route article strong { font-size: 16px; line-height: 1.5; }
  .workflow-route article > i { font-size: 11px; }
  .workflow-panel > footer p { font-size: 13px; line-height: 1.7; }
  .workflow-panel > footer p strong { font-size: 14px; }
  .workflow-panel > footer > b { font-size: 11px; }
  .workflow-more small { font-size: 11px; line-height: 1.6; }
  .workflow-more p span { font-size: 12px; line-height: 1.6; }

  /* The illustrative AI interface must also be legible, not a tiny desktop. */
  .intelligence-grid .ai-copy { order: -1; }
  .ai-board-head { padding: 16px; gap: 12px; }
  .ai-board-head > span { min-width: 0; }
  .ai-board-head small, .ai-board-head > b { font-size: 11px; line-height: 1.6; }
  .ai-board-head strong { font-size: 16px; line-height: 1.5; }
  .ai-question-strip { flex-wrap: wrap; padding: 12px; overflow: visible; }
  .ai-question-strip span { flex: 1 1 100%; font-size: 13px; line-height: 1.6; border-radius: 10px; }
  .ai-situation-grid article { min-height: 0; padding: 16px; }
  .ai-situation-grid header { flex-wrap: wrap; gap: 8px; }
  .ai-situation-grid header > span, .ai-situation-grid header b { font-size: 11px; line-height: 1.6; }
  .ai-situation-grid article > strong { font-size: 18px; line-height: 1.5; }
  .ai-situation-grid article > p { font-size: 14px; line-height: 1.7; }
  .coverage > div small, .skills > em { font-size: 12px; line-height: 1.6; }
  .fma-focus li strong, .daily-brief p strong { font-size: 14px; line-height: 1.6; }
  .fma-focus li small, .daily-brief p span { font-size: 12px; line-height: 1.7; }
  .fma-focus li > i { font-size: 12px; }
  .ai-recommendation { grid-template-columns: 26px minmax(0, 1fr); padding: 16px 12px; gap: 10px; }
  .ai-recommendation p, .ai-recommendation strong { font-size: 14px; line-height: 1.7; }
  .ai-recommendation small { font-size: 11px; line-height: 1.7; }
  .ai-recommendation button { min-height: 44px; padding: 10px; font-size: 13px; line-height: 1.5; }
  .ai-principles b { font-size: 16px; line-height: 1.5; }
  .ai-principles small { font-size: 14px; line-height: 1.7; }

  .security-home-footer p { font-size: 14px; line-height: 1.7; }
  .integration-cards :is(small, article > span), .home-security-grid article > span { font-size: 11px; line-height: 1.6; }
  .integration-cards h3 { font-size: 18px; line-height: 1.5; }
  .integration-cards article { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .integration-cards article > span { width: 34px; height: 34px; }
  .faq-list summary { min-height: 60px; gap: 14px; font-size: 16px; line-height: 1.55; }
  .faq-list details p { margin-right: 0; }
  .contact-copy { padding: 30px 20px 18px; }
  .contact-copy h2 { font-size: clamp(27px, 7.6vw, 33px); line-height: 1.2; }
  .contact-form { margin: 8px; padding: 24px 16px; border-radius: 20px; }
  .form-help { margin: -6px 0 22px; color: #526c83; font-size: 13px; line-height: 1.7; }
  .demo-expectations p { font-size: 14px; line-height: 1.7; }
  .demo-expectations strong { font-size: 15px; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .footer-brand, .footer-note { grid-column: 1 / -1; }
  .footer-note strong { font-size: 16px; line-height: 1.6; }
  .subpage-hero h1 { font-size: clamp(30px, 8vw, 42px); line-height: 1.18; }
  .subpage-hero p, .subpage-copy p, .trust-card p,
  .principles-grid p, .security-roadmap p, .subpage-callout p { font-size: 16px; line-height: 1.75; }
  .subpage-intro h2 { font-size: clamp(28px, 7.8vw, 34px); line-height: 1.2; }
  .trust-card > span, .status-legend span, .security-roadmap article > span { font-size: 11px; line-height: 1.6; }
  .subpage-hero .eyebrow { font-size: 11px; }
  .subpage-callout h2 { font-size: 27px; line-height: 1.25; }
}

@media (max-width: 359px) {
  .agent-preview-stats { grid-template-columns: minmax(0, 1fr); }
  .agent-stat { min-height: 0; }
  .agent-stat > strong { margin: 8px 0; }
  .connected-story-tabs { grid-template-columns: minmax(0, 1fr); }
  .connected-phone { width: calc(100% - 24px); }
  .slot-example { grid-template-columns: 48px repeat(3, minmax(0, 1fr)); }
  .slot-example > *, .slot-example > b { font-size: 10px; }
  .footer-main { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; }
}