/* Content-only responsive layer. Navigation and footer are owned by their
   existing styles. Desktop remains unchanged. */
@media (max-width: 820px) {
  main {
    --mobile-section-pad: 60px;
    --mobile-gutter: 20px;
    --mobile-content-gap: 32px;
    --mobile-card-gap: 16px;
    --mobile-card-pad: 24px;
  }

  /* Two adjoining modules contribute 60px each: 120px of total breathing room. */
  html body :is(main#main, main#top) > section:not(.mrai-progressive-hero):not(.creation-scroll-section):not(.creation-canvas):not(.learning-bar),
  html body main .vd-panel > .vd-section,
  html body main #video-edit-process {
    padding-block: var(--mobile-section-pad) !important;
    margin-block: 0 !important;
    min-height: 0 !important;
  }
  html body main .pricing-config { padding-block: var(--mobile-section-pad) !important; gap: var(--mobile-content-gap); }
  html body main .pricing-config section { padding-block: 0 !important; }
  html body main .learning-bar { padding-block: var(--mobile-section-pad) !important; }
  html body main .learning-bar > .shell { min-height: 0; padding-block: 0; gap: 24px; }
  html body main .vd-panel { margin: 0; }

  /* One readable content edge; the horizontal galleries retain their own rail. */
  html body main .shell,
  html body main :is(.faq-layout, .contact-layout, .application-panel) {
    width: calc(100% - 40px) !important;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }
  html body main :is(.shell, .faq-layout, .contact-layout, .application-panel) > * { min-width: 0; }
  html body main .shell .shell { width: 100% !important; }
  html body main :is(h1,h2,h3,p,li,label) { overflow-wrap: break-word; }
  html body main h1 { font-size: clamp(32px, 9vw, 40px) !important; line-height: 1.15 !important; }
  html body :is(main#main, main#top) h2 { font-size: clamp(28px, 7.7vw, 32px) !important; line-height: 1.22 !important; }
  html body main :is(.auto-heading,.im-heading,.wb-heading,.dm-heading,.vd-heading,.section-heading) h2 { margin-top: 16px; }
  html body main :is(.auto-heading--no-label,.erp-fde-pathway-heading) h2,
  html body main :is(.auto-heading,.im-heading,.wb-heading,.dm-heading,.vd-heading,.section-heading) h2:first-child { margin-top: 0; }
  html body main :is(.auto-heading,.im-heading,.wb-heading,.dm-heading,.vd-heading,.section-heading) > p:not(.eyebrow) {
    margin-top: 16px; font-size: 16px; line-height: 1.65;
  }
  html body main :is(.auto-heading,.im-heading,.wb-heading,.dm-heading,.vd-heading,.section-heading) > .eyebrow { margin: 0 0 16px; }
  html body main :is(.auto-heading,.im-heading,.wb-heading,.dm-heading,.vd-heading,.section-heading) > .eyebrow + :is(h1,h2) { margin-top: 0; }

  html body main :is(.auto-grid,.im-grid,.wb-grid,.dm-grid,.vd-grid,.plans-grid,.members-grid,.included-grid,.support-grid,.mission-grid,.editorial-grid,.outcome-grid,.capability-grid,.im-plain-grid,.wb-loop-grid,.dm-loop-grid,.im-loop-grid) {
    margin-top: var(--mobile-content-gap) !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: var(--mobile-card-gap) !important;
  }
  html body main :is(.auto-card,.im-card,.wb-card,.dm-card,.vd-card,.im-step,.wb-step,.dm-step,.plan,.member-card,.included-item,.usage-card,.support-card,.mission-card,.editorial-card,.capability-card) {
    min-height: 0; padding: var(--mobile-card-pad); box-sizing: border-box;
  }
  html body main :is(.auto-card,.im-card,.wb-card,.dm-card,.vd-card,.im-step,.wb-step,.dm-step,.included-item,.support-card) h3 { font-size: 20px; line-height: 1.35; }
  html body main :is(.auto-card,.im-card,.wb-card,.dm-card,.vd-card,.im-step,.wb-step,.dm-step,.included-item,.support-card) p { font-size: 14px; line-height: 1.65; }
  html body main .included-item h3 { margin-top: 20px !important; }
  html body main .included-item p { margin-top: 12px !important; }
  html body main :is(.erp-fde-pathway-layout,.pathway-layout,.ongoing-grid,.usage-layout) { grid-template-columns: minmax(0,1fr); gap: var(--mobile-content-gap); }
  html body main :is(.erp-fde-path-step,.pathway-step) { min-height: 0; padding-block: 20px; column-gap: 12px; }
  html body main :is(.erp-fde-path-step,.pathway-step) h3 { font-size: 18px; line-height: 1.4; }
  html body main .erp-work-comparison { margin-top: var(--mobile-content-gap) !important; }
  html body main .erp-work-panel { padding: 24px; }
  html body main .erp-work-arrow { padding-block: 0; }
  html body main .erp-interface-visual { margin-top: var(--mobile-content-gap); }
  html body main .erp-interface-visual img { width: 100%; max-width: 100%; height: auto; object-fit: contain; }
  html body main .document-interface-section > .shell { grid-template-columns: minmax(0,1fr); gap: var(--mobile-content-gap); }
  html body main .document-interface-section .erp-interface-visual { margin: 0; width: 100%; }
  html body main .document-interface-actions { margin-top: 24px; gap: 12px; }
  html body main .document-interface-capabilities { margin-top: 24px; padding-top: 20px; gap: 16px 12px; }
  html body main .document-interface-capabilities li { font-size: 14px; }
  html body main .email-interface-carousel { margin-top: var(--mobile-content-gap); grid-template-columns: minmax(0,1fr); gap: var(--mobile-content-gap); }
  html body main .email-interface-label { font-size: 20px; line-height: 1.4; }
  html body main .email-interface-description { font-size: 16px; line-height: 1.65; }
  html body main .email-interface-tab { padding-block: 20px; }
  html body main .email-interface-tab:first-child { padding-top: 0; }
  html body main .email-interface-visual img { width: 100%; height: auto; }
  html body main .im-tools-header { flex-direction: column; align-items: stretch; gap: 24px; }
  html body main .im-tools-controls { align-self: flex-end; }
  html body main .im-tools-viewport { margin-top: var(--mobile-content-gap); }
  html body main .im-tools-section { --im-tools-inset: 20px; --im-tool-width: min(280px, calc(100vw - 72px)); --im-tool-gap: 20px; }
  html body main .im-tool-caption p { font-size: 14px; line-height: 1.6; }
  html body main .vd-mode-bar > .shell { gap: 24px !important; }
  html body main .vd-mode-bar .vd-modes { max-width: 100%; height: auto !important; }
  html body main .vd-mode-bar .vd-tab { min-height: 44px; padding-inline: 16px; font-size: 14px; }
  html body main .vd-guidance { grid-template-columns: minmax(0,1fr); gap: 16px; }
  html body main .vd-studio-slot { margin-top: 32px; }
  html body main :is(.vd-studio-head,.vd-studio-body) { padding: 20px; }

  /* FAQs and closing calls to action share the same section rhythm. */
  html body main .faq-layout { min-height: 0; gap: var(--mobile-content-gap) !important; }
  html body main .faq-heading h2, html body main .faq-copy h2 { margin-top: 0 !important; }
  html body main .faq-list { margin-top: 0 !important; width: 100%; }
  html body main .faq-trigger { min-height: 56px; padding-block: 20px; font-size: 16px; line-height: 1.5; gap: 16px; }
  html body main .faq-content > div { padding: 0 24px 20px 0; font-size: 15px; line-height: 1.7; }
  html body main .faq-list summary { min-height: 56px; padding-block: 20px; font-size: 16px; line-height: 1.5; }
  html body main .faq-answer { padding-right: 24px; font-size: 15px; line-height: 1.7; }
  html body main .contact-layout { min-height: 0; padding: 32px 24px; gap: 24px; }
  html body main .contact-actions { margin-top: 24px; flex-wrap: wrap; gap: 12px; }
  html body main :is(.contact-lead,.contact-intro p,.application-copy p) { font-size: 16px; line-height: 1.65; }
  html body main #contact:has(.contact-intro) { gap: 32px !important; }
  html body main #contact :is(.contact-form,.pricing-contact-form,.application-form-wrap) { padding: 24px 20px; gap: 20px; }
  html body main #contact .contact-layout:has(form),
  html body main #contact .application-panel { grid-template-columns: minmax(0,1fr) !important; }
  html body main #contact .application-copy { min-height: 0; padding: 32px 24px; }
  html body main #contact .contact-panel { min-height: 0; padding: 32px 24px; }
  html body main #contact .application-form-wrap {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px);
    margin: 12px 12px 24px;
  }
  html body main #contact .application-panel:has(.form-success:not([hidden])) { padding: 24px !important; gap: 24px; }
  html body main #contact .application-form-wrap:has(.form-success:not([hidden])) { width: 100% !important; max-width: 100%; margin: 0; padding: 0; }
  html body main #contact .form-success { width: 100%; max-width: 100%; padding: 24px; box-sizing: border-box; }
  html body main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) { min-width: 0; max-width: 100%; font-size: 16px !important; }
  html body main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select) { min-height: 48px; }
  html body main :is(.button,.btn,button,summary) { min-height: 44px; }

  /* FDE / training: remove desktop-only card floors and empty numeral tracks. */
  html body main .opportunity-stage { margin-top: 32px; }
  html body main .stat-card { min-height: 0; padding: 24px; }
  html body main .stat-card h3 { margin-top: 24px; font-size: 20px; }
  html body main .stat-card strong { font-size: 36px; line-height: 1.15; }
  html body main .outcome-card { min-height: 0; padding: 24px; }
  html body main .outcome-card h3 { margin-top: 24px; font-size: 20px; }
  html body main .outcome-card p { font-size: 15px; line-height: 1.65; }
  html body main .program-grid { margin-top: 32px; gap: 16px; }
  html body main .capability-grid { margin-top: 32px; }

  /* Homepage: keep the long business walkthrough, with a regular reading flow. */
  html body main #creation { padding: 0 !important; }
  html body main #creation :is(.creation-scroll-sticky,.creation-scroll-stage) { position: relative; top: auto; min-height: 0; height: auto; }
  html body main #creation .creation-scroll-card { padding: var(--mobile-section-pad) 20px !important; height: auto !important; min-height: 0 !important; }
  html body main #creation :is(.creation-intro-copy,.creation-website-copy) { width: 100%; max-width: 100%; padding: 0 !important; margin: 0; }
  html body main#main #creation :is(.creation-intro-copy,.creation-website-copy) h3 { font-size: 32px !important; line-height: 1.22 !important; }
  html body main #creation .creation-intro-eyebrow { position: static; transform: none; margin-bottom: 16px; }
  html body main #creation .creation-intro-copy p { margin-top: 16px; font-size: 16px; line-height: 1.65; }
  html body main #creation .mrai-work-jump-nav { width: 100%; max-width: 100%; justify-content: flex-start; margin-top: 24px; overflow-x: auto; flex-wrap: nowrap; gap: 8px; }
  html body main #creation .mrai-work-jump-link { flex: 0 0 auto; }
  html body main #creation .mrai-mobile-sidekick-visual { margin-top: 32px; }

  /* On phones, the creative canvas becomes a compact media grid instead of a
     two-screen sticky canvas with objects outside the readable area. */
  html body main #creation-canvas { height: auto !important; min-height: 0 !important; padding: var(--mobile-section-pad) 20px !important; }
  html body main #creation-canvas .creation-canvas-stage { position: relative; top: auto; height: auto; min-height: 0; display: flex; flex-direction: column; gap: 24px; }
  html body main #creation-canvas .creation-prompt-intro { position: relative; inset: auto; transform: none; width: 100%; height: auto; order: 0; }
  html body main #creation-canvas .creation-prompt-intro p { margin-top: 16px; font-size: 16px; line-height: 1.65; }
  html body main #creation-canvas .creation-prompt-card { position: relative; inset: auto; transform: none; width: 100%; min-height: 140px; margin: 0; padding: 20px; order: 1; }
  html body main #creation-canvas .creation-media-layer { position: relative; inset: auto; width: 100%; height: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; transform: none !important; order: 2; }
  html body main #creation-canvas .canvas-media { position: relative; inset: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; transform: none !important; opacity: 1 !important; margin: 0; border: 0; border-radius: 12px; box-shadow: none; }
  html body main #creation-canvas .canvas-media :is(img,video) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  html body main #projects .mrai-projects-editorial-head { margin-bottom: 32px; }
  html body main #projects .mrai-projects-mobile-stack { gap: 48px; }
  html body main #projects .mrai-projects-mobile-copy { margin-bottom: 24px; }
  html body main #projects .mrai-projects-mobile-copy h3 { font-size: 24px; }
  html body main #control .mrai-guard-process-card { padding: 24px; min-height: 0; }
  html body main #use-cases .mrai-case-gallery-subtitle { margin: 16px 0 32px; font-size: 16px; line-height: 1.65; }
  html body main #use-cases .mrai-case-gallery-grid { gap: 32px 16px; }
  html body main #pricing .mrai-pricing-service-header { margin-bottom: 32px; }
  html body main #pricing .mrai-pricing-service-kicker { margin-bottom: 16px; }
  html body main #pricing .mrai-pricing-service-header > p:last-child { margin-top: 16px; }
  html body main #pricing :is(.mrai-pricing-service-offer,.mrai-pricing-service-benefits) { padding: 24px; }
  html body main #pricing .mrai-pricing-service-price { margin-top: 24px; }

  /* Keep section backgrounds touching. Use internal padding when measuring
     content against the next painted edge; never insert a white outer gap. */
  html body main#main:has(> #creation) > #creation-canvas,
  html body main#main:has(> #creation) #creation #work-onboarding,
  html body main#main:has(> #creation) > :is(#use-cases,#faq),
  html body main#top:has(> #examples.auto-section--auto) > #outcomes,
  html body.automation-page[data-feature="email"] main#top > #examples,
  html body main#main:has(> .ongoing) > #first-outcomes,
  html body main#main:has(> .opportunity) > :is(#program,#pathway),
  html body main#top:has(> #plans) > :is(.pricing-config,#usage) {
    padding-bottom: calc(var(--mobile-section-pad) * 2) !important;
  }
  html body main#main:has(> #creation) > :is(#control,#faq),
  html body main#top:has(> #examples.auto-section--auto) > #goes-live,
  html body.automation-page[data-feature="email"] main#top > #faq,
  html body main#main:has(> .ongoing) > #faq,
  html body main#main:has(> .opportunity) > :is(#pathway,#faq),
  html body main#top:has(> #plans) > :is(#costs,#guarantee) {
    padding-top: calc(var(--mobile-section-pad) * 2) !important;
  }

  /* Match the closing card's outer space to the 120px gap above it. */
  html[data-i18n-page="why"] body main#main > #contact {
    padding-bottom: calc(var(--mobile-section-pad) * 2) !important;
  }

  /* Documentation and sign-in are reading / task surfaces, not marketing
     sections. Keep their own structure while fitting the same readable scale. */
  html body main.reader .article { min-width: 0; }
  html body main.reader .article h1 { font-size: 32px !important; line-height: 1.2 !important; }
  html body main.reader .article-section { margin-top: 48px; }
  html body main.reader .article-section h2 { font-size: 24px; line-height: 1.3; }
  html body main.reader :is(.article-intro,.section-body > p,.article-section li) { font-size: 16px; line-height: 1.75; }
  html body main.reader :is(.start-options,.quick-links) { gap: 16px; }
  html body main.reader :is(.start-option,.callout) { padding: 20px; }
  html body main.reader .table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  html body main.reader pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.7; }
  html body main.reader .doc-table { font-size: 14px; }
  html body main.reader .doc-table:has(th:nth-child(3)) { min-width: 520px; }
  html body main.auth-shell { padding-inline: 20px; }
  html body main.auth-shell .auth-panel { width: 100%; max-width: 420px; }
  html body main.auth-shell .auth-intro h1 { font-size: 32px !important; }
}

