* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: var(--text-base);
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-3);
}

p { margin: 0 0 var(--space-3); }
a { color: var(--color-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; margin: 0; padding: 0; }
hr { border: none; border-top: 1px solid var(--color-text-muted); opacity: 0.25; margin: var(--space-2) 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.text-accent { color: var(--color-accent); }

/* Buttons */
.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
}
.btn-outline {
  background: transparent;
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.btn-outline:hover { background: var(--color-brand); color: var(--color-bg); text-decoration: none; }
.btn-primary {
  background: var(--color-brand);
  color: var(--color-bg);
}
.btn-primary:hover { background: var(--color-brand-hover); text-decoration: none; }
.btn-block { display: block; width: 100%; text-align: center; border: none; }

/* Header */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
  z-index: 5;
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.logo {
  display: inline-flex; align-items: center;
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--color-brand);
}
.nav { display: flex; align-items: center; gap: var(--space-4); flex: 1; justify-content: center; }
.nav a {
  color: var(--color-text-heading);
  font-weight: var(--weight-medium);
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--color-brand);
  transition: right .25s ease;
}
.nav a:hover::after { right: 0; }
.nav a:hover { text-decoration: none; }
.nav a.is-disabled {
  pointer-events: none;
  cursor: not-allowed;
}
.footer-col a.is-disabled {
  pointer-events: none;
  opacity: .45;
  cursor: not-allowed;
}
.nav a.is-disabled::after { display: none; }
.nav-lang { color: var(--color-text-muted); font-weight: var(--weight-medium); font-size: var(--text-sm); }
.header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* header-collapse wraps nav + header-actions. display:contents makes it invisible
   to layout on desktop, so nav/actions sit directly in header-row exactly as
   before. On mobile it becomes the actual collapsible drawer. */
.header-collapse { display: contents; }
.nav-toggle-checkbox { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 32px; height: 32px; cursor: pointer; flex-shrink: 0;
}
.nav-toggle-label span {
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: var(--color-text-heading);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header-actions a.is-disabled { color: var(--color-text-heading); font-weight: var(--weight-medium); }

/* Placeholder image / logo blocks */
.placeholder-image {
  background: repeating-linear-gradient(45deg, var(--color-placeholder-a), var(--color-placeholder-a) 10px, var(--color-placeholder-b) 10px, var(--color-placeholder-b) 20px);
  border-radius: var(--radius-md);
  width: 100%;
  display: block;
  object-fit: cover;
}
.ratio-hero { aspect-ratio: 4 / 3; }
.ratio-wide { aspect-ratio: 16 / 9; }
.ratio-square { aspect-ratio: 1 / 1; }
.ratio-card { aspect-ratio: 3 / 2; }
.ratio-banner { aspect-ratio: 3 / 1; border-radius: 0; }
.placeholder-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
}
.placeholder-text-sm { font-size: var(--text-xs); color: var(--color-text-muted); display: block; }

/* Hero (home) — full-bleed background photo with a slow zoom and legibility gradient */
.hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1000 / 562;
  height: auto;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 35%, rgba(255,255,255,0) 65%),
    url("../img/new-submissions/hero-field.png");
  background-size: cover;
  background-position: center;
  transform: scale(1);
  animation: hero-zoom 16s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-zoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.promo-card {
  position: absolute; top: 50%; right: var(--space-4); transform: translateY(-50%);
  width: 300px; max-width: 26%; z-index: 2;
  background: var(--color-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-card-hover);
  padding: var(--space-4); border-left: 6px solid var(--color-accent);
}
.promo-close { position: absolute; top: var(--space-2); right: var(--space-2); border: none; background: none; font-size: var(--text-lg); cursor: pointer; }
.promo-heading { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.promo-body { font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.promo-input {
  width: 100%; padding: var(--space-2); margin-bottom: var(--space-2); box-sizing: border-box;
  border: 1px solid var(--color-text-muted); border-radius: var(--radius-sm);
  background: var(--color-bg-cream); font-family: var(--font-body); font-size: var(--text-sm);
}
.promo-fineprint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); margin-bottom: 0; }

.hero-inner {
  position: absolute; left: 0; right: 0; top: 38%; transform: translateY(-50%);
  z-index: 1; width: 100%;
}
.partner-badge {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  background: var(--color-bg); border: 1px solid rgba(0,0,0,0.1); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2); margin-bottom: var(--space-2);
}
.hero-copy { max-width: 560px; }
.hero-copy h1 { font-size: var(--text-4xl); line-height: 1.15; margin-top: 0; }
.hero-copy > p { color: var(--color-text-muted); max-width: 42ch; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.hero-trust-row { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 24px; margin-bottom: 0; }
.hero-trust-row span { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-heading); white-space: nowrap; }
.hero-trust-row svg { width: 18px; height: 18px; color: var(--color-brand); flex-shrink: 0; }


