/*
 * ll-video-cta.v3.css — v3 visual-parity rebuild of the top, mid and footer cards.
 *
 * Loaded AFTER ll-video-cta.v2.css and scoped entirely to .ll-cta--v3, so the
 * modal keeps v2's styling untouched.
 * Child selectors are written `.ll-cta--v3[data-ll-placement] .x` (0,3,0) on
 * purpose: v2's placement rules reach (0,3,0), and v3 must win by order.
 *
 * Built from the locked references:
 *   design/reference/premium-video-cta-v3-desktop-mid-locked.png
 *   design/reference/premium-video-cta-v3-desktop-footer-locked.png
 *   design/reference/premium-video-cta-v3-mobile-locked.png
 *   design/reference/premium-video-cta-v3-top-desktop-locked.png
 *   design/reference/premium-video-cta-v3-top-mobile-locked.png
 *   design/reference/premium-video-cta-v3-mid-mobile-locked.png
 *
 * One unit system. Every v3 dimension is expressed in REFERENCE PIXELS times
 * var(--u) = card width / reference width, so each card is the reference
 * composition scaled as one object: proportions, spacing and hierarchy cannot
 * drift apart at different column widths. Geometry lives in
 * design/v3_layout.json; the block between the GEOMETRY markers below is
 * generated from it by tools/build_v3_geometry.py — edit the JSON, not the
 * block.
 *
 * Layers, back to front:
 *   0  .llv3-plate     the reference atmosphere (clouds, stars, portal, glow)
 *                      with every foreground element removed
 *   3  .llc-lauri      Lauri's real photograph
 *   4  .llc-stage      live chassis + real app video
 *   6  copy            live HTML text
 *   7  .llc-action     live HTML button
 *   20 ::after         the thin cyan card border
 */

/* ====================================================================== */
/* Fonts — self-hosted, latin subset, OFL. See vendor/fonts/README.v3.md.   */
/* ====================================================================== */