@media (max-width: 600px) {
  html body main :is(.document-interface-capabilities,.im-plain-grid,.vd-grid,.wb-grid) { grid-template-columns: minmax(0,1fr); }
  html body main #projects .mrai-projects-mobile-stack { display: grid; }
  html body main .erp-work-comparison { grid-template-columns: minmax(0,1fr); gap: 16px; }
}

/* A shared mobile title scale outranks page-owned desktop !important rules.
   Hero titles, card headings, navigation, footer and Docs keep their own scale. */
@layer mrai-mobile-section-headings {
  @media (max-width: 820px) {
    html[data-i18n-page]:not([data-i18n-page="docs"]):not([data-i18n-page="login"]) main {
      --mrai-mobile-section-title-size: 32px;
      --mrai-mobile-section-title-line: 1.22;
      --mrai-mobile-section-title-weight: 400;
      --mrai-mobile-section-title-tracking: -.04em;
    }
    html[data-i18n-page]:not([data-i18n-page="docs"]):not([data-i18n-page="login"]) main :is(
      h2,
      #creation .creation-intro-copy h3,
      #creation .creation-website-copy h3
    ) {
      font-size: var(--mrai-mobile-section-title-size) !important;
      font-weight: var(--mrai-mobile-section-title-weight) !important;
      line-height: var(--mrai-mobile-section-title-line) !important;
      letter-spacing: var(--mrai-mobile-section-title-tracking) !important;
    }
  }
}

