/* ---------- Tokens ---------- */
:root {
  --bg: #0b0b0b;
  --bg-alt: #101010;
  --surface: #141414;
  --cream: #f5f3ee;
  --taupe: #a8a49c;
  --taupe-dim: #6f6c66;
  --white: #ffffff;
  --line: #2a2a28;

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1100px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Motion easing ---------- */
:root {
  --ease: cubic-bezier(.16, .84, .44, 1);
}

/* ---------- Entrance animation ---------- */
@keyframes fade-up-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-copy, .hero-media, .confirm-card { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-ring { animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--taupe);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.12;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6.4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 4.6vw, 2.5rem); text-align: center; }
h3 { font-size: 1.2rem; font-weight: 400; }

p { margin: 0 0 1em; color: var(--taupe); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: 24px;
  position: relative;
}

.narrow { max-width: 760px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  background: var(--cream);
  color: var(--bg);
  padding: 8px 12px;
  z-index: 10;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* ---------- Grain texture: removed to match the strict black/white/warm-gray brief ---------- */
.grain {
  display: none;
}

/* ---------- Eyebrow labels ---------- */
.eyebrow {
  display: block;
  text-transform: uppercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--taupe);
  margin-bottom: 14px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0;
  padding: 16px 30px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .3s var(--ease), opacity .3s var(--ease), border-color .3s ease, color .3s ease, background .3s ease;
}
.btn-primary {
  background: var(--white);
  color: var(--bg);
}
.btn-primary:hover { transform: translateY(-2px); opacity: 0.85; }
.btn-primary:active { transform: translateY(0); opacity: 1; }

.btn-outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--line);
}
.btn-outline:hover { border-color: var(--cream); color: var(--cream); transform: translateY(-2px); }
.btn-outline:active { transform: translateY(0); }

.btn-lg { padding: 18px 34px; font-size: 0.86rem; }
.btn-full { width: 100%; }

/* ---------- Path choice (VIP offer page) ---------- */
.path-choice {
  display: grid;
  gap: 16px;
  justify-items: center;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.path-choice.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (min-width: 560px) {
  .path-choice { grid-auto-flow: column; }
}

/* ---------- Sections ---------- */
.section { padding-block: 68px; position: relative; }
.section-alt { background: var(--bg-alt); }

.section-intro {
  text-align: center;
  font-size: 1.05rem;
  margin-bottom: 30px;
}

.center { text-align: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.hero-ring {
  position: absolute;
  top: -120px;
  right: -140px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(245, 243, 238, 0.14);
  border-radius: 50%;
  pointer-events: none;
  animation: ring-pulse 14s ease-in-out infinite;
}
.hero-ring::after {
  content: "";
  position: absolute;
  inset: 40px;
  border: 1px solid rgba(245, 243, 238, 0.08);
  border-radius: 50%;
}
@keyframes ring-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.035); }
}
.hero-inner { padding-block: 56px 0; position: relative; z-index: 1; }
.hero-copy { max-width: 640px; margin: 0 auto; text-align: center; animation: fade-up-in .9s var(--ease) both; }
.hero-copy h1 { margin-bottom: 0.45em; }
.subhead { font-size: 1.12rem; max-width: 560px; margin-inline: auto; color: var(--taupe); }

.event-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-bottom: 26px;
  font-size: 0.92rem;
  color: var(--taupe);
}
.event-facts strong { color: var(--cream); font-weight: 600; }

.microcopy {
  font-size: 0.82rem;
  color: var(--taupe-dim);
  margin-top: 14px;
  margin-bottom: 0;
}
.access-note { margin-top: 0; margin-bottom: 18px; font-style: italic; }

.hero-media {
  margin-top: 48px;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  z-index: 1;
  animation: fade-up-in .9s var(--ease) .12s both;
}
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hero-media:has(> img)::after,
.hero-media:has(> video source[src])::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,11,0) 60%, rgba(11,11,11,0.85));
}

.hero-media-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg-alt);
  border: 1px dashed var(--line);
}
.hero-media video { background: var(--bg-alt); }

.hero-media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg-alt);
  border: 1px dashed var(--line);
}
.play-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--bg);
}
.hero-media-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--taupe);
}

@media (min-width: 860px) {
  .hero-media { max-width: var(--max-width); margin-inline: auto; aspect-ratio: 16 / 9; }
  .hero-media img { object-position: 50% 15%; }
}

