/* =========================================================
   ALMARA How It Works v2.9.0 — Footer Late Mobile Lock
   Scope: ONLY #almara-how-it-works-page / B2C How-it-works.
   Purpose: override Elementor document/container CSS that is printed after
   normal enqueued styles. No header/nav/burger/language selectors.
   ========================================================= */

@media screen and (max-width: 767px) {
  html body #almara-how-it-works-page,
  html body .almara-page-how-it-works,
  html body .almara-how-it-works-v1 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    --alm-how-mobile-pad: 20px;
    --alm-how-mobile-max: min(430px, calc(100vw - 40px));
  }

  /* Every page section becomes one clean mobile stack. */
  html body #almara-how-it-works-page .alm-tech-section,
  html body .almara-page-how-it-works .alm-tech-section,
  html body .almara-how-it-works-v1 .alm-tech-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: var(--alm-how-mobile-pad) !important;
    padding-right: var(--alm-how-mobile-pad) !important;
    overflow: hidden !important;
    display: block !important;
  }

  html body #almara-how-it-works-page .alm-tech-section > .e-con-inner,
  html body .almara-page-how-it-works .alm-tech-section > .e-con-inner,
  html body .almara-how-it-works-v1 .alm-tech-section > .e-con-inner {
    width: 100% !important;
    max-width: var(--alm-how-mobile-max) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: clamp(54px, 14vw, 74px) !important;
    padding-bottom: clamp(54px, 14vw, 74px) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 28px !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
  }

  /* Direct section children must not keep Elementor desktop grid columns. */
  html body #almara-how-it-works-page .alm-tech-section > .e-con-inner > .elementor-element,
  html body .almara-page-how-it-works .alm-tech-section > .e-con-inner > .elementor-element,
  html body .almara-how-it-works-v1 .alm-tech-section > .e-con-inner > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Hero: content and visual stack. */
  html body #almara-how-it-works-page #alm-how-hero > .e-con-inner,
  html body .almara-page-how-it-works #alm-how-hero > .e-con-inner,
  html body .almara-how-it-works-v1 #alm-how-hero > .e-con-inner {
    max-width: var(--alm-how-mobile-max) !important;
    padding-top: 42px !important;
    padding-bottom: 52px !important;
    gap: 24px !important;
  }

  html body #almara-how-it-works-page #alm-how-hero .alm-tech-hero-copy,
  html body #almara-how-it-works-page #alm-how-hero .alm-tech-hero-media,
  html body .almara-page-how-it-works #alm-how-hero .alm-tech-hero-copy,
  html body .almara-page-how-it-works #alm-how-hero .alm-tech-hero-media,
  html body .almara-how-it-works-v1 #alm-how-hero .alm-tech-hero-copy,
  html body .almara-how-it-works-v1 #alm-how-hero .alm-tech-hero-media {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }

  html body #almara-how-it-works-page #alm-how-hero .alm-tech-hero-title .elementor-heading-title,
  html body .almara-page-how-it-works #alm-how-hero .alm-tech-hero-title .elementor-heading-title,
  html body .almara-how-it-works-v1 #alm-how-hero .alm-tech-hero-title .elementor-heading-title {
    font-size: clamp(38px, 11.5vw, 50px) !important;
    line-height: .94 !important;
    max-width: 100% !important;
  }

  /* All nested Elementor containers in content modules must be full width. */
  html body #almara-how-it-works-page :is(.alm-tech-section-copy,.alm-tech-hero-copy,.alm-tech-hero-media,.alm-tech-equipment-copy,.alm-tech-equipment-visuals,.alm-tech-partner-list-wrap,.alm-tech-partner-visual-card,.alm-tech-final-card--dark,.alm-tech-final-card--light),
  html body .almara-page-how-it-works :is(.alm-tech-section-copy,.alm-tech-hero-copy,.alm-tech-hero-media,.alm-tech-equipment-copy,.alm-tech-equipment-visuals,.alm-tech-partner-list-wrap,.alm-tech-partner-visual-card,.alm-tech-final-card--dark,.alm-tech-final-card--light),
  html body .almara-how-it-works-v1 :is(.alm-tech-section-copy,.alm-tech-hero-copy,.alm-tech-hero-media,.alm-tech-equipment-copy,.alm-tech-equipment-visuals,.alm-tech-partner-list-wrap,.alm-tech-partner-visual-card,.alm-tech-final-card--dark,.alm-tech-final-card--light) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* Main card/step grids: never stay as skinny columns on phone. */
  html body #almara-how-it-works-page :is(.alm-tech-feature-grid,.alm-tech-mini-grid,.alm-tech-process-grid,.alm-tech-loop-grid,.alm-tech-checklist),
  html body #almara-how-it-works-page :is(.alm-tech-feature-grid,.alm-tech-mini-grid,.alm-tech-process-grid,.alm-tech-loop-grid,.alm-tech-checklist) > .e-con-inner,
  html body .almara-page-how-it-works :is(.alm-tech-feature-grid,.alm-tech-mini-grid,.alm-tech-process-grid,.alm-tech-loop-grid,.alm-tech-checklist),
  html body .almara-page-how-it-works :is(.alm-tech-feature-grid,.alm-tech-mini-grid,.alm-tech-process-grid,.alm-tech-loop-grid,.alm-tech-checklist) > .e-con-inner,
  html body .almara-how-it-works-v1 :is(.alm-tech-feature-grid,.alm-tech-mini-grid,.alm-tech-process-grid,.alm-tech-loop-grid,.alm-tech-checklist),
  html body .almara-how-it-works-v1 :is(.alm-tech-feature-grid,.alm-tech-mini-grid,.alm-tech-process-grid,.alm-tech-loop-grid,.alm-tech-checklist) > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
    overflow: visible !important;
  }

  html body #almara-how-it-works-page :is(.alm-tech-feature-card,.alm-tech-mini-card,.alm-tech-process-step,.alm-tech-loop-step),
  html body #almara-how-it-works-page :is(.alm-tech-feature-grid,.alm-tech-mini-grid,.alm-tech-process-grid,.alm-tech-loop-grid,.alm-tech-checklist) > .elementor-element,
  html body .almara-page-how-it-works :is(.alm-tech-feature-card,.alm-tech-mini-card,.alm-tech-process-step,.alm-tech-loop-step),
  html body .almara-page-how-it-works :is(.alm-tech-feature-grid,.alm-tech-mini-grid,.alm-tech-process-grid,.alm-tech-loop-grid,.alm-tech-checklist) > .elementor-element,
  html body .almara-how-it-works-v1 :is(.alm-tech-feature-card,.alm-tech-mini-card,.alm-tech-process-step,.alm-tech-loop-step),
  html body .almara-how-it-works-v1 :is(.alm-tech-feature-grid,.alm-tech-mini-grid,.alm-tech-process-grid,.alm-tech-loop-grid,.alm-tech-checklist) > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    margin: 0 !important;
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
    transform: none !important;
  }

  /* Card content layout: icon left, readable text right. */
  html body #almara-how-it-works-page :is(.alm-tech-feature-card,.alm-tech-mini-card,.alm-tech-process-step) > .e-con-inner,
  html body .almara-page-how-it-works :is(.alm-tech-feature-card,.alm-tech-mini-card,.alm-tech-process-step) > .e-con-inner,
  html body .almara-how-it-works-v1 :is(.alm-tech-feature-card,.alm-tech-mini-card,.alm-tech-process-step) > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-areas: "icon title" "icon text" !important;
    gap: 5px 14px !important;
    align-items: start !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 18px !important;
  }

  html body #almara-how-it-works-page .alm-tech-loop-step > .e-con-inner,
  html body .almara-page-how-it-works .alm-tech-loop-step > .e-con-inner,
  html body .almara-how-it-works-v1 .alm-tech-loop-step > .e-con-inner {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    grid-template-areas: "num title" "num text" !important;
    gap: 3px 13px !important;
    text-align: left !important;
    padding: 14px 16px !important;
  }

  html body #almara-how-it-works-page :is(.alm-tech-ui-icon,.alm-tech-process-icon),
  html body .almara-page-how-it-works :is(.alm-tech-ui-icon,.alm-tech-process-icon),
  html body .almara-how-it-works-v1 :is(.alm-tech-ui-icon,.alm-tech-process-icon) {
    grid-area: icon !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin: 0 !important;
  }

  html body #almara-how-it-works-page .alm-tech-loop-number,
  html body .almara-page-how-it-works .alm-tech-loop-number,
  html body .almara-how-it-works-v1 .alm-tech-loop-number { grid-area: num !important; }
  html body #almara-how-it-works-page :is(.alm-tech-card-title,.alm-tech-mini-title,.alm-tech-process-title,.alm-tech-loop-title),
  html body .almara-page-how-it-works :is(.alm-tech-card-title,.alm-tech-mini-title,.alm-tech-process-title,.alm-tech-loop-title),
  html body .almara-how-it-works-v1 :is(.alm-tech-card-title,.alm-tech-mini-title,.alm-tech-process-title,.alm-tech-loop-title) { grid-area: title !important; }
  html body #almara-how-it-works-page :is(.alm-tech-card-text,.alm-tech-mini-text,.alm-tech-process-text,.alm-tech-loop-text),
  html body .almara-page-how-it-works :is(.alm-tech-card-text,.alm-tech-mini-text,.alm-tech-process-text,.alm-tech-loop-text),
  html body .almara-how-it-works-v1 :is(.alm-tech-card-text,.alm-tech-mini-text,.alm-tech-process-text,.alm-tech-loop-text) { grid-area: text !important; }

  /* Media and CTA cards. */
  html body #almara-how-it-works-page :is(.alm-tech-hero-card,.alm-tech-gallery-card,.alm-tech-partner-visual-card,.alm-tech-final-card--dark,.alm-tech-final-card--light),
  html body .almara-page-how-it-works :is(.alm-tech-hero-card,.alm-tech-gallery-card,.alm-tech-partner-visual-card,.alm-tech-final-card--dark,.alm-tech-final-card--light),
  html body .almara-how-it-works-v1 :is(.alm-tech-hero-card,.alm-tech-gallery-card,.alm-tech-partner-visual-card,.alm-tech-final-card--dark,.alm-tech-final-card--light) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 20px !important;
  }

  html body #almara-how-it-works-page :is(#alm-how-hero,#alm-how-final-cta) :is(.alm-tech-cta-row,.alm-tech-cta-row > .e-con-inner,.alm-tech-cta-row .e-con-inner),
  html body .almara-page-how-it-works :is(#alm-how-hero,#alm-how-final-cta) :is(.alm-tech-cta-row,.alm-tech-cta-row > .e-con-inner,.alm-tech-cta-row .e-con-inner),
  html body .almara-how-it-works-v1 :is(#alm-how-hero,#alm-how-final-cta) :is(.alm-tech-cta-row,.alm-tech-cta-row > .e-con-inner,.alm-tech-cta-row .e-con-inner) {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body #almara-how-it-works-page :is(#alm-how-hero,#alm-how-final-cta) :is(.alm-tech-btn,.alm-tech-btn .elementor-button),
  html body .almara-page-how-it-works :is(#alm-how-hero,#alm-how-final-cta) :is(.alm-tech-btn,.alm-tech-btn .elementor-button),
  html body .almara-how-it-works-v1 :is(#alm-how-hero,#alm-how-final-cta) :is(.alm-tech-btn,.alm-tech-btn .elementor-button) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media screen and (max-width: 374px) {
  html body #almara-how-it-works-page,
  html body .almara-page-how-it-works,
  html body .almara-how-it-works-v1 {
    --alm-how-mobile-pad: 16px;
    --alm-how-mobile-max: min(420px, calc(100vw - 32px));
  }
}


/* =========================================================
   ALMARA How It Works v3.0.0 — Direct-Child Mobile Lock
   Scope: ONLY B2C How-it-works.
   Reason: Elementor e-con-full child containers often have no .e-con-inner;
   previous mobile rules targeted > .e-con-inner and therefore did not fully
   affect card/step internals on phones.
   Header v2.3 untouched: no header/nav/burger/language selectors.
   ========================================================= */

@media screen and (max-width: 767px) {
  html body #almara-how-it-works-page,
  html body .almara-page-how-it-works,
  html body .almara-how-it-works-v1 {
    --alm-how-mobile-pad: 18px !important;
    --alm-how-mobile-max: 100% !important;
  }

  html body #almara-how-it-works-page .alm-tech-section > .e-con-inner,
  html body .almara-page-how-it-works .alm-tech-section > .e-con-inner,
  html body .almara-how-it-works-v1 .alm-tech-section > .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Hero / gallery captions: direct-child layout, not only .e-con-inner. */
  html body #almara-how-it-works-page :is(.alm-tech-hero-caption,.alm-tech-gallery-caption),
  html body .almara-page-how-it-works :is(.alm-tech-hero-caption,.alm-tech-gallery-caption),
  html body .almara-how-it-works-v1 :is(.alm-tech-hero-caption,.alm-tech-gallery-caption) {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    width: 100% !important;
    padding: 18px !important;
  }

  html body #almara-how-it-works-page :is(.alm-tech-hero-caption,.alm-tech-gallery-caption) > .alm-tech-brand-mark,
  html body .almara-page-how-it-works :is(.alm-tech-hero-caption,.alm-tech-gallery-caption) > .alm-tech-brand-mark,
  html body .almara-how-it-works-v1 :is(.alm-tech-hero-caption,.alm-tech-gallery-caption) > .alm-tech-brand-mark {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  html body #almara-how-it-works-page :is(.alm-tech-hero-caption-copy,.alm-tech-gallery-caption-copy),
  html body .almara-page-how-it-works :is(.alm-tech-hero-caption-copy,.alm-tech-gallery-caption-copy),
  html body .almara-how-it-works-v1 :is(.alm-tech-hero-caption-copy,.alm-tech-gallery-caption-copy) {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Feature / FAQ / ready cards: direct child cards get the mobile card layout. */
  html body #almara-how-it-works-page :is(.alm-tech-feature-card,.alm-tech-feature-card--compact),
  html body .almara-page-how-it-works :is(.alm-tech-feature-card,.alm-tech-feature-card--compact),
  html body .almara-how-it-works-v1 :is(.alm-tech-feature-card,.alm-tech-feature-card--compact) {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    grid-template-areas: "icon title" "icon text" !important;
    gap: 6px 14px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.90) !important;
    border: 1px solid rgba(4,32,52,.10) !important;
    box-shadow: 0 14px 34px rgba(4,32,52,.10) !important;
    text-align: left !important;
  }

  html body #almara-how-it-works-page .alm-tech-feature-card > .alm-tech-ui-icon,
  html body #almara-how-it-works-page .alm-tech-feature-card > .elementor-widget-icon,
  html body .almara-page-how-it-works .alm-tech-feature-card > .alm-tech-ui-icon,
  html body .almara-page-how-it-works .alm-tech-feature-card > .elementor-widget-icon,
  html body .almara-how-it-works-v1 .alm-tech-feature-card > .alm-tech-ui-icon,
  html body .almara-how-it-works-v1 .alm-tech-feature-card > .elementor-widget-icon {
    grid-area: icon !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
    align-self: start !important;
  }

  html body #almara-how-it-works-page .alm-tech-feature-card > .alm-tech-card-title,
  html body .almara-page-how-it-works .alm-tech-feature-card > .alm-tech-card-title,
  html body .almara-how-it-works-v1 .alm-tech-feature-card > .alm-tech-card-title {
    grid-area: title !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body #almara-how-it-works-page .alm-tech-feature-card > .alm-tech-card-text,
  html body .almara-page-how-it-works .alm-tech-feature-card > .alm-tech-card-text,
  html body .almara-how-it-works-v1 .alm-tech-feature-card > .alm-tech-card-text {
    grid-area: text !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Safety cards on dark background: same direct-child pattern, but dark glass. */
  html body #almara-how-it-works-page .alm-tech-mini-card,
  html body .almara-page-how-it-works .alm-tech-mini-card,
  html body .almara-how-it-works-v1 .alm-tech-mini-card {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    grid-template-areas: "icon title" "icon text" !important;
    gap: 6px 14px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 18px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.065) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
    text-align: left !important;
  }

  html body #almara-how-it-works-page .alm-tech-mini-card > .alm-tech-ui-icon,
  html body #almara-how-it-works-page .alm-tech-mini-card > .elementor-widget-icon,
  html body .almara-page-how-it-works .alm-tech-mini-card > .alm-tech-ui-icon,
  html body .almara-page-how-it-works .alm-tech-mini-card > .elementor-widget-icon,
  html body .almara-how-it-works-v1 .alm-tech-mini-card > .alm-tech-ui-icon,
  html body .almara-how-it-works-v1 .alm-tech-mini-card > .elementor-widget-icon {
    grid-area: icon !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
  }
  html body #almara-how-it-works-page .alm-tech-mini-card > .alm-tech-mini-title,
  html body .almara-page-how-it-works .alm-tech-mini-card > .alm-tech-mini-title,
  html body .almara-how-it-works-v1 .alm-tech-mini-card > .alm-tech-mini-title { grid-area: title !important; min-width:0!important; width:100%!important; }
  html body #almara-how-it-works-page .alm-tech-mini-card > .alm-tech-mini-text,
  html body .almara-page-how-it-works .alm-tech-mini-card > .alm-tech-mini-text,
  html body .almara-how-it-works-v1 .alm-tech-mini-card > .alm-tech-mini-text { grid-area: text !important; min-width:0!important; width:100%!important; }

  /* Booking process cards: direct-child step containers. */
  html body #almara-how-it-works-page .alm-tech-process-step,
  html body .almara-page-how-it-works .alm-tech-process-step,
  html body .almara-how-it-works-v1 .alm-tech-process-step {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    grid-template-areas: "icon title" "icon text" !important;
    gap: 6px 14px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 18px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.90) !important;
    border: 1px solid rgba(4,32,52,.10) !important;
    box-shadow: 0 14px 34px rgba(4,32,52,.08) !important;
    text-align: left !important;
  }
  html body #almara-how-it-works-page .alm-tech-process-step::after,
  html body .almara-page-how-it-works .alm-tech-process-step::after,
  html body .almara-how-it-works-v1 .alm-tech-process-step::after { display: none !important; content: none !important; }
  html body #almara-how-it-works-page .alm-tech-process-step > .alm-tech-process-icon,
  html body #almara-how-it-works-page .alm-tech-process-step > .elementor-widget-icon,
  html body .almara-page-how-it-works .alm-tech-process-step > .alm-tech-process-icon,
  html body .almara-page-how-it-works .alm-tech-process-step > .elementor-widget-icon,
  html body .almara-how-it-works-v1 .alm-tech-process-step > .alm-tech-process-icon,
  html body .almara-how-it-works-v1 .alm-tech-process-step > .elementor-widget-icon {
    grid-area: icon !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
  }
  html body #almara-how-it-works-page .alm-tech-process-step > .alm-tech-process-title,
  html body .almara-page-how-it-works .alm-tech-process-step > .alm-tech-process-title,
  html body .almara-how-it-works-v1 .alm-tech-process-step > .alm-tech-process-title { grid-area:title!important; min-width:0!important; width:100%!important; }
  html body #almara-how-it-works-page .alm-tech-process-step > .alm-tech-process-text,
  html body .almara-page-how-it-works .alm-tech-process-step > .alm-tech-process-text,
  html body .almara-how-it-works-v1 .alm-tech-process-step > .alm-tech-process-text { grid-area:text!important; min-width:0!important; width:100%!important; }

  /* Six-step flow: direct-child mobile cards. */
  html body #almara-how-it-works-page .alm-tech-loop-step,
  html body .almara-page-how-it-works .alm-tech-loop-step,
  html body .almara-how-it-works-v1 .alm-tech-loop-step {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-areas: "num title" "num text" !important;
    gap: 4px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.055) !important;
    text-align: left !important;
  }
  html body #almara-how-it-works-page .alm-tech-loop-step > .alm-tech-loop-number,
  html body .almara-page-how-it-works .alm-tech-loop-step > .alm-tech-loop-number,
  html body .almara-how-it-works-v1 .alm-tech-loop-step > .alm-tech-loop-number { grid-area:num!important; width:36px!important; min-width:36px!important; margin:0!important; }
  html body #almara-how-it-works-page .alm-tech-loop-step > .alm-tech-loop-title,
  html body .almara-page-how-it-works .alm-tech-loop-step > .alm-tech-loop-title,
  html body .almara-how-it-works-v1 .alm-tech-loop-step > .alm-tech-loop-title { grid-area:title!important; min-width:0!important; width:100%!important; }
  html body #almara-how-it-works-page .alm-tech-loop-step > .alm-tech-loop-text,
  html body .almara-page-how-it-works .alm-tech-loop-step > .alm-tech-loop-text,
  html body .almara-how-it-works-v1 .alm-tech-loop-step > .alm-tech-loop-text { grid-area:text!important; min-width:0!important; width:100%!important; }

  /* Final CTA cards: avoid very narrow internal columns. */
  html body #almara-how-it-works-page .alm-tech-final-card--dark,
  html body #almara-how-it-works-page .alm-tech-final-card--light,
  html body .almara-page-how-it-works .alm-tech-final-card--dark,
  html body .almara-page-how-it-works .alm-tech-final-card--light,
  html body .almara-how-it-works-v1 .alm-tech-final-card--dark,
  html body .almara-how-it-works-v1 .alm-tech-final-card--light {
    display: block !important;
    padding: 24px !important;
  }

  html body #almara-how-it-works-page .alm-tech-final-card--dark > .alm-tech-final-icon,
  html body .almara-page-how-it-works .alm-tech-final-card--dark > .alm-tech-final-icon,
  html body .almara-how-it-works-v1 .alm-tech-final-card--dark > .alm-tech-final-icon {
    margin-bottom: 16px !important;
  }

  html body #almara-how-it-works-page .alm-tech-final-copy,
  html body .almara-page-how-it-works .alm-tech-final-copy,
  html body .almara-how-it-works-v1 .alm-tech-final-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   ALMARA How It Works v3.1 — Mobile Editorial Clean Lock
   Purpose:
   - phone only: remove remaining tall/skinny visual cards
   - phone only: force every Elementor container to full local width
   - phone only: compact image cards and captions
   No header/nav/burger/language selectors.
   ========================================================= */

@media screen and (max-width: 767px) {
  html body #almara-how-it-works-page,
  html body #almara-how-it-works-page :is(.elementor-element,.e-con,.e-con-full,.e-con-boxed,.e-con-inner,.elementor-widget,.elementor-widget-container) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body #almara-how-it-works-page {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    --alm-how-phone-pad: 18px;
    --alm-how-phone-content: calc(100vw - (2 * var(--alm-how-phone-pad)));
  }

  html body #almara-how-it-works-page .alm-tech-section {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: var(--alm-how-phone-pad) !important;
    padding-right: var(--alm-how-phone-pad) !important;
    overflow: hidden !important;
  }

  html body #almara-how-it-works-page .alm-tech-section > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    width: var(--alm-how-phone-content) !important;
    max-width: 430px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body #almara-how-it-works-page .alm-tech-section > .e-con-inner > .elementor-element,
  html body #almara-how-it-works-page .alm-tech-section > .e-con-inner > .e-con,
  html body #almara-how-it-works-page .alm-tech-section > .e-con-inner > .e-con-full {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Phone typography: readable without excessive line breaks. */
  html body #almara-how-it-works-page .alm-tech-hero-title .elementor-heading-title {
    font-size: clamp(34px, 10.4vw, 42px) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
    max-width: 100% !important;
  }

  html body #almara-how-it-works-page .alm-tech-section-title .elementor-heading-title,
  html body #almara-how-it-works-page .alm-tech-final-title .elementor-heading-title,
  html body #almara-how-it-works-page .alm-tech-contact-title .elementor-heading-title {
    font-size: clamp(30px, 9.2vw, 38px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.032em !important;
    max-width: 100% !important;
  }

  html body #almara-how-it-works-page :is(.alm-tech-section-lead,.alm-tech-hero-lead,.alm-tech-card-text,.alm-tech-mini-text,.alm-tech-process-text,.alm-tech-loop-text,.alm-tech-contact-text) :is(.elementor-widget-container,p) {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* Hero: compact, usable image card on phone. */
  html body #almara-how-it-works-page #alm-how-hero > .e-con-inner {
    padding-top: 40px !important;
    padding-bottom: 44px !important;
    gap: 22px !important;
  }

  html body #almara-how-it-works-page #alm-how-hero .alm-tech-hero-card,
  html body #almara-how-it-works-page .alm-tech-gallery-card,
  html body #almara-how-it-works-page .alm-tech-partner-visual-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  html body #almara-how-it-works-page #alm-how-hero .alm-tech-hero-card > .elementor-element,
  html body #almara-how-it-works-page .alm-tech-gallery-card > .elementor-element,
  html body #almara-how-it-works-page .alm-tech-partner-visual-card > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body #almara-how-it-works-page #alm-how-hero .alm-tech-hero-img,
  html body #almara-how-it-works-page #alm-how-hero .alm-tech-hero-img .elementor-widget-container,
  html body #almara-how-it-works-page #alm-how-hero .alm-tech-hero-img img {
    display: block !important;
    width: 100% !important;
    height: 174px !important;
    min-height: 174px !important;
    max-height: 174px !important;
  }

  html body #almara-how-it-works-page #alm-how-hero .alm-tech-hero-img img {
    object-fit: cover !important;
    object-position: 52% 50% !important;
  }

  /* Caption becomes compact; no tall white tower. */
  html body #almara-how-it-works-page #alm-how-hero .alm-tech-hero-caption,
  html body #almara-how-it-works-page .alm-tech-gallery-caption {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 11px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    min-height: 0 !important;
  }

  html body #almara-how-it-works-page #alm-how-hero .alm-tech-brand-mark--caption,
  html body #almara-how-it-works-page .alm-tech-gallery-caption .alm-tech-brand-mark--caption {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    align-self: start !important;
  }

  html body #almara-how-it-works-page #alm-how-hero .alm-tech-caption-title .elementor-heading-title,
  html body #almara-how-it-works-page .alm-tech-gallery-caption .alm-tech-caption-title .elementor-heading-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  html body #almara-how-it-works-page #alm-how-hero .alm-tech-caption-text .elementor-widget-container,
  html body #almara-how-it-works-page .alm-tech-gallery-caption .alm-tech-caption-text .elementor-widget-container,
  html body #almara-how-it-works-page #alm-how-hero .alm-tech-caption-text p,
  html body #almara-how-it-works-page .alm-tech-gallery-caption .alm-tech-caption-text p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  /* Equipment and partner visuals: show as compact image cards, never tall blanks. */
  html body #almara-how-it-works-page .almara-tech-equipment-mosaic,
  html body #almara-how-it-works-page .almara-tech-equipment-mosaic .elementor-widget-container,
  html body #almara-how-it-works-page .almara-tech-equipment-mosaic img,
  html body #almara-how-it-works-page .alm-tech-partner-img,
  html body #almara-how-it-works-page .alm-tech-partner-img .elementor-widget-container,
  html body #almara-how-it-works-page .alm-tech-partner-img img {
    display: block !important;
    width: 100% !important;
    height: 206px !important;
    min-height: 206px !important;
    max-height: 206px !important;
  }

  html body #almara-how-it-works-page .almara-tech-equipment-mosaic img,
  html body #almara-how-it-works-page .alm-tech-partner-img img {
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }

  html body #almara-how-it-works-page .alm-tech-partner-visual-card .alm-tech-btn {
    position: static !important;
    display: block !important;
    width: auto !important;
    margin: -54px 16px 16px auto !important;
    max-width: calc(100% - 32px) !important;
  }

  html body #almara-how-it-works-page .alm-tech-partner-visual-card .alm-tech-btn .elementor-button {
    min-height: 40px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
  }

  /* Cards and step cards: guaranteed full module width. */
  html body #almara-how-it-works-page :is(.alm-tech-feature-grid,.alm-tech-mini-grid,.alm-tech-process-grid,.alm-tech-loop-grid,.alm-tech-checklist),
  html body #almara-how-it-works-page :is(.alm-tech-feature-grid,.alm-tech-mini-grid,.alm-tech-process-grid,.alm-tech-loop-grid,.alm-tech-checklist) > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #almara-how-it-works-page :is(.alm-tech-feature-card,.alm-tech-mini-card,.alm-tech-process-step,.alm-tech-loop-step) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  html body #almara-how-it-works-page :is(.alm-tech-feature-card,.alm-tech-mini-card,.alm-tech-process-step) {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-areas: "icon title" "icon text" !important;
    gap: 5px 13px !important;
    padding: 17px !important;
    text-align: left !important;
  }

  html body #almara-how-it-works-page :is(.alm-tech-feature-card,.alm-tech-mini-card,.alm-tech-process-step) > .elementor-widget-icon,
  html body #almara-how-it-works-page :is(.alm-tech-feature-card,.alm-tech-mini-card,.alm-tech-process-step) > .alm-tech-ui-icon,
  html body #almara-how-it-works-page :is(.alm-tech-feature-card,.alm-tech-mini-card,.alm-tech-process-step) .alm-tech-ui-icon {
    grid-area: icon !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    margin: 0 !important;
  }

  html body #almara-how-it-works-page :is(.alm-tech-feature-card,.alm-tech-mini-card,.alm-tech-process-step) :is(.alm-tech-card-title,.alm-tech-mini-title,.alm-tech-process-title) {
    grid-area: title !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body #almara-how-it-works-page :is(.alm-tech-feature-card,.alm-tech-mini-card,.alm-tech-process-step) :is(.alm-tech-card-text,.alm-tech-mini-text,.alm-tech-process-text) {
    grid-area: text !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body #almara-how-it-works-page :is(.alm-tech-card-title,.alm-tech-mini-title,.alm-tech-process-title,.alm-tech-loop-title) .elementor-heading-title {
    font-size: 14px !important;
    line-height: 1.22 !important;
  }

  /* Flow cards: compact list. */
  html body #almara-how-it-works-page .alm-tech-loop-step {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-areas: "num title" "num text" !important;
    gap: 3px 12px !important;
    padding: 13px 14px !important;
  }
  html body #almara-how-it-works-page .alm-tech-loop-number { grid-area: num !important; }
  html body #almara-how-it-works-page .alm-tech-loop-title { grid-area: title !important; }
  html body #almara-how-it-works-page .alm-tech-loop-text { grid-area: text !important; }

  /* Final CTA: clean stacked phone layout. */
  html body #almara-how-it-works-page #alm-how-final-cta .alm-tech-final-card--dark,
  html body #almara-how-it-works-page #alm-how-final-cta .alm-tech-final-card--light {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 22px !important;
  }

  html body #almara-how-it-works-page #alm-how-final-cta .alm-tech-final-buttons,
  html body #almara-how-it-works-page #alm-how-final-cta .alm-tech-final-buttons > .e-con-inner,
  html body #almara-how-it-works-page #alm-how-final-cta .alm-tech-cta-row,
  html body #almara-how-it-works-page #alm-how-final-cta .alm-tech-cta-row > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  html body #almara-how-it-works-page .alm-tech-btn,
  html body #almara-how-it-works-page .alm-tech-btn .elementor-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}