/* Homepage section introductions share one mobile reading column. */
@layer mrai-mobile-home-heading-layout {
  @media (max-width: 820px) {
    html[data-i18n-page="home"] body main#main :is(#control, #use-cases, #pricing, #contact) {
      padding-inline: var(--mobile-gutter, 20px) !important;
    }
    html[data-i18n-page="home"] body main#main #projects .mrai-projects-editorial {
      width: calc(100% - 40px) !important;
      max-width: none !important;
      margin-inline: auto !important;
    }
    html[data-i18n-page="home"] body main#main #contact .contact-intro .section-heading {
      width: 100% !important;
      max-width: 100% !important;
    }
    html[data-i18n-page="home"] body main#main :is(
      .creation-scroll-card-intro .creation-intro-copy h3,
      .mrai-projects-editorial-head h2,
      .mrai-guard-heading,
      .mrai-case-gallery-title,
      .mrai-pricing-service-header h2,
      #faq .faq-heading h2,
      #contact .contact-intro .section-heading h2
    ) {
      width: 100% !important;
      max-width: 100% !important;
      text-wrap: wrap !important;
      text-wrap: pretty !important;
    }
    html[data-i18n-page="home"] body main#main #pricing .mrai-pricing-desktop-break { display: none !important; }
    html[data-i18n-page="home"] body main#main #pricing .mrai-pricing-mobile-gap { display: inline !important; }
    html[data-i18n-page="home"]:is([lang="zh-CN"], [lang="zh-TW"], [lang="ja"]) body main#main #pricing .mrai-pricing-mobile-gap { display: none !important; }
  }
}