/* ==========================================================
   Sweet Sadie Mae — 2026 redesign · character-corner.css
   Character Corner page. Loads after base.css.
   ========================================================== */

.ssm2-cc-hero { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: center; }
.ssm2-cc-hero__text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ssm2 .ssm2-cc-hero__img { display: block; width: 100%; border-radius: var(--ssm-radius-lg); }
.ssm2-cc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.ssm2-cc-split { display: grid; gap: 48px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: center; padding-top: 64px; padding-bottom: 64px; }
.ssm2 .ssm2-cc-split img { display: block; max-width: 100%; margin: auto; }
.ssm2-cc-split__text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ssm2-cc-split__text > p { margin: 0; font-size: 17px; line-height: 1.65; }
.ssm2-cc-split__text > .ssm2-eyebrow, .ssm2-cc-apps .ssm2-eyebrow, .ssm2-cc-dash .ssm2-eyebrow { font-size: 14px; line-height: 1.6; }
.ssm2-cc-split h2, .ssm2-cc-apps h2, .ssm2-cc-dash h2, .ssm2-cc-cta h2 {
  margin: 0; font-family: var(--ssm-font-display); font-weight: 600; font-size: 30px; line-height: 1.2;
}
@media (min-width: 700px) { .ssm2-cc-split--flip > :first-child { order: 2; } }

.ssm2-cc-points { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 8px; }
.ssm2-cc-points h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.ssm2-cc-points p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ssm-muted); }

.ssm2-cc-dark { background: var(--ssm-ink); color: #fff; }
.ssm2-cc-dark .ssm2-eyebrow, .ssm2-cc-dark .ssm2-cc-split__text > p { color: var(--ssm-on-dark-muted); }


.ssm2-cc-apps { background: var(--ssm-tint); padding: 64px 0; }
.ssm2-cc-dash { padding-top: 64px; padding-bottom: 64px; }
.ssm2-cc-apps h2, .ssm2-cc-dash h2 { max-width: 820px; margin: 4px 0 24px; }
.ssm2-cc-dash > p:not(.ssm2-eyebrow) { margin: 0 0 28px; }
.ssm2-cc-apps__grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.ssm2-cc-apps .ssm2-cc-apps__grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.ssm2 .ssm2-app img { display: block; max-width: 100%; max-height: 72px; width: auto; object-fit: contain; object-position: left; }
.ssm2-app h3 { margin: 0; font-family: var(--ssm-font-display); font-weight: 600; font-size: 19px; line-height: 1.25; }
.ssm2-app p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ssm-muted); }
.ssm2-app a { margin-top: auto; font-weight: 700; }

.ssm2-cc-cta { background: var(--ssm-sun-soft); padding: 48px 0; }
.ssm2-cc-cta__inner { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.ssm2-cc-cta p { margin: 0; flex: 1 1 260px; font-size: 17px; }