/* ============================================================
   aweb home page layout. Loaded after aweb.css on the home page
   only; tokens, type, buttons and links come from aweb.css.
   ============================================================ */

.home main p { margin: 0; }

/* ---- actions ---- */
.h-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

/* ---- hero: the claim and the action, nothing else ---- */
.h-hero { padding: clamp(4rem, 2rem + 8vw, 10rem) 0 clamp(4rem, 2rem + 7vw, 9rem); }
.h-hero h1 { font-size: clamp(2.8rem, 1.4rem + 5.6vw, 6.25rem); max-width: 15ch; }
.h-lede { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) !important; max-width: 34rem; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); font-weight: 450; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.h-hero .h-actions { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); gap: 1.5rem; }
.home main a.h-quiet-link { font-weight: 600; }
.h-works { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; }
.h-works p { font-size: 0.95rem; color: var(--muted); }
/* each name carries a divider on its left; the list is pulled left and clipped so the first name on every line has none */
.h-works ul { list-style: none; margin: 0 0 0 calc(-1rem - 1px); padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; clip-path: inset(0 0 0 calc(1rem + 1px)); }
.h-works li { font-weight: 600; color: var(--ink); padding: 0 1rem; border-left: 1px solid var(--line); }

/* ---- sections ---- */
.h-section { padding: var(--section-y) 0; border-top: 1px solid var(--line); }
.h-section > .wrap > h2 { max-width: 30ch; }

.h-steps { list-style: none; margin: clamp(2rem, 1rem + 3vw, 3.5rem) 0 0; padding: 0; display: grid; gap: clamp(3rem, 2rem + 3vw, 5rem); }
.h-step {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3.5rem); align-items: start;
}
.h-step__text { min-width: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.h-step__text > p { color: var(--muted); }
.h-step__text .cmd pre { font-size: 0.875rem; white-space: pre-wrap; }
.h-cmd-label { font-size: 0.95rem; margin-top: 0.35rem !important; }
.h-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.4rem !important; font-weight: 600; }

/* one terminal panel per step; each command group keeps its own copy button */
.h-term {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.h-term__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5rem; align-items: start;
  padding: 1rem 0.75rem 1rem 1.25rem;
}
.h-term__row + .h-term__row { border-top: 1px solid var(--line); }
.h-term__note { grid-column: 1 / -1; font: 400 0.875rem/1.6 var(--font-mono); color: var(--faint); margin: 0 0 0.25rem !important; }
.h-term pre { margin: 0; min-width: 0; overflow-x: auto; font: 500 0.875rem/1.7 var(--font-mono); color: var(--ink); }
.h-term .copy-btn { margin-top: -0.1rem; }

.h-section--proof { background: var(--bg-tint); }
.h-proof {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center;
}
.h-proof { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
.h-proof__count { margin-top: 1.25rem !important; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); color: var(--muted); }
.h-facts.h-facts--stack { margin: 0; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.h-video { margin: 0; }
.h-video figcaption { margin-top: 1rem; font-size: 0.975rem; color: var(--muted); }
.h-video figcaption a { display: block; width: fit-content; margin-top: 0.75rem; font-weight: 600; }
.h-video video { display: block; width: 100%; height: auto; border-radius: 12px; background: #000; }

.h-yours { max-width: 46rem; }
.h-yours__why { margin-top: 1.25rem !important; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); color: var(--muted); }
.h-facts {
  margin: clamp(2rem, 1rem + 3vw, 3.5rem) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.h-facts div { border-top: 2px solid var(--ink); padding-top: 1rem; }
.h-facts dt { font-weight: 680; font-size: 1.0625rem; }
.h-facts dd { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.975rem; }

/* topic rows: a short statement beside the evidence for it */
.h-rows { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); border-bottom: 1px solid var(--line); }
.h-row {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem clamp(2rem, 1rem + 3vw, 4rem); align-items: start;
  padding: clamp(1.75rem, 1.25rem + 1.2vw, 2.5rem) 0; border-top: 1px solid var(--line);
}
.h-row h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25; max-width: 22ch; }
.h-row__text { display: flex; flex-direction: column; gap: 0.9rem; max-width: 62ch; color: var(--muted); font-size: 1.0625rem; }
.h-row__text code { font-family: var(--font-mono); font-size: 0.875em; color: var(--ink); white-space: nowrap; }
.h-harness { margin: 0.25rem 0; display: grid; border-top: 1px solid var(--line); }
.h-harness div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.h-harness dt { font-weight: 620; color: var(--ink); }
.h-harness dd { margin: 0; }

.h-close { background: var(--ink); color: var(--bg); padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.h-close h2 { color: var(--bg); }
.h-close p { margin-top: 1rem !important; max-width: 40rem; color: color-mix(in srgb, var(--bg) 78%, transparent); }
.h-close__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.h-close .btn.secondary { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); }
.h-close .btn.secondary:hover { border-color: var(--bg); color: var(--bg); }

/* ---- narrower screens ---- */
@media (max-width: 960px) {
  .h-proof { grid-template-columns: minmax(0, 1fr); }
  .h-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-facts.h-facts--stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .h-step { grid-template-columns: minmax(0, 1fr); }
  .h-row { grid-template-columns: minmax(0, 1fr); }
  .h-harness div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}
@media (max-width: 560px) {
  .h-facts, .h-facts.h-facts--stack { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .h-actions .btn { flex: 1 1 auto; }
}
.h-line { display: block; text-wrap: balance; }
.h-fine { margin-top: 1.25rem !important; font-size: 1rem; color: var(--muted); }