/* Only what is specific to the home page. Everything else comes from the
   shared set, including the shell, cards, buttons and type scale. */
.hero h1 { font-size: var(--t-3xl); max-width: 21ch; }
.hero .lede { font-size: var(--t-lg); color: var(--muted); max-width: 54ch; }
/* Chain chips: each chip just fits its icon and name, left-aligned, no
   stretching (owner, 2026-10-06). Five chains fit one row on a wide
   screen; narrower screens wrap naturally. */
.chainrow { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chainrow a {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); text-decoration: none; font-size: var(--t-sm); white-space: nowrap;
}
.chainrow a:hover { border-color: var(--brand); }
.chainrow img { width: 20px; height: 20px; display: block; flex: none; }
.chainrow .tk { color: var(--muted); font-family: var(--mono); font-size: var(--t-xs); }
.two { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.prod {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--soft);
}
.prod ul { margin: 0; padding-left: 1.1em; color: var(--muted); }
.prod li { margin-bottom: var(--s-1); }
/* On phones the two product boxes were 501px tall in a 772px frame and
   pushed the frame past one screen. Drop the bullet lists — they are
   secondary detail; the name, one sentence and the button are enough. */
/* Phones: chain chips drop the ticker (BTC…). At 390px in three columns,
   a long name with its ticker touched the next chip (review 2026-09-30);
   before that it was only dropped at 360px. */
@media (max-width: 480px) {
  .chainrow a { padding: var(--s-2) var(--s-1); gap: 6px; font-size: 13px; }
  .chainrow img { width: 18px; height: 18px; }
  .chainrow .tk { display: none; }
}
@media (max-width: 380px) {
  .chainrow a { font-size: 12px; gap: 4px; }
  .chainrow img { width: 16px; height: 16px; }
}
@media (max-width: 560px) {
  .prod ul { display: none; }
  .prod { padding: var(--s-3) var(--s-4); }
  .hero .lede { font-size: var(--t-md); }
}
/* The button is as wide as its text, not the card (owner, 2026-10-06). */
.prod .btn { margin-top: auto; align-self: flex-start; }

/* Sign-up line below the two products: fills the empty bottom of the frame
   and gives the home page one main call to action. */
.start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
         padding-top: var(--s-4); border-top: 1px solid var(--line); }
.start p { margin: 0; flex: 1 1 22rem; }