/* VacuFlow mobile foundation (≤767px) */

@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100vw;
  }

  html {
    --layout-mode: mobile;
    overflow-x: clip;
  }

  body {
    overflow-x: hidden;
  }

  div.page {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
  }

  img,
  video,
  iframe {
    display: block;
    max-width: 100%;
    height: auto;
  }

  p,
  li {
    line-height: 1.65;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  h1,
  h2,
  h3 {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .btn,
  .btn--hero,
  .btn--hero-secondary,
  .btn.btn--outlined-wash {
    min-height: 48px;
  }

  .site-nav__toggle,
  .site-nav__link {
    min-height: 44px;
  }

  button,
  a,
  [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  :root {
    --layout-margin-inline-mobile: calc(24px * var(--hero-coord-scale));
    /* Inter-card gap on mobile — matches page side padding (24px design) */
    --mobile-card-grid-gap: var(--layout-margin-inline-mobile);
    /* Card inner padding on mobile — 32px block, 24px inline (matches page gutter) */
    --mobile-card-padding-block: 32px;
    --mobile-card-padding-inline: 24px;
    --header-height-base: 80px;
    --hero-section-inset-block: var(--header-height-base);

    --hero-card-2-text-upper-size: 18px;
    --hero-card-2-text-lower-size: 12px;
    --hero-card-3-text-upper-size: 13px;
    --hero-card-3-text-lower-size: 11px;
    --hero-card-1-sub-size: 12px;
    --hero-card-mobile-inset-left: 66px;
    --hero-card-mobile-inset-right: calc(
      16px + var(--hero-card-arrow-width) + 8px
    );

    --hero-text-display-size: 40px;
    --hero-text-display-line-height: 1.1;
    --hero-text-display-letter-spacing: 0px;
    --hero-text-display-first-size: var(--hero-text-display-size);
    --hero-text-display-first-line-height: var(--hero-text-display-line-height);
    --hero-text-eyebrow-logo-height: 30px;
    --hero-text-eyebrow-size: 13px;
    --hero-text-eyebrow-line-height: 1.5;
    --hero-text-eyebrow-to-title-gap: 40px;
    /* Section intro rhythm — hero parity (eyebrow 40px, display title 32px) */
    --section-intro-eyebrow-margin-bottom: var(--hero-text-eyebrow-to-title-gap);
    --section-intro-title-margin-bottom: 32px;
    --hero-text-lead-size: 16px;
    --hero-text-lead-line-height: 26px;
    --hero-text-title-to-lead-gap: 40px;
    --hero-buttons-text-gap: 40px;
    --hero-buttons-gap: 12px;

    --roi-stat-value-num-size: 68px;
    --roi-stat-value-num-line-height: 1.1;
    --roi-stat-value-mult-size: 50px;
    --roi-stat-value-unit-size: 44px;
    --roi-stat-prefix-size: 20px;
    --roi-stat-prefix-line-height: 1.4;
    --roi-stat-cell-gap: 8px;
    --roi-stat-cta-title-size: 50px;
    --roi-stat-cta-title-line-height: 1.1;
    --subpage-stat-table-height: auto;
    --subpage-stat-table-aspect-ratio: auto;
    --subpage-stat-table-value-num-size: var(--roi-stat-value-num-size);
    --subpage-stat-table-value-num-line-height: var(--roi-stat-value-num-line-height);
    --subpage-stat-table-value-unit-size: var(--roi-stat-value-unit-size);
    --subpage-stat-table-value-compact-size: var(--roi-stat-value-unit-size);
    --subpage-stat-table-value-compact-line-height: var(--roi-stat-value-num-line-height);
    --subpage-stat-table-label-line-height: var(--roi-stat-prefix-line-height);
    --subpage-stat-table-cell-gap: var(--roi-stat-cell-gap);
    --roi-content-eyebrow-size: 13px;
    --roi-content-eyebrow-line-height: 1.5;
    --roi-content-eyebrow-margin-bottom: var(--section-intro-eyebrow-margin-bottom);
    --roi-content-title-size: 26px;
    --roi-content-title-line-height: 34px;
    --roi-content-title-margin-bottom: var(--section-intro-title-margin-bottom);
    --roi-content-lead-size: 16px;
    --roi-content-lead-line-height: 26px;
    --roi-content-lead-width: 100%;
    --roi-content-lead-max-width: 100%;
    --roi-content-gap: 24px;
    --roi-content-stat-value-num-size: 44px;
    --roi-content-stat-value-num-line-height: 1.1;
    --roi-content-stat-value-unit-size: 28px;
    --roi-content-stat-label-size: 13px;
    --roi-content-stat-label-line-height: 1.4;
    --roi-content-stat-margin-bottom: 16px;
    --roi-content-financing-size: 13px;
    --roi-content-financing-line-height: 20px;

    --diagnosis-intro-eyebrow-size: 13px;
    --diagnosis-intro-eyebrow-line-height: 1.5;
    --diagnosis-intro-eyebrow-margin-bottom: var(--section-intro-eyebrow-margin-bottom);
    --diagnosis-intro-title-size: 24px;
    --diagnosis-intro-title-line-height: 32px;
    --diagnosis-intro-title-margin-bottom: var(--section-intro-title-margin-bottom);
    --diagnosis-cards-gap: var(--mobile-card-grid-gap);
    --diagnosis-card-category-size: 18px;
    --diagnosis-card-category-line-height: 1.5;
    --diagnosis-card-header-margin-bottom: 24px;
    --diagnosis-card-title-size: 19px;
    --diagnosis-card-title-line-height: 26px;
    --diagnosis-card-title-margin-bottom: 18px;
    --diagnosis-card-item-font-size: 13px;
    --diagnosis-card-item-title-line-height: 20px;
    --diagnosis-card-item-text-line-height: 20px;
    --diagnosis-card-padding-block-start: var(--mobile-card-padding-block);
    --diagnosis-card-padding-inline: var(--mobile-card-padding-inline);
    /* Space between horizontal dividers and paragraph text inside cards/tiles */
    --mobile-card-divider-spacing: 18px;
    --diagnosis-card-item-padding-block: var(--mobile-card-divider-spacing);
    --diagnosis-card-item-gap: 10px;
    --diagnosis-card-btn-margin-top: 20px;
    --diagnosis-card-btn-margin-bottom: 0px;
    --diagnosis-card-padding-block-end: var(--mobile-card-padding-block);
    --subpage-cards-gap: var(--mobile-card-grid-gap);
    --subpage-cost-cards-gap: var(--mobile-card-grid-gap);
    --subpage-section-padding-top: calc(48px * var(--hero-coord-scale));
    --subpage-section-padding-bottom: calc(48px * var(--hero-coord-scale));

    --product-lines-intro-eyebrow-size: 13px;
    --product-lines-intro-eyebrow-line-height: 1.5;
    --product-lines-intro-eyebrow-margin-bottom: var(--section-intro-eyebrow-margin-bottom);
    --product-lines-intro-title-size: 26px;
    --product-lines-intro-title-line-height: 34px;
    --product-lines-intro-title-margin-bottom: var(--section-intro-title-margin-bottom);
    --product-lines-card-logo-height: 34px;
    --product-lines-card-title-size: 20px;
    --product-lines-card-title-line-height: 28px;
    --product-lines-card-title-margin-bottom: 24px;
    --product-lines-card-desc-size: 15px;
    --product-lines-card-desc-line-height: 24px;
    --product-lines-card-desc-margin-bottom: 20px;
    --product-lines-cards-gap: var(--mobile-card-grid-gap);
    --product-config-columns-gap: var(--mobile-card-grid-gap);
    --product-config-column-padding-top: var(--mobile-card-padding-block);
    --product-config-column-padding-inline: var(--mobile-card-padding-inline);
    --product-config-column-padding-bottom: var(--mobile-card-padding-block);
    --product-config-tile-name-size: 15px;
    --product-config-tile-code-size: 15px;
    --product-config-tile-desc-size: 14px;
    --product-config-tile-padding: 24px;
    --product-config-tile-desc-margin-top: 8px;
    --product-config-btn-width: 100%;
    --product-config-btn-height: 58px;
    --product-config-btn-margin-top: 24px;
    --product-config-btn-margin-bottom: 24px;
    /* Subpage product tier cards — match homepage product-config-column mobile rhythm */
    --subpage-product-card-logo-margin-bottom: 24px;
    --subpage-product-card-header-margin-bottom: 2px;
    --subpage-product-audience-tile-margin-top: 24px;
    --subpage-product-desc-margin-top: 24px;

    --service-intro-eyebrow-size: 13px;
    --service-intro-eyebrow-line-height: 1.5;
    --service-intro-eyebrow-margin-bottom: var(--section-intro-eyebrow-margin-bottom);
    --service-intro-title-margin-top: 0px;
    --service-intro-title-margin-bottom: var(--section-intro-title-margin-bottom);
    --service-heading-size: 20px;
    --service-heading-line-height: 28px;
    --service-portal-intro-title-size: 22px;
    --service-portal-intro-title-line-height: 30px;
    --service-text-size: 15px;
    --service-text-line-height: 24px;
    --service-card-padding-block: var(--mobile-card-padding-block);
    --service-card-padding-inline: var(--mobile-card-padding-inline);
    --service-stat-tile-padding: 24px;
    --service-package-card-padding-block-end: var(--mobile-card-padding-block);
    --service-panel-card-padding-block-end: var(--mobile-card-padding-block);
    --service-profile-card-padding-block-start: 32px;
    --service-profile-card-padding-block-end: 28px;
    --service-profile-card-padding-inline-start: 18px;
    --service-card-header-gap: 10px;
    --service-card-header-margin-bottom: 24px;
    --service-highlights-gap: var(--mobile-card-grid-gap);
    --service-highlights-margin-bottom: 20px;
    --service-cards-gap: var(--mobile-card-grid-gap);
    --service-grid-gap: var(--mobile-card-grid-gap);
    --service-column-gap: var(--mobile-card-grid-gap);
    --service-checklist-item-gap: 10px;
    --service-checklist-item-padding-top: var(--mobile-card-divider-spacing);
    --service-checklist-margin-left: 0px;
    --service-package-checklist-item-padding: var(--mobile-card-divider-spacing);
    --checklist-item-padding-top: var(--mobile-card-divider-spacing);
    --list-separated-item-padding-top: var(--mobile-card-divider-spacing);
    --service-package-checklist-item-gap-extra: 10px;
    --service-checklist-title-margin-bottom: 4px;
    --service-panel-title-margin-bottom: 18px;
    --service-panel-passport-btn-margin-top: 20px;
    --service-profile-gap: 20px;
    --service-profile-margin-top: 12px;
    --service-profile-photo-size: 72px;
    --service-profile-photo-margin-top: 0px;
    --service-profile-name-size: 18px;
    --service-profile-name-line-height: 26px;
    --service-profile-name-margin-top: 10px;
    --service-profile-role-size: 13px;
    --service-profile-quote-margin-top: 14px;
    --service-profile-quote-padding-left: 14px;
    --service-profile-quote-size: 13px;
    --service-profile-quote-line-height: 20px;
    --service-facts-label-width: 80px;
    --service-facts-row-gap: 10px;
    --service-facts-row-padding-block: 6px;
    --subpage-card-divider-margin-block: calc(12px * var(--subpage-coord-scale));
    --roi-stat-cell-value-margin-block: 20px;
    --roi-content-separator-margin-bottom: 10px;
    --subpage-system-params-table-cell-padding-block: calc(3px * var(--subpage-coord-scale));
    --subpage-system-flow-node-padding-block: calc(12px * var(--subpage-coord-scale));
    --subpage-system-flow-node-divider-margin-block: calc(8px * var(--subpage-coord-scale));
    --subpage-system-flow-node-gap: var(--layout-margin-inline-mobile);
    --service-stat-icon-height: 32px;

    --passport-intro-eyebrow-size: 13px;
    --passport-intro-eyebrow-line-height: 1.5;
    --passport-intro-eyebrow-margin-bottom: var(--section-intro-eyebrow-margin-bottom);
    --passport-intro-title-size: 26px;
    --passport-intro-title-line-height: 34px;
    --passport-intro-title-margin-top: 0px;
    --passport-intro-title-margin-bottom: var(--section-intro-title-margin-bottom);

    --subpage-hero-title-size: 40px;
    --subpage-hero-title-line-height: 1.1;
    --subpage-hero-title-cap-trim: -3px;
    --subpage-hero-title-margin-bottom: 40px;
    --subpage-intro-eyebrow-size: 13px;
    --subpage-intro-eyebrow-line-height: 1.5;
    --subpage-intro-eyebrow-margin-bottom: var(--section-intro-eyebrow-margin-bottom);
    --subpage-intro-title-size: 26px;
    --subpage-intro-title-line-height: 34px;
    --subpage-intro-block-title-margin-top: 0px;
    --subpage-intro-block-title-margin-bottom: var(--section-intro-title-margin-bottom);
    --subpage-process-card-title-size: var(--subpage-intro-title-size);
    --subpage-process-card-title-line-height: var(--subpage-intro-title-line-height);
    --subpage-process-card-title-margin-bottom: var(--subpage-intro-block-title-margin-bottom);
    --subpage-hero-lead-size: 16px;
    --subpage-hero-lead-line-height: 26px;
    --subpage-hero-lead-margin-bottom: 40px;
    --subpage-hero-visual-margin-top: 80px;
    --subpage-product-card-badge-size: 20px;
    --subpage-product-card-badge-line-height: 32px;
    --subpage-product-card-badge-tag-size: var(--subpage-hero-lead-size);
    --subpage-product-card-badge-tag-line-height: var(--subpage-hero-lead-line-height);
    --subpage-card-padding: var(--mobile-card-padding-block) var(--mobile-card-padding-inline);
    --subpage-audit-card-padding-top: var(--mobile-card-padding-block);
    --subpage-audit-cost-card-padding-bottom: var(--mobile-card-padding-block);
    --subpage-cost-tag-row-margin-bottom: calc(12px * var(--subpage-coord-scale));
    --subpage-audit-btn-margin-top: 36px;
    --subpage-tech-apps-btn-margin-top: 36px;
    --subpage-tech-apps-btn-height: 58px;
    --subpage-tech-apps-desc-tile-lead-trim: calc(
      (var(--subpage-hero-lead-line-height) - var(--subpage-hero-lead-size)) / -2
    );
    --subpage-actions-gap: var(--hero-buttons-gap);
    --subpage-tech-cycle-mobile-tab-gap: calc(8px * var(--subpage-coord-scale));
    --subpage-tech-cycle-mobile-tab-min-height: calc(76px * var(--subpage-coord-scale));
    --subpage-tech-cycle-mobile-tab-padding-block: calc(10px * var(--subpage-coord-scale));
    --subpage-tech-cycle-mobile-tab-padding-inline: calc(6px * var(--subpage-coord-scale));
    --subpage-tech-cycle-stat-table-padding-inline: 0;
    --subpage-tech-cycle-stat-table-padding-block-start: 0;
    --subpage-tech-cycle-stat-table-padding-block-end: calc(var(--mobile-card-padding-block) / 2);
    --subpage-tech-cycle-stat-cell-gap: calc(var(--roi-stat-cell-gap) / 2);
    --subpage-tech-cycle-stat-cell-padding-block: calc(var(--service-package-checklist-item-padding) / 2);
    --subpage-tech-cycle-mobile-tab-num-size: 11px;
    --subpage-tech-cycle-mobile-tab-title-size: 13px;
    --subpage-tech-pressure-panel-gutter: calc(10px * var(--subpage-coord-scale));
    --subpage-tech-pressure-panel-padding-block-start: var(--mobile-card-padding-inline);
    --subpage-tech-pressure-readout-min-height: var(--service-badge-height);
    --subpage-tech-pressure-readout-padding-inline: var(--subpage-audit-cost-tag-padding-inline);
    --subpage-tech-pressure-zone-lead-trim: calc(
      (var(--subpage-hero-lead-line-height) - var(--subpage-hero-lead-size)) / -2
    );
    /* Params table mobile — 2 visible cols; data col switched via data-tech-table-col */
    --subpage-tech-table-mobile-table-width: 100%;
    --subpage-tech-table-mobile-label-col: 61%;
    --subpage-tech-table-mobile-data-col: 39%;
    --subpage-tech-table-scroll-gap: var(--hero-buttons-text-gap);

    --kontakt-form-card-width: 100%;
    --kontakt-form-card-padding-inline: var(--mobile-card-padding-inline);
    --kontakt-form-card-padding-block-start: var(--mobile-card-padding-block);
    --kontakt-form-card-padding-block-end: var(--mobile-card-padding-block);
    --kontakt-field-font-size: 16px;
    --kontakt-field-input-height: 58px;
    --kontakt-message-size: 16px;
    --kontakt-consent-size: 13px;
    --kontakt-consent-gap: 10px;
    --kontakt-submit-font-size: 18px;
    --kontakt-submit-note-size: 11px;
    --kontakt-form-gap: 14px;

    --footer-logo-width: 140px;
    --footer-logo-height: 35px;
    --footer-text-size: 13px;
    --footer-desc-size: 13px;
    --footer-desc-width: 100%;
    --footer-desc-margin-top: 16px;
    --footer-desc-margin-inline-start: 0px;
    --footer-col-heading-size: 10px;
    --footer-link-size: 13px;
    --footer-copyright-size: 11px;
    --footer-body-margin-block: 28px;
    --footer-padding-top: 32px;
    --footer-padding-bottom: 16px;
    --footer-bar-padding-top: 16px;
    --footer-col-heading-margin-bottom: 10px;
    --footer-col-list-gap: 6px;
  }
}