/* v05-halftone — the spread.

   Two inks on black. Every tool is a full-width row: the name huge in the
   left column, the facts small in the right column, a rule between rows and a
   full-bleed halftone break every eighth row. Nothing is boxed except the two
   sign-ups. */

.v5 .st-btn.st-primary { --fill: var(--v5-ink); --line: var(--v5-ink); color: #fff; }
.v5 .st-btn.st-primary:hover, .v5 .st-btn.st-primary.is-hover { --line: var(--accent); }

/* ---------- hero ---------- */

.v5-hero { padding-block: clamp(3rem, 9vw, 7rem) clamp(4rem, 10vw, 8rem); overflow: hidden; }
.v5-hero-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.v5-hero h1 {
  font-size: clamp(1.75rem, 4.6vw, 4rem);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  line-height: 0.95;
  text-wrap: balance;
}
.v5-hero .st-support { margin-top: var(--space-28); max-width: 30ch; }
.v5-hero .st-adopt { margin-top: var(--space-16); max-width: 42ch; }
.v5-actions { margin-top: clamp(2rem, 4vw, 3rem); gap: var(--space-16); }
.v5-hero-art { will-change: transform; }
.v5-plate {
  border: 3px solid var(--accent-2);
  box-shadow: 14px 14px 0 var(--shadow-black);
}

/* ---------- the rows ---------- */

.v5-heading {
  font-size: var(--display-2);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.v5-rows { border-top: 2px solid var(--accent); }
.v5-row {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(0.75rem, 3vw, 3rem);
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--border-2);
  transition: border-color var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.v5-row-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.v5-row-name a { color: var(--text); }
.v5-row-name a::after { content: ""; position: absolute; inset: 0; }
.v5-row-lang {
  margin: 0 0 var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.v5-row-desc { margin: 0; color: var(--text-dim); line-height: var(--leading-relaxed); max-width: 58ch; }
.v5-row-cmd {
  margin: var(--space-14) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
  overflow-x: auto;
  white-space: nowrap;
}
.v5-prompt { color: var(--accent); }
.v5-row-links { display: flex; gap: var(--space-20); margin: var(--space-16) 0 0; position: relative; z-index: 1; }
.v5-row-links a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-hi);
  border-bottom: 1px solid transparent;
}
.v5-row-links a:hover { border-color: var(--accent-2); }

/* The row answers with the yellow rule down its left edge and a step to the
   right. Nothing is printed behind the name. */
.v5-row { border-left: 4px solid transparent; padding-left: var(--space-16); }
.v5-row:hover, .v5-row.is-hover { border-left-color: var(--accent-2); transform: translateX(6px); }
.v5-row.is-near { border-left-color: var(--border-2); }

/* The breaks are full-bleed: they leave the content column. */
.v5-break {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-block: 2px solid var(--accent-2);
}

/* ---------- sign-up ---------- */

.v5-narrow { max-width: 46rem; }
.v5-nl { --fill: var(--surface); --line: var(--accent); }
.v5-nl h2 { font-size: var(--display-3); text-transform: uppercase; letter-spacing: -0.01em; }
.v5-nl-repeat { --line: var(--accent-2); }
.v5 .st-footer { border-top: 2px solid var(--accent); }

/* ---------- desktop ---------- */

@media (min-width: 900px) {
  .v5-hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .v5-row { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); align-items: start; }
}

/* ---------- mobile (390px) ---------- */

@media (max-width: 899px) {
  .v5-hero { padding-block: clamp(2rem, 10vw, 3.5rem) clamp(2.5rem, 10vw, 4rem); }
  .v5-hero h1 { font-size: clamp(1.75rem, 8.4vw, 2.75rem); }
  .v5-actions { flex-direction: column; align-items: stretch; }
  .v5-actions .st-btn { width: 100%; }
  .v5-hero-art { max-width: 60%; }
  .v5-row-name { font-size: 1.75rem; }
  .v5-row-cmd { display: none; }
  .v5-row-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .v5-row-name a::after { content: none; }
}