/* ==========================================================================
   LEAFORGE TECHNOLOGIES — RESPONSIVE FINAL
   MOBILE CONSISTENCY BUILD: VER10015

   PURPOSE
   -------
   Final responsive safety layer. Loaded last on every page to prevent late desktop rules from breaking mobile layouts.

   SECTION DIRECTORY
   -----------------
   01. Global tablet safety
   02. Inner-page hero / cards / forms
   03. Small-screen corrections
   ========================================================================== */

/* ---------- 1. Global tablet safety ---------- */

@media (max-width: 1100px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  body > main, main, main section, main article, main aside, main div {
    min-width: 0;
  }

  img, picture, video, canvas, iframe {
    max-width: 100% !important;
  }

  #lfFw2MenuToggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }

  main [class*="container"], main [class*="__container"], main [class*="-shell"], main [class*="__shell"] {
    max-width: 100% !important;
  }
}

/* ---------- 2. Tablet layout ---------- */

@media (max-width: 900px) {

  .lf-page-container, .lf-v18-container, .lf-impl-container, .lf-cap-container, .lf-support-container, .lf-rapid-container, .lf-pricing-container, .lf-training-container, .lf-partner-container, .lf-blog-container, .lf-sa-container{
    max-width: 100% !important;
  }

  .lf-v18-overview, .lf-v18-boundary, .lf-impl-dual-grid, .lf-impl-feature-split, .lf-impl-faq-layout, .lf-rapid-pricing-layout, .lf-training-formats-layout, .lf-cap-overview-grid, .lf-unified-second-section .lf-cap-overview-grid, .lf-v7-about-wrap, .lf-gym-about-wrap, .lf-small-business-help, .lf-home-adviser-cta__inner, .lf-cap-cta-inner, .lf-global-consultation > div {
    grid-template-columns: 1fr !important;
  }

  .lf-v18-grid.lf-v18-grid-4, .lf-v18-grid, .lf-v18-why, .lf-v18-link-grid, .lf-mfg-card-grid--four, .lf-dist-card-grid--four, .lf-retail-card-grid--four, .lf-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------- 3. Phone foundation ---------- */

@media (max-width: 767.98px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-size: 16px !important;
    line-height: 1.65 !important;
    overflow-x: clip !important;
  }

  main, main section, main article, main aside, main div, main header, main footer {
    min-width: 0 !important;
    max-width: 100%;
  }

  h1, h2, h3, h4, h5, h6, p, li, a, span, strong, label, button, summary {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  main h1 {
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.6px !important;
  }

  main h2 {
    font-size: clamp(25px, 7.2vw, 32px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.35px !important;
  }

  main h3 {
    font-size: clamp(18px, 5.2vw, 22px) !important;
    line-height: 1.35 !important;
  }

  main p, main li {
    font-size: 14.5px;
    line-height: 1.72 !important;
  }

  img, picture, video, iframe {
    width: auto;
    max-width: 100% !important;
    height: auto;
  }

  /* All major page containers stay inside the viewport. */

  main [class*="container"], main [class*="__container"], main [class*="-shell"], main [class*="__shell"], .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Any content grid becomes one readable column on phones. */

  main [class*="grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  main [class*="row"] {
    min-width: 0 !important;
  }

  main [class*="card"] {
    max-width: 100% !important;
  }

  /* Buttons must never overflow. */

  button, input, select, textarea, a[class*="btn"], a[class*="button"] {
    max-width: 100% !important;
  }

  button, [role="button"], a[class*="btn"], a[class*="button"] {
    min-height: 46px !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
    width: 100% !important;
    font-size: 16px !important;
  }

  /* Horizontal content such as tables scrolls inside its own area. */

  table {
    max-width: 100% !important;
    font-size: 12.5px !important;
  }

  .table-responsive, .lf-table-wrap, [class*="table-wrap"], [class*="table-responsive"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  pre, code {
    max-width: 100% !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
  }
}

/* ---------- 4. Mobile header and full-screen menu ---------- */

@media (max-width: 767.98px) {
  #lfFw2MenuToggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
  }

  body.lf-header-scrolled:not(.home-page) {
    padding-top: 72px !important;
  }
}

/* ---------- 5. Home hero and homepage sections ---------- */

@media (max-width: 767.98px) {

  body.home-page .lf-gym-feature-strip, .page-about-us .lf-gym-feature-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  body.home-page .lf-home-partner-intro, body.home-page .lf-small-business-help, body.home-page .lf-bc-diagram-section, body.home-page .lf-v7-projects-section, body.home-page .lf-bc-modules-green-section, body.home-page .lf-bc-classic-services-section, body.home-page .lf-rapid-packages-directory, body.home-page .lf-home-why-overview, body.home-page .lf-home-why-cards-section, body.home-page .lf-home-transform, body.home-page .lf-home-bc-device-showcase, body.home-page .lf-cap-cta-section {
    overflow: hidden !important;
  }

  body.home-page .lf-home-adviser-cta__inner, .lf-global-consultation .lf-cap-cta-inner, .lf-cap-cta-section .lf-cap-cta-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: center !important;
  }

  body.home-page .lf-home-adviser-cta__inner a, .lf-global-consultation a[class*="btn"], .lf-cap-cta-section a[class*="btn"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ---------- 6. Standard inner-page hero ---------- */

@media (max-width: 767.98px) {

  .lf-inner-page-eyebrow{
    margin-bottom: 14px !important;
    max-width: 100% !important;
  }

  .lf-inner-page-eyebrow .lf-home-eyebrow-text{
    font-size: 11px !important;
    line-height: 1.45 !important;
    letter-spacing: 1.3px !important;
    white-space: normal !important;
  }

  .lf-inner-page-features{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin: 0 0 22px !important;
  }

  .lf-inner-page-features .lf-home-feature-item{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .lf-inner-page-features .lf-home-feature-icon{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
  }

  .lf-inner-page-features .lf-home-feature-icon svg{
    width: 22px !important;
    height: 22px !important;
  }

  .lf-inner-page-features .lf-home-feature-text{
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }

  .lf-inner-page-features .lf-home-feature-separator{
    display: none !important;
  }

}

/* ---------- 7. V18 modernized pages ---------- */

@media (max-width: 767.98px) {
  body.lf-v18-page .lf-v18-section {
    padding: 52px 18px !important;
  }

  body.lf-v18-page .lf-v18-heading {
    max-width: 100% !important;
    margin-bottom: 28px !important;
    text-align: left !important;
  }

  body.lf-v18-page .lf-v18-heading h2, body.lf-v18-page .lf-v18-copy h2, body.lf-v18-page .lf-v18-boundary h2, body.lf-v18-page .lf-v18-cta h2 {
    font-size: clamp(25px, 7.4vw, 32px) !important;
  }

  body.lf-v18-page .lf-v18-heading p, body.lf-v18-page .lf-v18-copy p, body.lf-v18-page .lf-v18-boundary p {
    font-size: 14px !important;
    line-height: 1.72 !important;
  }

  body.lf-v18-page .lf-v18-overview, body.lf-v18-page .lf-v18-boundary, body.lf-v18-page .lf-v18-fit, body.lf-v18-page .lf-v18-price-grid, body.lf-v18-page .lf-v18-cta-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  body.lf-v18-page .lf-v18-grid, body.lf-v18-page .lf-v18-grid.lf-v18-grid-4, body.lf-v18-page .lf-v18-why, body.lf-v18-page .lf-v18-link-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.lf-v18-page .lf-v18-card, body.lf-v18-page .lf-v18-why article, body.lf-v18-page .lf-v18-link-card, body.lf-v18-page .lf-v18-price-card {
    padding: 21px 18px !important;
    border-radius: 15px !important;
  }

  body.lf-v18-page .lf-v18-media {
    border-radius: 16px !important;
  }

  body.lf-v18-page .lf-v18-media img {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }

  body.lf-v18-page .lf-v18-boundary {
    padding: 23px 19px !important;
  }

  body.lf-v18-page .lf-v18-fit > div {
    padding: 21px 18px !important;
  }

  body.lf-v18-page .lf-v18-faq {
    max-width: 100% !important;
  }

  body.lf-v18-page .lf-v18-faq details {
    padding: 0 15px !important;
    border-radius: 12px !important;
  }

  body.lf-v18-page .lf-v18-faq summary {
    padding: 16px 34px 16px 0 !important;
    font-size: 14px !important;
  }

  body.lf-v18-page .lf-v18-faq p {
    font-size: 13.5px !important;
  }

  body.lf-v18-page .lf-v18-cta {
    padding: 38px 18px !important;
  }

  body.lf-v18-page .lf-v18-cta-inner {
    text-align: left !important;
  }

  body.lf-v18-page .lf-v18-cta .lf-home-btn {
    width: 100% !important;
    margin-top: 0 !important;
    justify-content: center !important;
  }
}

/* ---------- 8. Industry pages: manufacturing / distribution / retail ---------- */

@media (max-width: 767.98px) {
  .lf-mfg-section, .lf-dist-section, .lf-retail-section {
    padding: 52px 18px !important;
  }

  .lf-mfg-heading, .lf-dist-heading, .lf-retail-heading {
    margin-bottom: 28px !important;
    text-align: left !important;
  }

  .lf-mfg-heading h2, .lf-dist-heading h2, .lf-retail-heading h2 {
    font-size: clamp(25px, 7.4vw, 32px) !important;
  }

  .lf-mfg-flow-strip, .lf-dist-flow-strip, .lf-retail-flow-strip, .lf-mfg-capability-list, .lf-dist-capability-list, .lf-retail-capability-list, .lf-mfg-fit-layout, .lf-dist-fit-layout, .lf-retail-fit-layout, .lf-mfg-license-note, .lf-dist-license-note, .lf-retail-license-note, .lf-mfg-boundary-callout, .lf-dist-boundary-callout, .lf-retail-boundary-callout {
    grid-template-columns: 1fr !important;
  }

  .lf-mfg-card-grid--four, .lf-mfg-control-grid, .lf-mfg-type-grid, .lf-mfg-checklist, .lf-dist-card-grid--four, .lf-dist-control-grid, .lf-dist-type-grid, .lf-dist-checklist, .lf-retail-card-grid--four, .lf-retail-control-grid, .lf-retail-type-grid, .lf-retail-checklist {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .lf-mfg-capability-list article, .lf-dist-capability-list article, .lf-retail-capability-list article {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  .lf-mfg-fit-cta, .lf-dist-fit-cta, .lf-retail-fit-cta {
    padding: 22px 18px !important;
  }
}

/* ---------- 9. Legacy / approved core-page sections ---------- */

@media (max-width: 767.98px) {
  .lf-cap-overview-grid, .lf-cap-feature-grid, .lf-cap-step-grid, .lf-cap-benefits-grid, .lf-impl-showcase__panel, .lf-impl-dual-grid, .lf-impl-card-grid--three, .lf-impl-card-grid--four, .lf-impl-readiness-grid, .lf-impl-process-grid, .lf-impl-module-grid, .lf-impl-feature-split, .lf-impl-faq-layout, .lf-rapid-fit-grid, .lf-r5-classic-grid, .lf-r5-home-style-grid, .lf-r8-steps-grid, .lf-r5-steps-grid, .lf-support-pro-grid-4, .lf-support-plans-grid, .lf-support-process-grid, .lf-support-value-grid, .lf-pricing-card-grid, .lf-pricing-cost-grid, .lf-pricing-assessment-grid, .lf-pricing-steps, .lf-pricing-faq-grid, .lf-training-audience-grid, .lf-training-online-grid, .lf-training-modules-grid, .lf-training-formats-grid, .lf-bc-potential-grid, .lf-bc-feature-items, .lf-benefits-container, .lf-bc-classic-grid, .lf-rapid-packages-directory__grid, .lf-capabilities-directory__grid, .lf-industry-grid, .lf-blog-card-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .lf-impl-section, .lf-services-v9-section, .lf-bc-v8-section, .lf-support-pro-section, .lf-support-value-section, .lf-rapid-fit-section, .lf-rapid5-section, .lf-rapid8-section, .lf-bc-potential-section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .lf-cap-overview-section, .lf-unified-second-section, .lf-np-studio-section, .lf-gym-about-section, .lf-about-section, .lf-home-why-overview, .lf-home-why-cards-section, .lf-cap-cta-section, .lf-bc-diagram-section, .lf-benefits-section, .lf-industry-section, .lf-bc-modules-green-section, .lf-bc-classic-services-section, .lf-rapid-packages-directory {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .lf-cap-overview-image img, .lf-unified-second-section img, .lf-v7-about-image img, .lf-gym-about-image img, .lf-np-studio-image img, .lf-impl-feature-media img, .lf-help-image-wrap img, .lf-rapid-why-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(220px, 67vw, 310px) !important;
    object-fit: cover !important;
  }
}

/* ---------- 10. About Us page ---------- */

@media (max-width: 767.98px) {
  .page-about-us .lf-about-feature-strip {
    grid-template-columns: 1fr !important;
  }

  .page-about-us .lf-about-approach {
    padding: 48px 18px !important;
  }

  .page-about-us .lf-about-approach__header {
    text-align: left !important;
    margin-bottom: 26px !important;
  }

  .page-about-us .lf-about-approach__grid, .page-about-us .lf-home-why-cards-section .lf-why-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .page-about-us .lf-about-approach__card, .page-about-us .lf-home-why-cards-section .lf-why-card {
    min-height: 0 !important;
    padding: 20px 18px !important;
  }

  .page-about-us .lf-about-approach__actions {
    margin-top: 24px !important;
    text-align: left !important;
  }

  .page-about-us .lf-about-approach__actions .lf-cap-btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-about-us .lf-home-why-cards-section {
    padding: 40px 18px 50px !important;
  }
}

/* ---------- 11. FAQs across all design generations ---------- */

@media (max-width: 767.98px) {
  .ms-faq-section, .lf-mfg-faq, .lf-dist-faq, .lf-retail-faq {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .ms-faq-section .container, .lf-mfg-faq .container, .lf-dist-faq .container, .lf-retail-faq .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .ms-faq-header {
    margin-bottom: 24px !important;
    text-align: left !important;
  }

  .ms-faq-header h2 {
    font-size: 25px !important;
    line-height: 1.22 !important;
  }

  .ms-faq-header p {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }

  .ms-faq-accordion .accordion-item {
    border-radius: 11px !important;
    overflow: hidden !important;
  }

  .ms-faq-accordion .accordion-button {
    min-height: 56px !important;
    padding: 15px 46px 15px 15px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }

  .ms-faq-accordion .accordion-button::after {
    right: 14px !important;
  }

  .ms-faq-accordion .accordion-body {
    padding: 0 15px 16px !important;
  }
}

/* ---------- 12. Form controls and CTA areas ---------- */

@media (max-width: 767.98px) {
  textarea {
    min-height: 130px !important;
  }

  .lf-cap-cta-section, .lf-global-consultation, .lf-home-adviser-cta, .lf-v18-cta {
    overflow: hidden !important;
  }

  .lf-cap-cta-section .lf-home-btn, .lf-global-consultation .lf-home-btn, .lf-home-adviser-cta .lf-home-btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
}

/* ---------- 13. Footer ---------- */

@media (max-width: 767.98px) {
  .lf-back-to-top, #backToTop {
    right: 14px !important;
    bottom: 14px !important;
  }
}

/* ---------- 14. Extra-small phones ---------- */

@media (max-width: 430px) {

  main h1{
    font-size: clamp(28px, 9.2vw, 35px) !important;
  }

  main h2 {
    font-size: clamp(24px, 7.4vw, 29px) !important;
  }

  body.lf-v18-page .lf-v18-section, .lf-mfg-section, .lf-dist-section, .lf-retail-section, .lf-impl-section, .lf-services-v9-section, .lf-bc-v8-section, .lf-support-pro-section, .lf-support-value-section, .lf-rapid-fit-section, .lf-rapid5-section, .lf-rapid8-section, .lf-bc-potential-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .lf-v18-card, .lf-mfg-card, .lf-dist-card, .lf-retail-card, .lf-impl-card, .lf-support-card, .lf-cap-card {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .lf-home-btn, .lf-cap-btn{
    font-size: 11.5px !important;
  }
}

/* ---------- 15. Motion accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   16. VER10015 — MOBILE / DESKTOP VISUAL PARITY
   Keep desktop colors, imagery and component styling. Mobile changes only
   layout, spacing and sizing required for a smaller viewport.
   ========================================================================== */

@media (max-width: 767.98px) {
  /* Preserve full source images in stacked content sections instead of
     forcing a different mobile crop/aspect ratio. */
  main :is(
    .lf-v18-media,
    .lf-cap-overview-media,
    .lf-cap-overview-image,
    .lf-v7-about-image,
    .lf-gym-about-image,
    .lf-np-studio-image,
    .lf-wd-home-image,
    .lf-help-image-wrap,
    .lf-small-business-help__image,
    .lf-home-why-overview__image,
    .lf-rapid-why-image,
    .lf-sa-intro-image,
    .lf-impl-feature-media,
    .lf-training-formats-media
  ) {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }

  main :is(
    .lf-v18-media,
    .lf-cap-overview-media,
    .lf-cap-overview-image,
    .lf-v7-about-image,
    .lf-gym-about-image,
    .lf-np-studio-image,
    .lf-wd-home-image,
    .lf-help-image-wrap,
    .lf-small-business-help__image,
    .lf-home-why-overview__image,
    .lf-rapid-why-image,
    .lf-sa-intro-image,
    .lf-impl-feature-media,
    .lf-training-formats-media
  ) img {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }

  /* Preserve desktop teal/blue section palettes. */
  .lf-v7-why-section > .lf-v7-why-wrap,
  .lf-page-reusable-why-section > .lf-v7-why-wrap,
  .lf-v7-why-section > .lf-v7-why-wrap > .lf-v7-why-content,
  .lf-page-reusable-why-section > .lf-v7-why-wrap > .lf-v7-why-content {
    background: #005953 !important;
    background-color: #005953 !important;
  }

  .lf-v7-why-section > .lf-v7-why-wrap > .lf-v7-why-image,
  .lf-page-reusable-why-section > .lf-v7-why-wrap > .lf-v7-why-image {
    background: #33c5cf !important;
    background-color: #33c5cf !important;
  }

  /* Desktop footer is left-aligned; keep that visual language on phones. */
  .lf-footer-col,
  .lf-footer-col:not(#a#b#c) {
    text-align: left !important;
  }

  .lf-footer-line {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Keep desktop button appearance while allowing safe mobile wrapping. */
  main a[class*="btn"],
  main a[class*="button"],
  body:is(.page-business-central-rapid5,.page-business-central-rapid8) .lf-r5-scope-note a,
  body.page-business-central-for-retail-ecommerce .lf-retail-shopify-callout a {
    max-width: 100% !important;
    white-space: normal !important;
  }
}

@media (max-width: 430px) {
  /* Prevent extremely long CTA labels from touching the viewport edges. */
  main a[class*="btn"],
  main a[class*="button"],
  .lf-standard-hero-cta,
  .lf-home-reference-cta {
    max-width: 100% !important;
  }
}


/* Header offset matches Top Bar + Main Navigation before scroll,
   then collapses to Main Navigation height after scroll. */
@media (max-width: 1100px) {
  body {
    padding-top: 120px !important; /* 42px topbar + 78px navigation */
  }

  body.lf-header-scrolled {
    padding-top: 78px !important;
  }
}

@media (max-width: 767.98px) {
  body {
    padding-top: 114px !important; /* 42px topbar + 72px navigation */
  }

  body.lf-header-scrolled {
    padding-top: 72px !important;
  }
}