/* Category tabs — elevated card overlapping the hero's bottom edge */
.category-tabs-wrap {
  position: relative; z-index: 20; margin-top: -50px;
  background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  padding: 30px;
}
.category-tabs { display: flex; gap: var(--space-3); overflow-x: auto; }
.tab {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  color: var(--color-text-heading); font-size: var(--text-sm); font-weight: var(--weight-medium);
  white-space: nowrap; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  flex: 1; text-align: center;
}
.tab-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.tab-icon img { width: 40px; height: 40px; }
.tab-active { color: var(--color-brand); background: var(--color-bg-offwhite); box-shadow: var(--shadow-card); }

.chip-row, .chip-grid {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4);
}
.chip-grid { margin-bottom: var(--space-4); }
.chip {
  border: 1px solid var(--color-text-muted); border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
}

/* Value cards (3-up row under category tabs) */
.value-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: var(--space-6);
}
.value-card {
  background: var(--color-bg-pale-blue); border-radius: var(--radius-md);
  padding: var(--space-4); box-shadow: var(--shadow-card);
  text-align: center;
}
.feature-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-2);
}
.feature-icon img { width: 28px; height: 28px; }
.value-card h3 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.value-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 0; }

.highlight-panel {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-4);
  background: var(--color-bg-pale-blue); border-radius: var(--radius-lg);
  padding: var(--space-6); margin-top: var(--space-6); align-items: stretch;
}
.highlight-text { display: flex; flex-direction: column; justify-content: space-between; }
.highlight-text h3 { font-size: var(--text-2xl); line-height: 1.25; }
.highlight-panel img { aspect-ratio: auto; height: 100%; object-fit: cover; object-position: right center; }
.check-list li { padding-left: var(--space-4); position: relative; margin-bottom: var(--space-2); }
.check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-text-heading); }

/* Stats strip */
.stats-strip { background: var(--color-bg-offwhite); padding: var(--space-5) 0; }
.stats-row { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.stat { display: flex; flex-direction: column; font-size: var(--text-sm); }
.stat-number { color: var(--color-brand); font-weight: var(--weight-bold); font-size: var(--text-lg); }

/* Generic section */
.section { padding: var(--space-8) 0; }
.section-offwhite { background: var(--color-bg-offwhite); }
/* height:auto overrides a GrapeJS-injected inline `.section.section-cream{height:463px}`
   sized for the old "How it works" content only — any taller content in a section
   using this class (e.g. the biodigester showcase) overflows that fixed box and the
   next section draws on top of it. */
.section-cream { background: var(--color-bg-cream); height: auto !important; }
.section-heading { font-size: var(--text-2xl); }
.section-heading-brand { color: var(--color-brand); }
.section-heading-center { text-align: center; }
.showcase-copy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-3); }
.showcase-copy p { color: var(--color-text-muted); margin-bottom: 0; }
.showcase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
#services { padding-bottom: var(--space-5); }
.section-reliability-wrap { padding-top: var(--space-5); }

/* Card grid (core categories) — strictly 5 across, no wrap on desktop */
.card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.project-card {
  background: var(--color-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  overflow: hidden; padding-bottom: var(--space-3);
}
.card-grid .project-card img {
  /* height:auto reclaims this from GrapeJS's unconditional .placeholder-image{height:323px},
     which otherwise stretches these into a fixed-height rectangle instead of a clean square
     at every column width, on any screen size. */
  aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; border-radius: 8px;
}
.project-card h3, .project-card p { padding: 0 var(--space-3); }
.project-card h3 { font-size: var(--text-base); margin-top: var(--space-2); }
.project-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 0; }

/* Testimonials */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-5); }
.testimonial-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.reviewer-name { font-weight: var(--weight-bold); }
.stars { color: var(--color-blob-gold); }
.testimonial-tag { color: var(--color-brand); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.trust-badge { display: flex; align-items: center; gap: var(--space-2); justify-content: center; font-weight: var(--weight-semibold); }

/* Feature grid (guarantee) */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-5); }

