/*
 * The landing page's styles — all of them. The page used to carry them itself, as 430 `style`
 * attributes and six `<style>` blocks, which left no way to recolour it for the other product and
 * nothing a reader could scan. Every rule below renders what the markup rendered before; the
 * palette is the one thing that varies.
 *
 * Two cascade layers, and their order is load-bearing. `global` is what the `<style>` blocks
 * were, less the fonts and keyframes that sit outside both: element defaults, the open and
 * closed states, the responsive header. `elements` is what each element's own `style` attribute
 * was. An attribute beat every stylesheet
 * rule whatever its specificity, so the per-element rules sit in the later layer and beat the
 * global ones in the same way — `a:hover` still underlines a muted navigation link without
 * recolouring it, because the link's own colour wins. A global rule that must beat an element's
 * own rule says `!important`, as it always did. So a state rule — an open FAQ row, a chosen step —
 * stays in `global`: moved into the element rule it modifies, it would lose to that rule and
 * silently stop working.
 *
 * The palette. The page is written as the Direct product, and `:root` holds its colours. Every
 * brand colour below is a token written as an RGB triplet, so a rule can add its own alpha —
 * `rgb(var(--lp-accent) / 0.28)`. nginx stamps `data-variant` on the root as it serves the page as
 * the other product (BUG-KYYM), and the block keyed on that value swaps the tokens. The neutrals —
 * the ink, the greys, the dark navy panels — are shared by both products and stay literal.
 */

@layer global, elements;

@layer global {
  /* Direct — MyHome Prompts: the colours this page was designed in. */
  :root {
    /* #006ab4 — buttons, bars, glows */
    --lp-accent: 0 106 180;
    /* text and icons on an accent fill */
    --lp-on-accent: 255 255 255;
    /* the accent as text, icons and outlines on a light background */
    --lp-accent-text: 0 106 180;
    /* #005694 — a link under the pointer */
    --lp-accent-text-hover: 0 86 148;
    /* #98bc23 — the second accent: on the dark panels, and in the wave bars */
    --lp-highlight: 152 188 35;
    /* #7fa016 — the second accent as text on white */
    --lp-highlight-text: 127 160 22;
    /* #5c7510 — text on a pale highlight chip */
    --lp-highlight-deep: 92 117 16;
    /* #1d2a05 — text on a highlight fill */
    --lp-on-highlight: 29 42 5;
    /* #b6d94a — highlight text on a dark chip */
    --lp-highlight-soft: 182 217 74;
    /* #eaf3fb — the glow behind the hero */
    --lp-tint: 234 243 251;
    /* #f4f9fd — a selected card */
    --lp-tint-soft: 244 249 253;
  }

  /*
   * Agency — WFG Prompts: built on the gold #beaf86 and the cream #fbecd6 its installation serves
   * as brand colours, with the shades a page needs around them. The gold is too light to carry
   * text: on white it does not reach half the contrast body text needs. So the accent as text is
   * a bronze of the same hue, and text on a gold fill is the page's ink rather than white — the
   * choice the WFG application already makes on its own buttons. The second accent, which Direct
   * spends on the dark panels, is a lighter champagne here, so the two still read apart.
   *
   * Every text colour below clears 4.5:1 against what it sits on; the landing page's test
   * measures it, so a new shade cannot quietly make the page unreadable.
   */
  :root[data-variant='agency'] {
    --lp-accent: 190 175 134;
    --lp-on-accent: 10 31 48;
    --lp-accent-text: 133 103 50;
    --lp-accent-text-hover: 107 82 40;
    --lp-highlight: 224 204 149;
    --lp-highlight-text: 133 103 50;
    --lp-highlight-deep: 107 82 40;
    --lp-on-highlight: 10 31 48;
    --lp-highlight-soft: 251 236 214;
    --lp-tint: 251 236 214;
    --lp-tint-soft: 253 248 239;
  }
}

