@charset "UTF-8";
/**
 * =====================================
 * Landing page 2026 — token layer
 * =====================================
 * Figma: MT0XmOUZYV8XwT3HKq9HOp, frame 2:99 (desktop) / 36:1138 (mobile)
 * Frozen in design-tokens.json at the theme root. Change them there and here
 * together, or the two drift.
 *
 * SCOPED ON PURPOSE. These are not in base/_variables.scss because main.css is
 * enqueued on every page of the live site, so global colour and type changes
 * would restyle the existing MulchSpot pages. Everything here sits under .lp26
 * and compiles to public/css/pages/landing-2026.css, loaded only by the landing
 * template.
 *
 * Units: gulp runs pxtorem (rootValue 16) over font-size, letter-spacing,
 * padding, margin, width, height and border-radius, so px authored here is
 * emitted as rem. Two consequences worth keeping:
 *   - letter-spacing is authored in em, so it scales with its own font-size
 *     instead of being frozen to the root.
 *   - line-height is authored unitless, so pxtorem leaves it alone.
 * =====================================
 */
/* ---- Colour ------------------------------------------------------------ */
/* ---- Type -------------------------------------------------------------- */
/* ---- Spacing, radius, grid --------------------------------------------- */
/* ---- Base -------------------------------------------------------------- */
.lp26 {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #272C31;
  background: #EEF1F5;
  /* The parent theme prints an inline <style> block that forces
     `font-size: var(--bs-hN-font-size) !important` on every heading tag, and
     Bootstrap sets `--bs-heading-color: #495057` which its own
     `h1..h6 { color: var(--bs-heading-color) }` then applies — beating an
     inherited colour, because an explicit declaration always beats inheritance.
     Left alone, the h1 rendered 48px dark grey instead of 60px white and the h3
     rendered 32px instead of 21px.

     So: `!important` on font-size, and colour stated rather than inherited.
     Among competing !important declarations specificity decides, and
     `.lp26 .lp26-h1` outranks a bare `h1`, so this holds wherever the inline
     block sits in the head. `color: inherit` hands the section back control, so
     a dark section still gets white text from one place. */
  --bs-heading-color: inherit;
}
.lp26, .lp26 *, .lp26 *::before, .lp26 *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.lp26 .lp26-container {
  width: 100%;
  max-width: 88rem;
  margin-inline: auto;
  padding-inline: 24px;
}
.lp26 h1, .lp26 h2, .lp26 h3, .lp26 h4, .lp26 h5, .lp26 h6 {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
}
.lp26 p {
  margin: 0;
}
.lp26 .lp26-h1 {
  font-size: 3.75rem !important;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: inherit;
}
.lp26 .lp26-h2 {
  font-size: 2.625rem !important;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: inherit;
}
.lp26 .lp26-h3 {
  font-size: 1.3125rem !important;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}
.lp26 .lp26-h5 {
  font-size: 0.96875rem;
  font-weight: 600;
  line-height: 1.4;
}
.lp26 .lp26-intro {
  font-size: 0.96875rem;
  line-height: 1.6;
}
.lp26 .lp26-small {
  font-size: 0.84375rem;
  line-height: 1.6;
}
.lp26 .lp26-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lp26 .lp26-chip {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
}

/* ---- Shared: buttons, pills ---------------------------------------------
   One button recipe, five skins. The design uses green-on-dark-text in the hero
   but green-on-white-text in the footer; both are kept as separate skins rather
   than reconciled, so the build matches the file. See the note in the report:
   white on #86B640 is about 2.6:1, which fails WCAG AA. */
.lp26 .lp26-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 55px;
  padding: 1.125rem 1.75rem;
  border: 0.125rem solid transparent;
  border-radius: 6.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lp26 .lp26-btn--dark {
  background: #272C31;
  color: #FFFFFF;
}
.lp26 .lp26-btn--dark:hover, .lp26 .lp26-btn--dark:focus-visible {
  background: #14181b;
  color: #FFFFFF;
}
.lp26 .lp26-btn--green {
  background: #86B640;
  color: #272C31;
}
.lp26 .lp26-btn--green:hover, .lp26 .lp26-btn--green:focus-visible {
  background: #74a134;
  color: #272C31;
}
.lp26 .lp26-btn--green-on-dark {
  background: #86B640;
  color: #FFFFFF;
}
.lp26 .lp26-btn--green-on-dark:hover, .lp26 .lp26-btn--green-on-dark:focus-visible {
  background: #74a134;
  color: #FFFFFF;
}
.lp26 .lp26-btn--ghost-light {
  border-color: #B0B7BF;
  color: #272C31;
}
.lp26 .lp26-btn--ghost-light:hover, .lp26 .lp26-btn--ghost-light:focus-visible {
  border-color: #272C31;
}
.lp26 .lp26-btn--ghost-dark {
  border-color: #636A71;
  color: #FFFFFF;
}
.lp26 .lp26-btn--ghost-dark:hover, .lp26 .lp26-btn--ghost-dark:focus-visible {
  border-color: #FFFFFF;
}
.lp26 .lp26-btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.lp26 .lp26-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  padding: 0.75rem 1.25rem;
  border: 0.0625rem solid #86B640;
  border-radius: 6.25rem;
  color: #86B640;
}
.lp26 .lp26-ico {
  width: 1em;
  height: 1em;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.lp26 .lp26-skip {
  position: absolute;
  left: -624.9375rem;
}
.lp26 .lp26-skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: #272C31;
  color: #FFFFFF;
  border-radius: 6.25rem;
}

