/* =========================================================
   LANDING PAGE 2026 — Design System
   ─────────────────────────────────────────────────────────
   All styles scoped to .lp26-page.
   Zero leakage to other templates.

   Architecture:
   1.  Google Fonts
   2.  CSS Custom Properties (Design Tokens)
   3.  Page wrapper reset
   4.  Header (.lp26-header)
   5.  Hero section (.lp26-hero)
   6.  Accordion (.lp26-accordion)
   7.  Form card (.lp26-form-card) + HubSpot form reset
   8.  Logo strip (.lp26-logos)
   9.  Numbers / Stats block (.lp26-numbers)
   10. Flexible content – logos_row
   11. Flexible content – alt_row
   12. Flexible content – testimonials
   13. Flexible content – faq_accordion
   14. Flexible content – comparison_table
   15. Flexible content – cta_block
   16. Footer (.lp26-footer)
   17. Responsive — Tablet  (max-width: 1024px)
   18. Responsive — Mobile  (max-width: 767px)
   ========================================================= */

/* ─────────────────────────────────────────────────────────
   1. Google Fonts
   ───────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');

/* ─────────────────────────────────────────────────────────
   2. CSS Custom Properties — Design Tokens
   Mirror of the Radix-based RevGrid Design System
   ───────────────────────────────────────────────────────── */
:root {
  /* ── Accent (RG Green) ── */
  --rg-accent-1:  #fafefc;
  --rg-accent-2:  #f4fbf8;
  --rg-accent-3:  #e1f8ee;
  --rg-accent-4:  #cff3e3;
  --rg-accent-5:  #bcead6;
  --rg-accent-6:  #a7dec6;
  --rg-accent-7:  #8ccdb2;
  --rg-accent-8:  #64b998;
  --rg-accent-9:  #1b6a50;  /* Primary CTA background */
  --rg-accent-10: #005b42;  /* CTA hover */
  --rg-accent-11: #2a765c;
  --rg-accent-12: #00160e;  /* Dark section background, main headline */

  /* ── Neutral (Slate) ── */
  --rg-neutral-1:  #fcfcfd;
  --rg-neutral-2:  #f9f9fb;
  --rg-neutral-3:  #f0f0f3;  /* Dividers, accordion borders */
  --rg-neutral-4:  #e8e8ec;
  --rg-neutral-5:  #e0e0e6;
  --rg-neutral-6:  #d9d9e0;  /* Stat card sub-text */
  --rg-neutral-7:  #cfcfd8;
  --rg-neutral-8:  #b8b8c7;
  --rg-neutral-9:  #8b8b9a;
  --rg-neutral-10: #82828f;
  --rg-neutral-11: #60646c;  /* Secondary / muted text */
  --rg-neutral-12: #1c2024;  /* Primary body text, buttons */

  /* ── Secondary (RG Olive) ── */
  --rg-olive-1:  #fcfdfc;
  --rg-olive-2:  #f8faf8;
  --rg-olive-3:  #eff1ef;  /* Nav bottom border */
  --rg-olive-4:  #e7e9e7;
  --rg-olive-5:  #dfe2df;  /* Form card border */
  --rg-olive-6:  #d7dad7;
  --rg-olive-7:  #cccfcc;
  --rg-olive-8:  #b9bcb8;  /* Figma: Colors/RG Olive/8 — partnership-badge separator text */
  --rg-olive-9:  #898e87;
  --rg-olive-10: #7f847d;
  --rg-olive-11: #60655f;
  --rg-olive-12: #1d211c;

  /* ── Typography ── */
  --rg-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --rg-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font weights — Figma Typography/Font weight scale.
   * Naming mirrors the Playfair Display / DM Sans face suffixes
   * exposed in Figma so design-context lookups translate directly. */
  --rg-fw-regular:  400;
  --rg-fw-medium:   500;
  --rg-fw-semibold: 600;
  --rg-fw-bold:     700;

  /* Font sizes */
  --rg-fs-display:        48px;   /* Heading/Desktop/H1 */
  --rg-fs-h2:             40px;   /* Heading/Desktop/H2 */
  --rg-fs-h3:             28px;   /* Heading/Desktop/H3 */
  --rg-fs-h3-lg:          32px;   /* Heading/Desktop/H3 SemiBold (current Figma DS — 32/34) */
  --rg-fs-h4:             24px;   /* Heading/Desktop/H4 */
  --rg-fs-h5:             20px;   /* Heading/Desktop/H5 */
  --rg-fs-mobile-display: 32px;   /* Heading/Mobile/Display — section headings */
  --rg-fs-mobile-h2:      32px;   /* Heading/Mobile/H2 — Figma: 32/34 Playfair Regular */
  --rg-fs-mobile-h3:      24px;   /* Heading/Mobile/H3 */
  --rg-fs-b1:             16px;   /* Body/B1 */
  --rg-fs-b2:             14px;   /* Body/B2 */
  --rg-fs-sm:             12px;   /* Small / captions */

  /* Line heights */
  --rg-lh-display:        50px;
  --rg-lh-h2:             42px;
  --rg-lh-h3:             32px;
  --rg-lh-h3-lg:          34px;  /* paired with --rg-fs-h3-lg */
  --rg-lh-h4:             24px;
  --rg-lh-h5:             24px;
  --rg-lh-mobile-display: 34px;
  --rg-lh-mobile-h2:      34px;  /* paired with --rg-fs-mobile-h2 (32/34) */
  --rg-lh-mobile-h3:      24px;
  --rg-lh-b1:             24px;
  --rg-lh-b2:             20px;  /* Body/B2 — Figma: 14px/20px */
  --rg-lh-sm:             1;

  /* Letter spacing */
  --rg-ls-display: -2px;
  --rg-ls-body:    -0.5px;
  --rg-ls-ui:      -0.1px;

  /* ── Spacing (Radix scale) ── */
  --rg-space-1: 4px;
  --rg-space-2: 8px;
  --rg-space-3: 12px;
  --rg-space-4: 16px;
  --rg-space-5: 24px;
  --rg-space-6: 32px;
  --rg-space-7: 40px;
  --rg-space-7-5: 56px;
  --rg-space-8: 48px;
  --rg-space-9: 64px;
  --rg-space-10: 80px;
  --rg-space-11: 96px;

  /* ── Border Radius ── */
  --rg-radius-1:    3px;   /* Figma: Radius/1 → Medium/1 = 3px */
  --rg-radius-2:    4px;
  --rg-radius-3:    6px;
  --rg-radius-4:    8px;
  --rg-radius-full: 9999px;  /* Figma: Radius/full — pills, partnership badge */

  /* ── Shadows ── */
  --rg-shadow-form:   0px 48px 64px 0px rgba(0, 0, 0, 0.10);
  /* Figma: Shadows/shadow-3 — small elevated pills (e.g. partnership badge) */
  --rg-shadow-3:      0 0 0 1px rgba(0, 0, 51, 0.06),
                      0 2px 3px -2px rgba(0, 0, 51, 0.06),
                      0 3px 12px -4px rgba(0, 0, 0, 0.10),
                      0 4px 16px -8px rgba(0, 0, 0, 0.10);
  --rg-shadow-card:   0px 0px 0px 1px rgba(0, 6, 46, 0.09),
                      0px 8px 40px 0px rgba(0, 0, 0, 0.07),
                      0px 12px 32px -16px rgba(0, 6, 46, 0.09);
  --rg-shadow-card-6: 0px 0px 0px 1px rgba(0, 6, 46, 0.09),
                      0px 12px 60px 0px rgba(0, 0, 0, 0.15),
                      0px 16px 64px 0px rgba(0, 0, 85, 0.02),
                      0px 16px 36px -20px rgba(0, 6, 46, 0.20);

  /* ── Default ── */
  --rg-white:           #ffffff;  /* colors/default/white */
  --rg-black:           #000000;  /* colors/default/black */
  --rg-near-black:      #0c111c;  /* Figma: near-black used for testimonial card name (text-[#0c111c]) — not a Radix scale value, kept as a one-off primitive */
  --rg-accent-contrast: #ffffff;  /* tokens/colors/accent-contrast — text on accent backgrounds */

  /* ── Accent alpha (transparent overlays on dark backgrounds) ── */
  --rg-green-alpha-3: rgba(0, 196, 111, 0.12);  /* Stats card bg on dark section */
  --rg-neutral-alpha-4: rgba(0, 0, 45, 0.09);   /* Nav item active/hover bg — Figma neutral-alpha/4 */

  /* ── Error (Radix Red) ── */
  --rg-error-1:  #fffcfc;
  --rg-error-2:  #fff7f7;
  --rg-error-3:  #feebec;
  --rg-error-4:  #ffdbdc;
  --rg-error-5:  #ffcdce;
  --rg-error-6:  #fdbdbe;
  --rg-error-7:  #f4a9aa;
  --rg-error-8:  #eb8e90;
  --rg-error-9:  #e5484d;  /* Error icon / input border */
  --rg-error-10: #dc3e42;  /* Error hover */
  --rg-error-11: #ce2c31;  /* Error text on light background */
  --rg-error-12: #641723;  /* Error heading / dark text */

  /* ── Semantic aliases ── */
  --rg-color-text:          var(--rg-neutral-12);
  --rg-color-muted:         var(--rg-neutral-11);
  --rg-color-border:        var(--rg-neutral-3);
  --rg-color-surface:       rgba(255, 255, 255, 0.9);
  --rg-color-input-border:  rgba(0, 9, 50, 0.12);
  --rg-color-placeholder:   rgba(0, 5, 29, 0.45);
  --rg-color-cta:           var(--rg-accent-9);
  --rg-color-cta-hover:     var(--rg-accent-10);
  --rg-color-error:         var(--rg-error-11); /* text */
  --rg-color-error-border:  var(--rg-error-9);  /* input ring */
  --rg-color-error-bg:      var(--rg-error-3);  /* banner background */
  --rg-color-error-divider: var(--rg-error-6);  /* banner border */
}

