/* §K Startseite — layout only. Every colour, radius and font here comes from the tokens in
   style.css (--bg / --surface / --surface2 / --border / --text / --muted / --accent / --green /
   --amber / --radius / --font / --mono), so the pre-login page and the app stay one visual system.
   This file is linked ONLY by landing.html; nothing in it can reach the SPA.
   No @import, no external font, no remote asset — the CSP forbids it and the page must stay fast. */

/* style.css pins html/body to the viewport for the app shell; the landing page is a scrolling
   document, so it needs its own height behaviour. */
html, body.lp-body { height: auto; min-height: 100%; }
body.lp-body { overflow-x: hidden; }

.lp-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; color: var(--text);
}
.lp-skip:focus { left: 12px; }

/* ---------- top bar ---------- */
.lp-nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.lp-nav-in {
  max-width: 1080px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 18px;
}
.brand.lp-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 650; color: var(--text); text-decoration: none;
}
.lp-brand .brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  flex: none;
}
.lp-nav-links { display: flex; gap: 18px; margin-left: 8px; }
.lp-nav-links a { color: var(--muted); font-size: 14px; text-decoration: none; }
.lp-nav-links a:hover { color: var(--text); }
.lp-nav-cta { margin-left: auto; display: flex; gap: 8px; }

/* ---------- page frame ---------- */
.lp { max-width: 1080px; margin: 0 auto; padding: 0 20px 8px; }
.lp-sec { padding: 56px 0; border-top: 1px solid var(--border); }
.lp-sec-head { max-width: 760px; margin-bottom: 26px; }
.lp-sec-head h2 { font-size: 24px; font-weight: 650; letter-spacing: -0.01em; }
.lp-sec-head p { margin-top: 8px; font-size: 15px; }

/* ---------- hero ---------- */
/* Left-aligned, and emphatically so: the hero holds a TERMINAL, and centring cascaded into the
   transcript and centred every line of it. */
.lp-hero { padding: 64px 0 56px; text-align: left; }
.lp-hero-cta { margin-top: 26px; display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }

/* The live values keep their unknown state readable; everything else about these is set in the
   design layer at the end of this file. */
.lp-stat-v.is-unknown {
  font-size: 15px; font-weight: 500; color: var(--muted);
  font-family: var(--font); letter-spacing: 0;
}

