/* Coming-soon takeover (site.coming_soon). Tokens only (§14); the sea is a decorative canvas behind the content. */

body:has(.cs)::before { display: none; }
.cs { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }

/* Night sky over Vice: violet top, a pink horizon low on the page. The canvas draws the sea on top of it. */
.cs::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(70rem 22rem at 50% 100%, rgba(210,56,103,.30), transparent 70%),
    radial-gradient(50rem 30rem at 85% 0%, rgba(143,99,230,.18), transparent 70%),
    linear-gradient(180deg, var(--c-bg) 0%, #140A1B 55%, #1A0C1F 100%);
}
.cs-sea { position: absolute; inset: auto 0 0 0; width: 100%; height: clamp(16rem, 42vh, 26rem); z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 35%); mask-image: linear-gradient(transparent, #000 35%); }

.cs-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-5); }
.cs-chip { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-color: var(--glass-border); }

.cs-hero { padding-top: clamp(var(--s-6), 7vh, var(--s-11)); text-align: center; display: flex; flex-direction: column; align-items: center; }
.cs-title { font-size: clamp(3.25rem, 11vw, 8.5rem); line-height: .9; }
.cs-title em { display: inline; }
@media (max-width: 640px) { .cs-title em { display: block; } }
.cs-lead { max-width: 36rem; margin: var(--s-5) auto 0; font-size: var(--fs-18); color: var(--c-secondary); }

.cs-count { margin-top: clamp(var(--s-7), 6vh, var(--s-10)); display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.cs-to { margin: 0; font: 600 var(--fs-13)/1.2 var(--f-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-muted); }
.cs-to strong { color: var(--c-text); }
.cs .count-boxes { justify-content: center; gap: clamp(var(--s-2), 1.5vw, var(--s-4)); }
.cs .count-box {
  min-width: clamp(4.5rem, 16vw, 8.5rem); padding: var(--s-4) var(--s-3);
  background: var(--glass-bg); border-color: var(--glass-border); border-radius: var(--r-lg);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
.cs .count-box b { font-size: clamp(var(--fs-36), 7vw, var(--fs-96)); letter-spacing: -.02em; }
.cs .count-box span { font: 600 var(--fs-12)/1.2 var(--f-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.cs-launched { font: 600 var(--fs-28) var(--f-title); color: var(--c-text); margin: 0; }

.cs-region { display: grid; gap: var(--s-1); justify-items: center; }
.cs-region label { font-size: var(--fs-13); color: var(--c-secondary); }
.cs-region p { margin: 0; }

.cs-note { max-width: 46rem; margin: var(--s-4) 0 var(--s-3); }
.cs-more { background: var(--glass-bg); border-color: var(--glass-border); }
.cs-wave { margin-top: clamp(var(--s-8), 8vh, var(--s-11)); }
.cs-h2 { font: 600 var(--fs-28)/1.1 var(--f-title); text-transform: uppercase; letter-spacing: var(--ls-sm); }

/* Launch alert */
.cs-alert { margin-top: var(--s-9); }
.cs-alert-card {
  display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  padding: clamp(var(--s-5), 3vw, var(--s-8)); border-radius: var(--r-2xl);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
@media (max-width: 800px) { .cs-alert-card { grid-template-columns: minmax(0, 1fr); } }
.cs-form { width: 100%; background: rgba(13,8,18,.7); }
.cs-form input { min-width: 0; }
.cs-alert-card [data-newsletter-msg] { min-height: 1.5em; margin: var(--s-2) 0; }

.cs-foot { margin-top: auto; padding-block: var(--s-9) var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; }
.cs-foot a { min-height: var(--touch); display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.cs-foot a:hover { color: var(--c-text); }

@media (prefers-reduced-transparency: reduce) {
  .cs .count-box, .cs-alert-card, .cs-chip { backdrop-filter: none; -webkit-backdrop-filter: none; }
}