/* ─────────────────────────────────────────────────────────
   3. Page Wrapper Reset
   ───────────────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
}

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

.lp26-page {
  font-family: var(--rg-font-body);
  font-size: var(--rg-fs-b1);
  line-height: 1.5;
  color: var(--rg-color-text);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lp26-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

.lp26-page a {
  color: inherit;
  text-decoration: none;
}

.lp26-page p {
  margin: 0;
}

/* ── Container ── */
.lp26-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rg-space-8);
  padding-right: var(--rg-space-8);
}

/* ── Typography utilities ── */
.lp26-heading-display {
  font-family: var(--rg-font-heading);
  font-weight: 400;
  font-size: var(--rg-fs-display);
  line-height: var(--rg-lh-display);
  letter-spacing: var(--rg-ls-display);
  color: var(--rg-accent-12);
}

.lp26-heading-display em,
.lp26-heading-display i {
  font-style: italic;
  color: var(--rg-accent-9);
}

.lp26-h2 {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: var(--rg-fs-h2);
  line-height: var(--rg-lh-h2);
  letter-spacing: 0;
}

.lp26-h3 {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: var(--rg-fs-h3);
  line-height: var(--rg-lh-h3);
  letter-spacing: 0;
}

.lp26-h5 {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: var(--rg-fs-h5);
  line-height: var(--rg-lh-h5);
  letter-spacing: 0;
}

/* B1/Regular: 16px / 24px line-height / −0.5px tracking */
.lp26-body-lg {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-b1);
  letter-spacing: var(--rg-ls-body);
}

/* B2/Regular: 14px / 16px line-height / −0.5px tracking */
.lp26-body-b2 {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b2);
  line-height: var(--rg-lh-b2);
  letter-spacing: var(--rg-ls-body);
}

.lp26-body-sm {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-sm);
  line-height: var(--rg-lh-sm);
  letter-spacing: var(--rg-ls-body);
}

/* Mobile heading scale — Playfair Display, Regular weight
   Mobile H2: 28px / 30px  |  Mobile H3: 24px / 24px */
.lp26-mobile-h2 {
  font-family: var(--rg-font-heading);
  font-weight: 400;
  font-size: var(--rg-fs-mobile-h2);
  line-height: var(--rg-lh-mobile-h2);
  letter-spacing: 0;
}

.lp26-mobile-h3 {
  font-family: var(--rg-font-heading);
  font-weight: 400;
  font-size: var(--rg-fs-mobile-h3);
  line-height: var(--rg-lh-mobile-h3);
  letter-spacing: 0;
}

/* ── Buttons ── */
.lp26-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rg-space-3);
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-h5);
  letter-spacing: var(--rg-ls-ui);
  border: none;
  border-radius: var(--rg-radius-2);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

.lp26-btn--primary {
  background-color: var(--rg-color-cta);
  color: #ffffff;
  padding: 8px var(--rg-space-5);
  height: 48px;
}

.lp26-btn--primary:hover,
.lp26-btn--primary:focus {
  background-color: var(--rg-color-cta-hover);
  color: #ffffff;
}

.lp26-page a.lp26-btn--primary,
.lp26-page a.lp26-btn--dark {
  color: #ffffff;
  text-decoration: none;
  box-shadow: none;
}
.lp26-page a.lp26-btn--primary:hover,
.lp26-page a.lp26-btn--primary:focus,
.lp26-page a.lp26-btn--dark:hover,
.lp26-page a.lp26-btn--dark:focus {
  color: #ffffff;
  text-decoration: none;
}

.lp26-btn--dark {
  background-color: var(--rg-neutral-12);
  color: #ffffff;
  padding: 8px var(--rg-space-5);
  height: 48px;
}

.lp26-btn--dark:hover,
.lp26-btn--dark:focus {
  background-color: #2d3339;
  color: #ffffff;
}

.lp26-btn--ghost {
  background-color: transparent;
  color: var(--rg-neutral-12);
  padding: 2px var(--rg-space-4);
  height: 40px;
}

.lp26-btn--ghost:hover {
  background-color: var(--rg-neutral-3);
}

/* ─────────────────────────────────────────────────────────
   4. Header (.lp26-header)
   Sticky, full-width, backdrop blur — exact Figma spec
   ───────────────────────────────────────────────────────── */
.lp26-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--rg-olive-3);
}

.lp26-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px var(--rg-space-8); /* py-8px per Figma — auto height ≈ 64px desktop */
}

/* Logo */
.lp26-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.lp26-header__logo img {
  height: 32px;
  width: auto;
}

/* Nav */
.lp26-header__nav {
  display: flex;
  align-items: center;
  gap: var(--rg-space-2);
  flex: 1;
  justify-content: center;
  padding: 0 var(--rg-space-5);
}

.lp26-header__nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--rg-space-3);
  height: 40px;
  padding: 2px var(--rg-space-4);
  border-radius: var(--rg-radius-2);
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: var(--rg-fs-b1);
  color: var(--rg-neutral-12);
  letter-spacing: var(--rg-ls-ui);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.lp26-header__nav-item:hover {
  background-color: var(--rg-neutral-alpha-4);
  color: var(--rg-neutral-12);
}

.lp26-header a.lp26-header__nav-item,
.lp26-header a.lp26-header__logo {
  color: #1c2024;
  text-decoration: none;
}
.lp26-header a.lp26-header__nav-item:hover {
  color: #1c2024;
  text-decoration: none;
}

.lp26-header__nav-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

.lp26-header__nav-chevron svg {
  width: 10px;
  height: 6px;
}

/* CTA */
.lp26-header__cta {
  flex-shrink: 0;
}

/* Mobile hamburger — hidden on desktop */
.lp26-header__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--rg-space-2);
  align-items: center;
  justify-content: center;
}

.lp26-header__hamburger-line {
  width: 24px;
  height: 2px;
  background-color: var(--rg-neutral-12);
  border-radius: 2px;
  transition: all 0.2s ease;
  display: block;
}

/* ── Dropdown trigger button ── */
.lp26-header__nav-item--dropdown {
  background: none;
  border: none;
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: var(--rg-fs-b1);
  letter-spacing: var(--rg-ls-ui);
  cursor: pointer;
}

.lp26-header__nav-item--dropdown[aria-expanded="true"] {
  background-color: var(--rg-neutral-alpha-4);
}

/* ── Dropdowns (Product + secondary) ── */
.lp26-header__dropdown {
  display: none;  /* hidden by default; JS adds .is-open */
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid var(--rg-olive-3);
}

.lp26-header__dropdown.is-open {
  display: block;
}

/* Product: fixed 4-column mega layout */
.lp26-header__dropdown-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rg-space-4);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--rg-space-5) var(--rg-space-8);
}

/* Platform / Customers / Resources / Company:
   auto-fit so columns are responsive to how many sections exist */
.lp26-header__dropdown-inner--auto {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lp26-header__dropdown-col {
  display: flex;
  flex-direction: column;
  gap: var(--rg-space-3);
}

/* Section label: "RG CAPTURE", "RG INSPECT", etc. */
.lp26-header__dropdown-col-header {
  font-family: var(--rg-font-body);
  font-weight: 700;
  font-size: var(--rg-fs-b2);      /* 14px */
  line-height: var(--rg-lh-b2);   /* 16px */
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-neutral-12);
  padding: var(--rg-space-4) var(--rg-space-2) var(--rg-space-2);
  border-bottom: 1px solid var(--rg-olive-5);
}

/* ── Nav Card ── */
.lp26-nav-card {
  display: flex;
  flex-direction: column;
  gap: var(--rg-space-2);
  padding: var(--rg-space-3) var(--rg-space-2);
  border-radius: var(--rg-radius-2);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s ease;
}

