/* =====================================================================
   TechnoFunda ₹99 masterclass page. Tokens + rules: webinar/DESIGN.md
   Mobile-first. Only transform/opacity animate.
   ===================================================================== */

/* self-hosted fonts (SIL OFL), subset to this page's characters for speed.
   Bricolage Grotesque: opsz fixed at 36, wght 600-800. Geist: wght 400-600.
   Characters outside the subset fall back to the system font. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/bricolage-sub.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/bricolage-rupee.woff2") format("woff2");
  unicode-range: U+20B9;
}
@font-face {
  font-family: "Geist";
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/geist-sub.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/geist-rupee.woff2") format("woff2");
  unicode-range: U+20B9;
}

:root {
  --ink: #0b0f0a;
  --ink-2: #10160e;
  --surface: #161e14;
  --surface-2: #1d2719;
  --line: rgb(214 255 196 / .09);
  --line-2: rgb(214 255 196 / .16);
  --text: #eef4ea;
  --text-2: #b4bfae;
  --text-3: #8f9a8a;
  --accent: #8fe36a;
  --accent-hi: #a8f087;
  --accent-ink: #0c1a07;
  --accent-soft: rgb(143 227 106 / .12);
  --warn: #ff8a6b;

  --f-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --f-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Tamil", sans-serif;

  --r-card: 20px;
  --r-tile: 14px;
  --r-chip: 10px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 24px 60px -24px rgb(4 12 3 / .75);
  --wrap: 1180px;
  --gut: 20px;

  /* z-index scale */
  --z-grain: 1;
  --z-dock: 40;
  --z-toast: 45;
  --z-modal: 50;
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  /* keep focused elements clear of the sticky mobile dock */
  scroll-padding-bottom: 96px;
}

a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* fixed grain: never on a scrolling layer (pre-rendered tile, cheap to paint) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .22;
  background: url("../images/noise-128.png") repeat;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b, strong { font-weight: 600; color: var(--text); }
button { font: inherit; color: inherit; }

.ic {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: var(--z-modal);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gut) * 2);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.hl { color: var(--accent); }

/* ---------- type ---------- */
.h2 {
  font: 750 clamp(28px, 4.6vw, 48px)/1.06 var(--f-display);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.lede {
  margin-top: 14px;
  max-width: 58ch;
  color: var(--text-2);
  font-size: clamp(16px, 1.6vw, 18px);
  text-wrap: pretty;
}
.eyebrow {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fineprint {
  margin-top: 22px;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 9px var(--gut);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.topbar__sep { opacity: .45; }

/* ---------- CTA ---------- */
.cta-btn {
  --pad: 18px 26px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: var(--pad);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 650 17px/1.2 var(--f-body);
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .18) inset, 0 16px 34px -14px rgb(143 227 106 / .55);
  transition: transform .35s var(--ease), background-color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.cta-btn .ic { transition: transform .35s var(--ease); }
.cta-btn:hover { background: var(--accent-hi); transform: translateY(-2px); }
.cta-btn:hover .ic { transform: translateX(4px); }
.cta-btn:active { transform: translateY(1px) scale(.985); }
.cta-btn:focus-visible { outline-offset: 4px; border-radius: 999px; }
.cta-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .45), transparent);
  transform: translateX(-120%) skewX(-18deg);
}
.cta-btn--sm { min-height: 52px; font-size: 16px; --pad: 14px 22px; }
.cta-btn--lg { min-height: 64px; font-size: 18px; --pad: 20px 34px; }
.cta-btn--block { display: flex; width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .cta-btn::after { animation: sweep 4.8s var(--ease) 1.6s infinite; }
}
@keyframes sweep {
  0%, 70% { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(330%) skewX(-18deg); }
}

.cta-row {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cta-row--left { align-items: flex-start; }

.assure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  color: var(--text-2);
  font-size: 14px;
}
.cta-row--left .assure { justify-content: flex-start; }
.assure li { display: inline-flex; align-items: center; gap: 7px; }
.assure .ic { color: var(--accent); }

.seats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-chip);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}
.seats[hidden] { display: none; }

/* ---------- countdown ---------- */
.countdown[hidden] { display: none; }
.countdown__label {
  margin-bottom: 8px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}
