/* ============================================================
   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: calc(100svh - 64px);
  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;
}

/* ============================================================
   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.
   ============================================================ */
#lp-rune-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
#lp-rune-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9997;
  pointer-events: none;
  font-family: var(--lp-font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--ink);
  background: var(--bg-elev-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--lp-radius-sm);
  padding: 6px 10px;
  white-space: nowrap;
  max-width: min(360px, 92vw);
  opacity: 0;
  transition: opacity .22s ease;
  /* anchor variants — set by JS based on which third of the viewport
     the rune sits in, so the tooltip never clips off-screen */
  transform: translate(-50%, calc(-100% - 14px));
}
#lp-rune-tip[data-anchor="left"]  { transform: translate(8px,    calc(-100% - 14px)); }
#lp-rune-tip[data-anchor="right"] { transform: translate(-100%,  calc(-100% - 14px)) translateX(-8px); }
#lp-rune-tip.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #lp-rune-stage { display: none; }
}

/* 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;
  /* Almost no gap between rows — runes should feel like a stamp
     pressed flush against the name, not floating siblings. The
     visual breath comes from the differing glyph weights. */
  gap: 2px;
  line-height: 0.96;
}
.lp-colophon-rune {
  font-family: 'Noto Sans Runic', var(--lp-font-display), serif;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0;
  /* Drop the run's natural baseline slightly so it sits close to
     the name beneath/above. */
  padding-block: 2px 4px;
}
.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-rune {
  font-family: 'Noto Sans Runic', var(--lp-font-display), serif;
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
}
.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 runes and 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-rune,
  .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-rune:first-child { animation-delay: 0ms; }
  .lp-closing-right[data-closing-in="true"] .lp-colophon-name:nth-of-type(1) { animation-delay: 90ms; }
  .lp-closing-right[data-closing-in="true"] .lp-colophon-amp { animation-delay: 170ms; }
  .lp-closing-right[data-closing-in="true"] .lp-colophon-name:nth-of-type(2) { animation-delay: 250ms; }
  .lp-closing-right[data-closing-in="true"] .lp-colophon-rune:last-child { animation-delay: 340ms; }
  .lp-closing-right[data-closing-in="true"] .lp-colophon-seal { animation-delay: 460ms; }
}
@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);
  }
}

/* Runes as quiet inscription — sized just above body so the eye sees
   ornament, not a stunt. Same ink tone as the rest of the section. */
.lp-vow-rune {
  font-family: var(--lp-font-display);
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1;
  color: var(--ink-mute);
}

.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);
}
.lp-coda-rune {
  display: inline-block;
  font-family: var(--lp-font-display);
  font-style: normal;
  font-size: 1.3em;
  line-height: 1;
  color: var(--ink-dim);
  margin-inline-end: var(--lp-space-xs);
  vertical-align: -0.05em;
}

/* ============ 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; }
}