.lp26-nav-card:hover {
  background-color: var(--rg-olive-2);
  text-decoration: none;
  color: inherit;
}

.lp26-nav-card__title {
  display: block;
  font-family: var(--rg-font-body);
  font-weight: 700;
  font-size: var(--rg-fs-b1);     /* 16px */
  line-height: 20px;
  letter-spacing: var(--rg-ls-ui);
  color: var(--rg-neutral-12);
}

.lp26-nav-card__desc {
  display: block;
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b2);     /* 14px */
  line-height: var(--rg-lh-b2);  /* 16px */
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-neutral-11);
}

/* Mobile nav drawer */
.lp26-header__mobile-menu {
  display: none;
}

/* ─────────────────────────────────────────────────────────
   5. Hero Section (.lp26-hero)
   ───────────────────────────────────────────────────────── */
.lp26-hero {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* bg variants */
.lp26-hero--bg-white {
  background-color: #ffffff;
}

.lp26-hero--bg-green-gradient {
  background: linear-gradient(131.34deg, #ffffff 50.043%, #e1f8ee 88.331%);
}

.lp26-hero--bg-light-green {
  background-color: var(--rg-accent-3);
}

.lp26-hero--bg-olive {
  background-color: var(--rg-olive-2);
}

/* form-right layout: two equal columns, full viewport height.
   min-height: 840px guarantees the form card (~638px) always fits
   inside the 100px top/bottom padded column without overflowing. */
.lp26-hero--layout-form-right {
  height: calc(100vh - 64px); /* 64px = sticky header height */
  min-height: 840px;
}

.lp26-hero--layout-form-right .lp26-hero__inner {
  display: flex;
  align-items: stretch;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.lp26-hero--layout-form-right .lp26-hero__content-col {
  flex: 1;
  display: flex;
  align-items: stretch;   /* let content-inner fill full height */
  justify-content: flex-start;
  padding: 100px var(--rg-space-8); /* 100px matches form-col so bottoms align */
  overflow: hidden;       /* hard boundary — accordion cannot push outside */
  border-right: 1px solid var(--rg-olive-1);
  border-bottom: 1px solid var(--rg-olive-1);
}

.lp26-hero--layout-form-right .lp26-hero__form-col {
  flex: 1;
  display: flex;
  align-items: stretch;   /* let form-col-inner fill full height, same as content-col */
  justify-content: center;
  padding: 100px var(--rg-space-8);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rg-olive-1);
  border-right: 1px solid var(--rg-olive-1);
  border-bottom: 1px solid var(--rg-olive-1);
}

/* Mirrors lp26-hero__content-inner exactly:
   height:100% fills the column content area, flex-col + margin-top:auto
   on the card then pins the card's OUTER bottom to the column's padding edge. */
.lp26-hero__form-col-inner {
  width: 100%;
  max-width: 538px;
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: flex-start;
}

.lp26-hero__form-col-inner .lp26-form-card {
  margin-top: auto;
  align-self: flex-start;
}

/* Decorative bg inside form col — gradient + SVG lines */
.lp26-hero__form-col-bg {
  position: absolute;
  inset: 0;
  background:
    url('../../images/2026/forms/form-background.svg') 0 0 / 100% 100% no-repeat,
    linear-gradient(131.34deg, #ffffff 50.043%, #e1f8ee 88.331%);
  pointer-events: none;
}

.lp26-hero__content-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%; /* fills the stretched content-col */
  text-align: left;
}

/* Headline */
.lp26-hero__headline {
  font-family: var(--rg-font-heading);
  font-weight: 400;
  font-size: var(--rg-fs-display);
  line-height: var(--rg-lh-display);
  letter-spacing: var(--rg-ls-display);
  color: var(--rg-accent-12);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.lp26-hero__headline-line1 {
  display: block;
}

.lp26-hero__headline-em,
.lp26-hero__headline em,
.lp26-hero__headline i {
  display: block;
  font-style: italic;
  color: var(--rg-accent-9);
}

/* Description */
.lp26-hero__desc {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-b1);
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-neutral-12);
  margin-bottom: 0;
  text-align: left;
}

/* image-right layout */
.lp26-hero--layout-image-right .lp26-hero__inner {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px var(--rg-space-8);
  gap: var(--rg-space-9);
}

.lp26-hero--layout-image-right .lp26-hero__content-col {
  flex: 1;
}

.lp26-hero--layout-image-right .lp26-hero__image-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp26-hero__image-col img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--rg-radius-2);
}

/* CTA button row (for image-right / centered layouts) */
.lp26-hero__cta-row {
  margin-top: var(--rg-space-7);
}

/* centered layout */
.lp26-hero--layout-centered .lp26-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 100px var(--rg-space-8);
}

/* ─────────────────────────────────────────────────────────
   6. Accordion (.lp26-accordion)
   Used in hero (feature list) and faq_accordion layout
   Fully accessible — keyboard + ARIA
   ───────────────────────────────────────────────────────── */
.lp26-accordion {
  width: 100%;
}

/* Hero accordion: sits at the bottom of the content column.
   margin-top: auto pushes it down (matches Figma's justify-between layout),
   so all remaining space lives between the desc and the accordion. */
.lp26-hero__content-inner .lp26-accordion {
  margin-top: auto;
}

.lp26-accordion__item {
  border-bottom: 1px solid var(--rg-color-border);
}

.lp26-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rg-space-2);
  padding: var(--rg-space-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.lp26-accordion__trigger:focus-visible {
  outline: 2px solid var(--rg-accent-9);
  outline-offset: 2px;
  border-radius: var(--rg-radius-2);
}

.lp26-accordion__title {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: var(--rg-fs-h5);
  line-height: var(--rg-lh-h5);
  letter-spacing: 0;
  color: var(--rg-neutral-11);  /* Closed: muted */
  flex: 1;
  transition: color 0.15s ease;
}

/* Open state — title becomes primary */
.lp26-accordion__item.is-open .lp26-accordion__title {
  color: var(--rg-neutral-12);
}

/* Icon: renders as CSS '+'/'-' shapes */
.lp26-accordion__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.lp26-accordion__icon::before,
.lp26-accordion__icon::after {
  content: '';
  position: absolute;
  background-color: var(--rg-neutral-12);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Horizontal bar */
.lp26-accordion__icon::before {
  width: 14px;
  height: 2px;
}

/* Vertical bar (hidden when open = minus sign) */
.lp26-accordion__icon::after {
  width: 2px;
  height: 14px;
}

.lp26-accordion__item.is-open .lp26-accordion__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* Content panel */
.lp26-accordion__body {
  display: block; /* override [hidden] UA display:none; max-height handles visual hide */
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
  padding: 0;
}

.lp26-accordion__item.is-open .lp26-accordion__body {
  /* max-height is set dynamically via JS (scrollHeight) — no static cap */
  padding-bottom: var(--rg-space-5);
}

.lp26-accordion__body p,
.lp26-accordion__body-text {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-b1);
  letter-spacing: var(--rg-ls-ui);
  color: var(--rg-neutral-11);
}

/* ─────────────────────────────────────────────────────────
   7. Form card (.lp26-form-card) + native HubSpot form styling
   ───────────────────────────────────────────────────────
   Strategy: form HTML is rendered server-side in module-hs-form.php
   using HubSpot's fieldGroups JSON. Submission is handled by
   lp26SubmitHsForm() via fetch() to HubSpot's Submissions API v3.
   No HubSpot JS library loaded. No HubSpot CSS injected.
   ───────────────────────────────────────────────────────── */
.lp26-form-card {
  position: relative;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid var(--rg-olive-5);
  border-radius: var(--rg-radius-2);
  box-shadow: var(--rg-shadow-form);
  padding: var(--rg-space-7);
  width: 100%;
  max-width: 538px;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* ── Form element resets ── */

.lp26-form-card form.lp26-native-hs-form {
  width: 100%;
  font-family: var(--rg-font-body);
  display: flex;
  flex-direction: column;
}

/* HubSpot wraps each row in a <fieldset> — strip all chrome */
.lp26-form-card fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

/* Two-column row (e.g. Company Name + Company Size) */
.lp26-form-card fieldset.form-columns-2 {
  display: flex;
  gap: var(--rg-space-2);
}

.lp26-form-card fieldset.form-columns-2 .hs-form-field {
  flex: 1;
  min-width: 0;
}

/* ── Field groups ── */
.lp26-form-card .hs-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--rg-space-2);
  margin-bottom: 20px;
  width: 100%;
}

.lp26-form-card .hs-input {
  width: 100%;
}