/* ---- Header — node 9:187 ----------------------------------------------- */
.lp26 {
  /* A drawer off the left edge. Fixed rather than absolute so it is full height
     and unaffected by the header scrolling away.

     `visibility` is animated alongside the transform, with a zero-length delay
     on the way in and a full-length one on the way out. That keeps the panel
     out of the tab order while closed without cutting the slide short. */
  /* The site menu, rendered by wp_nav_menu into the panel above. Styled to the
     landing page rather than inheriting the theme's, since none of the theme's
     nav CSS loads on this template. */
  /* The header bar's actions, which the burger stands in for on a phone. */
  /* Its own row at the top of the panel, not floated over the content. It used
     to be absolutely positioned, which laid it across the first menu item and
     hid that item's expand chevron underneath. */
  /* Sub-menus collapse behind their parent. Animated on max-height rather than
     height, since the children's height is not known up front; the cap only has
     to clear the tallest sub-menu, and overflow hides the rest either way. */
  /* The parent row, built in script from the menu item's own label. A real
     button: it opens and closes something rather than going anywhere. */
}
.lp26 .lp26-header {
  background: #FFFFFF;
  border-bottom: 0.0625rem solid #ddd;
}
.lp26 .lp26-header-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 24px;
  max-width: 88rem;
  margin-inline: auto;
  padding: 1.5rem;
}
.lp26 .lp26-logo {
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  line-height: 0;
}
.lp26 .lp26-logo img {
  display: block;
  width: 12.75rem;
  height: 2.375rem;
}
.lp26 .lp26-header-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
}
.lp26 .lp26-burger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  width: 1.75rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.lp26 .lp26-burger span {
  display: block;
  width: 100%;
  height: 0.125rem;
  background: #86B640;
  -webkit-transition: opacity 0.18s ease, -webkit-transform 0.18s ease;
  transition: opacity 0.18s ease, -webkit-transform 0.18s ease;
  transition: transform 0.18s ease, opacity 0.18s ease;
  transition: transform 0.18s ease, opacity 0.18s ease, -webkit-transform 0.18s ease;
}
.lp26 .lp26-burger[aria-expanded=true] span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(45deg);
          transform: translateY(10px) rotate(45deg);
}
.lp26 .lp26-burger[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
}
.lp26 .lp26-burger[aria-expanded=true] span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(-45deg);
          transform: translateY(-10px) rotate(-45deg);
}
.lp26 .lp26-nav {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 60;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  width: min(22.5rem, 100%);
  padding: 1.5rem;
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  /* Children keep their own height. As flex items they shrink by default,
     so on a short viewport (a phone in landscape) the menu squeezed the
     buttons until their borders clipped. */
  /* Bottom breathing room that survives scrolling. A flex column with
     overflow does not paint its own padding-bottom past the scroll end, so
     the last button would sit flush against the panel edge. */
  background: #FFFFFF;
  -webkit-box-shadow: 8px 0 32px rgba(0, 0, 0, 0.14);
          box-shadow: 8px 0 32px rgba(0, 0, 0, 0.14);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  visibility: hidden;
  -webkit-transition: visibility 0s linear 0.28s, -webkit-transform 0.28s ease;
  transition: visibility 0s linear 0.28s, -webkit-transform 0.28s ease;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
  transition: transform 0.28s ease, visibility 0s linear 0.28s, -webkit-transform 0.28s ease;
}
.lp26 .lp26-nav > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.lp26 .lp26-nav::after {
  content: "";
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  height: 1.5rem;
}
.lp26 .lp26-nav.is-open {
  -webkit-transform: none;
          transform: none;
  visibility: visible;
  -webkit-transition: visibility 0s, -webkit-transform 0.28s ease;
  transition: visibility 0s, -webkit-transform 0.28s ease;
  transition: transform 0.28s ease, visibility 0s;
  transition: transform 0.28s ease, visibility 0s, -webkit-transform 0.28s ease;
}
.lp26 .lp26-nav[hidden] {
  display: none;
}
.lp26 .lp26-nav a:not(.lp26-btn) {
  padding: 0.75rem 0;
  font-size: 0.96875rem;
  font-weight: 600;
  color: #272C31;
  text-decoration: none;
  border-bottom: 0.0625rem solid #E1E9F2;
}
.lp26 .lp26-nav a:not(.lp26-btn):hover, .lp26 .lp26-nav a:not(.lp26-btn):focus-visible {
  color: #86B640;
}
.lp26 .lp26-nav-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Top-level items whose href is "#", which is what this menu uses for the
     two group headings. Shown as labels, so nothing invites a click that
     goes nowhere.

     Matched on the dead href alone. Matching every parent instead would
     catch one with a real destination and set `pointer-events: none` on it,
     making a working link unclickable. Once script runs these are buttons
     anyway and the rule stops applying; it is the no-script appearance. */
  /* main.js loads site-wide and collapses every .sub-menu, writing
     `display: none` as an INLINE style for its accordion to toggle. That
     accordion's toggle is the .menu-dropdown chevron hidden below, and its
     handler is bound to the site header's markup, not this panel, so the
     children would be shut with no way to open them.

     !important is the only thing that outranks an inline style, and the
     panel is a vertical list with room, so they simply stay open. */
}
.lp26 .lp26-nav-menu a {
  display: block;
}
.lp26 .lp26-nav-menu > li > a[href="#"]:not(.menu-dropdown) {
  font-size: 0.84375rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #969FA8;
  border-bottom: 0;
  padding-bottom: 0.25rem;
  pointer-events: none;
  cursor: default;
}
.lp26 .lp26-nav-menu .sub-menu {
  display: block !important;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}
