/* Landing-site layer on top of styles.css (Nocturne). Tokens only; no new colours. */
html { color-scheme: dark; }
.skip { position: absolute; left: var(--space-3); top: -48px; padding: var(--space-2) var(--space-3);
  background: var(--color-surface); border-radius: var(--radius-md); z-index: 10; }
.skip:focus { top: var(--space-3); }
.wrap { width: min(1080px, 100% - 2 * var(--space-6)); margin-inline: auto; }
.nav { padding-inline: 0; }
.nav .wrap { display: flex; align-items: center; gap: var(--space-6); padding-block: var(--space-3); }
.nav-brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.nav-brand img { width: 28px; height: 28px; }
.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.btn-primary { color: var(--color-accent-300); }
.card-kicker { color: var(--color-accent-300); }
a:not(.btn) { color: var(--color-accent-300); }
.nav a:not(.nav-brand) { color: var(--color-text); }
.nav a:not(.nav-brand):hover, .nav a[aria-current='page'] { color: var(--color-accent-300); }
.nav .nav-brand { color: var(--color-text); }
footer a { color: var(--color-neutral-300); }
code { font-size: 0.92em; background: var(--color-surface); padding: 1px 6px; border-radius: var(--radius-sm); }

.hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(60% 80% at 70% 50%, var(--color-section) 0%, var(--color-bg) 70%); }
.hero-bg { position: absolute; inset: 0 0 0 auto; width: 52%; z-index: -1;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 25%); mask-image: linear-gradient(to right, transparent, #000 25%); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg img { object-fit: cover; object-position: right center; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8);
  align-items: center; padding-block: 72px; }
.hero h1 { font-size: clamp(34px, 6vw, 56px); max-width: 12ch; }
.hero .lede { font-size: 17px; color: var(--color-neutral-400); max-width: 40ch; margin-bottom: var(--space-8); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.actions .btn { padding: var(--space-3) var(--space-8); font-size: 15px; }
.fineprint { font-size: 12px; margin-top: var(--space-4); color: var(--color-neutral-400); }

section.block { padding-block: 64px; }
section.block h2 { max-width: 20ch; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-8) 0 0;
  padding: 0; list-style: none; }
.steps .card { height: 100%; padding: var(--space-8); gap: var(--space-3); }
.step-shot { width: 100%; height: auto; border-radius: var(--radius-md); }

.prose { padding-block: 56px 72px; }
.prose > * { max-width: 62ch; }
.prose h1 { font-size: clamp(30px, 5vw, 42px); }
.prose h2 { font-size: 22px; margin-top: var(--space-8); }
.prose .updated { color: var(--color-neutral-400); font-size: 13px; }

footer { margin-top: var(--space-8); padding-block: var(--space-8); font-size: 13px; color: var(--color-neutral-400); }
footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; }
footer nav { display: flex; gap: var(--space-6); }

@media (max-width: 760px) {
  .hero { display: flex; flex-direction: column; }
  .hero .wrap { grid-template-columns: 1fr; padding-block: 40px 24px; }
  .hero-bg { position: static; order: 2; width: 100%; height: 260px; -webkit-mask-image: none; mask-image: none; }
  .steps { grid-template-columns: 1fr; }
  .steps .card { padding: var(--space-6); }
  }
@media (prefers-reduced-motion: no-preference) { .btn { transition: background-color .15s; } }