/* Elementor compatibility shim.
 *
 * The approved design (design/shared.css, fx.css, home.css) styles bare
 * semantic markup: `.section` is a block with vertical padding, `.wrap` is a
 * centred max-width column, `.stack > * + *` supplies vertical rhythm.
 * Elementor wraps everything in its own boxes and drives container layout from
 * CSS custom properties. This file reconciles the two.
 *
 * It is a shim, not a second design system. It introduces no colour, radius,
 * font size or spacing value of its own — every length here is either zero or a
 * token already defined in shared.css.
 *
 * Measured against Elementor 4.2.2, which emits ONE wrapper per widget
 * (`.elementor-element`, content directly inside). Older versions added a
 * second `.elementor-widget-container`; if an upgrade brings it back, `.qs-flat`
 * has to cover that too or every `.stack > * + *` rule silently stops matching.
 *
 * ── Why the doubled `.e-con.e-con` ──
 * Elementor writes a per-page stylesheet (`uploads/elementor/css/post-N.css`)
 * containing rules like
 *   .elementor-7 .elementor-element.elementor-element-a1b2c3d { --display:flex; }
 * at specificity (0,3,0), and it is enqueued during rendering — after the
 * theme, whatever priority the theme uses. Repeating the class lifts these
 * rules to (0,4,0) so they win on specificity rather than on load order, which
 * no amount of enqueue juggling could guarantee.
 */

/* Elementor's container geometry all flows from these custom properties.
 * Blanking them hands layout back to the stylesheet in one place, rather than
 * fighting each resulting declaration. */
.elementor .e-con.e-con {
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-top: 0px;
  --margin-right: 0px;
  --margin-bottom: 0px;
  --margin-left: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --margin-inline-start: 0px;
  --margin-inline-end: 0px;
  --width: 100%;
  --content-width: 100%;
  --min-height: 0px;
}

/* Bands and columns the design treats as ordinary blocks. */
.elementor .e-con.e-con.hero,
.elementor .e-con.e-con.section,
.elementor .e-con.e-con.wrap,
.elementor .e-con.e-con.stack,
.elementor .e-con.e-con.stack-sm,
.elementor .e-con.e-con.stack-lg,
.elementor .e-con.e-con.section-head,
.elementor .e-con.e-con.cta-final,
.elementor .e-con.e-con.faq,
.elementor .e-con.e-con.prose-hero,
.elementor .e-con.e-con.prose-body,
.elementor .e-con.e-con.qs-plain {
  --display: block;
}

/* Grids. Template columns and their breakpoints stay in the design CSS — only
 * the display mode is restated here. */
.elementor .e-con.e-con.hero__grid,
.elementor .e-con.e-con.hub-points,
.elementor .e-con.e-con.split,
.elementor .e-con.e-con.grid-3,
.elementor .e-con.e-con.steps,
.elementor .e-con.e-con.price-cards,
.elementor .e-con.e-con.prose-layout {
  --display: grid;
}

/* The contents rail is `position: sticky`, which travels inside its parent's
 * box. In the prototype that parent is `.prose-layout` itself and the rail has
 * the whole document's height to move through; here the parent is the widget
 * wrapper, and `.prose-layout { align-items: start }` sizes that to the rail's
 * own content, leaving it nothing to travel. Stretching the wrapper back to the
 * row height restores the travel without touching the rail's own rules. */
.elementor .e-con.e-con.prose-layout > .elementor-widget:has(> .toc) {
  align-self: stretch;
}

/* `.wrap` is the one container whose own geometry must survive: Elementor's
 * `width: var(--width)` would otherwise override the centred column. */
