/* ============================================================
   Hugin landing — Volkrav design system applied
   (Linear VOL-73 — second pass, after the editorial v1
   was too soft / too Anthropic for the brand voice)
   ============================================================
   Aesthetic direction: RUNESTONE BRUTALISM. Bebas Neue
   stone-carved display, JetBrains Mono technical metadata,
   Source Sans Pro readable body. Volkrav structural rules —
   1px borders, max 8px radius, no gradients, no decorative
   floating elements, no bouncy motion. Asymmetric editorial
   grid, not centered hero + 3-card.
   ============================================================ */

/* JetBrains Mono + Source Sans Pro are landing-only; Bebas Neue is shared
   with the app (now in tokens.css) so it isn't re-imported here. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Source+Sans+Pro:wght@400;600;700&display=swap');

/* ===== Volkrav scope: typography overrides only on .landing-body.
   Hugin tokens.css already provides the warm Charcoal-ish palette
   the brand uses across the app. We override the FONT stack only,
   so the landing speaks Volkrav while the app stays in its own
   Newsreader voice. ===== */

.landing-body {
  --lp-font-display: var(--font-impact);
  --lp-font-body:    'Source Sans Pro', system-ui, -apple-system, sans-serif;
  --lp-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Volkrav structural tokens — applied on top of Hugin's tokens.css */
  --lp-radius-sm: 2px;
  --lp-radius-md: 4px;
  --lp-radius-lg: 8px;

  --lp-space-xs:  4px;
  --lp-space-sm:  8px;
  --lp-space-md:  16px;
  --lp-space-lg:  24px;
  --lp-space-xl:  32px;
  --lp-space-2xl: 48px;
  --lp-space-3xl: 64px;
  --lp-space-4xl: 96px;
  --lp-space-5xl: 128px;

  --lp-measure: 1240px;
  --lp-px: clamp(20px, 4vw, 56px);

  background: var(--bg);
  color: var(--ink);
  font-family: var(--lp-font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" on;
}

/* Background grain — 2% noise, no gradient. Volkrav rule:
   solid colors only, atmosphere via texture. */
.landing-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.86  0 0 0 0 0.76  0 0 0 0.025 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

main { position: relative; z-index: 1; }

/* Inline `.mono` utility — many places need quick mono treatment */
.mono {
  font-family: var(--lp-font-mono);
  font-feature-settings: "ss02" on, "calt" off;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.lp-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-block-end: 1px solid var(--line);
}
.lp-topbar-inner {
  max-width: var(--lp-measure);
  margin: 0 auto;
  padding: var(--lp-space-md) var(--lp-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-space-lg);
}
.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-sm);
  color: var(--ink);
  text-decoration: none;
}
.lp-brand-mark {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}
.lp-brand-mark img {
  display: block;
  height: 28px;
  width: auto;
}
.lp-footer-mark img {
  display: block;
  height: 26px;
  width: auto;
}
.lp-brand-word {
  font-family: var(--lp-font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
}
.lp-brand-tag {
  font-family: var(--lp-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-inline-start: var(--lp-space-sm);
  border-inline-start: 1px solid var(--line);
}
@media (max-width: 640px) {
  .lp-brand-tag { display: none; }
}

.lp-nav {
  display: flex;
  align-items: center;
  gap: var(--lp-space-sm);
}
.lp-nav-link {
  padding: var(--lp-space-sm) var(--lp-space-md);
  font-family: var(--lp-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  border-radius: var(--lp-radius-sm);
  transition: color 150ms ease-out, background 150ms ease-out;
}
.lp-nav-link:hover {
  color: var(--ink);
  background: var(--bg-elev);
}
@media (max-width: 640px) {
  .lp-nav-link { padding: var(--lp-space-sm) var(--lp-space-sm); }
}

/* ============================================================
   SHARED CTAS
   ============================================================ */
.lp-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-sm);
  padding: 14px 22px;
  font-family: var(--lp-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--lp-radius-md);
  text-decoration: none;
  transition: transform 150ms ease-out, background 150ms ease-out;
}
.lp-cta-primary:hover {
  transform: translateY(-1px);
  background: color-mix(in oklch, var(--accent) 90%, white);
}
.lp-cta-primary:active {
  transform: translateY(0);
}
.lp-cta-primary span {
  transition: transform 200ms ease-out;
}
.lp-cta-primary:hover span {
  transform: translateX(4px);
}
.lp-cta-sm {
  padding: 9px 14px;
  font-size: 12px;
}
.lp-cta-lg {
  padding: 18px 28px;
  font-size: 14px;
}

.lp-cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  font-family: var(--lp-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--lp-radius-md);
  text-decoration: none;
  transition: border-color 150ms ease-out, color 150ms ease-out;
}
.lp-cta-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   GOODBYE BANNER
   ============================================================ */