/* Reliability banner — contained rounded dark-green card, not a full-width strip */
.reliability-card {
  position: relative; overflow: hidden;
  background-color: var(--color-brand-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cg fill='white' fill-opacity='0.15'%3E%3Cpath d='M48 130 C48 90 48 50 50 10 L52 10 C50 50 50 90 50 130 Z'/%3E%3Cpath d='M50 100c-18-4-30-18-36-38 22 0 36 16 40 38z'/%3E%3Cpath d='M50 70c20-4 32-18 38-36-22 0-36 14-42 36z'/%3E%3Cpath d='M50 40c-16-3-26-14-32-30 18 0 30 12 36 30z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 220px;
  color: var(--color-bg);
  border-radius: var(--radius-lg); padding: var(--space-7);
}
.reliability-card h2, .reliability-card h3 { color: var(--color-bg); }
.reliability-card p { color: rgba(255,255,255,0.75); }
.reliability-card .feature-grid { position: relative; z-index: 1; }
.reliability-card .feature-icon { background: transparent; width: auto; height: auto; margin-bottom: var(--space-3); }
.reliability-card .feature-icon svg { color: var(--color-bg); width: 32px; height: 32px; }

/* How it works — clean 50/50 split: steps left, photo + chat overlay right */
.steps-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center;
}
.steps-col .btn { margin-top: var(--space-2); }
.photo-col { position: relative; overflow: visible; }
.photo-col img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px;
}
.chat-mock {
  position: absolute; bottom: -30px; right: -20px; width: 260px; max-width: 60%;
  background: var(--color-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-card-hover);
  overflow: hidden; font-size: var(--text-xs); z-index: 10;
}
.chat-mock-header {
  display: flex; align-items: center; gap: var(--space-1);
  background: var(--color-brand-dark); color: var(--color-bg); padding: var(--space-2);
  font-weight: var(--weight-semibold);
}
.chat-mock-header svg { width: 16px; height: 16px; }
.chat-mock-body { padding: var(--space-2); background: var(--color-bg-cream); display: flex; flex-direction: column; gap: var(--space-1); }
.chat-bubble { max-width: 85%; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); line-height: 1.3; }
.chat-bubble-in { background: var(--color-bg); align-self: flex-start; border-bottom-left-radius: 0; }
.chat-bubble-out { background: #d9f2c4; align-self: flex-end; border-bottom-right-radius: 0; }
.steps-list li { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); }
.step-badge {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-brand-dark); color: var(--color-bg);
  display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold);
}
.steps-list p { margin: 0; }

.see-all-link { color: var(--color-brand); font-weight: var(--weight-semibold); }

/* Footer */
.site-footer { background: var(--color-brand-dark); color: var(--color-bg); padding: var(--space-6) 0 var(--space-7); position: relative; }
.footer-social { opacity: 0.8; margin-bottom: var(--space-5); }
.social-icons { letter-spacing: var(--space-1); margin-left: var(--space-2); }
.footer-brand p { color: rgba(255,255,255,0.7); font-size: var(--text-sm); max-width: 32ch; margin-top: var(--space-2); }
.footer-social-icons { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.footer-social-icons a {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
}
.footer-social-icons svg { width: 16px; height: 16px; color: var(--color-bg); }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: var(--space-5); }
.footer-col h4 { color: var(--color-bg); opacity: 0.7; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.footer-col a { display: block; color: var(--color-bg); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.app-badges { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.app-badge { background: var(--color-badge-black); color: var(--color-badge-white); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.help-fab {
  position: absolute; left: var(--space-4); bottom: -18px;
  background: var(--color-brand); color: var(--color-bg); border: none; border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4); font-weight: var(--weight-bold); cursor: pointer;
}

/* Services page: photo hero */
.hero-photo { position: relative; }
.hero-photo .placeholder-image { background: repeating-linear-gradient(45deg, var(--color-placeholder-photo-a), var(--color-placeholder-photo-a) 10px, var(--color-placeholder-photo-b) 10px, var(--color-placeholder-photo-b) 20px); }
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.25));
  pointer-events: none;
}
.hero-photo-heading {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--color-bg); font-size: var(--text-3xl); text-align: center; width: 80%;
  z-index: 1;
}