/* ============================================================
   Current by MyHome — Fonts
   Brand fonts: Cocomat (logo/display), Your Love (script), Montserrat (body)

   SUBSTITUTIONS (flagged to user — supply originals to finalize):
   · Cocomat   → Jost        (light geometric round sans; closest free match)
   · Your Love → Sacramento  (monoline handwritten script; closest free match)
   · Montserrat → Montserrat  (exact — available on Google Fonts)
   ============================================================ */
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/landing/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/landing/fonts/jost-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/landing/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/landing/fonts/jost-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/landing/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/landing/fonts/jost-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/landing/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/landing/fonts/jost-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/landing/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/landing/fonts/jost-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/landing/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/landing/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/landing/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/landing/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/landing/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/landing/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/landing/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/landing/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/landing/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/landing/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@keyframes wv {
  0%,
  100% {
    transform: scaleY(0.2);
  }
  50% {
    transform: scaleY(1);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes typeline {
  0%,
  1% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  14% {
    clip-path: inset(0 0 0 0);
  }
  30% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  32%,
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
  }
}
@keyframes caret {
  0%,
  44% {
    opacity: 1;
  }
  45%,
  100% {
    opacity: 0;
  }
}
@keyframes sendpulse {
  0%,
  26% {
    box-shadow: 0 0 0 0 rgb(var(--lp-accent) / 0);
    transform: scale(1);
  }
  30% {
    box-shadow: 0 0 0 7px rgb(var(--lp-accent) / 0.16);
    transform: scale(1.07);
  }
  38%,
  100% {
    box-shadow: 0 0 0 0 rgb(var(--lp-accent) / 0);
    transform: scale(1);
  }
}
@keyframes chipglow {
  0%,
  4% {
    border-color: rgba(10, 31, 48, 0.12);
    background: #fff;
  }
  10% {
    border-color: rgb(var(--lp-accent) / 0.45);
    background: rgb(var(--lp-tint-soft));
  }
  18%,
  100% {
    border-color: rgba(10, 31, 48, 0.12);
    background: #fff;
  }
}
@keyframes micspeak {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(var(--lp-accent) / 0.32);
  }
  6% {
    transform: scale(1.07);
    box-shadow: 0 0 0 9px rgb(var(--lp-accent) / 0);
  }
  12% {
    transform: scale(1.01);
    box-shadow: 0 0 0 0 rgb(var(--lp-accent) / 0.32);
  }
  18% {
    transform: scale(1.06);
    box-shadow: 0 0 0 10px rgb(var(--lp-accent) / 0);
  }
  24% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(var(--lp-accent) / 0.32);
  }
  30% {
    transform: scale(1.08);
    box-shadow: 0 0 0 11px rgb(var(--lp-accent) / 0);
  }
  36% {
    transform: scale(1.01);
    box-shadow: 0 0 0 0 rgb(var(--lp-accent) / 0.28);
  }
  42% {
    transform: scale(1.04);
    box-shadow: 0 0 0 8px rgb(var(--lp-accent) / 0);
  }
  48%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(var(--lp-accent) / 0);
  }
}
@keyframes wvfade {
  0%,
  42% {
    opacity: 1;
  }
  52%,
  100% {
    opacity: 0.22;
  }
}
@keyframes sendarm {
  0%,
  40% {
    background: #fff;
    border-color: rgba(10, 31, 48, 0.12);
    color: #8d99a8;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(var(--lp-accent) / 0);
  }
  47% {
    background: rgb(var(--lp-accent));
    border-color: rgb(var(--lp-accent));
    color: rgb(var(--lp-on-accent));
    transform: scale(1.09);
    box-shadow: 0 0 0 7px rgb(var(--lp-accent) / 0.16);
  }
  54%,
  86% {
    background: rgb(var(--lp-accent));
    border-color: rgb(var(--lp-accent));
    color: rgb(var(--lp-on-accent));
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(var(--lp-accent) / 0);
  }
  92%,
  100% {
    background: #fff;
    border-color: rgba(10, 31, 48, 0.12);
    color: #8d99a8;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgb(var(--lp-accent) / 0);
  }
}
@keyframes dots {
  0%,
  20% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0.25;
  }
}

@layer global {
  html,
  body {
    height: 100%;
    margin: 0;
  }
  #dc-root,
  #dc-root > .sc-host {
    height: 100%;
  }
  html {
    scroll-behavior: smooth;
    /* The sticky header's height, so a jump to a section lands below it rather than under it. */
    scroll-padding-top: 69px;
  }
  body {
    margin: 0;
    background: #fff;
    color: #0a1f30;
    font-family: Montserrat, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  * {
    box-sizing: border-box;
  }
  a {
    color: rgb(var(--lp-accent-text));
    text-decoration: none;
  }
  a:hover {
    color: rgb(var(--lp-accent-text-hover));
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
    }
  }
  .lp-faq > summary {
    display: block;
    cursor: pointer;
    list-style: none;
  }
  .lp-faq > summary::-webkit-details-marker {
    display: none;
  }
  .lp-n {
    color: rgb(179, 188, 198);
  }
  .lp-q {
    font-weight: 400;
    color: rgb(47, 65, 80);
  }
  .lp-i {
    color: rgb(141, 153, 168);
    transform: rotate(0deg);
  }
  .lp-faq[open] .lp-n {
    color: rgb(var(--lp-accent-text));
  }
  .lp-faq[open] .lp-q {
    font-weight: 500;
    color: rgb(10, 31, 48);
  }
  .lp-faq[open] .lp-i {
    color: rgb(var(--lp-accent-text));
    transform: rotate(135deg);
  }
  /*
   * An answer folds open and shut instead of appearing and vanishing in one frame. With one entry
   * open at a time the answer closing and the one opening move together, so the list no longer
   * jumps under the pointer. The height travels through a single grid row, from nothing to the
   * answer's height: Safari cannot animate a height to `auto`, and a grid row it can. The row's
   * floor is zero rather than the answer's own size, or the answer's top margin would hold it a
   * few pixels open; each answer is one paragraph, the row's only item. The answer keeps its own
   * height and the row clips it — stretched to the row instead, it is folded away in one frame by
   * Safari, which then animates only the margin. `content-visibility` is listed so a closing
   * answer stays drawn until it has folded away — the browser hides a closed entry's content
   * through that property, at the first frame unless told to wait.
   */
  .lp-faq::details-content {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    align-items: start;
    overflow: hidden;
    opacity: 0;
    transition:
      grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      content-visibility 0.3s allow-discrete;
  }
  .lp-faq[open]::details-content {
    grid-template-rows: minmax(0, 1fr);
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .lp-faq::details-content {
      transition: none;
    }
  }
  /* Pinned mid-screen: a click on a row focuses its radio, and a radio left where it sits in
     the page drags the page up to it once the top of its block has scrolled off the screen. */
  .lp-reasons > input,
  .lp-steps > input {
    position: fixed;
    top: 50%;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .lp-reason-state,
  .lp-step-state {
    display: none;
  }
  #lp-reason-1:checked ~ .lp-reason-state[data-i='1'],
  #lp-reason-2:checked ~ .lp-reason-state[data-i='2'],
  #lp-reason-3:checked ~ .lp-reason-state[data-i='3'],
  #lp-step-1:checked ~ .lp-step-state[data-i='1'],
  #lp-step-2:checked ~ .lp-step-state[data-i='2'],
  #lp-step-3:checked ~ .lp-step-state[data-i='3'] {
    display: grid;
  }
  .lp-reasons label,
  .lp-steps label {
    cursor: pointer;
  }
  /* The header is one row and never wraps. Below roughly 860px the three links no longer fit
     beside the two buttons and the row folds onto two lines; the links are jumps to sections
     of this same page, which a phone visitor reaches by scrolling, so they are what goes and
     the buttons — the only things here that lead somewhere else — are what stays.
     `!important` because each element's own rule sits in the later `elements` layer,
     where it beats anything in this one that does not say so. */
  header nav a {
    white-space: nowrap;
  }
  @media (max-width: 860px) {
    .lp-nav-links {
      display: none !important;
    }
  }
  @media (max-width: 720px) {
    header a[href='/login'],
    header a[href='/signup'] {
      padding: 0 14px !important;
    }
  }
  @media (max-width: 720px) {
    header nav {
      padding-left: 16px !important;
      padding-right: 16px !important;
      gap: 12px !important;
    }
  }
  @media (max-width: 420px) {
    header img {
      height: 28px !important;
    }
    header a[href='/login'],
    header a[href='/signup'] {
      height: 38px !important;
      padding: 0 12px !important;
      font-size: 12.5px !important;
    }
  }
}