.lp26 .lp26-nav-menu .menu-dropdown {
  display: none;
}
.lp26 .lp26-nav-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  padding-top: 1rem;
  /* No overrides on the buttons here. There used to be a `border-bottom: 0`
     to keep the menu row's divider off them, but .lp26-btn draws itself
     with `border: 2px solid transparent` and the ghost variant only
     recolours it, so zeroing one side deleted the outline button's bottom
     edge and left it looking sliced off. The divider rule above already
     excludes .lp26-btn, so there is nothing to undo. */
}
.lp26 .lp26-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.28s ease, visibility 0s linear 0.28s;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.lp26 .lp26-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.28s ease, visibility 0s;
  transition: opacity 0.28s ease, visibility 0s;
}
.lp26 .lp26-nav-close {
  -ms-flex-item-align: end;
      align-self: flex-end;
  margin-bottom: 0.5rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0.0625rem solid #E1E9F2;
  border-radius: 6.25rem;
  background: #FFFFFF;
  color: #272C31;
  cursor: pointer;
}
.lp26 .lp26-nav-close svg {
  width: 1rem;
  height: 1rem;
}
.lp26 .lp26-nav-close:hover {
  border-color: #B0B7BF;
  color: #86B640;
}
.lp26 .lp26-nav-close:focus-visible {
  outline: 2px solid #86B640;
  outline-offset: 2px;
}
.lp26 .lp26-nav-menu .menu-item-has-children > .sub-menu {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.25s ease;
  transition: max-height 0.25s ease;
}
.lp26 .lp26-nav-menu .is-expanded > .sub-menu {
  max-height: 32rem;
}
.lp26 .lp26-nav-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 0.0625rem solid #E1E9F2;
  background: none;
  font-family: inherit;
  font-size: 0.96875rem;
  font-weight: 600;
  color: #272C31;
  text-align: left;
  cursor: pointer;
}
.lp26 .lp26-nav-toggle:hover, .lp26 .lp26-nav-toggle:focus-visible {
  color: #86B640;
}
.lp26 .lp26-nav-toggle:focus-visible {
  outline: 2px solid #86B640;
  outline-offset: 2px;
}
.lp26 .lp26-nav-toggle svg {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
  transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.lp26 .lp26-nav-toggle[aria-expanded=true] svg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .lp26 .lp26-nav,
.lp26 .lp26-backdrop,
.lp26 .lp26-nav-toggle svg,
.lp26 .lp26-nav-menu .menu-item-has-children > .sub-menu {
    -webkit-transition: none;
    transition: none;
  }
}