/* ── Labels ── */
.lp26-form-card label,
.lp26-form-card .hs-form-field > label {
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-h5);
  letter-spacing: var(--rg-ls-ui);
  color: var(--rg-color-text);
  margin: 0;
  padding: 0;
  display: block;
}

/* ── Text inputs, email, tel, number, textarea, select ── */
.lp26-form-card input[type="text"],
.lp26-form-card input[type="email"],
.lp26-form-card input[type="tel"],
.lp26-form-card input[type="number"],
.lp26-form-card select,
.lp26-form-card textarea {
  width: 100%;
  height: var(--rg-space-7);
  padding: 0 var(--rg-space-3);
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-h5);
  letter-spacing: var(--rg-ls-ui);
  color: var(--rg-color-text);
  background-color: var(--rg-color-surface);
  border: 1px solid var(--rg-color-input-border);
  border-radius: var(--rg-radius-3);
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;
}

.lp26-form-card textarea {
  height: auto;
  min-height: 80px;
  padding: var(--rg-space-2) var(--rg-space-3);
  resize: vertical;
}

.lp26-form-card input::placeholder,
.lp26-form-card textarea::placeholder {
  color: var(--rg-color-placeholder);
}

.lp26-form-card input:focus,
.lp26-form-card select:focus,
.lp26-form-card textarea:focus {
  border-color: var(--rg-accent-9);
  box-shadow: 0 0 0 2px rgba(27, 106, 80, 0.15);
  outline: none;
}

/* Invalid field state — toggled by lp26ValidateField() */
.lp26-form-card .lp26-input--invalid {
  border-color: var(--rg-color-error-border);
  box-shadow: 0 0 0 2px rgba(229, 72, 77, 0.12);
}

/* Select: custom chevron */
.lp26-form-card select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231c2024' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
  cursor: pointer;
}

/* ── Checkbox & consent ── */
.lp26-form-card .legal-consent-container {
  margin-bottom: 20px;
}

.lp26-form-card input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 2px 0 0 0;
  padding: 0;
  border: 1px solid rgba(0, 6, 46, 0.20);
  border-radius: var(--rg-radius-2);
  background-color: var(--rg-color-surface);
  cursor: pointer;
  accent-color: var(--rg-accent-9);
  appearance: auto; /* preserve native checkbox visual */
  -webkit-appearance: auto;
}

.lp26-form-card .hs-form-booleancheckbox-display span,
.lp26-form-card .legal-consent-container p,
.lp26-form-card .legal-consent-container span {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-b1);
  letter-spacing: var(--rg-ls-ui);
  color: var(--rg-neutral-11);
  flex: 1;
}

/* ── Error messages ── */
.lp26-form-card .hs-error-msgs {
  list-style: none;
  padding: 0;
  margin: var(--rg-space-1) 0 0;
}

.lp26-form-card .hs-error-msgs li,
.lp26-form-card .hs-error-msgs li label {
  font-family: var(--rg-font-body);
  font-size: var(--rg-fs-sm);
  line-height: 1.4;
  color: var(--rg-color-error);
  font-weight: 400;
  list-style: none;
}

/* Required asterisk colour */
.lp26-form-card .hs-form-required {
  color: var(--rg-color-error);
}

/* ── Submit button ──
   HubSpot applies the class name from submitButtonClass ("lp26-form-submit")
   to the rendered <input type="submit">.  We style it here with no !important
   needed because HubSpot's own stylesheet has already been stripped from the DOM.
── */
.lp26-form-card input[type="submit"],
.lp26-form-card .hs-button,
.lp26-form-card .lp26-form-submit {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--rg-space-8);
  padding: 0 var(--rg-space-5);
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-h5);
  letter-spacing: var(--rg-ls-ui);
  color: #ffffff;
  background-color: var(--rg-neutral-12);
  border: none;
  border-radius: var(--rg-radius-2);
  cursor: pointer;
  transition: background-color 0.15s ease;
  margin-top: var(--rg-space-5);
  box-shadow: none;
  text-align: center;
}

.lp26-form-card input[type="submit"]:hover,
.lp26-form-card .hs-button:hover,
.lp26-form-card .lp26-form-submit:hover {
  background-color: #2d3339;
}

/* Actions wrapper (HS wraps submit in .hs_submit > .actions) */
.lp26-form-card .hs_submit,
.lp26-form-card .actions {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Native form wrapper */
.lp26-native-form-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}

/* ── Success / error feedback cards ── */
.lp26-form-status {
  border-radius: var(--rg-radius-2);
  padding: var(--rg-space-5) var(--rg-space-5);
  text-align: left;
}

.lp26-form-status p {
  margin: 0;
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-b1);
  letter-spacing: var(--rg-ls-ui);
}

.lp26-form-status--success {
  background-color: var(--rg-accent-2);
  border: 1px solid var(--rg-accent-7);
}

.lp26-form-status--success p {
  color: var(--rg-accent-9);
}

.lp26-form-status--error {
  background-color: #fef2f2;
  border: 1px solid var(--rg-color-error-border);
}

.lp26-form-status--error p {
  color: var(--rg-color-error);
}

/* Consent checkbox row */
.lp26-form-card .legal-consent-container {
  margin-top: var(--rg-space-1);
}

.lp26-form-card .hs-form-booleancheckbox-display {
  display: flex;
  gap: var(--rg-space-2);
  align-items: flex-start;
  margin-bottom: 0;
}

.lp26-form-card .hs-form-booleancheckbox-display input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--rg-neutral-12);
  cursor: pointer;
}

.lp26-form-card .hs-form-booleancheckbox-display span {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-b1);
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-neutral-11);
}

.lp26-form-card .legal-consent-container > p {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-b1);
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-neutral-11);
  margin: 0;
}

/* Inline error banners */
.lp26-form-error-msg {
  padding: 10px 14px;
  border-radius: var(--rg-radius-3);
  font-family: var(--rg-font-body);
  font-size: 13px;
  line-height: 1.5;
  background-color: var(--rg-color-error-bg);
  color: var(--rg-color-error);
  border: 1px solid var(--rg-color-error-divider);
  margin-bottom: var(--rg-space-3);
}

/* ─────────────────────────────────────────────────────────
   8. Logo Strip (.lp26-logos)
   ───────────────────────────────────────────────────────── */
.lp26-logos {
  width: 100%;
  border-top: 1px solid var(--rg-neutral-1);
  padding-top: var(--rg-space-8);
}

.lp26-logos__label {
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-b1);
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-neutral-11);
  text-align: center;
  margin-bottom: 0;
}

.lp26-logos__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rg-space-7);
  padding: var(--rg-space-5) var(--rg-space-8);
}

.lp26-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp26-logos__item img {
  height: 40px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.lp26-logos__item img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────
   9. Numbers / Stats Block (.lp26-numbers)
   ───────────────────────────────────────────────────────── */
.lp26-numbers {
  background-color: var(--rg-accent-12);
  width: 100%;
  padding: 80px var(--rg-space-8);
}

.lp26-numbers__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rg-space-9);
}

.lp26-numbers__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rg-space-4);
  text-align: center;
}

.lp26-numbers__eyebrow {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-h5);
  letter-spacing: var(--rg-ls-ui);
  color: var(--rg-neutral-6);
}

.lp26-numbers__title {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: var(--rg-fs-mobile-display);
  line-height: var(--rg-lh-mobile-display);
  color: var(--rg-accent-1);
  max-width: 556px;
}

/* Cards grid */
.lp26-numbers__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lp26-numbers__card {
  background-color: rgba(0, 196, 111, 0.12);
  padding: 32px;
  width: 220px;
  height: 256px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lp26-numbers__card-label {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b2);
  line-height: var(--rg-lh-b2);
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-neutral-6);
}

.lp26-numbers__card-badge {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.lp26-numbers__card-count {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: var(--rg-fs-mobile-display);
  line-height: var(--rg-lh-mobile-display);
  color: var(--rg-accent-1);
  margin-bottom: 20px;
}

.lp26-numbers__card-desc {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-b1);
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-accent-1);
}

/* ─────────────────────────────────────────────────────────
   10. Flexible Content — logos_row
   ───────────────────────────────────────────────────────── */
.lp26-section-logos {
  width: 100%;
  padding: var(--rg-space-9) 0;
}

.lp26-section-logos__label {
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: var(--rg-fs-b1);
  color: var(--rg-neutral-11);
  text-align: center;
  margin-bottom: var(--rg-space-7);
}

.lp26-section-logos__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--rg-space-9);
}

.lp26-section-logos__grid img {
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
  transition: all 0.15s ease;
}

.lp26-section-logos__grid img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────
   11. Flexible Content — alt_row (alternating image+text)
   ───────────────────────────────────────────────────────── */
.lp26-section-alt {
  padding: 80px 0;
}

