/* ============================================================================
   Landing page — "Dark product-grade" (anchor: Linear density + Vercel dark hero)
   Self-contained, served only on /. Namespaced under .lp so it can never leak
   into the app's compiled Tailwind bundle.

   Theming: .lp declares LIGHT defaults; `html.dark .lp` overrides with the
   original dark palette. The page shares the app's `html.dark` class (set by
   base.html's no-flash script + header toggle), so the landing follows the
   chosen theme. The mint brand accent (#00E599) is kept distinct from the app's
   emerald; --accent stays bright for FILLS in both themes, while --accent-text
   is a readable deep mint for TEXT on the light page. The phone mockup is pinned
   dark in both themes (it reads as hardware showing the app).

   Design system (defended in commit message / interrogation):
     Type    Geist (display/UI) + Geist Mono (numbers, technical labels)
     Scale   12 / 13 / 15 / 18 / 22 / 32 / clamp→44–64 px on a 4px baseline
     Accent  ONE — electric mint #00E599. Amber #F4B740 is score-tier-semantic
             only (mid fit), never decoration.
     Radii   12px cards, 8px buttons/pills, full for dots. Two functional radii.
     Lines   1px hairlines at 7% white. No drop shadows for elevation.
     Bold move: the self-running scoring feed (the product, shown working).
   ========================================================================== */

@font-face { font-family: "Geist"; src: url("/static/fonts/geist-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/static/fonts/geist-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/static/fonts/geist-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/static/fonts/geist-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/static/fonts/geist-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/static/fonts/geist-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

.lp {
  /* palette — LIGHT defaults; `html.dark .lp` (below) restores the dark palette.
     --accent  = bright mint, used for FILLS (button/dot/badge) in both themes.
     --accent-text = mint as TEXT/border; deep mint on light so it passes
                     contrast on the light page, electric mint in dark.
     --accent-dim  = low-alpha mint tint (pill bg, focus glow). */
  --bg: #f8f8f9;
  --surface: #ffffff;
  --surface-2: #f1f1f3;
  --line: rgba(9,9,11,0.09);
  --line-strong: rgba(9,9,11,0.16);
  --line-hover: rgba(9,9,11,0.30);
  --sep: rgba(9,9,11,0.20);
  --text: #18181b;
  --text-dim: #52525b;
  --text-faint: #71717a;
  --accent: #00E599;
  --accent-text: #0F766E;
  --accent-line: rgba(15,118,110,0.32);
  --accent-dim: rgba(15,118,110,0.10);
  --amber: #B45309;
  --amber-line: rgba(180,83,9,0.34);
  --glow: rgba(0,229,153,0.05);
  --err-text: #BE123C;

  --sans: "Geist", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --mono: "Geist Mono", "SF Mono", ui-monospace, "JetBrains Mono", monospace;

  font-family: var(--sans);
  color: var(--text);
  line-height: 1.55;
  /* Atmosphere, not a solid fill: one low-opacity mint glow top-right + the
     ground. No purple-gradient cliché; the glow reads as "signal". */
  background:
    radial-gradient(110% 70% at 78% -8%, var(--glow), transparent 55%),
    var(--bg);
  /* Pull the section out past base.html's <main> padding so the glow + footer
     rule feel intentional rather than boxed. */
  margin: -2.5rem -1.5rem -2.5rem;
  padding: 2.5rem 1.5rem 0;
  position: relative;
  overflow: hidden;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }

/* ── dark theme: restore the original near-black palette ─────────────────── */
html.dark .lp {
  --bg: #0A0B0D;
  --surface: #121417;
  --surface-2: #171A1E;
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.13);
  --line-hover: rgba(255,255,255,0.28);
  --sep: rgba(255,255,255,0.16);
  --text: #E7E9EC;
  --text-dim: #9AA1A9;
  --text-faint: #5B626B;
  --accent: #00E599;
  --accent-text: #00E599;
  --accent-line: rgba(0,229,153,0.32);
  --accent-dim: rgba(0,229,153,0.12);
  --amber: #F4B740;
  --amber-line: rgba(244,183,64,0.32);
  --glow: rgba(0,229,153,0.09);
  --err-text: #FF9B8A;
}

/* The phone is a product/device mockup — pin it dark in BOTH themes so it reads
   as hardware showing the app, not page chrome. Custom properties set here win
   for the phone subtree regardless of the page theme. */
.lp-phone {
  --surface-2: #171A1E;
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.13);
  --text: #E7E9EC;
  --text-dim: #9AA1A9;
  --text-faint: #5B626B;
  --accent-text: #00E599;
  --accent-line: rgba(0,229,153,0.32);
  --accent-dim: rgba(0,229,153,0.12);
}

