/**
 * Closing CTA treatments. Same raised card, a different wash on each page.
 */

.lx-final-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #f7f8fb;
}

.lx-final-wash {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 280px at 88% 0%, rgb(36 73 232 / 0.22), transparent 62%),
    radial-gradient(420px 260px at 0% 110%, rgb(197 111 59 / 0.14), transparent 58%),
    linear-gradient(165deg, #f4f7ff 0%, #ffffff 58%);
  transition: transform 700ms ease;
}

.lx-final-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.lx-final-card > :not(.lx-final-wash):not(.lx-final-mark):not(.lx-final-dots):not(.lx-final-art) {
  position: relative;
  z-index: 1;
}

.lx-final-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.lx-final-vec {
  position: absolute;
  display: block;
  height: auto;
  overflow: visible;
  transform: translate3d(var(--vx, 0px), var(--vy, 0px), 0) rotate(var(--vr, 0deg));
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lx-final-card:hover .lx-final-wash {
  transform: scale(1.06) translate3d(-1.5%, -1%, 0);
}

/* —— Home (approved flower marks) —— */
.lx-final--home .lx-final-card {
  background: #f3f6fd;
  border-color: rgb(36 73 232 / 0.12);
}
.lx-final--home .lx-final-wash {
  background:
    radial-gradient(520px 280px at 18% 120%, rgb(244 174 61 / 0.28), transparent 58%),
    radial-gradient(680px 340px at 100% -20%, rgb(36 73 232 / 0.34), transparent 62%),
    linear-gradient(118deg, #e7eeff 0%, #f8f6f1 48%, #ffffff 100%);
}
.lx-final--home .lx-final-mark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transition: transform 700ms ease, opacity 700ms ease;
}
.lx-final--home .lx-final-mark img {
  display: block;
  width: 100%;
  height: auto;
}
.lx-final--home .lx-final-mark--a {
  width: min(250px, 32%);
  right: -36px;
  top: 8%;
  opacity: 0.2;
  transform: rotate(-18deg);
  filter: saturate(1.15);
}
.lx-final--home .lx-final-mark--b {
  width: min(148px, 20%);
  left: 2%;
  bottom: -28px;
  opacity: 0.22;
  transform: rotate(24deg);
  filter: hue-rotate(198deg) saturate(1.35);
}
.lx-final--home .lx-final-mark--c {
  width: min(92px, 14%);
  left: 16%;
  top: -22px;
  opacity: 0.28;
  transform: rotate(46deg);
  filter: hue-rotate(-32deg) saturate(1.6);
}
.lx-final--home .lx-final-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1.2' cy='1.2' r='1.2' fill='%232449E8' fill-opacity='.14'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 70%, transparent 100%);
}
.lx-final--home .lx-final-card::after {
  opacity: 0.22;
  mix-blend-mode: multiply;
}
.lx-final--home .lx-final-card:hover .lx-final-mark--a { transform: rotate(-26deg) translateY(-6px); opacity: 0.26; }
.lx-final--home .lx-final-card:hover .lx-final-mark--b { transform: rotate(32deg) translateY(4px); opacity: 0.28; }
.lx-final--home .lx-final-card:hover .lx-final-mark--c { transform: rotate(58deg); opacity: 0.34; }
.lx-final--home .lx-final-card:hover .lx-final-wash {
  transform: scale(1.04) translate3d(-2%, 0, 0);
}
@media (max-width: 720px) {
  .lx-final--home .lx-final-mark--a { width: 140px; right: -40px; opacity: 0.14; }
  .lx-final--home .lx-final-mark--b { width: 88px; opacity: 0.16; }
  .lx-final--home .lx-final-mark--c { width: 58px; opacity: 0.18; }
}

