/* Shared narrow-screen layer. Desktop layouts and page-specific content stay intact. */
@media (max-width: 1180px) {
  html { scroll-padding-top: 96px; }
  html:has(header.is-open), html:has(header.is-open) body { overflow: hidden; }
  .mrai-shell-brand { min-height: 44px; }
  .mrai-shell-mobile-nav { padding-bottom: max(28px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  .mrai-shell-language-option { min-height: 44px; }
  #main .fde-hero-grid { width: calc(100% - 56px); }

  /* Homepage and product overview have their own headers. */
  html header.site-header:not(.mrai-shell-header) {
    height: 80px; min-height: 80px; padding-inline: 20px;
    grid-template-columns: minmax(0, 1fr) auto 44px !important; gap: 16px;
  }
  html .site-header .desktop-nav,
  html .site-header .header-auth,
  html .site-header .mrai-products-nav { display: none !important; }
  html .site-header .brand-mark { min-height: 44px; display: inline-flex; align-items: center; }
  html .site-header .mobile-header-language-picker { display: block !important; justify-self: end; }
  html .site-header .mobile-header-language-picker .language-trigger { min-height: 44px; }
  html .site-header .menu-trigger { display: grid !important; width: 44px; height: 44px; }
  html header.site-header:not(.mrai-shell-header):not(:has(.mobile-header-language-picker)) { grid-template-columns: minmax(0, 1fr) 44px !important; }
  html .site-header .mobile-nav {
    position: fixed !important; inset: 0 !important; z-index: 1 !important;
    width: auto !important; height: 100dvh !important; min-height: 100svh !important;
    margin: 0 !important; padding: 104px 24px max(28px, env(safe-area-inset-bottom)) !important;
    display: flex !important; flex-direction: column; gap: 0;
    overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
    border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
  }
  html .site-header.is-open { background: #fff !important; }
  html .site-header.is-open .mobile-nav { opacity: 1; visibility: visible; transform: none; }
  html .site-header.is-open :is(.brand-mark, .menu-trigger, .mobile-header-language-picker) { position: relative; z-index: 2; }
  html .site-header .mobile-nav > a {
    flex: 0 0 auto; min-height: 54px; padding: 8px 0 !important;
    display: flex; align-items: center; box-sizing: border-box;
    border-bottom: 1px solid #dedee4; border-radius: 0 !important;
    color: #171717 !important; font-size: 18px; line-height: 1.4;
  }
  html .site-header .mobile-auth { margin-top: auto; padding-top: 24px; flex: 0 0 auto; }
  html .site-header .mobile-auth a { min-height: 48px; }
  html .site-header .language-option { min-height: 44px; }
}

@media (max-width: 980px) {
  /* Keep long tablet copy out of narrow, desktop-only columns. */
  .contact-section:has(.contact-intro) { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; padding-inline: 28px; }
  .contact-section .contact-intro { width: 100%; max-width: none; }
  .contact-section .contact-intro .section-heading { max-width: 680px; width: 100%; }
  .outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main .fde-hero-grid { width: calc(100% - 56px); }
  .problem-layout, .problem-section.is-flipped .problem-layout { grid-template-columns: minmax(0, 1fr); }
  .problem-layout > *, .work-visual-column, .work-visual-column .work-tabs { min-width: 0; max-width: 100%; }
}

@media (max-width: 820px) {
  :root {
    --mrai-mobile-chat-height: 56px;
    --mrai-mobile-chat-target: 44px;
    --mrai-mobile-chat-line: 20px;
  }
  /* Keep the Why Mr. AI dashboard complete inside its background frame. */
  html .why-hero .why-hero-media {
    height: auto; min-height: 0; padding: 24px 12px 0; box-sizing: border-box;
    border-radius: 16px; overflow: hidden;
  }
  html .why-hero .why-creation-demo {
    width: 100%; max-width: 100%; height: auto; object-fit: contain;
  }

  /* App illustrations are content: fit the full image, not a cropped cover. */
  html #projects .mrai-projects-workspace:not([data-project-visual="3"]) {
    height: auto; min-height: 0; aspect-ratio: auto;
  }
  html #projects .mrai-projects-background {
    position: relative; inset: auto; width: 100%; height: auto;
    object-fit: contain;
  }
  html #projects .mrai-projects-background[hidden] { display: none; }

  /* Chat demos reflow at their real font size instead of scaling a 740px canvas. */
  html #creation .creation-scroll-card { height: auto !important; min-height: 0 !important; padding-block: 64px !important; }
  html #creation .mrai-mobile-sidekick-visual { height: 400px; aspect-ratio: auto; margin-top: 28px; }
  html #creation .mrai-mobile-sidekick-visual .mrai-unified-chat-composition {
    inset: 0 !important; width: 100% !important; height: 100% !important; transform: none !important;
  }
  html #creation .mrai-unified-chat-composition::before { inset: 0; border-radius: 16px; }
  html #creation .mrai-unified-chat-composition .mrai-unified-chat {
    inset: 16px !important; width: auto !important; height: auto !important;
    display: flex; flex-direction: column; transform: none !important;
  }
  html #creation .mrai-unified-chat-header { min-height: 48px; padding: 0 14px; flex: 0 0 48px; }
  html #creation .mrai-unified-chat-header strong { font-size: 14px; }
  html #creation .mrai-sidekick-visual-layer .mrai-unified-chat-header .mrai-unified-chat-logo { width: 20px; height: 15px; flex-basis: 20px; }
  html #creation .mrai-unified-chat-thread { height: auto; flex: 1; min-height: 0; margin-bottom: calc(var(--mrai-mobile-chat-height) + var(--mrai-mobile-chat-line)); padding: 16px 12px; gap: 16px; }
  html #creation .mrai-unified-chat-message { flex-shrink: 0; }
  html #creation .mrai-unified-chat-message.is-user { max-width: 92%; }
  html #creation .mrai-unified-chat-message.is-ai { padding-inline: 2px; }
  html #creation .mrai-unified-chat-message p,
  html #creation .mrai-unified-chat-message.is-user p,
  html #creation .mrai-unified-chat-message .mrai-unified-chat-answer-segment { font-size: 14px; line-height: 1.6; }
  /* One-row mobile composer; desktop controls keep their original layout. */
  html #creation .mrai-sidekick-visual-layer .mrai-unified-chat-composition .mrai-website-prompt {
    top: auto !important; bottom: 28px !important; left: 28px !important; right: 28px !important;
    width: auto !important; height: var(--mrai-mobile-chat-height) !important;
    padding: 5px 8px; transform: none !important;
    display: grid; grid-template-columns: minmax(0, 1fr) var(--mrai-mobile-chat-target); gap: 4px; align-items: center;
    border: 1px solid #e5e4e1 !important; border-radius: 12px !important;
  }
  html #creation .mrai-prompt-typewriter {
    min-width: 0; min-height: var(--mrai-mobile-chat-line); max-height: var(--mrai-mobile-chat-line);
    font-size: 13px; line-height: var(--mrai-mobile-chat-line);
    white-space: nowrap; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis;
  }
  html #creation .mrai-prompt-typewriter:has(.mrai-prompt-typed:empty)::before {
    content: var(--mrai-i18n-ask, "Ask Mr. AI about your business..."); color: #a2a1a5;
  }
  html #creation .mrai-website-prompt-actions {
    min-height: var(--mrai-mobile-chat-target); gap: 0; margin-top: 0 !important; justify-content: flex-end;
  }
  html #creation .mrai-website-prompt-controls { display: none; }
  html #creation .mrai-website-prompt .mrai-website-prompt-send {
    width: var(--mrai-mobile-chat-target); height: var(--mrai-mobile-chat-target); flex: 0 0 var(--mrai-mobile-chat-target);
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
  }
  html #creation .mrai-website-prompt .mrai-website-prompt-send {
    position: relative; margin-left: auto; background: transparent !important; box-shadow: none !important;
  }
  html #creation .mrai-website-prompt .mrai-website-prompt-send::before {
    content: ""; position: absolute; width: 32px; height: 32px; border-radius: 12px;
    background: var(--orange, #ff7417); pointer-events: none;
  }
  html #creation .mrai-website-prompt .mrai-website-prompt-send:disabled::before { background: #d5d6d9; }
  html #creation .mrai-website-prompt .mrai-website-prompt-send.is-ready::before { background: var(--orange, #ff7417); }
  html #creation .mrai-website-prompt .mrai-website-prompt-send svg { position: relative; width: 16px; height: 16px; }
  html #creation .mrai-website-prompt svg { width: 16px; height: 16px; }
  html #creation .mrai-website-prompt :is(.mrai-website-prompt-attach, .mrai-website-prompt-mic) { color: #676a72; }
  html #creation .mrai-website-prompt .mrai-website-prompt-send { color: #fff; }
  html #creation .mrai-website-prompt svg, html #creation .mrai-website-prompt svg :is(path, circle, polyline, line) { fill: none !important; stroke: currentColor !important; stroke-width: 1.8; }
  html #creation .mrai-unified-chat-data-card { width: 100%; margin: 0; padding: 12px; }
  html #creation .mrai-chat-dashboard-kpis { grid-template-columns: 1fr; }
  html #creation .mrai-chat-dashboard-kpi { min-height: 0; padding: 10px; }
  html #creation .mrai-chat-dashboard-kpi :is(span, em) { white-space: normal; font-size: 11px; }
  html #creation .mrai-chat-dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html #creation .mrai-chat-chart-title { flex-wrap: wrap; gap: 6px; }
  html #creation .mrai-chat-chart-title > strong { font-size: 12px; white-space: normal; }
  html #creation .mrai-chat-chart-title > span { font-size: 11px; }
  html #creation .mrai-chat-column-item > :is(span, em) { font-size: 10px; }
  html #creation .mrai-chat-chart-legend > span, html #creation .mrai-chat-donut span { font-size: 11px; }
  html #creation .mrai-chat-horizontal-row { grid-template-columns: 70px minmax(0, 1fr) 46px; gap: 6px; }
  html #creation .mrai-chat-horizontal-row > em { grid-column: 1 / -1; }
  html #creation .mrai-chat-horizontal-row > :is(span, strong, em) { font-size: 11px; }
  html #creation .mrai-chat-horizontal-chart.is-margin .mrai-chat-horizontal-row { grid-template-columns: 80px minmax(0, 1fr) 38px; }
  html #creation .mrai-chat-cost-list :is(span, em), html #creation .mrai-chat-paired-item > span { font-size: 11px; }
  html #creation .mrai-chat-inventory-chart-row { grid-template-columns: 68px minmax(0, 1fr) 40px; }
  html #creation .mrai-chat-inventory-chart-row > :is(span, em) { font-size: 11px; }
  html #creation .mrai-chat-inventory-bars > i { height: 16px; }
  html #creation .mrai-chat-inventory-bars b { font-size: 10px; }
  html #creation .mrai-chat-artifact-head { flex-wrap: wrap; gap: 8px; }
  html #creation .mrai-chat-artifact-head :is(span, em) { font-size: 11px; }
  html #creation :is(.mrai-priority-artifact, .mrai-finance-artifact) { grid-template-columns: minmax(0, 1fr); }
  html #creation .mrai-priority-matrix { height: 160px; }
  html #creation .mrai-priority-axis { font-size: 10px; }
  html #creation .mrai-priority-queue-row > div > :is(strong, span) { white-space: normal; font-size: 12px; line-height: 1.5; }
  html #creation .mrai-priority-queue-row > em { font-size: 11px; }
  html #creation :is(.mrai-followup-table, .mrai-supplier-table, .mrai-onboarding-table, .mrai-stock-timeline) {
    max-width: 100%; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain;
  }
  html #creation :is(.mrai-followup-table, .mrai-supplier-table, .mrai-onboarding-table) > div { min-width: 420px; }
  html #creation :is(.mrai-stock-scale, .mrai-stock-row) { min-width: 440px; }
  html #creation :is(.mrai-followup-table, .mrai-supplier-table, .mrai-onboarding-table) :is(span, strong, em),
  html #creation :is(.mrai-followup-table-head, .mrai-supplier-table-head, .mrai-onboarding-table-head) { font-size: 11px; line-height: 1.4; }
  html #creation :is(.mrai-supplier-tradeoff, .mrai-onboarding-footer, .mrai-stock-legend) { flex-wrap: wrap; font-size: 11px; gap: 8px; }
  html #creation .mrai-waterfall-item > :is(span, strong) { font-size: 10px; white-space: normal; text-align: center; }
  html #creation .mrai-finance-evidence-head > :is(strong, span),
  html #creation .mrai-finance-order :is(b, span, em, strong) { font-size: 11px; }
  html #creation .mrai-stock-row :is(strong, span, em), html #creation .mrai-stock-scale { font-size: 11px; }
  html .creation-scroll-card-intro .mrai-work-jump-nav { justify-content: flex-start; }
  html .creation-scroll-card-intro .mrai-work-jump-link { min-height: 44px; flex: 0 0 auto; }

  /* Work carousel: readable conversation and full-size prompt controls. */
  .work-visual-column .visual-stage { height: auto; }
  .work-visual-column :is(.visual-panel, .visual-window) { height: 400px; min-height: 400px; }
  .office-float-chat { inset: 16px; }
  .office-float-chat-thread { padding: 16px 12px; gap: 16px; }
  .office-float-chat-message { flex-shrink: 0; }
  .office-float-chat-message.is-user { max-width: 92%; }
  .office-float-chat-message.is-ai { padding-inline: 2px; }
  .office-float-chat-message p, .office-float-chat-message.is-user p, .office-float-chat-answer span { font-size: 14px; line-height: 1.6; }
  .office-float-chat-composer {
    flex: 0 0 auto; height: var(--mrai-mobile-chat-height); min-height: var(--mrai-mobile-chat-height);
    margin: 0 10px 10px; padding: 5px 8px; font-size: 13px;
    display: grid; grid-template-columns: minmax(0, 1fr) var(--mrai-mobile-chat-target); gap: 4px; align-items: center;
  }
  /* Keep the Work page's composer in step with the homepage mobile demo. */
  html #scenes .office-prompt-typewriter {
    display: block; width: 100%; min-width: 0;
    min-height: var(--mrai-mobile-chat-line); max-height: var(--mrai-mobile-chat-line); line-height: var(--mrai-mobile-chat-line);
    white-space: nowrap; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis;
  }
  html #scenes .office-float-chat-actions {
    min-height: var(--mrai-mobile-chat-target); min-width: 0; gap: 0; justify-content: flex-end;
  }
  html #scenes .office-float-chat-controls { display: none; }
  html #scenes .office-float-chat-composer .office-prompt-send {
    width: var(--mrai-mobile-chat-target); min-width: var(--mrai-mobile-chat-target);
    height: var(--mrai-mobile-chat-target); flex: 0 0 var(--mrai-mobile-chat-target);
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
  }
  html #scenes .office-float-chat-composer .office-prompt-send {
    position: relative; isolation: isolate; margin-left: auto; background: transparent;
  }
  html #scenes .office-float-chat-composer .office-prompt-send::before {
    content: ""; position: absolute; z-index: -1; top: 50%; left: 50%;
    width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 12px;
    background: #d5d6d9; pointer-events: none; transition: background-color .2s ease;
  }
  html #scenes .office-float-chat-composer .office-prompt-send.is-ready::before { background: #ff7417; }
  html #scenes .office-float-chat-composer .office-prompt-send.is-sending::before { background: #171717; }
  .office-chat-data-card { padding: 12px; }
  .office-chat-kpis, .office-chat-mini-grid { grid-template-columns: minmax(0, 1fr); }
  .office-chat-kpis :is(span, em) { font-size: 11px; white-space: normal; }
  .office-chat-bars > div { grid-template-columns: 64px minmax(0, 1fr) 44px; }
  .office-chat-bars :is(span, strong, em) { font-size: 10px; }
  .office-chat-bars em { grid-column: 1 / -1; }
  .office-chat-chart > b, .office-chat-dashboard-head strong { font-size: 12px; }
  .office-chat-dashboard-head span, .office-chat-columns em, .office-chat-donut span { font-size: 10px; }
  .office-chat-chart { min-height: 116px; }
  .office-chat-columns { height: 64px; }
  .office-chat-columns > i { width: 18px; }
  .office-chat-donut { width: 64px; height: 64px; }
  .office-chat-compare { grid-template-columns: minmax(0, 1fr); }
  .office-chat-compare :is(span, em) { font-size: 11px; }
  .work-visual-column .work-tabs { flex-wrap: nowrap; width: 100%; margin-top: 16px; }
  .work-visual-column .work-tabs button { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
}

