/* ============================================
   COHORT ALPHA · PROOF
   The hero link (.hero-proof) and the #alpha section under the spec band.
   Loaded after styles.v6.css and uses its tokens and section scaffolding.
   Cloudflare edge-caches this file: bump the filename for any change after
   it has shipped.
   ============================================ */

/* ---- hero link ---- */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 560px;
  margin: -12px 0 36px;
  padding: 12px 20px 12px 12px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  transition: border-color 0.25s;
}
.hero-proof:hover { border-color: var(--amber); }
.hero-proof img {
  flex: none;
  width: 84px;
  height: 84px;
  object-fit: cover;
}
.hero-proof-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-proof .k,
.hero-proof .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-proof .k { color: var(--amber); }
.hero-proof .l { color: var(--bone-dim); }
.hero-proof .v {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 40;
  font-size: 22px;
  line-height: 1.1;
  color: var(--bone);
}
/* On a phone the pitch paragraph pushes the link below the first screen, so
   it moves up to sit between the headline and the paragraph. */
@media (max-width: 720px) {
  .hero-copy { display: flex; flex-direction: column; }
  .hero-copy .hero-sub,
  .hero-copy .hero-ctas { order: 1; }
  .hero-proof { margin: -8px 0 32px; }
  .hero-proof img { width: 72px; height: 72px; }
  .hero-proof .v { font-size: 19px; }
}

.nw { white-space: nowrap; }

/* ---- section ---- */
/* Lead photo spans two rows beside a 2 × 2 of the rest; on phones the lead
   runs full width and the rest sit two across. */
.alpha-photos {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  margin: 56px 0 48px;
}
.alpha-photos figure {
  position: relative;
  aspect-ratio: 4/3;
  background: #000;
  border: 1px solid var(--line);
  overflow: hidden;
}
.alpha-photos figure.lead {
  grid-row: span 2;
  aspect-ratio: auto;
}
.alpha-photos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.alpha-photos figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 12px 10px;
  background: linear-gradient(transparent, rgba(10, 9, 8, 0.85));
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
}
@media (max-width: 720px) {
  .alpha-photos {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 36px 0 32px;
  }
  .alpha-photos figure.lead {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 4/3;
  }
  .alpha-photos figcaption {
    padding: 18px 8px 6px;
    font-size: 9px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}

.alpha-notes {
  display: grid;
  grid-template-columns: 3fr 2fr;
  border: 1px solid var(--line);
  margin-bottom: 48px;
}
.alpha-note { padding: 32px; }
.alpha-note + .alpha-note { border-left: 1px solid var(--line); }
.alpha-note .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
}
.alpha-note p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--bone-dim);
}
.alpha-note p em { color: var(--bone); }
.alpha-note ul { list-style: none; }
.alpha-note li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--bone-dim);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.alpha-note li:last-child { border-bottom: none; }
.alpha-note li strong {
  color: var(--bone);
  font-weight: 500;
}
@media (max-width: 800px) {
  .alpha-notes { grid-template-columns: 1fr; }
  .alpha-note { padding: 24px 20px; }
  .alpha-note + .alpha-note {
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

.alpha-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}