/* ---------- feature grid ---------- */
.lp-legend { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.lp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; min-width: 0;
}
.lp-card h3 {
  font-size: 15px; font-weight: 600; line-height: 1.4;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lp-card h3 code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px;
}
.lp-card p { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.lp-card strong { color: var(--text); font-weight: 600; }

.lp-badge {
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 9px; border: 1px solid transparent; white-space: nowrap;
}
.lp-badge.is-live {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
}
.lp-badge.is-part {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  border-color: color-mix(in srgb, var(--amber) 35%, transparent);
}
.lp-badge.is-soon { color: var(--muted); background: var(--surface2); border-color: var(--border); }

/* ---------- pricing table ---------- */
.lp-price-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.lp-price { min-width: 560px; }
.lp-caption { caption-side: top; text-align: left; padding: 14px 16px; color: var(--muted); font-size: 13px; }
.lp-price th, .lp-price td {
  padding: 11px 14px; border-bottom: 1px solid var(--border); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lp-price tr:last-child th, .lp-price tr:last-child td { border-bottom: none; }
.lp-price thead th { font-size: 13px; font-weight: 650; color: var(--text); background: var(--surface2); }
.lp-price thead th:first-child, .lp-price tbody th {
  text-align: left; position: sticky; left: 0; z-index: 1;
  color: var(--muted); font-weight: 500; font-size: 13px;
  background: var(--surface);
}
.lp-price thead th:first-child { background: var(--surface2); }
.lp-price td { font-size: 13.5px; }
.lp-price .lp-price-row td { font-size: 17px; font-weight: 650; }
.lp-price .lp-price-sub { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.lp-price .is-none { color: var(--muted); }
.lp-price .is-inf { color: var(--accent); font-weight: 600; }
.lp-price-note { margin-top: 10px; font-size: 12.5px; }

.lp-note {
  margin-top: 18px; padding: 14px 16px; font-size: 13.5px; line-height: 1.6; color: var(--muted);
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
  border-radius: var(--radius);
}
.lp-note strong { color: var(--text); }

/* ---------- login / register ---------- */
.lp-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.lp-auth-card { padding: 18px; }
.lp-tabs { display: flex; gap: 6px; padding: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.lp-tab {
  flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer;
}
.lp-tab:hover { color: var(--text); }
.lp-tab.is-active { background: var(--surface2); border-color: var(--border); color: var(--text); }
.lp-form { margin-top: 16px; }
.lp-form .field + .field { margin-top: 12px; }
.lp-form .btn { margin-top: 16px; }
.lp-msg { margin-top: 10px; font-size: 13px; min-height: 18px; line-height: 1.5; }
.lp-msg.is-err { color: var(--red); }
.lp-msg.is-ok { color: var(--green); }
/* swapped in by landing.js when a session already exists */
.lp-session h3 { font-size: 15px; font-weight: 600; }
.lp-session p { margin-top: 8px; font-size: 13.5px; }
.lp-session .btn { margin-top: 14px; }
.lp-auth-side { padding: 18px 4px; }
.lp-auth-side h3 { font-size: 14px; font-weight: 600; }
.lp-auth-side h3 + p { margin-top: 8px; }
.lp-auth-side p { font-size: 13.5px; line-height: 1.6; }
.lp-auth-side p + h3 { margin-top: 20px; }
.lp-auth-side .btn { margin-top: 12px; }

/* ---------- legal ---------- */
.lp-legal { max-width: 760px; }
.lp-legal h2 { font-size: 20px; font-weight: 650; }
.lp-legal p { margin-top: 10px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.lp-legal ul { margin-top: 12px; padding-left: 20px; }
.lp-legal li { font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.lp-legal li + li { margin-top: 8px; }
.lp-legal strong { color: var(--text); font-weight: 600; }
.lp-legal code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px;
}
.lp-todo {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--surface); border: 1px dashed var(--border);
}

/* ---------- footer ---------- */
.lp-foot { border-top: 1px solid var(--border); margin-top: 24px; }
.lp-foot-in {
  max-width: 1080px; margin: 0 auto; padding: 22px 20px 34px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px;
}
.lp-foot-links { display: flex; gap: 16px; margin-left: auto; flex-wrap: wrap; }

/* ---------- responsive: 1080 -> 380 ---------- */
@media (max-width: 900px) {
  .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-auth { grid-template-columns: minmax(0, 1fr); }
  .lp-auth-side { padding: 4px; }
}
@media (max-width: 640px) {
  .lp-nav-links { display: none; }            /* the CTAs stay; the anchors live in the page flow */
  .lp-nav-in { padding: 10px 14px; gap: 10px; }
  .lp { padding: 0 14px 8px; }
  .lp-hero { padding: 44px 0 40px; }
  .lp-sec { padding: 42px 0; }
  .lp-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-hero-cta .btn { flex: 1 1 auto; }
  .lp-foot-links { margin-left: 0; }
}
@media (max-width: 420px) {
  .lp-nav-cta .btn { padding: 5px 9px; font-size: 12.5px; }
  .lp-status { gap: 10px; }
  .lp-stat { padding: 13px 12px; }
  .lp-price th, .lp-price td { padding: 9px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-nav { backdrop-filter: none; }
  * { scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; }

/* ============================================================================
   §K the demonstration
   ----------------------------------------------------------------------------
   A replay of a /goal run, typed out in a terminal frame. Presented as a
   recording rather than a live session — the page's own rule is "no invented
   claims", and a console pretending to be live is exactly one.
   ========================================================================== */
.lp-demo-sec { padding-top: 8px; }

.lp-demo {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #0a0d13;
  overflow: hidden;
  box-shadow: 0 18px 50px -28px rgba(0, 0, 0, .9);
}

.lp-demo-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.lp-dot { width: 10px; height: 10px; border-radius: 50%; background: #2e3745; flex: none; }
.lp-dot:nth-child(1) { background: #e05252; }
.lp-dot:nth-child(2) { background: #e0a63a; }
.lp-dot:nth-child(3) { background: #4bbf73; }
.lp-demo-title {
  margin-left: 8px; font: 12px/1 var(--mono); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-demo-replay {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.lp-demo-replay:hover { color: var(--text); background: var(--surface2); }

.lp-demo-screen {
  margin: 0; padding: 16px 18px;
  /* Tall enough that the transcript does not make the page jump as it types, and scrollable on a
     phone rather than forcing the layout wider. */
  min-height: 25em; max-height: 60vh; overflow: auto;
  font: 12.5px/1.65 var(--mono);
  color: #cfd6e4;
  white-space: pre-wrap; word-break: break-word;
}
.lp-demo-screen code { font: inherit; color: inherit; background: none; padding: 0; }

.d-p    { color: var(--accent); font-weight: 600; }
.d-in   { color: #e6e9ef; }
.d-tool { color: #7fb2ff; }
.d-ok   { color: var(--green); }
.d-err  { color: var(--red); }
.d-warn { color: var(--amber); }
.d-dim  { color: var(--muted); }

/* The caret blinks only while the replay is running; leaving it blinking on a finished transcript
   suggests something is still happening. */
.lp-caret {
  display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom;
  background: var(--accent); animation: lp-blink 1.05s steps(2, start) infinite;
}
.lp-demo.is-done .lp-caret { animation: none; opacity: .25; }
@keyframes lp-blink { 50% { opacity: 0; } }

.lp-demo-note { margin: 12px 2px 0; font-size: 13px; line-height: 1.6; }

/* Reveal-on-scroll. Small distance, quick, once — motion should make the page feel alive on first
   read, not perform. */
.lp-reveal {
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
}
.lp-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-caret { animation: none; }
  .lp-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 640px) {
  .lp-demo-screen { font-size: 11.5px; min-height: 20em; padding: 13px 14px; }
  .lp-demo-title { font-size: 11px; }
}

/* ============================================================================
   ZeroLog — landing design layer
   ----------------------------------------------------------------------------
   The subject is infrastructure you own and can see into: your own containers on
   our own hardware, your own agent, and a cost line in CHF for every turn. So the
   page is built like an instrument panel rather than a brochure.

   ONE RULE CARRIES THE WHOLE DESIGN:
     amber  = a value MEASURED from the running system
     accent = something you can act on
   Nothing decorative is allowed either colour. That is why the live status strip
   is amber and the buttons are not, and it is the reason the palette does not
   read as "dark theme with a bright accent" — the second colour is earned.

   Type: the display face is MONOSPACE. On most products that would be an affect;
   here the product is a terminal and an agent, and setting the headline in the
   same face as the transcript beside it is the honest choice. Body stays a
   system sans so long-form copy is comfortable.
   ========================================================================== */

.lp-body {
  --lp-signal: #e0a63a;                 /* measured */
  --lp-rule: color-mix(in srgb, var(--border) 80%, transparent);
  --lp-mono: 'Cascadia Mono', 'Cascadia Code', Consolas, 'DejaVu Sans Mono', ui-monospace, SFMono-Regular, monospace;
}

/* ---- the measured rule -------------------------------------------------- */
/* A left rule with tick marks, like a rack elevation. It is a measuring device,
   not a hairline for texture: each section head sits ON a tick, so the rule
   marks where content actually begins. */
.lp-sec {
  position: relative;
  padding-left: clamp(0px, 4vw, 34px);
}
.lp-sec::before {
  content: '';
  position: absolute; left: 0; top: .55em; bottom: 12px;
  width: 1px; background: var(--lp-rule);
}
.lp-sec > .lp-sec-head { position: relative; }
.lp-sec > .lp-sec-head::before {
  content: '';
  position: absolute; left: clamp(-34px, -4vw, 0px); top: .62em;
  width: clamp(0px, 2.2vw, 18px); height: 1px; background: var(--lp-signal);
}
@media (max-width: 720px) {
  .lp-sec::before, .lp-sec > .lp-sec-head::before { display: none; }
  .lp-sec { padding-left: 0; }
}

/* ---- type --------------------------------------------------------------- */
.lp h1 {
  font-family: var(--lp-mono);
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 600;
  margin: .28em 0 .5em;
  text-wrap: balance;
}
/* The one italic on the page. It lands on "die mitdenkt" — the actual claim —
   and the monospace italic is deliberately a different texture from the roman. */
.lp h1 em {
  font-style: italic;
  color: var(--lp-signal);
  font-weight: 500;
}
.lp h2 {
  font-family: var(--lp-mono);
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  letter-spacing: -.015em;
  font-weight: 600;
}
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--lp-mono);
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.lp-tick { width: 14px; height: 1px; background: var(--lp-signal); flex: none; }
.lp-pitch {
  font-size: clamp(15px, 1.5vw, 16.5px); line-height: 1.68;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  max-width: 46ch; margin: 0 0 26px;
}

/* ---- hero: the claim beside the machine, not above it ------------------- */
.lp-hero { padding-top: clamp(34px, 7vw, 76px); padding-bottom: clamp(30px, 5vw, 58px); }
.lp-hero-grid {
  display: grid; gap: clamp(28px, 4vw, 52px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
}
@media (max-width: 940px) { .lp-hero-grid { grid-template-columns: 1fr; } }

.lp-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }

/* ---- the instrument strip: the signature element ------------------------ */
/* Real measured values, set like a gauge readout. Amber because they are
   measured; monospace and tabular so the digits do not shuffle when they
   refresh; a hairline between rather than boxes, because a box would make them
   look like marketing stats, which is exactly what they are not. */
.lp-status {
  display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 12px;
  border-top: 1px solid var(--lp-rule); border-bottom: 1px solid var(--lp-rule);
}
.lp-stat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 22px 13px 0; margin-right: 22px;
  border-right: 1px solid var(--lp-rule);
}
.lp-stat:last-child { border-right: 0; margin-right: 0; }
.lp-stat-k {
  font-family: var(--lp-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.lp-stat-v {
  font-family: var(--lp-mono); font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 600; color: var(--lp-signal);
  font-variant-numeric: tabular-nums; margin: 0; line-height: 1.15;
}
.lp-status-note {
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
  max-width: 52ch; margin: 0;
}

/* ---- the terminal, now the hero ---------------------------------------- */
.lp-hero-show { position: relative; }
.lp-hero .lp-demo-screen { min-height: 26em; }
.lp-demo-note {
  margin: 13px 2px 0; font-size: 12.5px; line-height: 1.62; color: var(--muted);
}
.lp-demo-note code {
  font-family: var(--lp-mono); font-size: .95em;
  color: var(--text); background: var(--surface2); padding: 1px 5px; border-radius: 4px;
}

/* ---- cards: quiet, so the hero stays the loud thing --------------------- */
.lp-card { transition: border-color .18s ease, transform .18s ease; }
.lp-card:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  transform: translateY(-2px);
}
.lp-card h3 { font-family: var(--lp-mono); font-size: 14.5px; letter-spacing: -.01em; }

/* Section heads get a monospace label; no 01/02/03, because these sections are
   not a sequence and numbering them would encode something untrue. */
.lp-sec-head h2 { margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  .lp-card, .lp-card:hover { transition: none; transform: none; }
}

/* ---- language switcher: top left, beside the brand ------------------------ */
/* Minimal on purpose. Two codes, the current one lit; a dropdown for two options would be a menu
   protecting nothing. */
.lp-lang { display: inline-flex; margin-left: 14px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lp-lang button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font: 600 10.5px/1 var(--lp-mono, ui-monospace, monospace); letter-spacing: .1em;
  padding: 6px 9px;
}
.lp-lang button + button { border-left: 1px solid var(--border); }
.lp-lang button:hover { color: var(--text); background: var(--surface2); }
.lp-lang button.is-on { color: var(--bg); background: var(--lp-signal, #e0a63a); }

/* ---- the rack in the gutters --------------------------------------------- */
/* Unit marks down both margins, a few lit as occupied slots. Hidden wherever the gutters are not
   actually empty — on a narrow screen there is no margin to fill, and pinning it there would just
   crowd the text. */
.lp-rack {
  position: fixed; top: 0; bottom: 0; width: 46px; pointer-events: none; z-index: 0;
  /* Unit marks: a repeating hairline every 22px, like rack units on an elevation drawing. */
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--border) 85%, transparent) 0 1px,
    transparent 1px 22px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  opacity: .5;
}
.lp-rack-l { left: max(8px, calc((100vw - 1180px) / 2 - 62px)); }
.lp-rack-r { right: max(8px, calc((100vw - 1180px) / 2 - 62px)); }

/* Occupied slots. Two per side at different heights and rates, so the pattern never resolves into a
   pulse you start watching instead of reading the page. */
.lp-rack::before, .lp-rack::after {
  content: ''; position: absolute; left: 6px; right: 6px; height: 12px; border-radius: 2px;
  background: color-mix(in srgb, var(--lp-signal, #e0a63a) 26%, transparent);
  animation: lp-slot 7s ease-in-out infinite;
}
.lp-rack::before { top: 28%; }
.lp-rack::after { top: 61%; animation-duration: 11s; animation-delay: -3s; }
.lp-rack-r::before { top: 44%; animation-duration: 9s; animation-delay: -5s; }
.lp-rack-r::after { top: 76%; animation-duration: 13s; animation-delay: -1s; }

@keyframes lp-slot { 0%, 100% { opacity: .30; } 50% { opacity: .85; } }

@media (max-width: 1300px) { .lp-rack { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .lp-rack::before, .lp-rack::after { animation: none; opacity: .45; }
}


/* ---- code being written, in the background ------------------------------- */
/* The page claims the machine writes code in your container; the margins are where to show that
   instead of saying it. Two rules keep it decoration rather than noise: it is real source from this
   repository (a page that sells a coding platform must not have fake code in its background), and it
   is masked out of the reading column entirely, so it can never compete with text. */
.lp-codebg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  display: grid; grid-template-columns: repeat(4, 1fr);
  font: 11px/1.5 var(--lp-mono);
  color: var(--accent);
  opacity: .13;
  -webkit-mask-image:
    linear-gradient(to right, #000 0 11%, transparent 26% 74%, #000 89% 100%),
    linear-gradient(to bottom, transparent, #000 13%, #000 86%, transparent);
  mask-image:
    linear-gradient(to right, #000 0 11%, transparent 26% 74%, #000 89% 100%),
    linear-gradient(to bottom, transparent, #000 13%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.lp-codebg.is-static { opacity: .09; }
.lp-cb-col { margin: 0; padding: 0 14px; white-space: pre; overflow: hidden; }
/* No margins to fill, no background: below this width the columns would be under the text. */
@media (max-width: 1300px) { .lp-codebg { display: none; } }

/* ---- the two thinking indicators, shown rather than described ------------- */
.lp-rzn-show {
  margin-top: 14px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.lp-rzn-row { display: flex; align-items: center; gap: 12px; min-height: 26px; }
.lp-rzn-row + .lp-rzn-row { margin-top: 6px; }
.lp-rzn-k {
  flex: none; width: 92px; font: 11px/1.5 var(--lp-mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.lp-rzn-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
@media (max-width: 620px) { .lp-rzn-k { width: 74px; } }