/* =========================================================================
   EflyerMarketing — Conversion Rescue Homepage
   assets/css/efm-conversion-home.css
   v1.7.694  (2026-08-21)

   SCOPE RULE, and it is not negotiable.
   Every selector in this file descends from `.efm-conversion-home`. There is
   no bare `h1`, `button`, `.container`, `img` or `:root` rule anywhere below.
   The homepage module styles itself and touches nothing else on the site,
   which is the whole point of coding the page instead of building it in
   Elementor. If you add a rule here, prefix it.

   TOKENS are declared on `.efm-conversion-home`, not on `:root`, for the same
   reason. They carry hard values rather than var(--ef-*) references so the
   module renders correctly even on a page where account-ui.css / style.css
   are not enqueued. Values are the canonical brand palette; see
   reference_material/Brand_Palette.html.

   ORDER OF SECTIONS below matches the order of sections in the template.
   ========================================================================= */


/* -------------------------------------------------------------------------
   0. Tokens + module reset
   ------------------------------------------------------------------------- */

.efm-conversion-home {
  /* Gold ramp */
  --efmch-gold:          #cea953;
  --efmch-gold-head:     #e4bf63;
  --efmch-gold-bright:   #ffe5a6;
  --efmch-gold-ink:      #ffeebe;
  --efmch-gold-mid:      #d8bf7a;
  --efmch-gold-deep:     #b68f44;

  /* Surfaces */
  --efmch-black:         #000000;
  --efmch-deep:          #050506;
  --efmch-graphite:      #0e1013;
  --efmch-graphite-2:    #14171b;
  --efmch-panel:         #1a1e22;
  --efmch-light:         #f4f2ed;
  --efmch-light-2:       #ebe7de;

  /* Ink */
  --efmch-ink:           rgba(255, 255, 255, 0.90);
  --efmch-ink-strong:    #fffaf0;
  --efmch-muted:         rgba(255, 255, 255, 0.62);
  --efmch-ink-dark:      #1b1d20;
  --efmch-muted-dark:    #55595f;

  /* Lines */
  --efmch-line:          rgba(255, 242, 198, 0.14);
  --efmch-line-strong:   rgba(255, 242, 198, 0.26);
  --efmch-line-dark:     rgba(27, 29, 32, 0.14);

  /* Geometry — THE SHARED CENTRED SHELL.
     Every section's content sits in this one box: same max-width, same
     margin-inline:auto, same symmetric padding. Section BACKGROUNDS are
     full-bleed; section CONTENT is not. That separation is the whole
     wide-screen architecture, and --efmch-shell-left is what lets a
     full-bleed background reason about where the centred content actually
     starts. At viewports narrower than the shell it resolves to 0. */
  --efmch-wrap:          1400px;
  --efmch-gutter:        clamp(20px, 4vw, 56px);
  --efmch-shell-left:    calc(50% - min(var(--efmch-wrap), 100%) / 2);

  /* Hero copy column width at desktop (1.28fr of the 1252px inner track).
     Named because the hero scrim has to know where the copy ends. */
  --efmch-copy-w:        801px;

  /* Hero image focal point. Overridable per-site without a deploy:
     .efm-conversion-home { --efmch-hero-pos-x: 58%; } */
  --efmch-hero-pos-x:    58%;
  /* v1.7.689: 50% -> 56%. object-fit:cover shears this 2.00:1 asset top AND
     bottom, and the product artwork sits LOW in the frame, so an even split
     spends half the crop budget on sky we do not need. Biasing the focal point
     down reveals more of the bottom of the composition - which is the edge the
     market strip was cutting through - and lifts the whole scene slightly.
     Tunable live, no deploy, via the efm_conversion_home_hero_position filter
     or .efm-conversion-home { --efmch-hero-pos-y: 60%; }. */
  --efmch-hero-pos-y:    56%;

  /* HERO VERTICAL ROOM (desktop). See the 1020px query for the arithmetic.
     Raising this reveals MORE of the photograph and can never reveal less, so
     it is the safe direction to tune when the composition is being clipped.
     Live-tunable: .efm-conversion-home { --efmch-hero-min-h: 720px; } */
  --efmch-hero-min-h:    clamp(660px, 38vw, 860px);

  /* HERO SCRIM RAMP, as offsets from the left edge of the centred shell.
     --hold  : the scrim is still strong up to here (behind the copy)
     --fade  : mid-fade
     --clear : fully transparent from here on - the photograph is untouched

     Tunable live, no deploy:
       .efm-conversion-home { --efmch-scrim-hold: 600px; --efmch-scrim-clear: 1000px; }
     Lower values reveal the photograph sooner; raise them if copy on the right
     of the column needs more backing on a brighter image. */
  /* v1.7.694. THE RAMP'S TAIL IS NOW PROPORTIONAL; ITS HEAD IS NOT.
     Two things in this hero are anchored differently and it matters:
       - the COPY is shell-relative  (fixed px from the centred shell edge)
       - the FLYER lives inside the photograph, and because the image is
         object-fit: cover scaling by WIDTH, it sits at a fixed FRACTION of
         viewport width (~61.8%-78.6%)
     v1.7.687 anchored every stop to the shell, which fixed wide-screen drift
     and quietly created the opposite bug: as the window narrows the flyer
     slides deeper into the ramp. Solve it and the flyer only escapes entirely
     at ~3390px, so on every real screen part of it was dimmed - worse the
     smaller the window. Reported from a non-maximised window; reproduced.
     HOLD stays absolute: it is what backs the H1, whose right edge MEASURES at
     shell+835px on the live page (the headline, not the CTAs, is the rightmost
     text). Only the TAIL is pulled in, capped at 62% of the viewport so it can
     never reach the flyer. VERIFIED by sampling rendered pixel luminance over
     a uniform grey plate at nine widths, 1400-2560:
       H1 start   9% -> 9%    (identical)
       H1 end    55% -> 55-59% (worst case 4pp lighter, at 1400-1700)
       flyer L   62-93% -> 83-99%
       flyer C   90-100% -> 100% everywhere
     An earlier attempt scaled the WHOLE ramp proportionally; measurement
     rejected it - it freed the flyer completely but lifted the H1's backing to
     93-99%, stripping the headline. The head/tail split is the compromise the
     measurements chose. */
  --efmch-scrim-hold:    640px;
  --efmch-scrim-clear:   max(900px, min(1100px, calc(62% - var(--efmch-shell-left))));
  --efmch-scrim-fade:    min(860px, calc(var(--efmch-scrim-clear) - 60px));
  --efmch-scrim-soft:    calc(var(--efmch-scrim-fade) + (var(--efmch-scrim-clear) - var(--efmch-scrim-fade)) * 0.6);
  --efmch-radius:        14px;
  --efmch-radius-lg:     18px;
  --efmch-radius-pill:   999px;

  /* Motion. Every transition in this file uses one of these, so motion can
     be tuned or killed in one place. */
  --efmch-t-fast:        140ms ease;
  --efmch-t-med:         200ms ease;

  /* Glow */
  --efmch-glow:          0 0 18px rgba(206, 169, 83, 0.28);
  --efmch-glow-strong:   0 0 26px rgba(206, 169, 83, 0.45);

  position: relative;
  isolation: isolate;
  background: var(--efmch-black);
  color: var(--efmch-ink);
  font-family: inherit;
  line-height: 1.5;
  overflow-x: clip;
}

