/* Hero demo: "say it, it files it" (redesign-2026 brief, section 2,
 * signature moment 1). Markup contract and timing live in hero-demo.js.
 *
 * No layout shift by construction: every line and every card sits in
 * the SAME grid cell (grid-area 1/1), so the stage is always as tall as
 * the tallest line and the tallest card, from the first paint, whether
 * or not the script ever runs. Only transform and opacity animate. */

.hd {
  --hd-pad: clamp(16px, 3vw, 24px);
  position: relative;
  display: grid;
  gap: var(--hm-sp-4);
  width: 100%;
  max-width: 460px;
  font-family: var(--hm-font-sans);
  color: var(--hm-ink);
}

.hd-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--hm-sp-3);
  font-size: var(--hm-fs-label);
  letter-spacing: var(--hm-track-label);
  color: var(--hm-ink-3);
}
.hd-example {
  padding: 2px 8px;
  border: 1px solid var(--hm-line-strong);
  border-radius: var(--hm-r-pill);
}

/* What you say */
.hd-say {
  display: grid;
  padding: var(--hd-pad);
  background: var(--hm-surface);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-r-3);
}
.hd-lines { display: grid; }
.hd-line {
  grid-area: 1 / 1;
  margin: 0;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.4;
  font-weight: 500;
  color: var(--hm-amber);
  text-wrap: pretty;
}
.hd-line .w { display: inline-block; white-space: pre; }
.hd-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--hm-amber);
}

/* What it files */
.hd-slot { display: grid; }
.hd-card {
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  gap: var(--hm-sp-3);
  padding: var(--hd-pad);
  background: var(--hm-surface-2);
  border: 1px solid var(--hm-line-strong);
  border-radius: var(--hm-r-3);
  box-shadow: var(--hm-shadow-pop);
}
.hd-kind {
  display: flex;
  align-items: center;
  gap: var(--hm-sp-2);
  font-size: var(--hm-fs-label);
  letter-spacing: var(--hm-track-label);
  color: var(--hm-ink-3);
}
.hd-kind::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hm-accent);
}
.hd-name {
  margin: 0;
  font: var(--hm-w-h3) 28px/1.1 var(--hm-font-display);
  letter-spacing: var(--hm-track-h3);
}
.hd-chips { display: flex; flex-wrap: wrap; gap: var(--hm-sp-2); }
.hd-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--hm-r-pill);
  background: var(--hm-surface-3);
  color: var(--hm-ink);
}
.hd-chip.is-accent { background: var(--hm-accent-soft); color: var(--hm-accent-ink); }
.hd-chip.is-amber { background: var(--hm-amber-soft); color: var(--hm-ink); }
.hd-rows { display: grid; gap: var(--hm-sp-2); margin: 0; padding: 0; list-style: none; }
.hd-row {
  display: flex;
  justify-content: space-between;
  gap: var(--hm-sp-4);
  padding: 10px 0;
  border-top: 1px solid var(--hm-line);
  font-size: var(--hm-fs-small);
}
.hd-row:first-child { border-top: 0; padding-top: 0; }
.hd-row dt, .hd-row .k { color: var(--hm-ink-2); }
.hd-row dd, .hd-row .v { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.hd-follow {
  display: flex;
  align-items: center;
  gap: var(--hm-sp-2);
  font-size: var(--hm-fs-small);
  color: var(--hm-ink-2);
}
.hd-follow strong { color: var(--hm-ink); font-weight: 600; }

/* Script-driven states. Without the script (.hd-live absent) the first
   line and first card simply show, finished. */
.hd-live .hd-line,
.hd-live .hd-card { opacity: 0; }
.hd-live .hd-line.is-on,
.hd-live .hd-card.is-on { opacity: 1; }
.hd:not(.hd-live) .hd-lines > .hd-line:not(:first-child),
.hd:not(.hd-live) .hd-slot > .hd-card:not(:first-child) { visibility: hidden; }
.hd-live [data-f] { opacity: 0; }
.hd-live .is-on [data-f].is-in { opacity: 1; }

/* Reduced motion: the three finished cards, each under what was said. */
.hd.hd-still { max-width: none; }
.hd-still .hd-say,
.hd-still .hd-slot,
.hd-still .hd-label--files { display: none; }
.hd-gallery { display: none; }
.hd-still .hd-gallery {
  display: grid;
  gap: var(--hm-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.hd-gallery figure { margin: 0; display: grid; gap: var(--hm-sp-3); align-content: start; }
.hd-gallery figcaption { color: var(--hm-amber); font-weight: 500; line-height: 1.4; }
.hd-gallery .hd-card { grid-area: auto; }

/* The screen-reader description of the three examples. Duplicated from
   the component layer so this file works on its own. */
.hd .hm-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}