/* Colours come from tokens.css (generated from docs/brand/tokens.json); type follows BRAND.md:
   SF Pro Rounded Bold for headlines, SF Pro for text, with system fallbacks elsewhere. */
:root {
  --display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --muted: color-mix(in srgb, var(--ink) 62%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 12%, var(--paper));
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink);
    --fg: var(--paper);
    --muted: color-mix(in srgb, var(--paper) 62%, var(--ink));
    --line: color-mix(in srgb, var(--paper) 14%, var(--ink));
    --link: var(--accent-dark);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg, var(--paper));
  color: var(--fg, var(--ink));
  font: 17px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
}

.page {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px max(24px, env(safe-area-inset-right)) 32px max(24px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 64px;
  align-items: center;
}

.intro { display: grid; gap: 28px; max-width: 34rem; }

.lockup { display: flex; align-items: center; gap: 14px; font: 600 22px var(--text); }
.lockup img { border-radius: 22.5%; }

h1 {
  margin: 0;
  font: 700 clamp(48px, 9vw, 84px)/1 var(--display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lede { margin: 0; font-size: 20px; color: var(--muted); text-wrap: pretty; }

.points { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.points li { padding-left: 22px; position: relative; }
.points li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gradient-brand);
}

.status {
  margin: 0;
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600; font-size: 15px;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--record);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--record) 22%, transparent);
}

/* The take: vertical, like everything Prelda records, with the brand's gradient wash from the bottom. */
.take {
  margin: 0;
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--magenta) 45%, transparent);
}
.take video { width: 100%; height: 100%; object-fit: cover; display: block; }
.take::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 30%;
  background: linear-gradient(to top, color-mix(in srgb, var(--magenta) 55%, transparent), transparent);
  pointer-events: none;
}

.footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  padding: 24px max(24px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  font-size: 14px; color: var(--muted);
}
.footer a { color: var(--link, var(--accent-text)); text-decoration: none; }
.footer a:hover, .footer a:focus-visible { text-decoration: underline; }

@media (max-width: 760px) {
  .page { grid-template-columns: 1fr; gap: 40px; padding-top: 32px; }
  .take { max-width: 340px; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .take video { display: none; }
  .take { background: var(--ink) url("assets/hero.jpg") center / cover; }
}