/* ───────────────────────────────────────────────────────────
   Cyboflow beta — download page
   Sits on top of tokens.css + landing.css + page.css. Only the
   download-specific components live here (the two-tone hero, the
   BUILDS header rail, and the platform "spec sheet" cards with
   the RECOMMENDED frame).
   ─────────────────────────────────────────────────────────── */

/* Section shell ------------------------------------------------------ */
.beta-section { padding: clamp(56px, 7vw, 104px) 0 clamp(80px, 10vw, 132px); }

/* Hero --------------------------------------------------------------- */
.beta-head { max-width: 960px; }
.beta-head .eyebrow { margin-bottom: clamp(22px, 3vw, 30px); }

.beta-title {
  font-family: var(--cf-font);
  font-size: clamp(40px, 8.4vw, 90px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--cf-ink);
  margin: 0;
}
.beta-title .accent { color: var(--cf-rust); }

.beta-lead {
  font-size: clamp(15px, 1.75vw, 21px);
  line-height: 1.5;
  color: var(--cf-ink-2);
  margin: clamp(26px, 3vw, 38px) 0 0;
  max-width: 42ch;
  text-wrap: pretty;
}
.beta-lead b { color: var(--cf-ink); font-weight: 700; }

.beta-detect {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(28px, 3.4vw, 40px);
  font-size: var(--cf-size-body-1);
  color: var(--cf-ink-3);
  letter-spacing: .01em;
}
.beta-detect b { color: var(--cf-ink); font-weight: 700; }
.beta-detect .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cf-rust);
  flex: none;
}

/* Dashed rule between hero and builds -------------------------------- */
.beta-rule {
  border: 0;
  border-top: 1px dashed var(--cf-line);
  margin: clamp(44px, 6vw, 88px) 0 0;
}

/* BUILDS header rail ------------------------------------------------- */
.builds-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: clamp(40px, 5vw, 64px) 0 clamp(36px, 4vw, 50px);
}
.builds-head .bk,
.builds-head .bv {
  font-size: var(--cf-size-eyebrow);
  letter-spacing: var(--cf-track-eyebrow-wide);
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.builds-head .bk { color: var(--cf-ink-2); }
.builds-head .bv { color: var(--cf-ink-3); }
.builds-head .bline { flex: 1; height: 1px; background: var(--cf-line); }

/* Build cards -------------------------------------------------------- */
.beta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.dl-slot { position: relative; }

.dl-card {
  display: flex;
  flex-direction: column;
  border: 1.4px solid var(--cf-ink);
  background: var(--cf-card);
}

/* The detected / recommended build gets a rust frame + tab */
.dl-slot.recommended .dl-card {
  outline: 1.5px solid var(--cf-rust);
  outline-offset: 7px;
}
.dl-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  transform: translateY(-100%);
  background: var(--cf-rust);
  color: var(--cf-page);
  font-size: var(--cf-size-micro);
  letter-spacing: var(--cf-track-eyebrow-wide);
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 11px;
  line-height: 1;
}

/* Dark card header */
.dl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cf-ink);
  padding: 11px 18px;
}
.dl-head .hk,
.dl-head .ha {
  font-size: var(--cf-size-meta);
  letter-spacing: var(--cf-track-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
}
.dl-head .hk { color: var(--cf-page); }
.dl-head .ha { color: var(--cf-rust); }

/* White card body */
.dl-body {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 22px;
}
.dl-name {
  font-size: var(--cf-size-h3);
  font-weight: 700;
  letter-spacing: var(--cf-track-tight-1);
  color: var(--cf-ink);
  line-height: 1.2;
}
.dl-chips {
  margin: 8px 0 0;
  font-size: var(--cf-size-card);
  color: var(--cf-ink-3);
  letter-spacing: .03em;
}
.dl-file {
  margin: clamp(22px, 3vw, 30px) 0 0;
  font-size: var(--cf-size-card-1);
  color: var(--cf-ink);
  word-break: break-all;
}
.dl-spec {
  margin: 9px 0 0;
  font-size: var(--cf-size-body-1);
  line-height: 1.5;
  color: var(--cf-ink-3);
}
.dl-spec b { color: var(--cf-ink); font-weight: 700; }
.dl-sha {
  margin: 7px 0 0;
  font-size: var(--cf-size-body);
  color: var(--cf-ink-3);
}
.dl-sha .lbl { color: var(--cf-ink-4); }

/* Full-width download button (intentionally inert — see index.html) */
.dl-btn {
  margin-top: clamp(20px, 2.6vw, 28px);
  width: 100%;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 15px;
}
.dl-btn .arch {
  opacity: .5;
  margin-left: 4px;
  font-weight: 700;
}

/* Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
  .beta-grid { grid-template-columns: 1fr; gap: 34px; }
  .builds-head { flex-wrap: wrap; gap: 12px 16px; }
  .builds-head .bline { order: 3; flex-basis: 100%; }
}