.lp-wrap { max-width: 1080px; margin: 0 auto; }

/* ── shared type atoms ─────────────────────────────────────────────────── */
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint);
}
.lp-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0,229,153,0.5);
}
.lp-section-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.25rem;
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.lp-hero {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 3.5rem;
  align-items: center;
  padding: 4.5rem 0 5.5rem;
}
.lp-h1 {
  font-weight: 600;
  font-size: clamp(2.6rem, 5.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 1.5rem 0 0;
}
.lp-h1 .muted { color: var(--text-faint); }
.lp-sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 34ch;
  margin: 1.5rem 0 0;
}
.lp-cta-row { display: flex; align-items: center; gap: 1rem; margin-top: 2.25rem; flex-wrap: wrap; }
.lp-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-weight: 600; font-size: 0.9375rem;
  border-radius: 8px; padding: 0.75rem 1.15rem; cursor: pointer;
  text-decoration: none; border: 1px solid transparent;
  transition: background-color 120ms ease, transform 120ms ease, border-color 120ms ease;
}
.lp-btn-primary { background: var(--accent); color: #04130D; }
.lp-btn-primary:hover { background: #2EF0AE; transform: translateY(-1px); }
.lp-btn-ghost { color: var(--text-dim); border-color: var(--line-strong); }
.lp-btn-ghost:hover { color: var(--text); border-color: var(--line-hover); }
.lp-trust { margin-top: 1rem; font-size: 0.8125rem; color: var(--text-faint); }

/* ── the bold move: the Telegram moment, on a phone ─────────────────────── */
/* Tells the whole story in one visual: a flat is found, scored + drafted in
   seconds, and pushed to the renter's phone with the application already
   written. The "2s" badge screams speed; the chat is the actual product
   moment; "you tapped send" is the life-easier payoff. */
.lp-phone-wrap { position: relative; justify-self: center; width: min(330px, 100%); }
.lp-speed {
  position: absolute; top: -16px; right: -10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--accent); color: #04130D;
  border-radius: 999px; padding: 0.4rem 0.75rem;
  font-family: var(--mono); font-weight: 500;
  box-shadow: 0 10px 30px -6px rgba(0,229,153,0.45);
}
.lp-speed svg { width: 13px; height: 13px; }
.lp-speed .num { font-size: 0.95rem; line-height: 1; }
.lp-speed .lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.78; }

.lp-phone {
  background: #0E1013; border: 1px solid var(--line-strong);
  border-radius: 30px; padding: 9px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.85);
}
.lp-screen { background: #0B0C0E; border-radius: 22px; overflow: hidden; }

.lp-phone-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--line);
}
.lp-phone-bar .ava {
  width: 28px; height: 28px; border-radius: 999px; flex: none;
  background: radial-gradient(120% 120% at 30% 20%, #2EF0AE, #00A877);
}
.lp-phone-bar .nm { font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; }
.lp-phone-bar .bot { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 4px; }
.lp-phone-bar .on { font-size: 11px; color: var(--accent-text); display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1px; }
.lp-phone-bar .on .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }

.lp-chat { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; }
.lp-msg {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px; border-top-left-radius: 5px;
  padding: 0.7rem 0.8rem; max-width: 94%;
}
.lp-msg-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.55rem; }
.lp-chip { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); border: 1px solid var(--accent-line); border-radius: 999px; padding: 2px 7px; }
.lp-when { font-family: var(--mono); font-size: 10px; color: var(--text-faint); }
.lp-card { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.lp-card-name { font-weight: 500; font-size: 0.875rem; }
.lp-card-meta { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.lp-fit { text-align: center; flex: none; }
.lp-fit .n { font-family: var(--mono); font-weight: 500; font-size: 1.2rem; color: var(--accent-text); display: block; font-variant-numeric: tabular-nums; }
.lp-fit .l { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.lp-msg-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.45rem; }
.lp-draft { font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; margin: 0; }
.lp-msg-actions { display: flex; gap: 0.5rem; margin-top: 0.65rem; }
.lp-mini { font-size: 11px; font-weight: 500; color: var(--accent-text); border: 1px solid var(--accent-line); border-radius: 6px; padding: 0.22rem 0.55rem; }
.lp-mini.ghost { color: var(--text-dim); border-color: var(--line-strong); }
.lp-sent { align-self: flex-end; font-family: var(--mono); font-size: 10px; color: var(--text-faint); }
.lp-phone-cap { text-align: center; margin-top: 1.1rem; font-size: 0.8125rem; color: var(--text-faint); }

/* ── sources band ──────────────────────────────────────────────────────── */
.lp-sources { padding: 2.5rem 0; border-top: 1px solid var(--line); }
.lp-sources-label {
  text-align: center; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 1.25rem;
}
.lp-sources-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.75rem 1.75rem; color: var(--text-dim); font-weight: 500; font-size: 0.9375rem;
}
.lp-sources-row .sep { color: var(--sep); }

/* ── sections ──────────────────────────────────────────────────────────── */
.lp-section { padding: 5.5rem 0; border-top: 1px solid var(--line); }
.lp-section-title {
  font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 2.75rem;
}

/* how it works — three columns, mono index as quiet wayfinding */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lp-step { background: var(--bg); padding: 1.75rem 1.5rem 2rem; }
.lp-step-num { font-family: var(--mono); font-size: 12px; color: var(--accent-text); letter-spacing: 0.1em; }
.lp-step-title { font-weight: 600; font-size: 1.0625rem; margin: 1.5rem 0 0.5rem; letter-spacing: -0.01em; }
.lp-step-body { font-size: 0.9375rem; color: var(--text-dim); line-height: 1.6; }

/* why — 2×2 claims */
.lp-why { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; }
.lp-why-h { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 0.6rem; }
.lp-why-h .mark { color: var(--accent-text); font-family: var(--mono); }
.lp-why-p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--text-dim); line-height: 1.6; }

/* ── "after you hit send" — tracking board + capabilities ───────────────── */
.lp-track { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 3rem; align-items: center; }
.lp-board { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem 1.4rem; }

/* status flow — five stages on a hairline, current one in mint */
.lp-flow { display: flex; justify-content: space-between; position: relative; margin-bottom: 1.5rem; }
.lp-flow::before { content: ""; position: absolute; top: 6px; left: 6%; right: 6%; height: 1px; background: var(--line-strong); }
.lp-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.lp-node .d { width: 13px; height: 13px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-strong); }
.lp-node.done { color: var(--text-dim); }
.lp-node.done .d { background: var(--text-faint); border-color: var(--text-faint); }
.lp-node.cur { color: var(--accent-text); }
.lp-node.cur .d { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }

.lp-trow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; }
.lp-trow + .lp-trow { border-top: 1px solid var(--line); }
.lp-trow-name { font-weight: 500; font-size: 0.9rem; }
.lp-trow-meta { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.lp-pill { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 8px; padding: 0.25rem 0.55rem; white-space: nowrap; }
.lp-pill.mint { color: var(--accent-text); border: 1px solid var(--accent-line); background: var(--accent-dim); }
.lp-pill.amber { color: var(--amber); border: 1px solid var(--amber-line); }
.lp-pill.flat { color: var(--text-dim); border: 1px solid var(--line-strong); }
.lp-chiprow { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.1rem 0 0.4rem; }
.lp-chip2 { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--mono); font-size: 10px; color: var(--accent-text); border: 1px solid var(--accent-line); border-radius: 999px; padding: 0.2rem 0.5rem; }
.lp-chip2 svg { width: 11px; height: 11px; }
.lp-chip2.ghost { color: var(--text-faint); border-color: var(--line-strong); }

.lp-track-points { display: grid; gap: 1.75rem; }

/* final cta */
.lp-final { padding: 6rem 0 5.5rem; border-top: 1px solid var(--line); text-align: center; }
.lp-final h2 { font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.08; margin: 0; }
.lp-final p { color: var(--text-dim); margin: 1rem auto 2rem; max-width: 42ch; }

/* footer */
.lp-footer {
  border-top: 1px solid var(--line); padding: 2rem 0 2.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.8125rem; color: var(--text-faint); flex-wrap: wrap;
}
.lp-footer .brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.lp-footer .brand .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }

/* ── waitlist (closed-beta demand capture) ──────────────────────────────── */
/* Hero hint for codeless visitors — quiet line under the trust copy. */
.lp-nocode { margin-top: 0.85rem; font-size: 0.8125rem; color: var(--text-faint); }
.lp-nocode a { color: var(--accent-text); text-decoration: none; }
.lp-nocode a:hover { text-decoration: underline; }