/* ---- Hero — node 9:205 ------------------------------------------------- */
.lp26 .lp26-hero {
  background: #272C31;
  color: #FFFFFF;
}
.lp26 .lp26-hero-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 32px;
  max-width: 88rem;
  margin-inline: auto;
  padding: 5.875rem 1.5rem;
}
.lp26 .lp26-hero-content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 32px;
  padding-right: 2rem;
}
.lp26 .lp26-hero-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 16px;
}
.lp26 .lp26-hero-desc {
  color: #969FA8;
  padding-right: 5.125rem;
}
.lp26 .lp26-hero-ctas {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 13px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.lp26 .lp26-reviews {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.lp26 .lp26-reviews-logo {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  background: #FFFFFF;
  border-radius: 6.25rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.lp26 .lp26-reviews-logo img {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
}
.lp26 .lp26-reviews-score, .lp26 .lp26-reviews-count {
  color: #FFFFFF;
}
.lp26 .lp26-stars {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 2px;
}
.lp26 .lp26-stars img {
  display: block;
}
.lp26 .lp26-hero-media {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 41.5rem;
  max-width: 100%;
}
.lp26 .lp26-hero-photo {
  display: block;
  width: 36.4375rem;
  max-width: 88%;
  height: auto;
  margin-left: auto;
  border-radius: 1rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.lp26 .lp26-hero-app {
  position: absolute;
  left: 0;
  top: 2.1875rem;
  width: 12.4375rem;
  max-width: 30%;
  height: auto;
  border-radius: 0.5rem;
}

/* ---- Footer — node 14:940 --------------------------------------------- */
.lp26 .lp26-footer {
  background: #272C31;
  color: #FFFFFF;
}
.lp26 .lp26-footer-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 24px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 88rem;
  margin-inline: auto;
  padding: 2rem 1.5rem;
}
.lp26 .lp26-footer-end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.lp26 .lp26-copyright {
  font-size: 0.96875rem;
  line-height: 1.6;
  color: #FFFFFF;
}

/* ---- Responsive ---------------------------------------------------------
   Only 390 and 1920 are designed, so everything between is interpolation.
   Stated as a decision rather than left implicit. */
@media (max-width: 991.98px) {
  .lp26 .lp26-hero-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 3.5rem 1.5rem;
    gap: 40px;
  }
  .lp26 .lp26-hero-content {
    padding-right: 0;
  }
  .lp26 .lp26-hero-desc {
    padding-right: 0;
  }
  .lp26 .lp26-hero-media {
    width: 100%;
  }
  .lp26 .lp26-hero-photo {
    max-width: 82%;
  }
  .lp26 .lp26-h1 {
    font-size: 2.625rem !important;
    letter-spacing: -0.02em;
  }
  .lp26 .lp26-h2 {
    font-size: 2rem !important;
  }
}
/* ---- Shared section scaffolding ----------------------------------------
   Mixins rather than @extend placeholders: a placeholder declared inside one
   .lp26 block and extended from another compounds the parent selector, so you
   end up with ".lp26 .lp26 .lp26-features-inner". Mixins have no such surprise. */
.lp26 {
  /* A modifier, not a change to the base: three sections share
     .lp26-section-head and only this one carries carousel controls. */
}
.lp26 .lp26-section-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.lp26 .lp26-section-head--split {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 24px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.lp26 .lp26-section-head-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  min-width: min(100%, 26.25rem);
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.lp26 .lp26-carousel-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-bottom: 0.125rem;
}
.lp26 .lp26-carousel-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0.0625rem solid #B0B7BF;
  border-radius: 6.25rem;
  background: #FFFFFF;
  color: #272C31;
  cursor: pointer;
  -webkit-transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.lp26 .lp26-carousel-btn:hover:not(:disabled) {
  background: #86B640;
  border-color: #86B640;
  color: #FFFFFF;
}
.lp26 .lp26-carousel-btn:focus-visible {
  outline: 2px solid #86B640;
  outline-offset: 2px;
}
.lp26 .lp26-carousel-ico {
  width: 1rem;
  height: 1rem;
  display: block;
}
.lp26 .lp26-eyebrow--green {
  color: #86B640;
}

/* ---- 02 Features bar — node 49:1640 ----------------------------------- */
.lp26 .lp26-features {
  background: #272C31;
  color: #FFFFFF;
  border-top: 0.0625rem solid #636A71;
}
.lp26 .lp26-features-inner {
  max-width: 88rem;
  margin-inline: auto;
  padding-inline: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 24px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-block: 24px;
}
.lp26 .lp26-features-label {
  padding-left: 0.875rem;
  border-left: 0.125rem solid #86B640;
  color: #FFFFFF;
}
.lp26 .lp26-features-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp26 .lp26-features-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.lp26 .lp26-ico--green {
  color: #86B640;
}

/* ---- 03 Services — node 13:310 ---------------------------------------- */
.lp26 {
  /* Contains the carousel's right-hand bleed below. `vw` counts the vertical
     scrollbar, so the rail overshoots the visible edge by half a scrollbar and
     the whole page picks up a horizontal scroll. Clipping at the section, which
     is exactly as wide as the visible area, trims that overshoot.

     `clip` rather than `hidden`: hidden would make this a scroll container,
     which breaks scroll-into-view for the #services anchor. The hidden line
     before it is the fallback for browsers without `clip`. */
}
.lp26 .lp26-services {
  overflow-x: hidden;
  overflow-x: clip;
}
.lp26 .lp26-services-inner {
  max-width: 88rem;
  margin-inline: auto;
  padding-inline: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 32px;
  padding-block: 94px;
}
.lp26 .lp26-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp26 .lp26-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 48px;
  padding: 1.5rem;
  background: #FFFFFF;
  border-radius: 1rem;
}
.lp26 .lp26-card-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
  width: 100%;
}
.lp26 .lp26-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 634/363;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.75rem;
  background: #343a40;
}
.lp26 .lp26-card-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  text-align: center;
}
.lp26 .lp26-chips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp26 .lp26-chip {
  padding: 0.5rem 0.75rem;
  background: #E1E9F2;
  border-radius: 6.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: #272C31;
}

