/* Marketing surfaces. Components reference semantic tokens only. */

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: var(--space-24) var(--space-16);
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  inset-inline: 0;
  top: -30%;
  height: 620px;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 50% at 50% 40%,
    color-mix(in oklab, var(--neutral-12) 7%, transparent),
    transparent 70%
  );
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
}
@media (max-width: 940px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}
.hero h1 em {
  font-style: normal;
  color: var(--color-text-tertiary);
}

/* ── Product surface mock ───────────────────────────────────────────────── */
.shot {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.7);
}
.shot__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding-inline: 12px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}
.shot__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}
.shot__t {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  margin-inline-start: 6px;
}
.shot__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dcard {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--color-bg-surface);
}
.dcard--attn {
  border-inline-start: 2px solid var(--color-attention-solid);
}
.dcard--auto {
  border-style: dashed;
  background: transparent;
}
.dcard__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}
.dcard__q {
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  font-weight: 500;
  margin: 0 0 8px;
}
.dcard__w {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  margin: 0;
  line-height: 1.55;
}
.dcard__age {
  margin-inline-start: auto;
  font-size: var(--text-label);
  color: var(--color-text-tertiary);
}
.who {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  flex: none;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  background: var(--color-bg-active);
  color: var(--color-text-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
}
.meta {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
/* ── Steps ──────────────────────────────────────────────────────────────── */
.step {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--color-bg-surface);
}
.step__n {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--color-text-tertiary);
  margin-bottom: 12px;
}
.step p {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
}

/* ── Pipeline ───────────────────────────────────────────────────────────── */
.pipe {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pipe__r {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
  background: var(--color-bg-surface);
}
.pipe__r--gate {
  border-color: var(--color-attention-border);
  background: var(--color-attention-bg);
}
.pipe__s {
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  font-weight: 500;
}
.pipe__w {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}
@media (max-width: 700px) {
  .pipe__r {
    grid-template-columns: 1fr auto;
  }
  .pipe__w {
    grid-column: 1 / -1;
  }
}

/* ── Feature grid ───────────────────────────────────────────────────────── */
.feat h3 {
  font-size: var(--text-body);
  margin-bottom: 6px;
}
.feat p {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
}

/* ── Terminal / code ────────────────────────────────────────────────────── */
.term {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.75;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  overflow-x: auto;
  color: var(--color-text-secondary);
}
.term .c {
  color: var(--color-text-tertiary);
}
.term .k {
  color: var(--color-text-primary);
  font-weight: 500;
}
.term .a {
  color: var(--color-attention-text);
}

/* ── CTA ────────────────────────────────────────────────────────────────── */
.cta {
  text-align: center;
  padding-block: var(--space-24);
}
.cta h2 {
  margin-inline: auto;
  max-width: 20ch;
}
.cta .lede {
  margin-inline: auto;
}
.cta .row {
  justify-content: center;
}

/* ── Download ───────────────────────────────────────────────────────────── */
.dl {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.dl__note {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

/* ── One page, one header ───────────────────────────────────────────────────
   Every nav link is an in-page anchor, so a target has to clear the sticky
   header instead of sliding under it. --nav-h is the header's real height. */
:root {
  --nav-h: 60px;
}
[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}
.nav__links a[aria-current] {
  color: var(--color-text-primary);
}

/* Narrow: the header stacks and the link row scrolls sideways. A collapsed menu
   would need script the rest of the page deliberately does without. */
@media (max-width: 820px) {
  :root {
    --nav-h: 96px;
  }
  .nav__in {
    height: auto;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-block: 10px 0;
  }
  .nav__links {
    display: flex;
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    padding-bottom: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav__links::-webkit-scrollbar {
    display: none;
  }
  .nav__links a {
    white-space: nowrap;
  }
}

.shot__cost {
  margin-inline-start: auto;
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.feat .label {
  display: block;
  margin-bottom: 8px;
}

.link {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
}
.link:hover {
  text-decoration-color: currentColor;
}

/* Amber is the one hue that means a human has to do something. */
.note {
  font-size: var(--text-caption);
  line-height: 1.6;
  text-align: start;
  color: var(--color-attention-text);
  background: var(--color-attention-bg);
  border: 1px solid var(--color-attention-border);
  border-radius: var(--radius);
  padding: 10px 12px;
}

/* Four cards should read as two rows of two, not three and an orphan. */
@media (min-width: 900px) {
  .grid-pair {
    grid-template-columns: 1fr 1fr;
  }
}

.hero .pill {
  align-self: start;
}