/* Scoped box-sizing. Applying this globally is exactly the kind of sweep the
   scope rule exists to prevent. */
.efm-conversion-home *,
.efm-conversion-home *::before,
.efm-conversion-home *::after {
  box-sizing: border-box;
}

.efm-conversion-home img {
  max-width: 100%;
  height: auto;
  display: block;
}

.efm-conversion-home ul,
.efm-conversion-home ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.efm-conversion-home p {
  margin: 0;
}

.efm-conversion-home h1,
.efm-conversion-home h2,
.efm-conversion-home h3 {
  margin: 0;
  font-weight: 700;
  color: var(--efmch-ink-strong);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.efm-conversion-home blockquote {
  margin: 0;
  quotes: none;
}

.efm-conversion-home .efm-ch-wrap {
  width: 100%;
  max-width: var(--efmch-wrap);
  margin-inline: auto;
  padding-inline: var(--efmch-gutter);
}

.efm-conversion-home .efm-ch-gold {
  color: var(--efmch-gold-head);
}

.efm-conversion-home .efm-ch-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Shared section headings */
.efm-conversion-home .efm-ch-h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  text-align: center;
}

.efm-conversion-home .efm-ch-lede {
  margin: 14px auto 0;
  max-width: 62ch;
  text-align: center;
  color: var(--efmch-muted);
  font-size: clamp(15px, 1.5vw, 17px);
}

/* Icon base. Inherits currentColor so a parent rule themes the whole set. */
.efm-conversion-home .efm-ch-icon {
  width: 1em;
  height: 1em;
  display: block;
  flex: none;
}

/* Focus. One visible, consistent ring for every interactive element in the
   module. Never remove this without replacing it. */
.efm-conversion-home a:focus-visible,
.efm-conversion-home button:focus-visible,
.efm-conversion-home select:focus-visible {
  outline: 2px solid var(--efmch-gold-bright);
  outline-offset: 3px;
  border-radius: 6px;
}


/* -------------------------------------------------------------------------
   1. Buttons  (.efm-ch-btn)
   Namespaced away from the site-wide .efm-btn on purpose: this module must
   not inherit, and must not perturb, the global button system.
   ------------------------------------------------------------------------- */

.efm-conversion-home .efm-ch-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--efmch-radius);
  padding: 15px 26px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* Wraps by default and only stops wrapping once there is room (see the
     780px query). "VIEW EMAIL AREAS & PRICING" is ~290px of unbreakable text
     at this size; nowrap at 320px pushed a 21px horizontal scroll onto the
     whole page. Small screens get a taller button, never a sideways one. */
  white-space: normal;
  transition:
    background-color var(--efmch-t-fast),
    border-color     var(--efmch-t-fast),
    box-shadow       var(--efmch-t-fast),
    color            var(--efmch-t-fast),
    filter           var(--efmch-t-fast),
    transform        var(--efmch-t-fast);
}

.efm-conversion-home .efm-ch-btn__icon {
  display: inline-flex;
  font-size: 17px;
}

.efm-conversion-home .efm-ch-btn--lg {
  padding: 18px 34px;
  font-size: 15px;
}

/* Primary — the champagne slab. This is the single most important control on
   the page and it should look like it. */
