/* landing-1101: shared base for the front page (SPEC §2 "Shared utilities"). Task A owns this file.
 * Reset, buttons, type helpers, layout helpers, sheets, grain and the scroll reveal. Sections build on these names. */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--lp-page);
  color: var(--lp-ink);
  font-family: var(--lp-font-body);
  font-size: var(--lp-body);
  line-height: var(--lp-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
::selection { background: rgba(255, 255, 255, .26); color: #fff; }

/* Owner rule: the hand cursor on everything pressable. */
a, button, summary, [role="button"], label[for] { cursor: pointer; }

.lp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Buttons. Primary is pure white (owner rule); there are no coloured buttons. */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--lp-r-pill);
  border: 1px solid transparent;
  font-family: var(--lp-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  user-select: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.lp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lp-btn:active { transform: translateY(1px); }
.lp-btn--primary { background: var(--lp-btn-primary-bg); color: var(--lp-btn-primary-ink); }
.lp-btn--primary:hover { background: var(--lp-btn-primary-hover); }
.lp-btn--ghost { background: transparent; border-color: var(--lp-line-2); color: var(--lp-btn-ghost-ink); }
.lp-btn--ghost:hover { background: var(--lp-hover); color: #fff; }

/* The serif accent words (Instrument Serif italic): pure white, the page's one accent. */
.lp-accent {
  font-family: var(--lp-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--lp-accent);
  padding-right: .08em;
}

/* Type helpers. */
.lp-h2 {
  font-family: var(--lp-font-display);
  font-weight: 700;
  font-size: var(--lp-h2);
  line-height: var(--lp-h2-lh);
  letter-spacing: var(--lp-h2-ls);
  text-align: center;
  margin: 0 0 12px;
  text-wrap: balance;
}
.lp-sub {
  font-family: var(--lp-font-body);
  font-size: var(--lp-sub);
  line-height: var(--lp-sub-lh);
  color: var(--lp-ink-2);
  max-width: var(--lp-sub-max);
  margin: 0 auto;
  text-align: center;
  text-wrap: pretty;
}
.lp-eyebrow {
  display: block;
  font-family: var(--lp-font-body);
  font-size: var(--lp-eyebrow);
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--lp-ink-3);
  text-align: center;
  margin-bottom: 14px;
}

/* Layout helpers. */
.lp-container { max-width: var(--lp-container); margin: 0 auto; padding: 0 var(--lp-gutter); }
.lp-content { max-width: var(--lp-content); margin: 0 auto; }
.lp-section { padding: var(--lp-section-y) 0; }

/* Rounded sheets, rendered dark, inset 5px from the page edge with a hairline. */
.lp-sheet {
  position: relative;
  background: var(--lp-sheet);
  margin: 0 5px;
  border: 1px solid var(--lp-sheet-edge);
  padding: 32px 0;
}
.lp-sheet--open { border-radius: var(--lp-r-sheet) var(--lp-r-sheet) 0 0; border-bottom: 0; }
.lp-sheet--close { border-radius: 0 0 var(--lp-r-sheet) var(--lp-r-sheet); border-top: 0; }
.lp-sheet--whole { border-radius: var(--lp-r-sheet); }

/* ---------- the lower page (every section under the hero) ----------
 * One calm near-black page, one 1104px column, 168px between sections. Each section opens with an intro row: the
 * heading on the left, a short paragraph on the right (stacked on a phone). Panels are quiet dark surfaces with a
 * hairline; a panel's caption is a small grey label over one plain white line, under its picture. */
.lp-sec { position: relative; padding: var(--lp-lower-y) 0 0; background: var(--lp-page-lower); }
.lp-sec--first { background: linear-gradient(var(--lp-hero-end), var(--lp-page-lower) 240px); }
.lp-sec--last { padding-bottom: var(--lp-lower-y); }
.lp-wrap { max-width: calc(var(--lp-wrap) + 2 * var(--lp-gutter)); margin: 0 auto; padding: 0 var(--lp-gutter); }

.lp-intro {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start;
  padding: 0 32px; margin-bottom: 64px;
}
.lp-intro__h {
  margin: 0; max-width: 520px;
  font: 500 var(--lp-intro-h) / var(--lp-intro-lh) var(--lp-font-body); letter-spacing: var(--lp-intro-ls);
  color: var(--lp-ink); text-wrap: balance;
}
.lp-intro__side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 6px; }
.lp-intro__p { margin: 0; max-width: 32rem; font: 400 16px/24px var(--lp-font-body); letter-spacing: .005em; color: var(--lp-ink-soft); text-wrap: pretty; }
.lp-intro__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-intro--center { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 16px; }
.lp-intro--center .lp-intro__h { max-width: 640px; }
.lp-intro--center .lp-intro__p { max-width: 36rem; }
.lp-intro--center .lp-intro__p { color: var(--lp-ink-muted); }

.lp-panel {
  position: relative; min-width: 0; overflow: hidden; isolation: isolate;
  background: var(--lp-sheen), var(--lp-surface); border: 1px solid var(--lp-hair); border-radius: var(--lp-r-panel);
  box-shadow: var(--lp-edge-top);
}
.lp-cap { position: relative; z-index: 2; padding: 0 28px 30px; }
.lp-cap__k { margin: 0; font: 400 15px/22px var(--lp-font-body); letter-spacing: .01em; color: var(--lp-ink-muted); }
.lp-cap__t { margin: 8px 0 0; max-width: 34rem; font: 400 15px/22px var(--lp-font-body); letter-spacing: .01em; color: var(--lp-ink); text-wrap: pretty; }
.lp-cap--on-media .lp-cap__k { color: rgba(255,255,255,.72); }

/* The small segmented toggle (tabs on the showcase and the code card). */
.lp-seg {
  display: inline-flex; align-items: stretch; gap: 2px; height: 40px; padding: 3px; max-width: 100%;
  border-radius: var(--lp-r-pill); background: #090909; border: 1px solid var(--lp-hair);
}
.lp-seg__b {
  display: inline-flex; align-items: center; padding: 0 18px; border-radius: var(--lp-r-pill); white-space: nowrap;
  font: 500 14px/1 var(--lp-font-body); color: var(--lp-ink-muted); transition: background-color 150ms, color 150ms;
}
.lp-seg__b:hover { background: var(--lp-hover); color: #fff; }
.lp-seg__b.is-on { background: #1f1f1f; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.lp-seg__b:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

@media (max-width: 860px) {
  .lp-intro { grid-template-columns: 1fr; row-gap: 16px; padding: 0 4px; margin-bottom: 40px; }
  .lp-intro__side { padding-top: 0; gap: 20px; }
}
@media (max-width: 640px) {
  .lp-cap { padding: 0 20px 24px; }
  .lp-seg { height: 52px; }
  .lp-seg__b { min-width: 48px; justify-content: center; padding: 0 16px; }
}

/* Fine film grain over any positioned block (add .lp-grain; the block needs position: relative). */
.lp-grain { position: relative; isolation: isolate; }
.lp-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lp-grain-fine);
  background-size: 180px;
  mix-blend-mode: overlay;
  opacity: .55;
  pointer-events: none;
  border-radius: inherit;
}

/* Scroll reveal: hero.js adds .is-in (window.VLLanding.reveal). --i staggers children; set it with
 * el.style.setProperty("--i", n) from JS (inline style="" is blocked by the CSP). */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--lp-reveal-dur) var(--lp-ease), transform var(--lp-reveal-dur) var(--lp-ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
/* Without JS nothing should stay hidden. */
html:not(.lp-js) [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}