/* ==========================================================================
   WealthStacker — public marketing landing page
   Liquid-glass aesthetic on the app's own brand palette (black + lime->emerald
   accent on cool off-white). Tokens come from theme.css. All page-specific
   styles live here (no inline <style> logic in the template).
   ========================================================================== */

:root {
  --lp-head-muted: #b1b6c0;            /* two-tone heading: secondary clause */
  --lp-ink: #0a0a0a;                   /* near-black display ink */
  --lp-glass-bg: rgba(255, 255, 255, 0.62);
  --lp-glass-strong: rgba(255, 255, 255, 0.86);
  --lp-glass-border: rgba(255, 255, 255, 0.75);
  --lp-glass-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                     0 18px 48px -20px rgba(15, 23, 42, 0.28);
  --lp-stage-shadow: 0 40px 90px -50px rgba(15, 23, 42, 0.45);
  --lp-pos: #10b981;                   /* emerald positive */
  --lp-section-pad: clamp(5rem, 11vw, 9rem);
  /* Vertical rhythm — one scale for the whole page so section gaps stay even.
     --lp-gap    : breathing room between major sections (hero, toolkit, chat, location, CTA)
     --lp-gap-sm : tighter rhythm between rows that belong to one group (the toolkit) */
  --lp-gap: clamp(4rem, 7vw, 6.5rem);
  --lp-gap-sm: clamp(2.5rem, 4vw, 3.5rem);
}

.landing {
  /* match the login/signup page base (#f8fafc) so the top reads consistently */
  background: #f8fafc;
  color: var(--fg);
  overflow-x: hidden;
}
.landing * { box-sizing: border-box; }

/* keep paint inside the page even when cards parallax sideways */
.lp-main { overflow-x: clip; width: 100%; max-width: 100%; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.lp-display {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--lp-ink);
  text-wrap: balance;
}
.lp-h1 { font-size: clamp(2.25rem, 5.2vw, 4.25rem); }
.lp-h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.02; }
.lp-h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); letter-spacing: -0.02em; font-weight: 700; }

.lp-muted-clause { color: var(--lp-head-muted); }

.lp-grad {
  color: var(--lp-ink);
}
/* on the dark CTA band the highlighted word must stay legible */
.lp-dark .lp-grad { color: #fff; }

.lp-lead { color: var(--fg-2); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; }
.lp-kicker { color: var(--fg-2); font-size: 1.0625rem; line-height: 1.55; }

/* --------------------------------------------------------------------------
   Hero — "The future of property investment is human + AI"
   -------------------------------------------------------------------------- */
.lp-hero { display: flex; align-items: center; min-height: clamp(540px, 78vh, 740px); }
.lp-hero > .lp-container { width: 100%; }

.lp-hero-title {
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}
.lp-hero-muted { color: var(--lp-head-muted); }
.lp-hero-strong { color: var(--lp-ink); }
.lp-hero-plus { color: var(--lp-head-muted); }
.lp-hero-glyph {
  display: inline-block;
  width: 0.78em; height: 0.78em;
  vertical-align: -0.05em;
  color: var(--lp-pos);
}

/* Particle backdrop — canvas animation drawn by landing.js. pointer-events
   stays off so it never swallows scroll; the draw loop pauses while the hero
   is off-screen. */
.lp-hero-particles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lp-hero-particles canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* fade the bottom edge into the page background */
.lp-hero-particles::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 90%, #f8fafc 100%);
}

/* Greyish glass-tower skyline — sits at the bottom of the hero, behind content
   and behind the particle field, fading into the page background. */
.lp-hero-skyline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(180px, 34vh, 320px);
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  /* melt the top edge into the hero so the towers rise out of nothing */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 100%);
}

/* --------------------------------------------------------------------------
   Eyebrow (status-dot pill)
   -------------------------------------------------------------------------- */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: var(--lp-glass-strong);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  backdrop-filter: blur(8px);
}
.lp-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--lp-pos);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
  animation: lp-pulse 2.4s ease-out infinite;
}
@keyframes lp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* --------------------------------------------------------------------------
   Pill CTAs (with arrow-in-circle)
   -------------------------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 10px 0 22px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .25s ease, background-color .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.lp-btn .lp-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  transition: transform .25s ease, background-color .2s ease;
}
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn:hover .lp-arrow { transform: translate(2px, -2px); }