.lp-goodbye {
  max-width: var(--lp-measure);
  margin: var(--lp-space-md) auto 0;
  padding: var(--lp-space-md) var(--lp-px);
  background: color-mix(in oklch, var(--accent-soft) 50%, transparent);
  border: 1px solid var(--accent-line);
  border-radius: var(--lp-radius-sm);
  font-family: var(--lp-font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-align: center;
}
.lp-goodbye[hidden] { display: none; }
.lp-goodbye p { margin: 0; }

/* ============================================================
   HERO — asymmetric 2-column with raven figure on the right
   ============================================================ */
.lp-hero {
  max-width: var(--lp-measure);
  margin: 0 auto;
  padding: var(--lp-space-2xl) var(--lp-px) var(--lp-space-2xl);
  position: relative;
  border-block-end: 1px solid var(--line);
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.lp-hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 880px) {
  .lp-hero { min-height: 0; padding-block: var(--lp-space-2xl); }
  .lp-hero-grid { grid-template-columns: 1fr; gap: var(--lp-space-xl); }
  .lp-hero-right { max-width: 280px; margin-inline: auto; }
}

.lp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lp-space-sm);
  margin: 0 0 var(--lp-space-xl);
  padding-block-end: var(--lp-space-md);
  border-block-end: 1px solid var(--line);
  font-family: var(--lp-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.lp-meta-key { color: var(--ink-faint); }
.lp-meta-val { color: var(--ink-mute); }
.lp-meta-val-live {
  color: var(--accent);
  position: relative;
  padding-inline-start: 14px;
}
.lp-meta-val-live::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 currentColor;
  animation: lp-pulse 2.4s ease-out infinite;
}
@keyframes lp-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 70%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in oklch, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 0%, transparent); }
}
.lp-meta-sep { color: var(--line-strong); }

.lp-hero-title {
  margin: var(--lp-space-md) 0 0;
  font-family: var(--lp-font-display);
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 0.96;
  letter-spacing: 0.005em;
  color: var(--ink);
  font-weight: 400;
}
.lp-hero-line { display: block; }
.lp-hero-line em {
  font-style: normal;
  color: var(--accent);
}

.lp-hero-sub {
  margin: var(--lp-space-xl) 0 0;
  max-width: 56ch;
  font-family: var(--lp-font-body);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--ink-mute);
}

.lp-hero-cta {
  margin-top: var(--lp-space-2xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lp-space-md);
}

.lp-hero-specs {
  margin: var(--lp-space-2xl) 0 0;
  padding-block-start: var(--lp-space-lg);
  border-block-start: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lp-space-md) var(--lp-space-xl);
}
.lp-spec {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--lp-space-sm);
  font-family: var(--lp-font-mono);
  font-size: 12px;
  line-height: 1.5;
}
.lp-spec dt {
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lp-spec dd {
  margin: 0;
  color: var(--ink-mute);
}

/* Hero right — heraldic raven plate */
.lp-hero-right {
  position: relative;
}
.lp-hero-frame {
  border: 1px solid var(--line);
  background: color-mix(in oklch, var(--bg-elev) 50%, transparent);
  padding: var(--lp-space-md);
  position: relative;
}
.lp-hero-frame::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-inline-start: 4px solid var(--accent);
  width: 4px;
}
.lp-hero-frame-label,
.lp-hero-frame-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--lp-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.lp-hero-frame-foot {
  margin-top: var(--lp-space-md);
  padding-block-start: var(--lp-space-md);
  border-block-start: 1px solid var(--line);
}
.lp-hero-raven {
  display: block;
  width: 100%;
  height: auto;
  margin-block: var(--lp-space-lg);
  color: var(--accent);
}
.lp-hero-raven-ascii {
  display: none;
}
.lp-hero-raven-img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-inline: auto;
  user-select: none;
  -webkit-user-drag: none;
}
/* An author `display` declaration outranks the UA rule behind the `hidden`
   attribute, so hiding this image needs to be stated explicitly. */
.lp-hero-raven-img[hidden] {
  display: none;
}