.lp26-section-alt--bg-white { background-color: #ffffff; }
.lp26-section-alt--bg-light-green { background-color: var(--rg-accent-3); }
.lp26-section-alt--bg-green-gradient {
  background: linear-gradient(131.34deg, #ffffff 30%, var(--rg-accent-3) 100%);
}

.lp26-section-alt__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--rg-space-8);
  display: flex;
  align-items: center;
  gap: var(--rg-space-9);
}

.lp26-section-alt--image-left .lp26-section-alt__inner {
  flex-direction: row;
}

.lp26-section-alt--image-right .lp26-section-alt__inner {
  flex-direction: row-reverse;
}

.lp26-section-alt__content,
.lp26-section-alt__image {
  flex: 1;
}

.lp26-section-alt__heading {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: var(--rg-fs-mobile-display);
  line-height: var(--rg-lh-mobile-display);
  color: var(--rg-accent-12);
  margin-bottom: var(--rg-space-5);
}

.lp26-section-alt__body {
  font-family: var(--rg-font-body);
  font-size: var(--rg-fs-b1);
  line-height: 1.6;
  letter-spacing: var(--rg-ls-ui);
  color: var(--rg-neutral-12);
}

.lp26-section-alt__body p { margin-bottom: var(--rg-space-4); }
.lp26-section-alt__body p:last-child { margin-bottom: 0; }

.lp26-section-alt__image img {
  width: 100%;
  border-radius: var(--rg-radius-4);
}

/* ─────────────────────────────────────────────────────────
   12. Flexible Content — testimonials
   ───────────────────────────────────────────────────────── */
.lp26-section-testimonials {
  padding: 80px 0;
  background-color: var(--rg-olive-2);
}

.lp26-section-testimonials__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--rg-space-8);
}

.lp26-section-testimonials__title {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: var(--rg-fs-mobile-display);
  line-height: var(--rg-lh-mobile-display);
  color: var(--rg-accent-12);
  text-align: center;
  margin-bottom: var(--rg-space-9);
}

.lp26-section-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--rg-space-5);
}

.lp26-testimonial-card {
  background-color: #ffffff;
  border: 1px solid var(--rg-olive-3);
  border-radius: var(--rg-radius-4);
  padding: var(--rg-space-7);
  box-shadow: var(--rg-shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--rg-space-5);
}

.lp26-testimonial-card__quote {
  font-family: var(--rg-font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: var(--rg-fs-h5);
  line-height: 28px;
  color: var(--rg-accent-12);
  flex: 1;
}

.lp26-testimonial-card__quote::before {
  content: '\201C';
  font-size: var(--rg-fs-mobile-display);
  line-height: 0;
  vertical-align: -0.3em;
  margin-right: 4px;
  color: var(--rg-accent-8);
}

.lp26-testimonial-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--rg-space-1);
}

.lp26-testimonial-card__author {
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: var(--rg-fs-b2);
  color: var(--rg-neutral-12);
}

.lp26-testimonial-card__role {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-sm);
  color: var(--rg-neutral-11);
  letter-spacing: var(--rg-ls-body);
}

/* ─────────────────────────────────────────────────────────
   13. Flexible Content — faq_accordion
   ───────────────────────────────────────────────────────── */
.lp26-section-faq {
  padding: 80px 0;
}

.lp26-section-faq__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--rg-space-8);
}

.lp26-section-faq__title {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: var(--rg-fs-mobile-display);
  line-height: var(--rg-lh-mobile-display);
  color: var(--rg-accent-12);
  text-align: center;
  margin-bottom: var(--rg-space-9);
}

/* Reuses .lp26-accordion styles */
.lp26-section-faq .lp26-accordion__title {
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.1px;
}

/* ─────────────────────────────────────────────────────────
   14. Flexible Content — comparison_table
   ───────────────────────────────────────────────────────── */
.lp26-section-comparison {
  padding: 80px 0;
  overflow-x: auto;
}

.lp26-section-comparison__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--rg-space-8);
}

.lp26-section-comparison__title {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: var(--rg-fs-mobile-display);
  line-height: var(--rg-lh-mobile-display);
  color: var(--rg-accent-12);
  margin-bottom: var(--rg-space-9);
}

.lp26-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rg-font-body);
  font-size: var(--rg-fs-b2);
}

.lp26-comparison-table th {
  padding: var(--rg-space-4) var(--rg-space-4);
  font-weight: 600;
  font-size: var(--rg-fs-b2);
  text-align: center;
  background-color: var(--rg-accent-12);
  color: var(--rg-accent-1);
  border: 1px solid rgba(255,255,255,0.1);
}

.lp26-comparison-table th:first-child {
  text-align: left;
  background-color: var(--rg-olive-3);
  color: var(--rg-neutral-12);
}

.lp26-comparison-table td {
  padding: var(--rg-space-4);
  border-bottom: 1px solid var(--rg-neutral-3);
  text-align: center;
  color: var(--rg-neutral-12);
}

.lp26-comparison-table td:first-child {
  text-align: left;
  font-weight: 500;
}

.lp26-comparison-table tr:nth-child(even) td {
  background-color: var(--rg-neutral-1);
}

/* ─────────────────────────────────────────────────────────
   15. Flexible Content — cta_block
   ───────────────────────────────────────────────────────── */
.lp26-section-cta {
  padding: 80px 0;
}

.lp26-section-cta--bg-dark {
  background-color: var(--rg-accent-12);
}

.lp26-section-cta--bg-green {
  background-color: var(--rg-accent-9);
}

.lp26-section-cta--bg-light {
  background-color: var(--rg-accent-3);
}

.lp26-section-cta__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--rg-space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rg-space-7);
}

.lp26-section-cta__heading {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: var(--rg-fs-mobile-display);
  line-height: var(--rg-lh-mobile-display);
  color: var(--rg-accent-1);
}

.lp26-section-cta--bg-light .lp26-section-cta__heading {
  color: var(--rg-accent-12);
}

/* ─────────────────────────────────────────────────────────
   16. Footer (.lp26-footer)
   Dark green radial gradient — exact Figma spec
   ───────────────────────────────────────────────────────── */
.lp26-footer {
  width: 100%;
  /* Background handled by .lp26-dark-bg wrapper */
}

.lp26-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--rg-space-9) var(--rg-space-8);
  display: flex;
  gap: var(--rg-space-9);
  align-items: stretch;
}

.lp26-footer__columns {
  display: flex;
  flex: 1;
  gap: var(--rg-space-9);
  flex-wrap: wrap;
}

.lp26-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--rg-space-3);
  flex-shrink: 0;
}

/* Two sections stacked in one column */
.lp26-footer__col--double {
  display: flex;
  flex-direction: column;
  gap: var(--rg-space-9);
  flex-shrink: 0;
}

.lp26-footer__col-heading {
  font-family: var(--rg-font-body);
  font-weight: 700;
  font-size: var(--rg-fs-sm);
  line-height: var(--rg-lh-sm);
  letter-spacing: var(--rg-ls-body);
  color: #ffffff;
}

.lp26-footer__link {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-sm);
  line-height: var(--rg-lh-sm);
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-neutral-3);
  text-decoration: none;
  transition: color 0.12s ease;
  display: block;
}

.lp26-footer__link:hover {
  color: #ffffff;
}

/* Brand column (logo + social + copyright) */
.lp26-footer__brand {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 100%;
}

.lp26-footer__logo {
  display: flex;
  flex-direction: column;
  gap: var(--rg-space-5);
}

.lp26-footer__logo img {
  height: 40px;
  width: auto;
}

.lp26-footer__social {
  display: flex;
  gap: var(--rg-space-2);
  align-items: center;
}

.lp26-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--rg-neutral-3);
  transition: color 0.12s ease;
}

.lp26-footer__social-link:hover {
  color: #ffffff;
}

.lp26-footer__social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.lp26-footer__social-link img {
  width: 24px;
  height: 24px;
  display: block;
  /* convert any SVG fill to the footer's near-white --rg-neutral-1 (#fcfcfd) */
  filter: brightness(0) invert(1);
  opacity: 0.72;
  transition: opacity 0.12s ease;
}

.lp26-footer__social-link:hover img {
  opacity: 1;
}

.lp26-footer__copyright {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-sm);
  line-height: var(--rg-lh-sm);
  letter-spacing: var(--rg-ls-body);
  color: #ffffff;
  white-space: nowrap;
}

/* Contact sub-section */
.lp26-footer__contact-heading {
  font-family: var(--rg-font-body);
  font-weight: 700;
  font-size: var(--rg-fs-sm);
  letter-spacing: var(--rg-ls-body);
  color: #ffffff;
  margin-bottom: var(--rg-space-2);
}

.lp26-footer__contact-email {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b2);
  line-height: var(--rg-lh-b2);
  letter-spacing: var(--rg-ls-body);
  color: #f0f0f3 !important;
  text-decoration: underline;
  display: block;
  transition: color 0.12s ease;
  margin-top: var(--rg-space-2);
}