.lp-btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5); }
.lp-btn-primary:hover { background: var(--primary-hover); }
.lp-btn-primary .lp-arrow { background: rgba(255,255,255,0.16); color: #fff; }

.lp-btn-ghost { background: var(--lp-glass-strong); color: var(--fg); border-color: var(--border); backdrop-filter: blur(8px); }
.lp-btn-ghost:hover { background: #fff; border-color: var(--border-strong); }
.lp-btn-ghost .lp-arrow { background: var(--surface-2); color: var(--fg); }

.lp-btn-light { background: #fff; color: var(--lp-ink); }
.lp-btn-light .lp-arrow { background: var(--lp-ink); color: #fff; }

.lp-btn-sm { height: 42px; font-size: 0.9rem; padding-left: 18px; }
.lp-btn-sm .lp-arrow { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   Liquid glass
   -------------------------------------------------------------------------- */
.glass {
  background: var(--lp-glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
  border: 1px solid var(--lp-glass-border);
  box-shadow: var(--lp-glass-shadow);
  border-radius: 22px;
}
.glass-strong { background: var(--lp-glass-strong); }

/* floating status pill that sits over a stage / card */
.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--lp-glass-strong);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--lp-glass-border);
  box-shadow: 0 12px 30px -14px rgba(15, 23, 42, 0.4);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lp-ink);
  white-space: nowrap;
}
.lp-pill .lp-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--lp-pos); color: #fff; flex-shrink: 0;
}
.lp-pill-float { position: absolute; z-index: 3; }

/* --------------------------------------------------------------------------
   Stage — the tinted/duotone panel that glass cards float over
   -------------------------------------------------------------------------- */
.lp-stage {
  position: relative;
  border-radius: 28px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background:
    radial-gradient(120% 120% at 85% 10%, rgba(45, 100, 245, 0.16), transparent 55%),
    radial-gradient(120% 120% at 10% 90%, rgba(99, 137, 255, 0.14), transparent 55%),
    linear-gradient(160deg, #f4f5f7 0%, #eef0f3 100%);
  box-shadow: var(--lp-stage-shadow);
  overflow: hidden;
  isolation: isolate;
}
.lp-stage::after {            /* subtle grid texture */
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%);
  pointer-events: none;
}
.lp-stage > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Ambient background — glow + grain
   -------------------------------------------------------------------------- */
.lp-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.lp-glow::before, .lp-glow::after {
  content: ""; position: absolute; border-radius: 999px; filter: blur(90px);
}
.lp-glow::before {
  width: 46rem; height: 46rem; top: -16rem; right: -10rem;
  background: radial-gradient(circle, rgba(45, 100, 245, 0.28), transparent 65%);
}
.lp-glow::after {
  width: 40rem; height: 40rem; top: -6rem; left: -14rem;
  background: radial-gradient(circle, rgba(99, 137, 255, 0.22), transparent 65%);
}
.lp-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.4;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   Navigation (liquid glass, shrinks to a floating pill on scroll)
   -------------------------------------------------------------------------- */