.efm-conversion-home .efm-ch-btn--primary {
  background: linear-gradient(180deg, #ecd087 0%, #d7b160 52%, #c39c47 100%);
  border-color: rgba(255, 233, 168, 0.55);
  color: #17120a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 6px 20px rgba(0, 0, 0, 0.42),
    var(--efmch-glow);
}

.efm-conversion-home .efm-ch-btn--primary:hover {
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 26px rgba(0, 0, 0, 0.5),
    var(--efmch-glow-strong);
}

.efm-conversion-home .efm-ch-btn--primary:active {
  transform: translateY(1px);
  filter: brightness(0.98);
}

/* Secondary — dark glass with a gold edge. The house default button look. */
.efm-conversion-home .efm-ch-btn--secondary {
  background: rgba(12, 14, 16, 0.55);
  border-color: rgba(206, 169, 83, 0.62);
  color: var(--efmch-gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 242, 198, 0.08);
}

.efm-conversion-home .efm-ch-btn--secondary:hover {
  background: rgba(24, 28, 32, 0.78);
  border-color: var(--efmch-gold-bright);
  color: var(--efmch-gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 198, 0.12),
    var(--efmch-glow);
}

.efm-conversion-home .efm-ch-btn--secondary:active {
  transform: translateY(1px);
}

.efm-conversion-home .efm-ch-btn[disabled],
.efm-conversion-home .efm-ch-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}


/* -------------------------------------------------------------------------
   2. Hero
   ------------------------------------------------------------------------- */

.efm-conversion-home .efm-ch-hero {
  position: relative;
  background: var(--efmch-black);
  /* HEADER CLEARANCE.
     The site header is an Elementor sticky: when it engages it becomes
     position:fixed, leaves the flow, and the hero slides underneath it - which
     is exactly what buried the first line of the H1 on the first deploy.

     --efmch-header-h is MEASURED and published by efm-conversion-home.js, so a
     header redesign is picked up automatically and there is no magic number to
     go stale (instruction sec 16). It defaults to 0 so that a page with a
     header genuinely in flow gets no double gap, and so the layout is correct
     even if the JS never runs. */
  padding-block: calc(var(--efmch-header-h, 0px) + clamp(34px, 4.4vw, 60px)) clamp(22px, 2.8vw, 36px);
  overflow: hidden;
}

.efm-conversion-home .efm-ch-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.efm-conversion-home .efm-ch-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Was a hardcoded 62%, which pulled the house further right the wider the
     screen got and dragged the optical centre with it. Tokenised so it can be
     tuned against the real photograph rather than guessed at. */
  object-position: var(--efmch-hero-pos-x) var(--efmch-hero-pos-y);
}

/* The scrim is what makes white text legible over an arbitrary photo. On
   mobile it is a top-down wash (content sits over the image); from the
   two-column breakpoint up it becomes a left-to-right wash so the copy
   column reads on near-black while the photo stays clean on the right. */
.efm-conversion-home .efm-ch-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.72) 55%, rgba(0, 0, 0, 0.92) 100%);
}

/* Hero fallback: with no image configured the gradient alone is the design,
   not a broken state. Keyed to a PHP-set modifier class rather than :has(),
   deliberately: the hero is the highest-stakes paint on the site and it must
   not depend on a selector an older browser might not resolve. */
.efm-conversion-home .efm-ch-hero--no-image .efm-ch-hero__scrim {
  background:
    radial-gradient(120% 90% at 78% 30%, rgba(46, 38, 20, 0.85) 0%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #0b0c0e 0%, #000000 100%);
}

.efm-conversion-home .efm-ch-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0, 1fr), not the implicit `auto`. An auto track refuses to shrink
     below its content's min-content width, which is how one long unbreakable
     button label turns into a page-wide horizontal scrollbar. Every grid in
     this file uses minmax(0, …) for the same reason. */
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.efm-conversion-home .efm-ch-hero__copy,
.efm-conversion-home .efm-ch-hero__aside {
  min-width: 0;
}

.efm-conversion-home .efm-ch-hero__title {
  /* Sized to land on TWO lines at desktop, as the mockup does. The exact
     wrap point depends on the theme font this module inherits, so the size is
     deliberately conservative and text-wrap:balance keeps the break sensible
     rather than leaving one orphan word on line two.

     v1.7.686: up ~11% to 52px and to weight 800 (Grayson: the two lines were
     blending together).

     THE SIZE IS MEASURED, NOT CHOSEN. "Get Your Listing in Front of" renders
     1487px wide per 100px of font-size in both Roboto and Montserrat, the two
     faces this theme loads. So the largest size that keeps it on ONE line is
     (copy-column width / 1487) * 100. With the widened column below that is
     ~54px at 1440 and ~49px at 1280, so 52px capped with a 3.5vw ramp clears
     every width in the two-column range with headroom to spare.

     The headroom is not decoration: with font-display:swap the fallback face
     paints first and is wider, so a size sitting exactly on the limit wraps
     during load and reflows - a layout shift in the largest element on the
     page.

     THIS ALSO FIXES A LATENT BUG. At the previous 47px/3.9vw the line already
     wrapped to three lines anywhere between ~1020px and ~1400px viewport; it
     only looked right on a wide monitor. */
  font-size: clamp(33px, 3.5vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.efm-conversion-home .efm-ch-hero__title-line {
  display: block;
}

/* THE HEADLINE IS TWO-TONE ON PURPOSE, so the two tones have to actually
   differ. Line one previously inherited --efmch-ink-strong (#fffaf0), a warm
   cream only a few steps from --efmch-gold-head (#e4bf63) - which is why the
   lines read as one block. Line one is now near-white with only a trace of
   warmth so it stays in the palette, and the gold line is unchanged. */
.efm-conversion-home .efm-ch-hero__title-line:not(.efm-ch-gold) {
  color: #fdfcf9;
}

.efm-conversion-home .efm-ch-hero__sub {
  margin-top: 15px;
  max-width: 48ch;
  /* v1.7.686: up from 15-17px. This sentence is the whole "what is Eflyer"
     answer; nobody should have to lean in to read it. */
  font-size: clamp(16px, 1.75vw, 19px);
  color: var(--efmch-ink);
}

/* --- Hero benefit trio --- */

.efm-conversion-home .efm-ch-benefits {
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

.efm-conversion-home .efm-ch-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.efm-conversion-home .efm-ch-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid rgba(206, 169, 83, 0.55);
  border-radius: 50%;
  color: var(--efmch-gold-head);
  font-size: 20px;
  background: rgba(0, 0, 0, 0.35);
}

.efm-conversion-home .efm-ch-benefit__body {
  display: block;
  min-width: 0;
}

.efm-conversion-home .efm-ch-benefit__title {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--efmch-ink-strong);
}

.efm-conversion-home .efm-ch-benefit__text {
  display: block;
  margin-top: 5px;
  /* v1.7.686: larger and lifted off --efmch-muted (0.62 alpha), which was too
     faint for copy this load-bearing. 0.78 keeps it clearly secondary to the
     title without making it hard work. */
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

/* --- Hero actions --- */

.efm-conversion-home .efm-ch-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.efm-conversion-home .efm-ch-hero__actions .efm-ch-btn {
  flex: 1 1 260px;
}

/* --- Hero microcopy --- */

.efm-conversion-home .efm-ch-notes {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.efm-conversion-home .efm-ch-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.efm-conversion-home .efm-ch-note__icon {
  display: inline-flex;
  color: var(--efmch-gold-head);
  font-size: 20px;
  margin-top: 2px;
  flex: none;
}

.efm-conversion-home .efm-ch-note__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--efmch-gold-head);
}

.efm-conversion-home .efm-ch-note__text {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--efmch-muted);
}