.lp26-footer__contact-email:hover {
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────
   17. Responsive — Tablet (max-width: 1024px)
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Hero: let height be driven by stacked content */
  .lp26-hero--layout-form-right {
    height: auto;
    min-height: unset;
  }

  /* Header: hide full nav, show hamburger */
  .lp26-header__nav {
    display: none;
  }

  .lp26-header__hamburger {
    display: flex;
  }

  .lp26-header__inner {
    padding: var(--rg-space-2) var(--rg-space-5);
  }

  .lp26-header__mobile-menu {
    display: none;      /* toggled to block via JS */
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(16px);
    z-index: 999;
    padding: var(--rg-space-5);
    flex-direction: column;
    gap: var(--rg-space-2);
    border-top: 1px solid var(--rg-olive-3);
  }

  .lp26-header__mobile-menu.is-open {
    display: flex;
  }

  .lp26-header__mobile-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rg-space-4) var(--rg-space-2);
    font-family: var(--rg-font-body);
    font-weight: 500;
    font-size: var(--rg-fs-b1);
    color: var(--rg-neutral-12);
    border-bottom: 1px solid var(--rg-neutral-3);
    text-decoration: none;
  }

  .lp26-header__mobile-cta {
    margin-top: var(--rg-space-5);
    width: 100%;
  }

  /* Shrink header CTA to 40px so mobile header stays 56px (8+40+8) */
  .lp26-header__cta .lp26-btn--primary {
    height: 40px;
    padding: 4px var(--rg-space-4);
  }

  /* Hide desktop dropdown — product items live in the mobile drawer */
  .lp26-header__dropdown {
    display: none !important;
  }

  /* Mobile product category sections */
  .lp26-header__mobile-section {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-1);
  }

  .lp26-header__mobile-section .lp26-header__dropdown-col-header {
    padding-left: 0;
    padding-right: 0;
  }

  /* Other nav links area below product sections */
  .lp26-header__mobile-links {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rg-neutral-3);
    padding-top: var(--rg-space-4);
    margin-top: var(--rg-space-4);
  }

  /* Hero: stack columns */
  .lp26-hero--layout-form-right .lp26-hero__inner {
    flex-direction: column;
    min-height: unset;
  }

  .lp26-hero--layout-form-right .lp26-hero__content-col,
  .lp26-hero--layout-form-right .lp26-hero__form-col {
    flex: none;
    width: 100%;
    padding: 60px var(--rg-space-8);
    border: none;
    border-bottom: 1px solid var(--rg-olive-3);
  }

  /* Reset inner wrapper and card for stacked layout */
  .lp26-hero__form-col-inner {
    height: auto;
    max-width: 100%;
  }

  .lp26-hero__form-col-inner .lp26-form-card {
    margin-top: 0;
  }

  .lp26-hero__headline {
    font-size: 38px;
    line-height: 42px;
    letter-spacing: -1.5px;
  }

  .lp26-hero__content-inner {
    max-width: 100%;
  }

  /* Numbers: 2x2 grid */
  .lp26-numbers__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rg-space-2);
    width: 100%;
  }

  .lp26-numbers__card {
    width: 100%;
  }

  /* Alt rows: stack */
  .lp26-section-alt__inner {
    flex-direction: column !important;
  }

  /* Footer */
  .lp26-footer__inner {
    flex-direction: column;
    gap: var(--rg-space-9);
  }

  .lp26-footer__brand {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--rg-space-5);
  }
}

/* ─────────────────────────────────────────────────────────
   18. Responsive — Mobile (max-width: 767px)
   ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Container */
  .lp26-container,
  .lp26-hero--layout-form-right .lp26-hero__content-col,
  .lp26-hero--layout-form-right .lp26-hero__form-col,
  .lp26-section-logos__grid,
  .lp26-section-alt__inner,
  .lp26-section-testimonials__inner,
  .lp26-section-faq__inner,
  .lp26-section-cta__inner {
    padding-left: var(--rg-space-5);
    padding-right: var(--rg-space-5);
  }

  /* Numbers section: outer px-[16px] per Figma, inner needs no extra padding */
  .lp26-numbers {
    padding-left: var(--rg-space-4);  /* 16px */
    padding-right: var(--rg-space-4); /* 16px */
  }

  /* Hero */
  .lp26-hero--layout-form-right .lp26-hero__content-col {
    padding: 60px var(--rg-space-4); /* Figma: py-[60px], px-[16px] for accordion near-full width */
  }
  .lp26-hero--layout-form-right .lp26-hero__form-col {
    padding: 48px var(--rg-space-5);
  }

  .lp26-hero__headline {
    font-size: var(--rg-fs-mobile-display);
    line-height: var(--rg-lh-mobile-display);
    letter-spacing: 0;
  }

  .lp26-hero--layout-form-right .lp26-hero__form-col {
    background: transparent;
  }

  .lp26-form-card {
    max-width: 100%;
    padding: var(--rg-space-5);
    backdrop-filter: none;
    background-color: #ffffff;
  }

  /* Logo strip: allow scroll on mobile */
  .lp26-logos__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: var(--rg-space-7);
    padding: var(--rg-space-4) var(--rg-space-5) var(--rg-space-5);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .lp26-logos__row::-webkit-scrollbar { display: none; }

  /* Numbers: single column, cards at Figma width (220px) centred */
  .lp26-numbers__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px; /* Figma: gap-[6.35px] */
    width: 100%;
  }

  .lp26-numbers__card {
    width: 220px; /* Figma: w-[220.487px] — centred narrow cards */
  }

  /* Title keeps Figma's 32px/34px on mobile — no size reduction */
  .lp26-numbers__title {
    font-size: var(--rg-fs-mobile-display);
    line-height: var(--rg-lh-mobile-display);
  }

  /* Footer: full stack */
  .lp26-footer__columns {
    flex-direction: column;
    gap: var(--rg-space-7);
  }

  .lp26-footer__col--double {
    gap: var(--rg-space-7);
  }

  .lp26-footer__inner {
    padding: var(--rg-space-7) var(--rg-space-5);
    gap: var(--rg-space-7);
  }

  /* Accordion */
  .lp26-accordion__title {
    font-size: 18px;
  }

  /* Alt row vertical padding */
  .lp26-section-alt {
    padding: var(--rg-space-9) 0;
  }

  /* Testimonials: single col */
  .lp26-section-testimonials__grid {
    grid-template-columns: 1fr;
  }

  /* Comparison: scroll */
  .lp26-section-comparison {
    overflow-x: auto;
  }

  .lp26-comparison-table {
    min-width: 600px;
  }

  /* ── New section mobile fixes ── */
  .lp26-alt-row__inner {
    flex-direction: column !important;
    padding-left: var(--rg-space-5);
    padding-right: var(--rg-space-5);
  }

  .lp26-faq__inner,
  .lp26-cta-block__inner.lp26-container {
    padding-left: var(--rg-space-5);
    padding-right: var(--rg-space-5);
  }

  .lp26-footer__nav {
    flex-direction: column;
    gap: var(--rg-space-7);
  }
}

/* ═══════════════════════════════════════════════════════════
   PHP TEMPLATE CLASS ALIASES — aligns generated HTML classes
   with the CSS design system. All additive, no removals.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   Hero: fix content-inner spacing (group at top, not space-between)
   ───────────────────────────────────────────────────────── */
.lp26-hero__content-inner {
  justify-content: flex-start;
}

/* Remove double horizontal padding when lp26-container is on hero inner */
.lp26-hero .lp26-hero__inner {
  padding-left: 0;
  padding-right: 0;
}

/* ─────────────────────────────────────────────────────────
   Numbers / Stats block — PHP class names
   ───────────────────────────────────────────────────────── */

/* Override section padding: section uses lp26-container inside,
   so horizontal padding comes from the container, not the section. */
.lp26-numbers {
  padding: 80px 0;
}

.lp26-numbers__value {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: var(--rg-fs-mobile-display);
  line-height: var(--rg-lh-mobile-display);
  color: var(--rg-accent-1);
}

.lp26-numbers__label {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-b1);
  letter-spacing: var(--rg-ls-ui);
  color: var(--rg-accent-1);
}

.lp26-numbers__desc {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-sm);
  line-height: var(--rg-lh-sm);
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-neutral-6);
}

/* ─────────────────────────────────────────────────────────
   Logo strip — PHP uses lp26-logos__strip (CSS had __row)
   ───────────────────────────────────────────────────────── */
.lp26-logos__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rg-space-7);
  padding: var(--rg-space-5) 0 var(--rg-space-8);
}

.lp26-logos {
  padding-bottom: var(--rg-space-8);
}