/* ---- 04 How it works — node 13:480 ------------------------------------ */
.lp26 .lp26-steps-inner {
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: 24px;
}
.lp26 .lp26-steps-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 32px;
  padding: 4rem;
  background: #272C31;
  color: #FFFFFF;
  border-radius: 1.5rem;
}
.lp26 .lp26-steps-left {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 32px;
  padding-right: 5.625rem;
}
.lp26 .lp26-steps-left .lp26-intro {
  color: #969FA8;
}
.lp26 .lp26-step-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp26 .lp26-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 16px;
}
.lp26 .lp26-step-num {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  background: #86B640;
  border-radius: 6.25rem;
  color: #FFFFFF;
  letter-spacing: 0;
}
.lp26 .lp26-step-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.lp26 .lp26-step-body .lp26-small {
  color: #969FA8;
}
.lp26 .lp26-steps-media {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 37.25rem;
  max-width: 100%;
  border-radius: 1rem;
  overflow: hidden;
}
.lp26 .lp26-steps-media img {
  display: block;
  width: 100%;
  height: 31.5rem;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ---- 05 Promises — node 13:579 ---------------------------------------- */
.lp26 .lp26-promises-inner {
  max-width: 88rem;
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 94px;
}
.lp26 .lp26-promise-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp26 .lp26-promise {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  padding: 2rem;
  background: #FFFFFF;
  border-radius: 1rem;
}
.lp26 .lp26-promise-ico {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: #272C31;
  border-radius: 0.5rem;
  color: #86B640;
}
.lp26 .lp26-promise-ico .lp26-ico {
  width: 1rem;
  height: 1rem;
}

/* ---- 06 CTA banner — node 14:756 -------------------------------------- */
.lp26 .lp26-cta-inner {
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: 24px;
}
.lp26 .lp26-cta-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 32px;
  padding: 2.5rem 4rem;
  background: #86B640;
  border-radius: 1.5rem;
  color: #272C31;
}
.lp26 .lp26-cta-img {
  display: block;
  width: 11.3125rem;
  height: 11.3125rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  border-radius: 6.25rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.lp26 .lp26-cta-text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
.lp26 .lp26-cta-btn {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding-inline: 75px;
}

/* ---- 07 Questions — node 14:848 --------------------------------------- */
.lp26 .lp26-faq-inner {
  max-width: 88rem;
  margin-inline: auto;
  padding-inline: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 32px;
  padding-block: 94px;
}
.lp26 .lp26-faq-head {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 549px;
          flex: 0 0 549px;
  max-width: 34.3125rem;
}
.lp26 .lp26-faq-list {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}
.lp26 .lp26-faq-item {
  border-bottom: 0.0625rem solid #d5dbe2;
}
.lp26 .lp26-faq-item summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  cursor: pointer;
  list-style: none;
}
.lp26 .lp26-faq-item summary:hover .lp26-h5 {
  color: #86B640;
}
.lp26 .lp26-faq-item summary::-webkit-details-marker {
  display: none;
}
.lp26 .lp26-faq-item > p {
  padding-bottom: 1.25rem;
}
.lp26 .lp26-faq-item .lp26-faq-chev {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: #86B640;
  -webkit-transition: -webkit-transform 0.18s ease;
  transition: -webkit-transform 0.18s ease;
  transition: transform 0.18s ease;
  transition: transform 0.18s ease, -webkit-transform 0.18s ease;
}
.lp26 .lp26-faq-item .lp26-faq-chev svg {
  display: block;
  width: 100%;
  height: 100%;
}
.lp26 .lp26-faq-item[open] .lp26-faq-chev {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* ---- Responsive: sections --------------------------------------------- */
@media (max-width: 991.98px) {
  .lp26 .lp26-services-inner,
.lp26 .lp26-promises-inner,
.lp26 .lp26-faq-inner {
    padding-block: 56px;
  }
  .lp26 .lp26-cards,
.lp26 .lp26-promise-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp26 .lp26-steps-card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    padding: 2rem;
  }
  .lp26 .lp26-steps-left {
    padding-right: 0;
  }
  .lp26 .lp26-steps-media {
    width: 100%;
  }
  .lp26 .lp26-steps-media img {
    height: auto;
    aspect-ratio: 640/504;
  }
  .lp26 .lp26-cta-card {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 2rem;
  }
  .lp26 .lp26-cta-btn {
    padding-inline: 40px;
  }
  .lp26 .lp26-faq-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .lp26 .lp26-faq-head {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    max-width: none;
  }
}
/* ---- Carousel: sliding past three, and mouse drag ----------------------
   Below 768 the row always slides (the mobile design says so). Above it, only
   when there are more than three services: three fit the 1360 container at 432
   each, four would squeeze into four narrower columns instead of sliding.

   The count is only knowable in PHP, so the template sets `is-carousel` and CSS
   keys off that rather than trying to guess from the DOM. */