/* ---------- Who-for list ---------- */
.who-for-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0 32px;
}
.who-for-list li {
  padding: 20px 0;
  color: var(--taupe);
  border-bottom: 1px solid var(--line);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.who-for-list li strong { display: block; color: var(--cream); margin-bottom: 4px; }

/* ---------- Day list ---------- */
.day-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  gap: 0;
}
.day-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.day-number {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--taupe);
  line-height: 1.15;
}
.day-text h3 { margin: 0 0 0.3em; color: var(--cream); }
.day-text p { margin-bottom: 0; }

@media (max-width: 480px) {
  .day-card { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Day trail (scroll-drawn line + traveling mark) ---------- */
.day-trail-wrap { position: relative; }
.day-trail-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.day-trail-path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.day-trail-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cream);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}
.day-trail-stop {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  pointer-events: none;
}
.day-trail-icon.is-active { opacity: 1; }

@media (max-width: 480px) {
  .day-trail-svg, .day-trail-icon, .day-trail-stop { display: none; }
}

/* ---------- Why-free ---------- */
.why-free-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--cream);
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.4;
}

/* ---------- Registration form ---------- */
.register-form {
  display: grid;
  gap: 18px;
  margin-top: 12px;
}
.form-row { display: grid; gap: 8px; }
.form-row label { font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--taupe); }

input, textarea, select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg-alt);
  color: var(--cream);
}
input::placeholder, textarea::placeholder { color: var(--taupe-dim); }
input:focus, textarea:focus, select:focus {
  outline: 1px solid var(--cream);
  outline-offset: 2px;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23a8a49c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
select:invalid { color: var(--taupe-dim); }

.phone-group {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 10px;
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--taupe);
  cursor: pointer;
}
.consent-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg-alt);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.consent-row input[type="checkbox"]:checked {
  background: var(--cream);
  border-color: var(--cream);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'><path d='M1 5l3.5 3.5L11 1' stroke='%230b0b0b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.consent-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

@media (max-width: 420px) {
  .phone-group { grid-template-columns: 92px 1fr; }
}

.form-note {
  font-size: 0.8rem;
  color: var(--taupe-dim);
  text-align: center;
  margin-top: 6px;
  margin-bottom: 0;
}

.form-error {
  color: var(--cream);
  font-size: 0.85rem;
  margin: -4px 0 0;
}

/* ---------- Analyzing overlay ---------- */
.analyzing-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  opacity: 0;
  transition: opacity .4s ease;
}
.analyzing-overlay.is-active { display: flex; }
.analyzing-overlay.is-visible { opacity: 1; }

.analyzing-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px;
  max-width: 420px;
}
.analyzing-ring {
  width: 56px;
  height: 56px;
  margin: 0 auto 28px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--cream);
  animation: analyzing-spin 1s linear infinite;
}
@keyframes analyzing-spin {
  to { transform: rotate(360deg); }
}
.analyzing-content h2 {
  font-size: 1.3rem;
  margin-bottom: 28px;
  min-height: 2.4em;
}
.analyzing-bar {
  width: 100%;
  height: 3px;
  background: var(--line);
  border-radius: 0;
  overflow: hidden;
}
.analyzing-bar-fill {
  width: 0%;
  height: 100%;
  background: var(--white);
  transition: width 5s linear;
}

@media (prefers-reduced-motion: reduce) {
  .analyzing-ring { animation: none; }
  .analyzing-overlay { transition: none; }
  .analyzing-bar-fill { transition: none; }
}

/* ---------- Social proof ---------- */
.proof-grid {
  display: grid;
  gap: 28px;
}
.proof-card {
  padding-top: 22px;
  border-top: 1px solid var(--line);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.proof-card p {
  font-style: italic;
  color: var(--taupe);
  margin-bottom: 0;
}
.proof-card .proof-tag {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--taupe);
}

@media (min-width: 720px) {
  .proof-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- FAQ ---------- */
.faq-list {
  margin-bottom: 8px;
  border-top: 1px solid var(--line);
}
details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
summary {
  font-weight: 400;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--cream);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  transition: opacity .25s ease;
}
summary:hover { opacity: 0.75; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--cream);
  flex-shrink: 0;
  display: inline-block;
  transition: transform .3s var(--ease);
}
details[open] summary::after { transform: rotate(45deg); }
details p {
  margin: 14px 0 0;
  animation: fade-up-in .4s var(--ease) both;
}

