/* Before launch: the stripped-down front page and the road to launch. Uses site.css's tokens. */

/* Front page */
.front-hero.soon h1 { margin-bottom: 16px; }
.front-hero.soon .lede { margin-bottom: 28px; }
.card.early { padding: 22px; display: grid; gap: 12px; max-width: 34rem; }
.card.early .label { margin: 0; }
.early-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.early-grid label { display: block; font-size: .9rem; margin-bottom: 4px; }
.early-grid input { width: 100%; }
.card.early .button { justify-self: start; }
.card.early.done p { margin: 0 0 6px; color: var(--brand-muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .early-grid { grid-template-columns: 1fr; } }

/* Road to launch */
.road { padding-top: 56px; padding-bottom: 72px; }
.road h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1; margin: 6px 0 10px; }
.countdown { font: 1.4rem var(--brand-label); letter-spacing: 1px; color: var(--brand-muted); margin: 0 0 40px; }
.countdown b { font: 400 2.6rem/1 var(--brand-display); color: var(--brand-text); margin-right: 6px; }

.timeline { position: relative; height: 330px; margin: 0 8px 12px; }
.timeline .track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--brand-line); overflow: hidden; }
.timeline .progress { width: var(--at); height: 100%; background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-2)); }
.timeline .today { position: absolute; left: var(--at); top: calc(50% - 34px); height: 34px; border-left: 2px dashed var(--brand-accent); }
.timeline .today span { position: absolute; top: -22px; left: -24px; width: 48px; text-align: center; font: 1rem var(--brand-label); letter-spacing: 1px; color: var(--brand-accent); }
.stop { position: absolute; left: var(--at); top: 50%; width: 0; }
.stop i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-surface); border: 3px solid var(--brand-line); box-sizing: border-box; }
.stop.done i { background: var(--brand-accent); border-color: var(--brand-accent); }
.stop.late i { border-color: var(--brand-error); }
.stop.launch i { left: -14px; top: -14px; width: 28px; height: 28px; border-color: var(--brand-accent-2); background: radial-gradient(circle, var(--brand-accent-2) 0 35%, var(--brand-surface) 40%); }
.stop .what { position: absolute; width: 150px; left: -75px; display: grid; gap: 2px; text-align: center; }
.stop.above .what { bottom: 22px; }
.stop.below .what { top: 22px; }
.stop.first .what { left: -10px; text-align: left; }
.stop.last .what { left: auto; right: -10px; text-align: right; }
.stop small { font: .95rem var(--brand-label); letter-spacing: 1px; color: var(--brand-muted); }
.stop b { font-size: .98rem; line-height: 1.2; }
.stop.launch b { font: 400 1.3rem/1 var(--brand-display); text-transform: uppercase; }
.stop .what span { font-size: .85rem; color: var(--brand-muted); }

/* Phones: the same milestones, down the page */
@media (max-width: 760px) {
  .timeline { height: auto; padding-left: 28px; display: grid; gap: 22px; }
  .timeline .track { left: 8px; right: auto; top: 0; bottom: 0; width: 6px; height: auto; margin: 0; }
  .timeline .progress { width: 100%; height: var(--at); }
  .timeline .today { display: none; }
  .stop { position: relative; left: 0; top: 0; width: auto; }
  .stop i { left: -29px; top: 3px; }
  .stop.launch i { left: -34px; top: -1px; }
  .stop .what, .stop.first .what, .stop.last .what { position: static; width: auto; text-align: left; }
}

.launch-cards { display: grid; grid-template-columns: minmax(0, 34rem); margin-top: 40px; }
.card.sooner { padding: 22px; }
.card.sooner h2 { margin: 0 0 6px; }
.card.sooner p { color: var(--brand-muted); margin: 0 0 14px; }
.card.sooner.yes { border-color: var(--brand-accent); }