.lp26 {
  /* A programmatic smooth scroll is cancelled outright by mandatory snap: the
     animation is killed and the rail snaps straight back to where it started,
     which made the prev/next buttons appear to do nothing at all. Snap is
     lifted for the length of the glide and restored once it settles, by which
     point the rail is already sitting on a snap point so nothing shifts.

     Two classes deep so it beats both the base rule and the mobile one, which
     each set `scroll-snap-type` at single-class specificity. */
  /* Mouse drag. Touch already scrolls natively with momentum and snap, so the
     script leaves it alone and only handles a mouse or pen; these are the
     states it toggles.

     Without `user-select: none` while dragging, the drag selects the card text
     instead of moving the rail. */
}
.lp26 .lp26-carousel.is-carousel {
  overflow-x: auto;
  overflow-y: hidden;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* The left edge stays on the container so the first card lines up under
     the heading; the right edge runs off the side of the screen, so the row
     reads as continuing rather than stopping at a margin.

     `50%` resolves against this rail's containing block and `50vw` against
     the viewport, so the pair lands the right edge exactly on the viewport
     edge at any width. Once the container fills the screen the two cancel
     out to -$lp-pad on their own, which is the plain full-width behaviour
     mobile already had, so this needs no breakpoint of its own. */
  margin-left: -1.5rem;
  margin-right: calc(50% - 50vw);
  padding-inline: 24px;
  /* Inset the snap area by the same padding, so the first card's snap
     position is scrollLeft 0 rather than 24.

     Without it mandatory snap parks the row at 24, which slides the first
     card a padding's width left of the heading it is supposed to line up
     under, and leaves a position the row can never rest at. */
  scroll-padding-inline-start: 24px;
}
.lp26 .lp26-carousel.is-carousel::-webkit-scrollbar {
  display: none;
}
.lp26 .lp26-carousel.is-carousel .lp26-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 32px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.lp26 .lp26-carousel.is-carousel .lp26-card {
  width: 27rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 432px;
          flex: 0 0 432px;
  scroll-snap-align: start;
}
.lp26 .lp26-carousel.is-gliding {
  -ms-scroll-snap-type: none;
      scroll-snap-type: none;
  /* Deliberately NOT `scroll-behavior: smooth`, and the buttons do not use
     scrollBy({behavior:'smooth'}) either. Both were measured moving this
     rail by nothing at all: the browser accepts the scroll and then drops
     it, so the buttons looked dead. Whatever gates smooth scrolling here
     (an OS "animation effects" setting will do it) would break them the
     same way on a real visitor's machine.

     So the script animates scrollLeft frame by frame instead. Movement is
     a plain assignment that cannot be refused, and the easing is what sits
     on top of it, rather than the movement depending on the easing. */
}
.lp26 .lp26-carousel.is-draggable {
  cursor: -webkit-grab;
  cursor: grab;
}
.lp26 .lp26-carousel.is-draggable.is-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-scroll-snap-type: none;
      scroll-snap-type: none;
}
.lp26 .lp26-carousel.is-draggable.is-dragging img, .lp26 .lp26-carousel.is-draggable.is-dragging a {
  pointer-events: none;
}

/* =========================================================================
   Mobile — node 36:1138 (390 x 5215)
   =========================================================================
   Replaces the earlier interpolated guesses with the designed frame. Two of
   those guesses were wrong by a lot: h1 was 34 (should be 38) and h2 was 32
   (should be 27).

   The design has its own bound type scale for mobile (Heading/H1 Mobile and so
   on), so these are the designer's figures rather than a curve I invented. Only
   the headings and body sizes change; eyebrow, chip and button are identical at
   both sizes.

   Applied up to 767.98px. There is no tablet frame, so 768-991.98 stays an
   interpolation and keeps the earlier midway rules.
   ========================================================================= */