/* ---------- Final CTA ---------- */
.final-cta {
  text-align: center;
  background: var(--bg-alt);
}
.final-cta p { max-width: 540px; margin-inline: auto; }
.final-cta .event-facts { justify-content: center; margin-top: 4px; }

/* ---------- Survey ---------- */
.survey-wrap {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--taupe);
  padding-top: env(safe-area-inset-top, 0px);
}
.survey-progress-track {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  height: 3px;
  background: var(--line);
  z-index: 2;
}
.survey-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--white);
  transition: width .4s var(--ease);
}
.survey-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.survey-step {
  max-width: 560px;
  width: 100%;
  text-align: center;
  animation: fade-up-in .5s var(--ease) both;
}
.survey-step[hidden] { display: none; }
.survey-step-number {
  display: block;
  text-transform: uppercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--taupe);
  margin-bottom: 14px;
}
.survey-step h2 { margin-bottom: 26px; }

.survey-options {
  display: grid;
  gap: 12px;
  text-align: left;
  margin-bottom: 28px;
}
.survey-option {
  display: block;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 0;
  padding: 16px 18px;
  cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s ease, background .25s ease;
}
.survey-option:hover { transform: translateY(-2px); border-color: rgba(245, 243, 238, 0.3); }
.survey-option:has(input:checked) {
  border-color: var(--cream);
  background: rgba(245, 243, 238, 0.06);
}
.survey-option input { position: absolute; opacity: 0; pointer-events: none; }
.survey-option-label { color: var(--taupe); }
.survey-option:has(input:checked) .survey-option-label { color: var(--cream); }

.survey-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.survey-skip {
  text-align: center;
  padding: 0 24px 28px;
}
.survey-skip a {
  font-size: 0.82rem;
  color: var(--taupe-dim);
  text-decoration: underline;
  text-decoration-color: var(--line);
}
.survey-skip a:hover { color: var(--taupe); }

/* ---------- Confirmation page ---------- */
.confirm-wrap {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  background: var(--bg);
  color: var(--taupe);
}
.confirm-card { max-width: 460px; position: relative; z-index: 1; animation: fade-up-in .9s var(--ease) both; }
.confirm-icon {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  margin-bottom: 14px;
  color: var(--cream);
}
.confirm-card p { color: var(--taupe); }
.confirm-actions { display: grid; gap: 14px; margin-top: 4px; }

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 28px 24px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--taupe-dim);
  background: var(--bg-alt);
}

/* ---------- Larger screens ---------- */
@media (min-width: 640px) {
  .who-for-list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  #vip-includes .who-for-list { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Dashboard ---------- */
.dash-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--taupe-dim);
  margin-top: 10px;
}
.dash-refresh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cream);
  animation: dash-pulse 2s ease-in-out infinite;
}
@keyframes dash-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.dash-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.dash-stat {
  padding: 22px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dash-stat-label {
  display: block;
  text-transform: uppercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  color: var(--taupe);
  margin-bottom: 8px;
}
.dash-stat-value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 2rem;
  color: var(--cream);
  line-height: 1.1;
}

.dash-controls {
  display: grid;
  gap: 12px;
  margin: 32px 0 20px;
}
.dash-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.dash-filter-row select,
.dash-filter-row input {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.dash-toggle-group {
  display: flex;
  border: 1px solid var(--line);
}
.dash-toggle {
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--taupe);
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  cursor: pointer;
}
.dash-toggle:last-child { border-right: none; }
.dash-toggle.is-active { background: var(--white); color: var(--bg); }

.dash-countries {
  margin: 0 0 20px;
  border-top: 1px solid var(--line);
}
.dash-country-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--taupe);
}
.dash-country-row strong { color: var(--cream); font-weight: 500; }

.dash-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
}
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  white-space: nowrap;
}
.dash-table th {
  text-align: left;
  padding: 12px 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  color: var(--taupe);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
}
.dash-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--taupe);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-table tr:last-child td { border-bottom: none; }
.dash-table td.dash-col-name { color: var(--cream); font-weight: 500; }
.dash-status-vip { color: var(--cream); font-weight: 600; }
.dash-status-free { color: var(--taupe-dim); }

.dash-empty, .dash-error {
  padding: 60px 24px;
  text-align: center;
  color: var(--taupe);
}
.dash-error { color: var(--cream); }