/* ─────────────────────────────────────────────────────────
   Salesforce User Showcase — hardcoded logo strip below hero
   Spec: Figma node 49:2688 ("Testimonial 3" / "Proof")
   Not editor-accessible; uses images from salesforce-showcase/
   ───────────────────────────────────────────────────────── */
.lp26-salesforce-showcase {
  width: 100%;
  background: #ffffff;
  padding-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.lp26-salesforce-showcase__label {
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: var(--rg-fs-b1);
  line-height: var(--rg-lh-h5);
  letter-spacing: var(--rg-ls-ui);
  color: var(--rg-neutral-11);  /* #60646c */
  text-align: center;
  margin: 0;
  white-space: nowrap;
}

/* Figma: logos row is size-full (full section width) with px-[48px] and justify-between.
   lp26-container provides the 48px horizontal padding, but its 1200px max-width cap
   must be overridden so logos spread across the full viewport width.
   On XL screens (>1440px) cap at 1440px so logos don't drift too far apart. */
.lp26-salesforce-showcase__logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  padding-top: var(--rg-space-5);    /* 24px */
  padding-bottom: var(--rg-space-5); /* 24px */
}

.lp26-salesforce-showcase__logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Fixed bounding box — all logos rendered in an identical slot */
  width: 120px;
  height: 50px;
}

.lp26-salesforce-showcase__logo-img {
  /* Spec: Figma 49:2690 — logos fill their slot, object-fit: contain preserves aspect ratio */
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  /* Flatten to --rg-neutral-12 (#1c2024) at 75% — filter can't use CSS vars */
  filter: brightness(0) opacity(0.75);
}

/* Tablet: tighten spacing */
@media (max-width: 1024px) {
  .lp26-salesforce-showcase__logos {
    gap: var(--rg-space-6);
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Mobile: single-column centred logo stack */
@media (max-width: 767px) {
  .lp26-salesforce-showcase {
    padding-top: 60px;    /* Figma: py-[60px] */
    padding-bottom: 60px; /* Figma: py-[60px] */
  }

  .lp26-salesforce-showcase__label {
    white-space: normal;
    padding: 0 var(--rg-space-4); /* 16px — matches section px-[16px] */
  }

  .lp26-salesforce-showcase__logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rg-space-8);              /* 48px — Figma gap-[48px] */
    padding-top: var(--rg-space-7);      /* 40px — Figma pt-[40px] gap from label */
    padding-bottom: 0;
    padding-left: 48px;                  /* Figma px-[48px] */
    padding-right: 48px;                 /* Figma px-[48px] */
  }

  /* All logos rendered in an identical 100×50 bounding box.
     Matches Bessemer (96.8×50px) — the most "standard" Figma logo container.
     object-fit: contain keeps every logo's aspect ratio intact. */
  .lp26-salesforce-showcase__logo-item {
    height: 72px;  /* consistent fixed slot height for visual rhythm */
    width: 100%;
  }

  .lp26-salesforce-showcase__logo-img {
    width: 100px;    /* Figma: logos ~84–100px wide */
    height: 50px;    /* Figma: tallest logo (Bessemer) is 50px */
    max-width: 100%; /* safety on very small screens */
    max-height: none; /* override base cascade */
    object-fit: contain;
  }
}

/* ─────────────────────────────────────────────────────────
   Dark background wrapper — trust section + footer
   Shared radial gradient for seamless transition
   ───────────────────────────────────────────────────────── */
.lp26-dark-bg {
  background:
    radial-gradient(
      ellipse 80% 45% at 18% 100%,
      #013b29 0%,
      #01291c 40%,
      transparent 70%
    ),
    #00160e;
}

/* ─────────────────────────────────────────────────────────
   Trust Section — "Why Organizations Trust Us"
   Spec: Figma node 49:2753
   ───────────────────────────────────────────────────────── */
.lp26-trust {
  padding: 80px 0;
}

.lp26-trust__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  margin-bottom: 64px;
}

.lp26-trust__eyebrow {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--rg-neutral-6);
  margin: 0;
}

.lp26-trust__heading {
  font-family: var(--rg-font-heading);
  font-weight: 400;                   /* Playfair Display Regular (H2) */
  font-size: var(--rg-fs-h2);         /* 40px */
  line-height: var(--rg-lh-h2);       /* 42px */
  letter-spacing: 0;
  color: var(--rg-accent-1);
  max-width: none;                     /* full-width; text centres via parent text-align */
  margin: 0;
}

.lp26-trust__cards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--rg-space-2);             /* 8px */
  height: 240px;                       /* Figma Proof container height */
}

.lp26-trust__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1 0 0;                         /* fluid width: fills container equally */
  height: 100%;                        /* fill the 240px cards container */
  padding: var(--rg-space-6);          /* 32px */
  background: var(--rg-green-alpha-3); /* rgba(0,196,111,0.12) */
  border: none;
  border-radius: 0;
  overflow: visible;
}

.lp26-trust__card-label {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rg-fs-b2);         /* 14px */
  line-height: 20px;                   /* Figma Body/B2 lineHeight: 20 */
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-neutral-6);
  margin: 0;
}

.lp26-trust__card-numbers {
  display: flex;
  flex-direction: column;
  gap: var(--rg-space-4);             /* 16px */
}

.lp26-trust__g2-badge {
  position: absolute;
  top: 0;
  right: -24px;
  width: 56px;
  height: auto;
}

.lp26-trust__card-stat {
  font-family: var(--rg-font-heading);
  font-weight: 600;                    /* Playfair Display SemiBold (H3) */
  font-size: 32px;
  line-height: 34px;
  letter-spacing: 0;
  color: var(--rg-accent-1);
  margin: 0;
}

.lp26-trust__card-desc {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--rg-accent-1);
  margin: 0;
}

@media (max-width: 1024px) {
  .lp26-trust__cards {
    flex-wrap: wrap;
    height: auto;                      /* override fixed height when wrapping */
  }

  .lp26-trust__card {
    flex: 1 1 calc(50% - 4px);        /* 2-column grid */
    height: 240px;
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .lp26-trust {
    padding: 80px 0;                   /* matches Figma mobile py-[80px] */
  }

  /* Figma mobile: section has px-[40px]. Override the global var(--rg-space-5)=24px container drop */
  .lp26-trust .lp26-container {
    padding-left: var(--rg-space-7);   /* 40px */
    padding-right: var(--rg-space-7);  /* 40px */
  }

  .lp26-trust__heading {
    font-size: var(--rg-fs-mobile-h2);   /* 28px */
    line-height: var(--rg-lh-mobile-h2); /* 30px */
    font-weight: 500;                     /* Playfair Display Medium */
  }

  .lp26-trust__cards {
    flex-direction: column;
    align-items: stretch;              /* full-width cards */
    gap: var(--rg-space-2);            /* 8px */
    height: auto;
  }

  .lp26-trust__card {
    flex: none;                        /* override desktop flex: 1 0 0 */
    width: 100%;
    height: auto;
    min-height: 0;
    padding: var(--rg-space-6) var(--rg-space-4); /* 32px 16px */
    justify-content: flex-start;       /* stack top-down (override space-between) */
    gap: var(--rg-space-6);            /* 32px label → numbers gap */
  }
}

/* ─────────────────────────────────────────────────────────
   Alt Row (feature row) — PHP uses lp26-alt-row
   CSS had lp26-section-alt
   ───────────────────────────────────────────────────────── */
.lp26-alt-row {
  padding: 80px 0;
  background-color: #ffffff;
}

.lp26-alt-row__inner {
  display: flex;
  align-items: center;
  gap: var(--rg-space-9);
}

.lp26-alt-row--flipped .lp26-alt-row__inner {
  flex-direction: row-reverse;
}

.lp26-alt-row__text,
.lp26-alt-row__media {
  flex: 1;
  min-width: 0;
}

.lp26-alt-row__img {
  width: 100%;
  height: auto;
  border-radius: var(--rg-radius-4);
  display: block;
}

/* Section utility classes used inside alt_row (and reusable) */
.lp26-section-tag {
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--rg-accent-9);
  margin-bottom: var(--rg-space-3);
}

.lp26-section-heading {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: 34px;
  color: var(--rg-accent-12);
  margin-bottom: var(--rg-space-5);
}

.lp26-section-body {
  font-family: var(--rg-font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.1px;
  color: var(--rg-neutral-11);
  margin-bottom: var(--rg-space-6);
}

.lp26-section-body p {
  margin-bottom: var(--rg-space-4);
}

.lp26-section-body p:last-child {
  margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────
   Testimonials — PHP uses lp26-testimonials
   ───────────────────────────────────────────────────────── */
.lp26-testimonials {
  padding: 80px 0;
  background-color: var(--rg-olive-2);
}

.lp26-testimonials__heading {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: 34px;
  color: var(--rg-accent-12);
  text-align: center;
  margin-bottom: var(--rg-space-9);
}

.lp26-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--rg-space-5);
}

