/* ==========================================================================
   Amazon Launch Accelerator - shared design system.
   Registration (/), VIP offer (/vip), confirmation (/thank-you).

   Dark direct-response composition on ESN brand equity. Values from the
   supplied spec: page #060911, popup #111111, fields #2B2B2B, gold #DDB86C.

   MOTION IS LOW ON PURPOSE. One transition on the primary CTA, one quiet
   fade on section entry. This is a conversion funnel carrying earnings
   disclosures; movement reads as a template and a template reads as
   untrustworthy on a page that later asks for money.
   ========================================================================== */

:root {
  --bg:        #060911;   /* page */
  --bg-2:      #0a0f1a;   /* alternating band */
  --card:      #111722;
  --card-2:    #151c29;
  --popup:     #111111;
  --field:     #2b2b2b;
  --line:      #232b3a;
  --line-2:    #2f3849;

  --ink:       #f7f5ef;   /* main text */
  --ink-2:     #c4c4ca;   /* secondary */
  --ink-3:     #8d93a1;

  --gold:      #ddb86c;
  --gold-1:    #c9952b;   /* gradient start */
  --gold-2:    #e7c878;   /* gradient end */
  --gold-ink:  #1a1206;   /* text ON gold */
  --gold-soft: #f0d9a4;

  --err:       #ff8b8b;
  --ok:        #7fe0a4;

  --wrap:      1120px;
  --hero:      960px;
  --prose:     700px;
  --cta:       440px;

  --f-head: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
/* height:auto is load-bearing. With max-width:100% and no height:auto, the
   HTML height attribute is used as the rendered height while the width scales
   down, which stretches every image that is not exactly its declared ratio. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-soft); }

.wrap   { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.hero-w { max-width: var(--hero); margin-left: auto; margin-right: auto; }
.prose  { max-width: var(--prose); margin-left: auto; margin-right: auto; }
.center { text-align: center; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--f-head); margin: 0 0 18px;
  line-height: 1.1; letter-spacing: -.022em; font-weight: 800;
}
h1 { font-size: clamp(32px, 5.6vw, 64px); }
h2 { font-size: clamp(27px, 3.8vw, 40px); }
h3 { font-size: clamp(19px, 2.2vw, 22px); font-weight: 700; }
p  { margin: 0 0 18px; }

.lede  { font-size: clamp(18px, 2.1vw, 21px); color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.tiny  { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.gold  { color: var(--gold); }

.eyebrow {
  display: inline-block; font-family: var(--f-body);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(221,184,108,.36);
  border-radius: 999px; padding: 7px 16px; margin: 0 0 20px;
}

/* ---------- masthead ---------- */
.masthead { border-bottom: 1px solid var(--line); background: rgba(6,9,17,.9); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo__mark {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: var(--gold); color: var(--gold-ink); border-radius: 8px;
  font-family: var(--f-head); font-weight: 800; font-size: 18px;
}
.logo__text { font-family: var(--f-head); font-weight: 700; font-size: 16px; line-height: 1.15; }
.logo__text small { display: block; font-family: var(--f-body); font-weight: 500; font-size: 12px; color: var(--ink-3); }
.masthead__meta { margin: 0; font-size: 13.5px; color: var(--ink-2); text-align: right; }
.masthead__meta b { color: var(--ink); font-weight: 600; }
.masthead__status {
  font-size: 12.5px; font-weight: 600; color: var(--gold);
  border: 1px solid rgba(221,184,108,.3); border-radius: 999px; padding: 5px 12px;
}

/* ---------- bands ---------- */
.band { padding: 72px 0; }
.band--alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band--tight { padding: 52px 0; }

/* ---------- hero ---------- */
.hero { padding: 52px 0 8px; text-align: center; }
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
  font-size: 15.5px; font-weight: 600; color: var(--ink-2); margin: 0 0 22px;
}
.hero__meta b { color: var(--ink); }
.hero__meta .dot { color: var(--line-2); }
.hero__local { display: block; width: 100%; font-weight: 500; font-size: 13.5px; color: var(--ink-3); }
.hero h1 { margin-bottom: 20px; }
.hero h1 strong { color: var(--gold); font-weight: 800; }
.hero__sub { font-size: clamp(17px, 2vw, 21px); color: var(--ink-2); margin: 0 auto 30px; max-width: 760px; }

/* ---------- countdown ---------- */
.count { display: flex; justify-content: center; gap: 9px; margin: 0 0 22px; }
.count__unit {
  min-width: 74px; padding: 10px 8px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card);
}
.count__unit b { display: block; font-family: var(--f-head); font-size: 26px; font-weight: 800; line-height: 1.1; }
.count__unit span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.count__label { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }

/* ---------- CTA ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: var(--cta); min-height: 60px;
  border: 0; border-radius: 12px; padding: 17px 28px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-1));
  color: var(--gold-ink);
  font-family: var(--f-head); font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: filter .14s ease, transform .1s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; }
.btn[data-loading="true"] { filter: saturate(.45); pointer-events: none; }
.btn__spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(26,18,6,.28); border-top-color: var(--gold-ink); border-radius: 50%; animation: spin .7s linear infinite; }
.btn[data-loading="true"] .btn__spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn--ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line-2);
  font-size: 16.5px; font-weight: 600; min-height: 52px;
}
.btn--ghost:hover { filter: none; background: var(--card); border-color: var(--gold); }

.cta-stack { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.reassure { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.reassure b { color: var(--ink); }
.decline {
  display: inline-block; margin-top: 14px; font-size: 15.5px;
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
}
.decline:hover { color: var(--ink); }

/* ---------- attendance incentive ---------- */
.bribe {
  max-width: 560px; margin: 18px auto 0; text-align: left;
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 12px; background: var(--card); padding: 16px 18px;
}
.bribe b { display: block; font-family: var(--f-head); font-size: 16.5px; margin-bottom: 3px; }
.bribe span { font-size: 15.5px; color: var(--ink-2); }

.credline { margin: 18px 0 0; font-size: 15px; color: var(--ink-2); }
.credline b { color: var(--ink); }

/* ---------- photos ---------- */
.shot { margin: 0; }
.shot img { border-radius: 14px; border: 1px solid var(--line); width: 100%; }
.shot figcaption { margin-top: 11px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.shot--wide { max-width: 900px; margin: 34px auto 0; }
/* The source is portrait 1050x1400. Rendered full-width it would be ~1200px
   tall and swamp the page, so it is CROPPED to a banner rather than squashed.
   object-position sits at 42% because that is where Nick and the shelving are;
   a centered crop cuts his head off. */
.shot--wide img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 42%; width: 100%; }
@media (max-width: 640px) { .shot--wide img { aspect-ratio: 4 / 3; } }

/* The Seller Central screenshot is PROOF and is never cropped: every number,
   date and label has to stay readable.

   object-fit MUST NOT be set here. `none` means "do not scale" - the image
   renders at intrinsic size and the box clips it, which is exactly what was
   cutting the dashboard off on desktop. Natural ratio, scaled to the column,
   nothing clipped. */
