.coaking-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--coaking-space-2); min-height: 2.9rem; padding: 0.7rem 1.1rem; border: 1px solid transparent; border-radius: var(--coaking-radius-sm); background: var(--coaking-color-brand); color: var(--coaking-color-paper); font: inherit; font-weight: 700; text-decoration: none; transition: background-color var(--coaking-motion-fast), transform var(--coaking-motion-fast); }
.coaking-button:hover { background: var(--coaking-color-brand-deep); color: var(--coaking-color-paper); transform: translateY(-1px); }
.coaking-button--secondary { border-color: currentColor; background: transparent; color: var(--coaking-color-ink); }
.coaking-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--coaking-grid-gap); }
.coaking-card { display: grid; gap: var(--coaking-space-4); min-height: 100%; padding: var(--coaking-space-6); border: 1px solid var(--coaking-color-line); border-radius: var(--coaking-radius-md); background: var(--coaking-color-paper); box-shadow: var(--coaking-shadow-sm); }
.coaking-card__media { aspect-ratio: 16 / 10; border-radius: var(--coaking-radius-sm); background: linear-gradient(135deg, #d9e8ec, #9eb5c0 48%, #557586); }
.coaking-placeholder-media { position: relative; overflow: hidden; min-height: 14rem; border-radius: var(--coaking-radius-md); background: linear-gradient(115deg, #102840, #1f546b 50%, #00a7c6); }
.coaking-placeholder-media::after { position: absolute; inset: auto var(--coaking-space-4) var(--coaking-space-4); color: white; content: "Placeholder media — replace before approval"; font-size: var(--coaking-text-xs); }
.coaking-hero { display: grid; align-items: center; min-height: min(44rem, 78vh); background: var(--coaking-color-ink); color: var(--coaking-color-paper); }
.coaking-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(var(--coaking-space-6), 6vw, var(--coaking-space-9)); align-items: center; }
.coaking-hero__actions { display: flex; flex-wrap: wrap; gap: var(--coaking-space-3); }
@media (max-width: 63.99rem) { .coaking-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .coaking-hero__grid { grid-template-columns: 1fr; } }
@media (max-width: 47.99rem) { .coaking-card-grid { grid-template-columns: 1fr; } .coaking-card { padding: var(--coaking-space-5); } .coaking-hero { min-height: auto; } }