/* Override: author is the figcaption wrapper (flex row with avatar) */
.lp26-testimonial-card__author {
  display: flex;
  gap: var(--rg-space-3);
  align-items: center;
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--rg-neutral-12);
}

.lp26-testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.lp26-testimonial-card__name {
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--rg-neutral-12);
  display: block;
}

/* ─────────────────────────────────────────────────────────
   FAQ Accordion — PHP uses lp26-faq
   ───────────────────────────────────────────────────────── */
.lp26-faq {
  padding: 80px 0;
}

.lp26-faq__heading {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: 34px;
  color: var(--rg-accent-12);
  text-align: center;
  margin-bottom: var(--rg-space-9);
}

.lp26-faq .lp26-accordion__title {
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.1px;
}

/* ─────────────────────────────────────────────────────────
   Comparison Table — PHP uses lp26-comparison
   ───────────────────────────────────────────────────────── */
.lp26-comparison {
  padding: 80px 0;
}

.lp26-comparison__heading {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: 34px;
  color: var(--rg-accent-12);
  margin-bottom: var(--rg-space-9);
}

.lp26-comparison__scroll-wrap {
  overflow-x: auto;
}

.lp26-comparison__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rg-font-body);
  font-size: 14px;
}

.lp26-comparison__th {
  padding: var(--rg-space-4);
  font-weight: 600;
  text-align: center;
  background-color: var(--rg-accent-12);
  color: var(--rg-accent-1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.lp26-comparison__th:first-child {
  text-align: left;
  background-color: var(--rg-olive-3);
  color: var(--rg-neutral-12);
}

.lp26-comparison__td {
  padding: var(--rg-space-4);
  border-bottom: 1px solid var(--rg-neutral-3);
  text-align: center;
  color: var(--rg-neutral-12);
}

.lp26-comparison__td:first-child {
  text-align: left;
  font-weight: 500;
}

.lp26-comparison__tr:nth-child(even) .lp26-comparison__td {
  background-color: var(--rg-neutral-1);
}

/* ─────────────────────────────────────────────────────────
   CTA Block — PHP uses lp26-cta-block
   CSS had lp26-section-cta
   ───────────────────────────────────────────────────────── */
.lp26-cta-block {
  padding: 80px 0;
}

.lp26-cta-block--bg-green-gradient {
  background: linear-gradient(131.34deg, #ffffff 30%, var(--rg-accent-3) 100%);
}

.lp26-cta-block--bg-dark {
  background-color: var(--rg-accent-12);
}

.lp26-cta-block--bg-green {
  background-color: var(--rg-accent-9);
}

.lp26-cta-block__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rg-space-7);
}

.lp26-cta-block__heading {
  font-family: var(--rg-font-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: 34px;
  color: var(--rg-accent-1);
}

.lp26-cta-block--bg-green-gradient .lp26-cta-block__heading {
  color: var(--rg-accent-12);
}

.lp26-cta-block__body {
  font-family: var(--rg-font-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.1px;
  color: rgba(255, 255, 255, 0.7);
}

.lp26-cta-block--bg-green-gradient .lp26-cta-block__body {
  color: var(--rg-neutral-11);
}

/* ─────────────────────────────────────────────────────────
   Footer — PHP template class names
   (CSS had __columns/__col/__col-heading/__link)
   PHP generates __nav/__nav-col/__nav-heading/__nav-link
   ───────────────────────────────────────────────────────── */

/* Brand column: logo link + tagline */
.lp26-footer__logo-link {
  display: block;
  text-decoration: none;
}

.lp26-footer__logo-img,
.lp26-footer__logo-svg {
  height: 40px;
  width: auto;
  display: block;
}

.lp26-footer__tagline {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: -0.5px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: var(--rg-space-4);
  max-width: 200px;
}

/* Nav columns wrapper */
.lp26-footer__nav {
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  gap: 40px;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}

/* Individual column */
.lp26-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--rg-space-3);
  flex: 1 1 0;
  min-width: 0;
}

/* Two sections stacked in one column */
.lp26-footer__nav-col--double {
  gap: 56px;
}

/* Each sub-section inside a double column: match the flex gap of single columns */
.lp26-footer__nav-col--double > div {
  display: flex;
  flex-direction: column;
  gap: var(--rg-space-3);
}

.lp26-footer__nav-col--double > div .lp26-footer__nav-heading {
  margin-bottom: 0;
}

/* Column heading */
.lp26-footer__nav-heading {
  font-family: var(--rg-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin-bottom: var(--rg-space-1);
}

/* List reset */
.lp26-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rg-space-3);
}

/* Nav link */
.lp26-footer__nav-link {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.5px;
  color: #f0f0f3 !important;
  text-decoration: none;
  transition: color 0.12s ease;
  display: block;
}

.lp26-footer__nav-link:hover {
  color: #ffffff !important;
}

/* Bottom bar */
.lp26-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lp26-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rg-space-5);
  padding-top: var(--rg-space-5);
  padding-bottom: var(--rg-space-5);
}

.lp26-footer__bottom-links {
  display: flex;
  align-items: center;
  gap: var(--rg-space-5);
  flex-shrink: 0;
}

.lp26-footer__bottom-link {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.5px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.12s ease;
}

.lp26-footer__bottom-link:hover {
  color: #ffffff;
}

.lp26-footer__bottom-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 10px;
  line-height: 1;
}

/* Copyright: override base to ensure correct colour on dark bg */
.lp26-footer__copyright {
  color: rgba(255, 255, 255, 0.45);
}

/* ── Responsive: tablet ── */
@media (max-width: 1024px) {
  .lp26-footer__nav {
    flex-wrap: wrap;
    gap: var(--rg-space-7);
  }

  .lp26-footer__nav-col {
    flex: 0 1 auto;
  }
}

/* ── Responsive: mobile ── */
@media (max-width: 767px) {
  .lp26-alt-row__inner {
    flex-direction: column !important;
    gap: var(--rg-space-7);
  }

  .lp26-testimonials__grid {
    grid-template-columns: 1fr;
  }

  .lp26-numbers__value {
    font-size: 26px;
    line-height: 30px;
  }

  .lp26-footer__nav {
    flex-direction: column;
    gap: var(--rg-space-7);
  }

  .lp26-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rg-space-3);
  }
}

/* ─────────────────────────────────────────────────────────
   Mobile hero: centre headline + desc
   Accordion items stay left-aligned; only the text block above shifts.
   ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .lp26-hero--layout-form-right .lp26-hero__content-inner {
    align-items: center;
    text-align: center;
    padding-bottom: 0; /* Content-col padding-bottom handles the gap below accordion */
  }

  .lp26-hero--layout-form-right .lp26-hero__headline,
  .lp26-hero--layout-form-right .lp26-hero__desc {
    text-align: center;
  }

  /* Headline: narrow per Figma (282px in 390px frame) */
  .lp26-hero--layout-form-right .lp26-hero__headline {
    max-width: 282px;
  }

  /* Description: intermediate width per Figma (312px in 390px frame) */
  .lp26-hero--layout-form-right .lp26-hero__desc {
    max-width: 312px;
  }

  /* Accordion stays left-aligned inside the centred block */
  .lp26-hero .lp26-accordion__trigger,
  .lp26-hero .lp26-accordion__title,
  .lp26-hero .lp26-accordion__body,
  .lp26-hero .lp26-accordion__body-text {
    text-align: left;
  }
}

/* ─────────────────────────────────────────────────────────
   Tablet + mobile: hero height
   Remove the 100vh lock — let content define height.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lp26-hero--layout-form-right {
    height: auto;
    min-height: 0;
  }

  /* Accordion sits immediately below desc with breathing room */
  .lp26-hero__content-inner .lp26-accordion {
    margin-top: var(--rg-space-8); /* 48px */
  }
}

/* ─────────────────────────────────────────────────────────
   Mobile hero: vertical gradient + tighter accordion gap
   ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Soft top-to-bottom radial (matches Figma mobile spec) */
  .lp26-hero--bg-green-gradient {
    background: radial-gradient(ellipse 100% 55% at 50% 0%, #ffffff 0%, #e1f8ee 100%);
  }

  .lp26-hero__content-inner .lp26-accordion {
    margin-top: 60px; /* Figma: gap-[60px] between text block and accordion */
  }
}

/* ─────────────────────────────────────────────────────────
   Mobile: footer nav — 2-column grid
   Figma: Platform | Features / Resources+Company | Help+Contact
   Overrides the flex-direction: column set earlier in this file.
   ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .lp26-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rg-space-7) var(--rg-space-5);
    flex-direction: unset; /* reset flex override */
  }

  .lp26-footer__nav-col {
    flex: unset; /* reset flex-basis from tablet rule */
  }
}