/* ──────────────────────────────────────────────────────────────────────
 * Mobile-first full-bleed contract.
 *
 * Every section that hosts cards / carousels / form panels / maps opts
 * into this contract by emitting `data-mobile-full-bleed="true"` on its
 * root <section> (the default — the renderer flips it to `"false"` when
 * the author unchecks the inspector toggle).
 *
 * At ≤768px the contract:
 *   1. Pulls the section to the viewport edges (margin-inline goes
 *      negative by the inner gutter so the inside content can hit
 *      0px / 100vw without horizontally scrolling the page).
 *   2. Zeroes the inner content's `padding-inline` so the cards / form
 *      panels reach edge-to-edge.
 *   3. Strips `border-radius` from the section AND from the known
 *      compound-widget card / form / map containers inside, so each
 *      card reads as a flush full-width band.
 *   4. Drops the carousel slide padding-inline + frame clip margin so
 *      a 1-per-view track lands flush at every snap stop (issue #8 —
 *      "swipe stops mid-card on 1-per-row mobile").
 *
 * `data-mobile-full-bleed="false"` keeps every card's desktop radius +
 * gutter in place at every breakpoint — the inspector knob simply opts
 * the element out of the @media block below.
 *
 * Mobile breakpoint = 768px (project-wide; never 1024).
 * ────────────────────────────────────────────────────────────────────── */