.lp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center;
  padding: 18px 16px;
  transition: padding .3s ease;
}
.lp-nav-inner {
  display: flex; align-items: center; gap: 18px;
  width: 100%; max-width: 1200px;
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, max-width .3s ease;
}
.lp-nav.is-scrolled { padding-top: 12px; }
.lp-nav.is-scrolled .lp-nav-inner {
  max-width: 940px;
  background: var(--lp-glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-color: var(--lp-glass-border);
  box-shadow: var(--lp-glass-shadow);
}
.lp-nav-links { display: none; flex: 1; justify-content: center; gap: 4px; }
.lp-nav-link {
  padding: 8px 14px; border-radius: 999px; font-size: 0.95rem; font-weight: 500;
  white-space: nowrap;
  color: var(--fg-2); text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.lp-nav-link:hover { color: var(--fg); background: var(--surface-hover); }
@media (min-width: 1024px) {
  .lp-nav-links { display: flex; }
}

.lp-mobile-menu { background: var(--lp-glass-strong); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.lp-container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.lp-section { padding-top: var(--lp-section-pad); padding-bottom: var(--lp-section-pad); position: relative; }

/* Landing rhythm modifiers — top-only model. Each section owns the gap ABOVE
   it (bottom 0), so the space between any two sections is uniform no matter
   their content. Each class sets BOTH sides explicitly so the base .lp-section
   padding (shared with other marketing pages) never bleeds through. Applied on
   landing.html only — replaces the old ad-hoc !pt-8 / !py-16 overrides. */
.lp-sp-top     { padding-top: var(--lp-gap);    padding-bottom: 0; }                  /* standalone major section */
.lp-sp-grp     { padding-top: var(--lp-gap-sm); padding-bottom: 0; }                  /* row inside a grouped cluster */
.lp-sp-end     { padding-top: var(--lp-gap);    padding-bottom: var(--lp-gap); }      /* last section before the footer */

.lp-feature-row { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* let non-shrinkable card content (nowrap KPIs, the min-width projection table) scroll
   internally instead of forcing the 1fr track wider than the viewport on mobile */
.lp-feature-row > * { min-width: 0; }
@media (min-width: 900px) {
  .lp-feature-row { grid-template-columns: 1fr 1fr; }
  .lp-feature-row.is-reversed .lp-feature-copy { order: 2; }
  .lp-feature-row.is-reversed .lp-feature-visual { order: 1; }
}

/* duo — borrowing power + location analysis, 50/50 on desktop */
.lp-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
.lp-duo > * { min-width: 0; }
.lp-duo-card { display: flex; flex-direction: column; }
.lp-duo-card .lp-eyebrow { align-self: flex-start; }
@media (min-width: 860px) {
  .lp-duo { grid-template-columns: 1fr 1fr; }
}

/* card head — eyebrow left, partner chip right */
.lp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Refyne Loans partner branding
   -------------------------------------------------------------------------- */
:root { --lp-refyne: #6366f1; --lp-refyne-2: #8b5cf6; }

.lp-partner-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--lp-refyne) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--lp-refyne) 22%, var(--border));
  font-size: 0.7rem; font-weight: 600; color: color-mix(in srgb, var(--lp-refyne) 65%, var(--fg));
  white-space: nowrap;
}
.lp-partner-mark {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 6px;
  background: linear-gradient(135deg, var(--lp-refyne), var(--lp-refyne-2));
  color: #fff; font-size: 0.7rem; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--lp-refyne) 55%, transparent);
}
.lp-partner-mark-lg { width: 30px; height: 30px; border-radius: 9px; font-size: 1rem; }

/* real lender logo (logo.dev) — sits where the monogram fallback would */
.lp-partner-img-sm { width: 18px; height: 18px; border-radius: 5px; object-fit: contain; display: block; }
.lp-partner-img { width: 32px; height: 32px; border-radius: 9px; object-fit: contain; display: block; }

/* gauge row — kept from the old borrowing card */
.lp-gauge-row {
  display: flex; align-items: center; gap: 40px;
  margin-top: 24px; padding: 32px 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
}
.lp-gauge { width: 220px; height: 128px; flex-shrink: 0; }
.lp-gauge-value { font-size: 2.8rem; }

/* stack the gauge above its readout on narrow screens */
@media (max-width: 600px) {
  .lp-gauge-row {
    flex-direction: column; align-items: center; text-align: center;
    gap: 16px; padding: 24px 18px;
  }
  .lp-gauge { width: 100%; max-width: 240px; height: auto; }
  .lp-gauge-value { font-size: 2.4rem; }
}

/* footer lockup — reads as a real lender accreditation strip */
.lp-partner-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: auto; padding-top: 16px;
}
.lp-partner-lockup { display: inline-flex; align-items: center; gap: 9px; }
.lp-partner-name { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.lp-partner-name span { font-weight: 500; color: var(--fg-3); margin-left: 3px; }
.lp-partner-tag {
  font-size: 0.7rem; font-weight: 600; color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.lp-partner-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--lp-refyne);
}