.elementor .e-con.e-con.wrap {
  width: auto;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

/* Section padding, restated because the two stylesheets express it as
 * different properties — `.section { padding }` against
 * `.e-con-full { padding-block-start }` — so specificity, not the cascade
 * order between two equally specific rules, has to settle it. The values are
 * the same tokens shared.css uses; they are not new. */
.elementor .e-con.e-con.section {
  padding: var(--s-9) 0;
}

.elementor .e-con.e-con.section--tight {
  padding: var(--s-8) 0;
}

@media (max-width: 720px) {
  .elementor .e-con.e-con.section {
    padding: var(--s-8) 0;
  }
}

/* There is deliberately no `display: contents` rule for widget wrappers.
 *
 * An earlier version flattened them so the emitted <h2> would be the literal
 * child of `.stack`. It backfired: a `display: contents` box accepts no margin,
 * which killed `.stack > * + *` — the design's only vertical rhythm — and no
 * background or border either, which erased every `.card` and `.price-card`
 * whose class sits on the wrapper. Wrappers stay as real boxes; the design's
 * only direct-child selectors are the stacks and `.bento`, and both still work.
 *
 * Do not add a `margin: 0` reset for widget wrappers here either. Elementor's
 * own inter-widget spacing is already zero inside a container
 * (`.e-con .elementor-widget:not(:last-child) { --kit-widget-spacing: 0px }`),
 * so such a reset buys nothing — and at `.elementor .e-con .elementor-widget`
 * it out-specifies `.stack > * + *` and silently removes the rhythm again. */

/* frontend.css sets `html { scroll-behavior: smooth }`. The approved design
 * sets no scroll-behavior at all, so this is Elementor adding motion the design
 * never specified: every in-page anchor — the topbar's "How it works",
 * "Pricing", the FAQ jump links — animates instead of jumping.
 *
 * Restored to the browser default rather than left alone, because the design is
 * the specification. Elementor scopes its rule to
 * `prefers-reduced-motion: no-preference`, so this only ever fires where that
 * rule does. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: auto;
  }
}

/* A design element that cancels its own stack margin cannot do so through a
 * wrapper. `.checklist { margin: 0 }` and `.hub { margin: 0 auto }` are both
 * declared after `.stack > * + *` / `.stack-lg > * + *` at equal specificity,
 * so in the prototype they sit flush against what precedes them; wrapped in a
 * widget, the wrapper takes the 16px or 24px instead and the block drifts down.
 *
 * `:has()` lets the wrapper inherit the decision rather than restating a
 * spacing value. Add a selector here only when the design genuinely zeroes a
 * child's margin — not to nudge spacing by eye. tools/diffbox.py finds these:
 * they show up as a node whose height matches but whose `mar` differs. */
.elementor .e-con .elementor-widget:has(> .checklist),
.elementor .e-con .elementor-widget:has(> .hub) {
  margin-top: 0;
}

/* The full-bleed decorative layers — the hero's gradient wash and its glow —
 * are `position: absolute; inset: 0`, sized by their containing block. In the
 * prototype that is the section. Elementor's widget wrapper is
 * `position: relative`, so it becomes the containing block instead, and since
 * its only child is out of flow it has no height: both layers resolved to
 * 1440x0 and the hero lost its wash.
 *
 * Making the wrapper static hands the containing block back to the section
 * `.e-con`, which is still positioned. Nothing moves — the layers are out of
 * flow either way, which is why every height matched while this was broken. */
.elementor .e-con .elementor-widget:has(> .fx-bg),
.elementor .e-con .elementor-widget:has(> .hero__glow) {
  position: static;
}

/* There is no heading rule here on purpose.
 *
 * frontend.css sets `.elementor-heading-title { line-height: 1 }` at (0,1,0),
 * which beats the design's `h1, h2, h3, h4 { ... }` at (0,0,1). Restating the
 * line-height here looked like the fix, but any rule strong enough to beat
 * (0,1,0) also beats the design's twelve contextual overrides —
 * `.hero h1 { line-height: 1 }`, `.cta-final h2 { line-height: 1.05 }`,
 * `.dive h3 { font-size: ... }` and so on — and that count only grows with the
 * other 62 pages. Reproducing each one here would fork the design system into
 * a second stylesheet, which is the thing this shim exists to avoid.
 *
 * Instead the class is removed from the emitted markup entirely. See
 * qs_strip_elementor_presentation_classes() in inc/elementor-compat.php, which
 * leaves a bare <h1>/<h2> that the design styles exactly as authored. */