:root {
  --sea: #101e39;
  --ink: #15213b;
  --paper: #fcfcfe;
  --mist: #ebeff7;
  --amber: #ffda36;
  --muted: #47546a;
  --rule: #d6dfed;
  --signal-red: #b01c30;
}

.brand {
  gap: 0;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.brand span { padding: 4px 9px; }
.brand-ready { background: var(--signal-red); }
.brand-kit { background: var(--sea); }

.hero-shell {
  color: #fff;
  background: var(--sea);
  border-top: 4px solid var(--signal-red);
}

.hero {
  grid-template-areas: 'message product' 'purchase product';
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(22px, 4vw, 56px);
  row-gap: 0;
  padding-block: 54px 58px;
}

.hero-message { grid-area: message; align-self: end; }
.hero-buy { grid-area: purchase; align-self: start; }

.hero .intro {
  color: var(--amber);
  font-weight: 700;
  margin-bottom: 14px;
}

.hero h1 {
  max-width: 10.5em;
  font: 800 clamp(46px, 5.6vw, 80px)/1.02 'Segoe UI', Arial, sans-serif;
  letter-spacing: -.06em;
  margin-bottom: 18px;
  text-wrap: balance;
}

.hero-message .lead { color: #e1e8f5; max-width: 445px; margin-bottom: 0; }
.hero .offer { margin-block: 22px 17px; }
.hero .price { background: var(--signal-red); padding: 8px 12px 10px; }
.hero .offer span, .hero .availability, .hero .small { color: #e1e8f5; }
.hero .button { min-height: 52px; }
.button:hover { background: #ffe670; }
.hero .text-link { color: var(--amber); }
.hero .product-note { margin-bottom: 10px; }

.product-stage {
  grid-area: product;
  min-width: 0;
  min-height: clamp(430px, 49vw, 570px);
  margin: 0;
  border: 1px solid #647598;
  border-top: 5px solid var(--amber);
  border-radius: 4px;
  background: #243758;
}

@media (min-width: 651px) { .cover-preview { width: 54%; } }

.stage-note { color: #fff; margin-bottom: 0; }
.facts { border-top: 1px solid #647598; }
.facts strong { color: var(--amber); }
.contents li::before { color: var(--signal-red); }
.page-section { background: var(--mist); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid #1557a7;
  outline-offset: 4px;
}

.hero a:focus-visible, .hero button:focus-visible { outline-color: var(--amber); }

.visit-timer {
  max-width: 420px;
  margin: 0 0 14px;
  border-left: 3px solid var(--amber);
  padding-left: 11px;
  font-size: 13px;
}

.timer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.visit-timer p { color: #e1e8f5; margin: 0; }
.visit-timer [role="timer"] { color: var(--amber); font-size: 16px; font-variant-numeric: tabular-nums; }
.visit-timer button {
  color: #fff;
  background: transparent;
  border: 0;
  min-height: 32px;
  padding: 4px;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 650px) {
  .site-header { min-height: 64px; }
  .brand { font-size: 18px; }
  .brand span { padding-inline: 7px; }
  .hero {
    grid-template-areas: 'message' 'purchase' 'product';
    grid-template-columns: minmax(0, 1fr);
    padding-block: 26px 35px;
    row-gap: 22px;
  }
  .hero h1 { font-size: clamp(38px, 8.8vw, 56px); text-wrap: initial; }
  .hero .offer { margin-top: 0; }
  .hero-buy .text-link { display: inline-block; }
  .product-stage {
    min-height: 0;
    aspect-ratio: 1 / 1.16;
    margin-inline: auto;
  }
}