/* --- Hero aside (flyer plaque + proof card) --- */

.efm-conversion-home .efm-ch-hero__aside {
  display: grid;
  gap: 18px;
  align-content: end;
}

.efm-conversion-home .efm-ch-flyer {
  margin: 0;
  border: 1px solid rgba(206, 169, 83, 0.4);
  border-radius: var(--efmch-radius);
  overflow: hidden;
  background: #0a0b0c;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  max-width: 320px;
  justify-self: end;
}

.efm-conversion-home .efm-ch-quote {
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--efmch-line);
  border-radius: var(--efmch-radius);
  background: rgba(10, 11, 13, 0.86);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  max-width: 330px;
  justify-self: end;
}

.efm-conversion-home .efm-ch-quote__text {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--efmch-ink);
}

.efm-conversion-home .efm-ch-quote__text::before { content: "\201C"; }
.efm-conversion-home .efm-ch-quote__text::after  { content: "\201D"; }

.efm-conversion-home .efm-ch-quote__by {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--efmch-gold-head);
}

.efm-conversion-home .efm-ch-quote__where {
  display: block;
  color: var(--efmch-muted);
}


/* -------------------------------------------------------------------------
   3. Market selector
   ------------------------------------------------------------------------- */

.efm-conversion-home .efm-ch-market {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, var(--efmch-graphite-2) 0%, var(--efmch-graphite) 100%);
  /* v1.7.686. The TOP border is deliberately gone. "Here is what we do ->
     where do you want to reach agents?" is one continuous thought, and a
     hairline across the full width was announcing a new page section right at
     the moment the customer should feel carried forward. The bottom border
     stays, because the light credibility strip below IS a separate beat. */
  border-bottom: 1px solid var(--efmch-line);
  padding-block: clamp(22px, 2.8vw, 32px);
}

.efm-conversion-home .efm-ch-market__inner {
  display: grid;
  gap: 22px;
  align-items: center;
}

.efm-conversion-home .efm-ch-market__lede {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.efm-conversion-home .efm-ch-market__pin {
  display: inline-flex;
  color: var(--efmch-gold-head);
  font-size: 34px;
  flex: none;
}

.efm-conversion-home .efm-ch-market__title {
  font-size: clamp(21px, 2.6vw, 28px);
}

.efm-conversion-home .efm-ch-market__sub {
  margin-top: 7px;
  font-size: 14px;
  color: var(--efmch-muted);
  max-width: 42ch;
}

.efm-conversion-home .efm-ch-market__form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}

/* Select. Styled with appearance:none + our own caret so it looks the same in
   every browser. The native <select> is kept (not replaced with a div/listbox
   widget) because it is keyboard- and screen-reader-correct for free, and on
   mobile it opens the OS picker, which is the fastest control there is. */
.efm-conversion-home .efm-ch-select {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
}

.efm-conversion-home .efm-ch-select__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  min-height: 54px;
  padding: 14px 46px 14px 18px;
  font: inherit;
  font-size: 16px;              /* 16px stops iOS Safari zooming on focus */
  font-weight: 600;
  color: var(--efmch-ink-dark);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--efmch-radius);
  cursor: pointer;
  transition: border-color var(--efmch-t-fast), box-shadow var(--efmch-t-fast);
}

.efm-conversion-home .efm-ch-select__input:hover {
  border-color: var(--efmch-gold-deep);
}

.efm-conversion-home .efm-ch-select__input:focus {
  border-color: var(--efmch-gold);
  box-shadow: 0 0 0 3px rgba(206, 169, 83, 0.3);
  outline: none;
}

.efm-conversion-home .efm-ch-select__caret {
  position: absolute;
  top: 50%;
  right: 16px;
  translate: 0 -50%;
  width: 20px;
  height: 20px;
  color: #4a4d52;
  pointer-events: none;
}

.efm-conversion-home .efm-ch-select__caret svg {
  width: 100%;
  height: 100%;
  display: block;
}

.efm-conversion-home .efm-ch-market__go {
  flex: 0 1 260px;
  min-height: 54px;
}