/* accredited lender logo strip (logo.dev brand marks) */
.lp-lenders { margin-top: 20px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.lp-lenders-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-3); }
/* infinite-scroll lender strip (logo.dev brand marks) */
.lp-lenders-marquee {
  position: relative; margin-top: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lp-lenders-track {
  display: flex; align-items: center; gap: 36px; width: max-content;
  animation: lp-marquee 28s linear infinite;
}
.lp-lenders-marquee:hover .lp-lenders-track { animation-play-state: paused; }
.lp-lender-logo {
  height: 28px; width: auto; max-width: 110px; object-fit: contain;
  flex-shrink: 0;
}
@keyframes lp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-lenders-track { animation: none; }
}

/* --------------------------------------------------------------------------
   Compact metric grid (borrowing breakdown + location glance)
   -------------------------------------------------------------------------- */
.lp-mini-kpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin-top: 18px; background: var(--border); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.lp-mini-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) { .lp-mini-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-mini-kpi { background: var(--surface); padding: 11px 13px; }
.lp-mini-val { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--lp-ink); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Location — column chart + donut
   -------------------------------------------------------------------------- */
.lp-charts-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.lp-chart-box { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 15px; }
.lp-chart-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-3); margin-bottom: 12px; }

/* vertical bars */
.lp-cols { display: flex; align-items: flex-end; gap: 8px; height: 84px; }
.lp-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.lp-col-bar { width: 100%; border-radius: 5px 5px 0 0; background: var(--surface-2); }
.lp-col-bar.is-now { background: linear-gradient(180deg, var(--accent-from), var(--accent-to)); }
.lp-col-x { font-size: 0.62rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* donut */
.lp-donut-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto; }
.lp-donut { width: 100%; height: 100%; }
.lp-donut-track { stroke: var(--surface-2); }
.lp-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lp-donut-pct { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--lp-ink); line-height: 1; }
.lp-donut-cap { font-size: 0.6rem; color: var(--fg-3); margin-top: 2px; }
.lp-chart-legend { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: 0.7rem; color: var(--fg-2); }
.lp-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lp-chart-legend i { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Mockup primitives (inside glass cards)
   -------------------------------------------------------------------------- */
.mk { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.mk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mk-kpi-label { font-size: 0.75rem; color: var(--fg-3); font-weight: 500; }
.mk-kpi-value { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: var(--lp-ink); }
.mk-pos { color: var(--lp-pos); font-weight: 700; }
.mk-chip { font-size: 0.7rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--accent-tint); color: #15803d; }
.mk-bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.mk-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-from), var(--accent-to)); }

/* 15-year projection table (mirrors the in-app .projection-table) */
.mk-proj-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }
.mk-proj-table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 0.8rem; }
.mk-proj-table thead { background: var(--surface-2); }
.mk-proj-table th { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-2); padding: 9px 12px; white-space: nowrap; border-bottom: 1px solid var(--border); }
.mk-proj-table td { padding: 8px 12px; background: var(--surface); border-top: 1px solid var(--border); }
.mk-proj-th-left { text-align: left; }
.mk-proj-th-right { text-align: right; }
.mk-proj-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); white-space: nowrap; }
.mk-proj-strong { font-weight: 600; color: var(--lp-ink); }
.mk-proj-yr { font-weight: 600; color: var(--lp-ink); }
.mk-proj-sticky { position: sticky; left: 0; background: var(--surface); }
.mk-proj-table thead .mk-proj-sticky { background: var(--surface-2); }

/* Comparison stat cards (mirror the in-app .rv-stat / .goals-stat) */
.mk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
/* flex column so the progress bar + footer can anchor to the bottom of every
   card — keeps them aligned across a row instead of floating with empty space
   below the shorter cards. */
.mk-stat { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 17px 17px; }
.mk-stat.is-best { border-color: color-mix(in srgb, var(--c) 50%, var(--border)); box-shadow: 0 0 0 1px var(--c), var(--shadow-sm); }
/* reserve two lines so single-line, wrapped, and badge-bearing headers all keep
   the value baseline aligned across the row. */
.mk-stat-head { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 10px; min-height: 38px; }
/* the "Fastest" badge always drops below the name so a short label like
   "Property" is never starved down to an ellipsis. */
