/* LotRevive v3 landing (landing.png at 1440 × 2669, measured at ×1.5635). Builds on /styles.css (tokens, .btn, .mk-* chrome)
   and /css/motion.css. Flat and architectural: near-black page, hairline frame rules with angled corners, tiny index marks,
   light Inter headings, JetBrains Mono caps. The hero laptop is CSS 3D around the live HTML screen (the real empty
   Overview, so no made-up figures show); the garage photograph in /img/landing is the owner's.
   Values are the 1440 measurements; narrower layouts re-flow below. */

.lp-body { background: var(--page-mk); }
.lp {
  --lp-line: #202426;          /* section rules */
  --lp-line-hi: #2c3133;       /* stepped frame rules, plan card */
  --lp-ink: var(--text);
  --lp-ink-2: #cfd2d1;         /* ledes */
  --lp-ink-3: #c3c6c5;         /* secondary copy */
  --lp-mono: #d2d5d4;          /* mono caps */
  --lp-idx: #8b8f8e;           /* tiny index marks */
  --lp-cta: #dedbd3;           /* warm off-white (hero + plan CTAs) */
  --lp-cta-hover: #ebe9e2;
  /* Content edge (the logo's x) inside a full-width box: centred 1440 container + its left padding. */
  --lp-x0: calc(max(0px, (100% - var(--mk-max)) / 2) + var(--mk-pad-l));
  position: relative;
  overflow-x: clip;
  background: var(--page-mk);
  color: var(--lp-ink-2);
}
.lp main { display: block; }
/* Copy column: 7px inside the logo (x = 81 at 1440). */
.lp-wrap { padding-left: calc(var(--mk-pad-l) + 7px); }
.lp :is(h1, h2, h3) { color: var(--lp-ink); font-weight: 400; }