@media (max-width: 640px) {
  html { -webkit-text-size-adjust: 100%; }
  html main .shell { width: calc(100% - 40px); }
  html main :is(h1, h2, h3, p) { overflow-wrap: break-word; }
  html main h1 { font-size: clamp(32px, 9.6vw, 40px) !important; line-height: 1.12 !important; }
  html main h2 { font-size: clamp(28px, 8vw, 34px) !important; line-height: 1.18 !important; }
  html .mrai-carousel-hero .mrai-hero-carousel-copy h1 { font-size: clamp(32px, 10.2vw, 40px) !important; line-height: 1.12 !important; }
  html .mrai-carousel-hero .mrai-hero-carousel-copy { padding: 104px 20px 100px; }
  html .mrai-carousel-hero .mrai-hero-carousel-copy .mrai-hero-subtitle { margin-top: 24px; font-size: 16px !important; }
  html .mrai-carousel-hero .mrai-hero-carousel-cta { min-height: 48px !important; margin-top: 24px; }
  html .mrai-carousel-hero .mrai-hero-carousel-dot { min-width: 44px; min-height: 44px; }
  html main .fde-hero { padding: 128px 0 64px; }
  html #main .fde-hero-grid { width: calc(100% - 40px); gap: 32px; }
  html main:has(> .fde-hero), html main:has(> .product-explorer) { padding-top: 0 !important; }
  html main > .hero:not(.mrai-carousel-hero):not(.why-hero) { padding-top: 112px; padding-bottom: 64px; }
  html main .hero-actions, html main .fde-hero-actions { gap: 12px; }
  html main :is(.problem-section, .work-section, .auto-section, .wb-section, .im-section, .dm-section, .outcomes, .ongoing, .editorial-section, .pathway, .capability-section) { padding-block: 64px; }
  html main .problem-layout { gap: 32px; }
  html main .problem-copy { max-width: 100%; }
  html main .problem-copy > p { font-size: 16px; line-height: 1.7; }
  html main .outcome-grid { grid-template-columns: minmax(0, 1fr); }
  html main .contact-section:has(.contact-intro) { padding-inline: 20px; }

  /* The mobile cards have no spare height for the desktop auto margin. */
  html #control .mrai-guard-process-card h3 { margin: 16px 0 0; }
  html #control .mrai-guard-process-card p { margin: 12px 0 0; }

  /* Native form fields retain 16px text to avoid iOS focus zoom. */
  html main :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']), select, textarea) { min-width: 0; max-width: 100%; font-size: 16px !important; }
  html main :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']), select) { min-height: 48px; }
  html main :is(button, summary, .btn, .button) { min-height: 44px; }
  html main button { min-width: 44px; }
  html main :is(.vd-tab, .work-app-link, .pricing-index a) { min-height: 44px; display: inline-flex; align-items: center; }
  html main .vd-tabs { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  html main .vd-tab { flex: 0 0 auto; }
  html main .faq-trigger { min-height: 56px; line-height: 1.5; }
  html main .faq-content > div { padding-right: 20px; font-size: 16px; }
  html main .application-form-wrap { padding: 28px 20px; }
  html main .consent-field { min-height: 44px; align-items: center; }
  /* The creation canvas uses decorative spans, not interactive form controls. */
  html #creation-canvas .creation-prompt-tools { gap: 8px; }
  html #creation-canvas .creation-tool { min-height: 28px; height: 28px; padding-inline: 8px; }
  html #creation-canvas .creation-send {
    width: 32px; min-width: 32px; height: 32px; min-height: 32px;
    flex: 0 0 32px; font-size: 16px;
  }
  html .mrai-shell-footer-column a, html .footer-column a { min-height: 44px; margin-top: 0; display: flex; align-items: center; }
}

