/*
  Public product page (templates/public/landing.html). Built on the console's
  tokens, buttons, badges and tone classes (workspace/css/console.css,
  design.md 2.1-2.6): one brand blue, Geist, pill controls, soft radii, no glass.
  Unlike the console, this page moves on its own: sections rise in as they
  scroll into view (landing.js adds .in), and the hero's chips and glow drift.
  prefers-reduced-motion turns all of it off.
*/

.lp {
  margin: 0;
  --lp-wrap: 1180px;
  --lp-radius: 20px;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
html:has(body.lp) { scroll-behavior: smooth; scroll-padding-top: 76px; }
/* A thin scrollbar in the page's own colours. */
html:has(body.lp) { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
body.lp::-webkit-scrollbar, html:has(body.lp)::-webkit-scrollbar { width: 6px; height: 6px; }
html:has(body.lp)::-webkit-scrollbar-track { background: transparent; }
html:has(body.lp)::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
html:has(body.lp)::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.lp img { max-width: 100%; height: auto; display: block; }
.lp h1, .lp h2, .lp h3 { margin: 0; color: var(--text); font-weight: 650; letter-spacing: -0.03em; }
.lp h1 { font-size: clamp(42px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -0.045em; }
.lp h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; }
.lp h3 { font-size: 19px; letter-spacing: -0.015em; line-height: 1.3; }
.lp p { margin: 0; }
.lp .i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lp-wrap { width: 100%; max-width: var(--lp-wrap); margin: 0 auto; padding: 0 28px; }
.lp-accent { color: var(--brand); }
.lp-warn { color: var(--danger, #C42F3B); }
.lp-muted { color: var(--text-3); font-size: 13.5px; }
.lp-sub { color: var(--text-2); font-size: 17.5px; line-height: 1.6; margin-top: 16px; max-width: 64ch; }
.lp-lead { color: var(--text-2); font-size: 19px; line-height: 1.6; margin-top: 22px; max-width: 54ch; }
.lp-num { font-variant-numeric: tabular-nums; }
.lp-mt { margin-top: 64px; }
.lp-h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.lp-h3 .i { color: var(--brand); width: 20px; height: 20px; }
.lp-skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--brand); color: #fff; padding: 8px 14px; border-radius: 999px; }
.lp-skip:focus { left: 12px; }

/* buttons (console .btn, larger here) */
.lp .btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.lp .btn.lg { padding: 13px 22px; font-size: 15.5px; border-radius: 999px; }
.lp .btn.lg .i { width: 18px; height: 18px; }
.lp-block { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------- header */
.lp-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease); }
.lp-head.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -18px rgba(17, 24, 39, .25); }
.lp-head-row { display: flex; align-items: center; gap: 24px; height: 68px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
.lp-brand img { width: 30px; height: 30px; }
.lp-brand.sm { font-size: 14.5px; gap: 8px; }
.lp-brand.sm img { width: 22px; height: 22px; }
.lp-nav { display: flex; gap: 4px; margin: 0 auto; }
.lp-nav a { color: var(--text-2); text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 8px 12px; border-radius: 999px; transition: background .15s var(--ease, ease), color .15s var(--ease, ease); }
.lp-nav a:hover, .lp-nav a.on { color: var(--text); background: var(--hover); }
.lp-head-actions { display: flex; align-items: center; gap: 8px; min-width: 30px; justify-content: flex-end; }
.lp-menu { display: none; }

/* ---------------------------------------------------------------- hero */
.lp-hero { position: relative; padding: 72px 0 56px; overflow: hidden; }
.lp-glow { position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(42% 46% at 72% 30%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%),
    radial-gradient(30% 38% at 12% 70%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 92%); mask-image: linear-gradient(180deg, #000 55%, transparent 92%);
  animation: lp-drift 18s var(--ease, ease) infinite alternate; }
.lp-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.lp-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); font-size: 13.5px; font-weight: 550; margin-bottom: 22px; }
.lp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 50%, transparent); animation: lp-pulse 2.4s infinite; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.lp-cta.center { justify-content: center; }
.lp-checks { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--text-2); font-size: 14.5px; }
.lp-checks li { display: inline-flex; align-items: center; gap: 7px; }
.lp-checks .i { color: var(--ok, #11824B); width: 16px; height: 16px; stroke-width: 2.4; }
.lp-hero-visual { position: relative; }
.lp-window { margin: 0; border-radius: var(--lp-radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(17, 24, 39, .45), 0 12px 32px -18px rgba(37, 99, 235, .3); }
.lp-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: var(--sunk); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); }
.lp-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.lp-bar i:nth-child(1) { background: #FF5F57; } .lp-bar i:nth-child(2) { background: #FEBC2E; } .lp-bar i:nth-child(3) { background: #28C840; }
.lp-bar span { margin-left: 8px; }
.lp-tilt { transform: perspective(1600px) rotateY(-7deg) rotateX(3deg); transition: transform .6s var(--ease, ease); }
.lp-hero-visual:hover .lp-tilt { transform: perspective(1600px) rotateY(-2deg) rotateX(1deg); }
.lp-float { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--pop); border: 1px solid var(--line); box-shadow: var(--shadow-pop); font-size: 14px; font-weight: 550; color: var(--text); animation: lp-float 6s ease-in-out infinite; }
.lp-float .i { color: var(--brand); }
.lp-float.t-ok .i { color: var(--tone); }
.lp-float-a { left: -22px; top: 18%; }
.lp-float-b { right: -14px; top: -16px; animation-delay: -2s; }
.lp-float-c { right: 6%; bottom: -26px; border-radius: 18px; padding: 10px 18px 10px 10px; animation-delay: -4s; }
.lp-float-c strong { display: block; font-size: 15px; } .lp-float-c small { display: block; color: var(--text-3); font-size: 12.5px; font-weight: 500; }

/* score ring */
.lp-ring { --p: 0; --size: 46px; position: relative; display: inline-grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%; flex: none;
  background: conic-gradient(var(--ring, var(--brand)) calc(var(--p) * 1turn * var(--on, 1)), var(--sunk) 0); transition: --on 1s; }
.lp-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--pop); }
.lp-ring b, .lp-ring small { position: relative; z-index: 1; }
.lp-ring b { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.lp-ring.lg { --size: 110px; }
.lp-ring.lg::after { inset: 10px; }
.lp-ring.lg b { font-size: 30px; line-height: 1; }
.lp-ring.lg small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 32px; position: absolute; }
.lp-ring.ok { --ring: var(--ok, #11824B); }

/* ---------------------------------------------------------------- stats */
.lp-stats { padding: 8px 0 40px; }
.lp-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lp-stat { padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.lp-stat b { display: block; font-size: 38px; font-weight: 650; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.lp-stat span { color: var(--text-2); font-size: 14px; }

/* ---------------------------------------------------------------- sections */
.lp-section { padding: 104px 0; }
.lp-tint { background: linear-gradient(180deg, var(--rail), var(--bg)); }
.lp-head-block { max-width: 760px; margin-bottom: 48px; }
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lp-split-rev > :first-child { order: 0; }
.lp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--lp-radius); padding: 28px; }
.lp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.lp-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); font-size: 15.5px; }
.lp-list li .i { color: var(--brand); margin-top: 3px; }
.lp-list.compact { margin-top: 14px; gap: 10px; }
.lp-list.compact li { font-size: 14.5px; }