/* ── Section label: tiny index mark on its hairline, then "NN │ TITLE" ── */
.lp-label { position: relative; }
.lp-idx { position: absolute; left: 0; bottom: calc(100% + 10px); display: block; height: 8px; color: var(--lp-idx); font: 400 8.5px/8px var(--mono); letter-spacing: -.04em; }
.lp-idx > i { position: absolute; left: var(--idx-x, 13px); top: 7.5px; width: var(--idx-w, 320px); height: 1px; background: #282c2e; }
.lp-eyebrow { display: flex; align-items: center; height: 11px; color: var(--lp-mono); font: 500 11px/11px var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.lp-eyebrow-n { color: #eceeed; letter-spacing: .08em; }
.lp-eyebrow-sep { flex: none; width: 1px; height: 9px; margin: 0 13px 0 8px; background: #1e2224; }

/* ── Buttons ── */
.lp-cta { --h: 50px; width: 232px; gap: 13px; padding: 1px 0 0; border: 0; background: var(--lp-cta); color: var(--primary-ink); font-size: 12px; letter-spacing: .14em; }
.lp-cta:hover { border-color: transparent; background: var(--lp-cta-hover); }
.lp-cta .icon { width: 14px; height: 14px; stroke-width: 2; }
.lp-more { display: inline-flex; align-items: center; gap: 12px; color: var(--lp-ink); font: 400 12px/12px var(--mono); letter-spacing: .14em; text-transform: uppercase; transition: color var(--dur-2) var(--ease-out); }
.lp-more .icon { width: 14px; height: 14px; stroke-width: 1.75; transition: translate var(--dur-2) var(--ease-out); }
.lp-more:hover { color: #fff; }
.lp-more:hover .icon { translate: 3px 0; }

/* ── Headings + ledes (sizes per section, as measured) ── */
.lp-h1 { max-width: 500px; margin-top: 44px; font-size: 64.5px; line-height: 65.65px; letter-spacing: .018em; }
.lp-h2 { font-size: 46px; line-height: 51.6px; letter-spacing: .015em; text-wrap: balance; }
.lp-lede { color: var(--lp-ink-2); font-size: 19.5px; line-height: 27.3px; }

/* ── Frame rules: hairline → angled corner → hairline (drawn from the content edge, full bleed both ways) ── */
.lp-frame { position: absolute; left: 0; right: 0; z-index: 3; height: calc(var(--fh) + 1px); pointer-events: none; }
.lp-frame-a, .lp-frame-b { position: absolute; height: 1px; background: var(--lp-line-hi); }
.lp-frame-a { top: 0; left: 0; width: calc(var(--lp-x0) + var(--fx)); --mo-origin: left center; }
.lp-frame-b { bottom: 0; left: calc(var(--lp-x0) + var(--fx) + var(--fw)); right: 0; background: var(--lp-line); --mo-origin: left center; }
.lp-frame-d { position: absolute; bottom: 0; left: calc(var(--lp-x0) + 18px); width: calc(var(--fx) + var(--fw) - 18px); height: 1px; background: #171b1d; --mo-origin: left center; }
.lp-frame-c { position: absolute; top: 0; left: calc(var(--lp-x0) + var(--fx)); width: var(--fw); height: calc(var(--fh) + 1px); overflow: visible; fill: none; stroke: var(--lp-line-hi); stroke-width: 1; }

/* ── 01 Hero ── */
.lp-hero { position: relative; z-index: 1; height: 800px; overflow: clip; }
.lp-hero .lp-wrap { position: relative; z-index: 2; pointer-events: none; }
/* The copy column sits above the laptop's box; only the copy itself takes the pointer, so the laptop stays reachable. */
.lp-hero-copy { pointer-events: auto; }
.lp-hero-copy { width: 490px; padding-top: 90.5px; }
.lp-label-hero { --idx-x: 38px; --idx-w: 373px; }
.lp-hero-lede { max-width: 492px; margin-top: 22px; font-size: 20px; line-height: 28.1px; }
.lp-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.lp-buy .btn { flex: none; }
/* The price under the two buttons, and the call for whoever wants one. */
.lp-price-line { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 18px; color: var(--lp-ink-3); font-size: 14px; line-height: 20px; }
.lp-price-line strong { color: var(--lp-ink); font-weight: 500; }
.lp-price-line a { color: var(--lp-ink-2); text-decoration: underline; text-decoration-color: #3a4042; text-underline-offset: 3px; transition: color var(--dur-2) var(--ease-out); }
.lp-price-line a:hover { color: #fff; }
.lp-points { display: grid; grid-template-columns: 136px 161px 1fr; width: 483px; margin: 37px 0 0; padding: 34px 0 0; border-top: 1px solid #13171a; list-style: none; }
.lp-points li:last-child { max-width: 160px; }
.lp-points li { color: var(--lp-mono); font: 400 11px/17.2px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.lp-points li + li { padding-left: 30px; border-left: 1px solid #121618; }
.lp-points span { display: block; margin-bottom: 7px; color: #eceeed; letter-spacing: .08em; }

/* Hero laptop: the live screen in a laptop drawn in CSS 3D, standing on the bare page (no photograph, no backdrop). Laid out
   on a 1440 × 1160 stage and scaled to its box (--s; --vx/--vy crop the stage). landing.js tilts it toward the pointer through
   --tilt-x/--tilt-y and lifts it as the hero scrolls away. */
@property --tilt-x { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --tilt-y { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.lp-art { position: absolute; right: max(0px, (100% - var(--mk-max)) / 2); top: 50%; translate: 0 -50%; z-index: 1; width: min(920px, 100% - 520px); aspect-ratio: 1440 / 1160; container-type: inline-size;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.lp-art.is-dragging { cursor: grabbing; }
.lp-art img { pointer-events: none; -webkit-user-drag: none; }
.lp-art-in { --vw: 1440px; --vx: 0px; --vy: 0px; --s: tan(atan2(100cqw, var(--vw))); position: absolute; left: 0; top: 0; width: 1440px; height: 1160px; transform-origin: 0 0;
  transform: translate(calc(var(--vx) * -1 * var(--s)), calc(var(--vy) * -1 * var(--s))) scale(var(--s));
  perspective: 5200px; perspective-origin: 50% 46%; }
/* The screen's light on the page around it, and the machine's contact shadow. Both fade to nothing at their edges. */
.lp-halo { position: absolute; left: 200px; top: 20px; width: 1220px; height: 960px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(182 194 178 / .075), rgb(182 194 178 / .042) 30%, rgb(182 194 178 / .02) 56%, rgb(182 194 178 / .007) 80%, transparent); }
.lp-floor { position: absolute; left: 290px; top: 930px; width: 1020px; height: 110px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 0 0 / .9), rgb(0 0 0 / .4) 62%, transparent); filter: blur(10px); }
.lp-turn, .lp-laptop, .lp-lid, .lp-deck { transform-style: preserve-3d; }
/* The containers' own planes stand at the hinge, in front of the leaning lid: only the lid and the deck take the pointer. */
.lp-turn, .lp-laptop { pointer-events: none; }
.lp-lid, .lp-deck { pointer-events: auto; }
.lp-turn { position: absolute; inset: 0; }
.lp-laptop { --rx: -13deg; --ry: 20deg; position: absolute; left: 195px; top: 101px; width: 954px; height: 634px; transform-origin: 50% 100%;
  transform: rotateX(calc(var(--rx) + var(--tilt-x))) rotateY(calc(var(--ry) + var(--tilt-y))); }
/* Lid: brushed-graphite shell (its 2 px rim frames the glass), leaning back from the hinge. Seen from behind (the entrance
   opens it from shut), the shell's own face is the lid's back, so the glass is hidden there. */
.lp-lid { position: absolute; inset: 0; border-radius: 22px 22px 12px 12px; transform-origin: 50% 100%; transform: rotateX(14deg);
  background: linear-gradient(200deg, #a3a9ac, #50565a 9%, #26292c 28%, #1b1e20 64%, #43484b); box-shadow: 0 0 0 1px rgb(0 0 0 / .55); }
.lp-lid-side { position: absolute; top: 16px; bottom: 10px; width: 6px; backface-visibility: hidden; }
.lp-lid-side.lp-r { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }
.lp-lid-side.lp-l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
.lp-lid-side {
  background: linear-gradient(#8b9195, #3a3e41 30%, #1c1f21); }
/* The glass sits 1 px proud of the shell: in the shell's own plane Chrome's hit testing stops at it and never reaches the
   screen's buttons. */
.lp-bezel { position: absolute; inset: 2px; overflow: hidden; border-radius: 20px 20px 10px 10px; background: #020304; backface-visibility: hidden; transform: translateZ(1px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05); }
/* The lid's back, seen once the laptop is turned round: brushed graphite with the LotRevive mark. */
.lp-lid-back { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; transform: translateZ(-1px) rotateY(180deg); backface-visibility: hidden;
  background: radial-gradient(75% 65% at 50% 42%, #33373a, #1e2123 72%); box-shadow: inset 0 0 0 2px #464b4e, inset 0 0 0 3px #15171a; }
.lp-lid-mark { width: 78px; height: auto; opacity: .42; filter: grayscale(1) brightness(1.5); }
.lp-bezel::before { content: ""; position: absolute; top: 4px; left: 50%; z-index: 5; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2b3f47, #07090a 70%); }
/* Glass: a soft highlight that follows the pointer (--gx/--gy) and one faint diagonal reflection. */
.lp-glass { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(60% 55% at var(--gx, 82%) var(--gy, 6%), rgb(255 255 255 / .07), transparent 70%),
    linear-gradient(116deg, transparent 54%, rgb(255 255 255 / .03) 54.2%, rgb(255 255 255 / .01) 71%, transparent 71.2%); }
.lp-hinge { position: absolute; left: 66px; right: 66px; top: calc(100% - 8px); height: 13px; border-radius: 0 0 9px 9px; transform: translateZ(-5px);
  background: linear-gradient(#1b1d1f, #060707); }
/* Deck: lies flat from the hinge toward the viewer, lit by the screen near the hinge; keyboard, trackpad, front lip, side. */
.lp-deck { position: absolute; left: 0; top: 100%; width: 954px; height: 652px; border-radius: 8px 8px 26px 26px; transform-origin: 50% 0; transform: rotateX(90deg);
  background: radial-gradient(80% 48% at 50% 0, rgb(200 210 205 / .1), transparent 72%), linear-gradient(#292c2f, #1c1f21 52%, #151719);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05); }
.lp-keys { position: absolute; left: 76px; right: 76px; top: 34px; height: 292px; border-radius: 10px; background: #08090a
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='57.29' height='48.67'%3E%3Crect x='3' y='3' width='51.29' height='42.67' rx='6' fill='%2318191b'/%3E%3C/svg%3E") 0 0 / 57.29px 48.67px; }
.lp-keys::after { content: ""; position: absolute; left: 174.9px; bottom: 3px; width: 280.4px; height: 42.67px; border-radius: 6px; background: #18191b; }
.lp-pad { position: absolute; left: 50%; top: 356px; width: 364px; height: 238px; margin-left: -182px; border-radius: 14px;
  background: linear-gradient(#202326, #1a1c1e); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
.lp-deck-front { position: absolute; left: 0; right: 0; top: 100%; height: 15px; border-radius: 0 0 16px 16px; transform-origin: 50% 0; transform: rotateX(-90deg);
  background: linear-gradient(#6a7074, #2c2f32 32%, #121415); }
.lp-deck-front::before { content: ""; position: absolute; left: 50%; top: 0; width: 132px; height: 6px; margin-left: -66px; border-radius: 0 0 9px 9px;
  background: linear-gradient(#0c0d0e, #1e2022); }
.lp-deck-side { position: absolute; top: 4px; bottom: 22px; width: 15px; backface-visibility: hidden; }
.lp-deck-side.lp-r { right: 0; transform-origin: 100% 0; transform: rotateY(-90deg); }
.lp-deck-side.lp-l { left: 0; transform-origin: 0 0; transform: rotateY(90deg); }
.lp-deck-side {
  background: linear-gradient(90deg, #4a4f53, #1b1d1f); }
.lp-screen {
  position: absolute; left: 13px; top: 13px; display: grid; grid-template-columns: 245px 1fr; width: 924px; height: 600px; overflow: hidden; border-radius: 5px;
  background: #0a0c0d; color: var(--text-2); font-family: var(--font); font-size: 14px; line-height: 1.3;
}
/* A touch of depth in the glass: the panel sits just under the bezel's reflection. */
.lp-screen::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(rgb(3 5 6 / .04), rgb(3 5 6 / .12)); }
/* The two interactions, named once under the laptop; the line fades away after the first one. */
.lp-hint { position: absolute; left: 0; right: 0; bottom: 3%; display: flex; justify-content: center; margin: 0; color: #7d8382; font: 400 10.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; pointer-events: none; transition: opacity 600ms var(--ease-out); }
.lp-hint-go::before { content: ""; display: inline-block; width: 22px; height: 1px; margin: 0 14px 3px; background: #2e3335; vertical-align: middle; }
.lp-art.is-touched .lp-hint { opacity: 0; }
@media (hover: none) { .lp-hint-m { display: none; } }
@media (hover: hover) { .lp-hint-t { display: none; } }
@media (prefers-reduced-motion: reduce) { .lp-hint-turn, .lp-hint-go::before { display: none; } }
/* Phones: the screen's tabs are too small to suggest, so the hint names only the swipe. */
@media (max-width: 600px) { .lp-hint-go { display: none; } }
.ls-side { display: flex; flex-direction: column; border-right: 1px solid #191c1d; background: #08090a; }
.ls-brand { height: 60px; padding: 22px 0 0 32px; }
.ls-brand .logo { display: block; width: auto; height: 20.5px; }
.ls-nav { display: grid; gap: 2px; padding: 27px 13px 0 20px; }
.ls-tab { display: flex; align-items: center; gap: 13px; width: 100%; height: 40px; padding: 0 13px; border: 0; border-radius: 4px; background: none; color: #c4c8c7;
  font: inherit; font-size: 15px; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.ls-tab:hover { background: #0f1314; color: #f4f5f3; }
.ls-tab.on { background: #141819; color: #f4f5f3; box-shadow: inset 1.5px 0 0 var(--accent); }
.ls-tab:focus-visible, .ls-kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ls-nav .icon { width: 18px; height: 18px; stroke-width: 1.6; }
.ls-main { display: grid; grid-template-rows: 60px 1fr; min-width: 0; }
.ls-top { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 0 22px 0 38px; border-bottom: 1px solid #16191a; }
.ls-search { display: flex; align-items: center; gap: 10px; width: 300px; height: 34px; padding: 0 10px; border: 1px solid #222627; border-radius: 4px; color: #8d9190; font-size: 12.5px; white-space: nowrap; }
.ls-search .icon { width: 15px; height: 15px; }
.ls-help .icon { display: block; width: 20px; height: 20px; color: #a9adac; stroke-width: 1.5; }
.ls-body { padding: 0 34px 0 38px; }
/* Switching sections: the new one settles in from just below. */
@media (prefers-reduced-motion: no-preference) { .ls-panel { animation: ls-in 320ms var(--ease-out); } }
@keyframes ls-in { from { opacity: 0; translate: 0 8px; } }
.ls-head { display: flex; align-items: flex-end; justify-content: space-between; height: 58px; padding-bottom: 6px; }
.ls-head b { color: #f4f5f3; font-size: 27px; font-weight: 400; line-height: 1; letter-spacing: -.005em; }
.ls-head span { display: flex; align-items: center; gap: 7px; color: #b9bdbc; font-size: 12.5px; }
.ls-head .icon { width: 13px; height: 13px; }
.ls-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 13px; margin-top: 22px; }
.ls-kpi { position: relative; display: grid; align-content: start; height: 101px; padding: 15px 14px 0 17px; border: 1px solid #222627; border-radius: 5px; background: #0c1011;
  color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.ls-kpi:hover { border-color: #3a3f41; background: #101415; }
.ls-kpi span { display: flex; align-items: center; justify-content: space-between; color: #a9adac; font-size: 12.5px; }
.ls-kpi span .icon { width: 13px; height: 13px; color: #c4c8c7; transition: translate var(--dur-2) var(--ease-out); }
.ls-kpi:hover span .icon { translate: 3px 0; color: #f4f5f3; }
/* A section's four counters (all zero until data is imported). */
.ls-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 22px; }
.ls-stat { display: grid; align-content: start; height: 100px; padding: 13px 12px 0 14px; border: 1px solid #222627; border-radius: 5px; background: #0c1011; }
.ls-stat span { overflow: hidden; color: #a9adac; font-size: 11px; letter-spacing: -.005em; white-space: nowrap; text-overflow: ellipsis; }
.ls-stat b { margin-top: 10px; color: #f4f5f3; font-size: 28px; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.ls-stat small { margin-top: 6px; color: #b9bdbc; font-size: 11.5px; line-height: 1.3; }
.ls-kpi b { margin-top: 13px; color: #f4f5f3; font-size: 31px; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.ls-kpi small { margin-top: 8px; color: #b9bdbc; font-size: 12px; }
.ls-card { margin-top: 18px; height: 260px; padding: 18px 20px 0; border: 1px solid #222627; border-radius: 5px; background: #0c1011; }
.ls-card-tall { height: 372px; }
.ls-card > b + .ls-empty { padding-top: 46px; }
.ls-card-tall > b + .ls-empty { padding-top: 92px; }
.ls-card > b { display: block; color: #f4f5f3; font-size: 17px; font-weight: 400; }
.ls-th { display: grid; grid-template-columns: 158px 112px 162px 1fr; margin-top: 14px; padding: 12px 2px 11px; border-top: 1px solid #1c2021; border-bottom: 1px solid #1c2021; color: #8d9190; font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ls-empty { display: grid; justify-items: center; padding-top: 22px; text-align: center; }
.ls-empty .icon { width: 30px; height: 30px; color: #6d7170; stroke-width: 1.25; }
.ls-empty b { margin-top: 12px; color: #f4f5f3; font-size: 15px; font-weight: 400; }
.ls-empty small { max-width: 400px; margin-top: 5px; color: #a9adac; font-size: 12.5px; line-height: 1.45; }

/* Hero → How frame: tab on the left (x 372 → 427, 788 → 847.4 at 1440). */
.lp-frame-hero { --fx: 298px; --fw: 55px; --fh: 59.5px; bottom: 0; }

/* ── Sections 02–08 (the owner's page design): the copy column on the left, the section's piece on the right ── */
.lp-sec { position: relative; }
.lp-s { padding: 112px 0 122px; }
/* 02 sits in the hero frame's tab, as the page has always had it: the label hugs the boundary and its index mark rides the
   frame line (so the hero and its frame render exactly as before). */
.lp-how { padding-top: 6.6px; }
.lp-how .lp-label { --idx-x: 12px; --idx-w: 335px; }
.lp-how .lp-idx { bottom: calc(100% + 8px); }
.lp-how .lp-idx > i { display: none; }
.lp-split { display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 760fr); column-gap: 48px; align-items: center; }
.lp-split-wide { grid-template-columns: minmax(0, 450fr) minmax(0, 830fr); }
.lp-intro { max-width: 540px; }
.lp-intro .lp-h2 { margin-top: 34px; }
.lp-intro .lp-lede { max-width: 490px; margin-top: 20px; font-size: 18.5px; line-height: 27.5px; }
.lp-intro-cta { margin-top: 36px; }
/* Secondary button: the outlined twin of .lp-cta. */
.lp-ghost { --h: 50px; width: 232px; gap: 13px; padding: 1px 0 0; border-color: #3a4042; color: var(--lp-ink); font-size: 12px; letter-spacing: .14em; }
.lp-ghost:hover { border-color: #5d6467; background: rgb(255 255 255 / .03); }
.lp-ghost .icon { width: 14px; height: 14px; stroke-width: 2; }
/* Cards share one surface: a hairline box a shade lighter than the page. */
.lp-card { border: 1px solid #23282a; border-radius: 6px; background: #090c0e; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }

/* Frame rules under each section (the corner steps right; geometry from the design at 1440). */
.lp-frame-2 { --fx: 432px; --fw: 40px; --fh: 26px; bottom: 0; }
.lp-frame-3 { --fx: 362px; --fw: 36px; --fh: 24px; bottom: 0; }
.lp-frame-4 { --fx: 468px; --fw: 32px; --fh: 22px; bottom: 0; }
.lp-frame-5 { --fx: 350px; --fw: 43px; --fh: 24px; bottom: 0; }
.lp-frame-6 { --fx: 505px; --fw: 30px; --fh: 22px; bottom: 0; }
.lp-frame-7 { --fx: 490px; --fw: 36px; --fh: 22px; bottom: 0; }

/* ── 02 How LotRevive works: six stages, 1 → 4 across, an elbow back to 5 → 6. Each stage links to its step. ── */
.lp-flow-wrap { position: relative; --row: 128px; --gap: 68px; }
.lp-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: var(--row) var(--row); row-gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.lp-flow-node { position: relative; text-align: center; }
.lp-flow-n5 { grid-area: 2 / 2; }
.lp-flow-n6 { grid-area: 2 / 3; }
.lp-flow-node a { display: grid; justify-items: center; color: inherit; text-decoration: none; }
.lp-flow-ico { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid #2c3133; border-radius: 10px; background: #0a0e0f; color: #e8eae9;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), translate var(--dur-3) var(--ease-out); }
.lp-flow-ico .icon { width: 28px; height: 28px; stroke-width: 1.4; }
.lp-flow-t { margin-top: 16px; color: #dfe2e1; font-size: 14.5px; line-height: 21px; transition: color var(--dur-2) var(--ease-out); }
.lp-flow-node a:hover .lp-flow-ico { border-color: #4b5255; background: #0f1416; color: #fff; translate: 0 -2px; }
.lp-flow-node a:hover .lp-flow-t { color: #fff; }
.lp-flow-node a:focus-visible { outline: none; }
.lp-flow-node a:focus-visible .lp-flow-ico { outline: 2px solid var(--accent); outline-offset: 3px; }
.lp-flow-arrow { position: absolute; top: 24px; left: 100%; translate: -50% 0; color: #868b8a; }
.lp-flow-arrow .icon { display: block; width: 18px; height: 18px; stroke-width: 1.5; }
.lp-flow-n4 .lp-flow-arrow { display: none; }
.lp-flow-elbow { position: absolute; left: 37.5%; right: 12.5%; top: calc(var(--row) + 4px); height: calc(var(--gap) - 14px); pointer-events: none; }
.lp-flow-elbow::before { content: ""; position: absolute; left: 12px; right: 0; top: 0; height: 50%; border-right: 1px solid #3a4042; border-bottom: 1px solid #3a4042; border-bottom-right-radius: 12px; }
.lp-flow-elbow::after { content: ""; position: absolute; left: 0; top: calc(50% - 1px); width: 13px; height: 50%; border-left: 1px solid #3a4042; border-top: 1px solid #3a4042; border-top-left-radius: 12px; }
.lp-flow-elbow b { position: absolute; left: 0; bottom: -8px; translate: calc(-50% + .5px) 0; color: #868b8a; }
.lp-flow-elbow .icon { display: block; width: 14px; height: 14px; stroke-width: 1.6; }

/* ── 03 Inside the product: a row of screens (five in view at 1440) that scrolls; the arrows step it. ── */
.lp-product-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.lp-xp-nav { display: flex; gap: 10px; flex: none; margin-bottom: 62px; }
.lp-xp-nav[hidden] { display: none; }
.lp-xp-btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #2c3133; border-radius: 6px; background: #0a0e0f; color: #e3e5e4; cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.lp-xp-btn:hover:not(:disabled) { border-color: #4b5255; color: #fff; }
.lp-xp-btn:disabled { opacity: .35; cursor: default; }
.lp-xp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-xp-btn .icon { width: 17px; height: 17px; stroke-width: 1.6; }
.lp-xp { margin-top: 50px; }
.lp-xp-track { --n: 5; --gap: 16px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); gap: var(--gap);
  margin: 0; padding: 2px 2px 6px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: none; }
.lp-xp-track::-webkit-scrollbar { display: none; }
.lp-xp-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.lp-xp-item { scroll-snap-align: start; }
.lp-xp-card { display: flex; flex-direction: column; height: 100%; padding: 13px 13px 22px; color: inherit; text-decoration: none; }
.lp-xp-card:hover { border-color: #3c4245; background: #0c1012; }
.lp-xp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-xp-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; padding: 0 5px; color: var(--lp-ink); font-size: 17px; line-height: 22px; }
.lp-xp-t .icon { flex: none; width: 15px; height: 15px; color: #a3a8a7; opacity: 0; translate: -3px 3px; transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out); }
.lp-xp-card:hover .lp-xp-t .icon, .lp-xp-card:focus-visible .lp-xp-t .icon { opacity: 1; translate: 0 0; }
.lp-xp-p { margin-top: 8px; padding: 0 5px; color: #b9bdbc; font-size: 14px; line-height: 21px; }
.lp-xp-note { margin-top: 22px; color: #7d8382; font: 400 10.5px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
/* Screen previews: layouts only, drawn in bars, dots and boxes (no names, figures or dates). */
.lp-xp-pv { --sk: #1c2123; --sk-hi: #2b3134; --sk-dim: #14181a; --rule: #111517; display: block; height: 188px; padding: 12px 12px 0; overflow: hidden; border: 1px solid #191d1f; border-radius: 4px;
  background: linear-gradient(#070a0b, #05080a); transition: border-color var(--dur-2) var(--ease-out); }
.lp-xp-card:hover .lp-xp-pv { border-color: #23282a; }
.pv-l { display: block; width: var(--w); height: 5px; border-radius: 3px; background: var(--sk); }
.pv-l + .pv-l { margin-top: 5px; }
.pv-hi { height: 6px; background: var(--sk-hi); }
.pv-dim { background: var(--sk-dim); }
.pv-r { margin-left: auto; }
.pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 18px; margin-bottom: 9px; }
.pv-bar .pv-l { flex: none; }
.pv-row { display: flex; align-items: center; gap: 9px; padding: 6.5px 0; border-top: 1px solid var(--rule); }
.pv-row > span { flex: 1; min-width: 0; }
.pv-sq { flex: none; width: 24px; height: 17px; border-radius: 2px; background: #161b1d; }
.pv-av { flex: none; width: 17px; height: 17px; border-radius: 50%; background: #1c2123; }
.pv-p { flex: none; width: 28px; height: 10px; border: 1px solid #262c2e; border-radius: 5px; }
.pv-p-s { width: 20px; }
.pv-p-w { width: 42px; height: 11px; }
.pv-p-on { border-color: rgb(var(--ok-rgb) / .45); background: rgb(var(--ok-rgb) / .14); }
.pv-dot { flex: none; width: 8px; height: 8px; border: 1px solid #2c3234; border-radius: 50%; }
.pv-dot-on { border-color: #868b8a; }
.pv-chev { flex: none; width: 5px; height: 5px; margin-right: 3px; border-top: 1px solid #3a4042; border-right: 1px solid #3a4042; rotate: 45deg; }
.pv-tabs, .pv-arrows { display: flex; gap: 4px; }
.pv-tabs i { width: 17px; height: 8px; border-radius: 3px; background: #15191b; }
.pv-arrows i { width: 10px; height: 10px; border: 1px solid #262c2e; border-radius: 2px; }
.pv-split { display: grid; grid-template-columns: 16px 1fr; gap: 10px; height: 100%; }
.pv-col { display: grid; align-content: start; justify-items: center; gap: 19px; padding-top: 34px; border-right: 1px solid var(--rule); }
.pv-cal { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; gap: 10px 4px; padding-top: 6px; border-top: 1px solid var(--rule); }
.pv-cal b { width: 11px; height: 4px; margin-bottom: 2px; border-radius: 2px; background: #1c2123; }
.pv-cal i { width: 5px; height: 5px; margin: 2px 0; border-radius: 50%; background: #23292b; }
.pv-cal .pv-today { box-shadow: 0 0 0 4px #06090a, 0 0 0 5px #4b5255; }
.pv-row-t { gap: 10px; padding: 6px 0; }
.pv-row-t .pv-l + .pv-l { margin-top: 0; }
.pv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pv-kpis i { display: grid; gap: 6px; padding: 8px 7px; border: 1px solid #15191b; border-radius: 3px; }
.pv-kpis b { width: 70%; height: 4px; border-radius: 2px; background: #1c2123; }
.pv-kpis s { width: 34%; height: 8px; border-radius: 2px; background: #2b3134; }
.pv-chart { position: relative; height: 50px; margin-top: 8px; border: 1px solid #15191b; border-radius: 3px; background: repeating-linear-gradient(transparent 0 11px, #0d1113 11px 12px); }
.pv-chart i { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 1px; background: #4b5255; }

/* ── 04 Built for dealerships: four verticals, each a line drawing on a lit studio floor. ── */
.lp-vx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.lp-vx-card { overflow: hidden; padding-bottom: 24px; }
.lp-vx-card:hover { border-color: #3c4245; }
.lp-vx-art { position: relative; display: grid; align-items: end; height: 212px; padding: 0 9px 30px; overflow: hidden; border-bottom: 1px solid #1a1e20;
  background: radial-gradient(80% 62% at 50% 10%, rgb(220 228 224 / .09), transparent 72%), linear-gradient(#0d1113, #07090a 72%); }
.lp-vx-art::before { content: ""; position: absolute; left: 0; right: 0; bottom: 31px; height: 1px; background: linear-gradient(90deg, transparent, #2c3235 18%, #2c3235 82%, transparent); }
.lp-vx-art::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 26px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .75), transparent); }
.lp-vx-art svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: #c3c8c6; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round;
  transition: stroke var(--dur-2) var(--ease-out), translate var(--dur-3) var(--ease-out); }
.lp-vx-art .vx-body { fill: #0d1214; stroke: #dfe3e1; }
.lp-vx-art .vx-tyre { fill: #090c0d; stroke-width: 1.5; }
.lp-vx-art .vx-hub { fill: #c3c8c6; stroke: none; }
.lp-vx-art .vx-fine { stroke: #6f7675; }
.lp-vx-art .vx-knob { stroke: #8d9392; stroke-width: 2.2; stroke-dasharray: 2.4 2.6; }
.lp-vx-card:hover svg { stroke: #e6e9e8; translate: -3px 0; }
.lp-vx-n { position: absolute; left: 14px; top: 13px; color: #6f7675; font: 400 9.5px/1 var(--mono); letter-spacing: .1em; }
.lp-vx-card h3 { margin: 20px 18px 0; font-size: 16px; font-weight: 500; line-height: 20px; }
.lp-vx-card p { margin: 8px 18px 0; color: #b9bdbc; font-size: 14px; line-height: 21px; }

/* ── 05 A better way: without / with, side by side. ── */
.lp-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-cmp-col { padding: 30px 34px 36px; }
.lp-cmp-col + .lp-cmp-col { border-left: 1px solid #23282a; }
.lp-cmp h3 { padding-bottom: 16px; border-bottom: 1px solid #1d2123; color: #d7dad9; font-size: 16px; font-weight: 500; line-height: 20px; }
.lp-cmp-on h3 { color: #f4f5f3; }
.lp-cmp ul { display: grid; gap: 22px; margin: 24px 0 0; padding: 0; list-style: none; }
.lp-cmp li { display: flex; align-items: center; gap: 16px; color: #d3d6d5; font-size: 15px; line-height: 21px; }
.lp-cmp-off li { color: #a3a8a7; }
.lp-cmp-off .icon { flex: none; width: 21px; height: 21px; color: #7d8382; stroke-width: 1.5; }
.lp-tick { display: grid; place-items: center; flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--ok); color: #08130d; }
.lp-tick .icon { width: 12px; height: 12px; stroke-width: 3; }

/* ── 06 What LotRevive is not: four cards. ── */
.lp-not { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.lp-not-card { min-height: 288px; padding: 30px 22px 26px; }
.lp-not-card:hover { border-color: #3c4245; }
.lp-not-card > .icon { display: block; width: 32px; height: 32px; color: #e3e5e4; stroke-width: 1.4; }
.lp-not-card h3 { margin-top: 26px; font-size: 16px; font-weight: 500; line-height: 22px; }
.lp-not-card p { margin-top: 12px; color: #b9bdbc; font-size: 14px; line-height: 21px; }

/* ── 07 Connect your data: what comes in → LotRevive → what it does. Joins are hairlines with small arrowheads. ── */
.lp-df { --rule: #3a4042; display: grid; grid-template-columns: minmax(0, 244fr) 46px 140px 48px minmax(0, 256fr); align-items: center; }
.lp-df-in, .lp-df-out { display: grid; margin: 0; padding: 0; list-style: none; }
.lp-df-in { gap: 14px; }
.lp-df-in li { position: relative; display: flex; align-items: center; gap: 14px; height: 88px; padding: 0 18px; }
.lp-df-in li::after { content: ""; position: absolute; left: 100%; top: 50%; width: 23px; height: 1px; margin-left: 1px; background: var(--rule); }
.lp-df-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: #e3e5e4; }
.lp-df-ico .icon { width: 26px; height: 26px; stroke-width: 1.4; }
.lp-df-in b { display: block; color: var(--lp-ink); font-size: 15px; font-weight: 500; line-height: 20px; }
.lp-df-in small { display: block; margin-top: 3px; color: #a3a8a7; font-size: 13px; line-height: 18px; }
.lp-df-join, .lp-df-fan { position: relative; align-self: stretch; }
.lp-df-join::before { content: ""; position: absolute; left: 23px; top: 44px; bottom: 44px; width: 1px; background: var(--rule); }
.lp-df-join b { position: absolute; left: 23px; right: 1px; top: 50%; height: 1px; background: var(--rule); }
.lp-df-join .icon { position: absolute; right: -5px; top: -7px; width: 14px; height: 14px; max-width: none; color: #868b8a; stroke-width: 1.6; }
.lp-df-core { display: grid; justify-items: center; align-content: center; gap: 12px; height: 140px; border: 1px solid #343a3d; border-radius: 8px; background: #0b0f11; color: var(--lp-ink); font-size: 14px; line-height: 1; }
.lp-df-mark { display: block; width: 30px; height: auto; }
.lp-df-fan::before { content: ""; position: absolute; left: 0; width: 24px; top: 50%; height: 1px; background: var(--rule); }
.lp-df-fan::after { content: ""; position: absolute; left: 24px; top: 26px; bottom: 26px; width: 1px; background: var(--rule); }
.lp-df-out { gap: 8px; }
.lp-df-out li { position: relative; display: flex; align-items: center; gap: 14px; height: 52px; color: #dfe2e1; font-size: 14.5px; line-height: 20px; }
.lp-df-out li::before { content: ""; position: absolute; right: calc(100% + 1px); top: 50%; width: 23px; height: 1px; background: var(--rule); }
.lp-df-out li::after { content: ""; position: absolute; right: calc(100% + 2px); top: calc(50% - 3px); width: 6px; height: 6px; border-top: 1px solid #868b8a; border-right: 1px solid #868b8a; rotate: 45deg; }
.lp-df-out .lp-df-ico { width: 46px; height: 46px; border: 1px solid #2c3133; border-radius: 8px; background: #0a0e0f; }
.lp-df-out .lp-df-ico .icon { width: 20px; height: 20px; stroke-width: 1.5; }

/* ── 08 Ready to get started: the next step on the left, the price on the right of a rule. ── */
.lp-final { padding-bottom: 104px; }
.lp-final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 48px; align-items: center; }
.lp-final .lp-intro { max-width: 680px; }
.lp-final .lp-intro .lp-lede { max-width: 560px; }
.lp-final-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.lp-final-price { display: grid; align-content: center; justify-items: start; min-height: 240px; padding-left: 56px; border-left: 1px solid #23282a; }
.lp-final-amount strong { display: block; color: var(--lp-ink); font-size: 30px; font-weight: 400; line-height: 36px; letter-spacing: .01em; }
.lp-final-amount span { display: block; margin-top: 6px; color: var(--lp-ink-2); font-size: 17px; line-height: 24px; }
.lp-final-note { margin-top: 16px; color: #8d9291; font-size: 13.5px; }
.lp-final-price .lp-more { margin-top: 24px; }

/* ── Motion ── */
/* Hero entrance at first paint (above the fold, so motion.js leaves it alone): copy rises, the screen powers on. */
@media (prefers-reduced-motion: no-preference) {
  .lp-hero-copy > * { animation: mo-rise 820ms var(--ease-out) both; }
  .lp-hero-copy > :nth-child(2) { animation-delay: 70ms; }
  .lp-hero-copy > :nth-child(3) { animation-delay: 140ms; }
  .lp-hero-copy > :nth-child(4) { animation-delay: 210ms; }
  .lp-hero-copy > :nth-child(5) { animation-delay: 280ms; }
  .lp-hero-copy > :nth-child(6) { animation-delay: 350ms; }
  /* The laptop arrives shut and turned away, swings round, opens, and the screen powers on. */
  .lp-art { animation: mo-fade 900ms var(--ease-out) both; }
  .lp-turn { animation: lp-turn 1700ms 80ms var(--ease-out) backwards; }
  .lp-lid { animation: lp-open 1500ms 300ms cubic-bezier(.3, .7, .2, 1) backwards; }
  .lp-screen > * { animation: lp-power 900ms 1250ms var(--ease-out) both; }
  /* Below the fold (stacked layouts), the entrance waits until the laptop scrolls into view (landing.js). */
  .lp-hint { animation: mo-fade 800ms 1900ms var(--ease-out) both; }
  .lp-art.lp-wait, .lp-art.lp-wait :is(.lp-turn, .lp-lid, .lp-screen > *, .lp-hint) { animation-play-state: paused; }
}
@keyframes lp-turn { from { transform: translateY(46px) rotateY(-24deg); } }
@keyframes lp-open { from { transform: rotateX(-86deg); } }
@keyframes lp-power { from { opacity: 0; } }

/* ── Responsive ── */
/* The design's line breaks hold only at the full 1440 layout; narrower columns reflow naturally. */
@media (max-width: 1399px) {
  .lp-br { display: none; }
}
@media (max-width: 1199px) {
  .lp-h1 { font-size: clamp(40px, 5.25vw, 64.5px); line-height: 1.02; }
  .lp-h2 { font-size: clamp(32px, 3.85vw, 46px); line-height: 1.14; }
  .lp-hero-copy { width: min(490px, 46vw); }
  .lp-split, .lp-split-wide { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .lp-intro, .lp-final .lp-intro { max-width: 680px; }
.lp-final .lp-intro .lp-lede { max-width: 560px; }
  .lp-intro .lp-lede { max-width: 600px; }
  .lp-xp-track { --n: 3.3; }
  .lp-xp-nav { margin-bottom: 0; }
  .lp-product-head { align-items: flex-end; }
}
/* Tablet and phone: one column, frame notches dropped (plain section rules). */
@media (max-width: 1099px) {
  .lp-hero { display: flex; flex-direction: column; height: auto; }
  .lp-hero .lp-wrap { order: 1; }
  .lp-hero-copy { width: auto; max-width: 640px; padding-top: 72px; }
  .lp-h1 { max-width: 12em; text-wrap: balance; }
  .lp-hero-lede { max-width: 560px; }
  .lp-points { width: auto; max-width: 560px; }
  /* Stacked: the whole laptop under the copy, turned a little less so the screen faces the reader. */
  .lp-art { order: 2; position: relative; top: auto; right: auto; translate: none; width: min(100%, 760px); aspect-ratio: 1440 / 1060; margin: 20px auto 0; }
  .lp-art-in { --vy: 50px; }
  .lp-laptop { --ry: 14deg; }
  .lp-frame-a, .lp-frame-c, .lp-frame-d { display: none; }
  .lp-frame-b { left: 0; background: var(--lp-line); }
  .lp-s { padding: 88px 0 96px; }
  .lp-how { padding-top: 40px; }
  .lp-wrap.lp-split, .lp-wrap.lp-final-grid, .lp-product .lp-wrap { padding-right: var(--mk-pad-r); }
  .lp-final-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .lp-final-price { padding-left: 40px; }
}
@media (max-width: 899px) {
  .lp-xp-track { --n: 2.4; }
  .lp-vx, .lp-not { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-not-card { min-height: 0; }
  .lp-final-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .lp-final-price { min-height: 0; padding: 36px 0 0; border-left: 0; border-top: 1px solid #23282a; }
}
/* Phones: the workflow and the data flow run top to bottom. */
@media (max-width: 767px) {
  .lp-flow-wrap { max-width: 420px; }
  .lp-flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 26px; }
  .lp-flow-n5, .lp-flow-n6 { grid-area: auto; }
  .lp-flow-node { text-align: left; }
  .lp-flow-node a { grid-template-columns: 56px minmax(0, 1fr); align-items: center; justify-items: start; column-gap: 18px; }
  .lp-flow-ico { width: 56px; height: 56px; }
  .lp-flow-ico .icon { width: 24px; height: 24px; }
  .lp-flow-t { margin-top: 0; }
  .lp-flow-br { display: none; }
  .lp-flow-arrow, .lp-flow-n4 .lp-flow-arrow { display: block; top: calc(100% + 4px); left: 28px; translate: -50% 0; rotate: 90deg; }
  .lp-flow-arrow .icon { width: 15px; height: 15px; }
  .lp-flow-elbow { display: none; }
  .lp-df { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .lp-df-in li::after, .lp-df-join::before, .lp-df-out li::before, .lp-df-out li::after { display: none; }
  .lp-df-join, .lp-df-fan { height: 46px; }
  .lp-df-join b { left: 50%; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .lp-df-join .icon { right: auto; top: auto; bottom: -7px; left: -7px; max-width: none; rotate: 90deg; }
  .lp-df-fan::before { display: block; left: 50%; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .lp-df-fan::after { display: block; left: calc(50% - 3px); top: auto; bottom: 8px; width: 7px; height: 7px; border-right: 1px solid #868b8a; border-bottom: 1px solid #868b8a; background: none; rotate: 45deg; }
  .lp-df-core { height: 100px; }
  .lp-df-out { grid-template-columns: minmax(0, 1fr); padding: 6px 18px 4px; border: 1px solid #23282a; border-radius: 6px; background: #090c0e; }
  .lp-cmp { grid-template-columns: minmax(0, 1fr); }
  .lp-cmp-col + .lp-cmp-col { border-left: 0; border-top: 1px solid #23282a; }
}
@media (max-width: 599px) {
  .lp-h1 { font-size: 40px; line-height: 1.04; letter-spacing: .01em; }
  .lp-h2 { font-size: 32px; line-height: 1.16; letter-spacing: .01em; }
  .lp-lede, .lp-hero-lede, .lp-intro .lp-lede { font-size: 17px; line-height: 25.5px; }
  .lp-hero-copy { padding-top: 56px; }
  .lp-h1 { margin-top: 36px; }
  .lp-buy { gap: 12px; }
  .lp-buy .btn { width: 100%; }
  .lp-points { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .lp-points li + li { padding: 18px 0 0; border-left: 0; border-top: 1px solid #13171a; }
  .lp-points li:last-child { max-width: none; }
  .lp-points span { margin-bottom: 5px; }
  .lp-s { padding: 72px 0 80px; }
  .lp-how { padding-top: 40px; }
  .lp-intro .lp-h2 { margin-top: 30px; }
  .lp-intro-cta.lp-cta, .lp-intro-cta .lp-cta, .lp-final-ctas .btn { width: 100%; }
  .lp-product-head { display: block; }
  .lp-xp-nav { margin-top: 28px; }
  .lp-xp-track { --n: 1.25; --gap: 12px; }
  .lp-vx { gap: 12px; }
  .lp-vx-art { height: 168px; padding: 0 8px 22px; }
  .lp-vx-art::before { bottom: 23px; }
  .lp-vx-art::after { bottom: 18px; }
  .lp-vx-card h3 { margin: 16px 14px 0; }
  .lp-vx-card p { margin: 6px 14px 0; font-size: 13.5px; }
  .lp-not { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lp-not-card { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 18px; padding: 22px 20px; }
  .lp-not-card > .icon { grid-row: span 2; }
  .lp-not-card h3 { margin-top: 4px; }
  .lp-not-card p { margin-top: 6px; }
  .lp-cmp-col { padding: 24px 22px 28px; }
}