/* The hero and its rotating headline. */

.lede { font-size: clamp(16.5px, 1.6vw, 19px); color: var(--muted); max-width: 62ch; }
  /* buttons */
  /* hero */
  .hero { padding-block: clamp(34px, 5vw, 60px) clamp(40px, 5vw, 64px); display: grid; gap: 26px; }
  .hero-note { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
  .hero-note b { color: var(--ink); font-weight: 500; }
  /* the headline cycles through what the app makes, so one promise doesn't bury the other six */
  .hero h1 .hero-b { color: var(--accent); }
  .hero h1 span { display: inline-block; transition: opacity .32s ease, transform .32s ease; }
  .hero h1.turning span, #hero-sub.turning { opacity: 0; transform: translateY(-6px); }
  .hero-dots { display: flex; gap: 7px; align-items: center; }
  .hero-dots button { width: 22px; height: 4px; padding: 0; border: 0; border-radius: 99px; background: var(--line); cursor: pointer; transition: background .2s ease, width .2s ease; }
  .hero-dots button[aria-selected="true"] { background: var(--accent); width: 34px; }
  .hero-dots button:hover { background: var(--muted); }
  .hero-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; margin-left: 8px; white-space: nowrap; }
  .lede { font-size: clamp(16.5px, 1.6vw, 19px); color: var(--muted); max-width: 64ch; }
  .lede { font-size: clamp(16.5px, 1.6vw, 19px); color: var(--muted); max-width: 64ch; }