/* ---- Editor content ------------------------------------------------------
   Where blocks added in wp-admin land. Everything else on this page is fixed
   markup from the Figma frames, so this section deliberately undoes the parts
   of the page's own reset that only make sense for that fixed markup.

   The page zeroes heading margins (see the `h1..h6` rule near the top) because
   every designed section controls its own spacing with flex gaps. Editor
   content has no such structure, so without restoring vertical rhythm here a
   block's headings sit flush against the paragraphs above them. */
.lp26 .lp26-content {
  background: #EEF1F5;
}
.lp26 .lp26-content-inner {
  max-width: 88rem;
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 64px;
}
.lp26 .lp26-content-inner h1, .lp26 .lp26-content-inner h2, .lp26 .lp26-content-inner h3, .lp26 .lp26-content-inner h4, .lp26 .lp26-content-inner h5, .lp26 .lp26-content-inner h6 {
  margin-block: 1.5em 0.5em;
}
.lp26 .lp26-content-inner h1:first-child, .lp26 .lp26-content-inner h2:first-child, .lp26 .lp26-content-inner h3:first-child, .lp26 .lp26-content-inner h4:first-child, .lp26 .lp26-content-inner h5:first-child, .lp26 .lp26-content-inner h6:first-child {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
.lp26 .lp26-content-inner p, .lp26 .lp26-content-inner ul, .lp26 .lp26-content-inner ol, .lp26 .lp26-content-inner table, .lp26 .lp26-content-inner figure, .lp26 .lp26-content-inner blockquote {
  margin-block: 0 1em;
}
.lp26 .lp26-content-inner p:last-child, .lp26 .lp26-content-inner ul:last-child, .lp26 .lp26-content-inner ol:last-child, .lp26 .lp26-content-inner table:last-child, .lp26 .lp26-content-inner figure:last-child, .lp26 .lp26-content-inner blockquote:last-child {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
.lp26 .lp26-content-inner img, .lp26 .lp26-content-inner video, .lp26 .lp26-content-inner iframe {
  max-width: 100%;
  height: auto;
}

/* ---- Carousel ------------------------------------------------------------
   The scroll container is structural and declared outside the media query;
   only the layout switches at the breakpoint. The scroll-progress bar that
   used to live here was replaced by the prev/next buttons in the section head:
   it reported the position without being able to change it, so a mouse had no
   way to move the row. */
@media (max-width: 767.98px) {
  .lp26 {
    /* ---- Type ---------------------------------------------------------- */
    font-size: 0.84375rem;
    /* ---- Gutters ------------------------------------------------------- */
    /* The controls drop below the copy rather than fighting a 27px heading for
       width on a 390px screen. Right-aligned so they still sit over the end of
       the row they scroll. */
    /* ---- Header — node 36:1139 ------------------------------------------
       72px tall, a smaller logo, and only the primary button survives. The
       second action is not dropped from the markup, just from the bar: the
       hamburger panel still carries it, so nothing becomes unreachable. */
    /* ---- Hero — node 36:1220 -------------------------------------------- */
    /* ---- Why bar — node 36:1257 -----------------------------------------
       The label sits above the list and the three items stack. Stated
       explicitly rather than left to flex-wrap, which happened to look right
       at 390 but would put two on a line at 600. */
    /* ---- Services carousel — node 36:1336 -------------------------------
       The one real restructure on mobile: the three cards become a horizontal
       scroller with 292px cards, deliberately overflowing so the next card
       peeks and the row reads as scrollable.

       Negative margins plus matching padding let it bleed to the screen edge
       while the first card still lines up with the section gutter. */
    /* Matched at the same specificity as the desktop `.is-carousel` rule and
       declared after it, or that rule's extra class wins even in here and the
       cards stay 432 wide on a phone. A media query adds no specificity. */
    /* ---- How it works — node 36:1393 ------------------------------------ */
    /* ---- Promises — node 36:1427 ----------------------------------------
       One per row. The 991.98 block puts them in two columns, so this has to
       say so; without it they stayed two-up and each card came out 159 wide. */
    /* ---- CTA — node 36:1453 ---------------------------------------------
       The circle drops to 121px and centres above the text, and the button
       goes full width beneath. */
    /* ---- Questions — node 45:1485 --------------------------------------- */
    /* ---- Footer — node 45:1510 ------------------------------------------
       Reordered: buttons, then the copyright, then the logo last and centred.
       Done with flex order rather than duplicate markup, so there is one
       footer to maintain. */
  }
  .lp26 .lp26-h1 {
    font-size: 2.375rem !important;
  }
  .lp26 .lp26-h2 {
    font-size: 1.6875rem !important;
  }
  .lp26 .lp26-h3 {
    font-size: 1.125rem !important;
  }
  .lp26 .lp26-h5 {
    font-size: 0.90625rem;
  }
  .lp26 .lp26-intro {
    font-size: 0.875rem;
  }
  .lp26 .lp26-small {
    font-size: 0.78125rem;
  }
  .lp26 .lp26-header-inner {
    padding: 0.875rem 1.25rem;
  }
  .lp26 .lp26-nav {
    padding: 0.5rem 1.25rem 1.25rem;
  }
  .lp26 .lp26-hero-inner {
    padding: 3rem 1.25rem;
  }
  .lp26 .lp26-features-inner {
    padding: 2.0625rem 1.25rem;
  }
  .lp26 .lp26-promises-inner,
.lp26 .lp26-faq-inner {
    padding: 3rem 1.25rem;
  }
  .lp26 .lp26-steps-inner,
.lp26 .lp26-cta-inner {
    padding-inline: 20px;
  }
  .lp26 .lp26-footer-inner {
    padding: 2rem 1.25rem;
  }
  .lp26 .lp26-services-inner {
    padding: 3rem 1.5rem;
  }
  .lp26 .lp26-section-head--split {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  .lp26 .lp26-carousel-nav {
    /* Takes the whole line once it wraps. Without the 100% basis it stays
       content-width and lands at the START of the new line, where
       justify-content has no free space left to push it anywhere. */
    -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
            flex: 1 0 100%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin-bottom: 0;
  }
  .lp26 .lp26-carousel-btn {
    width: 2.875rem;
    height: 2.875rem;
  }
  .lp26 .lp26-logo img {
    width: 9.375rem;
    height: 1.6875rem;
  }
  .lp26 .lp26-header-actions {
    gap: 16px;
  }
  .lp26 .lp26-header-actions .lp26-btn-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: auto;
  }
  .lp26 .lp26-header-actions .lp26-btn--ghost-light {
    display: none;
  }
  .lp26 .lp26-header-actions .lp26-btn {
    min-height: 0;
    padding: 0.875rem 1.375rem;
    border-width: 0;
  }
  .lp26 .lp26-hero-content {
    gap: 24px;
  }
  .lp26 .lp26-hero-ctas {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 13px;
    width: 100%;
  }
  .lp26 .lp26-hero-ctas .lp26-btn {
    width: 100%;
  }
  .lp26 .lp26-hero-media {
    width: 100%;
  }
  .lp26 .lp26-hero-photo {
    width: 88%;
    max-width: 88%;
  }
  .lp26 .lp26-hero-app {
    width: 30%;
    max-width: 30%;
    top: 1.125rem;
  }
  .lp26 .lp26-features-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 36px;
  }
  .lp26 .lp26-features-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 16px;
  }
  .lp26 .lp26-carousel {
    margin-inline: -24px;
    padding-inline: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lp26 .lp26-carousel::-webkit-scrollbar {
    display: none;
  }
  .lp26 .lp26-cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
  .lp26 .lp26-card,
.lp26 .lp26-carousel.is-carousel .lp26-card {
    width: 18.25rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 292px;
            flex: 0 0 292px;
    scroll-snap-align: start;
    gap: 32px;
    padding: 0.75rem 0.75rem 1.5rem;
  }
  .lp26 .lp26-carousel.is-carousel {
    margin-inline: -24px;
    padding-inline: 24px;
  }
  .lp26 .lp26-carousel.is-carousel .lp26-cards {
    gap: 16px;
  }
  .lp26 .lp26-steps-card {
    padding: 2rem 1.25rem;
    gap: 32px;
  }
  .lp26 .lp26-steps-left {
    gap: 32px;
  }
  .lp26 .lp26-step-list {
    gap: 20px;
  }
  .lp26 .lp26-steps-media img {
    aspect-ratio: 350/296;
  }
  .lp26 .lp26-promise-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .lp26 .lp26-promise {
    padding: 2rem;
    gap: 12px;
  }
  .lp26 .lp26-cta-card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    gap: 32px;
    padding: 3rem 1.25rem;
  }
  .lp26 .lp26-cta-img {
    width: 7.5625rem;
    height: 7.5625rem;
  }
  .lp26 .lp26-cta-text {
    gap: 16px;
  }
  .lp26 .lp26-cta-btn {
    width: 100%;
    padding-inline: 28px;
  }
  .lp26 .lp26-faq-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
  }
  .lp26 .lp26-faq-head {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    max-width: none;
  }
  .lp26 .lp26-footer-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 32px;
  }
  .lp26 .lp26-footer-inner .lp26-logo {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .lp26 .lp26-footer-end {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 24px;
    width: 100%;
  }
  .lp26 .lp26-footer-end .lp26-btn-group {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 20.8125rem;
  }
  .lp26 .lp26-footer-end .lp26-btn-group .lp26-btn {
    width: 100%;
  }
  .lp26 .lp26-copyright {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    font-size: 0.84375rem;
    text-align: center;
  }
}