/* ============================================================
   POSTER HERO (12A) — type layered over the raven. Proportions are
   carried over from the 1328x1200 board: raven centred at 61%/44%
   at 68% width, words at 10.5% of width, note column at 22.6%.
   ============================================================ */
.lp-hero-poster {
  display: block;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(28px, 4vw, 64px);
}
.lp-hero-atmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 90% 110% at 72% 34%,
    rgba(95, 122, 91, 0.18) 0%,
    rgba(14, 17, 16, 0) 72%,
    var(--bg-deep) 100%
  );
}

.lp-hero-raven-layer {
  position: absolute;
  z-index: 0;
  inset-inline-start: 61%;
  inset-block-start: 44%;
  translate: -50% -50%;
  width: min(68%, 900px);
  aspect-ratio: 1;
  pointer-events: none;
}
.lp-hero-raven-layer .lp-hero-raven-img {
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Hidden until the script confirms it built a field, so a module failure
   falls back to .lp-hero-raven-img rather than an empty hero. */
.lp-hero-raven-canvas {
  display: none;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.lp-hero-raven-canvas[data-ready="true"] {
  display: block;
  pointer-events: auto;
}

.lp-hero-poster-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(28px, 5vh, 64px);
  min-height: calc(100svh - 2 * clamp(28px, 4vw, 64px));
  pointer-events: none;
}
.lp-hero-poster-inner a {
  pointer-events: auto;
}

.lp-hero-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lp-space-md);
}
.lp-hero-kicker,
.lp-hero-edition {
  margin: 0;
  font-family: var(--lp-font-mono);
  text-transform: uppercase;
}
.lp-hero-kicker {
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--accent);
}
.lp-hero-edition {
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
}

.lp-hero-kicker-mark {
  margin-inline-end: 0.8em;
  color: var(--accent);
}

.lp-hero-copy {
  align-self: center;
  /* Not a ch measure: `ch` resolves against this element's own font-size, not
     the display size of the heading inside it, and squeezed the title to four
     lines. The paragraph keeps its own reading measure. */
  max-width: min(64%, 900px);
}
.lp-hero-words {
  margin: 0;
  display: grid;
  font-family: var(--lp-font-display);
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
}
.lp-hero-word-accent {
  color: var(--accent);
}
.lp-hero-body {
  margin: var(--lp-space-xl) 0 0;
  max-width: 52ch;
  font-family: var(--lp-font-body);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--ink-mute);
}

/* Actions live on the right, in the gap the raven leaves. Not a bar: three
   marks on the poster's right edge. */
