/* Coming-soon / maintenance card - a centred launch card on the hero tint,
   countdown digits from the shared .e-digits primitive. */
.cs {
    display: grid; justify-items: center; gap: 10px; text-align: center; padding: 22px 16px 18px;
    border-radius: calc(var(--e-radius-sm) + 4px); background: var(--e-hero);
    border: 1px solid color-mix(in srgb, var(--e-accent) 14%, transparent);
}
.cs > * { max-width: 100%; }
.cs-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cs-badge {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff;
    background: linear-gradient(135deg, var(--e-accent) 0%, var(--e-accent-2) 100%); box-shadow: 0 4px 14px color-mix(in srgb, var(--e-accent) 30%, transparent);
}
html.e-custom-accent .cs-badge { background: var(--e-accent); color: var(--e-accent-ink); }
.cs-badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cs-is-live .cs-badge { background: var(--e-ok); box-shadow: none; color: var(--e-bg); }
.cs-pill {
    padding: 2px 10px; border-radius: 999px; font-size: .74em; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
    background: var(--e-bg); color: var(--e-accent-fg); border: 1px solid color-mix(in srgb, var(--e-accent) 25%, transparent);
}
.cs-maintenance .cs-pill { color: var(--e-warn); border-color: color-mix(in srgb, var(--e-warn) 35%, transparent); }
.cs-is-live .cs-pill { color: var(--e-ok); border-color: color-mix(in srgb, var(--e-ok) 35%, transparent); }
.cs-title { margin: 2px 0 0; font-size: 1.42em; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--e-ink); overflow-wrap: anywhere; }
.cs-msg { margin: 0; max-width: 46ch; color: var(--e-ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.cs-count { display: grid; gap: 6px; width: 100%; max-width: 380px; margin-top: 4px; }
.cs-count-label { margin: 0; font-size: .78em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--e-ink-3); }
.cs-digits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-digits .e-digit { background: var(--e-bg); }
.cs-when { margin: 0; font-size: .8em; color: var(--e-ink-3); }
.cs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 2px; }
.cs-cta { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 22px; border-radius: 999px; text-decoration: none; }
.cs-status { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: .84em; color: var(--e-ink-2); padding: 4px 12px; border-radius: 999px; background: var(--e-bg); border: 1px solid var(--e-line); }
.cs-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--e-accent); flex: none; }
.cs-maintenance .cs-status-dot { background: var(--e-warn); }
.cs-is-live .cs-status-dot { background: var(--e-ok); }
.cs-social { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cs-soc {
    display: inline-flex; align-items: center; min-height: 40px; padding: 4px 14px; border-radius: 999px; font-size: .84em; font-weight: 650;
    color: var(--e-ink-2); background: var(--e-bg); border: 1px solid var(--e-line-strong); text-decoration: none;
}
.cs-soc:hover { color: var(--e-accent-fg); border-color: var(--e-accent); }
.cs-issues { text-align: left; margin: 0; padding-left: 28px; }
@media (max-width: 360px) {
    .cs { padding: 18px 10px 14px; }
    .cs-title { font-size: 1.22em; }
    .cs-digits { gap: 5px; }
}
html[data-compact="1"] .cs { padding: 14px 10px 12px; gap: 7px; }
html[data-compact="1"] .cs-title { font-size: 1.22em; }