.countdown__cells { display: flex; gap: 8px; }
.countdown__cells span {
  display: grid;
  justify-items: center;
  min-width: 60px;
  padding: 8px 6px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  background: var(--surface);
}
.countdown__cells b {
  font: 700 24px/1.05 var(--f-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.countdown__cells small {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.countdown--lg .countdown__label { text-align: center; }
.countdown--lg .countdown__cells { justify-content: center; }
.countdown--lg .countdown__cells span { min-width: 74px; padding: 12px 8px 10px; }
.countdown--lg .countdown__cells b { font-size: 34px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding: 28px 0 56px;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 85% 20%, rgb(143 227 106 / .16), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgb(143 227 106 / .07), transparent 70%);
}
.hero__grid { display: grid; gap: 40px; }
.hero__copy { display: grid; gap: 18px; justify-items: start; }

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}
.hero__chip .ic { color: var(--accent); }
.hero__chip-sep { opacity: .4; }

.hero__title {
  font: 800 clamp(28px, 4.6vw, 48px)/1.08 var(--f-display);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero__sub {
  max-width: 46ch;
  color: var(--text-2);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}

.hero__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
}
.hero__meta .ic { color: var(--accent); }

.offer {
  display: grid;
  gap: 14px;
  width: 100%;
  margin-top: 4px;
}
.offer__price { display: flex; align-items: baseline; gap: 10px; }
.offer__was { color: var(--text-3); font-size: 20px; font-weight: 500; }
.offer__now {
  font: 800 44px/1 var(--f-display);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.offer .cta-btn { width: 100%; }

.hero__visual { display: none; }

/* ---------- press ---------- */
.press {
  padding: 34px 0;
  border-block: 1px solid var(--line);
  background: var(--ink-2);
}
.press__title {
  margin-bottom: 20px;
  color: var(--text-3);
  font: 500 13px/1.4 var(--f-body);
  text-align: center;
}
.press__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px 34px;
}
.press__row img {
  width: auto;
  height: var(--h);
  max-width: 130px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .55;
  transition: opacity .3s ease;
}
.press__row li:hover img { opacity: .9; }

/* ---------- sections ---------- */
.sec { padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 9.6vw, 128px); }
/* skip rendering work for off-screen sections until they approach the viewport */
.sec, .final, .foot { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.sec--band { background: var(--ink-2); border-block: 1px solid var(--line); }
.sec__head { max-width: 860px; }
.sec__head--center { margin: 0 auto; text-align: center; }
.sec__head--center .lede { margin-inline: auto; }

/* pain */

.pain__bridge {
  text-align: center;
  margin: 20px 0 18px;
  font: 400 clamp(16px, 1.7vw, 20px)/1.4 var(--f-body);
  letter-spacing: -.02em;
}
.pain { display: grid; gap: 12px; counter-reset: pain; }
.pain__card {
  position: relative;
  padding: 22px 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: transform .4s var(--ease), border-color .3s ease;
}
.pain__card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.pain__card h3 {
  font: 650 19px/1.3 var(--f-body);
  letter-spacing: -.01em;
}
.pain__card h3::before {
  counter-increment: pain;
  content: counter(pain, decimal-leading-zero) ". ";
  color: var(--accent);
}
.pain__card p { margin-top: 8px; color: var(--text-2); }
.pain__close {
  margin: 40px auto 0;
  max-width: none;
  color: var(--text-2);
  font: 600 clamp(16px, 1.9vw, 22px)/1.4 var(--f-display);
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
}
.pain__close b { display: inline; color: var(--text); font-weight: 700; }

/* rule demo */
.demo { display: grid; gap: 14px; margin-top: 44px; }

.board__rows { display: grid; gap: 8px; }
.board__rows li {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-tile);
  background: var(--surface-2);
}
.board__rows b {
  font: 750 24px/1 var(--f-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.board__rows span { font-weight: 600; }
.board__rows em {
  padding: 5px 10px;
  border-radius: var(--r-chip);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
}

/* learn */
.learn { display: grid; gap: 36px; }
.learn__cta { margin-top: 26px; }
.steps { position: relative; display: grid; gap: 14px; }
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  border-radius: 2px;
  background: var(--line-2);
}
.steps::after {
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(var(--progress, 1));
  transition: transform .6s var(--ease);
}
.step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 4px 0 18px;
}
.step__ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--accent);
  font-size: 20px;
}
.step__k {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.step h3 {
  margin-top: 4px;
  font: 700 clamp(19px, 2vw, 23px)/1.25 var(--f-display);
  letter-spacing: -.02em;
}
.step p:not(.step__k) { margin-top: 8px; color: var(--text-2); max-width: 58ch; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tags li {
  padding: 4px 10px;
  border-radius: var(--r-chip);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

/* fit */
.fit { display: grid; gap: 14px; margin-top: 36px; }
.fit__col {
  padding: 26px 24px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
}
.fit__col--yes {
  border-color: rgb(143 227 106 / .28);
  background: linear-gradient(160deg, rgb(143 227 106 / .09), transparent 55%), var(--surface);
}
.fit__col h3 { font: 700 21px/1.2 var(--f-display); letter-spacing: -.02em; margin-bottom: 16px; }
.fit__col ul { display: grid; gap: 12px; }
.fit__col li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--text-2); }
.fit__col li .ic { margin-top: 3px; }
.fit__col--yes .ic { color: var(--accent); }
.fit__col--no .ic { color: var(--warn); }

/* host */
.host { display: grid; gap: 32px; align-items: center; }
.host__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  max-width: 460px;
}
.host__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.host__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgb(11 15 10 / .55));
}
.host__role { margin-top: 8px; color: var(--accent); font-weight: 600; }
.host__line { margin-top: 16px; color: var(--text-2); max-width: 54ch; font-size: 17px; }
.proof { display: grid; gap: 4px; margin-top: 24px; }
.proof li {
  display: grid;
  gap: 2px;
  padding: 14px 0 14px 18px;
  border-left: 2px solid var(--line-2);
}
.proof li b { font-weight: 600; }
.proof li span { color: var(--text-2); font-size: 15px; }
.host .cta-row { margin-top: 32px; }