@media (min-width: 640px) {
  .dash-stats { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Countdown (split-flap digits) ---------- */
.countdown-wrap {
  margin: 26px 0 22px;
  text-align: center;
}
.countdown-wrap .eyebrow { margin-bottom: 12px; }

.countdown-row {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: clamp(2.5px, 0.85vw, 6px);
  max-width: 100%;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8em;
}
.countdown-label {
  font-family: var(--font-body);
  font-size: 1.7em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--taupe);
}

.digit-group { display: flex; gap: 1.6em; }
.digit-group .digit {
  position: relative;
  margin: 0;
  height: 16em;
  aspect-ratio: 1 / 2;
}
.digit-group .digit span {
  --act: 0;
  --signX: 1;
  --signY: 1;
  position: absolute;
  background-color: var(--cream);
  transition: opacity 0.3s cubic-bezier(0.17, 0.67, 0.5, 1.15);
  opacity: calc(0.05 + 0.95 * var(--act));
  transform: scale(var(--signX), var(--signY));
}
.digit-group .digit span.end {
  clip-path: polygon(15% 0%, 7.5% 20%, 25% 100%, 75% 100%, 92.5% 20%, 85% 0%);
  left: 0;
  width: 100%;
  height: 10%;
}
.digit-group .digit span.end.top { top: 0; }
.digit-group .digit span.end.bottom { top: initial; bottom: 0; --signY: -1; }
.digit-group .digit span.side {
  clip-path: polygon(0% 15%, 20% 7.5%, 100% 22.5%, 100% 85%, 20% 95%, 0% 90%);
  height: 50%;
  width: 20%;
}
.digit-group .digit span.side.left { top: 0; left: 0; }
.digit-group .digit span.side.left.bottom { top: initial; bottom: 0; --signY: -1; }
.digit-group .digit span.side.right { top: 0; left: initial; right: 0; --signX: -1; }
.digit-group .digit span.side.right.bottom { top: initial; --signY: -1; bottom: 0; }
.digit-group .digit span.middle {
  clip-path: polygon(22.5% 0%, 6.5% 50%, 22.5% 100%, 77.5% 100%, 93.5% 50%, 77.5% 0%);
  top: 45%;
  left: 0;
  height: 10%;
  width: 100%;
}
.digit-group .digit[data-digit="0"] :not(.middle) { --act: 1; }
.digit-group .digit[data-digit="1"] .right { --act: 1; }
.digit-group .digit[data-digit="2"] :not(.top.left, .bottom.right) { --act: 1; }
.digit-group .digit[data-digit="3"] :not(.left) { --act: 1; }
.digit-group .digit[data-digit="4"] :not(.end, .bottom.left) { --act: 1; }
.digit-group .digit[data-digit="5"] :not(.top.right, .bottom.left) { --act: 1; }
.digit-group .digit[data-digit="6"] :not(.top.right) { --act: 1; }
.digit-group .digit[data-digit="7"] .top, .digit-group .digit[data-digit="7"] .right { --act: 1; }
.digit-group .digit[data-digit="8"] > * { --act: 1; }
.digit-group .digit[data-digit="9"] :not(.bottom.left) { --act: 1; }

.countdown-colon {
  display: flex;
  height: 16em;
  flex-direction: column;
  justify-content: space-evenly;
  width: 4em;
  align-items: center;
  margin-top: 0;
}
.countdown-colon span::before, .countdown-colon span::after {
  content: "";
  display: block;
  width: 2em;
  aspect-ratio: 1 / 1;
  background-color: var(--cream);
  border-radius: 2em;
  opacity: 0.7;
}

.countdown-live {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--cream);
  margin: 0;
}

.countdown-wrap.safari .digit span { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .digit-group .digit span { transition: none; }
}

