/* Coming soon page: the launch countdown, standing alone (no site menu or footer). */
.cs main{min-height:calc(100vh - 64px);display:flex;flex-direction:column}
.cs-top{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}

.cs-hero{text-align:center;padding:72px 0 64px;border-top:0}
.cs-logo{display:block;width:min(560px,80vw);height:auto;margin:0 auto 40px}
.cs-logo svg{display:block;width:100%;height:auto}
.cs-kicker{font-size:12px}
.cs-hero h1{margin:14px auto 0;max-width:860px}
.cs-hero h1 em{font-style:italic;color:var(--strong)}
.cs-hero .lede{max-width:640px;margin:20px auto 0}
.cs-hero .cta{margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* the countdown: four display numbers on one rule, labels under them */
.cs-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:720px;margin:44px auto 0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cs-count>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 8px 18px;background:var(--paper)}
.cs-count b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(40px,7vw,72px);line-height:1;color:var(--strong);font-variant-numeric:tabular-nums}
.cs-count span{display:block;margin-top:10px;color:var(--mute)}
.cs-count.is-live b{font-size:clamp(28px,4vw,40px)}
.cs-when{margin:14px auto 0;max-width:none;text-align:center;font-size:12px}

/* the countdown in moons: new moons to come, tithis after the last, and tonight's moon in the mark */
.cs-moons{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-tonight svg{display:block;width:76px;height:76px;margin:0 auto}
.cs-tonight span{margin-top:8px;text-transform:none;letter-spacing:.04em}
.cs-moons-note{margin:14px auto 0;max-width:560px;text-align:center;font-size:11px}
@media (max-width:620px){.cs-moons{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-tonight svg{width:54px;height:54px}}

/* what it will do: the home page's cards, three across */
.cs-what{padding:56px 0;border-top:1px solid var(--line);background:var(--soft)}
.cs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cs-cards .card h3{margin-top:8px}
.cs-cards .card p+h3{margin-top:10px}
.cs-cards .card h3+p{margin-top:10px}

/* notify */
.cs-notify{padding:64px 0 72px;text-align:center}
.cs-notify .lede{max-width:560px;margin:14px auto 0}
.cs-notify .form{margin:28px auto 0;text-align:left}
.cs-notify .note-box{margin:28px auto 0;text-align:left}

.cs-foot{border-top:1px solid var(--line);padding:28px 0 32px;margin-top:auto}
.cs-foot p{font-size:16px}
.cs-foot a{text-decoration:underline;text-underline-offset:4px}
.cs-foot .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:900px){.cs-cards{grid-template-columns:1fr}}
@media (max-width:620px){
 .cs-hero{padding:48px 0 48px}
 .cs-logo{margin-bottom:28px}
 .cs-count{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cs-count b{font-size:44px}
}
@media (prefers-reduced-motion:reduce){.cs-count b{transition:none}}