.shot--proof img { width: 100%; height: auto; }
.shot--proof { max-width: 780px; margin: 26px auto 0; }
.shot--proof img { cursor: zoom-in; }

/* ---------- teaching points ---------- */
.teach { list-style: none; padding: 0; margin: 30px auto 0; max-width: var(--wrap); display: grid; gap: 14px; text-align: left; }
@media (min-width: 800px) { .teach { grid-template-columns: 1fr 1fr; } }
.teach li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 22px 22px 60px; position: relative; }
.teach__n {
  position: absolute; left: 20px; top: 23px;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px;
  background: var(--gold); color: var(--gold-ink);
  font-family: var(--f-head); font-weight: 800; font-size: 13.5px;
}
.teach b { display: block; font-family: var(--f-head); font-size: 17.5px; margin-bottom: 6px; line-height: 1.25; }
.teach span { font-size: 15.5px; color: var(--ink-2); }

/* ---------- host story ---------- */
.story { display: grid; gap: 26px; align-items: start; margin-top: 30px; }
@media (min-width: 860px) { .story { grid-template-columns: 1fr 320px; } }
.story__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.story__panel { margin: 0; }
.story__panel img { border-radius: 11px; border: 1px solid var(--line); aspect-ratio: 4/5; object-fit: cover; }
.story__panel figcaption { margin-top: 7px; font-size: 12px; color: var(--ink-3); }

/* ---------- stats ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; justify-content: center; }
.stats li { border: 1px solid var(--line); border-radius: 11px; padding: 13px 18px; background: var(--card); min-width: 140px; }
.stats b { display: block; font-family: var(--f-head); font-size: 26px; font-weight: 800; color: var(--gold); line-height: 1.15; }
.stats span { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 28px auto 0; text-align: left; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 19px 36px 19px 0; position: relative;
  font-family: var(--f-head); font-size: 17.5px; font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg); transition: transform .16s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.faq p { margin: 0 0 18px; color: var(--ink-2); font-size: 16.5px; }

/* ==========================================================================
   REGISTRATION POPUP
   ========================================================================== */

.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal[data-open="true"] { display: block; }
.modal__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.78); }
.modal__wrap {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.modal__dialog {
  position: relative; width: 100%; max-width: 560px;
  max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--popup); border: 1px solid #262626; border-radius: 16px;
  padding: 26px 26px 24px;
}
.modal__close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  display: grid; place-items: center; background: transparent; border: 0;
  color: var(--ink-2); font-size: 26px; line-height: 1; cursor: pointer; border-radius: 9px;
}
.modal__close:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.modal__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.modal__title { font-family: var(--f-head); font-size: 25px; font-weight: 800; margin: 0 0 6px; padding-right: 40px; }
.modal__sub { font-size: 15.5px; color: var(--ink-2); margin: 0 0 6px; }
.modal__when { font-size: 14.5px; font-weight: 600; color: var(--gold); margin: 0 0 20px; }