.mk-stat.is-best .mk-stat-head { padding-right: 56px; }
.mk-stat-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--c); flex-shrink: 0; margin-top: 4px; }
.mk-stat-name { font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-best-badge { position: absolute; top: 14px; right: 14px; flex-shrink: 0; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 999px; padding: 2px 7px; }
.mk-stat-value { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.mk-stat-unit { font-size: 11px; color: var(--fg-3); margin-top: 5px; font-variant-numeric: tabular-nums; }
.mk-stat-props { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 999px; padding: 2px 8px; margin-top: 8px; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
/* margin-top:auto pushes the bar (and footer below it) to the bottom of the card */
.mk-stat-bar { height: 4px; border-radius: 999px; background: var(--surface-2); margin-top: auto; overflow: hidden; }
.mk-stat-bar-fill { height: 100%; border-radius: 999px; background: var(--c); }
.mk-stat-foot { font-size: 11px; font-weight: 500; color: var(--fg-2); margin-top: 9px; font-variant-numeric: tabular-nums; }

/* Required-rate callout (mirror the in-app .goals-required) */
.mk-required { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--lp-pos) 30%, var(--border)); }
.mk-required-icon { color: var(--lp-pos); flex-shrink: 0; display: flex; }
.mk-required-label { font-size: 12px; color: var(--fg-2); }
.mk-required-label strong { color: var(--fg); font-weight: 600; }
.mk-required-value { font-size: 13px; font-weight: 600; color: var(--fg); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Rentvest — full-width KPI cards + net-worth-over-time line chart
   -------------------------------------------------------------------------- */
.mk-rv { margin-top: clamp(1.5rem, 3.5vw, 2.75rem); }
.mk-rv-kpis { gap: 16px; }
.mk-rv-kpis .mk-stat { padding: 20px 22px 21px; }
.mk-rv-kpis .mk-stat-head { min-height: 0; margin-bottom: 6px; }
/* min sized so 7-figure values ($2,172,703) fit a 2-up cell on a ~360px phone */
.mk-rv-kpis .mk-stat-value { font-size: clamp(15px, 3.6vw, 24px); letter-spacing: -0.03em; margin-top: 5px; }
.mk-rv-kpis .mk-stat-unit { font-size: 12px; margin-top: 7px; }

.mk-rv-panel { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: clamp(16px, 2.4vw, 26px); }
.mk-rv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.mk-rv-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-2); }
.mk-rv-sub { font-size: 0.9rem; color: var(--fg-3); }
.mk-rv-sub strong { color: var(--fg); font-weight: 600; }