/* v1.7.686. Against the white dropdown this button was reading as muted, almost
   disabled. Brighter gradient, a bright-gold edge and a standing glow so it
   plainly invites a click.

   It stays SUBORDINATE to Launch Your Campaign by size and placement, not by
   being dull: the hero CTA is larger, sits above the fold and carries the
   send icon. Two buttons can both look alive without competing. */
/* v1.7.689. Reported as STILL reading muted. Measurement first, because the
   obvious fix was the wrong one: this button's fill was already 15% BRIGHTER
   than the hero's primary CTA by relative luminance (mean 0.5650 vs 0.4909).
   Adding lightness would not have made it read as more actionable, it would
   have made it outrank ORDER YOUR EFLYER - the one thing this pass must not do.

   What actually flattens it is SIMULTANEOUS CONTRAST: a large pure-white select
   sits immediately to its left, and against true white a pale gold reads as
   washed no matter how light it is. The answer to that is CHROMA, not lightness.

   So: saturation +13.3% with relative luminance held FLAT (0.5650 -> 0.5654,
   +0.1%). The market/primary luminance ratio is unchanged at 1.152, so the
   dominance order is exactly what it was; the button simply reads as gold
   rather than as beige. Glow and inset highlight are up ~15% to give it a lit
   edge against the white neighbour. Label contrast improves as a side effect:
   #17120a now measures 13.86 / 10.53 / 8.36 across the three stops. */
.efm-conversion-home .efm-ch-market__go.efm-ch-btn--primary {
  background: linear-gradient(180deg, #fcdb88 0%, #e8bd5d 50%, #d5a73e 100%);
  border-color: var(--efmch-gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 6px 20px rgba(0, 0, 0, 0.42),
    0 0 23px rgba(214, 176, 88, 0.48);
}

.efm-conversion-home .efm-ch-market__go.efm-ch-btn--primary:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 8px 26px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(214, 176, 88, 0.66);
}

/* v1.7.689. THE ACTUAL CAUSE OF "READS MUTED", found by sampling the rendered
   button rather than trusting the stylesheet.

   Before a state is chosen - which is the state EVERY visitor sees on first
   paint - efm-conversion-home.js adds .is-disabled, and the shared button rule
   below applies opacity: 0.5 and cursor: not-allowed. So the section's only
   call to action was rendering at HALF STRENGTH, and no amount of gradient
   tuning was ever going to fix that. Measured on the rendered pixels: mean
   RGB (119, 101, 58) against a fill that should read (230, 192, 96).

   Two problems with inheriting the shared treatment here:

     1. Half opacity makes the whole market strip look inert at a glance. The
        customer reads "this is switched off", not "choose a state first".
     2. cursor: not-allowed is simply untrue. Clicking DOES do something -
        the submit handler focuses the select, which is exactly the instruction
        the customer needs. Telling them the control is dead discourages the
        one interaction that would teach them the next step.

   So the resting state is lifted to 0.86 and the cursor made honest. It still
   sits visibly below the armed state (1.0) - selecting a market is rewarded
   with a step up in presence - and visibly below the hero's ORDER YOUR EFLYER,
   so the dominance order Grayson set is preserved. aria-disabled and the
   focus-return behaviour are untouched: the accessibility contract is the
   same, only the visual penalty changed. */
.efm-conversion-home .efm-ch-market__go.efm-ch-btn.is-disabled {
  opacity: 0.86;
  cursor: pointer;
}

.efm-conversion-home .efm-ch-market__hint {
  font-size: 13.5px;
  color: var(--efmch-muted);
}

.efm-conversion-home .efm-ch-market__trust {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--efmch-gold-head);
}

.efm-conversion-home .efm-ch-market__trust-icon {
  display: inline-flex;
  font-size: 17px;
  flex: none;
}


/* -------------------------------------------------------------------------
   4. Credibility strip  (light surface)
   ------------------------------------------------------------------------- */

.efm-conversion-home .efm-ch-cred {
  background: linear-gradient(180deg, var(--efmch-light) 0%, var(--efmch-light-2) 100%);
  color: var(--efmch-ink-dark);
  padding-block: clamp(28px, 3.6vw, 42px);
}

.efm-conversion-home .efm-ch-cred__list {
  display: grid;
  gap: 24px;
}

.efm-conversion-home .efm-ch-cred__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.efm-conversion-home .efm-ch-cred__icon {
  display: inline-flex;
  color: var(--efmch-gold-deep);
  font-size: 30px;
  flex: none;
}

.efm-conversion-home .efm-ch-cred__title {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--efmch-ink-dark);
}

/* v1.7.686: size and contrast only, no extra leading, so the strip does not
   grow taller. #45494f against #f4f2ed is ~8.2:1, comfortably past WCAG AA and
   a real step up from the previous #55595f. */
.efm-conversion-home .efm-ch-cred__text {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
  color: #45494f;
}


/* -------------------------------------------------------------------------
   5. Brokerage strip
   ------------------------------------------------------------------------- */

.efm-conversion-home .efm-ch-brands {
  background: var(--efmch-deep);
  padding-block: clamp(30px, 3.8vw, 46px);
}

.efm-conversion-home .efm-ch-brands__heading {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--efmch-gold-head);
  text-align: center;
}

/* The gold hairlines either side of the caption. Decorative, so ::before /
   ::after rather than markup. */
.efm-conversion-home .efm-ch-brands__heading::before,
.efm-conversion-home .efm-ch-brands__heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(206, 169, 83, 0.5), transparent);
}

.efm-conversion-home .efm-ch-brands__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vw, 54px);
  margin-top: 26px;
}

.efm-conversion-home .efm-ch-brands__word {
  display: block;
  font-size: clamp(12px, 1.35vw, 15px);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--efmch-t-fast);
}