@layer elements {
  .lp-page {
    width: 100%;
    overflow-x: clip;
  }

  /* Header — navigation, Log in and Get Started */
  .lp-header {
    position: sticky;
    top: 0px;
    z-index: 50;
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(10, 31, 48, 0.07);
  }
  .lp-header-nav {
    max-width: 1220px;
    margin: 0px auto;
    padding: 13px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .lp-header-home {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .lp-header-logo {
    height: 32px;
    width: auto;
    display: block;
  }
  /* The header was laid out around the Direct logo, about 3:1 wide. The WFG one is 7:1, and on
     a phone it pushed Get Started off the screen, where the page's own clip hid it. There the
     logo gives way instead: its link may shrink, and the image scales down inside its box
     rather than being squashed. With room to spare, as on a desktop, nothing moves. */
  :root[data-variant='agency'] .lp-header-home {
    flex-shrink: 1;
    min-width: 0;
  }
  :root[data-variant='agency'] .lp-header-logo {
    min-width: 0;
    object-fit: contain;
    object-position: left center;
  }
  .lp-header-spacer {
    flex: 1 1 0%;
  }
  .lp-header-links {
    display: flex;
    align-items: center;
    gap: 24px;
    font:
      500 13.5px / 1 Montserrat,
      sans-serif;
  }
  .lp-link-muted {
    color: rgb(102, 118, 138);
  }
  .lp-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .lp-header-login {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0px 18px;
    border: 1px solid rgba(10, 31, 48, 0.16);
    border-radius: 10px;
    font:
      600 13.5px / 1 Montserrat,
      sans-serif;
    color: rgb(10, 31, 48);
  }
  .lp-header-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0px 20px;
    background: rgb(var(--lp-accent));
    border-radius: 10px;
    font:
      600 13.5px / 1 Montserrat,
      sans-serif;
    color: rgb(var(--lp-on-accent));
    box-shadow: rgb(var(--lp-accent) / 0.22) 0px 6px 18px;
  }

  /* Hero — headline, subcopy and the AI Assistant demo panel */
  .lp-hero {
    position: relative;
    padding: clamp(52px, 6.5vw, 100px) 24px clamp(60px, 7vw, 96px);
    background:
      radial-gradient(
        1100px 520px at 80% -10%,
        rgb(var(--lp-tint)) 0%,
        rgb(var(--lp-tint) / 0) 62%
      ),
      rgb(255, 255, 255);
  }
  .lp-hero-grid {
    position: absolute;
    inset: 0px;
    background-image:
      linear-gradient(rgba(10, 31, 48, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(10, 31, 48, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(880px 420px at 74% 4%, rgb(0, 0, 0) 0%, transparent 76%);
    pointer-events: none;
  }
  .lp-hero-inner {
    position: relative;
    max-width: 1220px;
    margin: 0px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
    gap: clamp(40px, 5vw, 68px);
    align-items: center;
  }
  .lp-hero-copy {
    min-width: 0px;
    animation: 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal both running rise;
  }
  .lp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 10px;
    border: 1px solid rgb(var(--lp-accent) / 0.2);
    background: rgb(var(--lp-accent) / 0.05);
    border-radius: 999px;
    margin-bottom: 26px;
  }
  .lp-hero-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 14px;
  }
  .lp-hero-wave-bar {
    width: 2px;
    height: 100%;
    background: rgb(var(--lp-accent));
    border-radius: 2px;
    animation: 1.25s ease-in-out 0s infinite normal none running wv;
  }
  .lp-hero-wave-bar--highlight {
    background: rgb(var(--lp-highlight));
  }
  .lp-hero-wave-bar:nth-child(2) {
    animation-delay: 0.14s;
  }
  .lp-hero-wave-bar:nth-child(3) {
    animation-delay: 0.28s;
  }
  .lp-hero-wave-bar:nth-child(4) {
    animation-delay: 0.42s;
  }
  .lp-hero-badge-label {
    font:
      600 10.5px / 1 Montserrat,
      sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(var(--lp-accent-text));
  }
  .lp-hero-title {
    margin: 0px 0px 24px;
    font-family: Jost, Montserrat, sans-serif;
    font-weight: 300;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.018em;
    color: rgb(10, 31, 48);
    text-wrap: pretty;
  }
  .lp-accent-emphasis {
    font-weight: 500;
    color: rgb(var(--lp-accent-text));
  }
  .lp-hero-lead {
    margin: 0px 0px 34px;
    max-width: 540px;
    font:
      400 16.5px / 1.62 Montserrat,
      sans-serif;
    color: rgb(74, 90, 107);
    text-wrap: pretty;
  }
  .lp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
  }
  .lp-hero-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0px 28px;
    background: rgb(var(--lp-accent));
    border-radius: 12px;
    font:
      600 15px / 1 Montserrat,
      sans-serif;
    color: rgb(var(--lp-on-accent));
    box-shadow: rgb(var(--lp-accent) / 0.26) 0px 12px 30px;
  }
  .lp-hero-secondary {
    display: flex;
    align-items: center;
    height: 54px;
    padding: 0px 22px;
    border: 1px solid rgba(10, 31, 48, 0.14);
    border-radius: 12px;
    font:
      600 15px / 1 Montserrat,
      sans-serif;
    color: rgb(10, 31, 48);
  }
  .lp-hero-note {
    margin: 26px 0px 0px;
    font:
      500 12.5px / 1.6 Montserrat,
      sans-serif;
    color: rgb(141, 153, 168);
  }
  .lp-hero-demo {
    min-width: 0px;
    position: relative;
    animation: 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s 1 normal both running rise;
  }
  .lp-demo-card {
    background: rgb(255, 255, 255);
    border: 1px solid rgba(10, 31, 48, 0.09);
    border-radius: 18px;
    box-shadow:
      rgba(10, 31, 48, 0.32) 0px 30px 70px -30px,
      rgba(10, 31, 48, 0.04) 0px 2px 6px;
    overflow: hidden;
  }
  .lp-demo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(10, 31, 48, 0.07);
    background: rgb(255, 255, 255);
  }
  .lp-demo-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0px;
  }
  .lp-demo-title {
    font:
      600 14px / 1 Montserrat,
      sans-serif;
    color: rgb(var(--lp-highlight-text));
  }
  .lp-demo-subtitle {
    font:
      400 12px / 1 Montserrat,
      sans-serif;
    color: rgb(153, 164, 176);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lp-demo-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }
  .lp-demo-usage {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border: 1px solid rgba(10, 31, 48, 0.1);
    border-radius: 8px;
    font:
      600 11px / 1 Montserrat,
      sans-serif;
    color: rgb(102, 118, 138);
  }
  .lp-demo-voice {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgb(var(--lp-accent));
    border-radius: 999px;
    font:
      600 11px / 1 Montserrat,
      sans-serif;
    color: rgb(var(--lp-on-accent));
  }
  .lp-demo-body {
    padding: 44px 26px 26px;
    background: rgb(245, 247, 250);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .lp-block {
    display: block;
  }
  /* An image rather than drawn inline, so nginx can swap in the other product's own mark — a
     square one, fitted into the same box (BUG-KYYM). */
  img.lp-product-mark {
    object-fit: contain;
  }
  .lp-demo-greeting {
    margin: 0px;
    max-width: 340px;
    text-align: center;
    font-family: Jost, sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.24;
    color: rgb(10, 31, 48);
  }
  .lp-demo-composer {
    width: 100%;
    max-width: 470px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .lp-demo-input {
    flex: 1 1 0%;
    min-width: 0px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0px 14px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(var(--lp-accent) / 0.4);
    border-radius: 10px;
    box-shadow: rgb(var(--lp-accent) / 0.07) 0px 0px 0px 3px;
  }
  .lp-demo-typelines {
    position: relative;
    flex: 1 1 0%;
    min-width: 0px;
    height: 17px;
    overflow: hidden;
  }
  .lp-demo-typeline {
    position: absolute;
    inset: 0px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font:
      400 13px / 1 Montserrat,
      sans-serif;
    color: rgb(74, 90, 107);
    opacity: 0;
    animation: 16.5s linear 0s infinite normal none running typeline;
  }
  .lp-demo-typeline:nth-child(2) {
    animation-delay: 5.5s;
  }
  .lp-demo-typeline:nth-child(3) {
    animation-delay: 11s;
  }
  .lp-demo-mic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgb(var(--lp-accent));
    animation: 5.5s linear 0s infinite normal none running micspeak;
  }
  .lp-demo-mic-icon {
    stroke: rgb(var(--lp-on-accent));
  }
  .lp-demo-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 1px solid rgba(10, 31, 48, 0.12);
    border-radius: 50%;
    background: rgb(255, 255, 255);
    color: rgb(141, 153, 168);
    animation: 5.5s cubic-bezier(0.22, 1, 0.36, 1) 0s infinite normal none running sendarm;
  }
  .lp-demo-listening {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .lp-demo-dots {
    display: flex;
    align-items: center;
    gap: 3px;
  }
  .lp-demo-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgb(var(--lp-accent));
    animation: 1.4s ease-in-out 0s infinite normal none running dots;
  }
  .lp-demo-dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  .lp-demo-dot:nth-child(3) {
    animation-delay: 0.4s;
  }
  .lp-demo-listening-label {
    font:
      600 10.5px / 1 Montserrat,
      sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--lp-accent-text));
  }
  .lp-demo-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .lp-demo-chip {
    padding: 8px 13px;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(10, 31, 48, 0.12);
    border-radius: 999px;
    font:
      500 11.5px / 1 Montserrat,
      sans-serif;
    color: rgb(74, 90, 107);
  }
  /* A chip lights up while the line it answers is typed in the box above, so each delay
     is the matching typeline's. */
  .lp-demo-chip--line-1 {
    animation: 16.5s cubic-bezier(0.22, 1, 0.36, 1) 0s infinite normal none running chipglow;
  }
  .lp-demo-chip--line-2 {
    animation: 16.5s cubic-bezier(0.22, 1, 0.36, 1) 5.5s infinite normal none running chipglow;
  }
  .lp-demo-chip--line-3 {
    animation: 16.5s cubic-bezier(0.22, 1, 0.36, 1) 11s infinite normal none running chipglow;
  }

  /* Tagline band — better, faster */
  .lp-tagline {
    padding: clamp(40px, 4.5vw, 64px) 24px;
    background: rgb(10, 31, 48);
  }
  .lp-tagline-inner {
    max-width: 1000px;
    margin: 0px auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 44px);
    text-align: center;
  }
  .lp-tagline-text {
    margin: 0px;
    font-family: Jost, sans-serif;
    font-weight: 300;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.22;
    color: rgb(255, 255, 255);
    text-wrap: pretty;
  }
  .lp-highlight-emphasis {
    font-weight: 500;
    color: rgb(var(--lp-highlight));
  }
  .lp-tagline-tm {
    font-size: 0.5em;
    vertical-align: super;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
  }

  /* How it works — three steps; the radios switch the open step and its panel */
  .lp-section {
    padding: clamp(64px, 7vw, 104px) 24px;
    background: rgb(255, 255, 255);
  }
  .lp-container {
    max-width: 1220px;
    margin: 0px auto;
  }
  .lp-steps-intro {
    max-width: 620px;
    margin-bottom: clamp(34px, 4vw, 52px);
  }
  .lp-eyebrow {
    margin: 0px 0px 14px;
    font:
      600 10.5px / 1 Montserrat,
      sans-serif;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgb(var(--lp-accent-text));
  }
  .lp-section-title {
    margin: 0px;
    font-family: Jost, sans-serif;
    font-weight: 300;
    font-size: clamp(32px, 3.9vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: rgb(10, 31, 48);
    text-wrap: pretty;
  }
  .lp-title-emphasis {
    font-weight: 500;
  }
  .lp-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: clamp(32px, 4vw, 60px);
    align-items: start;
  }
  .lp-steps-list {
    min-width: 0px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lp-step-card {
    cursor: pointer;
    padding: 20px 22px;
    border-radius: 14px;
    border: 1px solid rgba(10, 31, 48, 0.09);
    background: rgb(255, 255, 255);
    box-shadow: none;
    transition:
      background 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.22s,
      box-shadow 0.22s;
  }
  .lp-step-card--active {
    border: 1px solid rgb(var(--lp-accent) / 0.28);
    background: rgb(var(--lp-tint-soft));
    box-shadow: rgb(var(--lp-accent) / 0.45) 0px 12px 28px -18px;
  }
  .lp-item-head {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .lp-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    font:
      600 14px / 1 Montserrat,
      sans-serif;
    background: rgba(10, 31, 48, 0.06);
    color: rgb(102, 118, 138);
  }
  .lp-step-number--active {
    background: rgb(var(--lp-accent));
    color: rgb(var(--lp-on-accent));
  }
  .lp-step-title {
    font:
      600 16px / 1.2 Montserrat,
      sans-serif;
    color: rgb(10, 31, 48);
  }
  .lp-step-text {
    margin: 12px 0px 0px 48px;
    font:
      400 14.5px / 1.62 Montserrat,
      sans-serif;
    color: rgb(74, 90, 107);
    text-wrap: pretty;
  }
  .lp-step-cta {
    align-self: flex-start;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 50px;
    padding: 0px 24px;
    background: rgb(var(--lp-highlight));
    border-radius: 12px;
    font:
      600 14.5px / 1 Montserrat,
      sans-serif;
    color: rgb(var(--lp-on-highlight));
  }
  .lp-step-preview {
    min-width: 0px;
    background: rgb(245, 247, 250);
    border: 1px solid rgba(10, 31, 48, 0.08);
    border-radius: 18px;
    padding: clamp(18px, 2.4vw, 28px);
  }
  .lp-preview-window {
    background: rgb(255, 255, 255);
    border: 1px solid rgba(10, 31, 48, 0.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: rgba(10, 31, 48, 0.35) 0px 14px 34px -22px;
  }
  .lp-preview-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(10, 31, 48, 0.07);
  }
  .lp-preview-title {
    font:
      600 13px / 1 Montserrat,
      sans-serif;
    color: rgb(var(--lp-highlight-text));
  }
  .lp-preview-subtitle {
    font:
      400 11.5px / 1 Montserrat,
      sans-serif;
    color: rgb(153, 164, 176);
  }
  .lp-preview-body {
    padding: 18px;
    background: rgb(245, 247, 250);
  }
  .lp-preview-card {
    padding: 18px;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(10, 31, 48, 0.08);
    border-radius: 12px;
  }
  .lp-preview-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }
  .lp-preview-card-title {
    margin: 0px;
    font:
      600 13.5px / 1.3 Montserrat,
      sans-serif;
    color: rgb(10, 31, 48);
  }
  .lp-preview-card-meta {
    margin: 0px;
    font:
      500 11.5px / 1 Montserrat,
      sans-serif;
    color: rgb(153, 164, 176);
  }
  .lp-preview-question {
    margin: 0px 0px 8px;
    font:
      600 12.5px / 1.5 Montserrat,
      sans-serif;
    color: rgb(74, 90, 107);
  }
  .lp-preview-answer {
    padding: 12px 14px;
    border: 1px solid rgba(10, 31, 48, 0.1);
    border-radius: 10px;
    font:
      400 12.5px / 1.6 Montserrat,
      sans-serif;
    color: rgb(102, 118, 138);
  }
  .lp-preview-next-row {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0px 18px;
  }
  .lp-preview-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(10, 31, 48, 0.12);
    border-radius: 50%;
  }
  .lp-voice-profile {
    margin-top: 12px;
    padding: 16px 18px;
    background: rgb(10, 31, 48);
    border-radius: 12px;
  }
  .lp-voice-profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .lp-voice-profile-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 18px;
    flex: 0 0 auto;
  }
  .lp-voice-profile-bar {
    width: 2.5px;
    height: 100%;
    background: rgb(var(--lp-accent));
    border-radius: 2px;
    animation: 1.1s ease-in-out 0s infinite normal none running wv;
  }
  .lp-voice-profile-bar--highlight {
    background: rgb(var(--lp-highlight));
  }
  .lp-voice-profile-bar:nth-child(2) {
    animation-delay: 0.12s;
  }
  .lp-voice-profile-bar:nth-child(3) {
    animation-delay: 0.24s;
  }
  .lp-voice-profile-bar:nth-child(4) {
    animation-delay: 0.36s;
  }
  .lp-voice-profile-bar:nth-child(5) {
    animation-delay: 0.48s;
  }
  .lp-min-w-0 {
    min-width: 0px;
  }
  .lp-voice-profile-label {
    margin: 0px;
    font:
      600 9.5px / 1 Montserrat,
      sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(var(--lp-highlight));
  }
  .lp-voice-profile-name {
    margin: 3px 0px 0px;
    font-family: Jost, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    color: rgb(255, 255, 255);
  }
  .lp-voice-profile-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .lp-trait {
    padding: 6px 11px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font:
      500 10.5px / 1 Montserrat,
      sans-serif;
    color: rgba(255, 255, 255, 0.86);
  }
  .lp-trait--highlight {
    background: rgb(var(--lp-highlight) / 0.16);
    border-color: rgb(var(--lp-highlight) / 0.3);
    font-weight: 600;
    color: rgb(var(--lp-highlight-soft));
  }
  .lp-preview-tabs {
    display: flex;
    gap: 18px;
    padding: 0px 18px;
    overflow: hidden;
    white-space: nowrap;
  }
  .lp-preview-tab {
    padding: 14px 0px 10px;
    border-bottom: 2px solid transparent;
    font:
      500 12px / 1 Montserrat,
      sans-serif;
    color: rgb(141, 153, 168);
  }
  .lp-preview-tab--active {
    border-bottom-color: rgb(var(--lp-accent-text));
    font-weight: 600;
    color: rgb(var(--lp-accent-text));
  }
  .lp-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .lp-prompt-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(10, 31, 48, 0.08);
    border-radius: 12px;
  }
  .lp-grow {
    flex: 1 1 0%;
    min-width: 0px;
  }
  .lp-prompt-meta {
    margin: 4px 0px 0px;
    font:
      400 12px / 1.4 Montserrat,
      sans-serif;
    color: rgb(141, 153, 168);
  }
  .lp-prompt-use {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 32px;
    padding: 0px 14px;
    border: 1px solid rgb(var(--lp-accent-text));
    border-radius: 8px;
    font:
      600 11.5px / 1 Montserrat,
      sans-serif;
    color: rgb(var(--lp-accent-text));
  }
  .lp-preview-composer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 13px 16px;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(10, 31, 48, 0.12);
    border-radius: 12px;
  }
  .lp-preview-composer-text {
    flex: 1 1 0%;
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font:
      400 12.5px / 1 Montserrat,
      sans-serif;
    color: rgb(153, 164, 176);
  }
  .lp-preview-send {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgb(var(--lp-accent));
  }
  .lp-preview-send-icon {
    stroke: rgb(var(--lp-on-accent));
  }
  .lp-listing-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(10, 31, 48, 0.07);
  }
  .lp-listing-icon {
    display: block;
    flex: 0 0 auto;
    stroke: rgb(var(--lp-accent-text));
  }
  .lp-listing-title {
    margin: 0px;
    font:
      600 13px / 1.2 Montserrat,
      sans-serif;
    color: rgb(10, 31, 48);
  }
  .lp-listing-subtitle {
    margin: 1px 0px 0px;
    font:
      400 11.5px / 1.25 Montserrat,
      sans-serif;
    color: rgb(153, 164, 176);
  }
  .lp-listing-badge {
    flex: 0 0 auto;
    padding: 5.5px 10px;
    border-radius: 999px;
    background: rgb(var(--lp-highlight) / 0.12);
    font:
      600 11px / 1 Montserrat,
      sans-serif;
    color: rgb(var(--lp-highlight-deep));
  }
  .lp-listing-headline {
    margin: 0px;
    font-family: Jost, sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.3;
    color: rgb(10, 31, 48);
  }
  .lp-listing-text {
    margin: 10px 0px 0px;
    font:
      400 13px / 1.65 Montserrat,
      sans-serif;
    color: rgb(74, 90, 107);
  }
  .lp-listing-text--next {
    margin-top: 8px;
  }
  .lp-listing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
    padding-top: 14px;
    border-top: 1px solid rgba(10, 31, 48, 0.07);
  }
  .lp-listing-action {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0px 14px;
    border: 1px solid rgba(10, 31, 48, 0.14);
    border-radius: 8px;
    font:
      600 11.5px / 1 Montserrat,
      sans-serif;
    color: rgb(74, 90, 107);
  }
  .lp-listing-action--primary {
    border: none;
    background: rgb(var(--lp-accent));
    color: rgb(var(--lp-on-accent));
  }

  /* Why MyHome Prompts — three reasons; the radios above switch the visible one */
  .lp-section-tinted {
    padding: clamp(64px, 7vw, 104px) 24px;
    background: rgb(247, 250, 252);
    border-top: 1px solid rgba(10, 31, 48, 0.06);
    border-bottom: 1px solid rgba(10, 31, 48, 0.06);
  }
  .lp-reasons-intro {
    max-width: 660px;
    margin-bottom: clamp(34px, 4vw, 52px);
  }
  .lp-reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: clamp(32px, 4vw, 60px);
    align-items: start;
  }
  .lp-reason-row {
    cursor: pointer;
    padding: 22px 2px;
    border-bottom: 1px solid rgba(10, 31, 48, 0.1);
  }
  .lp-reason-bar {
    width: 0px;
    height: 3px;
    flex: 0 0 auto;
    border-radius: 3px;
    background: rgb(var(--lp-accent));
    transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .lp-reason-bar--active {
    width: 28px;
  }
  .lp-reason-title {
    flex: 1 1 0%;
    min-width: 0px;
    font-family: Jost, Montserrat, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    color: rgb(63, 80, 96);
  }
  .lp-reason-title--active {
    font-weight: 500;
    color: rgb(10, 31, 48);
  }
  .lp-reason-chevron {
    display: flex;
    flex: 0 0 auto;
    color: rgb(141, 153, 168);
    transform: rotate(0deg);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .lp-reason-chevron--active {
    transform: rotate(180deg);
  }
  .lp-reason-text {
    margin: 14px 0px 0px;
    max-width: 520px;
    font:
      400 14.5px / 1.66 Montserrat,
      sans-serif;
    color: rgb(74, 90, 107);
    text-wrap: pretty;
  }
  .lp-reason-panel {
    min-width: 0px;
    position: relative;
    padding: clamp(20px, 2.6vw, 32px);
    background: rgb(10, 31, 48);
    border-radius: 20px;
    overflow: hidden;
  }
  .lp-reason-panel-glow {
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgb(var(--lp-accent) / 0.28);
    filter: blur(10px);
  }
  .lp-reason-panel-body {
    position: relative;
  }
  .lp-reason-panel-label {
    margin: 0px 0px 6px;
    font:
      600 10.5px / 1 Montserrat,
      sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(var(--lp-highlight));
  }
  .lp-reason-panel-title {
    margin: 0px 0px 20px;
    font-family: Jost, sans-serif;
    font-weight: 300;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.25;
    color: rgb(255, 255, 255);
    text-wrap: pretty;
  }
  .lp-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
  }
  .lp-check-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    stroke: rgb(var(--lp-highlight));
  }
  .lp-check-text {
    font:
      500 13.5px / 1.55 Montserrat,
      sans-serif;
    color: rgba(255, 255, 255, 0.88);
  }

  /* Testimonial */
  .lp-quote {
    padding: clamp(64px, 7vw, 100px) 24px;
    background: rgb(255, 255, 255);
  }
  .lp-quote-inner {
    max-width: 880px;
    margin: 0px auto;
    text-align: center;
  }
  .lp-quote-wave {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 26px;
    margin-bottom: 26px;
  }
  .lp-quote-bar {
    width: 3px;
    height: 40%;
    background: rgb(var(--lp-accent));
    border-radius: 3px;
  }
  .lp-quote-bar--mid {
    height: 70%;
  }
  .lp-quote-bar--peak {
    height: 100%;
    background: rgb(var(--lp-highlight));
  }
  .lp-quote-text {
    margin: 0px 0px 28px;
    font-family: Jost, sans-serif;
    font-weight: 300;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.26;
    letter-spacing: -0.01em;
    color: rgb(10, 31, 48);
    text-wrap: pretty;
  }
  .lp-quote-author {
    margin: 0px 0px 32px;
    font:
      600 13.5px / 1 Montserrat,
      sans-serif;
    letter-spacing: 0.06em;
    color: rgb(102, 118, 138);
  }
  .lp-quote-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0px 26px;
    background: rgb(var(--lp-accent));
    border-radius: 12px;
    font:
      600 14.5px / 1 Montserrat,
      sans-serif;
    color: rgb(var(--lp-on-accent));
    box-shadow: rgb(var(--lp-accent) / 0.24) 0px 12px 30px;
  }

  /* Closing call to action */
  .lp-cta {
    position: relative;
    padding: clamp(72px, 8vw, 120px) 24px;
    background: rgb(10, 31, 48);
    overflow: hidden;
  }
  .lp-cta-glow {
    position: absolute;
    inset: 0px;
    background:
      radial-gradient(
        760px 420px at 18% 0%,
        rgb(var(--lp-accent) / 0.42) 0%,
        rgb(var(--lp-accent) / 0) 70%
      ),
      radial-gradient(
        620px 360px at 92% 100%,
        rgb(var(--lp-highlight) / 0.22) 0%,
        rgb(var(--lp-highlight) / 0) 70%
      );
    pointer-events: none;
  }
  .lp-cta-inner {
    position: relative;
    max-width: 820px;
    margin: 0px auto;
    text-align: center;
  }
  .lp-cta-title {
    margin: 0px 0px 22px;
    font-family: Jost, sans-serif;
    font-weight: 300;
    font-size: clamp(34px, 4.6vw, 58px);
    line-height: 1.06;
    letter-spacing: -0.018em;
    color: rgb(255, 255, 255);
    text-wrap: pretty;
  }
  .lp-cta-lead {
    margin: 0px auto 36px;
    max-width: 640px;
    font:
      400 16px / 1.65 Montserrat,
      sans-serif;
    color: rgba(255, 255, 255, 0.76);
    text-wrap: pretty;
  }
  .lp-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .lp-cta-primary {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0px 30px;
    background: rgb(255, 255, 255);
    border-radius: 12px;
    font:
      600 15px / 1 Montserrat,
      sans-serif;
    color: rgb(10, 31, 48);
  }
  .lp-cta-secondary {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0px 24px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    font:
      600 15px / 1 Montserrat,
      sans-serif;
    color: rgb(255, 255, 255);
  }
  .lp-cta-note {
    margin: 26px 0px 0px;
    font:
      500 12.5px / 1.6 Montserrat,
      sans-serif;
    color: rgba(255, 255, 255, 0.5);
  }

  /* FAQ — one <details> per question, all answers present */
  .lp-faq-grid {
    max-width: 1220px;
    margin: 0px auto;
    display: grid;
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
  .lp-faq-intro {
    min-width: 0px;
  }
  .lp-faq-title {
    margin: 0px 0px 16px;
    font-family: Jost, sans-serif;
    font-weight: 300;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: rgb(10, 31, 48);
    text-wrap: pretty;
  }
  .lp-faq-lead {
    margin: 0px;
    max-width: 340px;
    font:
      400 14.5px / 1.66 Montserrat,
      sans-serif;
    color: rgb(102, 118, 138);
    text-wrap: pretty;
  }
  .lp-faq-list {
    min-width: 0px;
    border-top: 1px solid rgba(10, 31, 48, 0.1);
  }
  /* Side by side from 1096px: the heading in the first of three columns, the questions across the
     other two, and the heading holding its place while they scroll past. That is where three 320px
     columns and their gaps first fit, and where the grid already switched before the switch was
     written down. Below it the heading sits above the questions and must not stick — it stayed
     pinned over them as they scrolled by, and the questions spanned a second column that was not
     there, wider than the page (BUG-E220). */
  @media (min-width: 1096px) {
    .lp-faq-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lp-faq-intro {
      position: sticky;
      top: 96px;
    }
    .lp-faq-list {
      grid-column: span 2;
    }
  }
  .lp-faq-item {
    padding: 22px 4px;
    border-bottom: 1px solid rgba(10, 31, 48, 0.1);
    transition: background 0.2s;
  }
  .lp-faq-row {
    display: flex;
    align-items: baseline;
    gap: 18px;
  }
  .lp-faq-number {
    flex: 0 0 auto;
    width: 24px;
    font:
      600 11px / 1.5 Montserrat,
      sans-serif;
    letter-spacing: 0.06em;
  }
  .lp-faq-question {
    flex: 1 1 0%;
    min-width: 0px;
    font-family: Jost, Montserrat, sans-serif;
    font-size: 19px;
    line-height: 1.35;
    text-wrap: pretty;
    transition: color 0.2s;
  }
  .lp-faq-icon {
    display: flex;
    flex: 0 0 auto;
    margin-top: 4px;
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      color 0.2s;
  }
  .lp-faq-answer {
    margin: 12px 0px 0px 42px;
    max-width: 640px;
    font:
      400 14.5px / 1.72 Montserrat,
      sans-serif;
    color: rgb(74, 90, 107);
    text-wrap: pretty;
  }

  /* Footer */
  .lp-footer {
    padding: clamp(40px, 4.5vw, 56px) 24px;
    background: rgb(247, 250, 252);
    border-top: 1px solid rgba(10, 31, 48, 0.07);
  }
  .lp-footer-inner {
    max-width: 1220px;
    margin: 0px auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
  }
  .lp-footer-logo {
    height: 30px;
    width: auto;
    display: block;
  }
  .lp-footer-spacer {
    flex: 1 1 0%;
    min-width: 20px;
  }
  .lp-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    font:
      500 12.5px / 1 Montserrat,
      sans-serif;
  }
  .lp-footer-copyright {
    margin: 0px;
    width: 100%;
    font:
      400 12px / 1.6 Montserrat,
      sans-serif;
    color: rgb(153, 164, 176);
  }
}