/* Category card grid (services) */
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.category-card { background: var(--color-bg); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-md); overflow: hidden; }
.category-card-body { padding: var(--space-4); }
.category-tag { display: block; font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.category-card-body h3 { font-size: var(--text-base); margin-bottom: 0; }
.link-list li { margin-bottom: var(--space-2); }
.link-list a { font-size: var(--text-sm); }
.link-list-nested { margin-top: var(--space-2); padding-left: var(--space-4); }

/* Responsive */
@media (max-width: 900px) {
  .promo-card { display: none; }
  .card-grid, .showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid, .feature-grid, .footer-grid, .category-grid, .value-grid { grid-template-columns: 1fr; }

  /* Header: logo + hamburger. header-collapse switches from display:contents
     (desktop, invisible to layout) to a real collapsible drawer, driven purely
     by the checkbox:checked sibling selector — no JS. */
  .header-row { flex-wrap: wrap; position: relative; }
  .logo img { height: 40px; }
  .nav-toggle-label { display: flex; }
  .header-collapse {
    display: block; width: 100%;
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav-toggle-checkbox:checked ~ .header-collapse { max-height: 500px; }
  .header-collapse .nav {
    flex-direction: column; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) 0 0;
  }
  .header-collapse .header-actions {
    flex-direction: column; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-3) 0;
  }

  /* Hero: fills the screen from the header down, on any phone. dvh handles
     mobile browser chrome show/hide better than vh; the vh line above it is
     a fallback for browsers that don't support dvh. */
  .hero {
    aspect-ratio: auto;
    min-height: calc(100vh - 97px);
    min-height: calc(100dvh - 97px);
    display: flex; align-items: flex-start;
    padding-top: var(--space-7); padding-bottom: var(--space-6);
  }
  .hero::before {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0.25) 55%, rgba(255,255,255,0) 78%),
      url("../img/new-submissions/hero-field.png");
  }
  .hero-inner { position: static; transform: none; }
  /* GrapeJS's inline style block sets a fixed .hero-copy{width:575px} with no media query,
     and it loads after this stylesheet, so it wins the cascade on every screen size unless
     overridden here with !important — scoped to mobile only, desktop keeps their 575px. */
  .hero-copy { width: 100% !important; max-width: none; text-align: center; }
  .hero-copy h1 { font-size: var(--text-3xl); overflow-wrap: break-word; }
  .hero-buttons { flex-wrap: nowrap; justify-content: center; gap: var(--space-2); }
  .hero-buttons .btn { flex: 1 1 0; padding-left: var(--space-2); padding-right: var(--space-2); font-size: var(--text-sm); }
  /* By this point in the mobile hero the white overlay gradient has faded to
     transparent, so the dark text has no contrast against the busy photo behind it. */
  .hero-trust-row { flex-wrap: wrap; justify-content: center; }
  .hero-trust-row span {
    background: rgba(255,255,255,0.85); padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
  }

  /* Same GrapeJS-cascade issue: .category-tabs-wrap{height:169px} is sized for the
     desktop single-row tab layout. On mobile the 5 tabs need far more height — the
     fixed 169px box was clamping it, and the next section (.value-grid) started
     drawing on top of the overflow. */
  .category-tabs-wrap { height: auto !important; padding: var(--space-4); }
  /* At least 2 tabs per row on mobile instead of a single stacked column. */
  .category-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); overflow-x: visible; }
  .tab { white-space: normal; }
  .highlight-panel { grid-template-columns: 1fr; }
  /* Same GrapeJS-cascade issue as .hero-copy: .placeholder-image.ratio-wide{width:465px} is
     unconditional and more specific than the plain .placeholder-image rule. */
  .highlight-panel img.placeholder-image.ratio-wide { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
  /* GrapeJS pins fixed pixel heights on individual elements by ID (e.g. the two
     check-list <li>s and every .section-heading) sized for their desktop line count.
     On mobile the text wraps to more lines than that fixed height allows, so the
     next block starts before the text box actually ends and the two overlap. */
  .check-list li { height: auto !important; }
  .section-heading { height: auto !important; }
  .showcase-copy { grid-template-columns: 1fr; text-align: center; }
  /* Same again: GrapeJS's .feature-grid{width:794px;display:flex} overrides our grid layout
     and forces every card into a 794px-wide flex row, which is what was overflowing. */
  .reliability-card .feature-grid { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; }
  .reliability-card { padding: var(--space-4); background-size: 140px; }
  .steps-split { grid-template-columns: 1fr; }
  .chat-mock { position: static; width: auto; max-width: none; margin: var(--space-3) 0 0; }
  /* Same GrapeJS-cascade issue again: .section.section-cream{height:463px} clamps the
     "How it works" section while its stacked mobile content runs to ~880px, so the
     "All Categories" section after it was drawing on top of the overflow. */
  .section-cream { height: auto !important; }

  /* All Categories section: center heading, oval chips, and link on mobile */
  .section-heading-brand { text-align: center; }
  .chip-grid { justify-content: center; }
  .see-all-link { display: block; text-align: center; }
}

@media (max-width: 480px) {
  .hero-copy h1 { font-size: var(--text-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}