.efm-conversion-home .efm-ch-brands__item:hover .efm-ch-brands__word {
  color: var(--efmch-ink-strong);
}

.efm-conversion-home .efm-ch-brands__item--more .efm-ch-brands__word {
  color: var(--efmch-muted);
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: none;
}

.efm-conversion-home .efm-ch-brands__logo {
  max-height: 34px;
  width: auto;
  opacity: 0.78;
  filter: grayscale(1) brightness(1.7);
  transition: opacity var(--efmch-t-fast), filter var(--efmch-t-fast);
}

.efm-conversion-home .efm-ch-brands__item:hover .efm-ch-brands__logo {
  opacity: 1;
  filter: grayscale(0.15) brightness(1.1);
}

.efm-conversion-home .efm-ch-brands__disclaimer {
  margin-top: 22px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.42);
  max-width: 78ch;
  margin-inline: auto;
}


/* -------------------------------------------------------------------------
   6. Trust bar
   ------------------------------------------------------------------------- */

.efm-conversion-home .efm-ch-trust {
  background: linear-gradient(180deg, #0a0b0d 0%, #000000 100%);
  border-top: 1px solid var(--efmch-line);
  padding-block: clamp(22px, 2.8vw, 32px);
}

.efm-conversion-home .efm-ch-trust__list {
  display: grid;
  gap: 20px;
}

.efm-conversion-home .efm-ch-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.efm-conversion-home .efm-ch-trust__icon {
  display: inline-flex;
  color: var(--efmch-gold-head);
  font-size: 22px;
  flex: none;
  margin-top: 1px;
}

.efm-conversion-home .efm-ch-trust__title {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--efmch-gold-head);
}

.efm-conversion-home .efm-ch-trust__text {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--efmch-muted);
}


/* -------------------------------------------------------------------------
   7. How it works
   ------------------------------------------------------------------------- */

.efm-conversion-home .efm-ch-how {
  background: var(--efmch-black);
  padding-block: clamp(46px, 6vw, 84px);
}

.efm-conversion-home .efm-ch-how__list {
  display: grid;
  gap: 20px;
  margin-top: clamp(28px, 3.4vw, 44px);
  counter-reset: efmch-step;
}

.efm-conversion-home .efm-ch-how__step {
  position: relative;
  padding: 30px 26px 28px;
  border: 1px solid var(--efmch-line);
  border-radius: var(--efmch-radius-lg);
  background: linear-gradient(180deg, var(--efmch-panel) 0%, var(--efmch-graphite) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 242, 198, 0.06);
  transition: border-color var(--efmch-t-med), box-shadow var(--efmch-t-med);
}

.efm-conversion-home .efm-ch-how__step:hover {
  border-color: rgba(206, 169, 83, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 198, 0.1),
    var(--efmch-glow);
}

.efm-conversion-home .efm-ch-how__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(206, 169, 83, 0.5);
  background: rgba(0, 0, 0, 0.4);
  color: var(--efmch-gold-head);
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 16px;
}

.efm-conversion-home .efm-ch-how__title {
  font-size: 18px;
}

.efm-conversion-home .efm-ch-how__text {
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--efmch-muted);
}


/* -------------------------------------------------------------------------
   8. Why Eflyer
   ------------------------------------------------------------------------- */

.efm-conversion-home .efm-ch-why {
  background: linear-gradient(180deg, #000000 0%, #0a0b0d 100%);
  border-top: 1px solid var(--efmch-line);
  padding-block: clamp(46px, 6vw, 84px);
}

.efm-conversion-home .efm-ch-why__list {
  display: grid;
  gap: 22px 30px;
  margin-top: clamp(28px, 3.4vw, 44px);
}

.efm-conversion-home .efm-ch-why__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: start;
}

.efm-conversion-home .efm-ch-why__check {
  grid-row: 1 / 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(206, 169, 83, 0.14);
  border: 1px solid rgba(206, 169, 83, 0.44);
  color: var(--efmch-gold-head);
  font-size: 12px;
  margin-top: 1px;
}

.efm-conversion-home .efm-ch-why__title {
  grid-column: 2 / 3;
  font-size: 16px;
}

.efm-conversion-home .efm-ch-why__text {
  grid-column: 2 / 3;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--efmch-muted);
}


/* -------------------------------------------------------------------------
   9. Testimonials
   ------------------------------------------------------------------------- */

.efm-conversion-home .efm-ch-quotes {
  background: var(--efmch-black);
  border-top: 1px solid var(--efmch-line);
  padding-block: clamp(46px, 6vw, 84px);
}

.efm-conversion-home .efm-ch-quotes__list {
  display: grid;
  gap: 20px;
  margin-top: clamp(28px, 3.4vw, 44px);
}

.efm-conversion-home .efm-ch-quotes__item {
  padding: 26px 24px;
  border: 1px solid var(--efmch-line);
  border-radius: var(--efmch-radius-lg);
  background: linear-gradient(180deg, var(--efmch-panel) 0%, var(--efmch-graphite) 100%);
}

.efm-conversion-home .efm-ch-quotes__item figure { margin: 0; }

.efm-conversion-home .efm-ch-quotes__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--efmch-ink);
}

.efm-conversion-home .efm-ch-quotes__text::before { content: "\201C"; }
.efm-conversion-home .efm-ch-quotes__text::after  { content: "\201D"; }

.efm-conversion-home .efm-ch-quotes__by {
  margin-top: 14px;
  font-size: 13px;
}

.efm-conversion-home .efm-ch-quotes__name {
  display: block;
  font-weight: 700;
  color: var(--efmch-gold-head);
}

