/* ===================== Coming soon — showpiece ===================== */
.cs { position: relative; min-height: 100vh; background: var(--orange); color: var(--navy); display: flex; flex-direction: column; overflow: hidden; }

/* the spot, as a diagram framing the conversion card */
/* width:100% + max-width (not width:420px) so the card shrinks on narrow
   screens instead of forcing its grid track — and the whole page — to 420px. */
.cs-card-wrap { position: relative; width: 100%; max-width: 420px; margin-inline: auto; }
.cs-orbit { position: absolute; left: 50%; top: 50%; width: 134%; aspect-ratio: 1; transform: translate(-50%,-50%); pointer-events: none; z-index: 0; }
.cs-orbit .ring { position: absolute; inset: 0; border: 1px solid rgba(23,32,41,0.26); border-radius: 50%; }
.cs-orbit .ring.r2 { inset: 13%; }
.cs-orbit .ring.r3 { inset: 28%; }
.cs-spin { position: absolute; inset: 0; animation: csSpin 90s linear infinite; }
.cs-spin.rev { animation-duration: 120s; animation-direction: reverse; }
@keyframes csSpin { to { transform: rotate(360deg); } }

/* topics as graphic nodes sitting on the orbit ring */
/* topics as nodes sitting ON the orbit ring, scattered, labels reading outward */
.cs-marks { position: absolute; left: 50%; top: 50%; width: 134%; aspect-ratio: 1; transform: translate(-50%,-50%); pointer-events: none; z-index: 2; }
.cs-mark { position: absolute; transform: translate(-50%,-50%); }
.cs-mark .node { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--c); opacity: 0.85; box-shadow: 0 0 0 4px rgba(236,236,228,0.16); }
.cs-mark .label { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; color: rgba(23,32,41,0.64); white-space: nowrap; }
.cs-mark.to-left .label { right: 17px; text-align: right; }
.cs-mark.to-right .label { left: 17px; }
.cs-mark::after { content: ""; position: absolute; top: 50%; width: 9px; height: 1px; background: rgba(23,32,41,0.26); transform: translateY(-50%); }
.cs-mark.to-left::after { right: 6px; }
.cs-mark.to-right::after { left: 6px; }
@media (max-width: 1180px){ .cs-marks { display: none; } }

.cs-top { position: relative; z-index: 2; padding: 30px 0; }
.cs-topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.cs-top img { height: 34px; width: auto; display: block; }
.cs-top .cs-tag { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--navy); display: inline-flex; align-items: center; gap: 0.7em; }
.cs-top .cs-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); display: inline-block; }
@media (max-width: 600px){
  /* let the date tag wrap under the logo instead of being hidden */
  .cs-topbar { flex-wrap: wrap; gap: 8px 16px; }
  .cs-top .cs-tag { font-size: 0.64rem; }
  /* pull the hero content up to the top instead of vertically centering it */
  .cs-main { align-items: flex-start; padding-block: 14px 40px; }
}

.cs-main { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; padding-block: clamp(28px, 5vh, 64px); }
.cs-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 96px); align-items: center; width: 100%; }
/* grid items default to min-width:auto, which lets wide content (the countdown
   row, the non-wrapping reveal line) blow the track past the viewport on small
   screens. min-width:0 lets them shrink so nothing gets clipped. */
.cs-grid > * { min-width: 0; }
@media (max-width: 940px){ .cs-grid { grid-template-columns: 1fr; gap: 44px; } }

/* ---- left: the arc ---- */
.cs-arc { margin-bottom: 28px; }
.cs-arc .beat { display: block; font-family: var(--font-head); font-weight: var(--tw-head-weight); font-size: clamp(2.3rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -0.03em; }
.cs-arc .beat.dim { color: rgba(23,32,41,0.48); }
.cs-arc .beat.lit { color: var(--navy); }
.cs-arc .beat.brand { margin-top: 0.12em; }
.cs-arc .arc-logo { height: clamp(2.4rem, 6.6vw, 5.4rem); width: auto; display: block; }
.cs-intro { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.12rem, 1.5vw, 1.4rem); line-height: 1.5; color: rgba(23,32,41,0.82); max-width: 46ch; }
.cs-kicker { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.74rem; color: var(--teal); margin-bottom: 22px; }