/* =========================================================
   ALMARA How It Works v5.0 Mobile Renderer Failsafe
   Purpose: Real-phone mobile uses one self-contained editorial renderer.
   Desktop/tablet remain Elementor-native.
   ========================================================= */
.alm-how-mobile-renderer{display:none!important;}
@media (max-width:767px){
  html,body{overflow-x:hidden!important;}
  html body #almara-how-it-works-page{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    background:#FBF7F0!important;
    overflow:hidden!important;
  }
  html body #almara-how-it-works-page > .alm-tech-section,
  html body #almara-how-it-works-page > .alm-how-mobile-shell{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
  }
  html body #almara-how-it-works-page > .alm-how-mobile-renderer,
  html body #almara-how-it-works-page .alm-how-mobile-renderer{
    display:block!important;
    visibility:visible!important;
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    padding:0!important;
    overflow:hidden!important;
    background:#FBF7F0!important;
  }
  .alm-how-mobile-page,.alm-how-mobile-page *{box-sizing:border-box!important;}
  .alm-how-mobile-page{width:100vw!important;max-width:100vw!important;margin:0!important;padding:0!important;font-family:Inter,Arial,sans-serif!important;color:#042034!important;background:#FBF7F0!important;}
  .alm-how-m-sec{width:100%!important;margin:0!important;padding:58px 18px!important;background:#FBF7F0!important;overflow:hidden!important;}
  .alm-how-m-sec + .alm-how-m-sec{border-top:1px solid rgba(4,32,52,.045)!important;}
  .alm-how-m-inner{width:100%!important;max-width:390px!important;margin:0 auto!important;display:block!important;}
  .alm-how-m-dark{background:linear-gradient(115deg,#052838 0%,#07384a 52%,#0a4c5f 100%)!important;color:#fff!important;position:relative!important;}
  .alm-how-m-dark:before,.alm-how-m-hero:before,.alm-how-m-cta-dark:before{content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;background:url('/wp-content/mu-plugins/almara-platform/assets/almara_hero-welle.webp') 78% 58%/190% auto no-repeat!important;opacity:.24!important;mix-blend-mode:screen!important;}
  .alm-how-m-hero{position:relative!important;background:linear-gradient(115deg,#052838 0%,#07384a 52%,#0a4c5f 100%)!important;color:#fff!important;padding-top:34px!important;padding-bottom:46px!important;}
  .alm-how-m-hero .alm-how-m-inner,.alm-how-m-dark .alm-how-m-inner,.alm-how-m-cta-dark > *{position:relative!important;z-index:2!important;}
  .alm-how-m-kicker{font-size:10px!important;line-height:1.2!important;letter-spacing:.18em!important;text-transform:uppercase!important;font-weight:800!important;color:#42919D!important;margin:0 0 14px!important;}
  .alm-how-m-dark .alm-how-m-kicker,.alm-how-m-hero .alm-how-m-kicker{color:#6EC1C2!important;}
  .alm-how-m-title{font-family:Georgia,'Times New Roman',serif!important;font-weight:500!important;letter-spacing:-.045em!important;font-size:clamp(34px,10.2vw,44px)!important;line-height:.94!important;margin:0 0 16px!important;color:#042034!important;}
  .alm-how-m-hero .alm-how-m-title,.alm-how-m-dark .alm-how-m-title,.alm-how-m-cta-dark .alm-how-m-title{color:#fff!important;}
  .alm-how-m-lead{font-size:14px!important;line-height:1.62!important;color:rgba(4,32,52,.82)!important;margin:0!important;}
  .alm-how-m-hero .alm-how-m-lead,.alm-how-m-dark .alm-how-m-lead,.alm-how-m-cta-dark .alm-how-m-lead{color:rgba(255,255,255,.86)!important;}
  .alm-how-m-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:22px!important;width:100%!important;}
  .alm-how-m-btn{display:flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;border-radius:10px!important;padding:12px 18px!important;font-size:13px!important;font-weight:800!important;text-decoration:none!important;text-align:center!important;}
  .alm-how-m-btn-primary{background:#6EC1C2!important;color:#fff!important;box-shadow:0 16px 34px rgba(4,32,52,.20)!important;}
  .alm-how-m-btn-secondary{background:rgba(4,31,44,.34)!important;color:#fff!important;border:1px solid rgba(255,255,255,.38)!important;}
  .alm-how-m-btn-coral{background:#EDA88E!important;color:#fff!important;}
  .alm-how-m-image-card{width:100%!important;margin:26px 0 0!important;background:#fff!important;border:1px solid rgba(4,32,52,.10)!important;border-radius:20px!important;overflow:hidden!important;box-shadow:0 22px 54px rgba(4,32,52,.18)!important;}
  .alm-how-m-image-card img{display:block!important;width:100%!important;height:210px!important;object-fit:cover!important;object-position:center!important;margin:0!important;padding:0!important;border:0!important;}
  .alm-how-m-equipment-img img{height:190px!important;}
  .alm-how-m-image-caption{padding:18px!important;}
  .alm-how-m-caption-title{font-size:13px!important;line-height:1.35!important;font-weight:850!important;color:#042034!important;margin:0 0 6px!important;}
  .alm-how-m-caption-text{font-size:12px!important;line-height:1.55!important;color:rgba(4,32,52,.68)!important;margin:0!important;}
  .alm-how-m-mini-mark{width:38px!important;height:38px!important;border-radius:12px!important;border:1px solid rgba(110,193,194,.45)!important;background:rgba(110,193,194,.10)!important;display:grid!important;place-items:center!important;color:#42919D!important;font-weight:900!important;margin-bottom:12px!important;}
  .alm-how-m-cards{display:grid!important;grid-template-columns:1fr!important;gap:13px!important;margin-top:26px!important;width:100%!important;}
  .alm-how-m-card,.alm-how-m-step{display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;gap:12px!important;align-items:start!important;width:100%!important;min-width:0!important;padding:17px!important;border-radius:18px!important;background:rgba(255,255,255,.86)!important;border:1px solid rgba(4,32,52,.09)!important;box-shadow:0 14px 34px rgba(4,32,52,.09)!important;}
  .alm-how-m-dark .alm-how-m-card,.alm-how-m-dark .alm-how-m-step{background:rgba(255,255,255,.065)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:none!important;}
  .alm-how-m-card-icon,.alm-how-m-step-number{width:42px!important;height:42px!important;border-radius:999px!important;display:grid!important;place-items:center!important;background:rgba(110,193,194,.13)!important;border:1px solid rgba(110,193,194,.55)!important;color:#42919D!important;font-size:17px!important;font-weight:900!important;}
  .alm-how-m-step-number{background:rgba(237,168,142,.11)!important;border-color:rgba(237,168,142,.62)!important;color:#EDA88E!important;}
  .alm-how-m-dark .alm-how-m-card-icon,.alm-how-m-dark .alm-how-m-step-number{background:rgba(110,193,194,.12)!important;border-color:rgba(110,193,194,.50)!important;color:#6EC1C2!important;}
  .alm-how-m-card-title,.alm-how-m-step-title{font-size:13px!important;line-height:1.25!important;font-weight:850!important;color:#042034!important;margin:0 0 5px!important;}
  .alm-how-m-dark .alm-how-m-card-title,.alm-how-m-dark .alm-how-m-step-title{color:#fff!important;}
  .alm-how-m-card-text,.alm-how-m-step-text{font-size:12px!important;line-height:1.55!important;color:rgba(4,32,52,.72)!important;margin:0!important;}
  .alm-how-m-dark .alm-how-m-card-text,.alm-how-m-dark .alm-how-m-step-text{color:rgba(255,255,255,.78)!important;}
  .alm-how-m-bullets{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:22px!important;}
  .alm-how-m-bullets p{font-size:13px!important;line-height:1.45!important;color:rgba(4,32,52,.78)!important;margin:0!important;}
  .alm-how-m-bullets p:before{content:"✓";color:#42919D;font-weight:900;margin-right:8px;}
  .alm-how-m-audience-img img{height:220px!important;}
  .alm-how-m-final{display:grid!important;gap:16px!important;}
  .alm-how-m-final-card{position:relative!important;width:100%!important;border-radius:20px!important;padding:24px!important;overflow:hidden!important;box-shadow:0 18px 44px rgba(4,32,52,.11)!important;}
  .alm-how-m-cta-dark{background:linear-gradient(115deg,#052838 0%,#07384a 52%,#0a4c5f 100%)!important;color:#fff!important;}
  .alm-how-m-contact{background:#fff!important;border:1px solid rgba(4,32,52,.10)!important;color:#042034!important;}
}

/* =========================================================
   ALMARA How It Works v5.1 — Phone Width Normalizer
   Purpose: fix remaining Elementor mobile squeeze by normalizing
   the root container, the HTML widget wrapper and the mobile renderer
   itself. Scope: B2C How-it-works only. No header/nav rules.
   ========================================================= */
@media screen and (max-width: 767px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body:has(#almara-how-it-works-page) .elementor[data-elementor-type="wp-page"],
  body:has(#almara-how-it-works-page) .elementor.elementor-4002,
  body:has(#almara-how-it-works-page) .elementor-location-single,
  body:has(#almara-how-it-works-page) .site-main,
  body:has(#almara-how-it-works-page) main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  html body #almara-how-it-works-page,
  html body .almara-page-how-it-works.alm-how-v5-mobile-renderer-active,
  html body .almara-how-it-works-v1.alm-how-v5-mobile-renderer-active {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #FBF7F0 !important;
  }

  html body #almara-how-it-works-page > .elementor-element:not(.alm-how-mobile-renderer),
  html body #almara-how-it-works-page > .alm-tech-section,
  html body #almara-how-it-works-page > .alm-how-mobile-shell {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body #almara-how-it-works-page > .alm-how-mobile-renderer,
  html body #almara-how-it-works-page .elementor-widget-html.alm-how-mobile-renderer,
  html body .almara-page-how-it-works .elementor-widget-html.alm-how-mobile-renderer {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: #FBF7F0 !important;
  }

  html body #almara-how-it-works-page .elementor-widget-html.alm-how-mobile-renderer > .elementor-widget-container,
  html body .almara-page-how-it-works .elementor-widget-html.alm-how-mobile-renderer > .elementor-widget-container {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #FBF7F0 !important;
  }

  html body #almara-how-it-works-page .alm-how-mobile-page,
  html body .almara-page-how-it-works .alm-how-mobile-page {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #FBF7F0 !important;
  }

  html body #almara-how-it-works-page .alm-how-m-sec,
  html body .almara-page-how-it-works .alm-how-m-sec {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: hidden !important;
  }

  html body #almara-how-it-works-page .alm-how-m-inner,
  html body .almara-page-how-it-works .alm-how-m-inner {
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
  }

  html body #almara-how-it-works-page .alm-how-m-card,
  html body #almara-how-it-works-page .alm-how-m-step,
  html body #almara-how-it-works-page .alm-how-m-image-card,
  html body #almara-how-it-works-page .alm-how-m-final-card,
  html body .almara-page-how-it-works .alm-how-m-card,
  html body .almara-page-how-it-works .alm-how-m-step,
  html body .almara-page-how-it-works .alm-how-m-image-card,
  html body .almara-page-how-it-works .alm-how-m-final-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body #almara-how-it-works-page .alm-how-m-title,
  html body .almara-page-how-it-works .alm-how-m-title {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

@media screen and (max-width: 374px) {
  html body #almara-how-it-works-page .alm-how-m-sec,
  html body .almara-page-how-it-works .alm-how-m-sec {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body #almara-how-it-works-page .alm-how-m-title,
  html body .almara-page-how-it-works .alm-how-m-title {
    font-size: clamp(31px, 9.7vw, 39px) !important;
  }
}


/* =========================================================
   ALMARA How It Works v5.3 FINAL POLISH — Late Layer
   This layer intentionally avoids 100vw breakouts. It assumes the
   outer Elementor page container is Full Width / 100% / Stretch.
   ========================================================= */
@media (max-width:767px){
  html,body{overflow-x:hidden!important;}

  html body #almara-how-it-works-page,
  html body .almara-page-how-it-works,
  html body .almara-how-it-works-v1,
  html body #almara-how-it-works-page .alm-how-mobile-renderer,
  html body #almara-how-it-works-page .alm-how-mobile-renderer > .elementor-widget-container,
  html body #almara-how-it-works-page .alm-how-mobile-page{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    margin-left:0!important;
    margin-right:0!important;
    overflow-x:hidden!important;
    background:#FBF7F0!important;
  }

  html body #almara-how-it-works-page .alm-how-m-sec,
  html body .almara-page-how-it-works .alm-how-m-sec{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:52px 18px!important;
    margin:0!important;
    overflow:hidden!important;
  }

  html body #almara-how-it-works-page .alm-how-m-inner,
  html body .almara-page-how-it-works .alm-how-m-inner{
    width:100%!important;
    max-width:390px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  html body #almara-how-it-works-page .alm-how-m-card,
  html body #almara-how-it-works-page .alm-how-m-step,
  html body #almara-how-it-works-page .alm-how-m-image-card,
  html body #almara-how-it-works-page .alm-how-m-final-card,
  html body .almara-page-how-it-works .alm-how-m-card,
  html body .almara-page-how-it-works .alm-how-m-step,
  html body .almara-page-how-it-works .alm-how-m-image-card,
  html body .almara-page-how-it-works .alm-how-m-final-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}