.lp-hero-nav {
  position: absolute;
  z-index: 2;
  inset-inline-end: var(--lp-px);
  inset-block-start: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--lp-space-md);
}
.lp-hero-nav-link {
  font-family: var(--lp-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
}
.lp-hero-nav-link:hover {
  color: var(--ink);
}
.lp-hero-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-block-start: var(--lp-space-xs);
  padding: 15px 20px;
  border-radius: 2px;
  background: var(--accent);
  color: var(--bg-deep);
  font-family: var(--lp-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.lp-hero-nav-cta span {
  font-size: 14px;
  letter-spacing: 0;
}
.lp-hero-nav-cta:hover {
  filter: brightness(1.08);
}

@media (max-width: 880px) {
  /* Content-driven height here. Holding the 100svh minimum with a 1fr middle
     row stretched the gaps to ~200px above and below the words, because the
     stacked note and CTA are far shorter than the viewport. */
  .lp-hero-poster-inner {
    min-height: auto;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: clamp(28px, 5vh, 48px);
  }
  .lp-hero-poster {
    padding-block: clamp(40px, 8vh, 72px);
  }
  .lp-hero-copy {
    align-self: start;
    max-width: none;
  }
  .lp-hero-raven-layer {
    inset-inline-start: 50%;
    inset-block-start: 46%;
    width: min(115%, 560px);
    opacity: 0.45;
  }
  /* No room for a right rail on a phone: the actions become a row under
     the copy. */
  .lp-hero-nav {
    position: static;
    translate: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lp-space-lg);
    margin-block-start: clamp(28px, 5vh, 48px);
  }
  .lp-hero-nav-cta {
    margin-block-start: 0;
    margin-inline-start: auto;
  }
}

/* ============================================================
   RUNE STAGE — Three.js WebGL canvas, full viewport, fixed.
   Held below page content via z-index but above body bg so the
   runes float behind text. pointer-events disabled so the canvas
   never intercepts clicks; hover is handled by raycaster against
   global pointer coords. Tooltip anchored absolutely via JS.

   CURSOR — companion raven sprite. 8 pre-loaded PNG poses; JS
   state machine sets data-state on the host element and CSS
   crossfades to the matching pose.
   ============================================================ */
/* The home page runs full-bleed: sections span the viewport and only the text
   blocks inside them keep a reading measure. Scoped to .landing-home because
   privacy/terms share this stylesheet and their prose needs the 1240px cap. */
.landing-home {
  --lp-measure: 100%;
  --lp-px: clamp(24px, 5vw, 96px);
}

/* The skip link had no styles at all, so it rendered as ordinary text and
   pushed every page down by its line box. Standard treatment: off-screen until
   it takes keyboard focus. */
.skip-link {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: var(--lp-px);
  z-index: 9998;
  padding: 10px 16px;
  translate: 0 -140%;
  background: var(--accent);
  color: var(--bg-deep);
  font-family: var(--lp-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-end-start-radius: var(--lp-radius-sm);
  border-end-end-radius: var(--lp-radius-sm);
  transition: translate 0.18s ease;
}
.skip-link:focus-visible {
  translate: 0 0;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Hero positioning context still useful for stacking below */
.lp-hero { position: relative; isolation: isolate; }
.lp-hero-grid { position: relative; z-index: 1; }
@media (max-width: 880px) {
  .lp-hero-right { max-width: 320px; }
}

/* ============================================================
   SECTION HEADERS — kicker + Bebas Neue title
   ============================================================ */
.lp-section-head {
  margin-block-end: clamp(40px, 6vw, 80px);
}
.lp-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-sm);
  margin: 0 0 var(--lp-space-md);
  padding: var(--lp-space-xs) 0 var(--lp-space-sm);
  font-family: var(--lp-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-block-end: 1px solid var(--accent-line);
  width: max-content;
}
.lp-kicker-mark {
  color: var(--accent);
  font-family: var(--lp-font-display);
  font-size: 14px;
  letter-spacing: 0;
}
.lp-section-title {
  margin: 0;
  font-family: var(--lp-font-display);
  font-size: clamp(40px, 6.5vw, 88px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: var(--ink);
  font-weight: 400;
}
.lp-section-title em {
  font-style: normal;
  color: var(--accent);
}

/* ============================================================
   ACTS — manuscript-verse index of the four pillars.
   Each act is one inscribed line: [num] [title.] [prose] [/tag].
   The numbered list reads as a tight verse, not a brochure.
   ============================================================ */
.lp-acts {
  max-width: var(--lp-measure);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--lp-px);
  border-block-end: 1px solid var(--line);
}
.lp-acts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-act {
  display: grid;
  grid-template-columns: 44px max-content minmax(0, 1fr) auto;
  column-gap: clamp(16px, 2.2vw, 32px);
  align-items: baseline;
  padding-block: clamp(14px, 1.8vw, 22px);
  border-block-start: 1px solid var(--line);
  transition: background 200ms ease-out;
}
.lp-act:last-child {
  border-block-end: 1px solid var(--line);
}
.lp-act:hover {
  background: color-mix(in oklch, var(--accent-soft) 30%, transparent);
}
.lp-act-num {
  font-family: var(--lp-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.lp-act-title {
  margin: 0;
  font-family: var(--lp-font-display);
  font-size: clamp(18px, 1.2vw + 10px, 24px);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--ink);
  font-weight: 400;
  white-space: nowrap;
}
.lp-act-prose {
  margin: 0;
  font-family: var(--lp-font-body);
  font-size: clamp(13px, 0.4vw + 11px, 15px);
  line-height: 1.55;
  color: var(--ink-mute);
}
.lp-act-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--ink-faint);
  justify-self: end;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .lp-act {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: var(--lp-space-md);
    row-gap: var(--lp-space-xs);
    padding-block: var(--lp-space-md);
    align-items: start;
  }
  .lp-act-num { padding-block-start: 4px; }
  .lp-act-title { grid-column: 2; white-space: normal; }
  .lp-act-prose { grid-column: 2; }
  .lp-act-tag { grid-column: 2; justify-self: start; }
}

/* ============================================================
   SHELVES — sharp-edged tier cards
   ============================================================ */
.lp-shelves {
  max-width: var(--lp-measure);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 128px) var(--lp-px);
  border-block-end: 1px solid var(--line);
}
.lp-shelves-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lp-space-lg);
}
@media (max-width: 760px) {
  .lp-shelves-grid { grid-template-columns: 1fr; gap: var(--lp-space-md); }
}