/* proof rail */
.proof-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.proof-head .h2 { max-width: 22ch; }
.rail-nav { display: none; gap: 8px; }
.rail-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  transition: background-color .25s ease, transform .3s var(--ease), opacity .2s ease;
}
.rail-btn:hover:not(:disabled) { background: var(--surface-2); transform: translateY(-1px); }
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(62vw, 250px);
  gap: 12px;
  margin: 32px calc(var(--gut) * -1) 0;
  padding: 0 var(--gut) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.vcard {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  scroll-snap-align: start;
}
.vcard__btn {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.vcard__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.vcard__btn[hidden] { display: none; }
.vcard__btn:hover img { transform: scale(1.04); }
.vcard__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgb(11 15 10 / .7));
}
.vcard__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 24px;
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / .6);
  transition: transform .35s var(--ease);
}
.vcard__play .ic { fill: currentColor; stroke: none; margin-left: 3px; }
.vcard__btn:hover .vcard__play { transform: scale(1.08); }

.vcard iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* rail controls under the videos (phones/tablets); desktop uses the top-right arrows */
.rail-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.rail-dots { display: flex; align-items: center; gap: 4px; }
.rail-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.rail-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line-2);
  transition: transform .3s var(--ease), background-color .3s ease;
}
.rail-dot.is-on::before { background: var(--accent); transform: scaleX(2.2); }

.quotes { display: grid; gap: 12px; margin-top: 20px; }
.quotes[hidden] { display: none; }
.quote {
  padding: 22px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
}
.quote p { font-size: 17px; }
.quote footer { margin-top: 12px; color: var(--text-3); font-size: 14px; }
.quote footer b { color: var(--text); }

/* bonuses */
.bonus { display: grid; gap: 12px; margin-top: 32px; }
.bonus li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 20px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
}
.bonus .ic { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.bonus h3 { font: 700 18px/1.3 var(--f-display); }
.bonus p { margin-top: 4px; color: var(--text-2); font-size: 15px; }
.bonus__val { color: var(--text-3); font-size: 14px; white-space: nowrap; }

/* pricing */
.pricing { display: grid; gap: 36px; align-items: start; }
.stack { display: grid; gap: 4px; margin-top: 28px; }
.stack li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  color: var(--text-2);
  font-size: 17px;
}
.stack .ic {
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  stroke-width: 2.4;
}
.stack b { color: var(--text); }
.pricing__closer {
  margin-top: 20px;
  color: var(--text-3);
  font-size: 15px;
}

