/* Guides band on the home page, generated by tools/build.py from the published guides. */
.guides { padding-block: clamp(56px, 8vw, 100px); border-top: 1px solid var(--line); }
.guides .wrap { display: grid; gap: 18px; }
.guide-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .guide-grid { grid-template-columns: minmax(0, 1fr); } }
.guide-card { display: grid; gap: 8px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; color: var(--fg); text-decoration: none; min-width: 0; transition: border-color .15s; }
.guide-card:hover { border-color: var(--amber); }
.guide-card .g-sec { font: 600 11px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.guide-card b { font: 700 26px/1 var(--display); text-transform: uppercase; }
.guide-card span:last-child { color: var(--fg2); font-size: 15px; line-height: 1.5; }
.guide-all { justify-self: start; margin-top: 6px; font: 600 13px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px; color: var(--fg); }
.guide-all:hover { border-color: var(--amber); }