@import url("../inner.css");
/* AI picks page (cards come from components.css → .pick) */
.picks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.picks .pick { min-height: 0; }
.legend { margin-top: 56px; padding: clamp(22px, 3vw, 34px); }
.legend__title { font-size: var(--fs-h4); }
.legend__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 28px; margin-top: 22px; }
.legend__grid div { padding-top: 16px; border-top: 1px solid var(--line-gold); }
.legend__grid dt { font: 600 var(--fs-sm)/1.3 var(--font-ui); color: var(--gold-1); }
.legend__grid dd { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.75; color: var(--stone); }
.legend__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.6; color: var(--text-3); }
.legend__note .icon { flex: none; margin-top: 1px; color: var(--gold-3); }
@media (max-width: 1023px) { .picks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .legend__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .picks__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .legend__grid { grid-template-columns: minmax(0, 1fr); } }