.field { margin-bottom: 15px; }
.field__label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.field__input {
  width: 100%; min-height: 54px; padding: 14px 15px;
  background: var(--field); border: 1px solid #3a3a3a; border-radius: 11px;
  color: var(--ink); font-family: inherit; font-size: 16.5px;
}
.field__input::placeholder { color: #8a8a8a; }
.field__input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.field--invalid .field__input { border-color: var(--err); }
.field__error { margin: 7px 0 0; font-size: 13.5px; color: var(--err); }
.field:not(.field--invalid) .field__error { display: none; }

.qual { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.qual__legend { padding: 0; margin: 0 0 11px; font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.qual__options { display: grid; gap: 9px; }
.qual__opt {
  display: flex; align-items: flex-start; gap: 12px; padding: 15px;
  border: 1px solid #3a3a3a; border-radius: 11px; background: var(--field);
  cursor: pointer; font-size: 15.5px; line-height: 1.45;
  transition: border-color .12s ease, background-color .12s ease;
}
.qual__opt:hover { border-color: #4d4d4d; }
.qual__opt input { margin: 2px 0 0; flex: none; width: 19px; height: 19px; accent-color: var(--gold); }
.qual__opt:has(input:checked) { border-color: var(--gold); background: #2f2a1d; }
.qual__opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.qual__help { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.qual--invalid .qual__legend { color: var(--err); }
.qual__error { margin: 8px 0 0; font-size: 13.5px; color: var(--err); }
.qual:not(.qual--invalid) .qual__error { display: none; }

.modal .btn { max-width: none; }
.form__status { margin: 13px 0 0; font-size: 14.5px; text-align: center; line-height: 1.5; }
.form__status[data-state="error"]   { color: var(--err); }
.form__status[data-state="working"] { color: var(--ink-2); }
.form__status[data-state="success"] { color: var(--ok); }
.modal__foot { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; text-align: center; }
.modal__foot a { color: var(--ink-2); }

/* ---------- sticky mobile CTA ---------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(6,9,17,.97); border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(115%); transition: transform .2s ease;
}
.sticky[data-show="true"] { transform: translateY(0); }
.sticky .btn { max-width: 460px; margin: 0 auto; min-height: 54px; font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }

/* ==========================================================================
   VIP PAGE
   ========================================================================== */

.offerline { font-family: var(--f-head); font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; color: var(--gold); margin: 0 0 22px; }
.vidframe { max-width: 800px; margin: 0 auto 26px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.vidframe__box { position: relative; padding-top: 56.25%; }
.vidframe__box > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.vidframe__cap { font-size: 13px; color: var(--ink-3); text-align: center; margin: 10px 0 0; }

.incl { list-style: none; padding: 0; margin: 30px auto 0; display: grid; gap: 14px; text-align: left; }
@media (min-width: 800px) { .incl { grid-template-columns: repeat(3, 1fr); } }
.incl li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.incl b { display: block; font-family: var(--f-head); font-size: 17.5px; margin-bottom: 7px; }
.incl span { font-size: 15.5px; color: var(--ink-2); }
.fineprint { margin: 16px auto 0; max-width: var(--prose); font-size: 13.5px; color: var(--ink-3); text-align: center; }

.compare { width: 100%; border-collapse: collapse; margin: 28px auto 0; max-width: 760px; font-size: 16px; }
.compare th, .compare td { padding: 15px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.compare thead th { font-family: var(--f-head); font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.compare thead th:nth-child(3) { color: var(--gold); }
.compare td:nth-child(2), .compare td:nth-child(3) { text-align: center; width: 22%; }
.compare .yes { color: var(--gold); font-weight: 700; }
.compare .no  { color: var(--ink-3); }

.checkoutpanel {
  max-width: 620px; margin: 26px auto 0;
  background: #f5f2ec; color: #14130f;
  border-radius: 16px; padding: 24px;
}
.checkoutpanel__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.checkoutpanel__when { font-family: var(--f-head); font-weight: 700; font-size: 16.5px; }
.checkoutpanel__price { font-family: var(--f-head); font-weight: 800; font-size: 20px; color: #7a5e22; }
.checkoutpanel__slot { min-height: 340px; border-radius: 11px; background: #fff; border: 1px solid #e2ded4; }
.checkoutpanel__note { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: #4a4640; }
.checkoutpanel__err { margin: 0; padding: 20px; text-align: center; color: #4a4640; }
.checkoutpanel__err .btn { max-width: 300px; margin: 12px auto 0; }

/* ==========================================================================
   THANK-YOU PAGE
   ========================================================================== */

.statuspill {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-ink); background: var(--gold); border-radius: 999px; padding: 8px 17px; margin: 0 0 20px;
}
.ticket {
  max-width: 640px; margin: 0 auto; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px;
}
.ticket__row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.ticket__row:last-of-type { border-bottom: 0; }
.ticket__row dt { color: var(--ink-3); margin: 0; }
.ticket__row dd { margin: 0; font-weight: 600; text-align: right; }
.ticket__row dd.vip { color: var(--gold); }

.steps { list-style: none; counter-reset: s; padding: 0; margin: 30px auto 0; max-width: 760px; display: grid; gap: 15px; text-align: left; }
.steps > li {
  counter-increment: s; background: var(--card); border: 1px solid var(--line);
  border-radius: 15px; padding: 24px 24px 24px 64px; position: relative;
}
.steps > li::before {
  content: counter(s); position: absolute; left: 22px; top: 24px;
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px;
  background: var(--gold); color: var(--gold-ink);
  font-family: var(--f-head); font-weight: 800; font-size: 14px;
}
.steps b { display: block; font-family: var(--f-head); font-size: 18.5px; margin-bottom: 7px; }
.steps p { margin: 0 0 14px; font-size: 15.5px; color: var(--ink-2); }
.steps p:last-child { margin-bottom: 0; }

.cal { display: flex; flex-wrap: wrap; gap: 9px; }
.cal a, .cal button {
  border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 16px; min-height: 46px;
  display: inline-flex; align-items: center; font-family: inherit; font-size: 14.5px; font-weight: 600;
  text-decoration: none; color: var(--ink); background: var(--card-2); cursor: pointer;
}
.cal a:hover, .cal button:hover { border-color: var(--gold); }
.copied { font-size: 14px; color: var(--ok); margin: 9px 0 0; }

.notice { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 11px; background: var(--card-2); padding: 15px 17px; font-size: 15.5px; color: var(--ink-2); }

.qa { display: grid; gap: 14px; margin-top: 28px; text-align: left; }
@media (min-width: 800px) { .qa { grid-template-columns: 1fr 1fr; } }
.qa__card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.qa__card h3 { font-size: 17px; margin-bottom: 9px; }
.qa__card p { font-size: 15.5px; color: var(--ink-2); margin: 0; }

.proofgrid { display: grid; gap: 14px; margin: 28px auto 0; max-width: var(--wrap); }
@media (min-width: 700px)  { .proofgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .proofgrid { grid-template-columns: repeat(3, 1fr); } }
.proofgrid img { border-radius: 12px; border: 1px solid var(--line); cursor: zoom-in; width: 100%; }

.lightbox { position: fixed; inset: 0; z-index: 120; display: none; background: rgba(0,0,0,.92); }
.lightbox[data-open="true"] { display: flex; align-items: center; justify-content: center; padding: 20px; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 80px); border-radius: 10px; }
.lightbox__close {
  position: absolute; top: 14px; right: 14px; width: 46px; height: 46px;
  background: rgba(255,255,255,.1); border: 0; border-radius: 10px; color: #fff;
  font-size: 26px; cursor: pointer;
}

/* ---------- disclosure + footer ---------- */
.disclaim { max-width: 760px; margin: 30px auto 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.foot { border-top: 1px solid var(--line); background: #04070d; padding: 34px 0; color: var(--ink-3); font-size: 13.5px; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 12px; }
.foot a { color: var(--ink-2); }

/* ---------- config warning (never shown to real traffic) ---------- */
[data-config-warning] { display: none; }
[data-config-warning][data-show="true"] {
  display: block; background: #2e2408; color: #f0d9a4; border-bottom: 1px solid #4d3d10;
  padding: 11px 16px; font-size: 13.5px; text-align: center;
}

/* ---------- entrance ---------- */
[data-reveal] { opacity: 0; transform: translateY(9px); transition: opacity .45s ease, transform .45s ease; }
[data-reveal][data-shown="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .qual__opt, .faq summary::after { transition: none; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .wrap { padding: 0 20px; }
  .band { padding: 52px 0; }
  .hero { padding: 32px 0 6px; }
  .logo__text small { display: none; }
  .masthead__meta { font-size: 12.5px; }
  .modal__dialog { padding: 22px 20px 20px; border-radius: 14px; }
  .story__panels { grid-template-columns: 1fr 1fr; }
  .compare th, .compare td { padding: 12px 8px; font-size: 14.5px; }
  .teach li { padding: 20px 18px 20px 56px; }
}

/* ==========================================================================
   SMS CONSENT BLOCK
   The legal disclosure must stay legible. It is never shrunk to fit the form
   into one screen, and it is never collapsed behind a "read more".
   ========================================================================== */

.sms { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.sms__opt {
  display: flex; align-items: flex-start; gap: 12px; padding: 15px;
  border: 1px solid #3a3a3a; border-radius: 11px; background: var(--field);
  cursor: pointer; font-size: 15.5px; line-height: 1.45;
  transition: border-color .12s ease, background-color .12s ease;
}
.sms__opt:hover { border-color: #4d4d4d; }
.sms__opt input { margin: 2px 0 0; flex: none; width: 19px; height: 19px; accent-color: var(--gold); }
.sms__opt:has(input:checked) { border-color: var(--gold); background: #2f2a1d; }
.sms__opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.sms__fields { margin-top: 12px; }
.sms__row { display: flex; gap: 9px; }
.sms__cc  { flex: 0 0 40%; max-width: 172px; }
.sms__num { flex: 1 1 auto; min-width: 0; }

.sms__legal { margin: 11px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.sms__legal strong { color: var(--ink-2); }
.sms__legal a { color: var(--ink-2); }
.sms--invalid .sms__num { border-color: var(--err); }

/* ---------- legal pages ---------- */
.section { padding: 56px 0; }
.wrap--read { max-width: 760px; }
.stack > * + * { margin-top: 18px; }
.rule { border: 0; border-top: 1px solid var(--line); }
.rule--gold { border-top-color: rgba(221,184,108,.4); }
body[data-page="legal"] h3 { margin-top: 30px; font-size: 20px; }
body[data-page="legal"] ul { color: var(--ink-2); padding-left: 22px; }
body[data-page="legal"] li { margin-bottom: 9px; }

/* ==========================================================================
   POPUP DENSITY
   Tightened so the whole form lands on one phone screen without scrolling.
   WHITESPACE ONLY - no type is shrunk. The question, the radio labels and the
   consent control all stay at their readable sizes, because shrinking those to
   win a scroll is how a form becomes unreadable and a disclosure becomes
   unenforceable.
   ========================================================================== */

.modal__dialog { padding: 22px 24px 20px; }
.modal__when   { margin-bottom: 16px; }
.modal .field  { margin-bottom: 13px; }
.qual          { margin-bottom: 14px; }
.qual__legend  { margin-bottom: 9px; }
.qual__options { gap: 8px; }
.qual__opt     { padding: 13px 14px; }
.qual__help    { margin-top: 8px; }
.sms           { margin-bottom: 14px; }
.sms__opt      { padding: 13px 14px; }
.modal__foot   { margin-top: 12px; }

/* ==========================================================================
   POPUP - REFERENCE-MATCHED
   Placeholder-only fields, phone always required, consent by submission with
   the disclosure under the button. Overrides the earlier label+checkbox build.
   ========================================================================== */

.modal__dialog { padding: 30px 28px 26px; max-width: 540px; }
.modal__title  { font-size: 27px; margin-bottom: 5px; }
.modal__when   { margin-bottom: 20px; }

.modal .field  { margin-bottom: 14px; }
.modal .field__input {
  min-height: 62px; padding: 18px 20px; font-size: 17px;
  background: #2b2b2b; border: 1px solid #3a3a3a; border-radius: 12px;
}
.modal .field__input::placeholder { color: #9a9a9a; opacity: 1; }

.modal .qual { margin: 0 0 16px; }
.modal .qual__legend { font-size: 14.5px; color: var(--ink-2); margin-bottom: 9px; }
.modal .qual__opt { padding: 13px 15px; font-size: 15px; background: #2b2b2b; border-color: #3a3a3a; }

.modal .btn {
  max-width: none; min-height: 66px; border-radius: 12px;
  font-size: 22px; letter-spacing: -.015em; margin-top: 2px;
}

.modal__legal {
  margin: 15px 0 0; font-size: 12.5px; line-height: 1.5;
  color: #9a9a9a; text-align: center;
}
.modal__legal strong { color: #b8b8b8; font-weight: 600; }
.modal__legal a { color: #9a9a9a; }

@media (max-width: 640px) {
  .modal__dialog { padding: 26px 20px 22px; }
  .modal .field__input { min-height: 58px; padding: 16px 17px; }
  .modal .btn { min-height: 62px; font-size: 20px; }
}

/* ==========================================================================
   STICKY CTA - CENTERING AND CLEARANCE

   Two fixes:

   1. `margin: 0 auto` cannot center an inline-flex element. .btn is
      inline-flex, so the sticky button was pinned left on wide screens no
      matter what max-width it carried. Centering has to come from the bar.

   2. The bar is fixed, so it sits ON TOP of whatever is under it. Without
      reserved space it permanently covers the last ~70px of the page, which
      on this page is the legal footer. Reserve the height.
   ========================================================================== */

.sticky { display: flex; justify-content: center; }
.sticky .btn { margin: 0; }

.foot { padding-bottom: 34px; }

/* Only reserve the space where the bar can actually appear. It is hidden at
   the very bottom of the page now, but a visitor can sit mid-page with the
   bar up, and the band above the footer must not be clipped either. */
@media (max-width: 900px) {
  .foot { padding-bottom: 96px; }
}

/* ==========================================================================
   [hidden] MUST WIN.

   The UA stylesheet sets [hidden]{display:none}, but ANY author rule that sets
   display beats it. `.statuspill{display:inline-block}`, `.ticket__row{display:
   flex}` and `.cal a{display:inline-flex}` all did, which meant the
   confirmation page rendered "REGISTRATION CONFIRMED", a VIP session row and a
   personal join-link button to a visitor with no registration at all.

   That is a false claim about someone's status, not a cosmetic slip, so this
   rule is deliberately !important. Visibility on that page is a correctness
   boundary, and it is toggled through the hidden property in JS.
   ========================================================================== */

[hidden] { display: none !important; }

/* The VIP page carries FOUR inclusions, not three. A 3-column grid leaves the
   fourth card orphaned on its own row. Two-by-two balances and keeps each card
   wide enough for its copy. */
@media (min-width: 800px) { .incl { grid-template-columns: 1fr 1fr; } }

/* SMS consent checkbox. One compact row above the submit button - the
   disclosure it governs sits directly beneath the button, so the two read as
   one block without the checkbox dragging the form taller. */
.smsbox {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; margin: 0 0 14px;
  border: 1px solid #3a3a3a; border-radius: 11px; background: var(--field);
  cursor: pointer; font-size: 15px; line-height: 1.4;
  transition: border-color .12s ease, background-color .12s ease;
}
.smsbox:hover { border-color: #4d4d4d; }
.smsbox input { flex: none; width: 19px; height: 19px; accent-color: var(--gold); margin: 2px 0 0; }
/* The marketing disclosure lives INSIDE the label so the box and its terms are
   one consent artifact: what the person ticked is what they read. Kept
   visually secondary, never hidden. */
.smsbox__fine { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--muted, #a7a7a7); }
.smsbox:has(input:checked) { border-color: var(--gold); background: #2f2a1d; }
.smsbox:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ==========================================================================
   TEACHING CARDS - single column + number contrast

   1. Stacked, not 2x2. Four short cards side by side read as a grid of
      fragments; stacked they read as a sequence, which is what they are.

   2. The number badges were rendering LIGHT GREY ON GOLD. `.teach__n` set the
      dark ink correctly, but `.teach span` - a class-plus-element selector -
      is more specific than a bare class and silently overrode it. The badge is
      a <span>, so it lost. Raising specificity fixes it at the source rather
      than reaching for !important.
   ========================================================================== */

.teach { grid-template-columns: 1fr; max-width: 820px; }
@media (min-width: 800px) { .teach { grid-template-columns: 1fr; } }

.teach li .teach__n {
  color: var(--gold-ink);
  background: var(--gold);
  width: 28px; height: 28px; font-size: 14.5px;
}

/* ==========================================================================
   HOST BLOCK - photo left, bio right
   Mirrors the reference layout: a single strong portrait carrying the name,
   with the biography beside it rather than under a headline. Stacks on mobile
   with the photo first, so the person arrives before the claims about him.
   ========================================================================== */

.host { display: grid; gap: 30px; align-items: start; margin-top: 32px; text-align: left; }
@media (min-width: 900px) { .host { grid-template-columns: 380px 1fr; gap: 44px; } }

.host__media img { border-radius: 14px; border: 1px solid var(--line); width: 100%; }
.host__name {
  font-family: var(--f-head); font-size: 24px; font-weight: 800;
  margin: 14px 0 2px; letter-spacing: -.02em;
}
.host__role { font-size: 14px; color: var(--ink-3); margin: 0; }

.host__bio p { font-size: 17px; line-height: 1.65; margin: 0 0 16px; color: var(--ink-2); }
.host__bio p:first-child {
  font-family: var(--f-head); font-size: 22px; font-weight: 700;
  color: var(--ink); line-height: 1.3; margin-bottom: 18px;
}
.host__bio b { color: var(--ink); font-weight: 700; }

@media (max-width: 640px) {
  .host__bio p { font-size: 16.5px; }
  .host__bio p:first-child { font-size: 20px; }
}

/* ==========================================================================
   WEBINAR STATE MACHINE
   --------------------------------------------------------------------------
   One page, three states. Only the blocks belonging to the current state are
   in the layout; the rest are removed with display:none rather than hidden
   with opacity, so a screen reader and a keyboard never reach a CTA for a
   state the visitor is not in.

   The default in the markup is `upcoming`, which is also what a visitor with
   no JavaScript gets. That is the deliberate choice: showing a registration
   page when the state is unknown is recoverable, and telling someone the
   workshop has ended when it has not is not.
   ========================================================================== */

html[data-webinar-state="upcoming"] [data-when]:not([data-when~="upcoming"]),
html[data-webinar-state="live"]     [data-when]:not([data-when~="live"]),
html[data-webinar-state="ended"]    [data-when]:not([data-when~="ended"]) {
  display: none !important;
}

/* The live badge. One small moving element on the whole page, and it earns it:
   it is the single fastest signal that the event status changed. Motion stays
   at the trust-first setting this funnel is pinned to. */
.eyebrow--live {
  color: #ffb4b4;
  border-color: rgba(255, 120, 120, .38);
  background: rgba(255, 90, 90, .10);
  display: inline-flex;
  align-items: center;
  gap: .5em;
}

.live-dot {
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: #ff5a5a;
  box-shadow: 0 0 0 0 rgba(255, 90, 90, .55);
  animation: live-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  flex: none;
}

@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 90, 90, .55); }
  70%  { box-shadow: 0 0 0 .55em rgba(255, 90, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0); }
}

/* A pulsing dot is decoration, not information: the word "Live now" sits
   right next to it and carries the meaning on its own. */
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

/* The live CTA reads as the same button, not a different design. Only the
   urgency changes, and it changes once. */
.btn--live { position: relative; }

.hero__sub[data-live-lateness] {
  font-weight: 600;
  color: var(--gold-soft);
}

/* The ended-state recap. Plain list, no icons: it is a reminder of what they
   already wanted, not a feature grid. */
.missed {
  max-width: var(--prose);
  margin: 1.4rem auto 1.8rem;
  padding: 0 0 0 1.1em;
  color: var(--ink);
}
.missed li { margin: .55em 0; line-height: 1.55; }

/* ==========================================================================
   ENCORE PAGE
   --------------------------------------------------------------------------
   The encore has two states and the page only ever shows one. Same mechanism
   as the state machine above: the block that does not apply leaves the layout
   entirely, so nothing offers a session picker on a page with no sessions.
   ========================================================================== */

html[data-encore-mode="lookup"]   [data-mode]:not([data-mode~="lookup"]),
html[data-encore-mode="picked"]   [data-mode]:not([data-mode~="picked"]),
html[data-encore-mode="sessions"] [data-mode]:not([data-mode~="sessions"]),
html[data-encore-mode="closed"]   [data-mode]:not([data-mode~="closed"]) {
  display: none !important;
}

/* A session is a target, not a line of text. Whole row is the hit area, and
   it clears 44px on a phone. */
.session {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1rem;
  margin: 0 0 .55rem;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.session:hover { border-color: var(--gold); }
.session:focus-within { outline: 3px solid var(--gold-soft); outline-offset: 2px; }
.session input { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; flex: none; }
.session:has(input:checked) { border-color: var(--gold); background: rgba(221, 184, 108, .07); }

.session__text { display: flex; flex-direction: column; gap: .12rem; line-height: 1.35; }
.session__text small { color: var(--muted, #a7b0c0); font-size: .84em; }
.session__next {
  font-style: normal;
  font-size: .7em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The room-recovery card. Deliberately quiet: it is a repair for a small
   group, not a competing call to action on a confirmation page. */
.recover {
  max-width: var(--cta);
  margin: 26px auto 0;
  padding: 1.1rem 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  text-align: left;
}
.recover__title { font-family: var(--f-head); font-size: 1.06rem; margin: 0 0 .3rem; }
.recover__form { margin-top: .7rem; }

/* Breakout video slot. Only ever visible when a real recording is configured,
   so there is no empty player state to style. */
.qa__video {
  position: relative; padding-top: 56.25%; margin: -22px -22px 16px;
  border-radius: 14px 14px 0 0; overflow: hidden; background: #000;
}
.qa__video > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.qa__dur { font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 8px; }
.qa__card[data-has-video="true"] { padding-top: 0; overflow: hidden; }
.qa__card[data-has-video="true"] h3 { padding: 0 22px; }
.qa__card[data-has-video="true"] p { padding: 0 22px 4px; }

/* The turn in the story gets its own weight. One beat, not a paragraph. */
.host__bio .host__beat {
  font-family: var(--f-head); font-size: 20px; font-weight: 700;
  color: var(--gold); line-height: 1.35; margin: 0 0 18px;
}

/* ==========================================================================
   NUMBERS IN THE HERO SUB

   These had no rule at all, so they inherited the body grey and read as bold
   grey on grey. The two figures carrying the whole subhead - 91 days and 150+
   people - now take the same gold the headline uses, so a skimmer gets the
   proof without reading the sentence.

   Gold rather than the white used in the host bio: the hero is the one place
   on the page competing with nothing, so it can take the stronger treatment.
   ========================================================================== */

.hero__sub b {
  color: var(--gold);
  font-weight: 700;
}

/* ==========================================================================
   STUDENT PROOF ROW
   Real screenshots, so the image is the hero of each card and the caption
   carries the context it needs to be honest. Phone screenshots are portrait,
   so the row gives each one a tall frame rather than cropping the numbers out.
   ========================================================================== */

.proofrow { display: grid; gap: 18px; margin: 30px auto 0; max-width: var(--wrap); }
@media (min-width: 820px) { .proofrow { grid-template-columns: repeat(3, 1fr); } }

.proofcard {
  margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
}
.proofcard img {
  width: 100%; height: 300px; object-fit: cover; object-position: top center;
  border-bottom: 1px solid var(--line); background: #000; cursor: zoom-in;
}
@media (min-width: 820px) { .proofcard img { height: 340px; } }

.proofcard figcaption { padding: 18px 20px 20px; text-align: left; }
.proofcard figcaption b {
  display: block; font-family: var(--f-head); font-size: 17px; font-weight: 700;
  color: var(--ink); line-height: 1.3; margin-bottom: 8px;
}
.proofcard figcaption span {
  display: block; font-size: 14px; line-height: 1.55; color: var(--gold-soft);
}


/* The hero banner source is now landscape 16:9 (nick-hero.jpg), so it needs no
   crop. The previous rule existed only to stop a 1050x1400 portrait rendering
   1200px tall, and applying it here would crop a composed image for no reason. */
.shot--wide img { aspect-ratio: auto; object-fit: fill; height: auto; }
@media (max-width: 640px) { .shot--wide img { aspect-ratio: auto; } }

/* Named mechanisms carry the gold so they read as Nick's, not as generic
   curriculum. The plain-copy cards deliberately do not, which is what keeps
   the named ones feeling owned rather than decorative. */
.teach b em { font-style: normal; color: var(--gold); }


/* Bold INSIDE a teach body must stay inline. `.teach b` is display:block for
   the card title, which turned every emphasised number in the body into its own
   line and made the proof bullet unreadable. */
.teach li span b { display: inline; font-weight: 700; color: var(--ink); }

/* The figure in the section headline takes the gold, same as the hero H1. */
.band h2 strong { color: var(--gold); font-weight: 800; }

/* ==========================================================================
   /vip — 2026-09-09. Competitor-format rebuild.

   The SECTION FORMAT is cloned from the reference bridge page (perforated
   ticket cards, a full-bleed contrast band for the stack, two-line CTA with a
   buyer counter under every one, cold/OR/prepared dashed boxes, highlighter
   headline treatment). Every colour is Nick's existing token - no new palette.
   ========================================================================== */

/* ---------- headline treatments ---------- */
.wait {
  font-family: var(--f-head); font-weight: 800; font-size: 54px; line-height: .95;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px;
}
@media (min-width: 700px) { .wait { font-size: 78px; } }
.wait__sub { font-family: var(--f-head); font-weight: 800; font-size: 21px; line-height: 1.25; color: var(--ink); margin: 0 0 20px; }
@media (min-width: 700px) { .wait__sub { font-size: 27px; } }

/* Gold highlighter behind a phrase. Dark ink ON gold, same as .btn. */
.hl {
  background: var(--gold); color: var(--gold-ink);
  padding: .04em .26em; border-radius: 5px; box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* Keep the highlighted phrase on one line. Without this the line break can
     fall inside it and render two separate boxes instead of one. */
  white-space: nowrap;
}
/* Gold underline under a phrase. */
.ulg { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.gd { color: var(--gold); }

/* ---------- perforated ticket card (the reference's white card) ---------- */
.tcard {
  position: relative; max-width: 620px; margin: 44px auto 0;
  background: #f5f2ec; color: #14130f;
  /* Perforated stamp edge, same as the reference: the dashes are the CARD
     colour and background-clip stops the fill painting under them, so the dark
     page shows through the gaps. A dark dashed border reads as an inner rule
     instead and loses the effect entirely. */
  border: 3px dashed #f5f2ec; background-clip: padding-box;
  border-radius: 18px;
  padding: 42px 26px 30px; text-align: center;
}
@media (min-width: 700px) { .tcard { padding: 46px 40px 34px; } }
.tcard__badge {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--gold-ink);
  font-family: var(--f-body); font-size: 14px; font-weight: 700;
  padding: 8px 20px; border-radius: 999px; white-space: nowrap;
}
.tcard h2 { font-family: var(--f-head); font-size: 25px; font-weight: 800; line-height: 1.25; margin: 0 0 20px; color: #14130f; }
@media (min-width: 700px) { .tcard h2 { font-size: 31px; } }
.tcard h2 .gd { color: #9a7524; }
.tcard h2 .ulg { text-decoration-color: var(--gold); }
.tcard h2 .hl { background: var(--gold); color: var(--gold-ink); }
.tcard p { font-size: 16.5px; line-height: 1.55; font-weight: 600; color: #14130f; margin: 0 0 15px; }
.tcard p:last-of-type { margin-bottom: 0; }
.tcard p b { color: #14130f; }
.tcard .joincount { color: #55503f; }
.tcard .joincount b { color: #7a5e22; }
.tcard--left { text-align: left; }

/* ---------- full-bleed contrast band for the stack ---------- */
.band--gold { background: var(--gold); color: var(--gold-ink); }
.band--gold h2 { color: var(--gold-ink); }

/* Stack card sitting on the gold band. */
.getcard {
  max-width: 620px; margin: 0 auto 22px; background: #f5f2ec; color: #14130f;
  border-radius: 18px; overflow: hidden; text-align: left;
}
.getcard__top { position: relative; background: var(--card); padding: 0; }
.getcard__label {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--gold); color: var(--gold-ink);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  padding: 7px 16px; border-radius: 999px;
}
/* Placeholder band where the reference runs a photo. Renders as flat tone
   rather than a fake image until Nick supplies real artwork. */
.getcard__art {
  height: 132px;
  /* The reference runs a photo here. Nick has no artwork for these yet, so
     this is a dark plate: it reads as a deliberate header rather than a
     missing image, and the gold label pill stays legible on it, which it does
     not when the plate is also gold. Swap for a real image when one exists. */
  background: linear-gradient(135deg, #0d1420, #1b2436 60%, #101827);
}
.getcard__body { padding: 24px 24px 26px; }
@media (min-width: 700px) { .getcard__body { padding: 28px 32px 32px; } }
.getcard__title { font-family: var(--f-head); font-size: 23px; font-weight: 800; line-height: 1.2; margin: 0 0 12px; color: #14130f; }
/* The reference runs its whole card body at weight 600 in one saturated ink,
   and differentiates the promise and the parentheticals by ITALIC ALONE, never
   by dropping the colour. Ours ran the body at 400 and faded the parenthetical
   to #6b6455, which made the most curiosity-heavy half of every bullet the
   faintest text on the card. Same ink, same weight, italic only. */
.getcard__promise { font-size: 16.5px; line-height: 1.5; font-style: italic; font-weight: 600; color: #14130f; margin: 0 0 18px; }
.getcard__lead { font-size: 16.5px; font-weight: 800; color: #14130f; margin: 0 0 14px; }
.getcard__close { margin: 18px 0 0; font-size: 16px; line-height: 1.5; font-weight: 600; color: #14130f; }
.getcard__close b { color: #14130f; }

/* Check-badge fascination bullets. */
.fascin { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.fascin li { position: relative; padding-left: 34px; font-size: 16.5px; line-height: 1.5; font-weight: 600; color: #14130f; }
.fascin li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--gold); color: var(--gold-ink);
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
}
/* Italic ONLY. Do not reintroduce a lighter colour here. */
.fascin li i { font-style: italic; color: inherit; }
.fascin li b { color: #14130f; font-weight: 800; }

/* ---------- cold / OR / prepared ---------- */
.vsbox { max-width: 620px; margin: 26px auto 0; border-radius: 16px; padding: 24px; text-align: left; }
.vsbox--cold { border: 2px dashed rgba(255,139,139,.65); background: rgba(255,90,90,.06); }
.vsbox--warm { border: 2px dashed rgba(221,184,108,.75); background: var(--card-2); }
.vsbox__head { font-family: var(--f-body); font-size: 16.5px; font-weight: 700; line-height: 1.4; margin: 0 0 16px; color: var(--ink); }
.vsbox--cold .vsbox__head em { font-style: normal; color: var(--err); }
.vsbox--warm .vsbox__head em { font-style: normal; color: var(--gold); }
.vsbox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.vsbox li { position: relative; padding-left: 34px; font-size: 16.5px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.vsbox li::before {
  position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 6px;
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
}
.vsbox--cold li::before { content: "\2715"; background: rgba(255,90,90,.16); color: var(--err); }
.vsbox--warm li::before { content: "\2713"; background: var(--gold); color: var(--gold-ink); border-radius: 50%; }
/* Italic ONLY, never a lighter colour. Same rule as the cream cards. */
.vsbox li i { font-style: italic; color: inherit; }
.orpill {
  display: inline-block; margin: 18px auto 0; background: var(--gold); color: var(--gold-ink);
  font-family: var(--f-head); font-weight: 800; font-size: 15px; letter-spacing: .08em;
  padding: 6px 16px; border-radius: 7px;
}

/* ---------- value box ---------- */
.valuebox { margin: 26px auto 0; text-align: center; }
.valuebox__was { font-family: var(--f-head); font-size: 24px; font-weight: 800; color: #9a7524; margin: 0 0 12px; }
.valuebox__was s { text-decoration-thickness: 2px; }
.valuebox__now { display: inline-block; font-family: var(--f-head); font-size: 30px; font-weight: 800; line-height: 1.1; }
@media (min-width: 700px) { .valuebox__was { font-size: 28px; } .valuebox__now { font-size: 38px; } }

/* ---------- two-line CTA + buyer counter ----------
   SCOPED: .btn is shared with index, thank-you and encore. An unscoped height
   and padding override would resize every button on the funnel. */
.p-vip .btn { height: auto; padding-top: 14px; padding-bottom: 14px; max-width: 440px; }
.p-vip .btn .yes { display: block; line-height: 1.2; }
.p-vip .btn .yes b { display: block; font-size: 18px; font-weight: 800; }
.p-vip .btn .yes small { display: block; font-size: 13px; font-weight: 600; opacity: .82; margin-top: 2px; }
@media (min-width: 480px) { .p-vip .btn .yes b { font-size: 20px; } .p-vip .btn .yes small { font-size: 13.5px; } }

/* Buyer counter. Hidden unless config supplies a REAL number. */
.joincount { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-3); }
.joincount b { font-family: var(--f-head); font-size: 17px; font-weight: 800; color: var(--gold); }
.joincount i { font-style: italic; }

/* ---------- secure payment strip ---------- */
.secure { margin: 16px 0 0; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: #6b6455; }
.secure span { color: #9a7524; }

/* SCOPED TO /vip ONLY via body.p-vip. reg.css is shared with index, thank-you
   and encore, so an unscoped .hero/.hero__sub override would resize those too.
   The reference hero fits WAIT through the decline inside one screen; the
   global h1 clamp tops out at 64px and pushed this hero past two screens. */
.p-vip .hero { padding: 40px 0 8px; }
.p-vip .hero-w { max-width: 620px; }
.p-vip .hero h1 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.22; margin-bottom: 18px; }

/* Each headline block wraps and balances on its own. text-wrap:balance is what
   stops a 2-3 line heading stranding its last line as a short orphan; applied
   to the h1 as a whole it would balance across both blocks and help neither. */
.p-vip .hline { display: block; text-wrap: balance; }
.p-vip .hline + .hline { margin-top: 26px; }
.p-vip .wait__sub,
.p-vip .band h2,
.p-vip .tcard h2 { text-wrap: balance; }
/* pretty, not balance, for body: it only prevents the single-word last line
   and leaves the rest of the paragraph ragged-right as normal. */
.p-vip .hero__sub,
.p-vip .prose p,
.p-vip .lede { text-wrap: pretty; }

/* Match the reference's narrower mobile measure. At 375px the headline lines
   ran long enough to wrap unevenly; 344 gives the same rhythm it has. */
@media (max-width: 480px) {
  .p-vip .hero-w { max-width: 344px; }
  .p-vip main .wrap { max-width: 344px; }
}
/* The hero subhead was --ink-2 at 400 weight, which reads as body copy that has
   receded into the background. The reference runs its equivalent at full white
   and 600, so it reads as a subhead. Matching that in Nick's palette: --ink is
   his near-white (#f7f5ef on #060911 is ~17:1), not pure white. */
.p-vip .hero__sub {
  color: var(--ink); font-weight: 600;
  font-size: clamp(16.5px, 1.7vw, 19px); line-height: 1.5;
  margin-bottom: 16px; max-width: 560px;
}
.p-vip .band h2 { font-size: clamp(23px, 3vw, 33px); line-height: 1.24; }
.p-vip .lede { font-size: clamp(16px, 1.7vw, 18.5px); }
.p-vip .prose { max-width: 560px; }
.p-vip .prose p { margin: 0 0 15px; font-size: 16.5px; line-height: 1.6; }

/* The reference runs a ~550px content column the whole way down. Nick's shared
   .wrap is 1120px, which let the VIP headlines run as single long lines. */
.p-vip main .wrap { max-width: 640px; }
.p-vip .band { padding-left: 16px; padding-right: 16px; }

/* The countdown sits inside the cream ticket card on /vip. .count__unit keeps
   its dark tile, but .count__unit b inherits the card's near-black ink, which
   rendered the digits invisible against that tile. */
.p-vip .tcard .count__unit b { color: var(--gold); }
.p-vip .tcard .count__unit span { color: var(--ink-3); }
.p-vip .tcard .count__label { color: #55503f; }

/* Dark-section body copy. Measured on the reference: EVERY body element there
   is pure white at weight 600 - cold bullets, prepared bullets, the <em> inside
   them, the one-line paragraphs. Ours ran --ink-2 (#c4c4ca) and --ink-3
   (#8d93a1), which is why the same copy read flat next to his. Nick's --ink
   (#f7f5ef) is his near-white, so this stays inside his palette. */
.p-vip .prose p,
.p-vip .lede { color: var(--ink); font-weight: 600; }
.p-vip .prose p i,
.p-vip .prose p em,
.p-vip .lede i { color: inherit; }
.p-vip .joincount { color: var(--ink-2); }

/* ==========================================================================
   STICKY NAV
   Carries a CTA rather than links. Sticky so the register button is reachable
   at any scroll depth without the reader hunting for one.
   ========================================================================== */

.masthead[data-nav] {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6,9,17,.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}
.masthead__right { display: flex; align-items: center; gap: 18px; }

.btn--nav {
  width: auto; max-width: none; min-height: 44px;
  padding: 11px 20px; font-size: 15.5px; border-radius: 10px;
}

@media (max-width: 720px) {
  /* The date already sits in the hero on mobile, so the bar keeps the button
     and drops the duplicate. */
  .masthead__right .masthead__meta { display: none; }
  .btn--nav { min-height: 40px; padding: 9px 15px; font-size: 14px; }
  .logo__text { font-size: 14.5px; }
}

/* The resolved room link. Rendered on success, above the redirect, so a
   blocked or slow navigation still leaves something to press. */
.btn--room { display: block; margin-top: .7rem; text-align: center; text-decoration: none; }

/* ==========================================================================
   REGISTRATION PAGE, MOBILE-FIRST PASS (Jake, 2026-10-19)
   Scoped to .p-reg so the confirmation, VIP and encore pages are untouched,
   except the logo mark, which comes off every page.
   ========================================================================== */

.logo__mark { display: none; }

/* Section labels: plain text, not outlined pills. */
.p-reg .eyebrow {
  border: 0; border-radius: 0; padding: 0; margin-bottom: 14px;
  font-size: 12.5px; letter-spacing: .12em;
}

/* Hero, phone first. */
.p-reg .hero { padding-top: 34px; }
.p-reg .hero h1 { font-size: clamp(30px, 8.4vw, 60px); line-height: 1.08; margin-bottom: 16px; }
.p-reg .hero__sub { font-size: 16.5px; line-height: 1.55; max-width: 640px; margin-bottom: 22px; }
.p-reg .hero__sub em { font-style: normal; color: #ffffff; font-weight: 800; }
.p-reg .hero__sub b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 700px) { .p-reg .hero__sub { font-size: 19.5px; } }

.p-reg .when {
  margin: 0 auto 24px; padding: 14px 0; max-width: 520px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.p-reg .when__label {
  display: block; margin-bottom: 4px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.p-reg .when .hero__meta { margin: 0; font-size: 17px; gap: 8px; }
.p-reg .when .hero__local { margin-top: 2px; }

/* Who it is for: a plain line, not a boxed callout. */
.p-reg .fit {
  max-width: 520px; margin: 22px auto 0;
  font-size: 15.5px; line-height: 1.55; color: var(--ink-2);
}
.p-reg .fit b { display: block; color: var(--ink); font-family: var(--f-head); font-size: 16.5px; margin-bottom: 2px; }

/* Student screenshots: show the whole image at every width, never crop. */
.p-reg .proofcard img { height: auto; object-fit: contain; }
@media (min-width: 820px) {
  .p-reg .proofrow { align-items: start; }
  .p-reg .proofcard img { height: 420px; }
}
@media (max-width: 819px) { .p-reg .proofcard img { max-height: 620px; } }

/* The masthead's "padding: 15px 0" overrode the .wrap side gutter, so between
   641px and the 1120px max width the logo and button sat on the screen edge. */
@media (min-width: 641px) { .masthead__inner { padding-left: 24px; padding-right: 24px; } }
.nowrap { white-space: nowrap; }
/* Date block now sits above the H1. */
.p-reg .hero .when { margin: 0 auto 26px; }
/* What you'll walk away with: centered outcome lines, no boxes or number badges. */
.p-reg .outcomes { list-style: none; padding: 0; margin: 30px auto 0; max-width: 560px; display: grid; gap: 26px; text-align: center; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.p-reg .outcomes b { display: block; margin-bottom: 4px; font-family: var(--f-head); font-size: 19px; line-height: 1.3; color: var(--ink); }
.p-reg .outcomes li + li::before { content: ""; display: block; width: 36px; height: 2px; margin: 0 auto 26px; background: var(--gold); opacity: .6; }

/* The opportunity: a bigger section label (Jake, 2026-10-20). */
.p-reg .eyebrow--lg { font-size: 17px; letter-spacing: .14em; margin-bottom: 16px; }
@media (min-width: 768px) { .p-reg .eyebrow--lg { font-size: 19px; } }

/* Host block, Will Rivera shape (Jake, 2026-10-20): a badge and three stat
   chips over the photo. */
.host__photo { position: relative; margin: 0; }
.host__photo img { display: block; }
.host__badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(6,9,17,.82); color: var(--gold); border: 1px solid rgba(221,184,108,.5);
  font-family: var(--f-head); font-size: 14px; font-weight: 800; letter-spacing: .01em;
  padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(6px);
}
.host__chips {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.host__chips li {
  background: rgba(6,9,17,.84); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: 10px 10px 9px; backdrop-filter: blur(6px);
}
.host__chips b { display: block; font-family: var(--f-head); font-size: 22px; font-weight: 800; color: var(--gold); line-height: 1.1; }
.host__chips span { display: block; font-size: 12px; line-height: 1.3; color: var(--ink-2); margin-top: 3px; }
.host__bio .host__fine { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
@media (max-width: 640px) {
  .host__chips b { font-size: 19px; }
  .host__chips span { font-size: 11px; }
}

/* The opportunity: bigger, brighter explanations so they read at a glance
   (Jake, 2026-10-20). */
.p-reg .outcomes { max-width: 680px; gap: 34px; font-size: 19px; line-height: 1.6; color: var(--ink); }
.p-reg .outcomes b { font-size: 25px; font-weight: 800; color: var(--gold); margin-bottom: 8px; letter-spacing: -.01em; }
.p-reg .outcomes li + li::before { width: 44px; margin-bottom: 34px; }
@media (max-width: 640px) {
  .p-reg .outcomes { font-size: 18px; gap: 30px; }
  .p-reg .outcomes b { font-size: 22px; }
}

/* Host photo: no gold on the picture (Jake, 2026-10-20). */
.host__badge { color: var(--ink); border-color: rgba(255,255,255,.18); }
.host__chips b { color: var(--ink); }

/* Date block a size up (Jake, 2026-10-20). */
.p-reg .when__label { font-size: 15px; }
.p-reg .when .hero__meta { font-size: 21px; gap: 10px; }
.p-reg .when .hero__local { font-size: 15.5px; margin-top: 4px; }
@media (max-width: 640px) {
  .p-reg .when .hero__meta { font-size: 19px; }
}
@media (max-width: 640px) {
  .p-reg .when .hero__meta { flex-direction: column; align-items: center; gap: 2px; }
  .p-reg .when .hero__meta .dot { display: none; }
}

/* Animated jacket hero (Jake, 2026-10-20), sized per its INSTALL.txt:
   full width up to 900px, 638/441, never shorter than 460px (its phone
   layout is a fixed 460px stage). */
.shot--hero { max-width: 900px; margin: 34px auto 0; }
.shot--hero iframe {
  display: block; width: 100%; aspect-ratio: 638 / 441; min-height: 460px;
  border: 0; border-radius: 14px; background: transparent; overflow: hidden; color-scheme: normal;
}
/* Its phone layout is a fixed 490px stage (phone fit in the file). */
@media (max-width: 728px) { .shot--hero iframe { min-height: 490px; } }

/* Hero reassurance lines a size up, to match the date block (Jake, 2026-10-20). */
.p-reg .hero .reassure { font-size: 17px; }
.p-reg .fit { font-size: 18px; max-width: 600px; margin-left: auto; margin-right: auto; }
.p-reg .fit b { font-size: 20px; margin-bottom: 4px; }
.p-reg .credline { font-size: 17.5px; }
@media (max-width: 640px) {
  .p-reg .hero .reassure { font-size: 16px; }
  .p-reg .fit { font-size: 17px; }
  .p-reg .fit b { font-size: 19px; }
  .p-reg .credline { font-size: 16.5px; }
}