.ticket {
  position: relative;
  padding: 28px 24px;
  border-radius: 24px;
  border: 1px solid rgb(143 227 106 / .32);
  background:
    radial-gradient(120% 70% at 100% 0%, rgb(143 227 106 / .14), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow);
}
.ticket__name { font: 700 20px/1.2 var(--f-display); letter-spacing: -.015em; }
.ticket__when { margin-top: 6px; color: var(--text-2); font-size: 15px; }
.ticket__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 22px 0 18px;
  padding-top: 20px;
  border-top: 1px dashed var(--line-2);
}
.ticket__price s { color: var(--text-3); font-size: 22px; }
.ticket__price span {
  font: 800 64px/1 var(--f-display);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.seats--ticket { margin-bottom: 14px; }
.ticket__assure { display: grid; gap: 12px; margin-top: 20px; }
.ticket__assure li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.5;
}
.ticket__assure .ic { margin-top: 2px; color: var(--accent); }
.ticket__fine {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 13.5px;
}
.linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* faq */
.faqwrap { display: grid; gap: 28px; }
.faqwrap__aside .lede a { color: var(--accent); }
.faq { display: grid; gap: 8px; }
.faq details {
  border-radius: var(--r-tile);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .25s ease;
}
.faq details[open] { border-color: var(--line-2); }
.faq summary {
  position: relative;
  padding: 18px 54px 18px 20px;
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: transform .35s var(--ease);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:focus-visible { outline-offset: -2px; border-radius: var(--r-tile); }
.faq details p { padding: 0 20px 20px; color: var(--text-2); max-width: 64ch; }

/* final */
.final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 10vw, 132px) 0 clamp(80px, 10.6vw, 140px);
  text-align: center;
}
.final__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 60% at 50% 100%, rgb(143 227 106 / .2), transparent 70%),
    radial-gradient(40% 40% at 50% 0%, rgb(143 227 106 / .06), transparent 70%);
}
.final__in { display: grid; justify-items: center; gap: 26px; }
.final__title {
  max-width: 21ch;
  font: 800 clamp(32px, 5.4vw, 60px)/1.04 var(--f-display);
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* footer */
.foot {
  padding: 48px 0 120px;
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--text-3);
  font-size: 13px;
}
.foot__pay {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 26px;
}
.foot__pay li {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.foot__disc { max-width: 900px; margin: 0 auto; line-height: 1.65; text-align: center; }
.foot__disc b { color: var(--text-2); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 22px; }
.polbtn {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--text-2);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.polbtn:hover { color: var(--accent); }
.foot__copy { margin-top: 14px; text-align: center; }

/* sticky mobile dock */
.dock {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: var(--z-dock);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border-radius: 20px;
  border: 1px solid var(--line-2);
  background: rgb(22 30 20 / .9);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 50px -12px rgb(0 0 0 / .7);
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition: transform .5s var(--ease), opacity .3s ease;
}
.dock.is-on { transform: none; opacity: 1; pointer-events: auto; }
.dock__price { font: 800 22px/1 var(--f-display); letter-spacing: -.02em; }
.dock__price s { color: var(--text-3); font: 500 14px/1 var(--f-body); }
.dock__cd {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.dock__cd[hidden] { display: none; }
.cta-btn--dock { min-height: 50px; font-size: 15.5px; --pad: 12px 18px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: var(--z-toast);
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--text);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transform: translateX(-50%);
  box-shadow: var(--shadow);
}
.toast[hidden] { display: none; }

[data-bind="compare"][hidden] { display: none; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .h-in {
    opacity: 0;
    transform: translateY(16px);
    animation: hin .8s var(--ease) forwards;
  }
  .hero__copy > .h-in:nth-child(3) { animation-delay: .14s; }
  .hero__copy > .h-in:nth-child(4) { animation-delay: .2s; }
  .hero__copy > .h-in:nth-child(5) { animation-delay: .26s; }
  .hero__copy > .h-in:nth-child(6) { animation-delay: .32s; }
  .hero__copy > .h-in:nth-child(n+7) { animation-delay: .38s; }
  .hero__visual.h-rise { animation-duration: 1s; }
  /* LCP text: transform only, never hidden, so it paints immediately */
  .h-rise { animation: hrise .8s var(--ease) both; }

  .js .rv {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease), transform .8s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js .rv.is-in { opacity: 1; transform: none; }
}
@keyframes hin { to { opacity: 1; transform: none; } }
@keyframes hrise { from { transform: translateY(14px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .steps::after { transform: none; }
}

/* ---------- small phones ---------- */
@media (max-width: 639px) {
  .hero__meta { gap: 6px; }
  .hero__meta li { padding: 7px 10px; gap: 6px; font-size: 13px; }
  .hero__meta li:nth-child(3) { display: none; } /* language already in top bar */
  .countdown { width: 100%; }
  .countdown__cells { display: grid; grid-template-columns: repeat(4, 1fr); }
  .countdown__cells span { min-width: 0; }
  
}

/* ---------- tablet / desktop ---------- */
@media (min-width: 640px) {
  :root { --gut: 28px; }
  .pain { grid-template-columns: 1fr 1fr; }
  .offer { grid-template-columns: auto 1fr; align-items: center; gap: 22px; }
  .offer .cta-btn { width: auto; justify-self: start; }
  .offer__price { flex-direction: column; align-items: flex-start; gap: 2px; }
  .offer__now { font-size: 52px; }
  .countdown__cells span { min-width: 68px; }
  .rail { grid-auto-columns: 240px; }
  .quotes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  :root { --gut: 40px; }
  .hero { padding: 56px 0 88px; }
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 56px;
  }
  .hero__copy { gap: 20px; }
  .hostcard { display: none; }
  .hero__meta { display: flex; }
  .hero__visual {
    position: relative;
    display: block;
    align-self: center;
    width: 100%;
    max-width: 420px;
    justify-self: center;
  }
  .hero__visual picture { position: relative; z-index: 1; display: block; }
  .hero__visual img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: 32px;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 99%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 99%);
  }
  .hero__aura { position: absolute; inset: -12% -16% 0; z-index: 0; pointer-events: none; }
  .hero__aura i {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
  }
  .hero__aura i:nth-child(1) { width: 62%; height: 52%; left: 4%; top: 6%; background: rgb(143 227 106 / .45); }
  .hero__aura i:nth-child(2) { width: 48%; height: 44%; right: 0; top: 30%; background: rgb(60 170 90 / .45); }

  .float {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: rgb(22 30 20 / .82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    font-size: 13.5px;
    font-weight: 600;
  }
  .float span { opacity: .45; }
  .float--live { top: 12%; left: -34px; }
  .float--lang { top: 64%; right: -22px; }
  .process {
    position: absolute;
    z-index: 2;
    left: -56px;
    bottom: -35px;
    padding: 16px 18px;
    border-radius: var(--r-card);
    border: 1px solid var(--line-2);
    background: rgb(22 30 20 / .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
  }
  .process__title { display: block; margin-bottom: 10px; color: var(--text-3); font-size: 12px; font-weight: 500; }
  
  
  

  .demo { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  
  
  

  .learn { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .learn__aside { position: sticky; top: 40px; }

  .fit { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .fit__col { padding: 32px; }

  .host { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 72px; }
  .host__photo { max-width: 380px; }

  .rail-nav { display: flex; }
  .rail-ctrl { display: none; }
  .rail { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; grid-auto-columns: calc((100% - 36px) / 4); }
  .quotes { grid-template-columns: repeat(3, 1fr); }

  .pricing { grid-template-columns: minmax(0, 1fr) 440px; gap: 72px; }
  .ticket { position: sticky; top: 32px; padding: 34px 32px; }

  .faqwrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .faqwrap__aside { position: sticky; top: 40px; }

  .foot { padding-bottom: 48px; }
  .dock, .toast { bottom: 24px; }
  .dock { display: none; }
}

@media (min-width: 1200px) {
  .rail { grid-auto-columns: calc((100% - 48px) / 5); }
}

/* =====================================================================
   v2: urgency, host card, stats, motion layer, registration popup
   ===================================================================== */

/* live indicator (real state: the session is live on Zoom) */
.livedot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.topbar .livedot { background: #d6261f; }
.float .livedot { background: #ff5a4f; }
.livedot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
}
.topbar .livedot::after { border-color: #d6261f; }
.float .livedot::after { border-color: #ff5a4f; }

.topbar__live { display: inline-flex; align-items: center; gap: 8px; }
.topbar__cd { font-variant-numeric: tabular-nums; font-weight: 700; }
.topbar [hidden] { display: none; }

/* mobile host card (replaces meta chips + portrait on small screens) */
.hero__meta { display: none; }
.hostcard {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(110deg, rgb(143 227 106 / .1), transparent 60%), var(--surface);
}
.hostcard__img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 2px rgb(143 227 106 / .35);
}
.hostcard__name { font-size: 14px; color: var(--text-2); line-height: 1.35; }
.hostcard__when { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35; }

/* savings badge, derived from config prices */
.save {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--r-chip);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.save[hidden] { display: none; }
.offer__price { flex-wrap: wrap; row-gap: 6px; }
.save--ticket { margin: -6px 0 16px; }

/* "live only" loss line */
.liveonly {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgb(255 138 107 / .28);
  background: rgb(255 138 107 / .08);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.45;
}
.liveonly .ic { color: var(--warn); margin-top: 2px; }
.liveonly b { color: var(--text); }

.ticket__assure .is-warn .ic { color: var(--warn); }
.ticket__cd {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgb(255 138 107 / .1);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.ticket__cd[hidden] { display: none; }

/* pulse ring around the main CTAs (transform/opacity only) */
.cta-btn--pulse { overflow: visible; }
.cta-btn--pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.cta-btn--pulse::after { display: none; }   /* ring replaces the light sweep here */

/* stats strip */
.stats { padding: 30px 0 6px; }
.stats__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stats__row li {
  padding: 18px 16px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgb(143 227 106 / .07), transparent 55%), var(--surface);
}
.stats__row b {
  display: block;
  color: var(--accent);
  font: 800 clamp(34px, 5vw, 48px)/1 var(--f-display);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stats__row span { display: block; margin-top: 8px; color: var(--text-2); font-size: 14px; line-height: 1.4; }

/* rank rows slide in from the left */
.js .board__rows .rv { transform: translateX(-24px); }
.js .board__rows .rv.is-in { transform: none; }

/* ---------- registration popup ---------- */
.reg {
  width: min(460px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}
.reg::backdrop {
  background: rgb(4 8 3 / .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html.reg-open { overflow: hidden; }
.reg__panel {
  position: relative;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 24px 22px;
  border-radius: 24px;
  border: 1px solid rgb(143 227 106 / .3);
  background:
    radial-gradient(120% 60% at 100% 0%, rgb(143 227 106 / .16), transparent 60%),
    var(--surface);
  box-shadow: 0 40px 100px -20px rgb(0 0 0 / .8);
}
.reg__x {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.reg__x:hover { background: var(--accent); color: var(--accent-ink); }
.reg__head { display: flex; align-items: center; gap: 14px; padding-right: 44px; }
.reg__avatar { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 2px rgb(143 227 106 / .4); }
.reg__title { font: 800 24px/1.1 var(--f-display); letter-spacing: -.025em; }
.reg__sub { margin-top: 4px; color: var(--text-2); font-size: 14px; }

.reg__session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 13.5px;
  font-weight: 600;
}
.reg__session p { display: inline-flex; align-items: center; gap: 8px; }
.reg__session .ic { color: var(--accent); }
.reg__cd {
  padding: 3px 9px;
  border-radius: 8px;
  background: rgb(255 138 107 / .14);
  color: #ffb39f;
  font-variant-numeric: tabular-nums;
}
.reg__cd[hidden] { display: none; }

.reg__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 18px 0 6px;
  counter-reset: none;
}
.reg__steps li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 3px solid var(--line-2);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}
.reg__steps span {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 11px;
}
.reg__steps .is-on { border-color: var(--accent); color: var(--text); }
.reg__steps .is-on span { background: var(--accent); color: var(--accent-ink); }

.reg__form { display: grid; gap: 14px; margin-top: 14px; }
.reg__field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.reg__opt { color: var(--text-3); font-weight: 400; }
.reg__field input,
.reg__field select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--ink);
  color: var(--text);
  font: 500 16px/1.3 var(--f-body);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.reg__field input::placeholder { color: #7d8879; }
.reg__field input:focus,
.reg__field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(143 227 106 / .22);
}
.reg__tel { display: flex; gap: 8px; }
.reg__tel .reg__cc { flex: 0 0 104px; width: 104px; padding-right: 8px; font-size: 15px; }
.reg__tel--in { position: relative; display: block; }
.reg__prefix {
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 14px;
  border-right: 1px solid var(--line-2);
  border-radius: 13px 0 0 13px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  pointer-events: none;
}
.reg__flag { width: 22px; height: 15px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgb(255 255 255 / .12); }
.reg__tel--in input { width: 100%; padding-left: 92px; }
.reg__step {
  margin-top: -6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgb(255 138 107 / .1);
  color: #ffb39f;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.reg__step[hidden] { display: none; }

/* fixed-date price increase notice */
.pricestep {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgb(255 138 107 / .12);
  color: #ffc3b4;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ticket .pricestep { margin-bottom: 14px; text-align: center; }
.hero .pricestep { width: fit-content; max-width: 100%; }
.pricestep[hidden] { display: none; }
.reg__tel input { flex: 1; min-width: 0; letter-spacing: .04em; }
.reg__help { margin-top: 6px; color: var(--text-3); font-size: 13px; }
.reg__err { margin-top: 6px; color: #ff9b82; font-size: 13px; font-weight: 500; }
.reg__err:empty { display: none; }
.reg__field.is-err input,
.reg__field.is-err select:not(.reg__cc) { border-color: #ff9b82; }

.reg__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 2px 2px;
  border-top: 1px dashed var(--line-2);
  color: var(--text-2);
  font-size: 14px;
}
.reg__total s { color: var(--text-3); margin-right: 6px; }
.reg__total b { color: var(--text); font: 800 26px/1 var(--f-display); letter-spacing: -.02em; }
.reg__submit { margin-top: 2px; }
.reg__submit.is-busy { opacity: .8; cursor: progress; }
.reg__submit:disabled { transform: none; }
.reg__status { min-height: 0; font-size: 14px; color: var(--text-2); text-align: center; }
.reg__status:empty { display: none; }
.reg__status.is-err { color: #ff9b82; }
.reg__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  color: var(--text-2);
  font-size: 12.5px;
}
.reg__trust li { display: inline-flex; align-items: center; gap: 6px; }
.reg__trust .ic { color: var(--accent); }
.reg__fine { color: var(--text-3); font-size: 12px; text-align: center; }

@media (max-width: 599px) {
  /* bottom sheet on phones */
  .reg {
    width: 100%;
    margin: auto 0 0;
    max-height: 94dvh;
  }
  .reg__panel {
    max-height: 94dvh;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    border-bottom: 0;
  }
  .reg__panel::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: -8px auto 14px;
    border-radius: 4px;
    background: var(--line-2);
  }
  .reg__title { font-size: 22px; }
}

/* ---------- motion layer (all transform/opacity) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .livedot::after { animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
  .cta-btn--pulse::before { animation: ring 2.6s var(--ease) 1.2s infinite; }
  .hero__aura i:nth-child(1) { animation: drift1 14s ease-in-out infinite alternate; }
  .hero__aura i:nth-child(2) { animation: drift2 17s ease-in-out infinite alternate; }
  .float--live { animation: floaty 6s ease-in-out infinite; }
  .float--lang { animation: floaty 7s ease-in-out 1s infinite reverse; }
  .reg[open] .reg__panel { animation: regIn .45s var(--ease); }
  .reg[open]::backdrop { animation: fadeIn .3s ease; }
  .save { animation: pop .6s var(--ease) .6s both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 599px) {
  .reg[open] .reg__panel { animation: sheetIn .45s var(--ease); }
}
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2); opacity: 0; } }
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.12, 1.45); opacity: 0; } }
@keyframes drift1 { to { transform: translate(14%, 10%) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16%, -12%) scale(1.1); } }
@keyframes floaty { 50% { transform: translateY(-10px); } }
@keyframes regIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes sheetIn { from { transform: translateY(100%); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }

@media (min-width: 900px) {
  .hostcard { display: none; }
  .hero__meta { display: flex; }
}
@media (max-width: 479px) {
  .topbar__long { display: none; }
}

@media (min-width: 640px) {
  .stats__row { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .stats__row li { padding: 22px 20px; }
}

/* ---------- policy modal (markup + js/policy-modal.js unchanged) ---------- */
.policy-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.policy-modal.is-open { display: flex; }
.policy-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgb(5 8 4 / .78);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.policy-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(82vh, 780px);
  border-radius: var(--r-card);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text-2);
  box-shadow: var(--shadow);
  outline: none;
  overscroll-behavior: contain;
}
.policy-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(20px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
}
.policy-modal__title { color: var(--text); font: 700 clamp(18px, 2vw, 22px)/1.2 var(--f-display); }
.policy-modal__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.policy-modal__close:hover { background: var(--accent); color: var(--accent-ink); }
.policy-modal__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.policy-modal__body {
  overflow-y: auto;
  padding: clamp(20px, 3vw, 28px);
  font-size: 15px;
  line-height: 1.7;
  overscroll-behavior: contain;
}
.policy-modal__body h3 { margin: 22px 0 8px; color: var(--text); font: 700 16px/1.3 var(--f-display); }
.policy-modal__body h3:first-child { margin-top: 0; }
.policy-modal__body p { margin: 0 0 12px; }
.policy-modal__body ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.policy-modal__body li { margin-bottom: 4px; }
.policy-modal__body strong { color: var(--text); }
.policy-modal__body .pm__stamp { margin-bottom: 16px; color: var(--text-3); font-size: 13px; font-weight: 600; }

@media (max-width: 640px) {
  .policy-modal { padding: 0; align-items: flex-end; }
  .policy-modal__panel { width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; }
}

/* ---------- Trustpilot reviews (same layout as AlgoInvesting.html: score box + 3-column review cards) ---------- */
.tp { --tp: #00b67a; display: grid; gap: 12px; margin-top: 20px; }
.tp__score {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 16px 18px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--line-2);
  transition: border-color .2s;
}
.tp__score:hover { border-color: var(--tp); }
.tp__num { font-size: 16px; font-weight: 700; color: var(--text-2); }
.tp__num b { font-family: var(--f-display); font-size: 26px; font-weight: 800; color: var(--text); }
.tp__count { display: inline-flex; align-items: center; gap: 6px; width: 100%; font-size: 14px; font-weight: 600; color: var(--text-2); }
.tp__count .ic { width: 15px; height: 15px; }
.tp__list { display: grid; gap: 10px; }
.tpq {
  display: grid; align-content: start; gap: 8px;
  padding: 16px;
  border-radius: var(--r-tile);
  background: var(--surface);
  border: 1px solid var(--line);
}
.tpq__text { font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--text); }
.tpq__who { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; color: var(--text-3); }
.tpq__who b { color: var(--text); }

/* Trustpilot-style stars (4.6 shows as 4.5, like Trustpilot) */
.tp .stars { display: inline-flex; gap: 2px; flex: none; }
.tp .stars i {
  width: 20px; height: 20px;
  background: var(--tp) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.tp .stars i.is-half {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z'/%3E%3C/svg%3E") center / 72% no-repeat,
    linear-gradient(90deg, var(--tp) 50%, #4a5646 50%);
}
.tp .stars--xs i { width: 14px; height: 14px; }

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

/* ---------- Featured in: scrolling logo strip (right to left) ----------
   Two identical lists sit side by side and the strip moves by exactly -50%, so the loop has no seam.
   Hovering pauses it; reduced-motion users get a plain, scrollable row. */
.press__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.press__strip { display: flex; width: max-content; animation: press-scroll 40s linear infinite; }
.press__marquee:hover .press__strip,
.press__marquee:focus-within .press__strip { animation-play-state: paused; }
.press__strip .press__row {
  flex: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0 34px;
  padding-inline-end: 34px;
}
.press__strip .press__row li { flex: none; }
@keyframes press-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .press__marquee { overflow-x: auto; scrollbar-width: none; }
  .press__strip .press__row[aria-hidden="true"] { display: none; }
}

/* ---------- Hero host card (replaces the old "momentum process" card; same box, host details inside) ----------
   Phones already show .hostcard in the copy column, so this card only appears from 900px up, where it
   floats over the photo. */
.process--host { display: none; max-width: 330px; }
@media (min-width: 900px) { .process--host { display: block; } }
.process__name { display: block; color: var(--text); font: 700 20px/1.2 var(--f-display); }
.process__role { display: block; margin-top: 4px; color: var(--text-2); font-size: 13px; line-height: 1.4; }

/* Razorpay Checkout opens in an iframe with a transparent backdrop. The page declares `color-scheme: dark`
   on :root, and when an iframe's color-scheme differs from the page's, the browser paints it an opaque
   white canvas, which hid the page behind the checkout. Resetting the iframe's own scheme keeps the
   backdrop transparent (the page stays visible, dimmed, as on AlgoInvesting.html). */
iframe { color-scheme: normal; }

/* "Do you see yourself in any of these?" boxes: same four cards as the numbers strip, with a short title
   in place of the big number. */
.stats__title { margin-bottom: 20px; text-align: center; font-size: clamp(24px, 2.6vw, 34px); }
.stats--who .stats__row b {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.2;
  letter-spacing: -.01em;
  font-variant-numeric: normal;
}
.stats--who .stats__row span { margin-top: 6px; font-size: 13px; }
.stats--who .cta-row { margin-top: 28px; }

/* Host section photo: smaller and centred on phones/tablets so it does not fill the whole screen. */
@media (max-width: 899px) {
  .host { gap: 24px; }
  .host__photo { max-width: 240px; margin-inline: auto; }
}

/* Hero: centred on phones and tablets (where it stacks above the photo). Desktop keeps the left-aligned layout. */
@media (max-width: 899px) {
  .hero__copy { justify-items: center; text-align: center; }
  .hero__sub { margin-inline: auto; }
  .hostcard { justify-content: center; text-align: left; }
  .offer { grid-template-columns: 1fr; justify-items: center; }
  .offer__price { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; }
  .offer .cta-btn { justify-self: center; }
  .liveonly { justify-content: center; text-align: center; }
  .countdown__label { text-align: center; }
}

/* "Live | No Recordings" notice: one line. Smaller type on narrow screens so the sentence fits; below
   360px it may wrap rather than overflow. */
.liveonly { align-items: center; padding: 9px 12px; font-size: clamp(9.5px, 2.6vw, 14px); }
@media (min-width: 360px) { .liveonly span { white-space: nowrap; } }
.liveonly .ic { margin-top: 0; flex: none; }