/* Visually-hidden label (accessible name without visible chrome). */
.lp-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Honeypot: off-screen, untabbable, invisible to humans + AT. */
.lp-hp { position: absolute !important; left: -9999px !important; top: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.lp-wl { max-width: 440px; margin: 0 auto; }
.lp-wl-form { display: flex; gap: 0.6rem; }
.lp-wl-input {
  flex: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 0.75rem 0.9rem;
  color: var(--text); font-family: var(--sans); font-size: 0.9375rem;
  transition: border-color 120ms ease;
}
.lp-wl-input::placeholder { color: var(--text-faint); }
.lp-wl-input:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-dim); }
.lp-wl-form .lp-btn { flex: none; }
.lp-wl .lp-wl-note { margin: 0.9rem auto 0; max-width: none; font-size: 0.8125rem; color: var(--text-faint); }
.lp-wl .lp-wl-err { margin: 0.75rem auto 0; max-width: none; font-size: 0.8125rem; color: var(--err-text); }
.lp-wl-ok {
  display: inline-flex; align-items: center; gap: 0.55rem; text-align: left;
  color: var(--accent-text); font-weight: 500; font-size: 0.95rem;
  background: var(--accent-dim); border: 1px solid var(--accent-line);
  border-radius: 10px; padding: 0.85rem 1.15rem;
}
.lp-wl-ok svg { flex: none; }
.lp-final .lp-final-alt { margin: 1.5rem auto 0; font-size: 0.875rem; color: var(--text-faint); }
.lp-final .lp-final-alt a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.lp-final .lp-final-alt a:hover { color: var(--text); }

/* ── motion: one orchestrated load + a quiet live pulse ─────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .lp-reveal { opacity: 0; transform: translateY(10px); animation: lp-rise 0.6s cubic-bezier(0.2,0.7,0.2,1) forwards; }
  .lp-hero .lp-reveal:nth-child(1) { animation-delay: 0.02s; }
  .lp-h1.lp-reveal     { animation-delay: 0.08s; }
  .lp-sub.lp-reveal    { animation-delay: 0.16s; }
  .lp-cta-row.lp-reveal{ animation-delay: 0.24s; }
  .lp-trust.lp-reveal  { animation-delay: 0.30s; }
  .lp-nocode.lp-reveal { animation-delay: 0.34s; }
  .lp-phone-wrap.lp-reveal { animation-delay: 0.16s; }
  /* chat assembles itself: match lands, draft follows, send confirms */
  .lp-chat .lp-msg, .lp-chat .lp-sent { opacity: 0; animation: lp-rise 0.5s cubic-bezier(0.2,0.7,0.2,1) forwards; }
  .lp-chat .lp-msg:nth-of-type(1) { animation-delay: 0.40s; }
  .lp-chat .lp-msg:nth-of-type(2) { animation-delay: 0.62s; }
  .lp-chat .lp-sent               { animation-delay: 0.84s; }
  .lp-speed { opacity: 0; transform: scale(0.85); animation: lp-pop 0.45s cubic-bezier(0.2,0.9,0.3,1.4) 0.50s forwards; }
  .lp-phone-bar .on .dot { animation: lp-pulse 1.8s ease-in-out infinite; }
}
@keyframes lp-rise { to { opacity: 1; transform: none; } }
@keyframes lp-pop  { to { opacity: 1; transform: none; } }
@keyframes lp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,229,153,0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(0,229,153,0); }
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 0 3.5rem; }
  .lp-sub { max-width: 46ch; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-why { grid-template-columns: 1fr; gap: 2rem; }
  .lp-track { grid-template-columns: 1fr; gap: 2.25rem; }
  .lp-section { padding: 4rem 0; }
}
@media (max-width: 640px) {
  .lp { margin: -2.5rem -1rem 0; padding: 2rem 1rem 0; }
  .lp-cta-row { gap: 0.75rem; }
  .lp-btn { width: 100%; justify-content: center; }
  .lp-btn-ghost { width: auto; }
  /* Stack the waitlist input above a full-width button on narrow screens. */
  .lp-wl-form { flex-direction: column; }
  .lp-wl-form .lp-btn { width: 100%; }
  /* Tracking board: the five German status labels (Benachrichtigt, Beworben,
     Antwort, Besichtigung, Entscheidung) are wider than the English ones and
     don't fit five-across on a phone. Trim the board padding and shrink the
     flow labels so the board fits the viewport instead of forcing the whole
     page to scroll sideways. */
  .lp-board { padding: 1.1rem 0.9rem; }
  .lp-node { font-size: 10px; letter-spacing: 0.03em; gap: 0.4rem; }
}