@container site style(--site-bp: mobile) {
  /* ── Outer section: bleed to viewport edges ───────────────────────── */
  /* Use 100vw with a negative margin trick. `width: 100vw` on a flex/grid
     item that lives inside a max-width-clamped page wrapper escapes the
     wrapper without scrollbars (the wrapper itself never widens; only
     this section's box does). The margin-left calc keeps it centered
     horizontally regardless of how much padding the page wrapper had. */
  [data-mobile-full-bleed="true"] {
    /* Use inline padding-zero on the inner container so the section's
       OWN padding (set by the section element's design panel) still
       paints any vertical band color edge-to-edge. */
    border-radius: 0 !important;
  }

  /* Universal top-level edge-to-edge: any top-level .el wrapper (hero,
     cta-with-image, page-header, etc.) collapses its inline-axis
     `--el-padding` on phones so the visual card spans viewport edge to
     edge. Block-axis padding is preserved (vertical rhythm intact).
     Authors keep their desktop gutter by setting
     data-mobile-full-bleed="false" on the element. Excluded: navbar,
     footer, loading screen — they ship their own mobile shells. */
  .el--top-level:not([data-mobile-full-bleed="false"]):not(.el--navbar):not(.el--footer):not(.el--loading) > :not(style) {
    padding-inline: 0 !important;
  }

  /* The compound-section inner wrapper carries `.el-site-container`,
     which clamps width + adds responsive horizontal padding. On mobile
     full-bleed sections we need to drop both so cards reach the edges.
     The first selector covers the case where the section ITSELF is the
     `.el-site-container` (e.g. ContactSectionRenderer's <section> root) —
     the descendant selector below misses that case.
     `.el-section` and `.el-section__inner` cover the standard
     SectionRenderer path: critical CSS (CriticalCss.tsx) sets
     `.el-section { padding-inline: var(--site-content-gutter, 24px) }`
     and the renderer applies `paddingLeft/Right` inline on `__inner` —
     both must zero out on phones for the section's own children to
     reach the viewport edge. */
  [data-mobile-full-bleed="true"].el-site-container,
  [data-mobile-full-bleed="true"] .el-site-container,
  [data-mobile-full-bleed="true"].el-section,
  [data-mobile-full-bleed="true"] > .el-section__inner,
  [data-mobile-full-bleed="true"] > .el-compound-section__inner,
  [data-mobile-full-bleed="true"] > .el-contact-section__body {
    padding-inline: 0 !important;
    max-width: 100% !important;
  }

  /* ── Card-container scope (region-portfolio, stats, etc.) ─────────── */
  /* Generated by buildCardContainerCss. Each scope's `.el-<scope>__card-container`
     gets neutralized here.

     Default (SSR / no-JS / runtime not yet mounted): every card inside a
     full-bleed section drops ALL corners. This is the safe fallback that
     ships before MobileFullBleedCorners.tsx hydrates and decides per-card
     which corners are actually edge-touching.

     When the runtime mounts, it adds `data-mfb-corners="active"` on the
     section root; the rules below get scoped out and the smart corner
     rules at the bottom of this file take over (only the touching edge
     goes flat, the inside corner keeps its radius). The fallback band
     covers no-JS users, hydration latency, and prerendered HTML so cards
     never look mid-state. */
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-region-portfolio__card-container,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-stats__card-container,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-region-portfolio__card,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-feature-cards__card,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-testimonials__card,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-timeline-event,
  [data-mobile-full-bleed="true"] .el-hud-income,
  [data-mobile-full-bleed="true"] .el-hud-income__inner,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-hud-income__tier-card,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .avail-fp-card,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-property-highlights__item,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-gallery__item,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-image-carousel__slide,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-content-slider__slide,
  [data-mobile-full-bleed="true"] .el-contact-section__form-wrap,
  [data-mobile-full-bleed="true"] .el-contact-section__map,
  [data-mobile-full-bleed="true"] .el-contact-section__map-wrap,
  [data-mobile-full-bleed="true"] .el-contact-section__info {
    border-radius: 0 !important;
  }

  /* Card containers stretch to viewport width. The compound-section grid
     is already 1-column at ≤768px (`er-compound-section.css`), but the
     card container needs its own gutters zeroed so the card body reaches
     the edge. */
  [data-mobile-full-bleed="true"] .el-region-portfolio__card-container,
  [data-mobile-full-bleed="true"] .el-feature-cards__card,
  [data-mobile-full-bleed="true"] .el-testimonials__card,
  [data-mobile-full-bleed="true"] .el-timeline-event,
  [data-mobile-full-bleed="true"] .el-gallery__item,
  [data-mobile-full-bleed="true"] .el-contact-section__form-wrap,
  [data-mobile-full-bleed="true"] .el-contact-section__map,
  [data-mobile-full-bleed="true"] .el-contact-section__map-wrap {
    margin-inline: 0 !important;
  }

  /* Strip the form-wrap's heavy desktop padding so phone fields still
     have a comfortable touch margin without the card-on-card chrome.
     Authors who want the original padding back can flip the element's
     `mobileFullBleed` to false. Side borders are zeroed so the form-card
     edge aligns flush with the viewport — top/bottom borders are kept
     so the card still reads as a distinct band against the page bg.
     The `data-form-border-side` overrides above still win for authors
     who explicitly pick a single side. */
  [data-mobile-full-bleed="true"] .el-contact-section__form-wrap {
    padding-inline: 1.25rem !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* ── Carousel: edge-to-edge slide + flush snap ─────────────────────── */
  /* When the section is full-bleed on mobile, the compound-section
     carousel track must:
       · drop the inner-slide padding so the active card's left edge sits
         at viewport-left (no internal gutter peek);
       · drop the frame's clip-margin so adjacent slides don't bleed
         visibly past the active one;
       · keep `flex-basis: 100cqw` from er-compound-section.css so each
         slide IS the frame width (already in place at ≤768px).
     Net: the existing `stepSize = first.offsetWidth + gap` math in
     `useInfiniteCarousel` lands the next card flush at every snap stop.
     Authors who want padded slides on phones can opt out via the
     inspector toggle. */
  [data-mobile-full-bleed="true"] .el-compound-section__carousel-frame {
    overflow-clip-margin-left: 0 !important; overflow-clip-margin-right: 0 !important;
  }
  [data-mobile-full-bleed="true"] .el-compound-section__carousel-slide {
    padding-inline: 0 !important;
  }
  [data-mobile-full-bleed="true"] .el-compound-section__carousel-track {
    /* Eliminate the inter-card gap on full-bleed mobile so a 1-per-view
       carousel snaps card-flush-to-card. Without this, gap > 0 leaves a
       visible "between cards" band when the user drags past the active
       slide. The inter-card spacing is provided by the cards' own
       outer margins / stretched backgrounds in this layout. */
    gap: 0 !important;
  }

  /* Image-carousel + content-slider use the same compound-section carousel
     viewport; the rules above already cover them via the descendant
     selector. The slide-level radius is zeroed by the broader card
     selector list at the top of this @media block. */

  /* ── Gallery, image-carousel, content-slider grid items ────────────── */
  /* When these run in non-carousel modes (gallery grid, image-carousel
     "stack"), drop tile radius too. */
  [data-mobile-full-bleed="true"] .el-gallery__grid,
  [data-mobile-full-bleed="true"] .el-image-carousel__list,
  [data-mobile-full-bleed="true"] .el-content-slider__list {
    padding-inline: 0 !important;
  }

  /* ── Section visual chrome that gates on the toggle ─────────────────── */
  /* When the section itself draws a colored band, keep its background
     painting full-bleed. We achieve this by pulling the section's own
     margin-inline negative by the page gutter. Pages set
     `--site-page-gutter` in `:root` (er-layout.css). Falls back to 0
     so pages without a gutter remain a no-op. */
  [data-mobile-full-bleed="true"] {
    margin-inline: calc(var(--site-page-gutter, 0px) * -1) !important;
    width: calc(100% + var(--site-page-gutter, 0px) * 2) !important;
    max-width: none !important;
  }

  /* Comparison tables reflow into row cards on mobile, but the comparison
     root is also an `.el-site-container`. The generic full-bleed rule above
     is correct for compound card grids, but it makes comparison sections
     wider than neighboring content cards. Keep comparison-table contained
     inside a readable mobile column while the parent section can still paint
     its background edge-to-edge. */
  [data-mobile-full-bleed="true"] .el-comparison.el-site-container {
    width: min(
      var(--el-comparison-mobile-width, calc(100% - clamp(3rem, 12vw, 6rem))),
      var(--el-comparison-max-width, 100%)
    ) !important;
    max-width: var(--el-comparison-max-width, 100%) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  [data-mobile-full-bleed="true"] .el-comparison__heading-wrap,
  [data-mobile-full-bleed="true"] .el-comparison__body-wrap {
    box-sizing: border-box;
    width: 100%;
    padding-inline: clamp(0.75rem, 4vw, 1.25rem);
  }

  [data-mobile-full-bleed="true"] .el-comparison__scroll-wrapper {
    box-sizing: border-box;
    width: min(
      var(--el-comparison-scroll-mobile-width, calc(100% - clamp(1.5rem, 8vw, 2.5rem))),
      100%
    ) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ── Smart corner flattener (runtime-driven) ────────────────────────── */
  /* MobileFullBleedCorners.tsx walks every [data-mobile-full-bleed="true"]
     subtree, measures each known card's bounding box vs the viewport, and
     toggles `is-flat-left` / `is-flat-right` on cards whose corresponding
     edge touches a viewport edge (within 1px). Cards whose edges DON'T
     touch the viewport keep their full radius — so a 2-col mobile pricing
     grid renders flat on the outside corners but rounded on the inside.

     The CSS below targets the same card selector list as the radius-zero
     block above. We zero only the touching corners; the cross-axis pair
     keeps whatever radius the card normally has via its own rules.

     Why is this here and not in each renderer's CSS? Because the contract
     is universal — every card-bearing widget that opts into the full-bleed
     toggle gets the same treatment, and the runtime detector keeps it true
     across responsive grid changes (3-col → 2-col → 1-col stack). */
  [data-mobile-full-bleed="true"] .el-region-portfolio__card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-stats__card-container.is-flat-left,
  [data-mobile-full-bleed="true"] .el-feature-cards__card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-testimonials__card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-timeline-event.is-flat-left,
  [data-mobile-full-bleed="true"] .el-hud-income__tier-card.is-flat-left,
  [data-mobile-full-bleed="true"] .avail-fp-card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-property-highlights__item.is-flat-left,
  [data-mobile-full-bleed="true"] .el-gallery__item.is-flat-left,
  [data-mobile-full-bleed="true"] .el-image-carousel__slide.is-flat-left,
  [data-mobile-full-bleed="true"] .el-content-slider__slide.is-flat-left,
  [data-mobile-full-bleed="true"] .el-pricing-card__plan.is-flat-left,
  [data-mobile-full-bleed="true"] .el-services__card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-team__card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-amenity-grid__item.is-flat-left,
  [data-mobile-full-bleed="true"] .el-comparison-table__card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-quick-action-card.is-flat-left {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  [data-mobile-full-bleed="true"] .el-region-portfolio__card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-stats__card-container.is-flat-right,
  [data-mobile-full-bleed="true"] .el-feature-cards__card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-testimonials__card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-timeline-event.is-flat-right,
  [data-mobile-full-bleed="true"] .el-hud-income__tier-card.is-flat-right,
  [data-mobile-full-bleed="true"] .avail-fp-card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-property-highlights__item.is-flat-right,
  [data-mobile-full-bleed="true"] .el-gallery__item.is-flat-right,
  [data-mobile-full-bleed="true"] .el-image-carousel__slide.is-flat-right,
  [data-mobile-full-bleed="true"] .el-content-slider__slide.is-flat-right,
  [data-mobile-full-bleed="true"] .el-pricing-card__plan.is-flat-right,
  [data-mobile-full-bleed="true"] .el-services__card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-team__card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-amenity-grid__item.is-flat-right,
  [data-mobile-full-bleed="true"] .el-comparison-table__card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-quick-action-card.is-flat-right {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}
@media (max-width: 768px) {
  /* ── Outer section: bleed to viewport edges ───────────────────────── */
  /* Use 100vw with a negative margin trick. `width: 100vw` on a flex/grid
     item that lives inside a max-width-clamped page wrapper escapes the
     wrapper without scrollbars (the wrapper itself never widens; only
     this section's box does). The margin-left calc keeps it centered
     horizontally regardless of how much padding the page wrapper had. */
  [data-mobile-full-bleed="true"] {
    /* Use inline padding-zero on the inner container so the section's
       OWN padding (set by the section element's design panel) still
       paints any vertical band color edge-to-edge. */
    border-radius: 0 !important;
  }

  /* Universal top-level edge-to-edge: any top-level .el wrapper (hero,
     cta-with-image, page-header, etc.) collapses its inline-axis
     `--el-padding` on phones so the visual card spans viewport edge to
     edge. Block-axis padding is preserved (vertical rhythm intact).
     Authors keep their desktop gutter by setting
     data-mobile-full-bleed="false" on the element. Excluded: navbar,
     footer, loading screen — they ship their own mobile shells. */
  .el--top-level:not([data-mobile-full-bleed="false"]):not(.el--navbar):not(.el--footer):not(.el--loading) > :not(style) {
    padding-inline: 0 !important;
  }

  /* The compound-section inner wrapper carries `.el-site-container`,
     which clamps width + adds responsive horizontal padding. On mobile
     full-bleed sections we need to drop both so cards reach the edges.
     The first selector covers the case where the section ITSELF is the
     `.el-site-container` (e.g. ContactSectionRenderer's <section> root) —
     the descendant selector below misses that case.
     `.el-section` and `.el-section__inner` cover the standard
     SectionRenderer path: critical CSS (CriticalCss.tsx) sets
     `.el-section { padding-inline: var(--site-content-gutter, 24px) }`
     and the renderer applies `paddingLeft/Right` inline on `__inner` —
     both must zero out on phones for the section's own children to
     reach the viewport edge. */
  [data-mobile-full-bleed="true"].el-site-container,
  [data-mobile-full-bleed="true"] .el-site-container,
  [data-mobile-full-bleed="true"].el-section,
  [data-mobile-full-bleed="true"] > .el-section__inner,
  [data-mobile-full-bleed="true"] > .el-compound-section__inner,
  [data-mobile-full-bleed="true"] > .el-contact-section__body {
    padding-inline: 0 !important;
    max-width: 100% !important;
  }

  /* ── Card-container scope (region-portfolio, stats, etc.) ─────────── */
  /* Generated by buildCardContainerCss. Each scope's `.el-<scope>__card-container`
     gets neutralized here.

     Default (SSR / no-JS / runtime not yet mounted): every card inside a
     full-bleed section drops ALL corners. This is the safe fallback that
     ships before MobileFullBleedCorners.tsx hydrates and decides per-card
     which corners are actually edge-touching.

     When the runtime mounts, it adds `data-mfb-corners="active"` on the
     section root; the rules below get scoped out and the smart corner
     rules at the bottom of this file take over (only the touching edge
     goes flat, the inside corner keeps its radius). The fallback band
     covers no-JS users, hydration latency, and prerendered HTML so cards
     never look mid-state. */
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-region-portfolio__card-container,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-stats__card-container,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-region-portfolio__card,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-feature-cards__card,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-testimonials__card,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-timeline-event,
  [data-mobile-full-bleed="true"] .el-hud-income,
  [data-mobile-full-bleed="true"] .el-hud-income__inner,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-hud-income__tier-card,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .avail-fp-card,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-property-highlights__item,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-gallery__item,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-image-carousel__slide,
  [data-mobile-full-bleed="true"]:not([data-mfb-corners="active"]) .el-content-slider__slide,
  [data-mobile-full-bleed="true"] .el-contact-section__form-wrap,
  [data-mobile-full-bleed="true"] .el-contact-section__map,
  [data-mobile-full-bleed="true"] .el-contact-section__map-wrap,
  [data-mobile-full-bleed="true"] .el-contact-section__info {
    border-radius: 0 !important;
  }

  /* Card containers stretch to viewport width. The compound-section grid
     is already 1-column at ≤768px (`er-compound-section.css`), but the
     card container needs its own gutters zeroed so the card body reaches
     the edge. */
  [data-mobile-full-bleed="true"] .el-region-portfolio__card-container,
  [data-mobile-full-bleed="true"] .el-feature-cards__card,
  [data-mobile-full-bleed="true"] .el-testimonials__card,
  [data-mobile-full-bleed="true"] .el-timeline-event,
  [data-mobile-full-bleed="true"] .el-gallery__item,
  [data-mobile-full-bleed="true"] .el-contact-section__form-wrap,
  [data-mobile-full-bleed="true"] .el-contact-section__map,
  [data-mobile-full-bleed="true"] .el-contact-section__map-wrap {
    margin-inline: 0 !important;
  }

  /* Strip the form-wrap's heavy desktop padding so phone fields still
     have a comfortable touch margin without the card-on-card chrome.
     Authors who want the original padding back can flip the element's
     `mobileFullBleed` to false. Side borders are zeroed so the form-card
     edge aligns flush with the viewport — top/bottom borders are kept
     so the card still reads as a distinct band against the page bg.
     The `data-form-border-side` overrides above still win for authors
     who explicitly pick a single side. */
  [data-mobile-full-bleed="true"] .el-contact-section__form-wrap {
    padding-inline: 1.25rem !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* ── Carousel: edge-to-edge slide + flush snap ─────────────────────── */
  /* When the section is full-bleed on mobile, the compound-section
     carousel track must:
       · drop the inner-slide padding so the active card's left edge sits
         at viewport-left (no internal gutter peek);
       · drop the frame's clip-margin so adjacent slides don't bleed
         visibly past the active one;
       · keep `flex-basis: 100cqw` from er-compound-section.css so each
         slide IS the frame width (already in place at ≤768px).
     Net: the existing `stepSize = first.offsetWidth + gap` math in
     `useInfiniteCarousel` lands the next card flush at every snap stop.
     Authors who want padded slides on phones can opt out via the
     inspector toggle. */
  [data-mobile-full-bleed="true"] .el-compound-section__carousel-frame {
    overflow-clip-margin-left: 0 !important; overflow-clip-margin-right: 0 !important;
  }
  [data-mobile-full-bleed="true"] .el-compound-section__carousel-slide {
    padding-inline: 0 !important;
  }
  [data-mobile-full-bleed="true"] .el-compound-section__carousel-track {
    /* Eliminate the inter-card gap on full-bleed mobile so a 1-per-view
       carousel snaps card-flush-to-card. Without this, gap > 0 leaves a
       visible "between cards" band when the user drags past the active
       slide. The inter-card spacing is provided by the cards' own
       outer margins / stretched backgrounds in this layout. */
    gap: 0 !important;
  }

  /* Image-carousel + content-slider use the same compound-section carousel
     viewport; the rules above already cover them via the descendant
     selector. The slide-level radius is zeroed by the broader card
     selector list at the top of this @media block. */

  /* ── Gallery, image-carousel, content-slider grid items ────────────── */
  /* When these run in non-carousel modes (gallery grid, image-carousel
     "stack"), drop tile radius too. */
  [data-mobile-full-bleed="true"] .el-gallery__grid,
  [data-mobile-full-bleed="true"] .el-image-carousel__list,
  [data-mobile-full-bleed="true"] .el-content-slider__list {
    padding-inline: 0 !important;
  }

  /* ── Section visual chrome that gates on the toggle ─────────────────── */
  /* When the section itself draws a colored band, keep its background
     painting full-bleed. We achieve this by pulling the section's own
     margin-inline negative by the page gutter. Pages set
     `--site-page-gutter` in `:root` (er-layout.css). Falls back to 0
     so pages without a gutter remain a no-op. */
  [data-mobile-full-bleed="true"] {
    margin-inline: calc(var(--site-page-gutter, 0px) * -1) !important;
    width: calc(100% + var(--site-page-gutter, 0px) * 2) !important;
    max-width: none !important;
  }

  /* Comparison tables reflow into row cards on mobile, but the comparison
     root is also an `.el-site-container`. The generic full-bleed rule above
     is correct for compound card grids, but it makes comparison sections
     wider than neighboring content cards. Keep comparison-table contained
     inside a readable mobile column while the parent section can still paint
     its background edge-to-edge. */
  [data-mobile-full-bleed="true"] .el-comparison.el-site-container {
    width: min(
      var(--el-comparison-mobile-width, calc(100% - clamp(3rem, 12vw, 6rem))),
      var(--el-comparison-max-width, 100%)
    ) !important;
    max-width: var(--el-comparison-max-width, 100%) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  [data-mobile-full-bleed="true"] .el-comparison__heading-wrap,
  [data-mobile-full-bleed="true"] .el-comparison__body-wrap {
    box-sizing: border-box;
    width: 100%;
    padding-inline: clamp(0.75rem, 4vw, 1.25rem);
  }

  [data-mobile-full-bleed="true"] .el-comparison__scroll-wrapper {
    box-sizing: border-box;
    width: min(
      var(--el-comparison-scroll-mobile-width, calc(100% - clamp(1.5rem, 8vw, 2.5rem))),
      100%
    ) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ── Smart corner flattener (runtime-driven) ────────────────────────── */
  /* MobileFullBleedCorners.tsx walks every [data-mobile-full-bleed="true"]
     subtree, measures each known card's bounding box vs the viewport, and
     toggles `is-flat-left` / `is-flat-right` on cards whose corresponding
     edge touches a viewport edge (within 1px). Cards whose edges DON'T
     touch the viewport keep their full radius — so a 2-col mobile pricing
     grid renders flat on the outside corners but rounded on the inside.

     The CSS below targets the same card selector list as the radius-zero
     block above. We zero only the touching corners; the cross-axis pair
     keeps whatever radius the card normally has via its own rules.

     Why is this here and not in each renderer's CSS? Because the contract
     is universal — every card-bearing widget that opts into the full-bleed
     toggle gets the same treatment, and the runtime detector keeps it true
     across responsive grid changes (3-col → 2-col → 1-col stack). */
  [data-mobile-full-bleed="true"] .el-region-portfolio__card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-stats__card-container.is-flat-left,
  [data-mobile-full-bleed="true"] .el-feature-cards__card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-testimonials__card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-timeline-event.is-flat-left,
  [data-mobile-full-bleed="true"] .el-hud-income__tier-card.is-flat-left,
  [data-mobile-full-bleed="true"] .avail-fp-card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-property-highlights__item.is-flat-left,
  [data-mobile-full-bleed="true"] .el-gallery__item.is-flat-left,
  [data-mobile-full-bleed="true"] .el-image-carousel__slide.is-flat-left,
  [data-mobile-full-bleed="true"] .el-content-slider__slide.is-flat-left,
  [data-mobile-full-bleed="true"] .el-pricing-card__plan.is-flat-left,
  [data-mobile-full-bleed="true"] .el-services__card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-team__card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-amenity-grid__item.is-flat-left,
  [data-mobile-full-bleed="true"] .el-comparison-table__card.is-flat-left,
  [data-mobile-full-bleed="true"] .el-quick-action-card.is-flat-left {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  [data-mobile-full-bleed="true"] .el-region-portfolio__card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-stats__card-container.is-flat-right,
  [data-mobile-full-bleed="true"] .el-feature-cards__card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-testimonials__card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-timeline-event.is-flat-right,
  [data-mobile-full-bleed="true"] .el-hud-income__tier-card.is-flat-right,
  [data-mobile-full-bleed="true"] .avail-fp-card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-property-highlights__item.is-flat-right,
  [data-mobile-full-bleed="true"] .el-gallery__item.is-flat-right,
  [data-mobile-full-bleed="true"] .el-image-carousel__slide.is-flat-right,
  [data-mobile-full-bleed="true"] .el-content-slider__slide.is-flat-right,
  [data-mobile-full-bleed="true"] .el-pricing-card__plan.is-flat-right,
  [data-mobile-full-bleed="true"] .el-services__card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-team__card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-amenity-grid__item.is-flat-right,
  [data-mobile-full-bleed="true"] .el-comparison-table__card.is-flat-right,
  [data-mobile-full-bleed="true"] .el-quick-action-card.is-flat-right {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}