/* The /about landing. Loaded after page.css, only on pages with `landing: true`.
   The Elena v2 grammar in Klaviero's own palette: one idea a screen, one action,
   the product large. Hairlines only, no gradients, no shadows, no glow. Radii 12
   on controls and 16 on frames. The accent marks the primary action and nothing
   else. Source lives here, build-pages.mjs copies it into public/p/. */

body.lp-page main { max-width: none; width: 100%; margin: 0; padding: 0; }

html:has(body.lp-page) { scroll-padding-bottom: 72px; }
body.lp-page { --dim: #d0d6e2; font-size: 16px; }

.lp-sec { max-width: 1080px; margin: 0 auto; padding: 88px 24px; }
.lp-sec + .lp-sec { border-top: 1px solid var(--hairline-soft); }

.lp h1, .lp h2 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.022em; color: var(--text); }
.lp h1 { font-size: clamp(38px, 4.2vw, 56px); line-height: 1.06; margin: 0; }
.lp h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; margin: 0 0 14px; border: 0; padding: 0; }
.lp h3 { font-size: 16px; font-weight: 600; color: var(--text); margin: 0 0 4px; letter-spacing: 0; }
.lp p { color: var(--dim); max-width: 62ch; margin: 0 0 16px; }
.lp p b, .lp li b { color: var(--text); font-weight: 600; }

/* ---------- hero ---------- */
.lp-hero { text-align: center; padding: 72px 24px 0; max-width: 1180px; margin: 0 auto; }
.lp p.lp-eyebrow { font-family: var(--mono); font-size: 14px; color: var(--dim); margin: 0 auto 16px; }
.lp p.lp-sub { font-size: 20px; line-height: 1.45; margin: 24px auto 32px; max-width: 34em; }
.lp-btn {
  display: inline-block; padding: 16px 28px; border-radius: 12px; border: 0;
  background: var(--cyan); color: #04121a; font-weight: 600; font-size: 16px; text-decoration: none;
}
.lp-btn:hover { background: #5cf0ff; }
.lp-btn:active { background: #00bcd2; }
.lp-btn:focus-visible, .lp-ctl button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.lp p.lp-note { font-family: var(--mono); font-size: 14px; margin: 16px auto 0; }

.lp-film {
  background: #000 url(/landing/hero-neon.jpg) center / cover;
  position: relative; margin: 48px auto 0; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--hairline); background: #000; aspect-ratio: 16 / 9;
}
.lp-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-ctl { position: fixed; left: 16px; bottom: 16px; z-index: 20; display: flex; gap: 8px; }
.lp-ctl button {
  padding: 8px 16px; border-radius: 12px;
  background: rgba(5, 6, 15, 0.9); border: 1px solid var(--hairline); color: var(--text);
  font: 500 14px var(--sans); cursor: pointer;
}
.lp-ctl[hidden] { display: none; }
.lp-ctl button:hover { border-color: var(--text); }
.lp-ctl button:active { background: #000; }

/* Every picture on the page is a video. Browsers hold sound back until the first
   click or tap, so the video that would play says so until then. */
.lp-vf { position: relative; }
.lp-vf video { background: #000; }
.lp-tip {
  position: absolute; left: 50%; top: 40%; transform: translateX(-50%);
  padding: 8px 16px; border-radius: 12px; pointer-events: none; display: none;
  background: rgba(5, 6, 15, 0.9); border: 1px solid var(--hairline); color: var(--text); font: 500 14px var(--sans);
}
body.lp-locked .lp-vf.is-on .lp-tip { display: block; }

/* ---------- ruled columns ---------- */
.lp-cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); margin-top: 32px; }
.lp-cols > div { padding: 24px 24px 0 0; }
.lp-cols > div + div { border-left: 1px solid var(--hairline); padding-left: 24px; }
.lp-cols p { line-height: 1.5; margin: 0; }

.lp-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 32px; border-top: 1px solid var(--hairline); }
.lp-grid > div { padding: 16px 28px 16px 0; border-bottom: 1px solid var(--hairline); }
.lp-grid > div:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--hairline); }
.lp-grid p { line-height: 1.5; margin: 0; }

