/* days.by styles on top of design/days.css. Tokens only. */
.plain { list-style: none; padding: 0; margin: 0; }
.hero { padding-block: var(--space-8); }
.hero h1 { font-size: var(--step-4); line-height: var(--leading-tight); max-width: 18ch; }
.lead { font-size: var(--step-1); max-width: 40rem; }
.section-alt { background: var(--surface); border-block: var(--border-width) solid var(--border); }
.section-alt .card { background: var(--bg); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent); font-weight: 800;
  border: var(--border-width) solid var(--accent);
}
.idea h3 a { color: var(--text); }
.idea h3 a:hover { color: var(--accent); }
/* Whole card is clickable via the title link */
.idea { position: relative; }
.idea h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.idea:has(a:focus-visible) { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
.idea-url { margin-top: auto; font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); }
.contact .btn { margin-inline: auto; }