/* —— Free: download sheet and arrow, no labels —— */
.lx-final--free .lx-final-wash {
  background:
    radial-gradient(560px 300px at 80% 0%, rgb(36 73 232 / 0.16), transparent 62%),
    linear-gradient(180deg, #eef3fc 0%, #ffffff 72%);
}
.lx-final--free .lx-final-card::after { opacity: 0.12; }
.lx-final--free .lx-final-vec--arrow {
  width: min(190px, 28%);
  left: -42px;
  top: -36px;
  opacity: 0.34;
}
.lx-final--free .lx-final-vec--sheet {
  width: min(250px, 34%);
  right: -18px;
  bottom: -56px;
  opacity: 0.42;
  --vr: 10deg;
}

/* —— Pricing: Free / Pro / Setup bands —— */
.lx-final--pricing .lx-final-wash {
  background:
    linear-gradient(90deg, rgb(246 243 234 / 0.85) 0%, transparent 28%),
    radial-gradient(520px 280px at 0% 0%, rgb(36 73 232 / 0.12), transparent 58%),
    radial-gradient(460px 300px at 100% 100%, rgb(197 111 59 / 0.14), transparent 60%),
    linear-gradient(160deg, #f8f3ea 0%, #ffffff 70%);
}
.lx-final--pricing .lx-final-card::after { opacity: 0.16; }
.lx-final--pricing .lx-final-art {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.lx-final--pricing .lx-final-art-band {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(24 32 33 / 0.28);
  border-right: 1px solid rgb(24 32 33 / 0.06);
  transition: transform 700ms ease;
}
.lx-final--pricing .lx-final-art-band:last-child { border-right: 0; }
.lx-final--pricing .lx-final-art-band--pro {
  background: rgb(36 73 232 / 0.07);
  color: rgb(36 73 232 / 0.4);
}
.lx-final--pricing .lx-final-card:hover .lx-final-art-band--pro {
  transform: translateY(-3px);
}

/* —— Story: lined paper + olive seal —— */
.lx-final--story .lx-final-wash {
  background:
    radial-gradient(480px 280px at 12% 0%, rgb(111 112 70 / 0.18), transparent 60%),
    radial-gradient(420px 260px at 100% 100%, rgb(197 111 59 / 0.14), transparent 58%),
    linear-gradient(165deg, #f6f3ea 0%, #ffffff 70%);
}
.lx-final--story .lx-final-card::after { opacity: 0.14; }
.lx-final--story .lx-final-art-lines {
  position: absolute;
  inset: 18% 8% 16% 12%;
  background-image: repeating-linear-gradient(
    transparent 0,
    transparent 21px,
    rgb(24 32 33 / 0.08) 21px,
    rgb(24 32 33 / 0.08) 22px
  );
  opacity: 0.55;
  transition: transform 700ms ease;
}
.lx-final--story .lx-final-art-seal {
  position: absolute;
  left: 22px;
  bottom: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(111 112 70 / 0.55);
  box-shadow: inset 0 0 0 4px rgb(111 112 70 / 0.2);
  transition: transform 700ms ease;
}
.lx-final--story .lx-final-card:hover .lx-final-art-lines {
  transform: translateY(-3px);
}
.lx-final--story .lx-final-card:hover .lx-final-art-seal {
  transform: translateY(-4px) rotate(-8deg);
}

/* —— Integrations: rings and a path, no tool names —— */
.lx-final--integrations .lx-final-wash {
  background: linear-gradient(180deg, #f4f6fb 0%, #ffffff 70%);
}
.lx-final--integrations .lx-final-card::after { opacity: 0.1; }
.lx-final--integrations .lx-final-vec--ring {
  width: min(420px, 48%);
  right: -110px;
  top: -90px;
  opacity: 0.42;
}
.lx-final--integrations .lx-final-vec--curve {
  width: min(860px, 94%);
  left: 2%;
  bottom: -46px;
  opacity: 0.32;
}
.lx-final--integrations .lx-final-vec--mark {
  width: min(230px, 28%);
  left: -28px;
  bottom: -52px;
  opacity: 0.5;
  --vr: -8deg;
}

/* —— Support: envelope —— */
.lx-final--support .lx-final-wash {
  background:
    radial-gradient(500px 260px at 100% 0%, rgb(24 32 33 / 0.08), transparent 60%),
    linear-gradient(180deg, #eef1f2 0%, #ffffff 72%);
}
.lx-final--support .lx-final-card::after { opacity: 0.14; }
.lx-final--support .lx-final-art-envelope {
  position: absolute;
  right: 28px;
  top: 50%;
  width: min(120px, 28%);
  height: auto;
  opacity: 0.22;
  transform: translateY(-50%) rotate(8deg);
  transition: transform 700ms ease, opacity 700ms ease;
}
.lx-final--support .lx-final-card:hover .lx-final-art-envelope {
  transform: translateY(calc(-50% - 5px)) rotate(4deg);
  opacity: 0.28;
}

/* —— Features: masonry scatter —— */
.lx-final--features .lx-final-wash {
  background:
    linear-gradient(115deg, rgb(36 73 232 / 0.14) 0%, transparent 42%),
    radial-gradient(480px 240px at 100% 100%, rgb(24 32 33 / 0.06), transparent 55%),
    linear-gradient(180deg, #f5f7fb 0%, #ffffff 70%);
}
.lx-final--features .lx-final-card::after { opacity: 0.16; }
.lx-final--features .lx-final-art {
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 75%);
}
.lx-final--features .lx-final-art-tile {
  position: absolute;
  border-radius: 6px;
  background: rgb(36 73 232 / 0.12);
  border: 1px solid rgb(24 32 33 / 0.08);
  transition: transform 700ms ease;
}
.lx-final--features .lx-final-art-tile--a { width: 72px; height: 44px; left: 8%; top: 18%; }
.lx-final--features .lx-final-art-tile--b { width: 56px; height: 56px; right: 14%; top: 12%; background: rgb(24 32 33 / 0.06); }
.lx-final--features .lx-final-art-tile--c { width: 88px; height: 36px; left: 22%; bottom: 22%; background: rgb(36 73 232 / 0.08); }
.lx-final--features .lx-final-art-tile--d { width: 48px; height: 64px; right: 8%; bottom: 18%; }
.lx-final--features .lx-final-art-tile--e { width: 64px; height: 40px; left: 42%; top: 10%; background: rgb(24 32 33 / 0.05); }
.lx-final--features .lx-final-art-tile--f { width: 40px; height: 40px; right: 28%; bottom: 28%; background: rgb(36 73 232 / 0.1); }
.lx-final--features .lx-final-art-tile--g { width: 60px; height: 28px; left: 6%; bottom: 40%; background: rgb(24 32 33 / 0.05); }
.lx-final--features .lx-final-card:hover .lx-final-art-tile--a { transform: translate(-3px, -4px); }
.lx-final--features .lx-final-card:hover .lx-final-art-tile--b { transform: translate(3px, -3px); }
.lx-final--features .lx-final-card:hover .lx-final-art-tile--d { transform: translate(2px, 4px); }
.lx-final--features .lx-final-card:hover .lx-final-art-tile--f { transform: translate(-2px, 3px); }

/* —— Compare: two overlapping fields, no You / Them labels —— */
.lx-final--compare .lx-final-wash {
  background: linear-gradient(180deg, #f6f7f8 0%, #ffffff 72%);
}
.lx-final--compare .lx-final-card::after { opacity: 0.1; }
.lx-final--compare .lx-final-vec--you {
  width: min(520px, 58%);
  left: -18%;
  top: -38%;
  opacity: 0.28;
}
.lx-final--compare .lx-final-vec--them {
  width: min(480px, 54%);
  right: -16%;
  bottom: -42%;
  opacity: 0.55;
}

/* —— Page / docs: quiet spec sheet —— */
.lx-final--page .lx-final-wash,
.lx-final--docs .lx-final-wash {
  background:
    linear-gradient(180deg, #f5f6f8 0%, #ffffff 68%);
}
.lx-final--page .lx-final-card::after,
.lx-final--docs .lx-final-card::after {
  opacity: 0.12;
}
.lx-final--page .lx-final-art-rule,
.lx-final--docs .lx-final-art-rule {
  position: absolute;
  left: 28px;
  top: 16%;
  bottom: 16%;
  width: 2px;
  background: rgb(36 73 232 / 0.22);
  border-radius: 1px;
  transition: transform 700ms ease;
}
.lx-final--page .lx-final-art-baselines,
.lx-final--docs .lx-final-art-baselines {
  position: absolute;
  left: 44px;
  right: 18%;
  top: 28%;
  bottom: 28%;
  background-image: repeating-linear-gradient(
    transparent 0,
    transparent 17px,
    rgb(24 32 33 / 0.06) 17px,
    rgb(24 32 33 / 0.06) 18px
  );
  opacity: 0.7;
  transition: transform 700ms ease;
}
.lx-final--page .lx-final-card:hover .lx-final-art-rule,
.lx-final--docs .lx-final-card:hover .lx-final-art-rule {
  transform: translateX(-2px);
}
.lx-final--page .lx-final-card:hover .lx-final-art-baselines,
.lx-final--docs .lx-final-card:hover .lx-final-art-baselines {
  transform: translateY(-2px);
}

/* —— Shared mobile + reduced motion —— */
@media (max-width: 720px) {
  .lx-final-art { opacity: 0.55; }
  .lx-final--free .lx-final-vec--arrow { width: 110px; opacity: 0.26; }
  .lx-final--free .lx-final-vec--sheet { width: 130px; right: -28px; opacity: 0.3; }
  .lx-final--pricing .lx-final-art-band {
    font-size: 9px;
    padding-top: 10px;
    opacity: 0.75;
  }
  .lx-final--story .lx-final-art-lines { opacity: 0.35; }
  .lx-final--story .lx-final-art-seal {
    width: 20px;
    height: 20px;
    left: 14px;
    bottom: 12px;
    opacity: 0.7;
  }
  .lx-final--integrations .lx-final-vec--ring { width: 180px; right: -70px; top: -60px; opacity: 0.28; }
  .lx-final--integrations .lx-final-vec--curve { opacity: 0.18; }
  .lx-final--integrations .lx-final-vec--mark { width: 120px; opacity: 0.32; }
  .lx-final--support .lx-final-art-envelope {
    width: 72px;
    right: 14px;
    opacity: 0.16;
  }
  .lx-final--features .lx-final-art-tile {
    transform: scale(0.72);
    opacity: 0.7;
  }
  .lx-final--compare .lx-final-vec--you,
  .lx-final--compare .lx-final-vec--them { opacity: 0.22; }
  .lx-final--page .lx-final-art-rule,
  .lx-final--docs .lx-final-art-rule {
    left: 14px;
    width: 1.5px;
  }
  .lx-final--page .lx-final-art-baselines,
  .lx-final--docs .lx-final-art-baselines {
    left: 26px;
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lx-final-wash { transition: none; }
  .lx-final-card:hover .lx-final-wash { transform: none; }
  .lx-final--home .lx-final-mark { transition: none; }
  .lx-final--home .lx-final-card:hover .lx-final-mark--a,
  .lx-final--home .lx-final-card:hover .lx-final-mark--b,
  .lx-final--home .lx-final-card:hover .lx-final-mark--c {
    transform: none;
  }
  .lx-final--home .lx-final-card:hover .lx-final-mark--a { opacity: 0.2; }
  .lx-final--home .lx-final-card:hover .lx-final-mark--b { opacity: 0.22; }
  .lx-final--home .lx-final-card:hover .lx-final-mark--c { opacity: 0.28; }
  .lx-final-art *,
  .lx-final-art {
    transition: none !important;
  }
  .lx-final-vec { transition: none !important; }
  .lx-final-card:hover .lx-final-art-band--pro,
  .lx-final-card:hover .lx-final-art-lines,
  .lx-final-card:hover .lx-final-art-seal,
  .lx-final-card:hover .lx-final-art-node,
  .lx-final-card:hover .lx-final-art-envelope,
  .lx-final-card:hover .lx-final-art-tile,
  .lx-final-card:hover .lx-final-art-half em,
  .lx-final-card:hover .lx-final-art-rule,
  .lx-final-card:hover .lx-final-art-baselines {
    transform: none !important;
  }
  .lx-final--support .lx-final-card:hover .lx-final-art-envelope {
    transform: translateY(-50%) rotate(8deg) !important;
    opacity: 0.22;
  }
}