.efm-conversion-home .efm-ch-quotes__meta {
  display: block;
  margin-top: 2px;
  color: var(--efmch-muted);
}


/* -------------------------------------------------------------------------
   10. Final CTA
   ------------------------------------------------------------------------- */

.efm-conversion-home .efm-ch-final {
  position: relative;
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(74, 60, 28, 0.55) 0%, rgba(0, 0, 0, 0) 68%),
    linear-gradient(180deg, #0a0b0d 0%, #000000 100%);
  border-top: 1px solid var(--efmch-line-strong);
  padding-block: clamp(50px, 6.4vw, 92px);
}

.efm-conversion-home .efm-ch-final__inner {
  text-align: center;
}

.efm-conversion-home .efm-ch-final__title {
  font-size: clamp(25px, 3.6vw, 42px);
  max-width: 20ch;
  margin-inline: auto;
}

.efm-conversion-home .efm-ch-final__sub {
  margin: 15px auto 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--efmch-muted);
}

.efm-conversion-home .efm-ch-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

.efm-conversion-home .efm-ch-final__returning {
  margin-top: 20px;
  font-size: 13.5px;
}

.efm-conversion-home .efm-ch-final__returning a {
  color: var(--efmch-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  transition: color var(--efmch-t-fast), text-decoration-color var(--efmch-t-fast);
}

.efm-conversion-home .efm-ch-final__returning a:hover {
  color: var(--efmch-gold-head);
  text-decoration-color: var(--efmch-gold-head);
}


/* =========================================================================
   RESPONSIVE
   Mobile-first: everything above is the phone layout. The queries below add
   columns as room appears. There is no max-width query anywhere in this file,
   which is what keeps the mobile path from being "desktop that collapsed".
   ========================================================================= */

/* --- 560px: two-up strips ------------------------------------------------ */
@media (min-width: 560px) {

  .efm-conversion-home .efm-ch-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .efm-conversion-home .efm-ch-cred__list,
  .efm-conversion-home .efm-ch-trust__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 780px: benefit trio goes horizontal, cards go two-up ---------------- */
@media (min-width: 780px) {

  /* Enough room now for the long CTA labels to sit on one line. */
  .efm-conversion-home .efm-ch-btn {
    white-space: nowrap;
  }

  .efm-conversion-home .efm-ch-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  /* Hairline separators between the three benefits, matching the mockup.
     :not(:first-child) rather than :not(:last-child) so no trailing rule. */
  .efm-conversion-home .efm-ch-benefit + .efm-ch-benefit {
    border-left: 1px solid var(--efmch-line);
    padding-left: 16px;
    margin-left: 16px;
  }

  .efm-conversion-home .efm-ch-benefit {
    gap: 11px;
  }

  .efm-conversion-home .efm-ch-benefit__icon {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  /* Tightened so each of the three titles holds ONE line at desktop, as the
     mockup does. A two-line title in one column and a one-line title in the
     next makes the row look accidental. */
  .efm-conversion-home .efm-ch-benefit__title {
    font-size: 12.5px;
    letter-spacing: 0.05em;
  }

  .efm-conversion-home .efm-ch-benefit__text {
    font-size: 13.5px;
  }

  .efm-conversion-home .efm-ch-how__list,
  .efm-conversion-home .efm-ch-quotes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .efm-conversion-home .efm-ch-why__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .efm-conversion-home .efm-ch-market__form {
    flex-wrap: nowrap;
  }
}

/* --- 1020px: the real desktop composition -------------------------------- */
@media (min-width: 1020px) {

  .efm-conversion-home .efm-ch-hero {
    padding-block: calc(var(--efmch-header-h, 0px) + clamp(44px, 4.2vw, 62px)) clamp(26px, 2.6vw, 38px);
    /* CROP CONTROL AT WIDE WIDTHS.
       The hero asset is 2.00:1 but this container runs 2.3:1 at 1440 and 4.1:1
       at 2560, so object-fit:cover scales the image BY WIDTH and shears the
       height. Measured visible band: 86% at 1440, 65% at 1920, 49% at 2560 -
       which is why the product artwork low in the frame was being chopped as
       the market strip began.

       v1.7.689 RAISED THIS. The previous floor, clamp(540px, 30vw, 780px), did
       not bind at 1440 or 1920 - content governed at ~620px - so the shear at
       those widths was untouched and the flyer's lower edge was being cut by
       the market strip. The floor now binds at every desktop width:

         width   img h   band before -> after     bottom crop before -> after
         1440    720     620 (86%)  -> 660 (92%)      50px -> 27px
         1920    960     624 (65%)  -> 730 (76%)     168px -> 101px
         2560   1280     768 (60%)  -> 860 (67%)     256px -> 185px

       (bottom crop = (1 - band) x img h x (1 - hero-pos-y), pos-y now 56%.)

       This reveals more of the photograph without touching its SCALE, its
       centring, or the full-bleed architecture. It cannot fix scale: content
       composited INTO the asset renders at (its fraction of the image) x (the
       rendered image width), and under object-fit:cover the rendered width is
       pinned to the container width. Shrinking it means shrinking the whole
       photograph, which breaks full-bleed. The remedy for scale is a wider
       source crop - see the module docblock for the spec. */
    min-height: var(--efmch-hero-min-h);
    display: flex;
    align-items: center;
  }

  /* THE WIDE-SCREEN FIX.
     This gradient's stops used to be percentages of the VIEWPORT, so as the
     screen grew the dark zone grew with it while the content stayed capped at
     the shell - the copy ended up floating in a black field on the left while
     the house drifted right, and the optical centre went with it.

     The stops are now expressed as offsets from the LEFT EDGE OF THE SHELL
     via calc(var(--efmch-shell-left) + Npx). The protected dark zone therefore
     covers exactly the copy column and its gutter at 1440, 1920 and 2560
     alike, and the photograph is revealed from the same point relative to the
     composition every time. Full-bleed background, centred geometry. */
  .efm-conversion-home .efm-ch-hero__scrim {
    background:
      /* LAYER 1 - the only layer that dims for readability, and it dims the
         LEFT ONLY. Strong behind the copy, hard fade through the middle, and
         genuinely ZERO from ~62% of the shell rightward. It previously climbed
         back to 0.38 at the far right, which was quietly re-dimming the house
         at the exact place the photograph is meant to sell. */
      linear-gradient(90deg,
        rgba(0, 0, 0, 0.95) 0,
        rgba(0, 0, 0, 0.92) calc(var(--efmch-shell-left) + 40px),
        rgba(0, 0, 0, 0.86) calc(var(--efmch-shell-left) + var(--efmch-scrim-hold)),
        rgba(0, 0, 0, 0.40) calc(var(--efmch-shell-left) + var(--efmch-scrim-fade)),
        rgba(0, 0, 0, 0.08) calc(var(--efmch-shell-left) + var(--efmch-scrim-soft)),
        rgba(0, 0, 0, 0) calc(var(--efmch-shell-left) + var(--efmch-scrim-clear)),
        rgba(0, 0, 0, 0) 100%),

      /* LAYER 2 - a bottom vignette for the section transition, nothing more.
         What used to be here was a FULL-WIDTH top-and-bottom wash at 0.5/0.55,
         which is what actually muted the photograph: combined with layer 1 the
         sample flyer was sitting under roughly 60% total black. Top darkening
         is gone entirely (the site header supplies its own background) and the
         bottom now peaks at 0.26, starting low enough that the flyer artwork
         stays clear. */
      linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 72%,
        rgba(0, 0, 0, 0.26) 100%);
  }

  .efm-conversion-home .efm-ch-hero__inner {
    /* Copy column gets the larger share: the headline, the benefit trio and
       the two CTAs all have to sit comfortably, and a cramped column is what
       pushes the buttons onto separate rows.

       v1.7.686: 1.18 -> 1.28fr (727px -> 801px at 1440), which is what pays for
       the larger headline. The hero IMAGE and its scrim are untouched - only
       the text column grows - but note the copy now reaches ~61% of the
       viewport where the scrim is lighter, so this is the one change in this
       pass worth a second look on the real photo. */
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
    gap: 36px;
    align-items: center;
    width: 100%;
  }

  .efm-conversion-home .efm-ch-hero__aside {
    align-content: end;
    justify-items: end;
    align-self: end;
  }

  .efm-conversion-home .efm-ch-hero__actions .efm-ch-btn {
    flex: 0 1 auto;
  }

  /* Market strip: lede left, control right, hairline between. */
  .efm-conversion-home .efm-ch-market__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 40px;
  }

  .efm-conversion-home .efm-ch-market__control {
    padding-left: 40px;
    border-left: 1px solid var(--efmch-line);
  }

  .efm-conversion-home .efm-ch-market__hint,
  .efm-conversion-home .efm-ch-market__trust {
    margin-top: 12px;
  }

  .efm-conversion-home .efm-ch-cred__list,
  .efm-conversion-home .efm-ch-trust__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .efm-conversion-home .efm-ch-cred__item + .efm-ch-cred__item {
    border-left: 1px solid var(--efmch-line-dark);
    padding-left: 26px;
    margin-left: 26px;
  }

  .efm-conversion-home .efm-ch-trust__item + .efm-ch-trust__item {
    border-left: 1px solid var(--efmch-line);
    padding-left: 24px;
    margin-left: 24px;
  }

  .efm-conversion-home .efm-ch-how__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .efm-conversion-home .efm-ch-why__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .efm-conversion-home .efm-ch-quotes__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- 1280px: a little more air ------------------------------------------- */
@media (min-width: 1280px) {

  .efm-conversion-home .efm-ch-hero__inner {
    gap: 56px;
  }

  .efm-conversion-home .efm-ch-hero__sub {
    font-size: 18px;
  }
}


/* =========================================================================
   PREFERENCES + PRINT
   ========================================================================= */

/* Motion in this module is limited to hover transitions, so honouring the
   preference costs nothing visually. The page is designed to look right with
   all motion off; that is a requirement, not a nicety. */
@media (prefers-reduced-motion: reduce) {

  .efm-conversion-home,
  .efm-conversion-home *,
  .efm-conversion-home *::before,
  .efm-conversion-home *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Higher-contrast preference: firm up the hairlines and drop the glows. */
@media (prefers-contrast: more) {

  .efm-conversion-home {
    --efmch-line:        rgba(255, 242, 198, 0.34);
    --efmch-line-strong: rgba(255, 242, 198, 0.5);
    --efmch-muted:       rgba(255, 255, 255, 0.82);
    --efmch-muted-dark:  #33363b;
    --efmch-glow:        none;
    --efmch-glow-strong: none;
  }
}

@media print {

  .efm-conversion-home {
    background: #ffffff;
    color: #000000;
  }

  .efm-conversion-home .efm-ch-hero__media,
  .efm-conversion-home .efm-ch-market,
  .efm-conversion-home .efm-ch-final__actions,
  .efm-conversion-home .efm-ch-hero__actions {
    display: none;
  }

  .efm-conversion-home h1,
  .efm-conversion-home h2,
  .efm-conversion-home h3,
  .efm-conversion-home .efm-ch-gold {
    color: #000000;
  }
}