/* App palette and original type lockup stay local to this product story. */
.lm {
  --lm-ink: #201c2b;
  --lm-muted: #565260;
  --lm-violet: #4632ab;
  --lm-lime: #d1ff48;
  position: relative;
  background: #fff;
  color: var(--lm-ink);
  padding-block: clamp(3.75rem, 7.4vw, 7.5rem);
  scroll-margin-top: 5.5rem;
}
.lm-wrap { width: min(76rem, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.lm h1, .lm h2, .lm h3 { margin: 0; font-family: var(--font-display); font-weight: 640; font-style: normal; line-height: 1.06; letter-spacing: -.045em; }
.lm h1 { max-width: 13ch; font-size: clamp(2.5rem, 4.9vw, 5.15rem); }
.lm h2 { font-size: clamp(2.05rem, 4.15vw, 4.1rem); }
.lm h3 { font-size: clamp(1.32rem, 2.1vw, 2.1rem); line-height: 1.16; }
.lm p { margin: 0; font-size: 1.05rem; line-height: 1.57; }
.lm a { text-underline-offset: .22em; }
.lm .lm-eyebrow { margin-bottom: 1rem; color: var(--lm-violet); font-weight: 600; font-size: .95rem; }
.lm .lm-caption { font-size: .86rem; color: var(--lm-muted); line-height: 1.5; }
.lm-hero { padding-top: clamp(6.25rem, 8vw, 8rem); background: linear-gradient(125deg, #191428 12%, #272042 64%, #382c60); color: #fff; }
.lm-back { display: inline-flex; min-height: 44px; align-items: center; font-size: .875rem; font-weight: 550; text-decoration: none; color: #d6d0e6; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.lm-back:hover { color: #fff; text-decoration: underline; }
.lm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2.15rem, 5vw, 6rem); align-items: center; }
.lm-mark { display: block; width: clamp(10rem, 18vw, 15.5rem); height: auto; margin-bottom: clamp(1.4rem, 2.5vw, 2rem); }
.lm-intro h1 { color: #fff; }
.lm-intro .lm-lead { margin-block: 1.25rem; max-width: 36rem; font-size: clamp(1.05rem, 1.55vw, 1.32rem); color: #e3deef; line-height: 1.5; }
.lm .lm-status { color: #e1ff8a; font-size: .92rem; font-weight: 550; }
.lm-store { margin-top: 1.45rem; scroll-margin-top: 7rem; }
.lm-store-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.lm .lm-cta { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1rem; background: var(--lm-lime); border-radius: 99px; color: #201c2b; text-decoration: none; font-size: .94rem; font-weight: 650; }
.lm .lm-cta:hover { background: #e1ff8a; }
.lm-demo { width: min(100%, 30rem); margin: 0; justify-self: end; }
.lm-demo-labels { display: flex; justify-content: space-between; margin: 0 .18rem .5rem; font-size: .85rem; font-weight: 600; color: #fff; }
.lm-demo-labels span:last-child { color: var(--lm-lime); }
.lm-comparison { --lm-position: 50%; position: relative; isolation: isolate; aspect-ratio: 1; border-radius: clamp(.8rem, 2vw, 1.35rem); overflow: hidden; background: #24212b; }
.lm-comparison img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.lm-before { clip-path: inset(0 calc(100% - var(--lm-position)) 0 0); }
.lm-divider { position: absolute; inset-block: 0; left: var(--lm-position); width: 2px; background: var(--lm-lime); transform: translateX(-50%); pointer-events: none; }
.lm-divider span { display: grid; place-items: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--lm-lime); color: var(--lm-ink); font-size: 1.5rem; }
.lm-comparison input { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.lm-comparison input[hidden], .lm-comparison:has(input[hidden]) .lm-divider span { display: none; }
.lm-comparison:has(input:focus-visible) { outline: 3px solid var(--lm-lime); outline-offset: 4px; }
.lm-demo figcaption { margin-top: .7rem; color: #d8d3e6; font-size: .83rem; line-height: 1.5; }
.lm-section-head { max-width: 58rem; }
.lm-section-head > p:last-child, .lm-price-head > p:not(.lm-eyebrow) { margin-top: 1.1rem; max-width: 43rem; color: var(--lm-muted); font-size: clamp(1.05rem, 1.45vw, 1.25rem); }
.lm-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 2.5rem); margin-block: 2.4rem 1.4rem; }
.lm-gallery article { min-width: 0; }
.lm-gallery h3 { margin: 1.35rem .2rem .55rem; }
.lm-gallery article > p { margin: 0 .2rem; color: var(--lm-muted); }
.lm-screen { display: grid; place-items: center; padding: clamp(1rem, 2vw, 1.75rem); border-radius: 1.2rem; background: #e9e5f4; cursor: zoom-in; }
.lm-gallery article:nth-child(2) .lm-screen { background: #e7eaec; }
.lm-gallery article:nth-child(3) .lm-screen { background: #ebeddd; }
.lm-screen img { width: min(100%, 13rem); height: auto; display: block; border-radius: 1.1rem; box-shadow: 0 6px 16px #201c2b15; }
.lm-pricing { background: #f5f4f8; }
.lm-pricing-grid, .lm-local-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.lm-price-head img { display: block; width: min(100%, 28rem); height: auto; margin: 1.5rem 0 0; }
.lm-tariff { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem 1rem; border-top: 1px solid #d5d0de; padding: 1.25rem 0; align-items: baseline; }
.lm-tariff:first-child { border-color: var(--lm-violet); }
.lm-tariff h3 { font-size: clamp(1.4rem, 2.25vw, 2rem); }
.lm .lm-price { font: 600 clamp(1.2rem, 1.65vw, 1.45rem)/1.3 var(--font-display); color: var(--lm-violet); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lm-tariff > p:last-child { grid-column: 1 / -1; color: var(--lm-muted); }
.lm-local p + p { margin-top: .9rem; }
.lm-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 1rem; }
.lm-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lm-violet); font-weight: 600; text-decoration: underline; }
.lm a:focus-visible { outline: 3px solid var(--lm-violet); outline-offset: 4px; }
.lm-hero a:focus-visible { outline-color: var(--lm-lime); }
@media (max-width: 48rem) {
  .lm-hero-grid, .lm-pricing-grid, .lm-local-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .lm-hero { padding-top: 5.7rem; padding-bottom: 2rem; }
  .lm-demo { justify-self: start; }
  .lm-back { margin-bottom: 1rem; }
  .lm h1 { max-width: 16ch; }
  .lm-price-head img { max-width: 18rem; }
  .lm-gallery { gap: 1.3rem; }
}
@media (max-width: 40rem) {
  .lm-gallery { grid-template-columns: 1fr; gap: 2.4rem; }
  .lm-screen img { width: min(68%, 12rem); }
  .lm-gallery article > p { max-width: 34rem; }
  .lm-wrap { width: calc(100% - 2.5rem); }
  .lm-tariff { gap: .45rem .6rem; }
}
@media (forced-colors: active) {
  .lm-divider, .lm-divider span { background: Highlight; }
  .lm-comparison:has(input:focus-visible) { outline-color: Highlight; }
}