@font-face {
  font-family: "LLv3 Serif";
  src: url("/wp-content/uploads/ll-video-cta/v3/static/fonts/llv3-serif.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "LLv3 Sans";
  src: url("/wp-content/uploads/ll-video-cta/v3/static/fonts/llv3-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "LLv3 UI";
  src: url("/wp-content/uploads/ll-video-cta/v3/static/fonts/llv3-ui-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "LLv3 UI";
  src: url("/wp-content/uploads/ll-video-cta/v3/static/fonts/llv3-ui-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "LLv3 Script";
  src: url("/wp-content/uploads/ll-video-cta/v3/static/fonts/llv3-script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

/* ====================================================================== */
/* Article images on phones                                                */
/* ====================================================================== */
/*
 * A floated article image on a phone leaves a 312px column with a few words
 * per line beside it. WordPress marks every inserted image with an align
 * class, so those are stacked: block, centred, never floated, and the text
 * always starts below.
 *
 * Scope: this stylesheet is enqueued only on single published posts (gate 2 in
 * the mu-plugin), so no Page, archive or the homepage is affected. The
 * selectors name the align classes only, which is why the CTA card's artwork
 * (.llv3-*, .llc-*), the consultation ad (.ll-consult-ad__img) and the
 * related-posts thumbnails (.crp_thumb) are all left exactly as they are.
 *
 * height:auto with the width/height attributes still present keeps the
 * intrinsic ratio, so nothing is stretched and nothing is upscaled past its
 * own source: max-width caps at the column, it never enlarges.
 */
@media (max-width: 767px) {
  .entry-content img.alignleft,
  .entry-content img.alignright,
  .entry-content img.aligncenter,
  .entry-content img.alignnone {
    float: none !important;
    clear: both !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ====================================================================== */
/* Which card shows where                                                  */
/* ====================================================================== */

/* The mid card is emitted twice: one v3 composition per breakpoint. display:none never intersects, so the
 * hidden twin initialises nothing, loads no media and fires no impression. */
@media (min-width: 768px) {
  .ll-cta.llv3-only-mobile { display: none !important; }
}
@media (max-width: 767px) {
  .ll-cta.llv3-only-desktop { display: none !important; }

  /* Mobile footer reveal. v2's stylesheet still ships the production hotfix
   * (.ll-cta[data-ll-placement="footer"] { display:none !important }); the
   * v3 footer is the design that hotfix was waiting for, so it — and only
   * it — is shown. Higher specificity wins against that !important. */
  .ll-cta.ll-cta--v3[data-ll-placement="footer"] {
    display: block !important;
    height: auto !important;
    /* 32px, matching the top creative. At 24px this creative's shadow ran
       straight into the body text (0px of clean background) while the top
       creative had 17px, so the same slot spaced differently depending on
       which creative the picker chose. */
    margin: 32px auto !important;
    padding: 0 !important;
  }
}

/* ====================================================================== */
/* Card shell                                                              */
/* ====================================================================== */

.ll-cta.ll-cta--v3 {
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  width: 100%;
  max-width: 960px;
  height: auto;
  min-height: 0;
  margin: 32px auto;
  padding: 0;
  text-align: left;
  color: #f6f4ee;
  background: #020a1a;
  /* The halo used to paint 50px below the card while the gap to the article
     was only 32px (24px for the footer-layout creative on phones), so the
     shadow ran into the body text and the slot read as one dead grey band with
     no clean separation. Measured on dev2 at 390px: 0px of clean background.
     Tightened until the shadow paints ~13px below the box, which — with the
     32px margin both creatives now share — leaves ~28px of clean white before
     the first line of text, measured in rendered pixels at 390px. Colour,
     opacity, direction and the card's own artwork are unchanged; only the
     reach of the blur is. */
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.85);
  font-family: "LLv3 Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The thin cyan border, over every layer so nothing can cover it. */
.ll-cta--v3::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 max(1px, calc(var(--u) * 2.2)) rgba(70, 184, 232, 0.95),
    inset 0 0 calc(var(--u) * 10) rgba(70, 184, 232, 0.18);
}

/* v2 atmosphere layers are replaced by the plate. */
.ll-cta--v3[data-ll-placement] .llc-bg,
.ll-cta--v3[data-ll-placement] .llc-atmos,
.ll-cta--v3[data-ll-placement] .llc-veil,
.ll-cta--v3[data-ll-placement] .llc-portal,
.ll-cta--v3[data-ll-placement] .llc-mobile-portal { display: none; }

.ll-cta--v3[data-ll-placement] .llv3-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.ll-cta--v3[data-ll-placement] .llv3-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Every foreground element is placed absolutely by the geometry block. */
.ll-cta--v3[data-ll-placement] .llc-copy { position: static; max-width: none; width: auto; min-width: 0; }

.ll-cta--v3[data-ll-placement] .llc-eyebrow-slot,
.ll-cta--v3[data-ll-placement] .llc-headline,
.ll-cta--v3[data-ll-placement] .llc-rule,
.ll-cta--v3[data-ll-placement] .llc-lede,
.ll-cta--v3[data-ll-placement] .llv3-script,
.ll-cta--v3[data-ll-placement] .llv3-swash,
.ll-cta--v3[data-ll-placement] .llv3-caps,
.ll-cta--v3[data-ll-placement] .llv3-flank,
.ll-cta--v3[data-ll-placement] .llv3-rule2 {
  position: absolute;
  z-index: 6;
  margin: 0;
  max-width: none;
}

/* ====================================================================== */
/* Lauri                                                                   */
/* ====================================================================== */

.ll-cta--v3[data-ll-placement] .llc-lauri {
  position: absolute;
  z-index: 3;
  margin: 0;
  max-width: none;
  filter: none;
  pointer-events: none;
}
.ll-cta--v3[data-ll-placement] .llc-lauri picture,
.ll-cta--v3[data-ll-placement] .llc-lauri img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ====================================================================== */
/* Type                                                                    */
/* ====================================================================== */

.ll-cta--v3[data-ll-placement] .llc-eyebrow {
  display: block;
  margin: 0;
  font-family: "LLv3 UI", "LLv3 Sans", sans-serif;
  font-weight: 500;
  font-size: 1em;
  line-height: 1;
  letter-spacing: inherit;
  text-transform: uppercase;
  white-space: nowrap;
  color: #33dbe4;
}

.ll-cta--v3[data-ll-placement] .llc-headline {
  font-family: "LLv3 Serif", Georgia, "Times New Roman", serif;
  font-weight: 600;
  color: #f7f5ef;
  white-space: nowrap;
  text-wrap: nowrap;
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(0, 4, 16, 0.55));
}

/* Authored lines. overflow:hidden is the reveal clip; the padding/negative
 * margin pair gives descenders and the W's overhang room without moving the
 * line box. */
.ll-cta--v3[data-ll-placement] .llc-line {
  display: block;
  overflow: hidden;
  padding: 0 0.12em 0.22em 0.06em;
  margin: 0 -0.12em -0.22em -0.06em;
}
.ll-cta--v3[data-ll-placement] .llc-line > span {
  display: inline-block;
  will-change: auto;
}

/* Cyan-to-violet accents, sampled from the reference glyphs. Each gradient
 * spans its own word run, as in the references. */
.ll-cta--v3[data-ll-placement] .llc-accent {
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ll-cta--v3[data-ll-placement] .llv3-grad-your {
  background-image: linear-gradient(90deg, #1fe8ef 0%, #33dcf1 45%, #5cb9f4 100%);
}
.ll-cta--v3[data-ll-placement] .llv3-grad-dream {
  background-image: linear-gradient(90deg, #22ecef 0%, #39d6f1 22%, #62b1f4 46%, #8b98f1 68%, #ab8bee 86%, #bf8ced 100%);
}
.ll-cta--v3[data-ll-placement] .llv3-grad-full {
  background-image: linear-gradient(90deg, #1eeeef 0%, #2ae6ef 30%, #4ccaf2 50%, #74a9f3 68%, #9a92f0 84%, #bb8eee 100%);
}

/* Top card: one gradient across "losing your car?", sampled per reference. */
.ll-cta--v3[data-ll-placement] .llv3-grad-top {
  background-image: linear-gradient(90deg, #03ecef 0%, #10e4ee 18%, #3bcaf1 32%, #7fb0f2 44%,
                                    #a4a1f1 52%, #b89bf2 66%, #cfa6f2 80%, #d2a6f0 100%);
}
@media (max-width: 767px) {
  .ll-cta--v3[data-ll-placement] .llv3-grad-top {
    background-image: linear-gradient(90deg, #2fe9f0 0%, #34e3f2 17%, #55c2f1 33%, #6dabf4 50%,
                                      #8197f7 66%, #9785f6 75%, #ad76e4 83%, #c27bf2 100%);
  }
}

/* Mid card, mobile: "your dream?" sampled from the mid mobile reference. */
.ll-cta--v3[data-ll-placement] .llv3-grad-midm {
  background-image: linear-gradient(90deg, #26eef1 0%, #1fe9ec 17%, #25e9f7 33%, #39d1f8 42%,
                                    #47c1f3 50%, #60b0f0 58%, #71a2ef 67%, #8496ee 75%,
                                    #9b8cf9 83%, #b67fef 100%);
}

/* Top mobile avatar: the real avatar in a cyan ring with a soft glow. */
.ll-cta--v3[data-ll-placement] .llv3-avatar {
  position: absolute;
  z-index: 6;
  display: block;
  margin: 0;
  max-width: none;
  box-sizing: border-box;
  border-radius: 50%;
  border: calc(var(--u) * 5) solid #2fd4e2;
  object-fit: cover;
  background: #0b1430;
  box-shadow: 0 0 calc(var(--u) * 16) rgba(47, 212, 226, 0.5);
}

.ll-cta--v3[data-ll-placement] .llc-rule {
  display: block;
  border-radius: 2px;
  background: linear-gradient(90deg, #f6f3fb 0%, #d9cff6 55%, #9fb4f5 100%);
}

.ll-cta--v3[data-ll-placement] .llc-lede {
  font-family: "LLv3 Sans", system-ui, sans-serif;
  font-weight: 400;
  color: #e7e6ef;
  white-space: nowrap;
  max-width: none;
}

.ll-cta--v3[data-ll-placement] .llv3-script {
  font-family: "LLv3 Script", cursive;
  font-weight: 400;
  color: #f1b1ec;
  white-space: nowrap;
  transform-origin: 0 0;
  text-shadow: 0 0 calc(var(--u) * 10) rgba(236, 120, 226, 0.45);
}

.ll-cta--v3[data-ll-placement] .llv3-swash { display: block; overflow: visible; }

.ll-cta--v3[data-ll-placement] .llv3-caps {
  font-family: "LLv3 UI", "LLv3 Sans", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ebe8f3;
}
.ll-cta--v3[data-ll-placement] .llv3-caps--row { color: #39d3de; }
.ll-cta--v3[data-ll-placement] .llv3-dot { display: inline-block; margin: 0 0.95em; }

.ll-cta--v3[data-ll-placement] .llv3-flank {
  display: block;
  border-radius: 2px;
  background: #3fc1e6;
}
.ll-cta--v3[data-ll-placement] .llv3-rule2 {
  display: block;
  border-radius: 2px;
  background: linear-gradient(90deg, #e0b6f4, #c6a4f1);
}

/* ====================================================================== */
/* CTA                                                                     */
/* ====================================================================== */

.ll-cta--v3[data-ll-placement] .llc-action {
  position: absolute;
  z-index: 7;
  display: block;
  margin: 0;
  width: auto;
}

.ll-cta--v3[data-ll-placement] .llc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 0 0.04em;
  border: 0;
  border-radius: 999px;
  font-family: "LLv3 UI", "LLv3 Sans", sans-serif;
  font-weight: 600;
  font-size: 1em;
  line-height: 1;
  letter-spacing: -0.004em;
  color: #0a101f;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.07) 44%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(90deg, #0ff6f2 0%, #33e6fa 32%, #52cdfd 64%, #57b2fc 100%);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 1.7) rgba(226, 250, 255, 0.78),
    inset 0 calc(var(--u) * -7) calc(var(--u) * 16) rgba(46, 120, 230, 0.20),
    0 0 calc(var(--u) * 24) rgba(34, 226, 250, 0.42),
    0 0 calc(var(--u) * 64) rgba(64, 176, 255, 0.24);
}
.ll-cta--v3[data-ll-placement] .llc-btn__label { white-space: nowrap; }
.ll-cta--v3[data-ll-placement] .llc-btn__chev {
  width: 0.92em;
  height: 0.92em;
  margin-left: 0.28em;
}
.ll-cta--v3[data-ll-placement] .llc-btn__chev path { stroke-width: 2.3; }

/* ====================================================================== */
/* Phone — the reference chassis: graphite frame with edge light, black    */
/* bezel, notch, side keys. The app screen inside is never filtered.       */
/* ====================================================================== */

.ll-cta--v3[data-ll-placement] .llc-stage {
  position: absolute;
  z-index: 4;
  display: block;
  min-width: 0;
  transform-style: preserve-3d;
}

.ll-cta--v3[data-ll-placement] .llc-phone {
  position: absolute;
  inset: 0;
  width: auto;
  box-sizing: border-box;
  border-radius: var(--llv3-radius);
  padding: var(--llv3-frame);
  background:
    linear-gradient(112deg,
      #eeeaf6 0%, #8d8b9d 3.5%, #34333f 11%, #17171e 30%,
      #101016 58%, #25232f 80%, #7c6fa8 93%, #e7dcff 100%);
  box-shadow:
    0 calc(var(--u) * 26) calc(var(--u) * 38) calc(var(--u) * -8) rgba(0, 0, 0, 0.78),
    calc(var(--u) * 12) calc(var(--u) * 10) calc(var(--u) * 34) rgba(0, 0, 0, 0.42),
    0 0 calc(var(--u) * 1.5) rgba(196, 176, 255, 0.55),
    0 0 calc(var(--u) * 22) rgba(120, 150, 255, 0.22);
}

/* Edge light on the frame ring (under the screen, so never over it). */
.ll-cta--v3[data-ll-placement] .llc-phone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.8) rgba(255, 255, 255, 0.34),
    inset calc(var(--u) * 1.4) calc(var(--u) * 1.4) calc(var(--u) * 1.6) rgba(255, 255, 255, 0.28),
    inset calc(var(--u) * -1.2) calc(var(--u) * -1.2) calc(var(--u) * 1.6) rgba(186, 160, 255, 0.30);
}

.ll-cta--v3[data-ll-placement] .llc-phone__viewport {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: var(--llv3-bezel) solid #030306;
  border-radius: calc(var(--llv3-radius) - var(--llv3-frame));
  overflow: hidden;
  background: #000;
}

/* The screen area is a few percent shorter than the recording's native
 * ratio; `cover` anchored to the bottom takes that from the top of the
 * recording, which is the app's empty header bar — never app content, and
 * never any width. */
.ll-cta--v3[data-ll-placement] .llc-phone__screen,
.ll-cta--v3[data-ll-placement] .llc-phone__still img {
  object-fit: cover;
  object-position: 50% 100%;
}

.ll-cta--v3[data-ll-placement] .llv3-notch {
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: 5;
  width: var(--llv3-notch-w);
  height: var(--llv3-notch-h);
  transform: translateX(-50%);
  background: #030306;
  border-radius: 0 0 calc(var(--llv3-notch-h) * 0.62) calc(var(--llv3-notch-h) * 0.62);
  pointer-events: none;
}
/* speaker grille + front camera */
.ll-cta--v3[data-ll-placement] .llv3-notch::before,
.ll-cta--v3[data-ll-placement] .llv3-notch::after {
  content: "";
  position: absolute;
  top: 38%;
  border-radius: 999px;
}
.ll-cta--v3[data-ll-placement] .llv3-notch::before {
  left: 30%;
  width: 34%;
  height: 16%;
  background: #1b1c26;
}
.ll-cta--v3[data-ll-placement] .llv3-notch::after {
  left: 72%;
  width: 7%;
  aspect-ratio: 1;
  top: 34%;
  background: radial-gradient(circle at 35% 35%, #3a4468, #0a0c14 70%);
}

.ll-cta--v3[data-ll-placement] .llc-phone__speaker,
.ll-cta--v3[data-ll-placement] .llc-phone__camera { display: none; }
.ll-cta--v3[data-ll-placement] .llc-phone__glare { display: none; }

/* Side keys: silent + two volume on the left, power on the right. */
.ll-cta--v3[data-ll-placement] .llc-phone__power,
.ll-cta--v3[data-ll-placement] .llc-phone__vol,
.ll-cta--v3[data-ll-placement] .llv3-key {
  position: absolute;
  z-index: 0;
  width: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 1.5);
  background: linear-gradient(90deg, #5d5b6c, #1f1e27 60%, #8b84a8);
}
.ll-cta--v3[data-ll-placement] .llc-phone__power { right: calc(var(--u) * -2.2); left: auto; top: 26%; height: 14%; }
.ll-cta--v3[data-ll-placement] .llv3-key--silent  { left: calc(var(--u) * -2.2); top: 15%; height: 4.5%; }
.ll-cta--v3[data-ll-placement] .llc-phone__vol    { left: calc(var(--u) * -2.2); right: auto; top: 23%; height: 8.5%; }
.ll-cta--v3[data-ll-placement] .llv3-key--down    { left: calc(var(--u) * -2.2); top: 33.5%; height: 8.5%; }

/* ====================================================================== */
/* Entrance — v3 resting-state fixes                                       */
/* ====================================================================== */

/* v2 hides the whole headline and the eyebrow text until the entrance has
 * finished, although the timeline animates the lines and the eyebrow slot —
 * so the headline popped in at the end. For v3 the animated pieces carry the
 * pre-entrance state instead, and the line reveal is actually visible. */
.ll-cta--v3[data-ll-anim="pending"] .llc-headline,
.ll-cta--v3[data-ll-anim="pending"] .llc-eyebrow { opacity: 1; }
.ll-cta--v3[data-ll-anim="pending"] .llc-line > span,
.ll-cta--v3[data-ll-anim="pending"] [data-llv3-reveal] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ll-cta--v3[data-ll-anim="pending"] .llc-line > span,
  .ll-cta--v3[data-ll-anim="pending"] [data-llv3-reveal] { opacity: 1 !important; }
}

/* ====================================================================== */
/* === GEOMETRY:START (generated by tools/build_v3_geometry.py) === */
/* mid — reference 1403x489 */
@media (min-width: 768px) {
  .ll-cta.ll-cta--v3[data-ll-placement="mid"] { aspect-ratio: 1403 / 489; --u: calc(100cqw / 1403); border-radius: 0.855% / 2.454%; }
  .ll-cta--v3[data-ll-placement="mid"] .llc-eyebrow-slot { left: calc(var(--u) * 55); top: calc(var(--u) * 70); font-size: calc(var(--u) * 20); line-height: 1; letter-spacing: 0.185em; text-align: left; }
  .ll-cta--v3[data-ll-placement="mid"] .llc-headline { left: calc(var(--u) * 51); top: calc(var(--u) * 106.69); font-size: calc(var(--u) * 68.35); line-height: 0.893; letter-spacing: -0.039em; text-align: left; }
  .ll-cta--v3[data-ll-placement="mid"] .llc-rule { left: calc(var(--u) * 58); top: calc(var(--u) * 321); width: calc(var(--u) * 51); height: calc(var(--u) * 2.4); }
  .ll-cta--v3[data-ll-placement="mid"] .llc-lede { left: calc(var(--u) * 54.71); top: calc(var(--u) * 341.09); font-size: calc(var(--u) * 24.12); line-height: 1.197; letter-spacing: -0.04em; text-align: left; }
  .ll-cta--v3[data-ll-placement="mid"] .llv3-script { left: calc(var(--u) * 1139.37); top: calc(var(--u) * 142.32); font-size: calc(var(--u) * 45.61); line-height: 0.86; letter-spacing: 0em; width: calc(var(--u) * 262); text-align: left; transform: rotate(-10deg); }
  .ll-cta--v3[data-ll-placement="mid"] .llv3-swash { left: calc(var(--u) * 1142); top: calc(var(--u) * 204); width: calc(var(--u) * 210); height: calc(var(--u) * 48); }
  .ll-cta--v3[data-ll-placement="mid"] .llc-action .llc-btn { padding: calc(var(--u) * 6) calc(var(--u) * 0) calc(var(--u) * 0) calc(var(--u) * 2); }
  .ll-cta--v3[data-ll-placement="mid"] .llc-action { left: calc(var(--u) * 1098); top: calc(var(--u) * 279); width: calc(var(--u) * 277); height: calc(var(--u) * 74); font-size: calc(var(--u) * 22.17); }
  .ll-cta--v3[data-ll-placement="mid"] .llv3-caps--mid { left: calc(var(--u) * 1122); top: calc(var(--u) * 391.44); font-size: calc(var(--u) * 16.11); line-height: 1.461; letter-spacing: 0.243em; width: calc(var(--u) * 230); text-align: center; }
  .ll-cta--v3[data-ll-placement="mid"] .llc-lauri { left: calc(var(--u) * 230); top: calc(var(--u) * 0); width: calc(var(--u) * 650); height: calc(var(--u) * 489); }
  .ll-cta--v3[data-ll-placement="mid"] .llc-stage { left: calc(var(--u) * 800); top: calc(var(--u) * 16); width: calc(var(--u) * 251); height: calc(var(--u) * 450); --llv3-frame: calc(var(--u) * 3.2); --llv3-bezel: calc(var(--u) * 8.5); --llv3-radius: calc(var(--u) * 40); --llv3-notch-w: calc(var(--u) * 96); --llv3-notch-h: calc(var(--u) * 26); transform: perspective(calc(var(--u) * 1500)) rotateX(7deg) rotateY(-9deg) rotateZ(0.6deg); }
}

/* footer — reference 1403x495 */
@media (min-width: 768px) {
  .ll-cta.ll-cta--v3[data-ll-placement="footer"] { aspect-ratio: 1403 / 495; --u: calc(100cqw / 1403); border-radius: 0.855% / 2.424%; }
  .ll-cta--v3[data-ll-placement="footer"] .llc-eyebrow-slot { left: calc(var(--u) * 419); top: calc(var(--u) * 39); font-size: calc(var(--u) * 19); line-height: 1; letter-spacing: 0.117em; text-align: left; }
  .ll-cta--v3[data-ll-placement="footer"] .llc-headline { left: calc(var(--u) * 418.38); top: calc(var(--u) * 72.02); font-size: calc(var(--u) * 54.35); line-height: 0.895; letter-spacing: 0em; text-align: left; }
  .ll-cta--v3[data-ll-placement="footer"] .llc-rule { left: calc(var(--u) * 450); top: calc(var(--u) * 241); width: calc(var(--u) * 48); height: calc(var(--u) * 2.4); }
  .ll-cta--v3[data-ll-placement="footer"] .llc-lede { left: calc(var(--u) * 448); top: calc(var(--u) * 259.76); font-size: calc(var(--u) * 20.62); line-height: 1.153; letter-spacing: -0.03em; text-align: left; }
  .ll-cta--v3[data-ll-placement="footer"] .llc-action .llc-btn { padding: calc(var(--u) * 2) calc(var(--u) * 0) calc(var(--u) * 0) calc(var(--u) * 10); }
  .ll-cta--v3[data-ll-placement="footer"] .llc-action { left: calc(var(--u) * 439); top: calc(var(--u) * 331); width: calc(var(--u) * 341); height: calc(var(--u) * 79); font-size: calc(var(--u) * 25.86); }
  .ll-cta--v3[data-ll-placement="footer"] .llv3-caps--row { left: calc(var(--u) * 449); top: calc(var(--u) * 452); font-size: calc(var(--u) * 15); line-height: 1; letter-spacing: 0.273em; width: calc(var(--u) * 420); text-align: left; }
  .ll-cta--v3[data-ll-placement="footer"] .llv3-caps--stack { left: calc(var(--u) * 1287); top: calc(var(--u) * 129.67); font-size: calc(var(--u) * 17.16); line-height: 1.763; letter-spacing: 0.12em; width: calc(var(--u) * 110); text-align: left; }
  .ll-cta--v3[data-ll-placement="footer"] .llv3-rule2 { left: calc(var(--u) * 1286); top: calc(var(--u) * 264); width: calc(var(--u) * 59); height: calc(var(--u) * 3); }
  .ll-cta--v3[data-ll-placement="footer"] .llc-lauri { left: calc(var(--u) * 0); top: calc(var(--u) * 0); width: calc(var(--u) * 500); height: calc(var(--u) * 495); }
  .ll-cta--v3[data-ll-placement="footer"] .llc-stage { left: calc(var(--u) * 921); top: calc(var(--u) * 24); width: calc(var(--u) * 240); height: calc(var(--u) * 447); --llv3-frame: calc(var(--u) * 3.2); --llv3-bezel: calc(var(--u) * 8.5); --llv3-radius: calc(var(--u) * 40); --llv3-notch-w: calc(var(--u) * 92); --llv3-notch-h: calc(var(--u) * 26); transform: perspective(calc(var(--u) * 1400)) rotateX(6deg) rotateY(-12deg) rotateZ(-3.4deg); }
  .ll-cta--v3[data-ll-placement="footer"] .llv3-flank--l { display: none; }
  .ll-cta--v3[data-ll-placement="footer"] .llv3-flank--r { display: none; }
}

/* mobile — reference 823x1778 */
@media (max-width: 767px) {
  .ll-cta.ll-cta--v3[data-ll-placement="footer"] { aspect-ratio: 823 / 1778; --u: calc(100cqw / 823); border-radius: 4.374% / 2.025%; }
  .ll-cta--v3[data-ll-placement="footer"] .llc-eyebrow-slot { left: calc(var(--u) * 179.5); top: calc(var(--u) * 34.98); font-size: calc(var(--u) * 28.46); line-height: 1; letter-spacing: 0.238em; width: calc(var(--u) * 470); text-align: center; }
  .ll-cta--v3[data-ll-placement="footer"] .llv3-flank--l { left: calc(var(--u) * 67); top: calc(var(--u) * 48); width: calc(var(--u) * 94); height: calc(var(--u) * 2.6); }
  .ll-cta--v3[data-ll-placement="footer"] .llv3-flank--r { left: calc(var(--u) * 663); top: calc(var(--u) * 48); width: calc(var(--u) * 94); height: calc(var(--u) * 2.6); }
  .ll-cta--v3[data-ll-placement="footer"] .llc-headline { left: calc(var(--u) * 82.5); top: calc(var(--u) * 597.06); font-size: calc(var(--u) * 96.21); line-height: 0.894; letter-spacing: -0.04em; width: calc(var(--u) * 660); text-align: center; }
  .ll-cta--v3[data-ll-placement="footer"] .llc-lede { left: calc(var(--u) * 84.5); top: calc(var(--u) * 890.79); font-size: calc(var(--u) * 37.32); line-height: 1.125; letter-spacing: -0.02em; width: calc(var(--u) * 660); text-align: center; }
  .ll-cta--v3[data-ll-placement="footer"] .llc-action .llc-btn { padding: calc(var(--u) * 0) calc(var(--u) * 0) calc(var(--u) * 0) calc(var(--u) * 34); }
  .ll-cta--v3[data-ll-placement="footer"] .llc-action { left: calc(var(--u) * 89); top: calc(var(--u) * 1524); width: calc(var(--u) * 646); height: calc(var(--u) * 116); font-size: calc(var(--u) * 38.42); }
  .ll-cta--v3[data-ll-placement="footer"] .llv3-caps--row { left: calc(var(--u) * 80.5); top: calc(var(--u) * 1689.25); font-size: calc(var(--u) * 23.85); line-height: 1; letter-spacing: 0.258em; width: calc(var(--u) * 666); text-align: center; }
  .ll-cta--v3[data-ll-placement="footer"] .llc-lauri { left: calc(var(--u) * 13); top: calc(var(--u) * 59); width: calc(var(--u) * 800); height: calc(var(--u) * 820); -webkit-mask-image: linear-gradient(180deg, #000 58.537%, transparent 75.61%); mask-image: linear-gradient(180deg, #000 58.537%, transparent 75.61%); }
  .ll-cta--v3[data-ll-placement="footer"] .llc-stage { left: calc(var(--u) * 188); top: calc(var(--u) * 1009); width: calc(var(--u) * 452); height: calc(var(--u) * 852); --llv3-frame: calc(var(--u) * 4.5); --llv3-bezel: calc(var(--u) * 13); --llv3-radius: calc(var(--u) * 74); --llv3-notch-w: calc(var(--u) * 196); --llv3-notch-h: calc(var(--u) * 38); transform: perspective(calc(var(--u) * 2600)); clip-path: inset(calc(var(--u) * -60) calc(var(--u) * -60) calc(var(--u) * 278) calc(var(--u) * -60)); }
  .ll-cta--v3[data-ll-placement="footer"] .llc-rule { display: none; }
  .ll-cta--v3[data-ll-placement="footer"] .llv3-caps--stack { display: none; }
  .ll-cta--v3[data-ll-placement="footer"] .llv3-rule2 { display: none; }
  .ll-cta--v3[data-ll-placement="footer"] .llv3-script { display: none; }
  .ll-cta--v3[data-ll-placement="footer"] .llv3-swash { display: none; }
  .ll-cta--v3[data-ll-placement="footer"] .llv3-caps--mid { display: none; }
}

/* top — reference 2038x771 */
@media (min-width: 768px) {
  .ll-cta.ll-cta--v3[data-ll-placement="top"] { aspect-ratio: 2038 / 771; --u: calc(100cqw / 2038); border-radius: 1.079% / 2.853%; }
  .ll-cta--v3[data-ll-placement="top"] .llc-eyebrow-slot { left: calc(var(--u) * 589.79); top: calc(var(--u) * 147.34); font-size: calc(var(--u) * 36.85); line-height: 1; letter-spacing: 0.216em; text-align: left; }
  .ll-cta--v3[data-ll-placement="top"] .llc-headline { left: calc(var(--u) * 592.94); top: calc(var(--u) * 217.77); font-size: calc(var(--u) * 80.52); line-height: 1.006; letter-spacing: -0.033em; text-align: left; }
  .ll-cta--v3[data-ll-placement="top"] .llc-action .llc-btn { padding: calc(var(--u) * 4) calc(var(--u) * 0) calc(var(--u) * 0) calc(var(--u) * 32); }
  .ll-cta--v3[data-ll-placement="top"] .llc-action { left: calc(var(--u) * 593); top: calc(var(--u) * 522); width: calc(var(--u) * 533); height: calc(var(--u) * 110); font-size: calc(var(--u) * 37); }
  .ll-cta--v3[data-ll-placement="top"] .llc-lauri { left: calc(var(--u) * 1150); top: calc(var(--u) * 0); width: calc(var(--u) * 888); height: calc(var(--u) * 771); }
  .ll-cta--v3[data-ll-placement="top"] .llc-stage { left: calc(var(--u) * 137); top: calc(var(--u) * 64); width: calc(var(--u) * 350); height: calc(var(--u) * 622); --llv3-frame: calc(var(--u) * 4); --llv3-bezel: calc(var(--u) * 12); --llv3-radius: calc(var(--u) * 58); --llv3-notch-w: calc(var(--u) * 140); --llv3-notch-h: calc(var(--u) * 32); transform: perspective(calc(var(--u) * 2200)); }
  .ll-cta--v3[data-ll-placement="top"] .llv3-avatar { display: none; }
  .ll-cta--v3[data-ll-placement="top"] .llv3-flank--l { display: none; }
  .ll-cta--v3[data-ll-placement="top"] .llv3-flank--r { display: none; }
}

/* top_mobile — reference 992x1503 */
@media (max-width: 767px) {
  .ll-cta.ll-cta--v3[data-ll-placement="top"] { aspect-ratio: 992 / 1503; --u: calc(100cqw / 992); border-radius: 4.032% / 2.661%; }
  .ll-cta--v3[data-ll-placement="top"] .llv3-avatar { left: calc(var(--u) * 158); top: calc(var(--u) * 55); width: calc(var(--u) * 121); height: calc(var(--u) * 121); }
  .ll-cta--v3[data-ll-placement="top"] .llv3-flank--l { left: calc(var(--u) * 41); top: calc(var(--u) * 110); width: calc(var(--u) * 91); height: calc(var(--u) * 3); }
  .ll-cta--v3[data-ll-placement="top"] .llv3-flank--r { left: calc(var(--u) * 873); top: calc(var(--u) * 110); width: calc(var(--u) * 80); height: calc(var(--u) * 3); }
  .ll-cta--v3[data-ll-placement="top"] .llc-eyebrow-slot { left: calc(var(--u) * 305.84); top: calc(var(--u) * 99.83); font-size: calc(var(--u) * 37.31); line-height: 1; letter-spacing: 0.173em; text-align: left; }
  .ll-cta--v3[data-ll-placement="top"] .llc-headline { left: calc(var(--u) * 83); top: calc(var(--u) * 197.8); font-size: calc(var(--u) * 85.92); line-height: 0.947; letter-spacing: -0.026em; width: calc(var(--u) * 836); text-align: center; }
  .ll-cta--v3[data-ll-placement="top"] .llc-action .llc-btn { padding: calc(var(--u) * 0) calc(var(--u) * 0) calc(var(--u) * 2) calc(var(--u) * 50); }
  .ll-cta--v3[data-ll-placement="top"] .llc-action { left: calc(var(--u) * 97); top: calc(var(--u) * 1269); width: calc(var(--u) * 798); height: calc(var(--u) * 159); font-size: calc(var(--u) * 54.18); }
  .ll-cta--v3[data-ll-placement="top"] .llc-stage { left: calc(var(--u) * 256); top: calc(var(--u) * 486); width: calc(var(--u) * 482); height: calc(var(--u) * 880); --llv3-frame: calc(var(--u) * 6); --llv3-bezel: calc(var(--u) * 17); --llv3-radius: calc(var(--u) * 96); --llv3-notch-w: calc(var(--u) * 210); --llv3-notch-h: calc(var(--u) * 46); transform: perspective(calc(var(--u) * 3000)); clip-path: inset(calc(var(--u) * -60) calc(var(--u) * -60) calc(var(--u) * 82) calc(var(--u) * -60)); }
  .ll-cta--v3[data-ll-placement="top"] .llc-lauri { display: none; }
}

/* mid_mobile — reference 910x1631 */
@media (max-width: 767px) {
  .ll-cta.ll-cta--v3[data-ll-placement="mid"] { aspect-ratio: 910 / 1631; --u: calc(100cqw / 910); border-radius: 3.956% / 2.207%; }
  .ll-cta--v3[data-ll-placement="mid"] .llv3-flank--l { left: calc(var(--u) * 66); top: calc(var(--u) * 52); width: calc(var(--u) * 105); height: calc(var(--u) * 3); }
  .ll-cta--v3[data-ll-placement="mid"] .llv3-flank--r { left: calc(var(--u) * 734); top: calc(var(--u) * 52); width: calc(var(--u) * 110); height: calc(var(--u) * 3); }
  .ll-cta--v3[data-ll-placement="mid"] .llc-eyebrow-slot { left: calc(var(--u) * 202); top: calc(var(--u) * 37.82); font-size: calc(var(--u) * 33.35); line-height: 1; letter-spacing: 0.215em; width: calc(var(--u) * 504); text-align: center; }
  .ll-cta--v3[data-ll-placement="mid"] .llc-headline { left: calc(var(--u) * 75.5); top: calc(var(--u) * 106.68); font-size: calc(var(--u) * 102.97); line-height: 0.852; letter-spacing: -0.027em; width: calc(var(--u) * 762); text-align: center; }
  .ll-cta--v3[data-ll-placement="mid"] .llc-lede { left: calc(var(--u) * 75); top: calc(var(--u) * 395.72); font-size: calc(var(--u) * 35.36); line-height: 1.1; letter-spacing: -0.013em; width: calc(var(--u) * 762); text-align: center; }
  .ll-cta--v3[data-ll-placement="mid"] .llv3-script { left: calc(var(--u) * 624); top: calc(var(--u) * 521); font-size: calc(var(--u) * 46.5); line-height: 0.95; letter-spacing: 0em; width: calc(var(--u) * 280); text-align: left; transform: rotate(-14deg); }
  .ll-cta--v3[data-ll-placement="mid"] .llv3-swash { left: calc(var(--u) * 652); top: calc(var(--u) * 580); width: calc(var(--u) * 222); height: calc(var(--u) * 70); }
  .ll-cta--v3[data-ll-placement="mid"] .llc-action .llc-btn { padding: calc(var(--u) * 6) calc(var(--u) * 0) calc(var(--u) * 0) calc(var(--u) * 16); }
  .ll-cta--v3[data-ll-placement="mid"] .llc-action { left: calc(var(--u) * 72); top: calc(var(--u) * 1399); width: calc(var(--u) * 764); height: calc(var(--u) * 143); font-size: calc(var(--u) * 54.05); }
  .ll-cta--v3[data-ll-placement="mid"] .llc-lauri { left: calc(var(--u) * 0); top: calc(var(--u) * 420); width: calc(var(--u) * 724); height: calc(var(--u) * 1000); -webkit-mask-image: linear-gradient(180deg, #000 77%, transparent 92.5%); mask-image: linear-gradient(180deg, #000 77%, transparent 92.5%); }
  .ll-cta--v3[data-ll-placement="mid"] .llc-stage { left: calc(var(--u) * 511); top: calc(var(--u) * 666); width: calc(var(--u) * 338); height: calc(var(--u) * 634); --llv3-frame: calc(var(--u) * 5); --llv3-bezel: calc(var(--u) * 12); --llv3-radius: calc(var(--u) * 58); --llv3-notch-w: calc(var(--u) * 150); --llv3-notch-h: calc(var(--u) * 30); transform: rotateZ(3deg); }
  .ll-cta--v3[data-ll-placement="mid"] .llc-rule { display: none; }
  .ll-cta--v3[data-ll-placement="mid"] .llv3-caps--mid { display: none; }
}

@supports not (width: 1cqw) {
  @media (min-width: 768px) {
    .ll-cta.ll-cta--v3[data-ll-placement="mid"] { --u: calc(min(100vw - 40px, 960px) / 1403); }
    .ll-cta.ll-cta--v3[data-ll-placement="footer"] { --u: calc(min(100vw - 40px, 960px) / 1403); }
    .ll-cta.ll-cta--v3[data-ll-placement="top"] { --u: calc(min(100vw - 40px, 960px) / 2038); }
  }
  @media (max-width: 767px) {
    .ll-cta.ll-cta--v3[data-ll-placement="footer"] { --u: calc((100vw - 30px) / 823); }
    .ll-cta.ll-cta--v3[data-ll-placement="top"] { --u: calc((100vw - 30px) / 992); }
    .ll-cta.ll-cta--v3[data-ll-placement="mid"] { --u: calc((100vw - 30px) / 910); }
  }
}
/* === GEOMETRY:END === */

/* ====================================================================== */
/* Top card: reduced headline for long approved copy (3.4.0)               */
/* ====================================================================== */

/* Only a card rendered with data-llv3-top-scale (house: 0.84). The headline
 * keeps the geometry's left edge and line breaks, shrinks as one block, and
 * is re-centred in the same three-line band: top moves down by half the
 * height saved. Band heights: desktop 3 x 1.006 x 80.52u = 243.0u, mobile
 * 3 x 0.947 x 85.92u = 244.1u. */
@media (min-width: 768px) {
  .ll-cta.ll-cta--v3[data-ll-placement="top"][data-llv3-top-scale] .llc-headline {
    font-size: calc(var(--u) * 80.52 * var(--llv3-top-scale));
    top: calc(var(--u) * (217.77 + 243.0 * (1 - var(--llv3-top-scale)) / 2));
  }
}
@media (max-width: 767px) {
  .ll-cta.ll-cta--v3[data-ll-placement="top"][data-llv3-top-scale] .llc-headline {
    font-size: calc(var(--u) * 85.92 * var(--llv3-top-scale));
    top: calc(var(--u) * (197.8 + 244.1 * (1 - var(--llv3-top-scale)) / 2));
  }
}

/* ====================================================================== */
/* Full-video end card (3.4.0)                                             */
/* ====================================================================== */

/* Lives inside .ll-cta-modal__player over the video's last frame. The
 * dialog is appended to <body>, so nothing here depends on a card. The link
 * itself is the size container: every dimension follows the phone's width,
 * from ~245px (390x844) to ~470px (desktop), with readable floors. Dream Chat
 * visual language: deep teal-to-purple gradient, the app's translucent
 * rounded message surface, circular Lauri Chat avatar, white type, cyan
 * primary action. No starfield. */
.ll-cta-modal__player .ll-cta-endcard {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  container-type: size;
  color: #fff;
  text-decoration: none;
  font-family: "LLv3 Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  border-radius: inherit;
  animation: ll-endcard-in 320ms cubic-bezier(0.16, 0.84, 0.34, 1) both;
}
.ll-cta-modal__player .ll-cta-endcard:focus { outline: none; }
.ll-cta-modal__player .ll-cta-endcard:focus-visible {
  outline: 3px solid #7ff6ff;
  outline-offset: -3px;
}

/* Keeps the frozen reply legible at the top while the lower screen settles
 * into the app's dark ground behind the sheet. */
.ll-cta-endcard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 8, 20, 0.08) 0%, rgba(3, 8, 20, 0.42) 34%, rgba(3, 8, 20, 0.86) 62%, rgba(3, 8, 20, 0.94) 100%);
}

.ll-cta-endcard__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 3.2cqw, 14px);
  margin: 0 5cqw 6cqw;
  padding: clamp(16px, 7cqw, 30px);
  border-radius: clamp(18px, 7cqw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(120% 85% at 0% 0%, rgba(0, 190, 196, 0.55), transparent 62%),
    radial-gradient(120% 90% at 100% 100%, rgba(166, 42, 206, 0.62), transparent 64%),
    linear-gradient(155deg, #093e4c 0%, #151a3c 52%, #3b1257 100%);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.ll-cta-endcard__who {
  display: flex;
  align-items: center;
  gap: clamp(8px, 3cqw, 12px);
}
.ll-cta-endcard__avatar {
  display: block;
  width: clamp(38px, 15cqw, 60px);
  height: clamp(38px, 15cqw, 60px);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(63, 227, 234, 0.85), 0 4px 12px rgba(0, 0, 0, 0.45);
}
/* "DREAM CHAT WITH LAURI" — the app's cyan brand label. */
.ll-cta-endcard__name {
  font-size: clamp(14px, 4.6cqw, 18px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5ff0f2;
}

.ll-cta-endcard__title {
  font-size: clamp(21px, 8.8cqw, 36px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.ll-cta-endcard__text {
  font-size: clamp(15px, 6.2cqw, 24px);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.94);
}

/* The visible "button" is presentation inside the one link. */
.ll-cta-endcard__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  width: 100%;
  min-height: clamp(48px, 18cqw, 64px);
  margin-top: clamp(4px, 1.6cqw, 8px);
  padding: 0 1em;
  border-radius: 999px;
  background: linear-gradient(90deg, #2fe3d8 0%, #3fd0ee 100%);
  color: #04202b;
  font-size: clamp(15px, 6.2cqw, 22px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(47, 227, 216, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: filter 160ms ease, transform 160ms ease;
}
.ll-cta-endcard__btn .llc-btn__chev { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.ll-cta-endcard:hover .ll-cta-endcard__btn,
.ll-cta-endcard:focus-visible .ll-cta-endcard__btn { filter: brightness(1.08); transform: translateY(-1px); }

@keyframes ll-endcard-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ll-cta-modal__player .ll-cta-endcard { animation: none; }
  .ll-cta-endcard__btn { transition: none; }
}

/* ====================================================================== */
/* Footer: Private Dream Session ad (3.4.0)                                */
/* ====================================================================== */

/* The owner-approved image, shown whole: width follows the article column,
 * height follows the intrinsic ratio (width/height attributes), never
 * cropped or stretched. The entire image is the link. */
.ll-consult-ad {
  display: block;
  width: 100%;
  max-width: 960px;
  /* The visible gap above this ad is NOT its margin alone: the article's last
     line box carries ~12px of descender slack below its final glyph, so a 32px
     margin renders as 43px of clean background. The ad's artwork has no
     transparent canvas (measured: 0px), and the slack belongs to the article's
     typography, which this release does not touch — so the margin absorbs it.
     Measured slack is ~12px at phone widths but only ~3px at 1440, because the
     body font-size and line-height differ by breakpoint. That 9px spread is
     wider than the 8px target band, so one margin cannot serve both: 28px
     renders as ~39px on a phone and ~30px at 1440. The margin is therefore
     breakpoint-aware (see the min-width rule below). Bottom margin unchanged. */
  margin: 28px auto 32px;
  padding: 0;
  box-sizing: border-box;
}
/* Desktop line boxes leave ~3px of slack under the final glyph against ~12px
   on phones, so the same rendered gap needs a slightly larger margin here:
   32 + ~3 renders as ~34px, inside the 32-40 target. */
@media (min-width: 768px) {
  .ll-consult-ad { margin-top: 32px; }
}
.ll-consult-ad__link {
  display: block;
  line-height: 0;
  border-radius: 0;          /* square: rounding would clip the approved artwork's corners */
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.ll-consult-ad__link picture { display: block; }
.ll-consult-ad__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: inherit;
}
.ll-consult-ad__link:focus { outline: none; }
.ll-consult-ad__link:focus-visible {
  outline: 3px solid #19dfb8;
  outline-offset: 4px;
}

/* ====================================================================== */
/* Divi Builder single posts — CTA boundaries only.                       */
/* ====================================================================== */

/* On a post built with the Divi Builder the article is not a flow of
 * paragraphs but `.et-l--post > .et_builder_inner_content > .et_pb_section >
 * .et_pb_row > .et_pb_column > .et_pb_text`. That changes both CTA boundaries,
 * because the builder's own vertical rhythm stacks on top of ours:
 *
 *   app card -> next content   card margin-bottom 32
 *                            + containing row padding-bottom 20
 *                            + next row padding-top 18.5625 (>=768) / 30
 *                            = 74px at 1440, 82px at 390
 *
 *   last text -> consult ad    line descender ~4
 *                            + last row padding-bottom 18.5625 / 30
 *                            + last section padding-bottom 37.125 / 50
 *                            + ad margin-top 32 / 28
 *                            = 88-128px
 *
 * Measured on dev2 at 390 and 1440 on /losing-your-car-in-a-dream/ and
 * /dreaming-of-a-house-you-used-to-live-in/. Production renders the same
 * numbers, so this is the builder's spacing, not a release regression — but it
 * is not the rhythm the ordinary posts have, so it is corrected here.
 *
 * The correction collapses the builder padding that sits AT the two CTA
 * boundaries and lets our own margins set the gap, so the result is the same
 * number on both post types. No negative margins, no post-body edits, and
 * nothing outside these two boundaries: every selector is anchored either to
 * the row that contains our card, the row immediately after it, or the last
 * row/section before our ad. Sections elsewhere in the post keep their padding.
 */

/* --- boundary 1: below the app card ----------------------------------- */
/* The card is injected as the last child of a text module, so the gap below it
 * is the containing row's padding-bottom plus the following row's padding-top.
 * Reaching the ancestor row needs :has(); where it is unsupported these two
 * rules simply do not match and the spacing stays exactly as it is today, so
 * the fallback is the current behaviour rather than a broken layout. */
.single-post .et-l--post .et_pb_row:has([data-ll-cta-card]) {
  padding-bottom: 0 !important;
}
.single-post .et-l--post .et_pb_row:has([data-ll-cta-card]) + .et_pb_row {
  padding-top: 0 !important;
}

/* --- boundary 2: above the consultation ad ---------------------------- */
/* On a single post the builder wrapper is always followed by the consultation
 * ad, so the last row's and last section's bottom padding is dead space at the
 * boundary and nothing else sits below them. */
.single-post .entry-content > .et-l--post .et_pb_section:last-of-type {
  padding-bottom: 0 !important;
}
.single-post .entry-content > .et-l--post .et_pb_section:last-of-type
  .et_pb_row:last-of-type {
  padding-bottom: 0 !important;
}
/* Builder text modules hug their final line far more tightly than ordinary
 * post markup does (~4px of descender slack against ~12px on a phone and ~3px
 * at 1440), so the breakpoint-aware margin above does not apply cleanly here.
 * One value serves both widths on this post type: 36 + ~4 renders as ~40px. */
.single-post .entry-content > .et-l--post + .ll-consult-ad {
  margin-top: 36px !important;
}
/* The builder's last text module ends with a genuinely empty <p> (innerHTML
 * "", zero child nodes, zero height) left behind by the editor. It paints
 * nothing but still contributes 16px of margin, which is why three of the four
 * cells measured 56px where the fourth measured 36px — on that one an image
 * happened to paint down to the row's edge and hide it. Collapsing it is CSS
 * only; the post body is not touched. Scoped to the last row of the last
 * section, i.e. the boundary itself: on these posts exactly one paragraph in
 * the whole article matches. */
.single-post .entry-content > .et-l--post .et_pb_section:last-of-type
  .et_pb_row:last-of-type .et_pb_text_inner > p:empty:last-child {
  display: none !important;
}
/* Zeroing the row and section padding above removed the barrier that used to
 * contain the final paragraph's own 16px bottom margin, so that margin now
 * collapses out to the row's edge and re-opens the gap it was meant to close.
 * It has to go at the source. Scoped to the same boundary: this matches two
 * elements on /losing-your-car-in-a-dream/ (the closing quote and the empty
 * paragraph already hidden above), one on
 * /dreaming-of-a-house-you-used-to-live-in/, and NOTHING on ordinary posts,
 * which have no .et-l--post wrapper at all. */
.single-post .entry-content > .et-l--post .et_pb_section:last-of-type
  .et_pb_row:last-of-type .et_pb_text_inner p:last-child {
  margin-bottom: 0 !important;
}