.lp .p-warn { margin: 28px 0 0; max-width: none; }

/* ---------- pictures ---------- */
.lp-shot { margin: 32px 0 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline); background: #000; }
.lp-shot video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.lp-worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; }
.lp-worlds figure { margin: 0; }
.lp-worlds video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; border: 1px solid var(--hairline); }
.lp-worlds figcaption { font-size: 14px; color: var(--text); padding: 8px 2px 0; }

/* ---------- numbers ---------- */
.lp-band { background: var(--panel); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.lp-nums { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1080px; margin: 0 auto; padding: 56px 24px; gap: 24px; }
.lp-nums b { display: block; font-family: var(--mono); font-weight: 500; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; color: var(--text); }
.lp-nums span { font-size: 14px; color: var(--dim); }

/* ---------- quotes ---------- */
.lp-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
.lp-quotes blockquote { margin: 0; padding: 24px; border: 1px solid var(--hairline); border-radius: 16px; }
.lp-quotes p { font-size: 20px; line-height: 1.4; color: var(--text); margin: 0 0 12px; max-width: none; }
.lp-quotes cite { font-style: normal; font-size: 14px; color: var(--dim); }

/* ---------- plans ---------- */
.lp-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
.lp-plans > div { padding: 24px; border: 1px solid var(--hairline); border-radius: 16px; }
.lp-plans ul { list-style: none; margin: 10px 0 0; padding: 0; }
.lp-plans li { padding: 8px 0; color: var(--dim); border-top: 1px solid var(--hairline-soft); }
.lp-price { font-family: var(--mono); font-size: 16px; color: var(--text); margin: 0; }
.lp-fine { font-size: 16px; margin-top: 16px; }

/* ---------- the end ---------- */
.lp-end { text-align: center; }
.lp-end p { margin: 0 auto 24px; }


/* ---------- links, chrome ---------- */
.lp p a { border-bottom: 0; text-decoration: underline; }
body.lp-page .p-warn a, body.lp-page .p-foot p a { border-bottom: 0; text-decoration: underline; }
body.lp-page .p-logo { letter-spacing: 0.08em; }
body.lp-page .p-nav { padding: 16px 24px; gap: 16px; }
body.lp-page .p-nav nav { gap: 16px; }
body.lp-page .p-nav nav a.p-cta { padding: 8px 16px; }
body.lp-page .p-warn { padding: 16px 20px; }
body.lp-page .p-warn p { margin: 0; }
body.lp-page .p-foot { padding: 24px 24px 80px; }
.lp p a:hover, body.lp-page .p-warn a:hover, body.lp-page .p-foot p a:hover { color: var(--text); }
body.lp-page .p-nav nav a { font-size: 12px; }
body.lp-page .p-foot, body.lp-page .p-foot p { font-size: 16px; }
body.lp-page .p-foot p { max-width: 62ch; }
body.lp-page .p-foot nav { gap: 8px 16px; margin-top: 16px; }
body.lp-page .p-foot nav a[aria-current] { text-decoration: underline; }
body.lp-page .p-nav nav a[aria-current] { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.lp abbr { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

@media (max-width: 760px) {
  .lp-sec { padding: 64px 16px; }
  .lp-hero { padding: 32px 16px 0; }
  .lp-hero + .lp-sec { padding-top: 40px; }
  .lp h1 { font-size: 34px; }
  .lp p.lp-sub { font-size: 18px; margin: 16px auto 24px; }
  .lp-cols, .lp-grid, .lp-quotes, .lp-plans { grid-template-columns: 1fr; }
  .lp-cols > div, .lp-cols > div + div { border-left: 0; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
  .lp-grid > div, .lp-grid > div:nth-child(even) { padding: 14px 0; border-left: 0; }
  .lp-worlds { grid-template-columns: repeat(2, 1fr); }
  .lp-nums { grid-template-columns: repeat(2, 1fr); padding: 40px 16px; }
  .lp-film { margin-top: 24px; }
}