:root { --color-canvas: var(--brand-background); --color-text: var(--brand-text); --color-border: var(--brand-neutral); --color-action: var(--brand-primary); --color-action-text: var(--brand-background); --color-surface-strong: var(--brand-neutral); --color-focus: var(--brand-primary); }
.saved-palette-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
.saved-palette-card { display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: 24px; background: var(--color-canvas); color: var(--color-text); text-decoration: none; border: 1px solid var(--color-border); }
.saved-palette-featured { grid-row: span 2; }
.saved-palette-card img { display: block; width: 100%; height: auto; object-fit: contain; margin-block: auto; }
.saved-palette-card h3 { display: flex; align-items: center; gap: 16px; justify-content: space-between; margin: 0; padding: 24px; min-height: 112px; font: 600 22px/1.2 var(--font-brand-sans, Inter, sans-serif); letter-spacing: -.02em; text-wrap: balance; background: var(--color-action); color: var(--color-action-text); }
.saved-palette-card h3 span { flex-shrink: 0; }
.saved-palette-cta { grid-column: 2 / 4; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 32px; border-radius: 24px; background: var(--color-surface-strong); color: var(--color-text); text-decoration: none; }
.saved-palette-cta h3 { margin: 0 0 4px; font-size: 22px; line-height: 1.2; font-weight: 600; }
.saved-palette-cta p { margin: 0; font-size: 16px; line-height: 1.5; }
.saved-palette-cta > span { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--color-canvas); }
.saved-palette-section a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.saved-palette-section a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1023px) { .saved-palette-grid { grid-template-columns: 1fr 1fr; } .saved-palette-featured { grid-column: 1 / -1; grid-row: auto; } .saved-palette-featured img { max-height: 440px; } .saved-palette-cta { grid-column: 1 / -1; } }
@media (max-width: 767px) { .saved-palette-grid { grid-template-columns: 1fr; } .saved-palette-card h3 { min-height: 0; padding: 24px; font-size: 20px; } .saved-palette-cta { padding: 24px; } }
#saved-palettes-title { scroll-margin-top: 112px; }