@media (max-width: 360px) {
  html .mrai-shell-header { gap: 12px; padding-left: 16px; }
  html .site-header .language-trigger { font-size: 13px; gap: 4px; }
  html #creation .mrai-unified-chat-composition .mrai-unified-chat { inset: 12px !important; }
  html #creation .mrai-sidekick-visual-layer .mrai-unified-chat-composition .mrai-website-prompt { left: 20px !important; right: 20px !important; padding: 5px 6px; }
  .office-float-chat { inset: 12px; }
  .office-float-chat-composer { padding: 5px 6px; margin-inline: 8px; }
  .office-float-chat-controls { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mrai-shell-mobile-nav { transition: none !important; }
}


/* First-screen CTA interaction colors: shared across all marketing pages. */
:root {
  --hero-button-state-surface: #fff;
  --hero-button-state-ink: #171717;
}
html .mrai-carousel-hero .mrai-hero-carousel-copy .mrai-hero-carousel-cta:is(:hover, :active, :focus-visible),
html .mrai-page-video-hero .mrai-page-video-copy .mrai-page-video-actions > a:is(:hover, :active, :focus-visible),
html main > .training-hero .hero-actions > .button:is(:hover, :active, :focus-visible),
html #main > .hero .hero-actions > .button:is(:hover, :active, :focus-visible),
html .mrai-shell-header .mrai-shell-action:is(:hover, :active, :focus-visible),
html .site-header :is(.header-auth, .mobile-auth, .header-actions) > a:is(:hover, :active, :focus-visible) {
  color: var(--hero-button-state-ink) !important;
  border-color: var(--hero-button-state-surface) !important;
  background: var(--hero-button-state-surface) !important;
  box-shadow: none !important;
}