.mk-rv-chart { width: 100%; }
.mk-rv-chart svg { display: block; width: 100%; height: auto; }
.rvc-grid { stroke: var(--border); stroke-width: 1; }
.rvc-ylab { fill: var(--fg-3); font-size: 12px; text-anchor: end; font-variant-numeric: tabular-nums; }
.rvc-xlab { fill: var(--fg-3); font-size: 12px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.rvc-mile { stroke: #10b981; stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.45; }
.rvc-mlab { fill: #0e9f6e; font-size: 11px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.rvc-badge { fill: #10b981; }
.rvc-bnum { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; }
.rvc-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rvc-buy { stroke: #0070f3; }
.rvc-rent { stroke: #10b981; }

.mk-rv-legend { display: flex; justify-content: center; gap: 26px; margin-top: 8px; font-size: 0.85rem; color: var(--fg-2); }
.mk-rv-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 7px; vertical-align: middle; }

/* sparkline / chart draw-in */
.lp-draw { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); }

/* --------------------------------------------------------------------------
   Goal planner — comparison strip + projected-balance chart
---------------------------------------------------------------------------*/
.lp-goal-head { max-width: 42rem; }

/* 5-up comparison cards: 2-up mobile, 3-up tablet, 5-up desktop */
.mk-stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mk-stats-5 .mk-stat-head { min-height: 30px; margin-bottom: 6px; }
@media (min-width: 680px)  { .mk-stats-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mk-stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.gp-chart { margin-top: 22px; }
.gp-chart-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 14px; }
.gp-chart-title { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); }
.gp-chart-note { font-size: 0.8rem; color: var(--fg-3); }
.gp-chart-note strong { color: var(--fg); font-weight: 600; }

.gp-chart-svg { width: 100%; height: auto; display: block; }
.gp-line { stroke-dasharray: 1; stroke-dashoffset: 0; }

.gp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 16px; }
.gp-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 500; color: var(--fg-2); }
.gp-legend i { width: 11px; height: 11px; border-radius: 999px; flex-shrink: 0; }
.gp-legend-dash { width: 16px !important; height: 0 !important; border-radius: 0 !important; border-top: 2px dashed #94a3b8; }

/* --------------------------------------------------------------------------
   Logo marquee
   -------------------------------------------------------------------------- */
.lp-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lp-marquee-track { display: flex; gap: 4rem; width: max-content; animation: lp-scroll 38s linear infinite; }
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
.lp-logo { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: var(--fg-3); opacity: 0.75; white-space: nowrap; transition: opacity .2s ease, color .2s ease; }
.lp-logo:hover { opacity: 1; color: var(--fg); }
@keyframes lp-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */
.lp-stat-value { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--lp-ink); line-height: 1; }
.lp-stat-label { color: var(--fg-2); margin-top: 10px; font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Chat demo (centerpiece) — wraps the REAL chat UI (chat.css / chat_planner.css)
   in a liquid-glass window frame so it reads as a live screenshot of the app.
   -------------------------------------------------------------------------- */
.lp-chatwin { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

.lp-chatwin-head { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.lp-chatwin-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 650; color: var(--fg); letter-spacing: -0.01em;
}
.lp-chatwin-title .chat-empty-spark { font-size: 16px; margin: 0; }
/* the context picker is decorative on the landing — show the look, not the behaviour */
.lp-chatwin-ctx { cursor: default; pointer-events: none; }

/* Grow to fit the rendered answer so the whole planner card is visible at a
   glance — no inner scroll. min-height keeps a tall hero for the empty state. */
.lp-chatwin-msgs.chat-messages { min-height: clamp(360px, 52vh, 460px); height: auto; overflow: visible; padding: 18px 18px 8px; }
.lp-chatwin-foot.chat-composer-region { padding: 8px 18px 16px; border-top: 1px solid var(--border); }

/* empty-state greeting, centred until the first prompt fires */
.lp-chat-greet { margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.lp-chat-greet .chat-empty-sub { margin: 0; }

/* selected suggestion pill */
.chat-suggestion-pill.is-active {
  border-color: #10b981; color: var(--fg);
  background: color-mix(in srgb, #10b981 8%, var(--surface));
}

/* compact chart legend (the live card draws its legend via Chart.js) */
.cpc-chart svg { display: block; }
.cpc-chart polyline, .cpc-chart line { vector-effect: non-scaling-stroke; }
.cpc-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: -0.125rem 0 0.375rem; font-size: 0.6875rem; color: var(--fg-2); }
.cpc-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.cpc-legend i { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.cpc-legend-dash { width: 12px !important; height: 0 !important; border-radius: 0 !important; border-top: 2px dashed #94a3b8; }

/* --------------------------------------------------------------------------
   AI assistant duo — the live chat demo + the relationship-map demo, side by
   side on desktop. Both windows stretch to the same height.
   -------------------------------------------------------------------------- */
.lp-ai-duo { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
.lp-ai-duo > * { min-width: 0; }
.lp-ai-duo .lp-stage { height: 100%; display: flex; flex-direction: column; }
.lp-ai-duo .lp-stage > .glass { flex: 1 1 auto; }
@media (min-width: 1024px) {
  .lp-ai-duo { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Map + chat demo — wraps the REAL map UI (properties_map.css) in the same
   glass window frame as the chat demo. Static mock: nodes are laid out in a
   fixed 640x424 design space, scaled to fit and centred; no interaction.
   -------------------------------------------------------------------------- */
.lp-mapwin { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.lp-mapwin-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp-mapwin-head .lp-chatwin-title svg { color: var(--fg-3); }

.lp-mapwin .portfolio-map {
  flex-shrink: 0;
  height: 300px;
  min-height: 0;
  border-radius: 0;
  cursor: default;
  pointer-events: none;
}
.lp-mapwin-canvas {
  --s: 0.72;
  left: 50%;
  top: 50%;
  margin-left: calc(-320px * var(--s));
  margin-top: calc(-212px * var(--s));
  transform: scale(var(--s));
  will-change: auto;
}
@media (max-width: 520px) {
  .lp-mapwin-canvas { --s: 0.5; }
  .lp-mapwin .portfolio-map { height: 230px; }
}
.lp-mapwin .pm-node { cursor: default; }
.lp-mapwin .pm-node__img { display: flex; align-items: center; justify-content: center; color: #94a3b8; }

/* the pmap chat sits under the map instead of beside it */
.lp-mapwin .pmap-chat {
  width: auto;
  height: auto !important;   /* beats the <1024px fixed-height rule in properties_map.css */
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
.lp-mapwin .pmap-chat__messages { padding-top: 12px; }
.lp-mapwin .pmap-chat__input { cursor: default; }
.lp-mapwin .pmap-chat__addctx,
.lp-mapwin .pmap-chat__send { cursor: default; pointer-events: none; }

/* --------------------------------------------------------------------------
   Dark CTA band
   -------------------------------------------------------------------------- */
/* CTA banner — light, horizontal: eyebrow + title left, actions right */
.lp-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px 40px;
  padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 28px;
  background: var(--surface-2, #f7f7f5);
  border: 1px solid var(--border);
}
.lp-cta-eyebrow {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.lp-cta-title {
  margin-top: 14px;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.05;
  color: var(--lp-ink);
}
.lp-cta-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lp-cta-link { font-size: 1rem; font-weight: 600; color: var(--lp-ink); text-decoration: none; white-space: nowrap; }
.lp-cta-link:hover { color: var(--fg-2); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.lp-footer { border-top: 1px solid var(--border); }
.lp-footer a { color: var(--fg-2); text-decoration: none; font-size: 0.95rem; }
.lp-footer a:hover { color: var(--fg); }

/* --------------------------------------------------------------------------
   FAQ accordion — glass cards, rotating chevron, height animated via the
   grid-template-rows trick (no Alpine plugin). Answers stay in the DOM when
   collapsed so AI crawlers still read them.
   -------------------------------------------------------------------------- */
.lp-faq { display: flex; flex-direction: column; gap: 12px; }
.lp-faq-item {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .25s ease, background .25s ease;
}
.lp-faq-item:hover { border-color: var(--border-strong); }
.lp-faq-item.is-open {
  background: var(--lp-glass-strong);
  border-color: var(--border-strong);
  box-shadow: var(--lp-glass-shadow);
}
.lp-faq h3 { margin: 0; }
.lp-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
}
.lp-faq-chev { flex-shrink: 0; color: var(--fg-3); transition: transform .3s ease, color .15s ease; }
.lp-faq-item.is-open .lp-faq-chev { transform: rotate(180deg); color: var(--fg-2); }
.lp-faq-ans {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.lp-faq-item.is-open .lp-faq-ans { grid-template-rows: 1fr; }
.lp-faq-ans-inner { overflow: hidden; }
.lp-faq-ans p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--fg-2);
  font-size: 1rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Mobile sticky CTA — persistent signup action on small screens (hidden lg+)
   -------------------------------------------------------------------------- */
.lp-sticky-cta {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 45;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px;
  border-radius: 999px;
  background: var(--primary); color: var(--primary-fg);
  font-size: 1rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.45);
}
.lp-sticky-cta .lp-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); color: #fff;
}
/* keep the footer clear of the fixed bar on mobile */
@media (max-width: 1023px) { .lp-main { padding-bottom: 86px; } }

/* --------------------------------------------------------------------------
   Reveal animation — gated by .lp-ready so content is visible without JS
   -------------------------------------------------------------------------- */
.lp-ready .lp-reveal { opacity: 0; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lp-ready .lp-reveal { opacity: 1 !important; transform: none !important; }
  .lp-marquee-track { animation: none; }
  .lp-dot { animation: none; }
  .chat-thinking span { animation: none; }
  .lp-btn:hover { transform: none; }
  .lp-faq-chev, .lp-faq-ans { transition: none; }
  * { scroll-behavior: auto !important; }
}