/* ---------- Starfield (ambient drifting dots, used on hero/full-bleed sections) ---------- */
.stars-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#stars, #stars2, #stars3 {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
}
#stars { width: 1px; height: 1px; animation: star-drift 90s linear infinite; }
#stars2 { width: 2px; height: 2px; animation: star-drift 150s linear infinite; }
#stars3 { width: 3px; height: 3px; animation: star-drift 220s linear infinite; }
#stars {
  box-shadow:
    1309px 228px var(--cream),
    51px 563px var(--cream),
    501px 457px var(--cream),
    285px 209px var(--cream),
    1385px 178px var(--cream),
    1209px 864px var(--cream),
    65px 61px var(--cream),
    191px 447px var(--cream),
    476px 1034px var(--cream),
    1232px 54px var(--cream),
    1149px 407px var(--cream),
    1466px 859px var(--cream),
    451px 919px var(--cream),
    1206px 569px var(--cream),
    1657px 13px var(--cream),
    1554px 326px var(--cream),
    1429px 865px var(--cream),
    696px 569px var(--cream),
    318px 440px var(--cream),
    1563px 689px var(--cream),
    209px 189px var(--cream),
    778px 198px var(--cream),
    735px 704px var(--cream),
    1236px 541px var(--cream),
    1652px 88px var(--cream),
    1494px 940px var(--cream),
    1098px 255px var(--cream),
    1888px 775px var(--cream),
    161px 600px var(--cream),
    1698px 740px var(--cream),
    1182px 393px var(--cream),
    1442px 142px var(--cream),
    93px 466px var(--cream),
    1583px 592px var(--cream),
    163px 476px var(--cream),
    1774px 206px var(--cream),
    778px 569px var(--cream),
    928px 747px var(--cream),
    333px 758px var(--cream),
    727px 429px var(--cream),
    1372px 546px var(--cream),
    1437px 146px var(--cream),
    1247px 350px var(--cream),
    1093px 501px var(--cream),
    334px 946px var(--cream),
    777px 552px var(--cream),
    1895px 449px var(--cream),
    1402px 664px var(--cream),
    1726px 114px var(--cream),
    469px 65px var(--cream),
    1648px 646px var(--cream),
    821px 548px var(--cream),
    135px 432px var(--cream),
    1870px 644px var(--cream),
    435px 1022px var(--cream),
    810px 939px var(--cream),
    292px 542px var(--cream),
    285px 505px var(--cream),
    1525px 538px var(--cream),
    1529px 877px var(--cream),
    1838px 817px var(--cream),
    741px 449px var(--cream),
    283px 1043px var(--cream),
    1010px 186px var(--cream),
    1547px 96px var(--cream),
    1763px 224px var(--cream),
    313px 327px var(--cream),
    1622px 864px var(--cream),
    1221px 130px var(--cream),
    788px 781px var(--cream);
}
#stars:after {
  content: "";
  position: absolute;
  top: 1080px;
  width: 1px;
  height: 1px;
  box-shadow:
    1309px 228px var(--cream),
    51px 563px var(--cream),
    501px 457px var(--cream),
    285px 209px var(--cream),
    1385px 178px var(--cream),
    1209px 864px var(--cream),
    65px 61px var(--cream),
    191px 447px var(--cream),
    476px 1034px var(--cream),
    1232px 54px var(--cream),
    1149px 407px var(--cream),
    1466px 859px var(--cream),
    451px 919px var(--cream),
    1206px 569px var(--cream),
    1657px 13px var(--cream),
    1554px 326px var(--cream),
    1429px 865px var(--cream),
    696px 569px var(--cream),
    318px 440px var(--cream),
    1563px 689px var(--cream),
    209px 189px var(--cream),
    778px 198px var(--cream),
    735px 704px var(--cream),
    1236px 541px var(--cream),
    1652px 88px var(--cream),
    1494px 940px var(--cream),
    1098px 255px var(--cream),
    1888px 775px var(--cream),
    161px 600px var(--cream),
    1698px 740px var(--cream),
    1182px 393px var(--cream),
    1442px 142px var(--cream),
    93px 466px var(--cream),
    1583px 592px var(--cream),
    163px 476px var(--cream),
    1774px 206px var(--cream),
    778px 569px var(--cream),
    928px 747px var(--cream),
    333px 758px var(--cream),
    727px 429px var(--cream),
    1372px 546px var(--cream),
    1437px 146px var(--cream),
    1247px 350px var(--cream),
    1093px 501px var(--cream),
    334px 946px var(--cream),
    777px 552px var(--cream),
    1895px 449px var(--cream),
    1402px 664px var(--cream),
    1726px 114px var(--cream),
    469px 65px var(--cream),
    1648px 646px var(--cream),
    821px 548px var(--cream),
    135px 432px var(--cream),
    1870px 644px var(--cream),
    435px 1022px var(--cream),
    810px 939px var(--cream),
    292px 542px var(--cream),
    285px 505px var(--cream),
    1525px 538px var(--cream),
    1529px 877px var(--cream),
    1838px 817px var(--cream),
    741px 449px var(--cream),
    283px 1043px var(--cream),
    1010px 186px var(--cream),
    1547px 96px var(--cream),
    1763px 224px var(--cream),
    313px 327px var(--cream),
    1622px 864px var(--cream),
    1221px 130px var(--cream),
    788px 781px var(--cream);
}
#stars2 {
  box-shadow:
    1220px 958px var(--cream),
    1083px 514px var(--cream),
    1133px 23px var(--cream),
    1393px 234px var(--cream),
    1396px 546px var(--cream),
    1574px 696px var(--cream),
    228px 601px var(--cream),
    890px 323px var(--cream),
    929px 6px var(--cream),
    1478px 539px var(--cream),
    1025px 365px var(--cream),
    1039px 217px var(--cream),
    1782px 611px var(--cream),
    1723px 1039px var(--cream),
    1247px 407px var(--cream),
    313px 765px var(--cream),
    1561px 330px var(--cream),
    1104px 1px var(--cream),
    1226px 663px var(--cream),
    1000px 39px var(--cream),
    229px 743px var(--cream),
    1799px 629px var(--cream),
    490px 118px var(--cream),
    493px 161px var(--cream),
    175px 995px var(--cream),
    1671px 141px var(--cream),
    1557px 257px var(--cream),
    262px 973px var(--cream),
    1125px 338px var(--cream),
    542px 1080px var(--cream),
    1786px 866px var(--cream),
    433px 411px var(--cream),
    1460px 638px var(--cream),
    817px 764px var(--cream),
    897px 1059px var(--cream);
}
#stars2:after {
  content: "";
  position: absolute;
  top: 1080px;
  width: 2px;
  height: 2px;
  box-shadow:
    1220px 958px var(--cream),
    1083px 514px var(--cream),
    1133px 23px var(--cream),
    1393px 234px var(--cream),
    1396px 546px var(--cream),
    1574px 696px var(--cream),
    228px 601px var(--cream),
    890px 323px var(--cream),
    929px 6px var(--cream),
    1478px 539px var(--cream),
    1025px 365px var(--cream),
    1039px 217px var(--cream),
    1782px 611px var(--cream),
    1723px 1039px var(--cream),
    1247px 407px var(--cream),
    313px 765px var(--cream),
    1561px 330px var(--cream),
    1104px 1px var(--cream),
    1226px 663px var(--cream),
    1000px 39px var(--cream),
    229px 743px var(--cream),
    1799px 629px var(--cream),
    490px 118px var(--cream),
    493px 161px var(--cream),
    175px 995px var(--cream),
    1671px 141px var(--cream),
    1557px 257px var(--cream),
    262px 973px var(--cream),
    1125px 338px var(--cream),
    542px 1080px var(--cream),
    1786px 866px var(--cream),
    433px 411px var(--cream),
    1460px 638px var(--cream),
    817px 764px var(--cream),
    897px 1059px var(--cream);
}
#stars3 {
  box-shadow:
    924px 247px var(--cream),
    507px 460px var(--cream),
    131px 692px var(--cream),
    43px 471px var(--cream),
    1205px 451px var(--cream),
    14px 145px var(--cream),
    1449px 120px var(--cream),
    468px 138px var(--cream),
    1854px 64px var(--cream),
    1760px 676px var(--cream),
    145px 1052px var(--cream),
    487px 570px var(--cream),
    1370px 994px var(--cream),
    438px 270px var(--cream),
    1481px 968px var(--cream),
    497px 968px var(--cream),
    1653px 833px var(--cream),
    389px 193px var(--cream);
}
#stars3:after {
  content: "";
  position: absolute;
  top: 1080px;
  width: 3px;
  height: 3px;
  box-shadow:
    924px 247px var(--cream),
    507px 460px var(--cream),
    131px 692px var(--cream),
    43px 471px var(--cream),
    1205px 451px var(--cream),
    14px 145px var(--cream),
    1449px 120px var(--cream),
    468px 138px var(--cream),
    1854px 64px var(--cream),
    1760px 676px var(--cream),
    145px 1052px var(--cream),
    487px 570px var(--cream),
    1370px 994px var(--cream),
    438px 270px var(--cream),
    1481px 968px var(--cream),
    497px 968px var(--cream),
    1653px 833px var(--cream),
    389px 193px var(--cream);
}
@keyframes star-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-1080px); }
}
@media (prefers-reduced-motion: reduce) {
  #stars, #stars2, #stars3 { animation: none; }
}