/* problem: a week of calls */
.lp-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 20px; border-radius: var(--lp-radius); border: 1px solid var(--line); background: var(--surface); }
.lp-cal-day { text-align: center; font-size: 12.5px; color: var(--text-3); font-weight: 550; padding-bottom: 4px; }
.lp-cal-slot { display: flex; align-items: center; gap: 6px; padding: 8px 10px; line-height: 1.25; min-width: 0; border-radius: 10px; font-size: 12px; font-weight: 550; color: var(--tone); background: var(--tone-soft); --tone: var(--danger, #C42F3B); --tone-soft: color-mix(in srgb, var(--danger, #C42F3B) 12%, transparent); opacity: 0; transform: scale(.85); }
.lp-cal-slot:nth-child(3n) { --tone: var(--warn, #A45A00); --tone-soft: color-mix(in srgb, var(--warn, #A45A00) 13%, transparent); }
.lp-cal-slot .i { width: 13px; height: 13px; }
.lp-cal.in .lp-cal-slot { animation: lp-pop .45s var(--spring, ease) forwards; animation-delay: calc(var(--i) * 55ms + 150ms); }

/* steps */
.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.lp-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 0; border: 1px solid var(--line); border-radius: var(--lp-radius); background: var(--surface); overflow: hidden; }
.lp-step p { color: var(--text-2); font-size: 14.5px; }
.lp-step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 650; font-size: 15px; }
.lp-shot { margin: 8px -22px 0; border-top: 1px solid var(--line); background: var(--sunk); aspect-ratio: 16 / 10; overflow: hidden; }
.lp-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .6s var(--ease, ease); }
.lp-step:hover .lp-shot img { transform: scale(1.04); }

/* interviewers */
.lp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lp-interviewer h3 { font-size: 24px; margin: 14px 0 8px; }
.lp-interviewer p { color: var(--text-2); }
.lp-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--tone); background: var(--tone-soft); }
.lp-tag .i { width: 15px; height: 15px; }
.lp-chips { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chips li { padding: 6px 12px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.lp-chips-lg li { font-size: 14px; }
.lp-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.lp-mini-grid div { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.lp-mini-grid .i { grid-row: span 2; color: var(--brand); margin-top: 2px; }
.lp-mini-grid b { font-size: 15px; } .lp-mini-grid span { color: var(--text-3); font-size: 13.5px; }

/* report */
.lp-report { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: start; }
.lp-score-head { display: flex; align-items: center; gap: 24px; }
.lp-score-head > div { display: grid; gap: 6px; justify-items: start; }
.lp-badge { font-size: 15px; padding: 6px 14px; }
.lp-bars { display: grid; gap: 16px; margin-top: 28px; }
.lp-barrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 14.5px; font-weight: 550; }
.lp-barrow i { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: var(--sunk); position: relative; overflow: hidden; }
.lp-barrow i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #15975A, var(--ok, #11824B)); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease, ease); }
.lp-score.in .lp-barrow i::after { transform: scaleX(1); }
.lp-score.in .lp-barrow:nth-child(2) i::after { transition-delay: .08s; } .lp-score.in .lp-barrow:nth-child(3) i::after { transition-delay: .16s; }
.lp-score.in .lp-barrow:nth-child(4) i::after { transition-delay: .24s; } .lp-score.in .lp-barrow:nth-child(5) i::after { transition-delay: .32s; }
.lp-score.in .lp-barrow:nth-child(6) i::after { transition-delay: .4s; }
.lp-report-side { display: grid; gap: 20px; }
.lp-quote { margin: 0; }
.lp-quote > .i { color: var(--brand); width: 26px; height: 26px; }
.lp-quote p { font-size: 20px; line-height: 1.45; font-weight: 550; letter-spacing: -0.01em; margin-top: 10px; }
.lp-quote footer { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--text-3); font-size: 14px; }
.lp-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lp-metrics b { display: block; font-size: 28px; font-weight: 650; letter-spacing: -0.03em; }
.lp-metrics span { color: var(--text-3); font-size: 13px; }

/* integrity */
.lp-trust { display: flex; gap: 24px; align-items: center; }
.lp-trust > div { display: grid; gap: 6px; flex: 1; }
.lp-trust b { font-size: 18px; }
.lp-timeline { position: relative; height: 8px; border-radius: 999px; background: var(--sunk); margin-top: 12px; }
.lp-timeline i { position: absolute; left: var(--x); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--brand); border: 3px solid var(--pop); box-shadow: 0 0 0 1px var(--line); }
.lp-timeline i.warn { background: var(--warn, #A45A00); }

/* gallery + integrations */
.lp-gallery { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }
.lp-icon-card .i { width: 26px; height: 26px; color: var(--brand); padding: 10px; box-sizing: content-box; border-radius: 14px; background: var(--brand-soft); }
.lp-icon-card h3 { margin: 18px 0 8px; }
.lp-icon-card p { color: var(--text-2); font-size: 15px; }

/* every feature */
.lp-features { columns: 3 320px; column-gap: 20px; }
.lp-feature { break-inside: avoid; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.lp-feature summary { display: flex; align-items: center; gap: 12px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 600; font-size: 16px; }
.lp-feature summary::-webkit-details-marker { display: none; }
.lp-feature summary > .i:first-child { color: var(--brand); width: 20px; height: 20px; }
.lp-feature summary em { font-style: normal; font-size: 12.5px; color: var(--text-3); background: var(--sunk); border-radius: 999px; padding: 2px 9px; margin-left: auto; font-weight: 550; }
.lp-feature summary > .i:last-child { color: var(--text-3); transition: transform .25s var(--ease, ease); }
.lp-feature[open] summary > .i:last-child { transform: rotate(180deg); }
.lp-feature ul { list-style: none; margin: 0; padding: 0 20px 18px; display: grid; gap: 9px; }
.lp-feature li { display: flex; gap: 9px; font-size: 14.5px; color: var(--text-2); animation: lp-fade .35s var(--ease, ease) both; }
.lp-feature li .i { width: 15px; height: 15px; color: var(--ok, #11824B); stroke-width: 2.2; margin-top: 4px; }

/* pricing */
.lp-price-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.lp-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line); }
.lp-seg button { border: 0; background: transparent; color: var(--text-2); font: inherit; font-weight: 550; font-size: 14.5px; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: background .2s var(--ease, ease), color .2s var(--ease, ease), box-shadow .2s var(--ease, ease); }
.lp-seg button.on { background: var(--pop); color: var(--text); box-shadow: var(--shadow-raise, 0 1px 3px rgba(0,0,0,.12)); }
.lp-rate { position: relative; display: flex; flex-direction: column; gap: 12px; transition: transform .3s var(--spring, ease), box-shadow .3s var(--ease, ease); }
.lp-rate:hover, .lp-plan:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(17, 24, 39, .35); }
.lp-rate.featured, .lp-plan.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 24px 48px -30px rgba(37, 99, 235, .45); }
.lp-flag { position: absolute; top: -12px; right: 20px; padding: 4px 12px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 600; }
.lp-rate-n { display: flex; align-items: baseline; gap: 8px; }
.lp-rate-n b { font-size: 44px; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; transition: opacity .2s var(--ease, ease); }
.lp-rate-n b.swap { opacity: 0; }
.lp-rate-n span { color: var(--text-3); }
.lp-rate ul, .lp-plan ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 9px; }
.lp-rate li, .lp-plan li { display: flex; gap: 9px; font-size: 14.5px; color: var(--text-2); }
.lp-rate li .i, .lp-plan li .i { width: 16px; height: 16px; margin-top: 3px; color: var(--ok, #11824B); stroke-width: 2.2; }
.lp-rate li.off, .lp-plan li.off { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.lp-rate li.off .i, .lp-plan li.off .i { color: var(--text-3); }
.lp-plan li .i { color: var(--brand); stroke-width: 1.9; }
.lp-rate-ex { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.lp-calc { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 32px; align-items: center; margin-top: 24px; }
.lp-calc h3 { margin-bottom: 6px; }
.lp-calc-controls { display: grid; gap: 14px; }
.lp-calc input[type=range] { width: 100%; accent-color: var(--brand); }
.lp-calc-out { display: grid; justify-items: end; text-align: right; min-width: 220px; }
.lp-calc-out b { font-size: 40px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.lp-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lp-plan { position: relative; display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--spring, ease), box-shadow .3s var(--ease, ease); }
.lp-plan-price { display: flex; align-items: baseline; gap: 6px; min-height: 40px; }
.lp-plan-price b { font-size: 30px; letter-spacing: -0.035em; }
.lp-plan-price span { color: var(--text-3); }
.lp-plan-desc { min-height: 42px; }
.lp-plan ul { margin-bottom: 14px; flex: 1; }
.lp-price-list { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; }
.lp-price-list li { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; color: var(--text-2); padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.lp-price-list b { color: var(--text); font-weight: 600; white-space: nowrap; }

/* faq */
.lp-faq-wrap { max-width: 880px; }
.lp-faq { display: grid; gap: 12px; }
.lp-qa { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.lp-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 600; font-size: 16px; }
.lp-qa summary::-webkit-details-marker { display: none; }
.lp-qa summary .i { color: var(--brand); transition: transform .3s var(--spring, ease); }
.lp-qa[open] summary .i { transform: rotate(45deg); }
.lp-qa p { padding: 0 22px 20px; color: var(--text-2); animation: lp-fade .35s var(--ease, ease) both; }

/* final */
.lp-final { position: relative; padding: 120px 0; overflow: hidden; text-align: center; border-top: 1px solid var(--line); }
.lp-final-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; }
.lp-final-inner img { width: 64px; height: 64px; animation: lp-float 6s ease-in-out infinite; }
.lp-final .lp-sub { margin-left: auto; margin-right: auto; }
.lp-foot { border-top: 1px solid var(--line); padding: 28px 0; }
.lp-foot-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.lp-foot nav { display: flex; gap: 18px; margin: 0 auto; flex-wrap: wrap; }
.lp-foot nav a { color: var(--text-2); text-decoration: none; font-size: 14px; }
.lp-foot nav a:hover { color: var(--text); }

/* ---------------------------------------------------------------- motion */
.lp-motion [data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(4px);
  transition: opacity .8s var(--ease, ease), transform .9s var(--ease, ease), filter .8s var(--ease, ease); }
.lp-motion [data-reveal].in { opacity: 1; transform: none; filter: none; }
.lp-motion [data-delay="1"] { transition-delay: .08s; } .lp-motion [data-delay="2"] { transition-delay: .16s; }
.lp-motion [data-delay="3"] { transition-delay: .24s; } .lp-motion [data-delay="4"] { transition-delay: .32s; }
.lp-motion .lp-ring { --on: 0; }
.lp-motion .in .lp-ring, .lp-motion .lp-ring.in, .lp-motion [data-reveal].in.lp-ring { --on: 1; }
@property --on { syntax: "<number>"; inherits: true; initial-value: 1; }
.lp-motion .lp-hero-visual.in .lp-ring, .lp-motion .lp-score.in .lp-ring, .lp-motion .lp-trust.in .lp-ring { --on: 1; transition: --on 1.4s var(--ease, ease) .3s; }

@keyframes lp-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4%, 3%, 0) scale(1.08); } }
@keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes lp-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes lp-pop { to { opacity: 1; transform: scale(1); } }
@keyframes lp-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
  .lp [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .lp-cal-slot { opacity: 1; transform: none; }
  .lp-tilt { transform: none; }
  html:has(body.lp) { scroll-behavior: auto; }
}
html:not(.lp-motion-ready) .lp-cal-slot { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- responsive */
/* Grid items shrink below their content (a wide screenshot never widens the page). */
.lp-hero-grid > *, .lp-split > *, .lp-report > *, .lp-gallery > *, .lp-duo > *, .lp-steps > *,
.lp-grid-2 > *, .lp-grid-3 > *, .lp-plans > *, .lp-calc > *, .lp-stats-row > * { min-width: 0; }
@media (max-width: 1080px) {
  .lp-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 2px; padding: 10px 16px 16px; background: var(--pop); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-pop); }
  .lp-nav.open { display: flex; }
  .lp-nav a { padding: 12px 14px; }
  .lp-menu { display: inline-grid; }
  .lp-hero-grid, .lp-split, .lp-report, .lp-gallery, .lp-duo { grid-template-columns: 1fr; }
  .lp-steps, .lp-plans { grid-template-columns: repeat(2, 1fr); }
  .lp-mini-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-calc { grid-template-columns: 1fr; }
  .lp-calc-out { justify-items: start; text-align: left; }
  .lp-tilt { transform: none; }
}
@media (max-width: 720px) {
  .lp-wrap { padding: 0 16px; }
  .lp-section { padding: 72px 0; }
  .lp-hero { padding: 40px 0 40px; }
  .lp-stats-row, .lp-grid-3, .lp-grid-2, .lp-steps, .lp-plans, .lp-mini-grid { grid-template-columns: 1fr; }
  .lp-stats-row { grid-template-columns: repeat(2, 1fr); }
  .lp .lp-hide-sm { display: none; }
  .lp-cal-slot { justify-content: center; font-size: 0; padding: 10px 0; gap: 0; }
  .lp-cal-slot .i { width: 15px; height: 15px; }
  .lp-cal { gap: 6px; padding: 14px; }
  .lp-float-a { left: 6px; } .lp-float-b { right: 6px; } .lp-float-c { right: 6px; }
  .lp-metrics { grid-template-columns: 1fr 1fr 1fr; }
  .lp-score-head { flex-direction: column; align-items: flex-start; }
  .lp-trust { flex-direction: column; align-items: flex-start; }
}