/* Screen 6, CONTINUE?: the final CTA beside a giant countdown disc, then the footer. */
.continue { border-top: var(--line-lg) solid var(--ink); overflow: hidden; }
.cont {
  position: relative; max-width: 1344px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.cont__copy { display: grid; gap: 20px; justify-items: start; }
.cont__head { grid-column: 1 / -1; display: grid; gap: 14px; }
.cont__title { font-size: clamp(52px, 9.2vw, 150px); }
.cont__lede { max-width: 40ch; font-size: clamp(17px, 1.5vw, 21px); margin-bottom: 18px; }
.cab--big { --cap: 88px; --travel: 10px; gap: 22px; }
.cab--big .cab__label { padding: 16px 24px 14px; box-shadow: var(--drop-lg) var(--drop-lg) 0 var(--ink); }
.cab--big .cab__text { font-size: clamp(22px, 2.2vw, 32px); }
.cab--big .cab__sub { font-size: 11px; }

.cont__clock { position: relative; display: grid; justify-items: center; gap: 18px; }
.cont__disc {
  position: relative; display: grid; place-items: center;
  width: min(100%, 400px); aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); box-shadow: 14px 14px 0 var(--p1);
}
.cont__num {
  grid-area: 1 / 1; font-size: clamp(180px, 21vw, 300px); line-height: 1; color: var(--yellow);
  translate: 0 -4%;
}
.cont__num.is-tick { animation: count-hit calc(var(--frame) * 8) steps(4, end); }
.cont__num.is-low { color: var(--p2); }
@keyframes count-hit { 0% { transform: scale(1.4); } 50% { transform: scale(.94); } 100% { transform: scale(1); } }
.cont__over {
  grid-area: 1 / 1; font-size: clamp(40px, 4.6vw, 68px); text-align: center; color: var(--p2);
  visibility: hidden;
}
.continue.is-over .cont__num { visibility: hidden; }
.continue.is-over .cont__credit { display: none; }
.continue.is-over .cont__over { visibility: visible; animation: tick-in calc(var(--frame) * 6) steps(3, end); }
.cont__credit { font-size: 13px; }
.cont__start {
  padding: 12px 22px 9px; font-size: 22px;
  background: var(--yellow); border: var(--line) solid var(--ink); box-shadow: var(--drop) var(--drop) 0 var(--ink);
  animation: start-blink .5s steps(2, jump-none) infinite;
}
.cont__start[hidden] { display: none; }
/* Blinks by swapping ink and yellow, never by vanishing: it's a control, it must stay findable. */
@keyframes start-blink {
  0% { background: var(--yellow); color: var(--ink); } 100% { background: var(--ink); color: var(--yellow); };
}

/* ---------- footer ---------- */
.foot {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
  padding: 28px var(--gutter) 32px; background: var(--ink); color: var(--chalk); font-size: 13px;
}
.foot__mark { color: var(--yellow); }
.foot p { max-width: 80ch; }
.foot .t-pix { font-size: 11px; color: var(--yellow); }