.lp-shelf {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--lp-space-xl);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--lp-radius-md);
  transition: border-color 200ms ease-out;
}
.lp-shelf:hover {
  border-color: var(--line-strong);
}
.lp-shelf-accent {
  border-color: var(--accent-line);
  background: color-mix(in oklch, var(--bg-elev) 70%, var(--accent-soft));
}
.lp-shelf-accent:hover {
  border-color: var(--accent);
}
.lp-shelf-badge {
  position: absolute;
  top: -10px;
  inset-inline-start: var(--lp-space-xl);
  padding: 4px 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  border-radius: var(--lp-radius-sm);
}

.lp-shelf-head {
  display: flex;
  align-items: baseline;
  gap: var(--lp-space-md);
  flex-wrap: wrap;
}
.lp-shelf-num {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 600;
}
.lp-shelf-name {
  margin: 0;
  font-family: var(--lp-font-display);
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  font-weight: 400;
}
.lp-shelf-tag {
  flex: 1 0 100%;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.lp-shelf-price {
  margin: var(--lp-space-xl) 0 var(--lp-space-md);
  display: flex;
  align-items: baseline;
  gap: var(--lp-space-sm);
  padding-block-end: var(--lp-space-md);
  border-block-end: 1px solid var(--line);
}
.lp-shelf-amount {
  font-family: var(--lp-font-display);
  font-size: clamp(56px, 7vw, 88px);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.lp-shelf-cadence {
  font-size: 13px;
  color: var(--ink-dim);
}
.lp-shelf-features {
  margin: var(--lp-space-md) 0 var(--lp-space-xl);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-sm);
  flex: 1;
}
.lp-shelf-features li {
  display: flex;
  gap: var(--lp-space-sm);
  font-family: var(--lp-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.lp-feature-mark {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  padding-block-start: 2px;
}

.lp-shelf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-family: var(--lp-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--lp-radius-md);
  text-decoration: none;
  margin-top: auto;
  transition: border-color 150ms ease-out, color 150ms ease-out;
}
.lp-shelf-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.lp-shelf-cta-accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.lp-shelf-cta-accent:hover {
  background: color-mix(in oklch, var(--accent) 90%, white);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.lp-shelves-foot {
  margin: var(--lp-space-2xl) auto 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
}

/* ============================================================
   CLOSING — asymmetric, stamp/runeline anchor on the right
   ============================================================ */
.lp-closing {
  position: relative;
  max-width: var(--lp-measure);
  margin: 0 auto;
  padding: clamp(80px, 12vw, 160px) var(--lp-px);
  border-block-end: 1px solid var(--line);
  /* Faint top-edge inset reads as a carved face — matches the inscribed-stone
     voice of the promise section below. */
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--ink) 4%, transparent);
}
/* Single hairline at the right gutter — frames the section as a carved
   tablet's edge without adding visible chrome. Hidden on the stacked
   mobile layout where the colophon lives below the headline. */
.lp-closing::after {
  content: "";
  position: absolute;
  inset-block: var(--lp-space-2xl);
  inset-inline-end: var(--lp-px);
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--line) 12%,
    var(--line) 88%,
    transparent
  );
  pointer-events: none;
}
@media (max-width: 760px) {
  .lp-closing::after { display: none; }
}
.lp-closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 760px) {
  .lp-closing-grid { grid-template-columns: 1fr; gap: var(--lp-space-2xl); }
}
.lp-closing-title {
  margin: var(--lp-space-xs) 0 0;
  font-family: var(--lp-font-display);
  font-size: clamp(64px, 11vw, 144px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  color: var(--ink);
  font-weight: 400;
}
.lp-closing-title em {
  font-style: normal;
  color: var(--accent);
}
.lp-closing-sub {
  margin: var(--lp-space-xl) 0 var(--lp-space-2xl);
  max-width: 44ch;
  font-family: var(--lp-font-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--ink-mute);
}

/* CTA footnote — printer's-mark line under the BEGIN button. The leading §
   echoes the section kicker; the dots set tempo, the all-caps mono reads as
   inscribed terms-of-passage. */
.lp-closing-cta-note {
  margin: var(--lp-space-md) 0 0;
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-xs);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.lp-closing-cta-note .lp-kicker-mark {
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
}

/* ----------------------------------------------------------
   COLOPHON — vertical typographic stamp on the right column.
   No box frame; the section's right-gutter hairline already
   carries that work. The column stretches to match the left
   so the eyebrow sits at the top, the colophon stack drives
   visual centre, the seal grounds the bottom. Tight metrics
   throughout — names cerrated, runes anchored close to them,
   seal as a 3-line micro-stack rather than a wrapping inline.
   ---------------------------------------------------------- */
.lp-closing-right {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  text-align: end;
  padding-inline-end: var(--lp-space-md);
}
.lp-colophon-eyebrow {
  margin: 0 0 var(--lp-space-2xl);
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: var(--lp-space-xs);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.lp-colophon-eyebrow .lp-kicker-mark {
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
}

.lp-colophon {
  display: grid;
  justify-items: end;
  gap: 2px;
  line-height: 0.96;
}
.lp-colophon-name {
  font-family: var(--lp-font-display);
  font-size: clamp(42px, 5.2vw, 64px);
  font-weight: 500;
  /* Tight, deliberate letter-spacing — the names read as carved
     blocks rather than spread-out title text. */
  letter-spacing: 0.012em;
  color: var(--ink);
}
/* Display-italic ampersand — quieter binder between the two raven
   names. Sits in line with both at smaller size; color between
   accent and ink-mute reads as a connecting glyph, not a beat. */
.lp-colophon-amp {
  font-family: var(--lp-font-display);
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1;
  color: color-mix(in oklab, var(--accent) 55%, var(--ink-mute));
  padding-block: 4px 2px;
}

/* Seal — pressed printer's mark at the very bottom of the right
   column. margin-top: auto pins it to the bottom of the flex column
   so it lines up with the prose/CTA-footnote baseline on the left.
   The three lines are intentional: rune of departure, inscription,
   year — each its own line, right-aligned, with hairline above. */
.lp-colophon-seal {
  display: grid;
  justify-items: end;
  gap: 6px;
  margin-block: var(--lp-space-2xl) 0;
  margin-top: auto;
  padding-block-start: var(--lp-space-md);
  border-block-start: 1px solid var(--line);
}
.lp-colophon-seal-line {
  font-family: var(--lp-font-mono, var(--font-mono), monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  /* Allow up to ~24ch on a single line; only wraps on the narrowest
     desktop columns and never breaks the year off into a third row
     because year sits on its own line below. */
  max-width: 28ch;
}
.lp-colophon-seal-year {
  font-family: var(--lp-font-mono, var(--font-mono), monospace);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 760px) {
  .lp-closing-right {
    text-align: start;
    padding-inline: 0;
    align-self: auto;
  }
  .lp-colophon-eyebrow { align-self: flex-start; margin-block-end: var(--lp-space-lg); }
  .lp-colophon { justify-items: start; }
  .lp-colophon-seal {
    justify-items: start;
    margin-top: var(--lp-space-xl);
  }
}

/* ----------------------------------------------------------
   COLOPHON — staggered settle on scroll-in. The names translate
   down a couple of px (like a stamp pressing onto the page) and
   fade in with a deliberate cadence. The reduced-motion guard
   skips the animation entirely.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .lp-closing-right[data-closing-in] .lp-colophon-name,
  .lp-closing-right[data-closing-in] .lp-colophon-amp,
  .lp-closing-right[data-closing-in] .lp-colophon-seal {
    opacity: 0;
    transform: translateY(-4px);
    animation: lp-colophon-settle 520ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .lp-closing-right[data-closing-in="true"] .lp-colophon-name:nth-of-type(1) { animation-delay: 0ms; }
  .lp-closing-right[data-closing-in="true"] .lp-colophon-amp { animation-delay: 110ms; }
  .lp-closing-right[data-closing-in="true"] .lp-colophon-name:nth-of-type(2) { animation-delay: 220ms; }
  .lp-closing-right[data-closing-in="true"] .lp-colophon-seal { animation-delay: 360ms; }
}
@keyframes lp-colophon-settle {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.lp-footer {
  max-width: var(--lp-measure);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--lp-px) clamp(32px, 4vw, 48px);
}
.lp-footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: var(--lp-space-2xl);
  padding-block-end: var(--lp-space-2xl);
  border-block-end: 1px solid var(--line);
}
@media (max-width: 720px) {
  .lp-footer-grid { grid-template-columns: 1fr; gap: var(--lp-space-xl); }
}

.lp-footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-md);
}
.lp-footer-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-sm);
  font-family: var(--lp-font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.lp-footer-mark span {
  color: var(--ink);
}
.lp-footer-blurb {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
}

.lp-footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, auto));
  gap: var(--lp-space-2xl);
}
@media (max-width: 480px) {
  .lp-footer-links { grid-template-columns: repeat(2, 1fr); gap: var(--lp-space-xl); }
}
.lp-footer-links > div {
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-sm);
}
.lp-footer-eyebrow {
  margin: 0 0 var(--lp-space-sm);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
}
.lp-footer-links a {
  font-family: var(--lp-font-body);
  font-size: 14px;
  color: var(--ink-mute);
  text-decoration: none;
  width: max-content;
  transition: color 150ms ease-out;
}
.lp-footer-links a:hover {
  color: var(--accent);
}

.lp-footer-bottom {
  margin-top: var(--lp-space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--lp-space-md);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.lp-footer-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  margin-inline: var(--lp-space-md);
}
@media (max-width: 480px) {
  .lp-footer-bottom { flex-direction: column; gap: var(--lp-space-sm); }
  .lp-footer-rule { display: none; }
}

/* ============================================================
   STAGGERED REVEAL — page load, no bounce, GPU-only
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .lp-meta,
  .lp-hero-line,
  .lp-hero-sub,
  .lp-hero-cta,
  .lp-hero-specs,
  .lp-hero-right {
    opacity: 0;
    transform: translateY(8px);
    animation: lp-reveal 600ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  }
  .lp-meta              { animation-delay: 40ms; }
  .lp-hero-line:nth-child(1) { animation-delay: 100ms; }
  .lp-hero-line:nth-child(2) { animation-delay: 160ms; }
  .lp-hero-line:nth-child(3) { animation-delay: 220ms; }
  .lp-hero-line:nth-child(4) { animation-delay: 280ms; }
  .lp-hero-sub          { animation-delay: 420ms; }
  .lp-hero-cta          { animation-delay: 500ms; }
  .lp-hero-specs        { animation-delay: 580ms; }
  .lp-hero-right        { animation-delay: 200ms; animation-duration: 900ms; }
}
@keyframes lp-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   THE PROMISE — privacy section (VOL-341).
   Centered triptych of inscribed vows. Composition is the
   differentiator (3 panels under a single header + 1 italic coda);
   palette stays inside the landing's standard ink-mute / ink-dim
   range — no warm-tint background, no glow, no chromatic emphasis.
   Each rune is chosen for meaning: ᛟ Othala (inheritance) → audio,
   ᛒ Berkano (sheltering) → transcripts, ᚹ Wunjo (safekeeping) →
   leaving, ᛗ Mannaz (bond between people) → the postscript.
   ============================================================ */
.lp-keep-is-yours {
  max-width: var(--lp-measure);
  margin: 0 auto;
  padding: clamp(80px, 12vw, 160px) var(--lp-px);
  border-block-end: 1px solid var(--line);
}

.lp-keep-head {
  text-align: center;
  margin-block-end: clamp(56px, 9vw, 104px);
}
.lp-keep-head .lp-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lp-space-xs);
}
.lp-keep-title {
  margin: var(--lp-space-xs) 0 0;
  font-family: var(--lp-font-display);
  font-size: clamp(56px, 9.5vw, 128px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  color: var(--ink);
  font-weight: 400;
}
.lp-keep-title em {
  font-style: italic;
  color: var(--accent);  /* moss — brand green, the only chromatic mark in the section */
}

/* Triptych — three vows side by side on desktop, stacked on mobile.
   Hairline dividers in --line read as one inscribed plaque divided
   into three panels, not three separate cards. */
.lp-keep-vows {
  list-style: none;
  margin: 0 0 clamp(48px, 7vw, 88px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) {
  .lp-keep-vows {
    grid-template-columns: 1fr;
  }
}

.lp-vow {
  padding: clamp(32px, 4vw, 56px) clamp(20px, 2.5vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lp-space-md);
  text-align: center;
}
.lp-vow + .lp-vow {
  border-inline-start: 1px solid var(--line);
}
@media (max-width: 860px) {
  .lp-vow + .lp-vow {
    border-inline-start: none;
    border-block-start: 1px solid var(--line);
  }
}

.lp-vow-title {
  margin: 0;
  font-family: var(--lp-font-mono);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.lp-vow-body {
  margin: 0;
  max-width: 30ch;
  font-family: var(--lp-font-body);
  font-size: clamp(15px, 0.9vw + 11px, 17px);
  line-height: 1.6;
  color: var(--ink);
}

/* Coda — postscript line set apart from the vows by a hairline and
   italic treatment. ᛗ Mannaz leads inline as a small prefix. */
.lp-keep-coda {
  margin: 0 auto;
  padding-block-start: clamp(40px, 6vw, 72px);
  border-block-start: 1px solid var(--line);
  max-width: 52ch;
  text-align: center;
  font-family: var(--lp-font-body);
  font-style: italic;
  font-size: clamp(16px, 1.1vw + 10px, 19px);
  line-height: 1.55;
  color: var(--ink-mute);
}

/* ============ LIVE DEMO (VOL-337) ============ */
/* Send a raven, watch it return with a scroll. Runestone-brutalist: 1px
   hairlines, transform/opacity only, single-pass shimmer, no loops. */
.lp-demo {
  max-width: var(--lp-measure);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--lp-px);
  border-block-end: 1px solid var(--line);
}
.lp-demo-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--lp-space-md);
  margin-block: var(--lp-space-xl) var(--lp-space-2xl);
}
.lp-demo-label {
  display: block;
  width: 100%;
  margin-block-end: var(--lp-space-xs);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.lp-demo-form input {
  flex: 1 1 18rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  font-family: var(--lp-font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--lp-radius-md);
}
.lp-demo-form input:focus-visible {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line);
}

.lp-demo-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--lp-space-lg);
  min-height: 380px;
  padding: var(--lp-space-2xl) var(--lp-space-xl);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--lp-radius-lg);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--ink) 4%, transparent);
}
.lp-demo-raven { width: 180px; height: 180px; object-fit: contain; }
.lp-demo-scroll {
  width: 100%;
  max-width: 44ch;
  display: grid;
  gap: var(--lp-space-md);
}
.lp-demo-transcript p {
  margin: 0 0 0.4em;
  font-family: var(--lp-font-body);
  color: var(--ink-mute);
  line-height: 1.6;
}
.lp-demo-tldr {
  position: relative;
  margin: 0;
  padding-block-start: var(--lp-space-md);
  border-block-start: 1px solid var(--line);
  font-family: var(--lp-font-body);
  font-size: 1.05rem;
  color: var(--ink);
  overflow: hidden;
}
.lp-demo-chapters {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--lp-space-sm, 8px);
}
.lp-demo-chapters li {
  display: flex;
  gap: var(--lp-space-md);
  font-family: var(--lp-font-body);
  color: var(--ink-mute);
}
.lp-demo-ts { color: var(--accent); letter-spacing: 0.08em; }
.lp-demo-cta { justify-self: start; }
.lp-demo-replay {
  display: inline-block;
  margin-block-start: var(--lp-space-lg);
  background: none;
  border: 0;
  color: var(--ink-dim);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.lp-demo-replay:hover { color: var(--accent); }

/* JS-primed: hide each beat until its moment. Without JS none of this applies,
   so the full still shows. */
.lp-demo-stage.is-primed .lp-demo-raven,
.lp-demo-stage.is-primed .lp-demo-transcript,
.lp-demo-stage.is-primed .lp-demo-tldr,
.lp-demo-stage.is-primed .lp-demo-chapters,
.lp-demo-stage.is-primed .lp-demo-cta { opacity: 0; }

.lp-demo-stage .lp-demo-raven.is-in {
  animation: lp-demo-fly 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.lp-demo-stage .lp-demo-transcript.is-in {
  animation: lp-demo-unfurl 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.lp-demo-stage .lp-demo-tldr.is-in {
  animation: lp-demo-rise 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.lp-demo-stage .lp-demo-tldr.is-in::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--accent) 22%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: lp-demo-shimmer 1.1s ease-out 0.2s 1 forwards;
}
.lp-demo-stage .lp-demo-chapters.is-in {
  animation: lp-demo-rise 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.lp-demo-stage .lp-demo-cta.is-in {
  animation: lp-demo-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes lp-demo-fly {
  from { opacity: 0; transform: translateX(-36px) translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
@keyframes lp-demo-unfurl {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes lp-demo-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lp-demo-shimmer {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-demo-stage .lp-demo-raven,
  .lp-demo-stage .lp-demo-transcript,
  .lp-demo-stage .lp-demo-tldr,
  .lp-demo-stage .lp-demo-chapters,
  .lp-demo-stage .lp-demo-cta { opacity: 1 !important; animation: none !important; }
  .lp-demo-stage .lp-demo-tldr.is-in::after { display: none; }
}

@media (max-width: 640px) {
  .lp-demo-stage { min-height: 0; gap: var(--lp-space-xl); }
  .lp-demo-raven { width: 120px; height: 120px; }
}