/* entrance (respects reduced motion) */
.fade { opacity: 0; transform: translateY(22px); animation: csIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
.fade.d1 { animation-delay: .12s; } .fade.d2 { animation-delay: .26s; } .fade.d3 { animation-delay: .4s; }
.cs-arc .beat, .cs-arc .brand { opacity: 0; transform: translateY(22px); animation: csIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
.cs-arc .beat:nth-child(1){animation-delay:.2s}.cs-arc .beat:nth-child(2){animation-delay:.42s}.cs-arc .beat:nth-child(3){animation-delay:.64s}.cs-arc .beat.brand{animation-delay:.9s}
@keyframes csIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fade, .cs-arc .beat, .cs-arc .brand { opacity: 1; transform: none; animation: none; }
  .cs-spin { animation: none; }
}

/* ---- right: the conversion card ---- */
.cs-card { position: relative; z-index: 1; background: var(--navy); color: var(--cream); padding: clamp(28px, 3.4vw, 46px); box-shadow: 0 50px 100px -40px rgba(23,32,41,0.6); }
.cs-card .cs-card-kick { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.7rem; color: var(--orange); }
.cs-reveal-line { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.cs-reveal-line .big { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; color: #fff; }
.cs-reveal-line .at { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; color: rgba(236,236,228,0.7); }

.cs-countdown { display: flex; gap: clamp(8px, 1.4vw, 18px); align-items: flex-start; margin-top: 26px; }
.cs-card .cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.cs-card .cd-num { font-family: var(--font-head); font-weight: 300; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.cs-card .cd-lab { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.58rem; margin-top: 10px; color: var(--orange); }
.cs-card .cd-sep { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; color: rgba(236,236,228,0.28); align-self: flex-start; }

.cs-divider { height: 1px; background: rgba(236,236,228,0.16); margin: clamp(24px, 3vw, 34px) 0; border: 0; }

.cs-form-h { font-family: var(--font-head); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: #fff; }
.cs-form-sub { color: rgba(236,236,228,0.72); margin-top: 6px; font-size: 0.98rem; }
.cs-form { display: grid; gap: 12px; margin-top: 20px; }
.cs-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-form input { width: 100%; padding: 15px 16px; border: 1.5px solid rgba(236,236,228,0.28); background: rgba(255,255,255,0.04); font-family: var(--font-body); font-size: 1rem; color: #fff; transition: border-color .2s ease, background .2s ease; }
.cs-form input::placeholder { color: rgba(236,236,228,0.5); }
.cs-form input:focus { outline: none; border-color: var(--orange); background: rgba(255,255,255,0.08); box-shadow: 0 0 0 3px rgba(233,133,0,0.2); }
.cs-form button { width: 100%; justify-content: center; }
.cs-form button:disabled { cursor: default; }

/* consent checkbox */
.cs-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-top: 2px; }
.cs-consent input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid rgba(236,236,228,0.4); background: rgba(255,255,255,0.04); display: grid; place-content: center; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.cs-consent input::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .15s ease; box-shadow: inset 1em 1em var(--orange); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.cs-consent input:checked { border-color: var(--orange); background: rgba(233,133,0,0.12); }
.cs-consent input:checked::before { transform: scale(1); }
.cs-consent input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(233,133,0,0.3); }
.cs-consent.invalid input { border-color: #ffb4a8; box-shadow: 0 0 0 3px rgba(255,180,168,0.25); }
.cs-consent span { font-size: 0.84rem; line-height: 1.45; color: rgba(236,236,228,0.72); }
.cs-consent a { color: var(--cream); border-bottom: 1px solid rgba(236,236,228,0.4); }
.cs-consent a:hover { color: #fff; border-color: #fff; }
.cs-reassure { font-family: var(--font-kicker); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; color: rgba(236,236,228,0.6); margin-top: 14px; text-align: center; }
.cs-msg { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--orange); margin-top: 16px; text-align: center; min-height: 1em; opacity: 0; transition: opacity .35s ease; }
.cs-msg.show { opacity: 1; }
.cs-msg.is-error { color: #ffb4a8; }
/* ---- small screens: keep the card and everything in it inside the viewport ---- */
@media (max-width: 560px){
  .cs-card { padding: 26px 20px; }
  /* let the date + "at noon ET" wrap instead of overflowing on one line */
  .cs-reveal-line { flex-wrap: wrap; gap: 2px 10px; }
  /* countdown shares the row evenly and is allowed to shrink */
  .cs-countdown { gap: 6px; }
  .cs-card .cd-unit { min-width: 0; flex: 1 1 0; }
  .cs-card .cd-num { font-size: clamp(1.5rem, 9vw, 2.4rem); }
  .cs-card .cd-lab { font-size: 0.52rem; letter-spacing: 0.1em; }
  .cs-card .cd-sep { align-self: flex-start; }
  /* headline arc: bigger and roomier on small screens */
  .cs-arc { margin-bottom: 34px; }
  .cs-arc .beat { font-size: clamp(2.45rem, 10vw, 3rem); line-height: 1.18; }
  .cs-arc .beat.brand { margin-top: 0.34em; }
  .cs-arc .arc-logo { height: clamp(2.9rem, 12vw, 3.9rem); }
}
@media (max-width: 420px){ .cs-form .row2 { grid-template-columns: 1fr; } }

/* ---- footer ---- */
.cs-foot { position: relative; z-index: 2; padding: 26px 0 32px; }
.cs-footbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cs-foot .tagline { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--navy); }
.cs-foot .copy { font-size: 0.84rem; color: rgba(23,32,41,0.7); }
.cs-social { display: flex; gap: 8px; }
.cs-social a { width: 42px; height: 42px; border: 1px solid rgba(23,32,41,0.3); display: grid; place-items: center; color: var(--navy); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.cs-social a:hover { background: var(--navy); border-color: var(--navy); color: var(--orange); transform: translateY(-3px); }
.cs-social svg { width: 18px; height: 18px; display: block; }
@media (max-width: 760px){ .cs-footbar { justify-content: center; text-align: center; } }